removes bundle from output

Recalculation on track edit end
Changes rendering of ties to be evenly spaced
Fixes ghost and held track rendering

.gitignore

@@ -0,0 +1,3 @@
+bundle.js
+dist/
+temp.ts

.vscode/settings.json

@@ -1,7 +1,6 @@
 {
   "deno.enable": true,
   "deno.unstable": true,
-  "deno.config": "./deno.jsonc",
   "workbench.colorCustomizations": {
     "activityBar.activeBackground": "#520088",
     "activityBar.background": "#520088",

GameLoop.ts

@@ -0,0 +1,63 @@
+import { Doodler } from "@bearmetal/doodler";
+import { StateMachine } from "./state/machine.ts";
+import { getContextItem } from "./lib/context.ts";
+
+export class GameLoop<T> {
+  lastTime: number;
+  running: boolean;
+  targetFps: number;
+
+  constructor(targetFps: number = 60) {
+    this.lastTime = performance.now();
+    this.running = false;
+    this.targetFps = targetFps;
+  }
+
+  async start(state: StateMachine<T>) {
+    if (this.running) return;
+    this.running = true;
+    this.lastTime = performance.now();
+
+    while (this.running) {
+      const currentTime = performance.now();
+      const deltaTime = (currentTime - this.lastTime) / 1000; // Convert to seconds
+      this.lastTime = currentTime;
+
+      try {
+        // Wait for state update to complete before continuing
+        await state.update(deltaTime);
+      } catch (error) {
+        console.error("Error in game loop:", error);
+        this.stop();
+        break;
+      }
+
+      // Use setTimeout to prevent immediate loop continuation
+      // and allow other tasks to run
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+  }
+
+  stop() {
+    this.running = false;
+  }
+}
+
+// // Usage example:
+// const gameState = {
+//     update: async (deltaTime) => {
+//         console.log(`Updating with delta time: ${deltaTime.toFixed(3)}s`);
+//         // Simulate some async work
+//         await new Promise(resolve => setTimeout(resolve, 16)); // ~60fps
+//     }
+// };
+
+// // Create and start the loop
+// const loop = new GameLoop();
+// loop.start(gameState);
+
+// // Stop the loop after 5 seconds (example)
+// setTimeout(() => {
+//     loop.stop();
+//     console.log('Loop stopped');
+// }, 5000);

canvas/canvas.ts

@@ -1,18 +0,0 @@
-
-type ClickEvent = {
-  mouseX: number;
-  mouseY: number;
-}
-type ClickEventHandler = (e: ClickEvent) => void;
-
-export class Canvas {
-  clickables: ClickEventHandler[] = [];
-  
-  constructor();
-  constructor(width: number, height: number);
-  constructor(width?: number, height?: number) {
-    const canvas = document.createElement('canvas');
-    canvas.width = width || 400;
-    canvas.height = height || 400;
-  }
-}

deno.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "deno.ns",
+      "deno.window",
+      "dom",
+      "dom.iterable",
+      "ES2021",
+      "ESNext"
+    ]
+  },
+  "tasks": {
+    "dev": "deno run -RWEN --allow-run dev.ts dev"
+  },
+  "imports": {
+    "@bearmetal/doodler": "jsr:@bearmetal/doodler@0.0.5-b"
+  }
+}

deno.jsonc

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      // "deno.window"
-      "DOM",
-      "ES2021",
-      "ESNext"
-    ]
-  },
-  "tasks": {
-    "dev": "deno bundle --watch main.ts bundle.js"
-  },
-  "imports": {
-    "drawing": "./drawing/index.ts",
-    "doodler": "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/mod.ts"
-  }
-}

deno.lock

@@ -0,0 +1,238 @@
+{
+  "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",
+    "jsr:@std/assert@^1.0.10": "1.0.10",
+    "jsr:@std/bytes@^1.0.2": "1.0.2",
+    "jsr:@std/cli@^1.0.8": "1.0.9",
+    "jsr:@std/encoding@^1.0.5": "1.0.6",
+    "jsr:@std/fmt@^1.0.3": "1.0.3",
+    "jsr:@std/html@^1.0.3": "1.0.3",
+    "jsr:@std/http@*": "1.0.12",
+    "jsr:@std/internal@^1.0.5": "1.0.5",
+    "jsr:@std/media-types@^1.1.0": "1.1.0",
+    "jsr:@std/net@^1.0.4": "1.0.4",
+    "jsr:@std/path@^1.0.6": "1.0.8",
+    "jsr:@std/path@^1.0.8": "1.0.8",
+    "jsr:@std/streams@^1.0.8": "1.0.8",
+    "jsr:@std/testing@*": "1.0.8",
+    "npm:esbuild@*": "0.24.2"
+  },
+  "jsr": {
+    "@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": [
+        "jsr:@std/bytes",
+        "jsr:@std/encoding",
+        "jsr:@std/path@^1.0.6"
+      ]
+    },
+    "@luca/esbuild-deno-loader@0.11.1": {
+      "integrity": "dc020d16d75b591f679f6b9288b10f38bdb4f24345edb2f5732affa1d9885267",
+      "dependencies": [
+        "jsr:@std/bytes",
+        "jsr:@std/encoding",
+        "jsr:@std/path@^1.0.6"
+      ]
+    },
+    "@std/assert@1.0.10": {
+      "integrity": "59b5cbac5bd55459a19045d95cc7c2ff787b4f8527c0dd195078ff6f9481fbb3",
+      "dependencies": [
+        "jsr:@std/internal"
+      ]
+    },
+    "@std/bytes@1.0.2": {
+      "integrity": "fbdee322bbd8c599a6af186a1603b3355e59a5fb1baa139f8f4c3c9a1b3e3d57"
+    },
+    "@std/cli@1.0.9": {
+      "integrity": "557e5865af000efbf3f737dcfea5b8ab86453594f4a9cd8d08c9fa83d8e3f3bc"
+    },
+    "@std/encoding@1.0.6": {
+      "integrity": "ca87122c196e8831737d9547acf001766618e78cd8c33920776c7f5885546069"
+    },
+    "@std/fmt@1.0.3": {
+      "integrity": "97765c16aa32245ff4e2204ecf7d8562496a3cb8592340a80e7e554e0bb9149f"
+    },
+    "@std/html@1.0.3": {
+      "integrity": "7a0ac35e050431fb49d44e61c8b8aac1ebd55937e0dc9ec6409aa4bab39a7988"
+    },
+    "@std/http@1.0.12": {
+      "integrity": "85246d8bfe9c8e2538518725b158bdc31f616e0869255f4a8d9e3de919cab2aa",
+      "dependencies": [
+        "jsr:@std/cli",
+        "jsr:@std/encoding",
+        "jsr:@std/fmt",
+        "jsr:@std/html",
+        "jsr:@std/media-types",
+        "jsr:@std/net",
+        "jsr:@std/path@^1.0.8",
+        "jsr:@std/streams"
+      ]
+    },
+    "@std/internal@1.0.5": {
+      "integrity": "54a546004f769c1ac9e025abd15a76b6671ddc9687e2313b67376125650dc7ba"
+    },
+    "@std/media-types@1.1.0": {
+      "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4"
+    },
+    "@std/net@1.0.4": {
+      "integrity": "2f403b455ebbccf83d8a027d29c5a9e3a2452fea39bb2da7f2c04af09c8bc852"
+    },
+    "@std/path@1.0.8": {
+      "integrity": "548fa456bb6a04d3c1a1e7477986b6cffbce95102d0bb447c67c4ee70e0364be"
+    },
+    "@std/streams@1.0.8": {
+      "integrity": "b41332d93d2cf6a82fe4ac2153b930adf1a859392931e2a19d9fabfb6f154fb3"
+    },
+    "@std/testing@1.0.8": {
+      "integrity": "ceef535808fb7568e91b0f8263599bd29b1c5603ffb0377227f00a8ca9fe42a2",
+      "dependencies": [
+        "jsr:@std/assert@^1.0.10",
+        "jsr:@std/internal"
+      ]
+    }
+  },
+  "npm": {
+    "@esbuild/aix-ppc64@0.24.2": {
+      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA=="
+    },
+    "@esbuild/android-arm64@0.24.2": {
+      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg=="
+    },
+    "@esbuild/android-arm@0.24.2": {
+      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q=="
+    },
+    "@esbuild/android-x64@0.24.2": {
+      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw=="
+    },
+    "@esbuild/darwin-arm64@0.24.2": {
+      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA=="
+    },
+    "@esbuild/darwin-x64@0.24.2": {
+      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA=="
+    },
+    "@esbuild/freebsd-arm64@0.24.2": {
+      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg=="
+    },
+    "@esbuild/freebsd-x64@0.24.2": {
+      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q=="
+    },
+    "@esbuild/linux-arm64@0.24.2": {
+      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg=="
+    },
+    "@esbuild/linux-arm@0.24.2": {
+      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA=="
+    },
+    "@esbuild/linux-ia32@0.24.2": {
+      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw=="
+    },
+    "@esbuild/linux-loong64@0.24.2": {
+      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ=="
+    },
+    "@esbuild/linux-mips64el@0.24.2": {
+      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw=="
+    },
+    "@esbuild/linux-ppc64@0.24.2": {
+      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw=="
+    },
+    "@esbuild/linux-riscv64@0.24.2": {
+      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q=="
+    },
+    "@esbuild/linux-s390x@0.24.2": {
+      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw=="
+    },
+    "@esbuild/linux-x64@0.24.2": {
+      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q=="
+    },
+    "@esbuild/netbsd-arm64@0.24.2": {
+      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw=="
+    },
+    "@esbuild/netbsd-x64@0.24.2": {
+      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw=="
+    },
+    "@esbuild/openbsd-arm64@0.24.2": {
+      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A=="
+    },
+    "@esbuild/openbsd-x64@0.24.2": {
+      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA=="
+    },
+    "@esbuild/sunos-x64@0.24.2": {
+      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig=="
+    },
+    "@esbuild/win32-arm64@0.24.2": {
+      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ=="
+    },
+    "@esbuild/win32-ia32@0.24.2": {
+      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA=="
+    },
+    "@esbuild/win32-x64@0.24.2": {
+      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg=="
+    },
+    "esbuild@0.24.2": {
+      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+      "dependencies": [
+        "@esbuild/aix-ppc64",
+        "@esbuild/android-arm",
+        "@esbuild/android-arm64",
+        "@esbuild/android-x64",
+        "@esbuild/darwin-arm64",
+        "@esbuild/darwin-x64",
+        "@esbuild/freebsd-arm64",
+        "@esbuild/freebsd-x64",
+        "@esbuild/linux-arm",
+        "@esbuild/linux-arm64",
+        "@esbuild/linux-ia32",
+        "@esbuild/linux-loong64",
+        "@esbuild/linux-mips64el",
+        "@esbuild/linux-ppc64",
+        "@esbuild/linux-riscv64",
+        "@esbuild/linux-s390x",
+        "@esbuild/linux-x64",
+        "@esbuild/netbsd-arm64",
+        "@esbuild/netbsd-x64",
+        "@esbuild/openbsd-arm64",
+        "@esbuild/openbsd-x64",
+        "@esbuild/sunos-x64",
+        "@esbuild/win32-arm64",
+        "@esbuild/win32-ia32",
+        "@esbuild/win32-x64"
+      ]
+    }
+  },
+  "remote": {
+    "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",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/mod.ts": "766bdedc7e28b89d3cb3e83ee55c612bfaeabe252a14ff47e5e676535e033d88",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/animation/gif.ts": "6f8b77cb55b252bd7c18b04fa7ff4e88b4459cf1158d8daef538b2e471433420",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/animation/sprite.ts": "64adc3843b48a0d74ad96cbf4a4d26426c1e909a03ca935f73d5ec5545080f20",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/canvas.ts": "5af9d684e1144a374f0fbee46c710f9d493d5491e90b17356d910c6ade32bb50",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/collision/aa.ts": "c27a1deee0b2ed02e3a88e4e0b370ca2dfa0f57bf783724fa5c099e9eeabc5c9",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/collision/circular.ts": "962703eacb19cc849f3fb355815edfd71e12d06f8e72f517a7c038ff2d1c1729",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/collision/sat.ts": "f221540a984c908c96b4cc86a8eddacf3d3a5dfa5367ba538c02bcf7f7038247",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/constants.ts": "4f4cf7bf49ac871d984e9b43896783b0cc8ab0ea60d0fc4c8c582f7e00c3df5a",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/polygon.ts": "6c7edf576bebd7f24b1358ecba70d561d5905e0185701e12437ba7ccdacc66a9",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/spline.ts": "3521ea5b57902001fb9a248580bd66f12f563a581eff137f5c67e2edc0305ba0",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/vector.ts": "0143daf300032d6faf5a073fffa5c298fdcd74ba2d6bcd10a2d96ab54e55bc69",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/init.ts": "0e08fdf4c896f88308e6a6a2fb8842fe3a67a3a47a5ad722ecbce37737f8694d",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/mod.ts": "ffcbd74b612db108d50f5e2e1ba7425c7e6fac87f3fe7fb43c10a5283501513e",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/processing/gif.ts": "e97456fd55806086aa90d9bc46193d355c2f6093f376f4141ca959942193e4dc",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/EaseInOut.ts": "9eba3d8f5bf5e03220c93916cff6f0bbc24ecdf7550f21fd99e3aaf310f625b0",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/Map.ts": "3948648f8bdf8f1ecea83120c41211f5543c7933dbe3e49b367285a98ed50a9a",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/zoomableCanvas.ts": "395f80ddaef83e2b37a2884d7fffefae80c2bcecb72269405f53899d5dfc9956"
+  },
+  "workspace": {
+    "dependencies": [
+      "jsr:@bearmetal/doodler@0.0.5-b"
+    ]
+  }
+}

dev.ts

