More debug enhancement

src/lib/context.ts

@@ -54,36 +54,6 @@ export function setContextItem<T>(prop: string, value: T) {
   });
 }
 
-if (debug) {
-  setInterval(() => {
-    let ctxEl = document.getElementById("context");
-    if (!ctxEl) {
-      ctxEl = document.createElement("div");
-      ctxEl.id = "context";
-      document.body.append(ctxEl);
-    }
-    ctxEl.innerHTML = "";
-    const div = document.createElement("div");
-    const pre = document.createElement("pre");
-    const h3 = document.createElement("h3");
-    h3.textContent = "Default";
-    div.append(h3);
-    pre.textContent = safeStringify(defaultContext);
-    div.append(pre);
-    ctxEl.append(div);
-    for (const [idx, ctx] of contextStack.entries()) {
-      const div = document.createElement("div");
-      const pre = document.createElement("pre");
-      const h3 = document.createElement("h3");
-      h3.textContent = "CTX " + idx;
-      div.append(h3);
-      pre.textContent = safeStringify(ctx);
-      div.append(pre);
-      ctxEl.append(div);
-    }
-  }, 1000);
-}
-
 function safeStringify(obj: any) {
   const seen = new WeakSet();
   return JSON.stringify(obj, (key, value) => {

src/main.ts

@@ -37,15 +37,32 @@ const colors = [
   "violet",
 ];
 
+const _debug: Debug = JSON.parse(localStorage.getItem("debug") || "0") || {
+  track: false,
+  train: false,
+  path: false,
+  car: false,
+};
+
+const debug = new Proxy(_debug, {
+  get: (_, prop: string) => {
+    // if (prop !in _debug) {
+    //   (_debug as any)[prop] = false;
+    // }
+    return prop in _debug ? (_debug as any)[prop] : false;
+  },
+  set: (_, prop: string, value: boolean) => {
+    (_debug as any)[prop] = value;
+    localStorage.setItem("debug", JSON.stringify(_debug));
+    return true;
+  },
+});
+
 setDefaultContext({
   inputManager,
   doodler,
   resources,
-  debug: {
-    track: false,
-    train: false,
-    path: false,
-  },
+  debug,
   colors,
 });
 

src/train/train.ts

@@ -71,6 +71,7 @@ export class Train {
   }
 
   move(dTime: number) {
+    if (!this.speed) return;
     this.t = this.t + this.speed * dTime * 10;
     // % this.path.evenPoints.length; // This should probably be on the track system
     // console.log(this.t);
@@ -127,10 +128,17 @@ export class Train {
 
     if (debug.train) {
       const track = getContextItem<TrackSystem>("track");
-      for (const segmentId of this.segments) {
+      const colors = getContextItem<string[]>("colors").slice();
+      colors.push(colors.shift()!);
+      colors.push(colors.shift()!);
+      colors.push(colors.shift()!);
+      for (const [i, segmentId] of this.segments.entries()) {
         const segment = track.getSegment(segmentId);
         segment &&
-          doodler.drawBezier(...segment.points, { color: "red", weight: 3 });
+          doodler.drawBezier(...segment.points, {
+            color: colors[i % colors.length],
+            weight: 3,
+          });
       }
     }