Yay a devtools!

.gitignore

@@ -23,8 +23,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-# Packed devtools
-devtools.zip
-
-temp.*

.temp/deno.lock

@@ -1,6 +1,7 @@
 {
   "version": "4",
   "specifiers": {
+    "jsr:@bearmetal/doodler@0.0.5-b": "0.0.5-b",
     "jsr:@luca/esbuild-deno-loader@*": "0.11.0",
     "jsr:@luca/esbuild-deno-loader@0.11.1": "0.11.1",
     "jsr:@std/assert@*": "1.0.10",
@@ -24,6 +25,9 @@
     "@bearmetal/doodler@0.0.4": {
       "integrity": "b631083cff84994c513f70d1f09e6a9256edabcb224112c93a9ca6a87c88a389"
     },
+    "@bearmetal/doodler@0.0.5-b": {
+      "integrity": "94f265ea21162f943291526800de7f3f6560634a4fe762a38cd73892685b6742"
+    },
     "@luca/esbuild-deno-loader@0.11.0": {
       "integrity": "c05a989aa7c4ee6992a27be5f15cfc5be12834cab7ff84cabb47313737c51a2c",
       "dependencies": [
@@ -204,11 +208,7 @@
       ]
     }
   },
-  "redirects": {
-    "https://deno.land/x/clipboard/mod.ts": "https://deno.land/x/clipboard@v0.0.3/mod.ts"
-  },
   "remote": {
-    "https://deno.land/x/clipboard@v0.0.3/mod.ts": "5b68fe3b710b852de5273c135fc3c11b2b4050577401ee994161380bd8cab219",
     "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/canvas.ts": "aadfb4b2e9acce34d4a5da3f9027be642c93229bbfc2641cb55301542cbb87bf",
     "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/geometry/constants.ts": "4f4cf7bf49ac871d984e9b43896783b0cc8ab0ea60d0fc4c8c582f7e00c3df5a",
     "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/geometry/vector.ts": "a08ecff64c5436a28c6451a31c68fc912d25f941aabafb79418fa0a1aeffa9d2",
@@ -232,7 +232,7 @@
   },
   "workspace": {
     "dependencies": [
-      "jsr:@bearmetal/doodler@0.0.5"
+      "jsr:@bearmetal/doodler@0.0.5-b"
     ]
   }
 }

.temp/temp.json

@@ -1 +0,0 @@
-[{"p":[[200,24,0],[233,24,0],[264.87555226753926,32.541028488383176,0],[293.45439059242574,49.041028488383176,0]],"id":"11d7561a-3172-4ad7-9d53-6f65f49ce8c3","bNeighbors":["93e4d69d-10f2-4ecc-a4d0-560ee71708e8"],"fNeighbors":["e44c3a93-01f0-42f1-aee9-939cbde5903b"]},{"p":[[293.45439059242574,49.041028488383176,0],[322.0332289173122,65.54102848838318,0],[345.3677526964683,88.87555226753923,0],[361.8677526964683,117.45439059242571,0]],"id":"e44c3a93-01f0-42f1-aee9-939cbde5903b","bNeighbors":["11d7561a-3172-4ad7-9d53-6f65f49ce8c3"],"fNeighbors":["bf9833f2-fd66-45fb-924d-f40b7c863c26"]},{"p":[[361.8677526964683,117.45439059242571,0],[378.3677526964683,146.0332289173122,0],[386.9087811848515,177.90878118485145,0],[386.9087811848515,210.90878118485148,0]],"id":"bf9833f2-fd66-45fb-924d-f40b7c863c26","bNeighbors":["e44c3a93-01f0-42f1-aee9-939cbde5903b"],"fNeighbors":["081c81f3-8fe7-4c71-babd-1d02d52c3385"]},{"p":[[386.9087811848515,210.90878118485148,0],[386.9087811848515,243.90878118485148,0],[378.3677526964683,275.78433345239074,0],[361.8677526964683,304.3631717772772,0]],"id":"081c81f3-8fe7-4c71-babd-1d02d52c3385","bNeighbors":["bf9833f2-fd66-45fb-924d-f40b7c863c26"],"fNeighbors":["d1380635-1dba-4180-8038-931289a56d17"]},{"p":[[361.8677526964683,304.3631717772772,0],[345.3677526964683,332.9420101021637,0],[322.0332289173122,356.2765338813198,0],[293.45439059242574,372.7765338813198,0]],"id":"d1380635-1dba-4180-8038-931289a56d17","bNeighbors":["081c81f3-8fe7-4c71-babd-1d02d52c3385"],"fNeighbors":["8fe94c53-c0be-4f0d-986b-f37e143e62d7"]},{"p":[[293.45439059242574,372.7765338813198,0],[264.87555226753926,389.2765338813198,0],[233,397.81756236970296,0],[200,397.81756236970296,0]],"id":"8fe94c53-c0be-4f0d-986b-f37e143e62d7","bNeighbors":["d1380635-1dba-4180-8038-931289a56d17"],"fNeighbors":["1542c063-b548-4d27-9fd8-c7a8344b05cb"]},{"p":[[200,397.81756236970296,0],[167,397.81756236970296,0],[135.12444773246074,389.2765338813198,0],[106.54560940757426,372.7765338813198,0]],"id":"1542c063-b548-4d27-9fd8-c7a8344b05cb","bNeighbors":["8fe94c53-c0be-4f0d-986b-f37e143e62d7"],"fNeighbors":["9be20051-651f-4cca-b6f1-ca80d5db7635"]},{"p":[[106.54560940757426,372.7765338813198,0],[77.96677108268779,356.2765338813198,0],[54.6322473035317,332.94201010216375,0],[38.1322473035317,304.3631717772772,0]],"id":"9be20051-651f-4cca-b6f1-ca80d5db7635","bNeighbors":["1542c063-b548-4d27-9fd8-c7a8344b05cb"],"fNeighbors":["4b7ff960-9fe7-48b3-b64e-9e32f60b0d2f"]},{"p":[[38.1322473035317,304.3631717772772,0],[21.632247303531692,275.7843334523908,0],[13.091218815148487,243.9087811848515,0],[13.09121881514848,210.90878118485153,0]],"id":"4b7ff960-9fe7-48b3-b64e-9e32f60b0d2f","bNeighbors":["9be20051-651f-4cca-b6f1-ca80d5db7635"],"fNeighbors":["0c481aa2-92de-4517-8e76-6c3f163f3dde"]},{"p":[[13.09121881514848,210.90878118485153,0],[13.091218815148467,177.90878118485153,0],[21.632247303531646,146.03322891731227,0],[38.132247303531635,117.45439059242577,0]],"id":"0c481aa2-92de-4517-8e76-6c3f163f3dde","bNeighbors":["4b7ff960-9fe7-48b3-b64e-9e32f60b0d2f"],"fNeighbors":["c62384ad-3fec-4479-9596-1173a6e651bb"]},{"p":[[38.132247303531635,117.45439059242577,0],[54.63224730353162,88.87555226753928,0],[77.96677108268767,65.54102848838318,0],[106.54560940757415,49.041028488383176,0]],"id":"c62384ad-3fec-4479-9596-1173a6e651bb","bNeighbors":["0c481aa2-92de-4517-8e76-6c3f163f3dde"],"fNeighbors":["93e4d69d-10f2-4ecc-a4d0-560ee71708e8"]},{"p":[[106.54560940757415,49.041028488383176,0],[135.12444773246062,32.541028488383176,0],[166.9999999999999,23.99999999999997,0],[199.9999999999999,23.99999999999997,0]],"id":"93e4d69d-10f2-4ecc-a4d0-560ee71708e8","bNeighbors":["c62384ad-3fec-4479-9596-1173a6e651bb"],"fNeighbors":["11d7561a-3172-4ad7-9d53-6f65f49ce8c3"]}]

deno.json

@@ -3,8 +3,7 @@
     "dev": "deno run -A --node-modules-dir npm:vite",
     "build": "deno run -A --node-modules-dir npm:vite build",
     "preview": "deno run -A --node-modules-dir npm:vite preview",
-    "serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/",
-    "pack-devtools": "rm -rf devtools.zip && deno run -A npm:web-ext build -o --source-dir devtools --artifacts-dir devtools.zip"
+    "serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
   },
   "compilerOptions": {
     "lib": [
@@ -14,9 +13,8 @@
     ]
   },
   "imports": {
-    "@bearmetal/doodler": "jsr:@bearmetal/doodler@0.0.5-e",
+    "@bearmetal/doodler": "jsr:@bearmetal/doodler@0.0.5-b",
     "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
     "vite": "npm:vite@^6.0.1"
-  },
-  "nodeModulesDir": "auto"
+  }
 }

devtools/devtools.js

@@ -1,6 +1,6 @@
 // Create a new devtools panel named "Context Stack"
 browser.devtools.panels.create(
-  "Smoke and Rails", // Tab title
+  "Context Stack", // Tab title
   "train icon.png", // Icon for your panel (optional)
   "panel.html", // HTML page for your panel content
 );

devtools/manifest.json

@@ -1,9 +1,8 @@
 {
   "manifest_version": 2,
-  "name": "SNR DevTools",
+  "name": "Context Stack DevTools",
   "version": "1.0",
   "description": "A devtools panel to view and edit context stack values.",
-  "author": "Emmaline Autumn",
   "devtools_page": "devtools.html",
   "background": {
     "scripts": [
@@ -25,13 +24,5 @@
     "devtools",
     "tabs",
     "*://*/*"
-  ],
-  "icons": {
-    "48": "train icon.png"
-  },
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "snrdt@cyborggrizzly.com"
-    }
-  }
+  ]
 }