@@ -0,0 +1,153 @@
+/// <reference lib="deno.ns" />
+
+import * as esbuild from "npm:esbuild";
+import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@0.11.1";
+import { serveDir } from "jsr:@std/http";
+
+async function* crawl(dir: string): AsyncIterable<string> {
+  for await (const file of Deno.readDir(dir)) {
+    const fullPath = dir + "/" + file.name;
+
+    if (file.isDirectory) {
+      yield* crawl(fullPath);
+    } else {
+      yield fullPath;
+    }
+  }
+}
+
+async function dev() {
+  const paths = [];
+  const ignoredFiles = ["bundler", "bundle", "dev", "test"];
+
+  for await (const path of crawl("./")) {
+    if (
+      path.endsWith(".ts") &&
+      !ignoredFiles.find((file) => path.includes(file))
+    ) {
+      paths.push(path);
+    }
+  }
+  await build();
+
+  const watcher = Deno.watchFs(paths);
+
+  for await (const event of watcher) {
+    if (event.kind === "modify") {
+      console.log("File modified, bundling...");
+      await build();
+    }
+  }
+}
+async function build() {
+  const cfg = await import("./deno.json", {
+    with: { type: "json" },
+  });
+  const importMap = {
+    imports: cfg.default.imports,
+  };
+  const importMapURL = "data:application/json," + JSON.stringify(importMap);
+  console.log("File modified, bundling...");
+  try {
+    const result = await esbuild.build({
+      entryPoints: ["./main.ts"],
+      bundle: true,
+      outfile: "bundle.js",
+      plugins: [...denoPlugins({
+        importMapURL,
+        lockPath: "./deno.lock",
+      })],
+      loader: {
+        ".ts": "ts",
+        ".js": "js",
+        ".jsx": "jsx",
+        ".tsx": "tsx",
+      },
+    });
+    esbuild.stop();
+    console.log("Bundled successfully!");
+    sendSSE("data: build\n\n");
+  } catch (e) {
+    console.error(e);
+    // Deno.exit(1);
+  }
+}
+
+let sseStreams: ReadableStreamDefaultController[] = [];
+
+function sendSSE(message: string) {
+  sseStreams.filter((stream) => {
+    try {
+      stream.enqueue(new TextEncoder().encode(message));
+      return true;
+    } catch {
+      return false;
+    }
+  });
+}
+
+function sse(r: Request) {
+  let controller: ReadableStreamDefaultController;
+  const body = new ReadableStream({
+    start(controller) {
+      sseStreams.push(controller);
+    },
+    cancel() {
+      sseStreams = sseStreams.filter((stream) => stream !== controller);
+    },
+  });
+
+  return new Response(body, {
+    status: 200,
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+    },
+  });
+}
+
+if (Deno.args.includes("dev")) {
+  dev();
+  Deno.serve(async (r) => {
+    if (r.url.endsWith("sse")) {
+      return sse(r);
+    }
+
+    const d = await serveDir(r, {
+      fsRoot: ".",
+      showIndex: true,
+    });
+
+    if (d.headers.get("content-type")?.startsWith("text/html")) {
+      const body = await d.text();
+      return new Response(
+        body.replace(
+          "</body>",
+          `<script defer>
+          const source = new EventSource("/sse");
+          source.onmessage = (event) => {
+            if (event.data === "build") {
+              location.reload();
+            }
+          };
+        </script></body>`,
+        ),
+        {
+          status: 200,
+          headers: {
+            "Content-Type": "text/html",
+            "Cache-Control": "no-cache",
+          },
+        },
+      );
+    }
+    if (d.url.endsWith(".js")) {
+      d.headers.set("Cache-Control", "no-cache");
+      d.headers.set("Content-Type", "application/javascript");
+    }
+    return d;
+  });
+} else {
+  await build();
+}

drawing/circle.ts

@@ -1,16 +0,0 @@
-import { Constants } from "../math/constants.ts";
-import { Vector } from "doodler";
-
-const circle = (ctx: CanvasRenderingContext2D, center: Vector, radius: number) => {
-  ctx.beginPath();
-  ctx.arc(center.x, center.y, radius, 0, Constants.TWO_PI);
-}
-
-export const drawCircle = (ctx: CanvasRenderingContext2D, center: Vector, radius: number) => {
-  circle(ctx, center, radius);
-  ctx.stroke();
-}
-export const fillCircle = (ctx: CanvasRenderingContext2D, center: Vector, radius: number) => {
-  circle(ctx, center, radius);
-  ctx.fill();
-}

drawing/index.ts

@@ -1 +0,0 @@
-export { drawCircle, fillCircle } from './circle.ts'

drawing/line.ts

@@ -1,6 +0,0 @@
-export const drawLine = (ctx: CanvasRenderingContext2D, x1:number, y1:number, x2:number, y2: number) => {
-  ctx.beginPath();
-  ctx.moveTo(x1,y1);
-  ctx.lineTo(x2,y2);
-  ctx.stroke();
-}

index.html

@@ -5,6 +5,40 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>TRAINS!</title>
+  <style>
+    html, body {
+      background-color: black;
+      color: white;
+      margin: 0;
+      overflow: hidden;
+      height: 100%;
+      width: 100%;
+    }
+    #context {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: white;
+      padding: 10px;
+      display: flex;
+      gap: 10px;
+      max-height: 50vh;
+      overflow-y: auto;
+    }
+    #fps {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: white;
+      padding: 10px;
+      display: flex;
+      gap: 10px;
+      max-height: 50vh;
+      overflow-y: auto;
+    }
+  </style>
 </head>
 <body>
   <script src="bundle.js"></script>

inputs.ts

@@ -0,0 +1,17 @@
+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";
+
+export function bootstrapInputs() {
+  const inputManager = getContextItem<InputManager>("inputManager");
+  inputManager.onKey("e", () => {
+    const state = getContextItem<StateMachine<States>>("state");
+    state.transitionTo(States.EDIT_TRACK);
+  });
+  inputManager.onKey("Delete", () => {
+    if (inputManager.getKeyState("Control")) {
+      localStorage.removeItem("track");
+    }
+  });
+}

lib/context.ts

@@ -0,0 +1,94 @@
+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);
+}
+
+export function withContext<T>(context: ContextStore, fn: () => T): T {
+  contextStack.push(context);
+  try {
+    return fn();
+  } finally {
+    contextStack.pop();
+  }
+}
+
+export const ctx = new Proxy(
+  {},
+  {
+    get(_, prop: string) {
+      for (let i = contextStack.length - 1; i >= 0; i--) {
+        if (prop in contextStack[i]) return contextStack[i][prop];
+      }
+      if (prop in defaultContext) return defaultContext[prop];
+      throw new Error(`Context variable '${prop}' is not defined.`);
+    },
+  },
+) as Record<string, unknown>;
+
+export function getContext() {
+  return ctx;
+}
+export function getContextItem<T>(prop: string): T {
+  return ctx[prop] as T;
+}
+export function getContextItemOrDefault<T>(prop: string, defaultValue: T): T {
+  try {
+    return ctx[prop] as T;
+  } catch {
+    return defaultValue;
+  }
+}
+export function setContextItem<T>(prop: string, value: T) {
+  Object.assign(contextStack[contextStack.length - 1] ?? defaultContext, {
+    [prop]: value,
+  });
+}
+
+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) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return "[Circular]"; // Replace circular references
+      }
+      seen.add(value);
+    }
+    return value;
+  }, 2);
+}

lib/input.ts

@@ -0,0 +1,115 @@
+import { Vector, ZoomableDoodler } from "@bearmetal/doodler";
+import { getContextItem } from "./context.ts";
+
+function mouseButtonToString(button: number) {
+  switch (button) {
+    case 0:
+      return "left";
+    case 1:
+      return "middle";
+    case 2:
+      return "right";
+  }
+}
+
+function mouseButtonToNumber(button: string) {
+  switch (button) {
+    case "left":
+      return 0;
+    case "middle":
+      return 1;
+    case "right":
+      return 2;
+  }
+}
+
+export class InputManager {
+  private keyStates: Map<string, boolean> = new Map();
+  private mouseStates: Map<string, boolean> = new Map();
+  private mouseLocation: { x: number; y: number } = { x: 0, y: 0 };
+  private mouseDelta: { x: number; y: number } = { x: 0, y: 0 };
+
+  private keyEvents: Map<string, () => void> = new Map();
+  private mouseEvents: Map<string, () => void> = new Map();
+
+  constructor() {
+    document.addEventListener("keydown", (e) => {
+      this.keyStates.set(e.key, true);
+      this.keyEvents.get(e.key)?.call(e);
+    });
+    document.addEventListener("keyup", (e) => {
+      this.keyStates.set(e.key, false);
+    });
+    document.addEventListener("mousedown", (e) => {
+      const button = mouseButtonToString(e.button);
+      if (!button) throw "Mouse button not found: " + e.button;
+      this.mouseStates.set(button, true);
+      this.mouseEvents.get(button)?.call(e);
+    });
+    document.addEventListener("mouseup", (e) => {
+      const button = mouseButtonToString(e.button);
+      if (!button) throw "Mouse button not found: " + e.button;
+      this.mouseStates.set(button, false);
+    });
+
+    self.addEventListener("mousemove", (e) => {
+      this.mouseLocation = { x: e.clientX, y: e.clientY };
+      this.mouseDelta = {
+        x: e.movementX,
+        y: e.movementY,
+      };
+    });
+  }
+
+  getKeyState(key: string) {
+    return this.keyStates.get(key);
+  }
+  getMouseState(key: string) {
+    return this.mouseStates.get(key);
+  }
+  getMouseLocation() {
+    if (getContextItem("doodler") instanceof ZoomableDoodler) {
+      return getContextItem<ZoomableDoodler>("doodler").screenToWorld(
+        this.mouseLocation.x,
+        this.mouseLocation.y,
+      );
+    }
+    return this.mouseLocation;
+  }
+  getMouseLocationV() {
+    if (getContextItem("doodler") instanceof ZoomableDoodler) {
+      return new Vector(
+        getContextItem<ZoomableDoodler>("doodler").screenToWorld(
+          this.mouseLocation.x,
+          this.mouseLocation.y,
+        ),
+      );
+    }
+    return new Vector(this.mouseLocation);
+  }
+  getMouseDelta() {
+    return this.mouseDelta;
+  }
+
+  onKey(key: string, cb: () => void) {
+    this.keyEvents.set(key, cb);
+  }
+  onMouse(key: string, cb: () => void) {
+    this.mouseEvents.set(key, cb);
+  }
+
+  offKey(key: string) {
+    const events = this.keyEvents.get(key);
+    this.keyEvents.delete(key);
+    return events;
+  }
+  offMouse(key: string) {
+    this.mouseEvents.delete(key);
+  }
+
+  onNumberKey(arg0: (arg: number) => void) {
+    for (let i = 0; i < 10; i++) {
+      this.onKey(i.toString(), () => arg0(i));
+    }
+  }
+}

lib/resources.ts

@@ -0,0 +1,38 @@
+export class ResourceManager {
+  private resources: Map<string, unknown> = new Map();
+  private statuses: Map<string, Promise<boolean>> = new Map();
+
+  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(name: string, value: unknown) {
+    if (typeof (value as EventSource).addEventListener === "function") {
+      this.statuses.set(
+        name,
+        new Promise((resolve) => {
+          const onload = () => {
+            this.resources.set(name, value);
+            resolve(true);
+            (value as EventSource).removeEventListener("load", onload);
+          };
+          (value as EventSource).addEventListener("load", onload);
+        }),
+      );
+    } else {
+      console.warn("Resource added was not a loadable resource");
+    }
+    this.resources.set(name, value);
+  }
+
+  delete(name: string) {
+    this.resources.delete(name);
+  }
+
+  ready() {
+    return Promise.all(Array.from(this.statuses.values()));
+  }
+}

main.ts

@@ -1,200 +1,85 @@
-import { lerp } from "./math/lerp.ts";
+import {
-import { ComplexPath, PathSegment } from "./math/path.ts";
+  getContext,
-import { Mover } from "./physics/mover.ts";
+  getContextItem,
-import { Train, TrainCar } from "./train.ts";
+  setContextItem,
-import { fillCircle, drawCircle } from 'drawing';
+  setDefaultContext,
-import { generateSquareTrack, IControlNode, loadFromJson } from "./track.ts";
+} from "./lib/context.ts";
-import { drawLine } from "./drawing/line.ts";
+import { InputManager } from "./lib/input.ts";
-import { initializeDoodler, Vector } from 'doodler';
 
+import { Doodler, Vector, ZoomableDoodler } from "@bearmetal/doodler";
+import { ResourceManager } from "./lib/resources.ts";
+import { addButton } from "./ui/button.ts";
+import { TrackSystem } from "./track/system.ts";
+import { StraightTrack } from "./track/shapes.ts";
+import { State, StateMachine } from "./state/machine.ts";
+import { bootstrapGameStateMachine } from "./state/states/index.ts";
+import { GameLoop } from "./GameLoop.ts";
 
+const inputManager = new InputManager();
+const resources = new ResourceManager();
+const doodler = new ZoomableDoodler({
+  fillScreen: true,
+  bg: "#302040",
+});
+(doodler as any as { ctx: CanvasRenderingContext2D }).ctx
+  .imageSmoothingEnabled = false;
+// doodler.minScale = 0.1;
+// (doodler as any).scale = doodler.maxScale;
 
-const engineSprites = document.createElement('img');
+const colors = [
-engineSprites.src = './sprites/EngineSprites.png';
+  "red",
-engineSprites.style.display = 'none';
+  "orange",
-engineSprites.id = 'engine-sprites';
+  "yellow",
-document.body.append(engineSprites);
+  "green",
+  "blue",
+  "indigo",
+  "purple",
+  "violet",
+];
 
