From ee79ee0cebdb2529b824486d01aa769535da2603 Mon Sep 17 00:00:00 2001
From: Kevin Zheng <kaiwen530@gmail.com>
Date: Wed, 8 Nov 2023 16:09:43 +1100
Subject: [PATCH] Implement for loop in trace

---
 .../src/components/renderer/parser/parse.ts   | 34 +++++++++++++++----
 .../src/d2-renderer/D2RendererOptions.ts      |  2 +-
 resources/traces/v1.0.5/grid-astar.trace.json |  3 +-
 resources/traces/v1.0.5/loop.trace.yaml       | 24 +++++++++++++
 resources/traces/v1.0.5/tile.trace.json       |  6 +---
 5 files changed, 54 insertions(+), 15 deletions(-)
 create mode 100644 resources/traces/v1.0.5/loop.trace.yaml

diff --git a/client/src/components/renderer/parser/parse.ts b/client/src/components/renderer/parser/parse.ts
index 8e21639e..24b30b41 100644
--- a/client/src/components/renderer/parser/parse.ts
+++ b/client/src/components/renderer/parser/parse.ts
@@ -1,14 +1,28 @@
-import { Dictionary as Dict } from "lodash";
+import { Dictionary as Dict, flatMap, range } from "lodash";
 import {
   ComponentDefinition,
   ComponentDefinitionMap,
   IntrinsicComponentMap,
   ParsedComponent,
   ParsedComponentDefinition,
+  TraceComponent,
 } from "protocol";
 import { applyScope } from "./applyScope";
 import { Context, Key } from "./Context";
 import { normalize } from "./normalize";
+
+function parseFor(component: TraceComponent<string, Dict<any>>) {
+  const { $for, ...rest } = component;
+  if ($for) {
+    const { $let = "i", $from = 0, $to = 1, $step = 1 } = $for;
+    return range($from, $to, $step).map((i) =>
+      applyScope(normalize({ [$let]: i }), normalize(rest as any))
+    );
+  } else {
+    return [component];
+  }
+}
+
 /**
  * A parser for a list of Components
  * @param definition a list of Components
@@ -20,11 +34,17 @@ export function parse<T extends IntrinsicComponentMap>(
   components: ComponentDefinitionMap,
   context: Context<T[Key<T>]> = {}
 ): ParsedComponentDefinition<T> {
-  return definition.flatMap((component) => {
-    const { $ } = component;
-    const scoped = applyScope(normalize(context), normalize(component) as any);
-    return $ in components
-      ? parse(components[$], components, scoped)
-      : [scoped as ParsedComponent<Key<T>, T[Key<T>]>];
+  return definition.flatMap((c) => {
+    const { $ } = c;
+    const c2 = parseFor(c);
+    return flatMap(c2, (component) => {
+      const scoped = applyScope(
+        normalize(context),
+        normalize(component) as any
+      );
+      return $ in components
+        ? parse(components[$], components, scoped)
+        : [scoped as ParsedComponent<Key<T>, T[Key<T>]>];
+    });
   });
 }
diff --git a/internal-renderers/src/d2-renderer/D2RendererOptions.ts b/internal-renderers/src/d2-renderer/D2RendererOptions.ts
index 6c879022..5e4d8dcb 100644
--- a/internal-renderers/src/d2-renderer/D2RendererOptions.ts
+++ b/internal-renderers/src/d2-renderer/D2RendererOptions.ts
@@ -40,7 +40,7 @@ export const defaultD2RendererOptions: D2RendererOptions = {
     height: 64,
   },
   tileSubdivision: 0,
-  refreshInterval: 1000 / 60,
+  refreshInterval: 1000 / 30,
   animationDuration: 150,
   debounceInterval: 75,
   backgroundColor: "#ffffff",
diff --git a/resources/traces/v1.0.5/grid-astar.trace.json b/resources/traces/v1.0.5/grid-astar.trace.json
index 6380fbbb..6342e4c4 100644
--- a/resources/traces/v1.0.5/grid-astar.trace.json
+++ b/resources/traces/v1.0.5/grid-astar.trace.json
@@ -1,7 +1,6 @@
 {
   "version": "1.0.5",
   "render": {
-    "context": {},
     "components": {
       "tile": [
         {
@@ -15,7 +14,7 @@
       ]
     },
     "views": {
-      "main": { "renderer": "2d-pixi", "components": [{ "$": "tile" }] }
+      "main": { "components": [{ "$": "tile" }] }
     },
     "path": {
       "pivot": { "x": "{{$.event.x + 0.5}}", "y": "{{$.event.y + 0.5}}" },
diff --git a/resources/traces/v1.0.5/loop.trace.yaml b/resources/traces/v1.0.5/loop.trace.yaml
new file mode 100644
index 00000000..df527cfb
--- /dev/null
+++ b/resources/traces/v1.0.5/loop.trace.yaml
@@ -0,0 +1,24 @@
+version: 1.0.5
+render:
+  components:
+    tile:
+      - $: rect
+        width: 1
+        height: 1
+        x: "{{$.event.x + $.i}}"
+        y: "{{$.event.y}}"
+        fill: "{{$.color[$.event.type]}}"
+        $for:
+          $from: 0 # Optional, default 0
+          $to: 10 # Optional, default 1
+          $step: 2 # Optional, default 1
+          $let: i # Optional, default "i"
+  views:
+    main:
+      components:
+        - $: tile
+events:
+  - type: source
+    id: 1736
+    x: 8
+    y: 15
diff --git a/resources/traces/v1.0.5/tile.trace.json b/resources/traces/v1.0.5/tile.trace.json
index 273417e5..58e378d3 100644
--- a/resources/traces/v1.0.5/tile.trace.json
+++ b/resources/traces/v1.0.5/tile.trace.json
@@ -30,11 +30,7 @@
       ]
     },
     "views": {
-      "main": { "renderer": "2d-pixi", "components": [{ "$": "tileboard" }] },
-      "someOtherView": {
-        "renderer": "2d-pixi",
-        "components": [{ "$": "tileboard" }]
-      }
+      "main": { "components": [{ "$": "tileboard" }] }
     }
   },
   "events": [