devtools/panel.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Smoke and Rails</title>
+    <title>Context Stack</title>
     <style>
       body {
         font-family: sans-serif;
@@ -40,9 +40,9 @@
   </head>
 
   <body>
-    <h2>Smoke and Rails Debugger</h2>
-    <button id="refresh">Refresh</button>
+    <h1>Context Stack</h1>
     <div id="contextContainer"></div>
+    <button id="refresh">Refresh</button>
     <script src="panel.js"></script>
   </body>
 </html>

devtools/panel.js

@@ -36,7 +36,7 @@ function generateObjectForm(obj, path = "") {
   const detail = document.createElement("details");
   detail.open = path === "";
   const summary = document.createElement("summary");
-  summary.textContent = path.split(".").at(-1);
+  summary.textContent = path;
   detail.appendChild(summary);
   const form = document.createElement("form");
   let count = 0;

src/inputs.ts

@@ -2,12 +2,8 @@ import { getContextItem } from "./lib/context.ts";
 import { InputManager } from "./lib/input.ts";
 import { StateMachine } from "./state/machine.ts";
 import { States } from "./state/states/index.ts";
-import { TrackSystem } from "./track/system.ts";
 
 export function bootstrapInputs() {
-  addEventListener("keydown", (e) => {
-    e.preventDefault();
-  });
   const inputManager = getContextItem<InputManager>("inputManager");
   inputManager.onKey("e", () => {
     const state = getContextItem<StateMachine<States>>("state");
@@ -18,22 +14,4 @@ export function bootstrapInputs() {
       localStorage.removeItem("track");
     }
   });
-  inputManager.onKey("c", () => {
-    if (inputManager.getKeyState("Control")) {
-      const currentTrack = localStorage.getItem("track");
-      navigator.clipboard.writeText(currentTrack ?? "[]");
-    }
-  });
-  addEventListener("paste", async (e) => {
-    let data = e.clipboardData?.getData("text/plain");
-    if (!data) return;
-    try {
-      // data = data.trim().replace(/^"|"$/g, "").replace(/\\"/g, '"');
-      console.log(data);
-      const track = TrackSystem.deserialize(JSON.parse(data));
-      localStorage.setItem("track", track.serialize());
-    } catch (e) {
-      console.error(e);
-    }
-  });
 }

src/lib/context.ts

@@ -1,33 +1,10 @@
-import { ZoomableDoodler } from "@bearmetal/doodler";
-import { TrackSegment } from "../track/system.ts";
-import { Train, TrainCar } from "../train/train.ts";
-import { InputManager } from "./input.ts";
-import { ResourceManager } from "./resources.ts";
-
-interface ContextMap {
-  inputManager: InputManager;
-  doodler: ZoomableDoodler;
-  resources: ResourceManager;
-  debug: Debug;
-  colors: [
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    string,
-    ...string[],
-  ];
-  [key: string]: unknown;
-}
-
 type ContextStore = Record<string, any>;
 
 const defaultContext: ContextStore = {};
 const contextStack: ContextStore[] = [defaultContext];
 
+const debug = JSON.parse(localStorage.getItem("debug") || "false");
+
 export function setDefaultContext(context: ContextStore) {
   Object.assign(defaultContext, context);
 }
@@ -57,10 +34,6 @@ export const ctx = new Proxy(
 export function getContext() {
   return ctx;
 }
-export function getContextItem<K extends keyof ContextMap>(
-  prop: K,
-): ContextMap[K];
-export function getContextItem<T>(prop: string): T;
 export function getContextItem<T>(prop: string): T {
   return ctx[prop] as T;
 }
@@ -77,6 +50,36 @@ 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) => {
@@ -86,53 +89,6 @@ function safeStringify(obj: any) {
       }
       seen.add(value);
     }
-    if (value instanceof Map) {
-      const val: Record<string, unknown> = {};
-      for (const [k, v] of value) {
-        if (typeof k !== "string") continue;
-        val[k] = v;
-      }
-      seen.add(value);
-      return val;
-    }
-
-    if (value instanceof Set) {
-      seen.add(value);
-      value = Array.from(value);
-      return value;
-    }
-
-    if (value instanceof TrackSegment) {
-      seen.add(value);
-      const val = { ...value };
-      (val as any).frontNeighbours = value.frontNeighbours.map((n) => n.id);
-      (val as any).backNeighbours = value.backNeighbours.map((n) => n.id);
-      return val;
-    }
-
-    // if (value instanceof Train) {
-    //   const val = { ...value };
-    //   // val.segments = value.segments.map((s) => s.id);
-    //   delete (val as any).path;
-    //   delete (val as any).nodes;
-    //   delete (val as any).cars;
-    //   delete (val as any).t;
-
-    //   // val.t
-    //   // val.
-    //   return null;
-    // }
-
-    // if (value instanceof InputManager) {
-    //   return {};
-    // }
-
-    // if (value instanceof TrainCar) {
-    //   const val = { ...value };
-
-    //   return val;
-    // }
-
     return value;
   }, 2);
 }