-initializeDoodler({
+setDefaultContext({
-  width: 400,
+  inputManager,
-  height: 400,
+  doodler,
-  bg: '#333'
+  resources,
+  debug: true,
+  showEnds: true,
+  colors,
 });
 
-const path = loadFromJson();
+const state = bootstrapGameStateMachine();
+setContextItem("state", state);
 
-const controls = {
+doodler.init();
-  ArrowUp: false,
-  ArrowRight: false,
-  ArrowDown: false,
-  ArrowLeft: false,
-}
 
-let t = 0;
+// doodler.createLayer((_, __, dTime) => {
-let currentSeg = 0;
+//   state.update(dTime);
-let speed = 1;
+// });
 
-// const trainCount = 1;
+document.addEventListener("keydown", (e) => {
-// const trains = Array(trainCount).fill(null).map((_, i) => new Train(path.segments[i % path.segments.length], 5));
+  if ((e.ctrlKey || e.metaKey) && e.key === "s") {
-const car = new TrainCar(55, engineSprites, 80, 20, {at: new Vector(0, 80), height: 20, width: 80})
-const train = new Train(path, [car]);
-
-let dragEndCounter = 0
-let selectedNode: IControlNode | undefined;
-
-doodler.createLayer(() => {
-  for (let i = 0; i < path.evenPoints.length; i+=10) {
-    const p = path.evenPoints[i];
-    const next = path.evenPoints[(i + 1)%path.evenPoints.length];
-    const last = path.evenPoints.at(i - 1);
-    if (!last) break;
-    const tan = Vector.sub(last, next);
-
-    doodler.drawRotated(p, tan.heading(), () => {
-      doodler.line(p, p.copy().add(0,10), {color: '#291b17', weight: 4})
-      doodler.line(p, p.copy().add(0,-10), {color: '#291b17', weight: 4})
-      doodler.line(p.copy().add(-6,5), p.copy().add(6,5), {color: 'grey', weight: 2})
-      doodler.line(p.copy().add(-6,-5), p.copy().add(6,-5), {color: 'grey', weight: 2})
-    })
-  }
-  path.draw();
-  train.move();
-
-  selectedNode?.anchor.drawDot();
-  selectedNode?.controls.forEach(e => e.drawDot());
-})
-
-let editable = false;
-
-const clickables = new Map()
-
-let selectedPoint: Vector;
-
-document.addEventListener('keyup', e => {
-  if (e.key === 'd') {
-    // console.log(trains)
-    // console.log(path.segments.reduce((a,b) => a + b.calculateApproxLength(1000), 0))
-    // console.log(path.evenPoints);
-  }
-
-  if (e.key === 'ArrowUp') {
-    // for (const train of trains) {
-    //   train.speed += .1;
-    // }
-    speed += .1
-  }
-  if (e.key === 'ArrowDown') {
-    // for (const train of trains) {
-    //   train.speed -= .1;
-    // }
-    speed -= .1
-  }
-
-  if (e.key === 'm' && selectedPoint) {
-    const points = path.points;
-    const index = points.findIndex(p => p === selectedPoint);
-    if (index > -1) {
-      const prev = points.at(index - 1)!;
-      const next = points[(index + 1) % points.length];
-
-      const toPrev = Vector.sub(prev, selectedPoint);
-      toPrev.setMag(next.dist(selectedPoint));
-      toPrev.rotate(Math.PI)
-      const toNext = Vector.add(toPrev, selectedPoint);
-      next.set(toNext);
-
-      path.calculateApproxLength();
-      path.calculateEvenlySpacedPoints(1);
-    }
-  }
-
-  if (e.key === 'e') {
-    editable = !editable;
-    for (const t of path.segments) {
-      t.editable = !t.editable;
-      for (const p of t.points) {
-        if (t.editable) {
-          doodler.registerDraggable(p, 10)
-          doodler.addDragEvents({
-            point: p,
-            onDragEnd: () => {
-              dragEndCounter++
-              t.length = t.calculateApproxLength(100)
-              path.evenPoints = path.calculateEvenlySpacedPoints(1)
-            },
-            onDrag: (movement) => {
-              // todo - remove ! after updating doodler
-              path.handleNodeEdit(p, movement!)
-            }
-          })
-        }
-        else {
-          doodler.unregisterDraggable(p)
-        }
-      }
-    }
-    for (const p of path.points) {
-      if (editable) {
-        const onClick = () => {
-          selectedPoint = p;
-          selectedNode = path.nodes.find(e => e.anchor === p || e.controls.includes(p));
-        }
-
-        clickables.set(p, onClick);
-        doodler.registerClickable(p.copy().sub(10, 10), p.copy().add(10, 10), onClick);
-      }
-      else {
-        const the = clickables.get(p);
-        doodler.unregisterClickable(the);
-      }
-    }
-  }
-})
-
-// document.addEventListener('keydown', e => {
-//   const valid = ["ArrowUp",
-//     "ArrowRight",
-//     "ArrowDown",
-//     "ArrowLeft",]
-//   if (valid.includes(e.key))
-//     controls[e.key as keyof typeof controls] = true;
-// })
-// document.addEventListener('keyup', e => {
-//   const valid = ["ArrowUp",
-//     "ArrowRight",
-//     "ArrowDown",
-//     "ArrowLeft",]
-//   if (valid.includes(e.key))
-//     controls[e.key as keyof typeof controls] = false;
-// })
-
-// function getSteeringForce(mover: Mover, dir: string) {
-//   const dirs = {
-//     ArrowUp: 0,
-//     ArrowRight: .1 * Math.PI,
-//     ArrowDown: Math.PI,
-//     ArrowLeft: -.1 * Math.PI,
-//   }
-
-//   const target = mover.velocity.copy();
-//   target.normalize();
-//   target.mult(10);
-//   target.rotate(dirs[dir as keyof typeof dirs]);
-//   const force = Vector.sub(target, mover.velocity);
-//   force.limit(.1)
-//   return force;
-// }
-
-document.addEventListener('keydown', e => {
-  if (e.ctrlKey && e.key === 's') {
     e.preventDefault();
-    path.segments.forEach((s: any) => {
+    const track = getContextItem<TrackSystem>("track");
-      s.next = s.next.id
+    localStorage.setItem("track", track.serialize());
-      s.prev = s.prev.id
+    console.log("Saved track to local storage");
-      delete s.ctx
-    })
-    delete path.ctx;
-    const json = JSON.stringify(path);
-    localStorage.setItem('railPath', json);
   }
-})
+});
+
+setInterval(() => {
+  const doodler = getContextItem<Doodler>("doodler");
+  const frameRate = doodler.fps;
+  if (frameRate < 0.5) return;
+  let fpsEl = document.getElementById("fps");
+  if (!fpsEl) {
+    fpsEl = document.createElement("div");
+    fpsEl.id = "fps";
+    document.body.appendChild(fpsEl);
+  }
+  // const fPerc = frameRate / 60;
+  // if (fPerc < 0.6) {
+  //   state.optimizePerformance(fPerc);
+  // }
+  fpsEl.textContent = frameRate.toFixed(1) + " fps";
+}, 1000);
+
+const gameLoop = new GameLoop();
+gameLoop.start(state);

math/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}

math/lerp.ts

@@ -1,8 +1,11 @@
-import { Vector } from "doodler";
-
 export const lerp = (a: number, b: number, t: number) => {
-  return (a*t) + (b*(1-t));
+  return (a * t) + (b * (1 - t));
-}
+};
 
-export const map = (value: number, x1: number, y1: number, x2: number, y2: number) => 
+export const map = (
-(value - x1) * (y2 - x2) / (y1 - x1) + x2;
+  value: number,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;

math/path.ts

@@ -1,12 +1,13 @@
-import { Vector } from "doodler";
+import { Vector } from "@bearmetal/doodler";
 
 export class ComplexPath {
-
   points: Vector[] = [];
+  segments: PathSegment[] = [];
 
   radius = 50;
 
   ctx?: CanvasRenderingContext2D;
+  evenPoints: Vector[] = [];
 
   constructor(points?: Vector[]) {
     points && (this.points = points);
@@ -22,10 +23,10 @@ export class ComplexPath {
 
     ctx.save();
     ctx.lineWidth = 2;
-    ctx.strokeStyle = 'white';
+    ctx.strokeStyle = "white";
-    ctx.setLineDash([21, 6])
+    ctx.setLineDash([21, 6]);
 
-    let last = this.points[this.points.length - 1]
+    let last = this.points[this.points.length - 1];
 
     for (const point of this.points) {
       ctx.beginPath();
@@ -36,57 +37,88 @@ export class ComplexPath {
     }
     ctx.restore();
   }
+
+  followEvenPoints(t: number) {
+    if (t < 0) t += this.evenPoints.length;
+    const i = Math.floor(t);
+    const a = this.evenPoints[i];
+    const b = this.evenPoints[(i + 1) % this.evenPoints.length];
+
+    return Vector.lerp(a, b, t % 1);
+  }
+
+  calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
+    // this.pointSpacing = 1;
+    // return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
+    const points: Vector[] = [];
+
+    points.push(this.segments[0].points[0]);
+    let prev = points[0];
+    let distSinceLastEvenPoint = 0;
+    for (const seg of this.segments) {
+      let t = 0;
+
+      const div = Math.ceil(seg.length * resolution * 10);
+      while (t < 1) {
+        t += 1 / div;
+        const point = seg.getPointAtT(t);
+        distSinceLastEvenPoint += prev.dist(point);
+
+        if (distSinceLastEvenPoint >= spacing) {
+          const overshoot = distSinceLastEvenPoint - spacing;
+          const evenPoint = Vector.add(
+            point,
+            Vector.sub(point, prev).normalize().mult(overshoot),
+          );
+          distSinceLastEvenPoint = overshoot;
+          points.push(evenPoint);
+          prev = evenPoint;
+        }
+
+        prev = point;
+      }
+    }
+
+    this.evenPoints = points;
+
+    return points;
+  }
 }
 
 export class PathSegment {
-  points: [Vector, Vector, Vector, Vector]
+  id: string;
-  ctx?: CanvasRenderingContext2D;
+  points: [Vector, Vector, Vector, Vector];
 
   length: number;
+  startingLength: number;
+
+  next?: PathSegment;
+  prev?: PathSegment;
 
   constructor(points: [Vector, Vector, Vector, Vector]) {
+    this.id = crypto.randomUUID();
     this.points = points;
     this.length = this.calculateApproxLength(100);
-  }
+    this.startingLength = Math.round(this.length);
-
-  setContext(ctx: CanvasRenderingContext2D) {
-    this.ctx = ctx;
-  }
-
-  draw() {
-    const [a, b, c, d] = this.points;
-    doodler.drawBezier(a, b, c, d, {
-      strokeColor: '#ffffff50'
-    })
-    // if (!this.ctx) return;
-    // const ctx = this.ctx;
-
-    // ctx.save();
-    // ctx.beginPath();
-    // ctx.moveTo(this.points[0].x, this.points[0].y);
-
-    // ctx.bezierCurveTo(
-    //   this.points[1].x,
-    //   this.points[1].y,
-    //   this.points[2].x,
-    //   this.points[2].y,
-    //   this.points[3].x,
-    //   this.points[3].y,
-    // );
-
-    // ctx.strokeStyle = '#ffffff50';
-    // ctx.lineWidth = 2;
-    // ctx.stroke();
-    // ctx.restore();
   }
 
   getPointAtT(t: number) {
     const [a, b, c, d] = this.points;
     const res = a.copy();
 
-    res.add(Vector.add(a.copy().mult(-3), b.copy().mult(3)).mult(t))
+    res.add(Vector.add(a.copy().mult(-3), b.copy().mult(3)).mult(t));
-    res.add(Vector.add(Vector.add(a.copy().mult(3), b.copy().mult(-6)), c.copy().mult(3)).mult(Math.pow(t, 2)));
+    res.add(
-    res.add(Vector.add(Vector.add(a.copy().mult(-1), b.copy().mult(3)), Vector.add(c.copy().mult(-3), d.copy())).mult(Math.pow(t, 3)));
+      Vector.add(
+        Vector.add(a.copy().mult(3), b.copy().mult(-6)),
+        c.copy().mult(3),
+      ).mult(Math.pow(t, 2)),
+    );
+    res.add(
+      Vector.add(
+        Vector.add(a.copy().mult(-1), b.copy().mult(3)),
+        Vector.add(c.copy().mult(-3), d.copy()),
+      ).mult(Math.pow(t, 3)),
+    );
 
     return res;
   }
@@ -123,15 +155,20 @@ export class PathSegment {
         points.push([i * resolution, this]);
       }
     }
-    return points
+    return points;
   }
 
   tangent(t: number) {
-    // dP(t) / dt =  -3(1-t)^2 * P0 + 3(1-t)^2 * P1 - 6t(1-t) * P1 - 3t^2 * P2 + 6t(1-t) * P2 + 3t^2 * P3 
+    // dP(t) / dt =  -3(1-t)^2 * P0 + 3(1-t)^2 * P1 - 6t(1-t) * P1 - 3t^2 * P2 + 6t(1-t) * P2 + 3t^2 * P3
     const [a, b, c, d] = this.points;
 
     const res = Vector.sub(b, a).mult(3 * Math.pow(1 - t, 2));
-    res.add(Vector.add(Vector.sub(c, b).mult(6 * (1 - t) * t), Vector.sub(d, c).mult(3 * Math.pow(t, 2))));
+    res.add(
+      Vector.add(
+        Vector.sub(c, b).mult(6 * (1 - t) * t),
+        Vector.sub(d, c).mult(3 * Math.pow(t, 2)),
+      ),
+    );
 
     return res;
   }
@@ -158,12 +195,12 @@ export class PathSegment {
 
         let dist;
         if (k <= 0.0) {
-          dist = Vector.hypot2(v, a)
+          dist = Vector.hypot2(v, a);
         } else if (k >= 1.0) {
-          dist = Vector.hypot2(v, b)
+          dist = Vector.hypot2(v, b);
         }
 
-        dist = Vector.hypot2(v, d)
+        dist = Vector.hypot2(v, d);
 
         if (dist < distance) {
           distance = dist;
@@ -179,27 +216,32 @@ export class PathSegment {
 
   calculateApproxLength(resolution = 25) {
     const stepSize = 1 / resolution;
-    const points: Vector[] = []
+    const points: Vector[] = [];
     for (let i = 0; i <= resolution; i++) {
       const current = stepSize * i;
-      points.push(this.getPointAtT(current))
+      points.push(this.getPointAtT(current));
     }
-    this.length = points.reduce((acc: { prev?: Vector, length: number }, cur) => {
+    this.length =
-      const prev = acc.prev;
+      points.reduce((acc: { prev?: Vector; length: number }, cur) => {
-      acc.prev = cur;
+        const prev = acc.prev;
-      if (!prev) return acc;
+        acc.prev = cur;
-      acc.length += cur.dist(prev);
+        if (!prev) return acc;
-      return acc;
+        acc.length += cur.dist(prev);
-    }, { prev: undefined, length: 0 }).length
+        return acc;
+      }, { prev: undefined, length: 0 }).length;
     return this.length;
   }
 
-  calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
+  calculateEvenlySpacedPoints(
-    const points: Vector[] = []
+    spacing: number,
+    resolution = 1,
+    targetLength?: number,
+  ) {
+    const points: [Vector, number][] = [];
 
-    points.push(this.points[0]);
+    points.push([this.points[0], this.tangent(0).heading()]);
-    let prev = points[0];
+    let [prev] = points[0];
-    let distSinceLastEvenPoint = 0
+    let distSinceLastEvenPoint = 0;
 
     let t = 0;
 
@@ -209,18 +251,62 @@ export class PathSegment {
       const point = this.getPointAtT(t);
       distSinceLastEvenPoint += prev.dist(point);
 
-
       if (distSinceLastEvenPoint >= spacing) {
         const overshoot = distSinceLastEvenPoint - spacing;
-        const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot))
+        const evenPoint = Vector.add(
+          point,
+          Vector.sub(point, prev).normalize().mult(overshoot),
+        );
         distSinceLastEvenPoint = overshoot;
-        points.push(evenPoint);
+        points.push([evenPoint, this.tangent(t).heading()]);
         prev = evenPoint;
       }
 
       prev = point;
     }
 
+    if (targetLength && points.length < targetLength) {
+      while (points.length < targetLength) {
+        t += 1 / div;
+        const point = this.getPointAtT(t);
+        distSinceLastEvenPoint += prev.dist(point);
+
+        if (distSinceLastEvenPoint >= spacing) {
+          const overshoot = distSinceLastEvenPoint - spacing;
+          const evenPoint = Vector.add(
+            point,
+            Vector.sub(point, prev).normalize().mult(overshoot),
+          );
+          distSinceLastEvenPoint = overshoot;
+          points.push([evenPoint, this.tangent(t).heading()]);
+          prev = evenPoint;
+        }
+
+        prev = point;
+      }
+    }
+
     return points;
   }
+
+  calculateSubdividedPoints(numberOfPoints: number) {
+    const points: Vector[] = [];
+
+    for (let i = 0; i < numberOfPoints; i++) {
+      const point = this.getPointAtT(i / numberOfPoints);
+      points.push(point);
+    }
+
+    return points;
+  }
+
+  clampLength() {
+    const curveLength = this.startingLength;
+    const points = this.calculateEvenlySpacedPoints(1, 1, curveLength + 1);
+    if (points.length >= curveLength) {
+      this.points[3].set(points[curveLength][0]);
+    }
+  }
+
+  draw(): void {}
 }

prototype.ts

@@ -0,0 +1,282 @@
+import { lerp } from "./math/lerp.ts";
+import { ComplexPath, PathSegment } from "./math/path.ts";
+import { Mover } from "./physics/mover.ts";
+import { Train, TrainCar } from "./train/train.old.ts";
+import { generateSquareTrack, IControlNode, loadFromJson } from "./track.ts";
+import { drawLine } from "./drawing/line.ts";
+import { initializeDoodler, Vector } from "doodler";
+
+const engineSprites = document.createElement("img");
+engineSprites.src = "./sprites/EngineSprites.png";
+engineSprites.style.display = "none";
+engineSprites.id = "engine-sprites";
+document.body.append(engineSprites);
+
+initializeDoodler({
+  fillScreen: true,
+  bg: "#333",
+}, true);
+
+let path;
+
+try {
+  path = loadFromJson();
+} catch {
+  path = generateSquareTrack();
+}
+
+const controls = {
+  ArrowUp: false,
+  ArrowRight: false,
+  ArrowDown: false,
+  ArrowLeft: false,
+};
+
+let t = 0;
+let currentSeg = 0;
+let speed = 1;
+
+// const trainCount = 1;
+// const trains = Array(trainCount).fill(null).map((_, i) => new Train(path.segments[i % path.segments.length], 5));
+// const car = new TrainCar(55, engineSprites, 80, 20, {
+//   at: new Vector(0, 80),
+//   height: 20,
+//   width: 80,
+// });
+const length = Math.floor(Math.random() * 7);
+const cars = Array.from(
+  { length },
+  () =>
+    new TrainCar(40, engineSprites, 61, 20, {
+      at: new Vector(80, 20 * Math.ceil(Math.random() * 3)),
+      width: 61,
+      height: 20,
+    }),
+);
+const train = new Train(path, cars);
+
+let dragEndCounter = 0;
+let selectedNode: IControlNode | undefined;
+
+doodler.createLayer((_1, _2, _3) => {
+  // console.log(_1, _2, _3);
+  _1.imageSmoothingEnabled = false;
+  const dTime = (_3 < 0 ? 1 : _3) / 1000;
+  // console.log(dTime);
+  for (let i = 0; i < path.evenPoints.length; i += 10) {
+    const p = path.evenPoints[i];
+    const next = path.evenPoints[(i + 1) % path.evenPoints.length];
+    const last = path.evenPoints.at(i - 1);
+    if (!last) break;
+    const tan = Vector.sub(last, next);
+
+    doodler.drawRotated(p, tan.heading(), () => {
+      doodler.line(p, p.copy().add(0, 10), { color: "#291b17", weight: 4 });
+      doodler.line(p, p.copy().add(0, -10), { color: "#291b17", weight: 4 });
+      doodler.line(p.copy().add(-6, 5), p.copy().add(6, 5), {
+        color: "grey",
+        weight: 2,
+      });
+      doodler.line(p.copy().add(-6, -5), p.copy().add(6, -5), {
+        color: "grey",
+        weight: 2,
+      });
+    });
+  }
+  path.draw();
+  train.move(dTime);
+
+  selectedNode?.anchor.drawDot();
+  selectedNode?.controls.forEach((e) => e.drawDot());
+});
+
+let editable = false;
+
+const clickables = new Map();
+
+let selectedPoint: Vector;
+
+document.addEventListener("keyup", (e) => {
+  if (e.key === "d") {
+    // console.log(trains)
+    // console.log(path.segments.reduce((a,b) => a + b.calculateApproxLength(1000), 0))
+    // console.log(path.evenPoints);
+  }
+
+  if (e.key === "ArrowUp") {
+    // for (const train of trains) {
+    //   train.speed += .1;
+    // }
+    speed += .1;
+    train.speed += 1;
+  }
+  if (e.key === "ArrowDown") {
+    // for (const train of trains) {
+    //   train.speed -= .1;
+    // }
+    speed -= .1;
+    train.speed -= 1;
+  }
+
+  if (e.key === "m" && selectedPoint) {
+    const points = path.points;
+    const index = points.findIndex((p) => p === selectedPoint);
+    if (index > -1) {
+      const prev = points.at(index - 1)!;
+      const next = points[(index + 1) % points.length];
+
+      const toPrev = Vector.sub(prev, selectedPoint);
+      toPrev.setMag(next.dist(selectedPoint));
+      toPrev.rotate(Math.PI);
+      const toNext = Vector.add(toPrev, selectedPoint);
+      next.set(toNext);
+
+      path.calculateApproxLength();
+      path.calculateEvenlySpacedPoints(1);
+    }
+  }
+  let translate: boolean = false;
+
+  if (e.key === "e" && !translate) {
+    editable = !editable;
+    for (const t of path.segments) {
+      t.editable = !t.editable;
+      for (const p of t.points) {
+        if (t.editable) {
+          doodler.registerDraggable(p, 10);
+          doodler.addDragEvents({
+            point: p,
+            onDragEnd: () => {
+              dragEndCounter++;
+              t.length = t.calculateApproxLength(100);
+              path.evenPoints = path.calculateEvenlySpacedPoints(1);
+            },
+            onDrag: (movement) => {
+              // todo - remove ! after updating doodler
+              path.handleNodeEdit(p, movement!);
+            },
+          });
+        } else {
+          doodler.unregisterDraggable(p);
+        }
+      }
+    }
+    for (const p of path.points) {
+      if (editable) {
+        const onClick = () => {
+          selectedPoint = p;
+          selectedNode = path.nodes.find((e) =>
+            e.anchor === p || e.controls.includes(p)
+          );
+        };
+
+        clickables.set(p, onClick);
+        doodler.registerClickable(
+          p.copy().sub(10, 10),
+          p.copy().add(10, 10),
+          onClick,
+        );
+      } else {
+        const the = clickables.get(p);
+        doodler.unregisterClickable(the);
+      }
+    }
+  }
+
+  let x = 0;
+  let y = 0;
+  const onDrag = (e: MouseEvent) => {
+    x += e.movementX;
+    y += e.movementY;
+    console.log("draggin");
+  };
+  const dragEnd = () => {
+    x = 0;
+    y = 0;
+    for (const t of path.points) {
+      t.add(x, y);
+    }
+  };
+  if (e.key === "t" && editable) {
+    // translate = !translate;
+
+    // console.log(translate);
+
+    for (const t of path.points) {
+      t.add(100, 100);
+    }
+    path.calculateEvenlySpacedPoints(1);
+
+    // switch (translate) {
+    //   case true:
+    //     console.log("adding");
+    //     ((doodler as any)._canvas as HTMLCanvasElement).addEventListener(
+    //       "drag",
+    //       onDrag,
+    //     );
+    //     ((doodler as any)._canvas as HTMLCanvasElement).addEventListener(
+    //       "dragend",
+    //       dragEnd,
+    //     );
+    //     break;
+    //   case false:
+    //     ((doodler as any)._canvas as HTMLCanvasElement).removeEventListener(
+    //       "drag",
+    //       onDrag,
+    //     );
+    //     ((doodler as any)._canvas as HTMLCanvasElement).removeEventListener(
+    //       "dragend",
+    //       dragEnd,
+    //     );
+    //     break;
+    // }
+  }
+});
+
+// document.addEventListener('keydown', e => {
+//   const valid = ["ArrowUp",
+//     "ArrowRight",
+//     "ArrowDown",
+//     "ArrowLeft",]
+//   if (valid.includes(e.key))
+//     controls[e.key as keyof typeof controls] = true;
+// })
+// document.addEventListener('keyup', e => {
+//   const valid = ["ArrowUp",
+//     "ArrowRight",
+//     "ArrowDown",
+//     "ArrowLeft",]
+//   if (valid.includes(e.key))
+//     controls[e.key as keyof typeof controls] = false;
+// })
+
+// function getSteeringForce(mover: Mover, dir: string) {
+//   const dirs = {
+//     ArrowUp: 0,
+//     ArrowRight: .1 * Math.PI,
+//     ArrowDown: Math.PI,
+//     ArrowLeft: -.1 * Math.PI,
+//   }
+
+//   const target = mover.velocity.copy();
+//   target.normalize();
+//   target.mult(10);
+//   target.rotate(dirs[dir as keyof typeof dirs]);
+//   const force = Vector.sub(target, mover.velocity);
+//   force.limit(.1)
+//   return force;
+// }
+
+document.addEventListener("keydown", (e) => {
+  if (e.key === "s") {
+    e.preventDefault();
+    path.segments.forEach((s: any) => {
+      s.next = s.next.id;
+      s.prev = s.prev.id;
+      delete s.ctx;
+    });
+    delete path.ctx;
+    const json = JSON.stringify(path);
+    localStorage.setItem("railPath", json);
+  }
+});

state/machine.ts

@@ -0,0 +1,87 @@
+import { getContext } from "../lib/context.ts";
+import { TrackSystem } from "../track/system.ts";
+import { Train } from "../train.old.ts";
+
+export class StateMachine<T> {
+  private _states: Map<T, State<T>> = new Map();
+  private currentState?: State<T>;
+
+  update(dt: number, ctx?: CanvasRenderingContext2D) {
+    this.currentState?.update(dt, ctx);
+  }
+
+  optimizePerformance(percent: number) {
+    const ctx = getContext() as { trains: Train[]; track: TrackSystem };
+    if (percent < 0.5) {
+      ctx.track.optimize(percent);
+    }
+  }
+
+  get current() {
+    return this.currentState;
+  }
+
+  get states() {
+    return this._states;
+  }
+
+  addState(state: State<T>) {
+    this.states.set(state.name, state);
+  }
+
+  transitionTo(state: T) {
+    if (!this.current) {
+      this.currentState = this._states.get(state)!;
+      this.currentState.start();
+      return;
+    }
+    if (this.current?.canTransitionTo(state) && this._states.has(state)) {
+      this.current.stop();
+      this.currentState = this._states.get(state)!;
+      this.current.start();
+    }
+  }
+}
+
+export abstract class State<T> {
+  protected stateMachine: StateMachine<T>;
+  protected abstract validTransitions: Set<T>;
+
+  abstract readonly name: T;
+
+  constructor(
+    stateMachine: StateMachine<T>,
+  ) {
+    this.stateMachine = stateMachine;
+  }
+
+  abstract update(dt: number, ctx?: CanvasRenderingContext2D): void;
+  abstract start(): void;
+  abstract stop(): void;
+
+  canTransitionTo(state: T) {
+    return this.validTransitions.has(state);
+  }
+}
+
+export abstract class ExtensibleState<T> extends State<T> {
+  extensions: Map<string, (...args: unknown[]) => void> = new Map();
+  registerExtension(name: string, cb: (...args: unknown[]) => void) {
+    this.extensions.set(name, cb);
+  }
+
+  constructor(stateMachine: StateMachine<T>) {
+    super(stateMachine);
+    const oldUpdate = this.update;
+    this.update = function (dt: number, ctx?: CanvasRenderingContext2D) {
+      oldUpdate.apply(this, [dt, ctx]);
+      this.runExtensions(dt, ctx);
+    };
+  }
+
+  runExtensions(...args: unknown[]) {
+    for (const [name, cb] of this.extensions) {
+      cb(...args);
+    }
+  }
+}

state/states/EditTrackState.ts

@@ -0,0 +1,420 @@
+import { Doodler, Vector } from "@bearmetal/doodler";
+import {
+  getContextItem,
+  getContextItemOrDefault,
+  setContextItem,
+} from "../../lib/context.ts";
+import { InputManager } from "../../lib/input.ts";
+import { TrackSystem } from "../../track/system.ts";
+import { State, StateMachine } from "../machine.ts";
+import { States } from "./index.ts";
+import {
+  BankLeft,
+  BankRight,
+  SBendLeft,
+  SBendRight,
+  StraightTrack,
+} from "../../track/shapes.ts";
+import { TrackSegment } from "../../track/system.ts";
+import { clamp } from "../../math/clamp.ts";
+
+export class EditTrackState extends State<States> {
+  override name: States = States.EDIT_TRACK;
+  override validTransitions: Set<States> = new Set([
+    States.RUNNING,
+    States.PAUSED,
+  ]);
+
+  private heldEvents: Map<string, (() => void) | undefined> = new Map();
+
+  private currentSegment?: TrackSegment;
+  private selectedSegment?: TrackSegment;
+  private ghostSegment?: TrackSegment;
+  private ghostRotated = false;
+  private closestEnd?: End;
+
+  layers: number[] = [];
+
+  override update(dt: number): void {
+    const inputManager = getContextItem<InputManager>("inputManager");
+    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();
+      const mousePos = inputManager.getMouseLocationV();
+      segment.points.forEach((p, i) => {
+        const relativePoint = Vector.sub(p, firstPoint);
+        p.set(mousePos);
+        p.add(relativePoint);
+      });
+
+      const ends = track.findEnds();
+      setContextItem("showEnds", true);
+      const nearbyEnds = ends.filter((end) => {
+        const dist = Vector.dist(end.pos, mousePos);
+        return dist < 20 && end.segment !== segment;
+      });
+      let closestEnd = nearbyEnds[0];
+      for (const end of nearbyEnds) {
+        if (end === closestEnd) continue;
+        const closestEndTangent = Vector.add(
+          closestEnd.tangent.copy().mult(20),
+          closestEnd.pos,
+        );
+        const endTangent = Vector.add(
+          end.tangent.copy().rotate(Math.PI).mult(20),
+          end.pos,
+        );
+        doodler.drawCircle(closestEndTangent, 4, { color: "red", weight: 1 });
+        doodler.drawCircle(endTangent, 4, { color: "blue", weight: 1 });
+        if (
+          endTangent.dist(mousePos) < closestEndTangent.dist(mousePos) ||
+          end.pos.dist(mousePos) < closestEnd.pos.dist(mousePos)
+        ) {
+          closestEnd = end;
+        }
+      }
+      if (closestEnd !== this.closestEnd) {
+        this.closestEnd = closestEnd;
+        this.ghostSegment = undefined;
+        this.ghostRotated = false;
+      }
+      if (closestEnd) {
+        // doodler.drawCircle(closestEnd.pos, 4, { color: "green", weight: 1 });
+        doodler.line(
+          closestEnd.pos,
+          Vector.add(closestEnd.pos, closestEnd.tangent.copy().mult(20)),
+          { color: "green" },
+        );
+      }
+      if (
+        this.closestEnd
+      ) {
+        if (!this.ghostSegment) {
+          this.ghostSegment = segment.copy();
+          this.ghostRotated = false;
+        }
+        switch (this.closestEnd.frontOrBack) {
+          case "front":
+            this.ghostSegment.setPositionByPoint(
+              this.closestEnd.pos,
+              this.ghostSegment.points[0],
+            );
+            // this.ghostSegment.points[0] = this.closestEnd.pos;
+            !this.ghostRotated && this.ghostSegment.rotateAboutPoint(
+              this.closestEnd.tangent.heading(),
+              this.ghostSegment.points[0],
+            );
+            this.ghostRotated = true;
+            break;
+          case "back": {
+            this.ghostSegment.setPositionByPoint(
+              this.closestEnd.pos,
+              this.ghostSegment.points[3],
+            );
+            const ghostEndTangent = this.ghostSegment.tangent(1);
+            // this.ghostSegment.points[3] = this.closestEnd.pos;
+            !this.ghostRotated && this.ghostSegment.rotateAboutPoint(
+              this.closestEnd.tangent.heading() - ghostEndTangent.heading(),
+              this.ghostSegment.points[3],
+            );
+            this.ghostRotated = true;
+            break;
+          }
+        }
+        // } else if (closestEnd) {
+        //   this.closestEnd = closestEnd;
+      } else if (!this.closestEnd || !closestEnd) {
+        this.ghostSegment = undefined;
+        this.ghostRotated = false;
+      }
+    }
+
+    // manipulate only end of segment while maintaining length
+    // const segment = track.lastSegment;
+    // if (segment) {
+    //   const p3 = segment.points[2];
+    //   const p4 = segment.points[3];
+    //   let curveLength = Math.round(segment.calculateApproxLength());
+    //   this.startingLength = this.startingLength ?? curveLength;
+    //   curveLength = this.startingLength;
+    //   const { x, y } = inputManager.getMouseLocation();
+    //   p4.set(x, y);
+    //   const points = segment.calculateEvenlySpacedPoints(1);
+    //   if (points.length > curveLength) p4.set(points[curveLength - 1]);
+
+    //   // doodler.fillText(curveLength.toFixed(2), p3.copy().add(10, 0), 100);
+    // }
+
+    // Adjust angles until tangent points to mouse
+    // const segment = this.currentSegment;
+    // if (segment) {
+    //   segment.propagate();
+
+    //   const mousePos = inputManager.getMouseLocationV();
+    //   const p1 = segment.points[0];
+    //   const p2 = segment.points[1];
+    //   const p3 = segment.points[2];
+    //   const p4 = segment.points[3];
+
+    //   const prevp3 = p3.copy();
+    //   const dirToMouse = Vector.sub(mousePos, p2).normalize();
+    //   const angleToMouse = dirToMouse.heading();
+    //   const dirToP1 = Vector.sub(p2, p1).normalize();
+    //   const angleToP1 = dirToP1.heading();
+    //   const p2DistToMouse = Vector.dist(p2, mousePos);
+    //   const p3DistToMouse = Vector.dist(p3, mousePos);
+    //   const distToP3 = Vector.dist(p2, p3);
+    //   const distToP4 = Vector.dist(prevp3, p4);
+
+    //   const goodangle = clamp(
+    //     angleToMouse - angleToP1,
+    //     angleToP1 - .6,
+    //     angleToP1 + .6,
+    //   );
+    //   if (
+    //     // Math.abs(goodangle) < .6 &&
+    //     p2DistToMouse > distToP3 &&
+    //     p3DistToMouse > distToP4
+    //   ) {
+    //     {
+    //       const dirToNewP3 = dirToP1.copy().rotate(
+    //         goodangle / 2,
+    //       );
+    //       dirToNewP3.setMag(distToP3);
+    //       p3.set(Vector.add(p2, dirToNewP3));
+    //       doodler.line(p2, Vector.add(p2, dirToNewP3), { color: "blue" });
+    //       doodler.line(
+    //         p2,
+    //         Vector.add(p2, dirToNewP3),
+    //         {
+    //           color: "red",
+    //         },
+    //       );
+    //     }
+    //     {
+    //       const dirToMouse = Vector.sub(mousePos, p3).normalize();
+    //       const dirToP3 = Vector.sub(p3, p2).normalize();
+    //       const angleToP3 = dirToP3.heading();
+    //       const goodangle = clamp(
+    //         dirToMouse.heading() - angleToP3,
+    //         angleToP3 - .6,
+    //         angleToP3 + .6,
+    //       );
+
+    //       const dirToNewP4 = dirToP3.copy().rotate(
+    //         goodangle / 2,
+    //       );
+    //       dirToNewP4.setMag(distToP4);
+    //       p4.set(Vector.add(p3, dirToNewP4));
+    //       doodler.line(p3, Vector.add(p3, dirToNewP4), { color: "green" });
+    //     }
+    //     segment.clampLength();
+    //   }
+    //   // doodler.fillText(
+    //   //   segment.calculateApproxLength().toFixed(2),
+    //   //   p2.copy().add(10, 0),
+    //   //   100,
+    //   // );
+    // }
+
+    const translation = new Vector(0, 0);
+
+    if (inputManager.getKeyState("ArrowUp")) {
+      translation.y -= 1;
+    }
+    if (inputManager.getKeyState("ArrowDown")) {
+      translation.y += 1;
+    }
+    if (inputManager.getKeyState("ArrowLeft")) {
+      translation.x -= 1;
+    }
+    if (inputManager.getKeyState("ArrowRight")) {
+      translation.x += 1;
+    }
+
+    if (translation.x !== 0 || translation.y !== 0) {
+      track.translate(translation);
+    }
+
+    // TODO
+    // Draw ui
+    // Draw track points
+    // Draw track tangents
+  }
+  override start(): void {
+    const doodler = getContextItem<Doodler>("doodler");
+    this.layers.push(
+      doodler.createLayer(() => {
+        this.selectedSegment?.draw(false, true);
+        if (this.ghostSegment) {
+          doodler.drawWithAlpha(0.5, () => {
+            if (!this.ghostSegment) return;
+            this.ghostSegment.draw(false, true);
+            if (getContextItemOrDefault("debug", false)) {
+              const colors = getContextItem<string[]>("colors");
+              for (
+                const [i, point] of this.ghostSegment.points.entries() ?? []
+              ) {
+                doodler.fillCircle(point, 4, { color: colors[i + 3] });
+              }
+            }
+          });
+        }
+        track.draw(true);
+      }),
+    );
+
+    setContextItem("trackSegments", [
+      undefined,
+      new StraightTrack(),
+      new SBendLeft(),
+      new SBendRight(),
+      new BankLeft(),
+      new BankRight(),
+    ]);
+
+    const inputManager = getContextItem<InputManager>("inputManager");
+    this.heldEvents.set("e", inputManager.offKey("e"));
+    this.heldEvents.set("Escape", inputManager.offKey("Escape"));
+    inputManager.onKey("e", () => {
+      const state = getContextItem<StateMachine<States>>("state");
+      state.transitionTo(States.RUNNING);
+    });
+
+    const track = getContextItem<TrackSystem>("track");
+    setContextItem("trackCopy", track.copy());
+    inputManager.onKey("Escape", () => {
+      const trackCopy = getContextItem<TrackSystem>("trackCopy");
+      setContextItem("track", trackCopy);
+      setContextItem("trackCopy", undefined);
+      const state = getContextItem<StateMachine<States>>("state");
+      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) {
+        const segment = this.ghostSegment.cleanCopy();
+
+        switch (this.closestEnd.frontOrBack) {
+          case "front":
+            this.closestEnd.segment.frontNeighbours.push(segment);
+            segment.backNeighbours.push(this.closestEnd.segment);
+            break;
+          case "back":
+            this.closestEnd.segment.backNeighbours.push(segment);
+            segment.frontNeighbours.push(this.closestEnd.segment);
+            break;
+        }
+        track.registerSegment(segment);
+        this.ghostSegment = undefined;
+        this.closestEnd = undefined;
+      } else if (this.selectedSegment) {
+        track.registerSegment(this.selectedSegment.cleanCopy());
+        // this.selectedSegment = new StraightTrack();
+      } else {
+        this.selectedSegment = undefined;
+      }
+    });
+
+    // inputManager.onKey("w", () => {
+    //   const track = getContextItem<TrackSystem>("track");
+    //   const segment = track.lastSegment;
+    //   if (!segment) return;
+    //   const n = new StraightTrack(segment.points[3]);
+    //   const t = segment.tangent(1).heading();
+    //   n.rotate(t);
+    //   segment.frontNeighbours.push(n);
+    //   track.registerSegment(n);
+    //   this.currentSegment = n;
+    // });
+
+    // inputManager.onKey("1", () => {
+    //   this.currentSegment = track.firstSegment;
+    // });
+
+    inputManager.onNumberKey((i) => {
+      const segments = getContextItem<TrackSegment[]>("trackSegments");
+      this.selectedSegment = segments[i];
+      this.ghostRotated = false;
+      this.ghostSegment = undefined;
+    });
+
+    // this.currentSegment = track.lastSegment;
+    inputManager.onKey("z", () => {
+      if (inputManager.getKeyState("Control")) {
+        const segment = track.lastSegment;
+        if (!segment) return;
+        this.redoBuffer.push(segment);
+        if (this.redoBuffer.length > 100) {
+          this.redoBuffer.shift();
+        }
+        track.unregisterSegment(segment);
+      }
+    });
+    inputManager.onKey("y", () => {
+      if (inputManager.getKeyState("Control")) {
+        const segment = this.redoBuffer.pop();
+        if (!segment) return;
+        track.registerSegment(segment);
+      }
+    });
+
+    // TODO
+    // Cache trains and save
+
+    // const trackCount = 2000;
+    // for (let i = 0; i < trackCount; i++) {
+    //   const seg = new StraightTrack();
+    //   track.registerSegment(seg);
+    // }
+  }
+  redoBuffer: TrackSegment[] = [];
+  override stop(): void {
+    for (const layer of this.layers) {
+      getContextItem<Doodler>("doodler").deleteLayer(layer);
+    }
+
+    const track = getContextItem<TrackSystem>("track");
+    track.recalculateAll();
+
+    const inputManager = getContextItem<InputManager>("inputManager");
+    inputManager.offKey("e");
+    inputManager.offKey("w");
+    inputManager.offKey("Escape");
+    inputManager.offMouse("left");
+    if (this.heldEvents.size > 0) {
+      for (const [key, cb] of this.heldEvents) {
+        if (cb) {
+          getContextItem<InputManager>("inputManager").onKey(key, cb);
+        }
+        this.heldEvents.delete(key);
+      }
+    }
+    setContextItem("trackCopy", undefined);
+    setContextItem("trackSegments", undefined);
+  }
+}

state/states/EditTrainState.ts

@@ -0,0 +1,25 @@
+import { State } from "../machine.ts";
+import { States } from "./index.ts";
+
+export class EditTrainState extends State<States> {
+  override name: States = States.EDIT_TRAIN;
+  override validTransitions: Set<States> = new Set([
+    States.RUNNING,
+    States.PAUSED,
+  ]);
+
+  override update(dt: number): void {
+    throw new Error("Method not implemented.");
+  }
+  override start(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Cache trains
+    // Stash train in context
+    // Draw track
+    // Draw train (filtered by train ID)
+  }
+  override stop(): void {
+    throw new Error("Method not implemented.");
+  }
+}

state/states/LoadState.ts

@@ -0,0 +1,67 @@
+import { Doodler, Vector } from "@bearmetal/doodler";
+import { bootstrapInputs } from "../../inputs.ts";
+import { getContextItem, setContextItem } from "../../lib/context.ts";
+import { InputManager } from "../../lib/input.ts";
+import { ResourceManager } from "../../lib/resources.ts";
+import { StraightTrack } from "../../track/shapes.ts";
+import { TrackSystem } from "../../track/system.ts";
+import { State } from "../machine.ts";
+import { States } from "./index.ts";
+
+export class LoadState extends State<States> {
+  override name: States = States.LOAD;
+  override validTransitions: Set<States> = new Set([
+    States.RUNNING,
+  ]);
+
+  layers: number[] = [];
+
+  override update(): void {
+    // noop
+  }
+  override start(): void {
+    const track = this.loadTrack() ?? new TrackSystem([new StraightTrack()]);
+    setContextItem("track", track);
+
+    const trains = this.loadTrains() ?? [];
+    setContextItem("trains", trains);
+
+    const resources = new ResourceManager();
+    setContextItem("resources", resources);
+
+    const inputManager = new InputManager();
+    setContextItem("inputManager", inputManager);
+
+    bootstrapInputs();
+
+    resources.set("engine-sprites", new Image());
+    resources.get<HTMLImageElement>("engine-sprites")!.src =
+      "/sprites/EngineSprites.png";
+    resources.ready().then(() => {
+      this.stateMachine.transitionTo(States.RUNNING);
+    });
+
+    const doodler = getContextItem<Doodler>("doodler");
+    this.layers.push(doodler.createLayer((_, __, dTime) => {
+      doodler.clearRect(new Vector(0, 0), doodler.width, doodler.height);
+      doodler.fillRect(new Vector(0, 0), doodler.width, doodler.height, {
+        color: "#302040",
+      });
+    }));
+  }
+  override stop(): void {
+    // noop
+  }
+
+  private loadTrack() {
+    const track = TrackSystem.deserialize(
+      JSON.parse(localStorage.getItem("track") || "[]"),
+    );
+    return track;
+  }
+
+  private loadTrains() {
+    const trains = JSON.parse(localStorage.getItem("trains") || "[]");
+    return trains;
+  }
+}