@@ -142,25 +98,17 @@ const updateContextValue = (
   value: unknown,
   depth = contextStack.length - 1,
 ) => {
+  console.log("updateContextValue", key, value, depth);
   const keys = key.split(".");
   let context = contextStack[depth] ?? defaultContext;
   for (let i = 0; i < keys.length - 1; i++) {
-    if (context instanceof Map) {
-      context = context.get(keys[i]);
-    } else {
     context = context[keys[i]];
   }
-  }
-  if (context instanceof Map) {
-    context.set(keys.at(-1)!, value);
-  } else {
   context[keys.at(-1)!] = value;
-  }
 };
 if (location.hostname === "localhost") {
   globalThis.getContextStack = getContextStack;
   globalThis.updateContextValue = updateContextValue;
-  globalThis.contextStack = contextStack;
 }
 
 declare global {

src/lib/debuggable.ts

@@ -1,35 +0,0 @@
-import { getContextItem } from "./context.ts";
-
-export abstract class Drawable {
-  abstract draw(...args: unknown[]): void;
-}
-
-export abstract class Debuggable extends Drawable {
-  constructor(...debugKeys: [boolean | keyof Debug, ...(keyof Debug)[]]) {
-    super();
-    if (import.meta.env.DEV) {
-      let drawFirst = false;
-      if (typeof debugKeys[0] === "boolean") {
-        drawFirst = debugKeys.shift() as boolean;
-      }
-      const draw = this.draw.bind(this);
-      this.draw = drawFirst
-        ? (...args: unknown[]) => {
-          draw(...args);
-          const debug = getContextItem<Debug>("debug");
-          if (debugKeys.some((k) => debug[k as keyof Debug])) {
-            this.debugDraw();
-          }
-        }
-        : (...args: unknown[]) => {
-          const debug = getContextItem<Debug>("debug");
-          if (debugKeys.some((k) => debug[k as keyof Debug])) {
-            this.debugDraw();
-          }
-          draw(...args);
-        };
-    }
-  }
-
-  abstract debugDraw(...args: unknown[]): void;
-}

src/lib/resources.ts

@@ -1,64 +1,24 @@
-// namespace:type/location
-type sprite = "sprite";
-type img = "img";
-type audio = "audio";
-type ResourceType = keyof ResourceMap;
-type SpriteId = `${string}:${sprite}/${string}`;
-
-interface ResourceMap {
-  sprite: HTMLImageElement;
-  img: HTMLImageElement;
-  audio: HTMLAudioElement;
-}
-type NamespacedId<T extends keyof ResourceMap> = `${string}:${T}/${string}`;
-
-/**
- * Resources are stored in namespaces, and can be accessed by their namespaced id.
- * Sprites are located in blob storage as a single png file.
- * Audio is located in blob storage as a single mp3 file.
- *
- * Custom resources can be loaded via the public API, however they will not be loaded on other clients.
- * Ideally, engine and car definitions should be stored in the resource manager so that custom cars can be created.
- */
 export class ResourceManager {
   private resources: Map<string, unknown> = new Map();
   private statuses: Map<string, Promise<boolean>> = new Map();
 
-  get<K extends ResourceType>(name: NamespacedId<K>): ResourceMap[K];
-  get<T>(name: string): T;
-  get<T>(
-    name: string,
-  ): T {
+  get<T>(name: string): T {
     if (!this.resources.has(name)) {
       throw new Error(`Resource ${name} not found`);
     }
     return this.resources.get(name) as T;
   }
 
-  set<T extends keyof ResourceMap>(
-    name: NamespacedId<T>,
-    value: unknown,
-  ) {
-    const identifier = parseNamespacedId(name);
+  set(name: string, value: unknown) {
     if (typeof (value as EventSource).addEventListener === "function") {
-      if (value instanceof Image || value instanceof Audio) {
-        // During development, we can use the local file system
-        value.src =
-          `/blobs/${identifier.namespace}/${identifier.type}/${identifier.name}${
-            extensionByType(identifier.type)
-          }`;
-        console.log(value.src);
-      }
       this.statuses.set(
         name,
         new Promise((resolve) => {
           const onload = () => {
             this.resources.set(name, value);
             resolve(true);
-            (value as EventSource).removeEventListener("loadeddata", onload);
             (value as EventSource).removeEventListener("load", onload);
           };
-          (value as EventSource).addEventListener("loadeddata", onload);
           (value as EventSource).addEventListener("load", onload);
         }),
       );
@@ -76,28 +36,3 @@ export class ResourceManager {
     return Promise.all(Array.from(this.statuses.values()));
   }
 }
-
-function extensionByType(type: ResourceType) {
-  switch (type) {
-    case "img":
-      return ".png";
-    case "audio":
-      return ".mp3";
-    case "sprite":
-      return ".png";
-  }
-}
-
-type NamespaceIdentifier<T extends ResourceType> = {
-  namespace: string;
-  type: T;
-  name: string;
-};
-
-function parseNamespacedId<T extends ResourceType>(
-  id: NamespacedId<T>,
-): NamespaceIdentifier<T> {
-  const [namespace, location] = id.split(":");
-  const [type, ...name] = location.split("/");
-  return { namespace, type: type as T, name: name.join("/") };
-}

src/main.ts

@@ -20,14 +20,11 @@ const resources = new ResourceManager();
 const doodler = new ZoomableDoodler({
   fillScreen: true,
   bg: "#302040",
-  noSmooth: true,
-}, () => {});
-setTimeout(() => {
-  (doodler as any as { ctx: CanvasRenderingContext2D }).ctx
+});
+(doodler as any as { ctx: CanvasRenderingContext2D }).ctx
   .imageSmoothingEnabled = false;
-}, 0);
 // doodler.minScale = 0.1;
-// (doodler as any).scale = 3.14;
+// (doodler as any).scale = doodler.maxScale;
 
 const colors = [
   "red",
@@ -40,39 +37,12 @@ const colors = [
   "violet",
 ];
 
-const _fullDebug: Debug = {
-  track: false,
-  train: false,
-  path: false,
-  car: false,
-  bogies: false,
-  angles: false,
-  aabb: false,
-  segment: false,
-};
-
-const storedDebug = JSON.parse(localStorage.getItem("debug") || "0");
-const _debug: Debug = Object.assign({}, _fullDebug, storedDebug);
-
-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,
+  debug: true,
+  showEnds: true,
   colors,
 });
 
@@ -113,12 +83,3 @@ setInterval(() => {
 
 const gameLoop = new GameLoop();
 gameLoop.start(state);
-
-if (import.meta.env.DEV) {
-  console.log("Running in development mode");
-}
-
-globalThis.TWO_PI = Math.PI * 2;
-declare global {
-  var TWO_PI: number;
-}

src/math/angle.ts

@@ -1,7 +0,0 @@
-export function angleToRadians(angle: number) {
-  return angle / 180 * Math.PI;
-}
-
-export function angleToDegrees(angle: number) {
-  return angle * 180 / Math.PI;
-}

src/math/lerp.ts

@@ -9,19 +9,3 @@ export const map = (
   x2: number,
   y2: number,
 ) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
-
-export function lerpAngle(a: number, b: number, t: number) {
-  let diff = b - a;
-  // Wrap difference to [-PI, PI]
-  while (diff < -Math.PI) diff += 2 * Math.PI;
-  while (diff > Math.PI) diff -= 2 * Math.PI;
-  return a + diff * t;
-}
-
-export function averageAngles(angle1: number, angle2: number) {
-  // Convert angles to unit vectors
-  const x = Math.cos(angle1) + Math.cos(angle2);
-  const y = Math.sin(angle1) + Math.sin(angle2);
-  // Compute the angle of the resulting vector
-  return Math.atan2(y, x);
-}

src/state/states/EditTrackState.ts

@@ -14,10 +14,6 @@ import {
   SBendLeft,
   SBendRight,
   StraightTrack,
-  TightBankLeft,
-  TightBankRight,
-  WideBankLeft,
-  WideBankRight,
 } from "../../track/shapes.ts";
 import { TrackSegment } from "../../track/system.ts";
 import { clamp } from "../../math/clamp.ts";
@@ -44,6 +40,18 @@ export class EditTrackState extends State<States> {
     const track = getContextItem<TrackSystem>("track");
     const doodler = getContextItem<Doodler>("doodler");
 
+    // For moving a segment, i.e. the currently active one
+    // const segment = track.lastSegment;
+    // if (segment) {
+    //   const firstPoint = segment.points[0].copy();
+    //   const { x, y } = inputManager.getMouseLocation();
+    //   segment.points.forEach((p, i) => {
+    //     const relativePoint = Vector.sub(p, firstPoint);
+    //     p.set(x, y);
+    //     p.add(relativePoint);
+    //   });
+    // }
+
     if (this.selectedSegment) {
       const segment = this.selectedSegment;
       const firstPoint = segment.points[0].copy();
@@ -53,7 +61,6 @@ export class EditTrackState extends State<States> {
         p.set(mousePos);
         p.add(relativePoint);
       });
-      segment.update();
 
       const ends = track.findEnds();
       setContextItem("showEnds", true);
@@ -102,21 +109,18 @@ export class EditTrackState extends State<States> {
           this.ghostRotated = false;
         }
         switch (this.closestEnd.frontOrBack) {
-          case "front": {
+          case "front":
             this.ghostSegment.setPositionByPoint(
               this.closestEnd.pos,
               this.ghostSegment.points[0],
             );
             // this.ghostSegment.points[0] = this.closestEnd.pos;
-            const ghostEndTangent = this.ghostSegment.tangent(0);
-
             !this.ghostRotated && this.ghostSegment.rotateAboutPoint(
-              this.closestEnd.tangent.heading() - ghostEndTangent.heading(),
+              this.closestEnd.tangent.heading(),
               this.ghostSegment.points[0],
             );
             this.ghostRotated = true;
             break;
-          }
           case "back": {
             this.ghostSegment.setPositionByPoint(
               this.closestEnd.pos,
@@ -132,8 +136,6 @@ export class EditTrackState extends State<States> {
             break;
           }
         }
-        this.ghostSegment.update();
-
         // } else if (closestEnd) {
         //   this.closestEnd = closestEnd;
       } else if (!this.closestEnd || !closestEnd) {
@@ -247,7 +249,6 @@ export class EditTrackState extends State<States> {
 
     if (translation.x !== 0 || translation.y !== 0) {
       track.translate(translation);
-      track.recalculateAll();
     }
 
     // TODO
@@ -285,10 +286,6 @@ export class EditTrackState extends State<States> {
       new SBendRight(),
       new BankLeft(),
       new BankRight(),
-      new WideBankLeft(),
-      new WideBankRight(),
-      new TightBankLeft(),
-      new TightBankRight(),
     ]);
 
     const inputManager = getContextItem<InputManager>("inputManager");
@@ -309,6 +306,14 @@ export class EditTrackState extends State<States> {
       state.transitionTo(States.RUNNING);
     });
 
+    inputManager.onKey(" ", () => {
+      if (this.selectedSegment) {
+        this.selectedSegment = undefined;
+      } else {
+        this.selectedSegment = new StraightTrack();
+      }
+    });
+
     inputManager.onMouse("left", () => {
       const track = getContextItem<TrackSystem>("track");
       if (this.ghostSegment && this.closestEnd) {
@@ -378,18 +383,6 @@ export class EditTrackState extends State<States> {
       }
     });
 
-    inputManager.onKey("r", () => {
-      if (!this.selectedSegment) return;
-      const segment = this.selectedSegment;
-      let angle = Math.PI / 12;
-      segment.rotate(angle);
-    });
-    inputManager.onKey("R", () => {
-      if (!this.selectedSegment) return;
-      const segment = this.selectedSegment;
-      let angle = -Math.PI / 12;
-      segment.rotate(angle);
-    });
     // TODO
     // Cache trains and save
 
@@ -411,9 +404,6 @@ export class EditTrackState extends State<States> {
     const inputManager = getContextItem<InputManager>("inputManager");
     inputManager.offKey("e");
     inputManager.offKey("w");
-    inputManager.offKey("z");
-    inputManager.offKey("r");
-    inputManager.offKey("R");
     inputManager.offKey("Escape");
     inputManager.offMouse("left");
     if (this.heldEvents.size > 0) {

src/state/states/LoadState.ts

@@ -34,16 +34,12 @@ export class LoadState extends State<States> {
 
     bootstrapInputs();
 
-    // This should be driven by a manifest
-    resources.set("snr:sprite/engine", new Image());
-    resources.set("snr:sprite/LargeLady", new Image());
-    // resources.get<HTMLImageElement>("snr:sprite/engine")!.src =
-    //   "/sprites/EngineSprites.png";
-
-    resources.set("snr:audio/ding", new Audio());
+    resources.set("engine-sprites", new Image());
+    resources.get<HTMLImageElement>("engine-sprites")!.src =
+      "/sprites/EngineSprites.png";
     resources.ready().then(() => {
       this.stateMachine.transitionTo(States.RUNNING);
-    }).catch((e) => console.error(e));
+    });
 
     const doodler = getContextItem<Doodler>("doodler");
     // this.layers.push(doodler.createLayer((_, __, dTime) => {

src/state/states/RunningState.ts

@@ -1,4 +1,4 @@
-import { Doodler, Point, Vector, ZoomableDoodler } from "@bearmetal/doodler";
+import { Doodler } from "@bearmetal/doodler";
 import { getContext, getContextItem } from "../../lib/context.ts";
 import { InputManager } from "../../lib/input.ts";
 import { TrackSystem } from "../../track/system.ts";
@@ -8,7 +8,6 @@ import { DotFollower } from "../../train/newTrain.ts";
 import { Train } from "../../train/train.ts";
 import { State } from "../machine.ts";
 import { States } from "./index.ts";
-import { LargeLady, LargeLadyTender } from "../../train/LargeLady.ts";
 
 export class RunningState extends State<States> {
   override name: States = States.RUNNING;
@@ -19,20 +18,8 @@ export class RunningState extends State<States> {
 
   layers: number[] = [];
 
-  activeTrain: Train | undefined;
-
   override update(dt: number): void {
     const ctx = getContext() as { trains: Train[]; track: TrackSystem };
-    const doodler = getContextItem<ZoomableDoodler>(
-      "doodler",
-    );
-    if (this.activeTrain) {
-      // (doodler as any).origin = doodler.worldToScreen(
-      //   doodler.width - this.activeTrain.aabb.center.x,
-      //   doodler.height - this.activeTrain.aabb.center.y,
-      // );
-      doodler.centerCameraOn(this.activeTrain.aabb.center);
-    }
     // const ctx = getContext() as { trains: DotFollower[]; track: TrackSystem };
     // TODO
     // Update trains
@@ -71,24 +58,12 @@ export class RunningState extends State<States> {
       // const path = track.path;
       // const follower = new DotFollower(path, path.points[0].copy());
       // ctx.trains.push(follower);
-      const train = new Train(track.path, [
-        new LargeLady(),
-        new LargeLadyTender(),
-      ]);
+      const train = new Train(track.path, [new RedEngine(), new Tender()]);
       ctx.trains.push(train);
     });
-    // const train = new Train(track.path, [
-    //   new LargeLady(),
-    //   new LargeLadyTender(),
-    // ]);
-    // ctx.trains.push(train);
-    // this.activeTr0ain = train;
-    // const trainCount = 1000;
+    // const trainCount = 2000;
     // for (let i = 0; i < trainCount; i++) {
-    //   const train = new Train(track.path, [
-    //     new LargeLady(),
-    //     new LargeLadyTender(),
-    //   ]);
+    //   const train = new Train(track.path, [new RedEngine(), new Tender()]);
     //   ctx.trains.push(train);
     // }
 
@@ -97,9 +72,6 @@ export class RunningState extends State<States> {
       for (const train of trains) {
         train.speed += 1;
       }
-      // for (const [i, train] of trains.entries()) {
-      //   train.speed += .01 * i;
-      // }
     });
     inputManager.onKey("ArrowDown", () => {
       const trains = getContextItem<Train[]>("trains");

src/test/angleMathBench.test.ts

@@ -1,32 +0,0 @@
-/// <reference no-default-lib="true" />
-/// <reference lib="esnext" />
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-/// <reference lib="dom.asynciterable" />
-/// <reference lib="deno.ns" />
-
-import { averageAngles, lerpAngle } from "../math/lerp.ts";
-import { testPerformance } from "./bench.ts";
-
-Deno.test("angle math", () => {
-  console.log("Average angles");
-  testPerformance(
-    () => {
-      const a = Math.random() * Math.PI * 2;
-      const b = Math.random() * Math.PI * 2;
-      const avg = averageAngles(a, b);
-    },
-    10000,
-    60,
-  );
-  console.log("Lerp angles");
-  testPerformance(
-    () => {
-      const a = Math.random() * Math.PI * 2;
-      const b = Math.random() * Math.PI * 2;
-      const avg = lerpAngle(a, b, .5);
-    },
-    10000,
-    60,
-  );
-});

src/track/shapes.ts

@@ -18,9 +18,9 @@ export class SBendLeft extends TrackSegment {
     start = start || new Vector(100, 100);
     super([
       start,
-      start.copy().add(80, 0),
-      start.copy().add(120, -25),
-      start.copy().add(200, -25),
+      start.copy().add(60, 0),
+      start.copy().add(90, -25),
+      start.copy().add(150, -25),
     ]);
   }
 }
@@ -29,9 +29,9 @@ export class SBendRight extends TrackSegment {
     start = start || new Vector(100, 100);
     super([
       start,
-      start.copy().add(80, 0),
-      start.copy().add(120, 25),
-      start.copy().add(200, 25),
+      start.copy().add(60, 0),
+      start.copy().add(90, 25),
+      start.copy().add(150, 25),
     ]);
   }
 }
@@ -44,7 +44,7 @@ export class BankLeft extends TrackSegment {
     const p2 = start.copy();
     const p3 = start.copy();
     const p4 = start.copy();
-    const scale = 66;
+    const scale = 33;
 
     p2.add(new Vector(1, 0).mult(scale));
     p3.set(p2);
@@ -62,110 +62,6 @@ export class BankLeft extends TrackSegment {
     ]);
   }
 }
-export class WideBankLeft extends TrackSegment {
-  constructor(start?: Vector) {
-    start = start || new Vector(100, 100);
-
-    const p1 = start.copy();
-    const p2 = start.copy();
-    const p3 = start.copy();
-    const p4 = start.copy();
-    const scale = 70.4;
-
-    p2.add(new Vector(1, 0).mult(scale));
-    p3.set(p2);
-    const dirToP3 = Vector.fromAngle(-Math.PI / 12).mult(scale);
-    p3.add(dirToP3);
-    p4.set(p3);
-    const dirToP4 = Vector.fromAngle(-Math.PI / 6).mult(scale);
-    p4.add(dirToP4);
-
-    super([
-      p1,
-      p2,
-      p3,
-      p4,
-    ]);
-  }
-}
-export class TightBankLeft extends TrackSegment {
-  constructor(start?: Vector) {
-    start = start || new Vector(100, 100);
-
-    const p1 = start.copy();
-    const p2 = start.copy();
-    const p3 = start.copy();
-    const p4 = start.copy();
-    const scale = 61.57;
-
-    p2.add(new Vector(1, 0).mult(scale));
-    p3.set(p2);
-    const dirToP3 = Vector.fromAngle(-Math.PI / 12).mult(scale);
-    p3.add(dirToP3);
-    p4.set(p3);
-    const dirToP4 = Vector.fromAngle(-Math.PI / 6).mult(scale);
-    p4.add(dirToP4);
-
-    super([
-      p1,
-      p2,
-      p3,
-      p4,
-    ]);
-  }
-}
-export class TightBankRight extends TrackSegment {
-  constructor(start?: Vector) {
-    start = start || new Vector(100, 100);
-
-    const p1 = start.copy();
-    const p2 = start.copy();
-    const p3 = start.copy();
-    const p4 = start.copy();
-    const scale = 61.57;
-
-    p2.add(new Vector(1, 0).mult(scale));
-    p3.set(p2);
-    const dirToP3 = Vector.fromAngle(Math.PI / 12).mult(scale);
-    p3.add(dirToP3);
-    p4.set(p3);
-    const dirToP4 = Vector.fromAngle(Math.PI / 6).mult(scale);
-    p4.add(dirToP4);
-
-    super([
-      p1,
-      p2,
-      p3,
-      p4,
-    ]);
-  }
-}
-export class WideBankRight extends TrackSegment {
-  constructor(start?: Vector) {
-    start = start || new Vector(100, 100);
-
-    const p1 = start.copy();
-    const p2 = start.copy();
-    const p3 = start.copy();
-    const p4 = start.copy();
-    const scale = 70.4;
-
-    p2.add(new Vector(1, 0).mult(scale));
-    p3.set(p2);
-    const dirToP3 = Vector.fromAngle(Math.PI / 12).mult(scale);
-    p3.add(dirToP3);
-    p4.set(p3);
-    const dirToP4 = Vector.fromAngle(Math.PI / 6).mult(scale);
-    p4.add(dirToP4);
-
-    super([
-      p1,
-      p2,
-      p3,
-      p4,
-    ]);
-  }
-}
 export class BankRight extends TrackSegment {
   constructor(start?: Vector) {
     start = start || new Vector(100, 100);
@@ -174,7 +70,7 @@ export class BankRight extends TrackSegment {
     const p2 = start.copy();
     const p3 = start.copy();
     const p4 = start.copy();
-    const scale = 66;
+    const scale = 33;
 
     p2.add(new Vector(1, 0).mult(scale));
     p3.set(p2);

src/track/system.ts

@@ -2,66 +2,47 @@ import { Doodler, Point, Vector } from "@bearmetal/doodler";
 import { ComplexPath, PathSegment } from "../math/path.ts";
 import { getContextItem, setDefaultContext } from "../lib/context.ts";
 import { clamp } from "../math/clamp.ts";
-import { Debuggable } from "../lib/debuggable.ts";
 
-export class TrackSystem extends Debuggable {
-  private _segments: Map<string, TrackSegment> = new Map();
+export class TrackSystem {
+  private segments: Map<string, TrackSegment> = new Map();
   private doodler: Doodler;
 
   constructor(segments: TrackSegment[]) {
-    super("track");
     this.doodler = getContextItem<Doodler>("doodler");
     for (const segment of segments) {
-      this._segments.set(segment.id, segment);
+      this.segments.set(segment.id, segment);
     }
   }
 
-  getSegment(id: string) {
-    return this._segments.get(id);
-  }
-
   get firstSegment() {
-    return this._segments.values().next().value;
+    return this.segments.values().next().value;
   }
 
   get lastSegment() {
-    return this._segments.values().toArray().pop();
-  }
-
-  getNearestSegment(pos: Vector) {
-    let minDistance = Infinity;
-    let nearestSegment: TrackSegment | undefined;
-    for (const segment of this._segments.values()) {
-      const distance = segment.getDistanceTo(pos);
-      if (distance < minDistance) {
-        minDistance = distance;
-        nearestSegment = segment;
-      }
-    }
-    return nearestSegment;
+    return this.segments.values().toArray().pop();
   }
 
   optimize(percent: number) {
     console.log("Optimizing track", percent * 100 / 4);
-    for (const segment of this._segments.values()) {
+    for (const segment of this.segments.values()) {
       segment.recalculateRailPoints(Math.round(percent * 100 / 4));
     }
   }
 
   recalculateAll() {
-    for (const segment of this._segments.values()) {
-      segment.update();
+    for (const segment of this.segments.values()) {
+      segment.recalculateRailPoints();
       segment.length = segment.calculateApproxLength();
     }
   }
 
   registerSegment(segment: TrackSegment) {
     segment.setTrack(this);
-    this._segments.set(segment.id, segment);
+    this.segments.set(segment.id, segment);
   }
   unregisterSegment(segment: TrackSegment) {
-    this._segments.delete(segment.id);
-    for (const s of this._segments.values()) {
+    this.segments.delete(segment.id);
+    for (const s of this.segments.values()) {
       s.backNeighbours = s.backNeighbours.filter((n) => n !== segment);
       s.frontNeighbours = s.frontNeighbours.filter((n) => n !== segment);
     }
@@ -71,7 +52,7 @@ export class TrackSystem extends Debuggable {
   }
 
   draw(showControls = false) {
-    for (const [i, segment] of this._segments.entries()) {
+    for (const [i, segment] of this.segments.entries()) {
       segment.draw(showControls);
     }
 
@@ -100,20 +81,11 @@ export class TrackSystem extends Debuggable {
     // }
   }
 
-  override debugDraw(): void {
-    const debug = getContextItem("debug");
-    if (debug.track) {
-      for (const segment of this._segments.values()) {
-        segment.drawAABB();
-      }
-    }
-  }
-
   ends: Map<TrackSegment, [End, End]> = new Map();
   endArray: End[] = [];
 
   findEnds() {
-    for (const segment of this._segments.values()) {
+    for (const segment of this.segments.values()) {
       if (this.ends.has(segment)) continue;
       const ends: [End, End] = [
         {
@@ -137,14 +109,14 @@ export class TrackSystem extends Debuggable {
 
   serialize() {
     return JSON.stringify(
-      this._segments.values().map((s) => s.serialize()).toArray(),
+      this.segments.values().map((s) => s.serialize()).toArray(),
     );
   }
 
   copy() {
     const track = new TrackSystem([]);
-    for (const segment of this._segments.values()) {
-      track._segments.set(segment.id, segment.copy());
+    for (const segment of this.segments.values()) {
+      track.segments.set(segment.id, segment.copy());
     }
     return track;
   }
@@ -155,19 +127,19 @@ export class TrackSystem extends Debuggable {
     const neighborMap = new Map<string, [string[], string[]]>();
 
     for (const segment of data) {
-      track._segments.set(segment.id, TrackSegment.deserialize(segment));
+      track.segments.set(segment.id, TrackSegment.deserialize(segment));
       neighborMap.set(segment.id, [segment.fNeighbors, segment.bNeighbors]);
     }
 
-    for (const segment of track._segments.values()) {
+    for (const segment of track.segments.values()) {
       segment.setTrack(track);
       const neighbors = neighborMap.get(segment.id);
       if (neighbors) {
         segment.backNeighbours = neighbors[1].map((id) =>
-          track._segments.get(id)
+          track.segments.get(id)
         ).filter((s) => s) as TrackSegment[];
         segment.frontNeighbours = neighbors[0].map((id) =>
-          track._segments.get(id)
+          track.segments.get(id)
         ).filter((s) => s) as TrackSegment[];
       }
     }
@@ -176,7 +148,7 @@ export class TrackSystem extends Debuggable {
   }
 
   translate(v: Vector) {
-    for (const segment of this._segments.values()) {
+    for (const segment of this.segments.values()) {
       segment.translate(v);
     }
   }
@@ -192,7 +164,7 @@ export class TrackSystem extends Debuggable {
 
   generatePath() {
     if (!this.firstSegment) throw new Error("No first segment");
-    const flags = { looping: false };
+    const flags = { looping: true };
     const rightOnlyPath = [
       this.firstSegment.copy(),
       ...this.findRightPath(
@@ -304,82 +276,26 @@ export class TrackSegment extends PathSegment {
   doodler: Doodler;
   normalPoints: Vector[] = [];
   antiNormalPoints: Vector[] = [];
-  evenPoints: [Vector, number][] = [];
-
-  aabb!: AABB;
-
-  private trackGuage = 12;
 
   constructor(p: VectorSet, id?: string) {
     super(p);
     this.doodler = getContextItem<Doodler>("doodler");
     this.id = id ?? crypto.randomUUID();
-    this.update();
+    this.recalculateRailPoints();
   }
 
-  getDistanceTo(pos: Vector) {
-    return Vector.dist(this.aabb.center, pos);
-  }
-
-  updateAABB() {
-    let minX = Infinity;
-    let maxX = -Infinity;
-    let minY = Infinity;
-    let maxY = -Infinity;
-
-    [...this.normalPoints, ...this.antiNormalPoints].forEach((p) => {
-      minX = Math.min(minX, p.x);
-      maxX = Math.max(maxX, p.x);
-      minY = Math.min(minY, p.y);
-      maxY = Math.max(maxY, p.y);
-    });
-
-    const width = maxX - minX;
-    const height = maxY - minY;
-    if (width < this.trackGuage) {
-      const extra = (this.trackGuage - width) / 2;
-      minX -= extra;
-      maxX += extra;
-    }
-    if (height < this.trackGuage) {
-      const extra = (this.trackGuage - height) / 2;
-      minY -= extra;
-      maxY += extra;
-    }
-    this.aabb = {
-      pos: new Vector(minX, minY),
-      x: minX,
-      y: minY,
-      width: maxX - minX,
-      height: maxY - minY,
-      center: new Vector(minX, minY).add(
-        new Vector(maxX - minX, maxY - minY).div(2),
-      ),
-    };
-  }
-
-  recalculateRailPoints(resolution = 60) {
+  recalculateRailPoints(resolution = 100) {
     this.normalPoints = [];
     this.antiNormalPoints = [];
     for (let i = 0; i <= resolution; i++) {
       const t = i / resolution;
       const normal = this.tangent(t).rotate(Math.PI / 2);
-      normal.setMag(this.trackGuage / 2);
+      normal.setMag(6);
       const p = this.getPointAtT(t);
       this.normalPoints.push(p.copy().add(normal));
       this.antiNormalPoints.push(p.copy().add(normal.rotate(Math.PI)));
     }
   }
-  recalculateTiePoints() {
-    const spacing = Math.ceil(this.length / 10);
-    this.evenPoints = this.calculateEvenlySpacedPoints(this.length / spacing);
-  }
-
-  update() {
-    this.recalculateRailPoints();
-    this.recalculateTiePoints();
-    this.updateAABB();
-  }
 
   setTrack(t: TrackSystem) {
     this.track = t;
@@ -414,12 +330,12 @@ export class TrackSegment extends PathSegment {
       });
     }
 
-    // const spacing = Math.ceil(this.length / 10);
-    // const points = this.calculateEvenlySpacedPoints(this.length / spacing);
-    for (let i = 0; i < this.evenPoints.length - 1; i++) {
+    const spacing = Math.ceil(this.length / 10);
+    const points = this.calculateEvenlySpacedPoints(this.length / spacing);
+    for (let i = 0; i < points.length - 1; i++) {
       // const t = i / ties;
       // const p = this.getPointAtT(t);
-      const [p, t] = this.evenPoints[i];
+      const [p, t] = points[i];
       // this.doodler.drawCircle(p, 2, {
       //   color: "red",
       //   weight: 3,
@@ -465,15 +381,6 @@ export class TrackSegment extends PathSegment {
     // });
   }
 
-  drawAABB() {
-    this.doodler.drawRect(this.aabb.pos, this.aabb.width, this.aabb.height, {
-      color: "lime",
-    });
-    this.doodler.drawCircle(this.aabb.center, 2, {
-      color: "cyan",
-    });
-  }
-
   serialize(): SerializedTrackSegment {
     return {
       p: this.points.map((p) => p.array()),
@@ -516,7 +423,6 @@ export class TrackSegment extends PathSegment {
   rotate(angle: number | Vector) {
     const [p1, p2, p3, p4] = this.points;
     let newP2;
-
     if (angle instanceof Vector) {
       const tan = angle;
       angle = tan.heading() - (this.lastHeading ?? 0);
@@ -553,7 +459,7 @@ export class TrackSegment extends PathSegment {
   }
 
   rotateAboutPoint(angle: number, point: Vector) {
-    // if (!this.points.includes(point)) return;
+    if (!this.points.includes(point)) return;
     point = point.copy();
     this.points.forEach((p, i) => {
       const relativePoint = Vector.sub(p, point);
@@ -574,25 +480,12 @@ export class TrackSegment extends PathSegment {
   }
 }
 
-interface PathPoint {
-  p: Vector;
-  segmentId: string;
-  tangent: Vector;
-}
-
 export class Spline<T extends PathSegment = PathSegment> {
   segments: T[] = [];
   ctx?: CanvasRenderingContext2D;
 
-  evenPoints: PathPoint[];
-  _pointSpacing: number;
-  get pointSpacing() {
-    return this._pointSpacing;
-  }
-  set pointSpacing(value: number) {
-    this._pointSpacing = value;
-    this.evenPoints = this.calculateEvenlySpacedPoints(value);
-  }
+  evenPoints: Vector[];
+  pointSpacing: number;
 
   get points() {
     return Array.from(new Set(this.segments.flatMap((s) => s.points)));
@@ -607,8 +500,8 @@ export class Spline<T extends PathSegment = PathSegment> {
     if (this.segments.at(-1)?.next === this.segments[0]) {
       this.looped = true;
     }
-    this._pointSpacing = 1;
-    this.evenPoints = this.calculateEvenlySpacedPoints(this._pointSpacing);
+    this.pointSpacing = 1;
+    this.evenPoints = this.calculateEvenlySpacedPoints(1);
     this.nodes = [];
     // for (let i = 0; i < this.points.length; i += 3) {
     //   const node: IControlNode = {
@@ -641,17 +534,13 @@ export class Spline<T extends PathSegment = PathSegment> {
     }
   }
 
-  calculateEvenlySpacedPoints(spacing: number, resolution = 1): PathPoint[] {
-    // this._pointSpacing = 1;
+  calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
+    this.pointSpacing = 1;
     // return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
-    const points: PathPoint[] = [];
+    const points: Vector[] = [];
 
-    points.push({
-      p: this.segments[0].points[0],
-      segmentId: this.segments[0].id,
-      tangent: this.segments[0].tangent(0),
-    });
-    let prev = points[0].p;
+    points.push(this.segments[0].points[0]);
+    let prev = points[0];
     let distSinceLastEvenPoint = 0;
     for (const seg of this.segments) {
       let t = 0;
@@ -669,35 +558,26 @@ export class Spline<T extends PathSegment = PathSegment> {
             Vector.sub(point, prev).normalize().mult(overshoot),
           );
           distSinceLastEvenPoint = overshoot;
-          points.push({
-            p: evenPoint,
-            segmentId: seg.id,
-            tangent: seg.tangent(t),
-          });
+          points.push(evenPoint);
           prev = evenPoint;
-          continue;
         }
 
         prev = point;
       }
     }
 
-    // this.evenPoints = points;
+    this.evenPoints = points;
 
     return points;
   }
 
-  followEvenPoints(t: number): PathPoint {
+  followEvenPoints(t: number) {
     if (this.looped) {
       if (t < 0) t += this.evenPoints.length;
       const i = Math.floor(t) % this.evenPoints.length;
       const a = this.evenPoints[i];
       const b = this.evenPoints[(i + 1) % this.evenPoints.length];
-      return {
-        p: Vector.lerp(a.p, b.p, t % 1),
-        segmentId: b.segmentId,
-        tangent: b.tangent,
-      };
+      return Vector.lerp(a, b, t % 1);
     }
     t = clamp(t, 0, this.evenPoints.length - 1);
     const i = clamp(Math.floor(t), 0, this.evenPoints.length - 1);
@@ -706,11 +586,7 @@ export class Spline<T extends PathSegment = PathSegment> {
       .evenPoints[
         clamp((i + 1) % this.evenPoints.length, 0, this.evenPoints.length - 1)
       ];
-    return {
-      p: Vector.lerp(a.p, b.p, t % 1),
-      segmentId: b.segmentId,
-      tangent: b.tangent,
-    };
+    return Vector.lerp(a, b, t % 1);
   }
 
   calculateApproxLength() {

src/train/LargeLady.ts

@@ -1,194 +0,0 @@
-import { Doodler, Vector } from "@bearmetal/doodler";
-import { Train, TrainCar } from "./train.ts";
-import { getContextItem } from "../lib/context.ts";
-import { ResourceManager } from "../lib/resources.ts";
-import { debug } from "node:console";
-import { averageAngles, lerpAngle } from "../math/lerp.ts";
-
-export class LargeLady extends TrainCar {
-  scale = 1;
-  constructor() {
-    const resources = getContextItem<ResourceManager>("resources");
-    const img = resources.get<HTMLImageElement>("snr:sprite/LargeLady")!;
-    super(50, 10, img, 132, 23, {
-      at: new Vector(0, 0),
-      width: 132,
-      height: 23,
-    });
-
-    this.bogies = [
-      {
-        pos: new Vector(0, 0),
-        angle: 0,
-        length: 35 * this.scale,
-        sprite: {
-          at: new Vector(0, 24),
-          width: 35,
-          height: 23,
-          offset: new Vector(-23, -11.5),
-        },
-      },
-      {
-        pos: new Vector(0, 0),
-        angle: 0,
-        length: 64 * this.scale,
-        // sprite: {
-        //   at: new Vector(0, 23),
-        //   width: 33,
-        //   height: 19,
-        //   offset: new Vector(-19, -9.5),
-        // },
-        sprite: {
-          at: new Vector(36, 24),
-          width: 60,
-          height: 23,
-          offset: new Vector(-35, -11.5),
-        },
-      },
-      {
-        pos: new Vector(0, 0),
-        angle: 0,
-        length: 35 * this.scale,
-        sprite: {
-          at: new Vector(36, 24),
-          width: 60,
-          height: 23,
-          offset: new Vector(-35, -11.5),
-        },
-      },
-      {
-        pos: new Vector(0, 0),
-        angle: 0,
-        length: 28,
-        sprite: {
-          at: new Vector(97, 24),
-          width: 22,
-          height: 23,
-          offset: new Vector(-11, -11.5),
-        },
-      },
-    ];
-
-    this.leading = 23;
-  }
-
-  drawAngle?: number;
-
-  override draw(): void {
-    const doodler = getContextItem<Doodler>("doodler");
-    for (const b of this.bogies) {
-      if (!b.sprite) continue;
-      doodler.drawRotated(b.pos, b.angle + (b.rotate ? 0 : Math.PI), () => {
-        doodler.drawSprite(
-          this.img,
-          b.sprite!.at,
-          b.sprite!.width,
-          b.sprite!.height,
-          b.pos.copy().add(b.sprite!.offset ?? new Vector(0, 0)),
-          b.sprite!.width,
-          b.sprite!.height,
-        );
-      });
-    }
-
-    const b = this.bogies[2];
-    const a = this.bogies[1];
-    // const origin = Vector.add(Vector.sub(a.pos, b.pos).div(2), b.pos);
-    // const angle = Vector.sub(b.pos, a.pos).heading();
-    const debug = getContextItem<Debug>("debug");
-    if (debug.bogies) return;
-
-    const difAngle = Vector.sub(a.pos, b.pos).heading();
-    if (this.drawAngle == undefined) this.drawAngle = b.angle + Math.PI;
-    const origin = b.pos.copy().add(new Vector(33, 0).rotate(difAngle));
-    const angle = b.angle;
-    const avgAngle = averageAngles(difAngle, angle) + Math.PI;
-    this.drawAngle = lerpAngle(this.drawAngle, avgAngle, .2);
-
-    doodler.drawRotated(origin, this.drawAngle, () => {
-      this.sprite
-        ? doodler.drawSprite(
-          this.img,
-          this.sprite.at,
-          this.sprite.width,
-          this.sprite.height,
-          origin.copy().sub(
-            this.imgWidth * this.scale / 2,
-            this.imgHeight * this.scale / 2,
-          ),
-          this.imgWidth * this.scale,
-          this.imgHeight * this.scale,
-        )
-        : doodler.drawImage(
-          this.img,
-          origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
-        );
-    });
-    // doodler.drawCircle(origin, 4, { color: "blue" });
-
-    doodler.deferDrawing(() => {
-      doodler.drawRotated(origin, this.drawAngle! + Math.PI, () => {
-        doodler.drawSprite(
-          this.img,
-          new Vector(133, 0),
-          28,
-          23,
-          origin.copy().sub(93, this.imgHeight / 2),
-          28,
-          23,
-        );
-      });
-    });
-  }
-}
-
-export class LargeLadyTender extends TrainCar {
-  constructor() {
-    const resources = getContextItem<ResourceManager>("resources");
-    const sprite = resources.get("snr:sprite/LargeLady");
-    super(40, 39, sprite, 98, 23, {
-      at: new Vector(0, 48),
-      width: 98,
-      height: 23,
-    });
-
-    this.leading = 19;
-  }
-
-  override draw(): void {
-    const doodler = getContextItem<Doodler>("doodler");
-    const b = this.bogies[0];
-    doodler.drawRotated(b.pos, b.angle, () => {
-      doodler.drawSprite(
-        this.img,
-        new Vector(97, 24),
-        22,
-        23,
-        b.pos.copy().sub(11, 11.5),
-        22,
-        23,
-      );
-    });
-
-    const angle = Vector.sub(this.bogies[1].pos, this.bogies[0].pos).heading();
-    const origin = this.bogies[1].pos.copy().add(
-      new Vector(-11, 0).rotate(angle),
-    );
-    doodler.drawRotated(origin, angle, () => {
-      this.sprite
-        ? doodler.drawSprite(
-          this.img,
-          this.sprite.at,
-          this.sprite.width,
-          this.sprite.height,
-          origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
-          this.imgWidth,
-          this.imgHeight,
-        )
-        : doodler.drawImage(
-          this.img,
-          origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
-        );
-    });
-  }
-}

src/train/cars.ts

@@ -6,85 +6,50 @@ import { getContextItem } from "../lib/context.ts";
 export class Tender extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      25,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      40,
-      20,
-      {
+    super(25, resources.get<HTMLImageElement>("engine-sprites")!, 40, 20, {
       at: new Vector(80, 0),
       width: 40,
       height: 20,
-      },
-    );
+    });
   }
 }
 export class Tank extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      50,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      70,
-      20,
-      {
+    super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
       at: new Vector(80, 20),
       width: 70,
       height: 20,
-      },
-    );
+    });
   }
 }
 export class YellowDumpCar extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      50,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      70,
-      20,
-      {
+    super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
       at: new Vector(80, 40),
       width: 70,
       height: 20,
-      },
-    );
+    });
   }
 }
 export class GrayDumpCar extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      50,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      70,
-      20,
-      {
+    super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
       at: new Vector(80, 60),
       width: 70,
       height: 20,
-      },
-    );
+    });
   }
 }
 export class NullCar extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      50,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      70,
-      20,
-      {
+    super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
       at: new Vector(80, 80),
       width: 70,
       height: 20,
-      },
-    );
+    });
   }
 }

src/train/engines.ts

@@ -6,85 +6,50 @@ import { ResourceManager } from "../lib/resources.ts";
 export class RedEngine extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      55,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      80,
-      20,
-      {
+    super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
       at: new Vector(0, 60),
       width: 80,
       height: 20,
-      },
-    );
+    });
   }
 }
 export class PurpleEngine extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      55,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      80,
-      20,
-      {
+    super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
       at: new Vector(0, 60),
       width: 80,
       height: 20,
-      },
-    );
+    });
   }
 }
 export class GreenEngine extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      55,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      80,
-      20,
-      {
+    super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
       at: new Vector(0, 40),
       width: 80,
       height: 20,
-      },
-    );
+    });
   }
 }
 export class GrayEngine extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      55,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      80,
-      20,
-      {
+    super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
       at: new Vector(0, 20),
       width: 80,
       height: 20,
-      },
-    );
+    });
   }
 }
 export class BlueEngine extends TrainCar {
   constructor() {
     const resources = getContextItem<ResourceManager>("resources");
-    super(
-      55,
-      10,
-      resources.get<HTMLImageElement>("snr:sprite/engine")!,
-      80,
-      20,
-      {
+    super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
       at: new Vector(0, 0),
       width: 80,
       height: 20,
-      },
-    );
+    });
   }
 }