state/states/PausedState.ts

@@ -0,0 +1,30 @@
+import { State } from "../machine.ts";
+import { States } from "./index.ts";
+
+export class PausedState extends State<States> {
+  override name: States = States.PAUSED;
+  override validTransitions: Set<States> = new Set([
+    States.LOAD,
+    States.RUNNING,
+    States.EDIT_TRACK,
+    States.EDIT_TRAIN,
+  ]);
+  override update(dt: number): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Handle input
+    // Draw ui
+  }
+  override start(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Save tracks to cache
+    // Save trains to cache
+    // Save resources to cache
+  }
+  override stop(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Do nothing
+  }
+}

state/states/RunningState.ts

@@ -0,0 +1,88 @@
+import { Doodler } from "@bearmetal/doodler";
+import { getContext, getContextItem } from "../../lib/context.ts";
+import { InputManager } from "../../lib/input.ts";
+import { TrackSystem } from "../../track/system.ts";
+import { Tender } from "../../train/cars.ts";
+import { RedEngine } from "../../train/engines.ts";
+import { DotFollower } from "../../train/newTrain.ts";
+import { Train } from "../../train/train.ts";
+import { State } from "../machine.ts";
+import { States } from "./index.ts";
+
+export class RunningState extends State<States> {
+  override name: States = States.RUNNING;
+  override validTransitions: Set<States> = new Set([
+    States.PAUSED,
+    States.EDIT_TRACK,
+  ]);
+
+  layers: number[] = [];
+
+  override update(dt: number): void {
+    const ctx = getContext() as { trains: Train[]; track: TrackSystem };
+    // const ctx = getContext() as { trains: DotFollower[]; track: TrackSystem };
+    // TODO
+    // Update trains
+    // Update world
+    // Handle input
+    // Draw (maybe via a layer system that syncs with doodler)
+    // Monitor world events
+    for (const train of ctx.trains) {
+      train.move(dt);
+    }
+  }
+  override start(): void {
+    const doodler = getContextItem<Doodler>("doodler");
+    this.layers.push(
+      doodler.createLayer(() => {
+        const track = getContextItem<TrackSystem>("track");
+        track.draw();
+      }),
+      doodler.createLayer(() => {
+        const trains = getContextItem<Train[]>("trains");
+        for (const train of trains) {
+          // if (input.getKeyState("ArrowUp")) {
+          //   train.acceleration.x += 10;
+          // }
+          train.draw();
+        }
+      }),
+    );
+
+    // noop
+    const inputManager = getContextItem<InputManager>("inputManager");
+    const track = getContextItem<TrackSystem>("track");
+    const ctx = getContext() as { trains: Train[] };
+    // const ctx = getContext() as { trains: DotFollower[] };
+    inputManager.onKey(" ", () => {
+      // const path = track.path;
+      // const follower = new DotFollower(path, path.points[0].copy());
+      // ctx.trains.push(follower);
+      const train = new Train(track.path, [new RedEngine(), new Tender()]);
+      ctx.trains.push(train);
+    });
+    // const trainCount = 2000;
+    // for (let i = 0; i < trainCount; i++) {
+    //   const train = new Train(track.path, [new RedEngine(), new Tender()]);
+    //   ctx.trains.push(train);
+    // }
+
+    inputManager.onKey("ArrowUp", () => {
+      const trains = getContextItem<Train[]>("trains");
+      for (const train of trains) {
+        train.speed += 1;
+      }
+    });
+    inputManager.onKey("ArrowDown", () => {
+      const trains = getContextItem<Train[]>("trains");
+      for (const train of trains) {
+        train.speed -= 1;
+      }
+    });
+  }
+  override stop(): void {
+    for (const layer of this.layers) {
+      getContextItem<Doodler>("doodler").deleteLayer(layer);
+    }
+  }
+}

state/states/index.ts

@@ -0,0 +1,26 @@
+import { StateMachine } from "../machine.ts";
+import { Track } from "../../track.ts";
+import { EditTrainState } from "./EditTrainState.ts";
+import { EditTrackState } from "./EditTrackState.ts";
+import { PausedState } from "./PausedState.ts";
+import { RunningState } from "./RunningState.ts";
+import { LoadState } from "./LoadState.ts";
+
+export enum States {
+  LOAD,
+  RUNNING,
+  PAUSED,
+  EDIT_TRACK,
+  EDIT_TRAIN,
+}
+
+export function bootstrapGameStateMachine() {
+  const stateMachine = new StateMachine<States>();
+  stateMachine.addState(new LoadState(stateMachine));
+  stateMachine.addState(new RunningState(stateMachine));
+  stateMachine.addState(new PausedState(stateMachine));
+  stateMachine.addState(new EditTrackState(stateMachine));
+  stateMachine.addState(new EditTrainState(stateMachine));
+  stateMachine.transitionTo(States.LOAD);
+  return stateMachine;
+}

test/bench.ts

@@ -0,0 +1,38 @@
+import { assert } from "jsr:@std/assert";
+import { describe, it } from "jsr:@std/testing/bdd";
+
+/**
+ * Tests if a function can run a given number of iterations within a target frame time.
+ * @param fn The function to test.
+ * @param iterations Number of times to run the function per frame.
+ * @param fps Target frames per second.
+ */
+export function testPerformance(
+  fn: () => unknown,
+  iterations: number,
+  fps: number,
+) {
+  console.log(`Performance Test - ${iterations} iterations at ${fps} FPS`);
+  const frameTime = 1000 / fps;
+  const startTime = performance.now();
+
+  for (let i = 0; i < iterations; i++) {
+    fn();
+  }
+
+  const endTime = performance.now();
+  const elapsed = endTime - startTime;
+
+  console.log(
+    `Elapsed time: ${elapsed.toFixed(2)}ms (Target: ≤${
+      frameTime.toFixed(2)
+    }ms)`,
+  );
+  assert(
+    elapsed <= frameTime,
+    `Function took too long: ${elapsed.toFixed(2)}ms (Target: ≤${
+      frameTime.toFixed(2)
+    }ms)`,
+  );
+  // });
+}

test/contextBench.test.ts

@@ -0,0 +1,49 @@
+import {
+  getContextItem,
+  setContextItem,
+  setDefaultContext,
+  withContext,
+} from "../lib/context.ts"; // adjust path as needed
+import { testPerformance } from "./bench.ts";
+
+/**
+ * Benchmarks the performance of setting and getting context items.
+ * All context transactions should run 10000 times within the 60 FPS frame time.
+ * getContextItem should run 100000 times within the 240 FPS frame time to ensure adequate performance.
+ */
+Deno.test("Context Benchmark", () => {
+  console.log("Context Benchmark - run within frame time");
+  testPerformance(
+    () => {
+      setDefaultContext({ a: 1 });
+    },
+    10000,
+    60,
+  );
+
+  testPerformance(
+    () => {
+      withContext({ a: 1 }, () => {
+        getContextItem("a");
+      });
+    },
+    10000,
+    60,
+  );
+
+  testPerformance(
+    () => {
+      getContextItem("a");
+    },
+    100000,
+    240,
+  );
+
+  testPerformance(
+    () => {
+      setContextItem("a", 1);
+    },
+    10000,
+    60,
+  );
+});

test/trackSystemBench.test.ts

@@ -0,0 +1,35 @@
+import { assert } from "jsr:@std/assert";
+import { describe, it } from "jsr:@std/testing/bdd";
+import { TrackSystem } from "../track/system.ts";
+import { StraightTrack } from "../track/shapes.ts";
+import { testPerformance } from "./bench.ts";
+import { setDefaultContext } from "../lib/context.ts";
+
+/**
+ * Tests if a function can run a given number of iterations within a target frame time.
+ * @param fn The function to test.
+ * @param iterations Number of times to run the function per frame.
+ * @param fps Target frames per second.
+ */
+Deno.test("Track System Benchmark", () => {
+  console.log("Track System Benchmark - run within frame time");
+  const mockDoodler = {
+    fillCircle: () => {},
+    line: () => {},
+  };
+  setDefaultContext({
+    doodler: mockDoodler,
+  });
+  const mockTrack = new TrackSystem([]);
+  for (let i = 0; i < 100; i++) {
+    mockTrack.registerSegment(new StraightTrack());
+  }
+
+  testPerformance(
+    () => {
+      mockTrack.findEnds();
+    },
+    10000,
+    60,
+  );
+});

track.ts

@@ -1,9 +1,8 @@
 import { PathSegment } from "./math/path.ts";
 import { Vector } from "doodler";
-import { Train } from "./train.ts";
+import { Train } from "./train/train.ts";
 
 export class Track extends PathSegment {
-
   editable = false;
 
   next: Track;
@@ -11,7 +10,11 @@ export class Track extends PathSegment {
 
   id: string;
 
-  constructor(points: [Vector, Vector, Vector, Vector], next?: Track, prev?: Track) {
+  constructor(
+    points: [Vector, Vector, Vector, Vector],
+    next?: Track,
+    prev?: Track,
+  ) {
     super(points);
     this.id = crypto.randomUUID();
     this.next = next || this;
@@ -78,7 +81,11 @@ export class Track extends PathSegment {
   }
 
   getAllPointsInRange(v: Vector, r: number) {
-    const points: [number, PathSegment][] = this.getPointsWithinRadius(v, r).concat(this.next.getPointsWithinRadius(v, r), this.prev.getPointsWithinRadius(v, r))
+    const points: [number, PathSegment][] = this.getPointsWithinRadius(v, r)
+      .concat(
+        this.next.getPointsWithinRadius(v, r),
+        this.prev.getPointsWithinRadius(v, r),
+      );
 
     return points;
   }
@@ -111,7 +118,7 @@ export class Spline<T extends PathSegment = PathSegment> {
   pointSpacing: number;
 
   get points() {
-    return Array.from(new Set(this.segments.flatMap(s => s.points)));
+    return Array.from(new Set(this.segments.flatMap((s) => s.points)));
   }
 
   nodes: IControlNode[];
@@ -124,10 +131,13 @@ export class Spline<T extends PathSegment = PathSegment> {
     for (let i = 0; i < this.points.length; i += 3) {
       const node: IControlNode = {
         anchor: this.points[i],
-        controls: [this.points.at(i - 1)!, this.points[(i + 1) % this.points.length]],
+        controls: [
+          this.points.at(i - 1)!,
+          this.points[(i + 1) % this.points.length],
+        ],
         mirrored: false,
-        tangent: true
+        tangent: true,
-      }
+      };
       this.nodes.push(node);
     }
   }
@@ -148,13 +158,12 @@ export class Spline<T extends PathSegment = PathSegment> {
   calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
     this.pointSpacing = 1;
     // return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
-    const points: Vector[] = []
+    const points: Vector[] = [];
 
     points.push(this.segments[0].points[0]);
     let prev = points[0];
-    let distSinceLastEvenPoint = 0
+    let distSinceLastEvenPoint = 0;
     for (const seg of this.segments) {
-
       let t = 0;
 
       const div = Math.ceil(seg.length * resolution * 10);
@@ -163,16 +172,18 @@ export class Spline<T extends PathSegment = PathSegment> {
         const point = seg.getPointAtT(t);
         distSinceLastEvenPoint += prev.dist(point);
 
-
         if (distSinceLastEvenPoint >= spacing) {
           const overshoot = distSinceLastEvenPoint - spacing;
-          const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot))
+          const evenPoint = Vector.add(
+            point,
+            Vector.sub(point, prev).normalize().mult(overshoot),
+          );
           distSinceLastEvenPoint = overshoot;
           points.push(evenPoint);
           prev = evenPoint;
         }
 
-        prev = point
+        prev = point;
       }
     }
 
@@ -182,10 +193,10 @@ export class Spline<T extends PathSegment = PathSegment> {
   }
 
   followEvenPoints(t: number) {
-    if (t < 0) t += this.evenPoints.length
+    if (t < 0) t += this.evenPoints.length;
     const i = Math.floor(t);
-    const a = this.evenPoints[i]
+    const a = this.evenPoints[i];
-    const b = this.evenPoints[(i + 1) % this.evenPoints.length]
+    const b = this.evenPoints[(i + 1) % this.evenPoints.length];
 
     return Vector.lerp(a, b, t % 1);
   }
@@ -197,50 +208,92 @@ export class Spline<T extends PathSegment = PathSegment> {
   }
 
   toggleNodeTangent(p: Vector) {
-    const node = this.nodes.find(n => n.anchor === p);
+    const node = this.nodes.find((n) => n.anchor === p);
 
     node && (node.tangent = !node.tangent);
   }
   toggleNodeMirrored(p: Vector) {
-    const node = this.nodes.find(n => n.anchor === p);
+    const node = this.nodes.find((n) => n.anchor === p);
 
     node && (node.mirrored = !node.mirrored);
   }
-  handleNodeEdit(p: Vector, movement: { x: number, y: number }) {
+  handleNodeEdit(p: Vector, movement: { x: number; y: number }) {
-    const node = this.nodes.find(n => n.anchor === p || n.controls.includes(p));
+    const node = this.nodes.find((n) =>
+      n.anchor === p || n.controls.includes(p)
+    );
     if (!node || !(node.mirrored || node.tangent)) return;
 
     if (node.anchor !== p) {
       if (node.mirrored || node.tangent) {
-        const mover = node.controls.find(e => e !== p)!;
+        const mover = node.controls.find((e) => e !== p)!;
         const v = Vector.sub(node.anchor, p);
         if (!node.mirrored) v.setMag(Vector.sub(node.anchor, mover).mag());
         mover.set(Vector.add(v, node.anchor));
       }
     } else {
       for (const control of node.controls) {
-        control.add(movement.x, movement.y)
+        control.add(movement.x, movement.y);
       }
     }
   }
 }
 
 export const generateSquareTrack = () => {
-  const first = new Track([new Vector(20, 40), new Vector(20, 100), new Vector(20, 300), new Vector(20, 360)]);
+  const first = new Track([
+    new Vector(20, 40),
+    new Vector(20, 100),
+    new Vector(20, 300),
+    new Vector(20, 360),
+  ]);
 
-  const second = new Track([first.points[3], new Vector(20, 370), new Vector(30, 380), new Vector(40, 380)]);
+  const second = new Track([
+    first.points[3],
+    new Vector(20, 370),
+    new Vector(30, 380),
+    new Vector(40, 380),
+  ]);
 
-  const third = new Track([second.points[3], new Vector(100, 380), new Vector(300, 380), new Vector(360, 380)]);
+  const third = new Track([
+    second.points[3],
+    new Vector(100, 380),
+    new Vector(300, 380),
+    new Vector(360, 380),
+  ]);
 
-  const fourth = new Track([third.points[3], new Vector(370, 380), new Vector(380, 370), new Vector(380, 360)]);
+  const fourth = new Track([
+    third.points[3],
+    new Vector(370, 380),
+    new Vector(380, 370),
+    new Vector(380, 360),
+  ]);
 
-  const fifth = new Track([fourth.points[3], new Vector(380, 300), new Vector(380, 100), new Vector(380, 40)]);
+  const fifth = new Track([
+    fourth.points[3],
+    new Vector(380, 300),
+    new Vector(380, 100),
+    new Vector(380, 40),
+  ]);
 
-  const sixth = new Track([fifth.points[3], new Vector(380, 30), new Vector(370, 20), new Vector(360, 20)]);
+  const sixth = new Track([
+    fifth.points[3],
+    new Vector(380, 30),
+    new Vector(370, 20),
+    new Vector(360, 20),
+  ]);
 
-  const seventh = new Track([sixth.points[3], new Vector(300, 20), new Vector(100, 20), new Vector(40, 20)]);
+  const seventh = new Track([
+    sixth.points[3],
+    new Vector(300, 20),
+    new Vector(100, 20),
+    new Vector(40, 20),
+  ]);
 
-  const eighth = new Track([seventh.points[3], new Vector(30, 20), new Vector(20, 30), first.points[0]]);
+  const eighth = new Track([
+    seventh.points[3],
+    new Vector(30, 20),
+    new Vector(20, 30),
+    first.points[0],
+  ]);
 
   const tracks = [first, second, third, fourth, fifth, sixth, seventh, eighth];
   for (const [i, track] of tracks.entries()) {
@@ -253,25 +306,38 @@ export const generateSquareTrack = () => {
   // second.prev = first;
   // third.
 
-  return new Spline<Track>([first, second, third, fourth, fifth, sixth, seventh, eighth]);
+  return new Spline<Track>([
-}
+    first,
+    second,
+    third,
+    fourth,
+    fifth,
+    sixth,
+    seventh,
+    eighth,
+  ]);
+};
 
 export const loadFromJson = () => {
-  const json = JSON.parse(localStorage.getItem('railPath') || '');
+  const json = JSON.parse(localStorage.getItem("railPath") || "");
   if (!json) return generateSquareTrack();
   const segments: Track[] = [];
 
   for (const { points } of json.segments) {
-    segments.push(new Track(points.map((p: { x: number, y: number }) => new Vector(p.x, p.y))));
+    segments.push(
+      new Track(
+        points.map((p: { x: number; y: number }) => new Vector(p.x, p.y)),
+      ),
+    );
   }
 
   for (const [i, s] of segments.entries()) {
-    s.setNext(segments[(i + 1) % segments.length])
+    s.setNext(segments[(i + 1) % segments.length]);
-    s.setPrev(segments.at(i - 1)!)
+    s.setPrev(segments.at(i - 1)!);
   }
 
   return new Spline<Track>(segments);
-}
+};
 
 export interface IControlNode {
   anchor: Vector;

track/shapes.ts

@@ -0,0 +1,90 @@
+import { Vector } from "@bearmetal/doodler";
+import { TrackSegment } from "./system.ts";
+
+export class StraightTrack extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+    super([
+      start,
+      start.copy().add(25, 0),
+      start.copy().add(75, 0),
+      start.copy().add(100, 0),
+    ]);
+  }
+}
+
+export class SBendLeft extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+    super([
+      start,
+      start.copy().add(60, 0),
+      start.copy().add(90, -25),
+      start.copy().add(150, -25),
+    ]);
+  }
+}
+export class SBendRight extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+    super([
+      start,
+      start.copy().add(60, 0),
+      start.copy().add(90, 25),
+      start.copy().add(150, 25),
+    ]);
+  }
+}
+
+export class BankLeft 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 = 33;
+
+    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);
+
+    const p1 = start.copy();
+    const p2 = start.copy();
+    const p3 = start.copy();
+    const p4 = start.copy();
+    const scale = 33;
+
+    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,
+    ]);
+  }
+}