src/train/train.ts

@@ -1,10 +1,12 @@
-import { getContextItem } from "../lib/context.ts";
+import { ComplexPath, PathSegment } from "../math/path.ts";
+import { Follower } from "../physics/follower.ts";
+import { Mover } from "../physics/mover.ts";
+import { getContext, getContextItem } from "../lib/context.ts";
 import { Doodler, Vector } from "@bearmetal/doodler";
-import { Spline, TrackSegment, TrackSystem } from "../track/system.ts";
-import { Debuggable } from "../lib/debuggable.ts";
-import { lerp, lerpAngle, map } from "../math/lerp.ts";
+import { Spline, TrackSegment } from "../track/system.ts";
+import { ResourceManager } from "../lib/resources.ts";
 
-export class Train extends Debuggable {
+export class Train {
   nodes: Vector[] = [];
 
   cars: TrainCar[] = [];
@@ -12,91 +14,70 @@ export class Train extends Debuggable {
   path: Spline<TrackSegment>;
   t: number;
 
-  spacing = 0;
+  engineLength = 40;
+  spacing = 30;
 
-  speed = 5;
+  speed = 10;
 
-  aabb!: AABB;
-
-  get segments() {
-    return Array.from(
-      new Set(this.cars.flatMap((c) => c.segments.values().toArray())),
-    );
-  }
-
-  constructor(track: Spline<TrackSegment>, cars: TrainCar[], t = 0) {
-    super("train", "path");
+  constructor(track: Spline<TrackSegment>, cars: TrainCar[]) {
     this.path = track;
-    this.path.pointSpacing = 4;
+    this.t = 0;
+    const resources = getContextItem<ResourceManager>("resources");
     this.cars = cars;
-    this.t = this.cars.reduce((acc, c) => acc + c.length, 0) +
-      (this.cars.length - 1) * this.spacing;
-    this.t = this.t / this.path.pointSpacing;
-
+    // this.cars.push(
+    //   new TrainCar(
+    //     55,
+    //     engineSprites,
+    //     80,
+    //     20,
+    //     { at: new Vector(0, 60), width: 80, height: 20 },
+    //   ),
+    //   new TrainCar(
+    //     25,
+    //     engineSprites,
+    //     40,
+    //     20,
+    //     { at: new Vector(80, 0), width: 40, height: 20 },
+    //   ),
+    // );
     let currentOffset = 0;
-    // try {
+    try {
       for (const car of this.cars) {
-      car.train = this;
-      currentOffset += car.moveAlongPath(this.t - currentOffset, true) +
-        this.spacing / this.path.pointSpacing;
+        currentOffset += this.spacing;
+        const a = this.path.followEvenPoints(this.t - currentOffset);
+        currentOffset += car.length;
+        const b = this.path.followEvenPoints(this.t - currentOffset);
+        car.points = [a, b];
+        this.nodes.push(a, b);
+      }
+    } catch {
+      currentOffset = 0;
+      for (const car of this.cars.toReversed()) {
+        currentOffset += this.spacing;
+        const a = this.path.followEvenPoints(this.t - currentOffset);
+        currentOffset += car.length;
+        const b = this.path.followEvenPoints(this.t - currentOffset);
+        car.points = [a, b];
+        this.nodes.push(a, b);
+      }
     }
-    // } catch {
-    //   currentOffset = 0;
-    //   console.log("Reversed");
-    //   for (const car of this.cars.toReversed()) {
-    //     for (const [i, bogie] of car.bogies.entries().toArray().reverse()) {
-    //       currentOffset += bogie.length;
-    //       const a = this.path.followEvenPoints(this.t - currentOffset);
-    //       car.setBogiePosition(a.p, i);
-    //       this.nodes.push(a.p);
-    //       car.segments.add(a.segmentId);
-    //     }
-    //   }
-    // }
-
-    this.updateAABB();
   }
 
   move(dTime: number) {
-    if (!this.speed) return;
-    this.t = this.t + (this.speed / this.path.pointSpacing) * dTime * 10;
+    this.t = this.t + this.speed * dTime * 10;
     // % this.path.evenPoints.length; // This should probably be on the track system
+    // console.log(this.t);
     let currentOffset = 0;
     for (const car of this.cars) {
-      // This needs to be moved to the car itself
-      // if (!car.points) return;
-      // const [a, b] = car.points;
-      // const nA = this.path.followEvenPoints(this.t - currentOffset);
-      // a.set(nA.p);
-      // currentOffset += car.length;
-      // const nB = this.path.followEvenPoints(this.t - currentOffset);
-      // b.set(nB.p);
-      // currentOffset += this.spacing;
-      // car.segments = [nA.segmentId, nB.segmentId];
+      if (!car.points) return;
+      const [a, b] = car.points;
+      a.set(this.path.followEvenPoints(this.t - currentOffset));
+      currentOffset += car.length;
+      b.set(this.path.followEvenPoints(this.t - currentOffset));
+      currentOffset += this.spacing;
       // car.draw();
-
-      currentOffset += car.moveAlongPath(this.t - currentOffset) +
-        (this.spacing / this.path.pointSpacing);
     }
     // this.draw();
-    this.updateAABB();
-  }
-
-  updateAABB() {
-    const minX = Math.min(...this.cars.map((c) => c.aabb.x));
-    const maxX = Math.max(...this.cars.map((c) => c.aabb.x + c.aabb.width));
-    const minY = Math.min(...this.cars.map((c) => c.aabb.y));
-    const maxY = Math.max(...this.cars.map((c) => c.aabb.y + c.aabb.height));
-    this.aabb = {
-      pos: new Vector(minX, minY),
-      x: minX,
-      y: minY,
-      width: maxX - minX,
-      height: maxY - minY,
-      center: new Vector(minX, minY).add(
-        new Vector(maxX - minX, maxY - minY).div(2),
-      ),
-    };
   }
 
   // draw() {
@@ -115,54 +96,19 @@ export class Train extends Debuggable {
   // }
 
   draw() {
-    for (const car of this.cars) {
-      car.draw();
-    }
-  }
-
-  override debugDraw(): void {
-    const debug = getContextItem<Debug>("debug");
+    const ctx = getContext();
+    if (ctx.debug) {
       const doodler = getContextItem<Doodler>("doodler");
-    if (debug.path) {
       // doodler.drawLine(this.path.points, {
       //   color: "red",
       //   weight: 3,
       // });
-      const colors = getContextItem<string[]>("colors");
-      for (const [i, p] of this.path.evenPoints.entries()) {
-        const color = colors[
-          Math.floor(
-            map(i, 0, this.path.evenPoints.length, 0, colors.length),
-          )
-        ];
-        doodler.drawCircle(p.p, 2, { color, weight: .5 });
+      for (const p of this.path.evenPoints) {
+        doodler.drawCircle(p, 2, { color: "red", weight: .5 });
       }
     }
-
-    if (debug.train) {
-      const track = getContextItem<TrackSystem>("track");
-      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().toArray()) {
-        const segment = track.getSegment(segmentId);
-        segment &&
-          doodler.drawBezier(...segment.points, {
-            color: colors[i % colors.length],
-            weight: 3,
-          });
-      }
-    }
-    if (debug.aabb) {
-      doodler.deferDrawing(() => {
-        doodler.drawRect(this.aabb.pos, this.aabb.width, this.aabb.height, {
-          color: "orange",
-        });
-        doodler.drawCircle(this.aabb.center, 2, {
-          color: "lime",
-        });
-      });
+    for (const car of this.cars) {
+      car.draw();
     }
   }
 
@@ -171,156 +117,35 @@ export class Train extends Debuggable {
   }
 }
 
-interface Bogie {
-  pos: Vector;
-  angle: number;
-  length: number;
-  sprite?: ISprite & { offset?: Vector };
-  rotate?: boolean;
-}
-
-export class TrainCar extends Debuggable {
+export class TrainCar {
   img: HTMLImageElement;
   imgWidth: number;
   imgHeight: number;
   sprite?: ISprite;
 
   points?: [Vector, Vector, ...Vector[]];
-  _length: number;
-  leading: number = 0;
-
-  bogies: Bogie[] = [];
-
-  segments: Set<string> = new Set();
-
-  train?: Train;
-
-  aabb!: AABB;
+  length: number;
 
   constructor(
     length: number,
-    trailing: number,
     img: HTMLImageElement,
     w: number,
     h: number,
     sprite?: ISprite,
   ) {
-    super(true, "car", "bogies", "angles");
     this.img = img;
     this.sprite = sprite;
     this.imgWidth = w;
     this.imgHeight = h;
-    this._length = length;
-
-    this.bogies = [
-      {
-        pos: new Vector(0, 0),
-        angle: 0,
-        length: length,
-      },
-      {
-        pos: new Vector(0, 0),
-        angle: 0,
-        length: trailing,
-      },
-    ];
-
-    this.updateAABB();
-  }
-
-  get length() {
-    return this.bogies.reduce((acc, b) => acc + b.length, 0) + this.leading;
-  }
-
-  setBogiePosition(pos: Vector, idx: number) {
-    this.bogies[idx].pos.set(pos);
-  }
-
-  update(dTime: number, t: number) {
-    if (this.train) {
-      for (const [i, bogie] of this.bogies.entries()) {
-        const a = this.train.path.followEvenPoints(t - this._length * i);
-      }
-    }
-  }
-
-  updateAABB() {
-    let minX = Infinity;
-    let maxX = -Infinity;
-    let minY = Infinity;
-    let maxY = -Infinity;
-
-    this.bogies.forEach((bogie, index) => {
-      // Unit vector in the direction the bogie is facing.
-      const u = new Vector(Math.cos(bogie.angle), Math.sin(bogie.angle));
-      // Perpendicular vector (to thicken the rectangle).
-      const v = new Vector(-Math.sin(bogie.angle), Math.cos(bogie.angle));
-
-      // For the first bogie, extend in the opposite direction by this.leading.
-      let front = bogie.pos.copy();
-      if (index === 0) {
-        front = front.sub(u.copy().rotate(Math.PI).mult(this.leading));
-      }
-      // Rear point is at bogie.pos plus the bogie length.
-      const rear = bogie.pos.copy().add(
-        u.copy().rotate(Math.PI).mult(bogie.length),
-      );
-
-      // Calculate half the height to offset from the center line.
-      const halfHeight = this.imgHeight / 2;
-
-      // Calculate the four corners of the rectangle.
-      const corners = [
-        front.copy().add(v.copy().mult(halfHeight)),
-        front.copy().add(v.copy().mult(-halfHeight)),
-        rear.copy().add(v.copy().mult(halfHeight)),
-        rear.copy().add(v.copy().mult(-halfHeight)),
-      ];
-
-      // Update the overall AABB limits.
-      corners.forEach((corner) => {
-        minX = Math.min(minX, corner.x);
-        minY = Math.min(minY, corner.y);
-        maxX = Math.max(maxX, corner.x);
-        maxY = Math.max(maxY, corner.y);
-      });
-    });
-    this.aabb = {
-      pos: new Vector(minX, minY),
-      center: new Vector(minX, minY).add(
-        new Vector(maxX - minX, maxY - minY).div(2),
-      ),
-      x: minX,
-      y: minY,
-      width: maxX - minX,
-      height: maxY - minY,
-    };
-  }
-
-  moveAlongPath(t: number, initial = false): number {
-    if (!this.train) return 0;
-    let offset = this.leading / this.train.path.pointSpacing;
-    this.segments.clear();
-    for (const [i, bogie] of this.bogies.entries()) {
-      const a = this.train.path.followEvenPoints(t - offset);
-      a.tangent.rotate(TWO_PI);
-      offset += bogie.length / this.train.path.pointSpacing;
-      this.setBogiePosition(a.p, i);
-      if (initial) bogie.angle = a.tangent.heading();
-      else {
-        bogie.angle = lerpAngle(a.tangent.heading(), bogie.angle, .1);
-      }
-      this.segments.add(a.segmentId);
-    }
-    this.updateAABB();
-    return offset;
+    this.length = length;
   }
 
   draw() {
+    if (!this.points) return;
     const doodler = getContextItem<Doodler>("doodler");
-    const [a, b] = this.bogies;
-    const origin = Vector.add(Vector.sub(a.pos, b.pos).div(2), b.pos);
-    const angle = Vector.sub(b.pos, a.pos).heading();
+    const [a, b] = this.points;
+    const origin = Vector.add(Vector.sub(a, b).div(2), b);
+    const angle = Vector.sub(b, a).heading();
 
     doodler.drawCircle(origin, 4, { color: "blue" });
 
@@ -340,93 +165,12 @@ export class TrainCar extends Debuggable {
           origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
         );
     });
-  }
-  override debugDraw(...args: unknown[]): void {
-    const doodler = getContextItem<Doodler>("doodler");
-    const debug = getContextItem<Debug>("debug");
-    if (debug.bogies) {
-      doodler.deferDrawing(() => {
-        for (const [i, b] of this.bogies.entries()) {
-          const next = this.bogies[i + 1];
-          if (!next) continue;
-          const dist = Vector.dist(b.pos, next.pos);
-          doodler.drawCircle(b.pos, 5, { color: "red" });
-          doodler.fillText(
-            dist.toFixed(1).toString(),
-            b.pos.copy().add(10, 10),
-            100,
-            {
-              color: "white",
-            },
-          );
-        }
-      });
-    }
-    if (debug.car) {
-      doodler.deferDrawing(() => {
-        doodler.drawLine(this.bogies.map((b) => b.pos), {
+
+    const ctx = getContext();
+    if (ctx.debug) {
+      doodler.drawLine(this.points, {
         color: "blue",
-          weight: 2,
-        });
-        doodler.deferDrawing(() => {
-          const colors = getContextItem<string[]>("colors");
-          for (const [i, b] of this.bogies.entries()) {
-            doodler.drawCircle(b.pos, 5, { color: colors[i % colors.length] });
-            doodler.fillText(
-              b.length.toString(),
-              b.pos.copy().add(10, 0),
-              100,
-              {
-                color: "white",
-              },
-            );
-          }
-        });
-      });
-
-      if (debug.aabb) {
-        doodler.deferDrawing(() => {
-          doodler.drawRect(this.aabb.pos, this.aabb.width, this.aabb.height, {
-            color: "white",
-            weight: .5,
-          });
-          doodler.drawCircle(this.aabb.center, 2, {
-            color: "yellow",
-          });
-          doodler.fillText(
-            this.aabb.width.toFixed(1).toString(),
-            this.aabb.center.copy().add(10, 10),
-            100,
-            {
-              color: "white",
-            },
-          );
-        });
-      }
-    }
-
-    if (debug.angles) {
-      doodler.deferDrawing(() => {
-        const ps: { pos: Vector; angle: number }[] = [];
-        for (const [i, b] of this.bogies.entries()) {
-          ps.push({ pos: b.pos, angle: b.angle });
-          const next = this.bogies[i + 1];
-          if (!next) continue;
-          const heading = Vector.sub(next.pos, b.pos);
-          const p = b.pos.copy().add(heading.mult(.5));
-          ps.push({ pos: p, angle: heading.heading() });
-        }
-        for (const p of ps) {
-          doodler.dot(p.pos, { color: "green" });
-          doodler.fillText(
-            p.angle.toFixed(2).toString(),
-            p.pos.copy().add(0, 20),
-            100,
-            {
-              color: "white",
-            },
-          );
-        }
+        weight: 3,
       });
     }
   }

src/types.ts

@@ -15,36 +15,4 @@ declare global {
     bNeighbors: string[];
     fNeighbors: string[];
   };
-
-  type Debug = {
-    track: boolean;
-    segment: boolean;
-    train: boolean;
-    car: boolean;
-    path: boolean;
-    bogies: boolean;
-    angles: boolean;
-    aabb: boolean;
-  };
-
-  type AABB = {
-    pos: Vector;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    center: Vector;
-  };
-}
-
-export function applyMixins(derivedCtor: any, baseCtors: any[]) {
-  baseCtors.forEach((baseCtor) => {
-    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
-      Object.defineProperty(
-        derivedCtor.prototype,
-        name,
-        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ?? {},
-      );
-    });
-  });
 }

vite.config.ts

@@ -1,8 +1,7 @@
-import { defineConfig } from "vite";
-import deno from "@deno/vite-plugin";
-import { strip } from "./vite/plugins/strip.ts";
+import { defineConfig } from 'vite'
+import deno from '@deno/vite-plugin'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [deno(), strip()],
-});
+  plugins: [deno()],
+})

vite/plugins/strip.ts

@@ -1,67 +0,0 @@
-import { Plugin } from "vite";
-
-export function strip(): Plugin {
-  const p: Plugin = {
-    name: "debug-strip",
-    enforce: "pre",
-    apply: "build",
-    transform(code: string, id: string) {
-      if (!id.endsWith(".ts") || import.meta.env.DEV) {
-        return code;
-      }
-
-      const keyword = "override debugDraw";
-      const results = [];
-      let currentIndex = 0;
-
-      while (true) {
-        // Find the next occurrence of the keyword starting from currentIndex.
-        const startIndex = code.indexOf(keyword, currentIndex);
-        if (startIndex === -1) {
-          break; // No more occurrences.
-        }
-
-        // Find the first opening brace '{' after the keyword.
-        const braceStart = code.indexOf("{", startIndex);
-        if (braceStart === -1) {
-          // No opening brace found; skip this occurrence.
-          currentIndex = startIndex + keyword.length;
-          continue;
-        }
-
-        // Use a counter to find the matching closing brace.
-        let openBraces = 0;
-        let endIndex = -1;
-        for (let i = braceStart; i < code.length; i++) {
-          if (code[i] === "{") {
-            openBraces++;
-          } else if (code[i] === "}") {
-            openBraces--;
-          }
-
-          // When openBraces returns to 0, we found the matching closing brace.
-          if (openBraces === 0) {
-            endIndex = i;
-            break;
-          }
-        }
-
-        // If a matching closing brace was found, extract the substring.
-        if (endIndex !== -1) {
-          results.push(code.substring(startIndex, endIndex + 1));
-          // Move the currentIndex past the extracted block.
-          currentIndex = endIndex + 1;
-        } else {
-          // If no matching closing brace is found, skip this occurrence.
-          currentIndex = startIndex + keyword.length;
-        }
-      }
-
-      for (const result of results) {
-        code = code.replace(result, "");
-      }
-      return code;
-    },
-  };
-  return p;
-}