track/system.ts

@@ -0,0 +1,634 @@
+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";
+
+export class TrackSystem {
+  private segments: Map<string, TrackSegment> = new Map();
+  private doodler: Doodler;
+
+  constructor(segments: TrackSegment[]) {
+    this.doodler = getContextItem<Doodler>("doodler");
+    for (const segment of segments) {
+      this.segments.set(segment.id, segment);
+    }
+  }
+
+  get firstSegment() {
+    return this.segments.values().next().value;
+  }
+
+  get lastSegment() {
+    return this.segments.values().toArray().pop();
+  }
+
+  optimize(percent: number) {
+    console.log("Optimizing track", percent * 100 / 4);
+    for (const segment of this.segments.values()) {
+      segment.recalculateRailPoints(Math.round(percent * 100 / 4));
+    }
+  }
+
+  recalculateAll() {
+    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);
+  }
+  unregisterSegment(segment: TrackSegment) {
+    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);
+    }
+    const ends = this.ends.get(segment);
+    this.ends.delete(segment);
+    this.endArray = this.endArray.filter((e) => !ends?.includes(e));
+  }
+
+  draw(showControls = false) {
+    for (const [i, segment] of this.segments.entries()) {
+      segment.draw(showControls);
+    }
+
+    // try {
+    //   if (getContextItem<boolean>("showEnds")) {
+    //     const ends = this.findEnds();
+    //     for (const end of ends) {
+    //       this.doodler.fillCircle(end.pos, 2, {
+    //         color: "red",
+    //         // weight: 3,
+    //       });
+    //       if (getContextItem<boolean>("debug")) {
+    //         this.doodler.line(
+    //           end.pos,
+    //           end.pos.copy().add(end.tangent.copy().mult(20)),
+    //           {
+    //             color: "blue",
+    //             // weight: 3,
+    //           },
+    //         );
+    //       }
+    //     }
+    //   }
+    // } catch {
+    //   setDefaultContext({ showEnds: false });
+    // }
+  }
+
+  ends: Map<TrackSegment, [End, End]> = new Map();
+  endArray: End[] = [];
+
+  findEnds() {
+    for (const segment of this.segments.values()) {
+      if (this.ends.has(segment)) continue;
+      const ends: [End, End] = [
+        {
+          pos: segment.points[0],
+          segment,
+          tangent: Vector.sub(segment.points[1], segment.points[0]).normalize(),
+          frontOrBack: "back",
+        },
+        {
+          pos: segment.points[3],
+          segment,
+          tangent: Vector.sub(segment.points[3], segment.points[2]).normalize(),
+          frontOrBack: "front",
+        },
+      ];
+      this.ends.set(segment, ends);
+      this.endArray.push(...ends);
+    }
+    return this.endArray;
+  }
+
+  serialize() {
+    return JSON.stringify(
+      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());
+    }
+    return track;
+  }
+
+  static deserialize(data: SerializedTrackSegment[]) {
+    if (data.length === 0) return undefined;
+    const track = new TrackSystem([]);
+    const neighborMap = new Map<string, [string[], string[]]>();
+
+    for (const segment of data) {
+      track.segments.set(segment.id, TrackSegment.deserialize(segment));
+      neighborMap.set(segment.id, [segment.fNeighbors, segment.bNeighbors]);
+    }
+
+    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)
+        ).filter((s) => s) as TrackSegment[];
+        segment.frontNeighbours = neighbors[0].map((id) =>
+          track.segments.get(id)
+        ).filter((s) => s) as TrackSegment[];
+      }
+    }
+
+    return track;
+  }
+
+  translate(v: Vector) {
+    for (const segment of this.segments.values()) {
+      segment.translate(v);
+    }
+  }
+
+  private _path?: Spline<TrackSegment>;
+
+  get path() {
+    if (!this._path) {
+      this._path = this.generatePath();
+    }
+    return this._path;
+  }
+
+  generatePath() {
+    if (!this.firstSegment) throw new Error("No first segment");
+    const flags = { looping: true };
+    const rightOnlyPath = [
+      this.firstSegment.copy(),
+      ...this.findRightPath(
+        this.firstSegment,
+        new Set([this.firstSegment.id]),
+        flags,
+      ),
+    ];
+
+    rightOnlyPath.forEach((s, i, arr) => {
+      if (i === 0) return;
+      const prev = arr[i - 1];
+      s.points[0] = prev.points[3];
+      s.prev = prev;
+      prev.next = s;
+    });
+    if (flags.looping) {
+      const first = rightOnlyPath[0];
+      const last = rightOnlyPath[rightOnlyPath.length - 1];
+      first.points[0] = last.points[3];
+      last.points[3] = first.points[0];
+      first.prev = last;
+      last.next = first;
+    }
+
+    return new Spline<TrackSegment>(rightOnlyPath);
+  }
+
+  *findRightPath(
+    start: TrackSegment,
+    seen: Set<string>,
+    flags: { looping: boolean },
+  ): Generator<TrackSegment> {
+    if (start.frontNeighbours.length === 0) {
+      return;
+    }
+    let rightMost = start.frontNeighbours[0];
+    for (const segment of start.frontNeighbours) {
+      if (segment.id === rightMost.id) continue;
+      const rotatedSegment = segment.copy();
+      rotatedSegment.rotateAboutPoint(
+        rotatedSegment.tangent(0).heading(),
+        rotatedSegment.points[0],
+      );
+      const rotatedRightMost = rightMost.copy();
+      rotatedRightMost.rotateAboutPoint(
+        rotatedRightMost.tangent(0).heading(),
+        rotatedRightMost.points[0],
+      );
+      if (rotatedSegment.points[3].y > rotatedRightMost.points[3].y) {
+        rightMost = segment;
+      }
+    }
+    if (seen.has(rightMost.id)) {
+      if (seen.values().next().value === rightMost.id) {
+        flags.looping = true;
+      }
+      return;
+    }
+    seen.add(rightMost.id);
+    yield rightMost.copy();
+    yield* this.findRightPath(rightMost, seen, flags);
+  }
+  *findLeftPath(
+    start: TrackSegment,
+    seen: Set<string>,
+    flags: { looping: boolean },
+  ): Generator<TrackSegment> {
+    if (start.frontNeighbours.length === 0) {
+      return;
+    }
+    let leftMost = start.frontNeighbours[0];
+    for (const segment of start.frontNeighbours) {
+      if (segment.id === leftMost.id) continue;
+      const rotatedSegment = segment.copy();
+      rotatedSegment.rotateAboutPoint(
+        rotatedSegment.tangent(0).heading(),
+        rotatedSegment.points[0],
+      );
+      const rotatedLeftMost = leftMost.copy();
+      rotatedLeftMost.rotateAboutPoint(
+        rotatedLeftMost.tangent(0).heading(),
+        rotatedLeftMost.points[0],
+      );
+      if (rotatedSegment.points[3].y < rotatedLeftMost.points[3].y) {
+        leftMost = segment;
+      }
+    }
+    if (seen.has(leftMost.id)) {
+      if (seen.values().next().value === leftMost.id) {
+        flags.looping = true;
+      }
+      return;
+    }
+    seen.add(leftMost.id);
+    yield leftMost.copy();
+    yield* this.findLeftPath(leftMost, seen, flags);
+  }
+}
+
+type VectorSet = [Vector, Vector, Vector, Vector];
+
+export class TrackSegment extends PathSegment {
+  frontNeighbours: TrackSegment[] = [];
+  backNeighbours: TrackSegment[] = [];
+
+  track?: TrackSystem;
+
+  doodler: Doodler;
+  normalPoints: Vector[] = [];
+  antiNormalPoints: Vector[] = [];
+
+  constructor(p: VectorSet, id?: string) {
+    super(p);
+    this.doodler = getContextItem<Doodler>("doodler");
+    this.id = id ?? crypto.randomUUID();
+    this.recalculateRailPoints();
+  }
+
+  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(6);
+      const p = this.getPointAtT(t);
+      this.normalPoints.push(p.copy().add(normal));
+      this.antiNormalPoints.push(p.copy().add(normal.rotate(Math.PI)));
+    }
+  }
+
+  setTrack(t: TrackSystem) {
+    this.track = t;
+  }
+
+  override draw(showControls = false, recalculateRailPoints = false) {
+    // if (showControls) {
+    //   this.doodler.drawBezier(
+    //     this.points[0],
+    //     this.points[1],
+    //     this.points[2],
+    //     this.points[3],
+    //     {
+    //       strokeColor: "#ffffff50",
+    //     },
+    //   );
+    // }
+    if (showControls) {
+      this.doodler.deferDrawing(() => {
+        this.doodler.fillCircle(this.points[0], 1, {
+          color: "red",
+        });
+        this.doodler.fillCircle(this.points[1], 1, {
+          color: "red",
+        });
+        this.doodler.fillCircle(this.points[2], 1, {
+          color: "red",
+        });
+        this.doodler.fillCircle(this.points[3], 1, {
+          color: "red",
+        });
+      });
+    }
+
+    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] = points[i];
+      // this.doodler.drawCircle(p, 2, {
+      //   color: "red",
+      //   weight: 3,
+      // });
+      this.doodler.drawRotated(p, t, () => {
+        this.doodler.line(p, p.copy().add(0, 10), {
+          color: "#291b17",
+          weight: 4,
+        });
+        this.doodler.line(p, p.copy().add(0, -10), {
+          color: "#291b17",
+          weight: 4,
+        });
+        // this.doodler.line(p.copy().add(-6, 5), p.copy().add(6, 5), {
+        //   color: "grey",
+        //   weight: 1,
+        // });
+        // this.doodler.line(p.copy().add(-6, -5), p.copy().add(6, -5), {
+        //   color: "grey",
+        //   weight: 1,
+        // });
+      });
+    }
+
+    if (recalculateRailPoints) {
+      this.recalculateRailPoints();
+    }
+    this.doodler.deferDrawing(
+      () => {
+        this.doodler.drawLine(this.normalPoints, {
+          color: "grey",
+          weight: 1.5,
+        });
+        this.doodler.drawLine(this.antiNormalPoints, {
+          color: "grey",
+          weight: 1.5,
+        });
+      },
+    );
+    // this.doodler.drawCircle(p, 2, {
+    //   color: "red",
+    //   weight: 3,
+    // });
+  }
+
+  serialize(): SerializedTrackSegment {
+    return {
+      p: this.points.map((p) => p.array()),
+      id: this.id,
+      bNeighbors: this.backNeighbours.map((n) => n.id),
+      fNeighbors: this.frontNeighbours.map((n) => n.id),
+    };
+  }
+
+  copy() {
+    return new TrackSegment(
+      this.points.map((p) => p.copy()) as VectorSet,
+      this.id,
+    );
+  }
+
+  cleanCopy() {
+    return new TrackSegment(
+      this.points.map((p) => p.copy()) as VectorSet,
+    );
+  }
+
+  propagateTranslation(v: Vector) {
+    for (const fNeighbour of this.frontNeighbours) {
+      fNeighbour.receivePropagation(v);
+    }
+    for (const bNeighbour of this.backNeighbours) {
+      bNeighbour.receivePropagation(v);
+    }
+  }
+
+  lastHeading?: number;
+
+  receivePropagation(v: Vector) {
+    this.translate(v);
+    this.propagateTranslation(v);
+  }
+
+  // TODO: this duplicates receivePropagation, but for some reason it doesn't work when called from receivePropagation
+  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);
+      this.lastHeading = tan.heading();
+      newP2 = Vector.add(p1, tan);
+    } else {
+      const p1ToP2 = Vector.sub(p2, p1);
+      p1ToP2.rotate(angle);
+      newP2 = Vector.add(p1, p1ToP2);
+    }
+    const p2ToP3 = Vector.sub(p3, p2);
+    p2ToP3.rotate(angle);
+    p3.set(Vector.add(newP2, p2ToP3));
+    const p2Top4 = Vector.sub(p4, p2);
+    p2Top4.rotate(angle);
+    p4.set(Vector.add(newP2, p2Top4));
+    p2.set(newP2);
+  }
+  static deserialize(data: any) {
+    return new TrackSegment(
+      data.p.map((p: [number, number, number]) => new Vector(p[0], p[1], p[2])),
+      data.id,
+    );
+  }
+
+  setPositionByPoint(pos: Vector, point: Vector) {
+    if (!this.points.includes(point)) return;
+    point = point.copy();
+    this.points.forEach((p, i) => {
+      const relativePoint = Vector.sub(p, point);
+      p.set(pos);
+      p.add(relativePoint);
+    });
+  }
+
+  rotateAboutPoint(angle: number, point: Vector) {
+    if (!this.points.includes(point)) return;
+    point = point.copy();
+    this.points.forEach((p, i) => {
+      const relativePoint = Vector.sub(p, point);
+      relativePoint.rotate(angle);
+      p.set(Vector.add(point, relativePoint));
+    });
+  }
+
+  // resetRotation() {
+  //   const angle = this.tangent(0).heading();
+  //   this.rotateAboutPoint(-angle, this.points[0]);
+  // }
+
+  translate(v: Point) {
+    this.points.forEach((p) => {
+      p.add(v.x, v.y);
+    });
+  }
+}
+
+export class Spline<T extends PathSegment = PathSegment> {
+  segments: T[] = [];
+  ctx?: CanvasRenderingContext2D;
+
+  evenPoints: Vector[];
+  pointSpacing: number;
+
+  get points() {
+    return Array.from(new Set(this.segments.flatMap((s) => s.points)));
+  }
+
+  nodes: IControlNode[];
+
+  looped = false;
+
+  constructor(segs: T[]) {
+    this.segments = segs;
+    if (this.segments.at(-1)?.next === this.segments[0]) {
+      this.looped = true;
+    }
+    this.pointSpacing = 1;
+    this.evenPoints = this.calculateEvenlySpacedPoints(1);
+    this.nodes = [];
+    // for (let i = 0; i < this.points.length; i += 3) {
+    //   const node: IControlNode = {
+    //     anchor: this.points[i],
+    //     controls: [
+    //       this.points.at(i - 1)!,
+    //       this.points[(i + 1) % this.points.length],
+    //     ],
+    //     mirrored: false,
+    //     tangent: true,
+    //   };
+    //   this.nodes.push(node);
+    // }
+  }
+
+  // setContext(ctx: CanvasRenderingContext2D) {
+  //   this.ctx = ctx;
+  //   for (const segment of this.segments) {
+  //     segment.setContext(ctx);
+  //   }
+  // }
+
+  draw() {
+    for (const segment of this.segments) {
+      // segment.draw();
+      const doodler = getContextItem<Doodler>("doodler");
+      doodler.drawWithAlpha(0.5, () => {
+        doodler.drawBezier(...segment.points, { color: "red" });
+      });
+    }
+  }
+
+  calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
+    this.pointSpacing = 1;
+    // return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
+    const points: Vector[] = [];
+
+    points.push(this.segments[0].points[0]);
+    let prev = points[0];
+    let distSinceLastEvenPoint = 0;
+    for (const seg of this.segments) {
+      let t = 0;
+
+      const div = Math.ceil(seg.length * resolution * 10);
+      while (t < 1) {
+        t += 1 / div;
+        const point = seg.getPointAtT(t);
+        distSinceLastEvenPoint += prev.dist(point);
+
+        if (distSinceLastEvenPoint >= spacing) {
+          const overshoot = distSinceLastEvenPoint - spacing;
+          const evenPoint = Vector.add(
+            point,
+            Vector.sub(point, prev).normalize().mult(overshoot),
+          );
+          distSinceLastEvenPoint = overshoot;
+          points.push(evenPoint);
+          prev = evenPoint;
+        }
+
+        prev = point;
+      }
+    }
+
+    this.evenPoints = points;
+
+    return points;
+  }
+
+  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 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);
+    const a = this.evenPoints[clamp(i, 0, this.evenPoints.length - 1)];
+    const b = this
+      .evenPoints[
+        clamp((i + 1) % this.evenPoints.length, 0, this.evenPoints.length - 1)
+      ];
+    return Vector.lerp(a, b, t % 1);
+  }
+
+  calculateApproxLength() {
+    for (const s of this.segments) {
+      s.calculateApproxLength();
+    }
+  }
+
+  toggleNodeTangent(p: Vector) {
+    const node = this.nodes.find((n) => n.anchor === p);
+
+    node && (node.tangent = !node.tangent);
+  }
+  toggleNodeMirrored(p: Vector) {
+    const node = this.nodes.find((n) => n.anchor === p);
+
+    node && (node.mirrored = !node.mirrored);
+  }
+  handleNodeEdit(p: Vector, movement: { x: number; y: number }) {
+    const node = this.nodes.find((n) =>
+      n.anchor === p || n.controls.includes(p)
+    );
+    if (!node || !(node.mirrored || node.tangent)) return;
+
+    if (node.anchor !== p) {
+      if (node.mirrored || node.tangent) {
+        const mover = node.controls.find((e) => e !== p)!;
+        const v = Vector.sub(node.anchor, p);
+        if (!node.mirrored) v.setMag(Vector.sub(node.anchor, mover).mag());
+        mover.set(Vector.add(v, node.anchor));
+      }
+    } else {
+      for (const control of node.controls) {
+        control.add(movement.x, movement.y);
+      }
+    }
+  }
+}
+
+export interface IControlNode {
+  anchor: Vector;
+  controls: [Vector, Vector];
+  tangent: boolean;
+  mirrored: boolean;
+}

train.ts

@@ -1,106 +0,0 @@
-import { drawLine } from "./drawing/line.ts";
-import { ComplexPath, PathSegment } from "./math/path.ts";
-import { Vector } from "doodler";
-import { Follower } from "./physics/follower.ts";
-import { Mover } from "./physics/mover.ts";
-import { Spline, Track } from "./track.ts";
-
-export class Train {
-  nodes: Vector[] = [];
-
-  cars: TrainCar[] = [];
-
-  path: Spline<Track>;
-  t: number;
-
-  engineLength = 40;
-  spacing = 30;
-
-  constructor(track: Spline<Track>, cars: TrainCar[] = []) {
-    this.path = track;
-    this.t = 0;
-    this.nodes.push(this.path.followEvenPoints(this.t),)
-    this.nodes.push(this.path.followEvenPoints(this.t - this.real2Track(40)));
-    this.cars.push(new TrainCar(55, document.getElementById('engine-sprites')! as HTMLImageElement, 80, 20, { at: new Vector(0, 60), width: 80, height: 20 }));
-    this.cars[0].points = this.nodes.map(n => n) as [Vector, Vector];
-    let currentOffset = 40;
-    for (const car of cars) {
-      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.cars.push(car);
-    }
-  }
-
-  move() {
-    this.t = (this.t + 1) % this.path.evenPoints.length;
-    let currentOffset = 0;
-    for (const car of this.cars) {
-      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();
-    }
-    // this.draw();
-  }
-
-  // draw() {
-  //   for (const [i, node] of this.nodes.entries()) {
-  //     doodler.drawCircle(node.point, 10, { color: 'purple', weight: 3 })
-  //     // const next = this.nodes[i + 1];
-  //     // if (next) {
-  //     //   const to = Vector.sub(node.point, next.point);
-  //     //   to.setMag(40);
-  //     //   doodler.line(next.point, Vector.add(to, next.point))
-  //     // }
-  //   }
-  // }
-
-  real2Track(length: number) {
-    return length / this.path.pointSpacing
-  }
-}
-
-export class TrainCar {
-  img: HTMLImageElement;
-  imgWidth: number;
-  imgHeight: number;
-  sprite?: ISprite;
-
-  points?: [Vector, Vector];
-  length: number;
-
-  constructor(length: number, img: HTMLImageElement, w: number, h: number, sprite?: ISprite) {
-    this.img = img;
-    this.sprite = sprite;
-    this.imgWidth = w;
-    this.imgHeight = h;
-    this.length = length;
-  }
-
-  draw() {
-    if (!this.points) return;
-    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'})
-    
-    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));
-    })
-  }
-}
-
-interface ISprite {
-  at: Vector;
-  width: number;
-  height: number;
-}

train/cars.ts

@@ -0,0 +1,55 @@
+import { Vector } from "https://jsr.io/@bearmetal/doodler/0.0.4/geometry/vector.ts";
+import { TrainCar } from "./train.ts";
+import { ResourceManager } from "../lib/resources.ts";
+import { getContextItem } from "../lib/context.ts";
+
+export class Tender extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    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, 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, 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, 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, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
+      at: new Vector(80, 80),
+      width: 70,
+      height: 20,
+    });
+  }
+}

train/engines.ts

@@ -0,0 +1,55 @@
+import { Vector } from "@bearmetal/doodler";
+import { TrainCar } from "./train.ts";
+import { getContextItem } from "../lib/context.ts";
+import { ResourceManager } from "../lib/resources.ts";
+
+export class RedEngine extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    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, 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, 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, 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, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
+      at: new Vector(0, 0),
+      width: 80,
+      height: 20,
+    });
+  }
+}

train/newTrain.ts

@@ -0,0 +1,147 @@
+import { Doodler, Vector } from "@bearmetal/doodler";
+import { getContextItem } from "../lib/context.ts";
+import { Spline, TrackSegment } from "../track/system.ts";
+
+export class DotFollower {
+  position: Vector;
+  velocity: Vector;
+  acceleration: Vector;
+  maxSpeed: number;
+  maxForce: number;
+  _trailingPoint: number;
+  protected _leadingPoint: number;
+
+  path: Spline<TrackSegment>;
+
+  get trailingPoint() {
+    const desired = this.velocity.copy();
+    desired.normalize();
+    desired.mult(-this._trailingPoint);
+
+    return Vector.add(this.position, desired);
+  }
+
+  constructor(path: Spline<TrackSegment>, pos: Vector) {
+    this.path = path;
+    this.position = pos;
+    this.velocity = new Vector();
+    this.acceleration = new Vector();
+    this.maxSpeed = 3;
+    this.maxForce = 0.3;
+
+    this._trailingPoint = 0;
+    this._leadingPoint = 0;
+
+    this.init();
+  }
+
+  init() {
+  }
+
+  move(dt: number) {
+    dt *= 10;
+    const force = calculatePathForce(this, this.path.points);
+    this.applyForce(force.mult(dt));
+    this.velocity.limit(this.maxSpeed);
+    this.acceleration.limit(this.maxForce);
+    this.velocity.add(this.acceleration.copy().mult(dt));
+    this.position.add(this.velocity.copy().mult(dt));
+    this.edges();
+  }
+
+  edges() {
+    const doodler = getContextItem<Doodler>("doodler");
+
+    if (this.position.x > doodler.width) this.position.x = 0;
+    if (this.position.y > doodler.height) this.position.y = 0;
+    if (this.position.x < 0) this.position.x = doodler.width;
+    if (this.position.y < 0) this.position.y = doodler.height;
+  }
+
+  draw() {
+    const doodler = getContextItem<Doodler>("doodler");
+    doodler.drawRotated(this.position, this.velocity.heading() || 0, () => {
+      doodler.fillCenteredRect(this.position, 20, 20, { fillColor: "white" });
+    });
+    for (const point of this.path.points) {
+      doodler.drawCircle(point, 4, { color: "red", weight: 3 });
+    }
+  }
+
+  applyForce(force: Vector) {
+    this.velocity.add(force);
+  }
+
+  static edges(point: Vector, width: number, height: number) {
+    if (point.x > width) point.x = 0;
+    if (point.y > height) point.y = 0;
+    if (point.x < 0) point.x = width;
+    if (point.y < 0) point.y = height;
+  }
+}
+
+function closestPointOnLineSegment(p: Vector, a: Vector, b: Vector): Vector {
+  // Vector AB
+  // const AB = { x: b.x - a.x, y: b.y - a.y };
+  const AB = Vector.sub(b, a);
+  // Vector AP
+  // const AP = { x: p.x - a.x, y: p.y - a.y };
+  const AP = Vector.sub(p, a);
+  // Dot product of AP and AB
+  // const AB_AB = AB.x * AB.x + AB.y * AB.y;
+  const AB_AB = Vector.dot(AB, AB);
+  // const AP_AB = AP.x * AB.x + AP.y * AB.y;
+  const AP_AB = Vector.dot(AP, AB);
+  // Project AP onto AB
+  const t = AP_AB / AB_AB;
+
+  // Clamp t to the range [0, 1] to restrict to the segment
+  const tClamped = Math.max(0, Math.min(1, t));
+
+  // Closest point on the segment
+  return new Vector({ x: a.x + AB.x * tClamped, y: a.y + AB.y * tClamped });
+}
+
+function calculatePathForce(f: DotFollower, path: Vector[]) {
+  let closestPoint: Vector = path[0];
+  let minDistance = Infinity;
+
+  // Loop through each segment to find the closest point on the path
+  for (let i = 0; i < path.length - 1; i++) {
+    const segmentStart = path[i];
+    const segmentEnd = path[i + 1];
+
+    // Find the closest point on the segment
+    const closest = closestPointOnLineSegment(
+      f.position,
+      segmentStart,
+      segmentEnd,
+    );
+
+    // Calculate the distance from the follower to the closest point
+    // const distance = Math.sqrt(
+    //   Math.pow(follower.position.x - closest.x, 2) +
+    //     Math.pow(follower.position.y - closest.y, 2),
+    // );
+
+    const distance = Vector.dist(f.position, closest);
+
+    // Track the closest point
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestPoint = closest;
+    }
+  }
+
+  // Calculate the force to apply toward the closest point
+  // const force = {
+  //   x: closestPoint.x - f.position.x,
+  //   y: closestPoint.y - f.position.y,
+  // };
+  const force = Vector.sub(closestPoint, f.position);
+
+  // Normalize the force and apply a magnitude (this will depend on your desired strength)
+  const magnitude = 100; // Adjust this based on your needs
+  force.setMag(magnitude);
+  return force;
+}

train/train.ts

@@ -0,0 +1,164 @@
+import { ComplexPath, PathSegment } from "../math/path.ts";
+import { Follower } from "../physics/follower.ts";
+import { Mover } from "../physics/mover.ts";
+import { getContextItem } from "../lib/context.ts";
+import { Doodler, Vector } from "@bearmetal/doodler";
+import { Spline, TrackSegment } from "../track/system.ts";
+import { ResourceManager } from "../lib/resources.ts";
+
+export class Train {
+  nodes: Vector[] = [];
+
+  cars: TrainCar[] = [];
+
+  path: Spline<TrackSegment>;
+  t: number;
+
+  engineLength = 40;
+  spacing = 30;
+
+  speed = 10;
+
+  constructor(track: Spline<TrackSegment>, cars: TrainCar[]) {
+    this.path = track;
+    this.t = 0;
+    const resources = getContextItem<ResourceManager>("resources");
+    this.cars = cars;
+    // 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 {
+      for (const car of this.cars) {
+        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);
+      }
+    }
+  }
+
+  move(dTime: number) {
+    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) {
+      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();
+    }
+    // this.draw();
+  }
+
+  // draw() {
+  //   const doodler = getContextItem<Doodler>("doodler");
+  //   this.path.draw();
+  //   for (const [i, node] of this.nodes.entries()) {
+  //     // doodler.drawCircle(node, 10, { color: "purple", weight: 3 });
+  //     doodler.fillCircle(node, 2, { color: "purple" });
+  //     // const next = this.nodes[i + 1];
+  //     // if (next) {
+  //     //   const to = Vector.sub(node.point, next.point);
+  //     //   to.setMag(40);
+  //     //   doodler.line(next.point, Vector.add(to, next.point))
+  //     // }
+  //   }
+  // }
+
+  draw() {
+    for (const car of this.cars) {
+      car.draw();
+    }
+  }
+
+  real2Track(length: number) {
+    return length / this.path.pointSpacing;
+  }
+}
+
+export class TrainCar {
+  img: HTMLImageElement;
+  imgWidth: number;
+  imgHeight: number;
+  sprite?: ISprite;
+
+  points?: [Vector, Vector];
+  length: number;
+
+  constructor(
+    length: number,
+    img: HTMLImageElement,
+    w: number,
+    h: number,
+    sprite?: ISprite,
+  ) {
+    this.img = img;
+    this.sprite = sprite;
+    this.imgWidth = w;
+    this.imgHeight = h;
+    this.length = length;
+  }
+
+  draw() {
+    if (!this.points) return;
+    const doodler = getContextItem<Doodler>("doodler");
+    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" });
+
+    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),
+        );
+    });
+  }
+}
+
+interface ISprite {
+  at: Vector;
+  width: number;
+  height: number;
+}

types.ts

@@ -0,0 +1,18 @@
+import { Vector } from "@bearmetal/doodler";
+import { TrackSegment } from "./track/system.ts";
+
+declare global {
+  type End = {
+    pos: Vector;
+    segment: TrackSegment;
+    tangent: Vector;
+    frontOrBack: "front" | "back";
+  };
+
+  type SerializedTrackSegment = {
+    p: [number, number, number][];
+    id: string;
+    bNeighbors: string[];
+    fNeighbors: string[];
+  };
+}

ui/button.ts

@@ -0,0 +1,39 @@
+import { Doodler, Vector } from "@bearmetal/doodler";
+import { getContext, getContextItem } from "../lib/context.ts";
+
+export function addButton(props: {
+  text: string;
+  onClick: () => void;
+  style?: {
+    color?: string;
+    fillColor?: string;
+    strokeColor?: string;
+    weight?: number;
+    noStroke?: boolean;
+    noFill?: boolean;
+  };
+  at: [Vector, Vector];
+}) {
+  const doodler = getContextItem<Doodler>("doodler");
+  const { text, onClick, style } = props;
+  const { x, y } = props.at[1].copy().sub(props.at[0]);
+  const id = doodler.addUIElement(
+    "rectangle",
+    props.at[0],
+    x,
+    y,
+    style,
+  );
+  doodler.registerClickable(props.at[0], props.at[1], onClick);
+  return {
+    id,
+    text,
+    onClick,
+    style,
+  };
+}
+
+export function removeButton(id: string, onClick: () => void) {
+  getContextItem<Doodler>("doodler").removeUIElement(id);
+  getContextItem<Doodler>("doodler").unregisterClickable(onClick);
+}