some minor tweaks

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

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+.vite
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Packed devtools
+devtools.zip
+
+temp.*

.temp/.gitignore

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

.temp/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"
+  }
+}

.temp/deno.lock

@@ -0,0 +1,238 @@
+{
+  "version": "4",
+  "specifiers": {
+    "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"
+    },
+    "@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"
+      ]
+    }
+  },
+  "redirects": {
+    "https://deno.land/x/clipboard/mod.ts": "https://deno.land/x/clipboard@v0.0.3/mod.ts"
+  },
+  "remote": {
+    "https://deno.land/x/clipboard@v0.0.3/mod.ts": "5b68fe3b710b852de5273c135fc3c11b2b4050577401ee994161380bd8cab219",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/canvas.ts": "aadfb4b2e9acce34d4a5da3f9027be642c93229bbfc2641cb55301542cbb87bf",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/geometry/constants.ts": "4f4cf7bf49ac871d984e9b43896783b0cc8ab0ea60d0fc4c8c582f7e00c3df5a",
+    "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/geometry/vector.ts": "a08ecff64c5436a28c6451a31c68fc912d25f941aabafb79418fa0a1aeffa9d2",
+    "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"
+    ]
+  }
+}

.temp/dev.ts

@@ -1,19 +1,31 @@
 /// <reference lib="deno.ns" />
 
 import * as esbuild from "npm:esbuild";
-import { denoPlugins } from "jsr:@luca/esbuild-deno-loader";
+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"];
+  const ignoredFiles = ["bundler", "bundle", "dev", "test"];
 
-  for (const path of Deno.readDirSync("./")) {
+  for await (const path of crawl("./")) {
     if (
-      path.name.endsWith(".ts") &&
+      path.endsWith(".ts") &&
-      !ignoredFiles.find((file) => path.name.includes(file))
+      !ignoredFiles.find((file) => path.includes(file))
     ) {
-      paths.push(path.name);
+      paths.push(path);
     }
   }
   await build();

.temp/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <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>
+</body>
+</html>

.temp/prototype.ts

@@ -1,7 +1,7 @@
 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.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";

.temp/temp.json

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

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["denoland.vscode-deno"]
+}

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

@@ -1,18 +1,22 @@
 {
+  "tasks": {
+    "dev": "deno run -A --node-modules-dir npm:vite",
+    "build": "deno run -A --node-modules-dir npm:vite build",
+    "preview": "deno run -A --node-modules-dir npm:vite preview",
+    "serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/",
+    "pack-devtools": "rm -rf devtools.zip && deno run -A npm:web-ext build -o --source-dir devtools --artifacts-dir devtools.zip"
+  },
   "compilerOptions": {
     "lib": [
-      "deno.ns",
+      "ESNext",
-      "deno.window",
+      "DOM",
-      "dom",
+      "DOM.Iterable"
-      "dom.iterable",
-      "ES2021",
-      "ESNext"
     ]
   },
-  "tasks": {
-    "dev": "deno run -RWEN --allow-run --unstable dev.ts dev"
-  },
   "imports": {
-    "doodler": "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/mod.ts"
+    "@bearmetal/doodler": "jsr:@bearmetal/doodler@0.0.5-e",
-  }
+    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
-}
+    "vite": "npm:vite@^6.0.1"
+  },
+  "nodeModulesDir": "auto"
+}

devtools/background.js

@@ -0,0 +1,54 @@
+console.log("background.js loaded");
+
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === "GET_CONTEXT_STACK") {
+    browser.tabs.sendMessage(message.tabId, message)
+      .then((res) => {
+        console.log("RESPONSE", res);
+        sendResponse(res);
+      })
+      .catch((err) => {
+        console.log("Error sending message to content script:", err);
+        sendResponse({ error: err });
+      });
+    // browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+    //   if (tabs.length) {
+    //   }
+    // });
+    return true;
+  } else if (message.type === "UPDATE_CONTEXT_VALUE") {
+    browser.tabs.sendMessage(message.tabId, message).then(sendResponse);
+    // browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+    //   if (tabs.length) {
+    //   }
+    // });
+    return true;
+  }
+});
+
+let devtoolsPort = null;
+
+browser.runtime.onConnect.addListener((port) => {
+  if (port.name === "devtools") {
+    devtoolsPort = port;
+    console.log("Devtools panel connected.");
+
+    // port.onMessage.addListener((msg) => {
+    //   console.log("Received message from devtools panel:", msg);
+    // });
+
+    port.onDisconnect.addListener(() => {
+      devtoolsPort = null;
+    });
+  }
+});
+
+// Relay messages from content scripts to the devtools panel.
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === "PAGE_LOADED") {
+    console.log("Background received PAGE_LOADED message from content script.");
+    if (devtoolsPort) {
+      devtoolsPort.postMessage({ type: "PAGE_LOADED" });
+    }
+  }
+});

devtools/content.js

@@ -0,0 +1,20 @@
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === "GET_CONTEXT_STACK") {
+    const contextStack = window.wrappedJSObject.getContextStack();
+
+    sendResponse({ contextStack });
+  } else if (message.type === "UPDATE_CONTEXT_VALUE") {
+    const { key, value, depth } = message;
+    if (window.wrappedJSObject.updateContextValue) {
+      window.wrappedJSObject.updateContextValue(key, value, depth);
+      sendResponse({ success: true });
+    } else {
+      sendResponse({
+        success: false,
+        error: "updateContextValue not defined",
+      });
+    }
+  }
+});
+
+browser.runtime.sendMessage({ type: "PAGE_LOADED" });

devtools/devtools.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <script src="devtools.js"></script>
+
+</head>
+
+<body></body>
+
+</html>

devtools/devtools.js

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

devtools/manifest.json

@@ -0,0 +1,37 @@
+{
+  "manifest_version": 2,
+  "name": "SNR DevTools",
+  "version": "1.0",
+  "description": "A devtools panel to view and edit context stack values.",
+  "author": "Emmaline Autumn",
+  "devtools_page": "devtools.html",
+  "background": {
+    "scripts": [
+      "background.js"
+    ]
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
+      ],
+      "all_frames": true
+    }
+  ],
+  "permissions": [
+    "devtools",
+    "tabs",
+    "*://*/*"
+  ],
+  "icons": {
+    "48": "train icon.png"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "snrdt@cyborggrizzly.com"
+    }
+  }
+}

devtools/panel.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Smoke and Rails</title>
+    <style>
+      body {
+        font-family: sans-serif;
+        /* margin: 10px; */
+        /* width: 100%;
+        height: 100%; */
+        background-color: #302040;
+        color: #fff;
+        /* text-align: right; */
+      }
+
+      .context-row {
+        display: flex;
+        margin-bottom: 8px;
+      }
+
+      .context-key {
+        width: 150px;
+        font-weight: bold;
+      }
+
+      .context-value input {
+        width: 100%;
+      }
+
+      form {
+        margin-left: 1rem;
+        margin-right: 1rem;
+      }
+      label {
+        display: inline-block;
+        margin-right: 1rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h2>Smoke and Rails Debugger</h2>
+    <button id="refresh">Refresh</button>
+    <div id="contextContainer"></div>
+    <script src="panel.js"></script>
+  </body>
+</html>

devtools/panel.js

@@ -0,0 +1,127 @@
+const port = browser.runtime.connect({ name: "devtools" });
+port.onMessage.addListener((message) => {
+  if (message.type === "PAGE_LOADED") {
+    loadContextStack(); // Refresh your context stack here.
+  }
+});
+
+const tabId = browser.devtools.inspectedWindow.tabId;
+
+document.getElementById("refresh").addEventListener("click", loadContextStack);
+
+function loadContextStack() {
+  const container = document.getElementById("contextContainer");
+  container.innerHTML = "";
+
+  browser.runtime.sendMessage({ type: "GET_CONTEXT_STACK", tabId }).then(
+    (response) => {
+      if (response.error) {
+        container.innerHTML = `<p>Error: ${response.error}</p>`;
+        return;
+      }
+
+      if (!response || !response.contextStack) {
+        container.innerHTML = "<p>No context stack found.</p>";
+        return;
+      }
+
+      const contextStack = coalesceContextStack(response.contextStack);
+      const form = generateObjectForm(contextStack);
+      container.appendChild(form);
+    },
+  );
+}
+
+function generateObjectForm(obj, path = "") {
+  const detail = document.createElement("details");
+  detail.open = path === "";
+  const summary = document.createElement("summary");
+  summary.textContent = path.split(".").at(-1);
+  detail.appendChild(summary);
+  const form = document.createElement("form");
+  let count = 0;
+  for (const [key, value] of Object.entries(obj)) {
+    if (value == undefined || value === "[Circular]") continue;
+    const isObject = value.constructor === Object;
+    const isArray = Array.isArray(value);
+    if (isObject || isArray) {
+      const nestedForm = generateObjectForm(
+        value,
+        path ? path + "." + key : key,
+      );
+      if (!nestedForm) {
+        continue;
+      }
+      const div = document.createElement("div");
+      div.appendChild(nestedForm);
+      form.appendChild(div);
+      count++;
+      continue;
+    }
+    const div = document.createElement("div");
+    const label = document.createElement("label");
+    label.textContent = key;
+    div.appendChild(label);
+    const input = document.createElement("input");
+    input.name = key;
+    const isBoolean = typeof value === "boolean";
+    if (isBoolean) {
+      input.type = "checkbox";
+      input.checked = value;
+      input.addEventListener("change", () => {
+        browser.runtime.sendMessage({
+          type: "UPDATE_CONTEXT_VALUE",
+          key: path ? path + "." + key : key,
+          value: input.checked,
+          tabId,
+        }).then((updateResponse) => {
+          if (updateResponse && updateResponse.success) {
+            console.log(`Updated ${key} to ${input.checked}`);
+          } else {
+            console.error(`Failed to update ${key}:`, updateResponse.error);
+          }
+        });
+      });
+    } else {
+      input.type = "text";
+      input.value = value;
+      input.addEventListener("change", () => {
+        browser.runtime.sendMessage({
+          type: "UPDATE_CONTEXT_VALUE",
+          key: path ? path + "." + key : key,
+          value: input.value,
+          tabId,
+        }).then((updateResponse) => {
+          if (updateResponse && updateResponse.success) {
+            console.log(`Updated ${key} to ${input.value}`);
+          } else {
+            console.error(`Failed to update ${key}:`, updateResponse.error);
+          }
+        });
+      });
+    }
+    div.appendChild(input);
+    form.appendChild(div);
+    count++;
+  }
+  if (count === 0) {
+    const pre = document.createElement("pre");
+    pre.textContent = JSON.stringify(obj, null, 2);
+    detail.appendChild(pre);
+  } else {
+    detail.appendChild(form);
+  }
+  return detail;
+}
+
+function coalesceContextStack(contextStack) {
+  const obj = {};
+  for (const ctx of contextStack) {
+    Object.assign(obj, ctx);
+  }
+  return obj;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  loadContextStack();
+});

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

@@ -1,22 +1,51 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>TRAINS!</title>
+    <title>TRAINS!</title>
-  <style>
+    <link rel="shortcut icon" href="train icon.png" type="image/x-icon">
-    html, body {
+    <style>
-      background-color: black;
+      html,
-      color: white;
+      body {
-      margin: 0;
+        background-color: black;
-      overflow: hidden;
+        color: white;
-      height: 100%;
+        margin: 0;
-      width: 100%;
+        overflow: hidden;
-    }
+        height: 100%;
-  </style>
+        width: 100%;
-</head>
+      }
-<body>
+
-  <script src="bundle.js"></script>
+      #context {
-</body>
+        position: absolute;
-</html>
+        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 type="module" src="/src/main.ts"></script>
+  </body>
+</html>

lib/context.ts

@@ -1,34 +0,0 @@
-type ContextStore = Record<string, any>;
-
-const contextStack: ContextStore[] = [];
-const defaultContext: ContextStore = {};
-
-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]; // ✅ Fallback to default
-      throw new Error(`Context variable '${prop}' is not defined.`);
-    },
-  },
-) as Record<string, any>;
-
-export function getContext() {
-  return ctx;
-}

lib/input.ts

@@ -1,41 +0,0 @@
-export class InputManager {
-  private keyStates: Map<string | number, boolean> = new Map();
-  private mouseStates: Map<string | number, boolean> = new Map();
-  private mouseLocation: { x: number; y: number } = { x: 0, y: 0 };
-  private mouseDelta: { x: number; y: number } = { x: 0, y: 0 };
-  constructor() {
-    document.addEventListener("keydown", (e) => {
-      this.keyStates.set(e.key, true);
-    });
-    document.addEventListener("keyup", (e) => {
-      this.keyStates.set(e.key, false);
-    });
-    document.addEventListener("mousedown", (e) => {
-      this.mouseStates.set(e.button, true);
-    });
-    document.addEventListener("mouseup", (e) => {
-      this.mouseStates.set(e.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 | number) {
-    return this.keyStates.get(key);
-  }
-  getMouseState(key: string | number) {
-    return this.mouseStates.get(key);
-  }
-  getMouseLocation() {
-    return this.mouseLocation;
-  }
-  getMouseDelta() {
-    return this.mouseDelta;
-  }
-}

math/lerp.ts

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

math/path.ts

@@ -1,226 +0,0 @@
-import { Vector } from "doodler";
-
-export class ComplexPath {
-
-  points: Vector[] = [];
-
-  radius = 50;
-
-  ctx?: CanvasRenderingContext2D;
-
-  constructor(points?: Vector[]) {
-    points && (this.points = points);
-  }
-
-  setContext(ctx: CanvasRenderingContext2D) {
-    this.ctx = ctx;
-  }
-
-  draw() {
-    if (!this.ctx || !this.points.length) return;
-    const ctx = this.ctx;
-
-    ctx.save();
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = 'white';
-    ctx.setLineDash([21, 6])
-
-    let last = this.points[this.points.length - 1]
-
-    for (const point of this.points) {
-      ctx.beginPath();
-      ctx.moveTo(last.x, last.y);
-      ctx.lineTo(point.x, point.y);
-      ctx.stroke();
-      last = point;
-    }
-    ctx.restore();
-  }
-}
-
-export class PathSegment {
-  points: [Vector, Vector, Vector, Vector]
-  ctx?: CanvasRenderingContext2D;
-
-  length: number;
-
-  constructor(points: [Vector, Vector, Vector, Vector]) {
-    this.points = points;
-    this.length = this.calculateApproxLength(100);
-  }
-
-  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(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;
-  }
-
-  getClosestPoint(v: Vector): [Vector, number, number] {
-    const samples = 25;
-    const resolution = 1 / samples;
-    let closest = this.points[0];
-    let closestDistance = this.points[0].dist(v);
-    let closestT = 0;
-
-    for (let i = 0; i < samples; i++) {
-      const point = this.getPointAtT(i * resolution);
-      const distance = v.dist(point);
-      if (distance < closestDistance) {
-        closest = point;
-        closestDistance = distance;
-        closestT = i * resolution;
-      }
-    }
-
-    return [closest, closestDistance, closestT];
-  }
-
-  getPointsWithinRadius(v: Vector, r: number) {
-    const points: [number, PathSegment][] = [];
-    const samples = 25;
-    const resolution = 1 / samples;
-
-    for (let i = 0; i < samples; i++) {
-      const point = this.getPointAtT(i * resolution);
-      const distance = v.dist(point);
-      if (distance < r) {
-        points.push([i * resolution, this]);
-      }
-    }
-    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 
-    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))));
-
-    return res;
-  }
-
-  doesIntersectCircle(x: number, y: number, r: number) {
-    const v = new Vector(x, y);
-    const samples = 25;
-    const resolution = 1 / samples;
-
-    let distance = Infinity;
-    let t;
-
-    for (let i = 0; i < samples; i++) {
-      if (i !== samples - 1) {
-        const a = this.getPointAtT(i * resolution);
-        const b = this.getPointAtT((i + 1) * resolution);
-        const ac = Vector.sub(v, a);
-        const ab = Vector.sub(b, a);
-
-        const d = Vector.add(Vector.vectorProjection(ac, ab), a);
-        const ad = Vector.sub(d, a);
-
-        const k = Math.abs(ab.x) > Math.abs(ab.y) ? ad.x / ab.x : ad.y / ab.y;
-
-        let dist;
-        if (k <= 0.0) {
-          dist = Vector.hypot2(v, a)
-        } else if (k >= 1.0) {
-          dist = Vector.hypot2(v, b)
-        }
-
-        dist = Vector.hypot2(v, d)
-
-        if (dist < distance) {
-          distance = dist;
-          t = i * resolution;
-        }
-      }
-    }
-
-    if (distance < r) return t;
-
-    return false;
-  }
-
-  calculateApproxLength(resolution = 25) {
-    const stepSize = 1 / resolution;
-    const points: Vector[] = []
-    for (let i = 0; i <= resolution; i++) {
-      const current = stepSize * i;
-      points.push(this.getPointAtT(current))
-    }
-    this.length = points.reduce((acc: { prev?: Vector, length: number }, cur) => {
-      const prev = acc.prev;
-      acc.prev = cur;
-      if (!prev) return acc;
-      acc.length += cur.dist(prev);
-      return acc;
-    }, { prev: undefined, length: 0 }).length
-    return this.length;
-  }
-
-  calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
-    const points: Vector[] = []
-
-    points.push(this.points[0]);
-    let prev = points[0];
-    let distSinceLastEvenPoint = 0
-
-    let t = 0;
-
-    const div = Math.ceil(this.length * resolution * 10);
-    while (t < 1) {
-      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);
-        prev = evenPoint;
-      }
-
-      prev = point;
-    }
-
-    return points;
-  }
-}

src/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);

src/inputs.ts

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

src/lib/context.ts

@@ -0,0 +1,170 @@
+import { ZoomableDoodler } from "@bearmetal/doodler";
+import { TrackSegment } from "../track/system.ts";
+import { Train, TrainCar } from "../train/train.ts";
+import { InputManager } from "./input.ts";
+import { ResourceManager } from "./resources.ts";
+
+interface ContextMap {
+  inputManager: InputManager;
+  doodler: ZoomableDoodler;
+  resources: ResourceManager;
+  debug: Debug;
+  colors: [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    ...string[],
+  ];
+  [key: string]: unknown;
+}
+
+type ContextStore = Record<string, any>;
+
+const defaultContext: ContextStore = {};
+const contextStack: ContextStore[] = [defaultContext];
+
+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<K extends keyof ContextMap>(
+  prop: K,
+): ContextMap[K];
+export function getContextItem<T>(prop: string): T;
+export function getContextItem<T>(prop: string): T {
+  return ctx[prop] as T;
+}
+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,
+  });
+}
+
+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);
+    }
+    if (value instanceof Map) {
+      const val: Record<string, unknown> = {};
+      for (const [k, v] of value) {
+        if (typeof k !== "string") continue;
+        val[k] = v;
+      }
+      seen.add(value);
+      return val;
+    }
+
+    if (value instanceof Set) {
+      seen.add(value);
+      value = Array.from(value);
+      return value;
+    }
+
+    if (value instanceof TrackSegment) {
+      seen.add(value);
+      const val = { ...value };
+      (val as any).frontNeighbours = value.frontNeighbours.map((n) => n.id);
+      (val as any).backNeighbours = value.backNeighbours.map((n) => n.id);
+      return val;
+    }
+
+    // if (value instanceof Train) {
+    //   const val = { ...value };
+    //   // val.segments = value.segments.map((s) => s.id);
+    //   delete (val as any).path;
+    //   delete (val as any).nodes;
+    //   delete (val as any).cars;
+    //   delete (val as any).t;
+
+    //   // val.t
+    //   // val.
+    //   return null;
+    // }
+
+    // if (value instanceof InputManager) {
+    //   return {};
+    // }
+
+    // if (value instanceof TrainCar) {
+    //   const val = { ...value };
+
+    //   return val;
+    // }
+
+    return value;
+  }, 2);
+}
+const getContextStack = () => JSON.parse(safeStringify(contextStack));
+const updateContextValue = (
+  key: string,
+  value: unknown,
+  depth = contextStack.length - 1,
+) => {
+  const keys = key.split(".");
+  let context = contextStack[depth] ?? defaultContext;
+  for (let i = 0; i < keys.length - 1; i++) {
+    if (context instanceof Map) {
+      context = context.get(keys[i]);
+    } else {
+      context = context[keys[i]];
+    }
+  }
+  if (context instanceof Map) {
+    context.set(keys.at(-1)!, value);
+  } else {
+    context[keys.at(-1)!] = value;
+  }
+};
+if (location.hostname === "localhost") {
+  globalThis.getContextStack = getContextStack;
+  globalThis.updateContextValue = updateContextValue;
+  globalThis.contextStack = contextStack;
+}
+
+declare global {
+  var getContextStack: () => ContextStore[];
+  var updateContextValue: (key: string, value: unknown, depth?: number) => void;
+  var contextStack: ContextStore[];
+}

src/lib/debuggable.ts

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

src/lib/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));
+    }
+  }
+}

src/lib/resources.ts

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

src/main.ts

@@ -0,0 +1,124 @@
+import {
+  getContext,
+  getContextItem,
+  setContextItem,
+  setDefaultContext,
+} from "./lib/context.ts";
+import { InputManager } from "./lib/input.ts";
+
+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",
+  noSmooth: true,
+}, () => {});
+setTimeout(() => {
+  (doodler as any as { ctx: CanvasRenderingContext2D }).ctx
+    .imageSmoothingEnabled = false;
+}, 0);
+// doodler.minScale = 0.1;
+// (doodler as any).scale = 3.14;
+
+const colors = [
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "indigo",
+  "purple",
+  "violet",
+];
+
+const _fullDebug: Debug = {
+  track: false,
+  train: false,
+  path: false,
+  car: false,
+  bogies: false,
+  angles: false,
+  aabb: false,
+  segment: false,
+};
+
+const storedDebug = JSON.parse(localStorage.getItem("debug") || "0");
+const _debug: Debug = Object.assign({}, _fullDebug, storedDebug);
+
+const debug = new Proxy(_debug, {
+  get: (_, prop: string) => {
+    // if (prop !in _debug) {
+    //   (_debug as any)[prop] = false;
+    // }
+    return prop in _debug ? (_debug as any)[prop] : false;
+  },
+  set: (_, prop: string, value: boolean) => {
+    (_debug as any)[prop] = value;
+    localStorage.setItem("debug", JSON.stringify(_debug));
+    return true;
+  },
+});
+
+setDefaultContext({
+  inputManager,
+  doodler,
+  resources,
+  debug,
+  colors,
+});
+
+const state = bootstrapGameStateMachine();
+setContextItem("state", state);
+
+doodler.init();
+
+// doodler.createLayer((_, __, dTime) => {
+//   state.update(dTime);
+// });
+
+document.addEventListener("keydown", (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+    e.preventDefault();
+    const track = getContextItem<TrackSystem>("track");
+    localStorage.setItem("track", track.serialize());
+    console.log("Saved track to local storage");
+  }
+});
+
+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);
+
+if (import.meta.env.DEV) {
+  console.log("Running in development mode");
+}
+
+globalThis.TWO_PI = Math.PI * 2;
+declare global {
+  var TWO_PI: number;
+}

src/math/angle.ts

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

src/math/clamp.ts

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

src/math/lerp.ts

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

src/math/path.ts

@@ -0,0 +1,312 @@
+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);
+  }
+
+  setContext(ctx: CanvasRenderingContext2D) {
+    this.ctx = ctx;
+  }
+
+  draw() {
+    if (!this.ctx || !this.points.length) return;
+    const ctx = this.ctx;
+
+    ctx.save();
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "white";
+    ctx.setLineDash([21, 6]);
+
+    let last = this.points[this.points.length - 1];
+
+    for (const point of this.points) {
+      ctx.beginPath();
+      ctx.moveTo(last.x, last.y);
+      ctx.lineTo(point.x, point.y);
+      ctx.stroke();
+      last = point;
+    }
+    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 {
+  id: string;
+  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);
+  }
+
+  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(
+        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;
+  }
+
+  getClosestPoint(v: Vector): [Vector, number, number] {
+    const samples = 25;
+    const resolution = 1 / samples;
+    let closest = this.points[0];
+    let closestDistance = this.points[0].dist(v);
+    let closestT = 0;
+
+    for (let i = 0; i < samples; i++) {
+      const point = this.getPointAtT(i * resolution);
+      const distance = v.dist(point);
+      if (distance < closestDistance) {
+        closest = point;
+        closestDistance = distance;
+        closestT = i * resolution;
+      }
+    }
+
+    return [closest, closestDistance, closestT];
+  }
+
+  getPointsWithinRadius(v: Vector, r: number) {
+    const points: [number, PathSegment][] = [];
+    const samples = 25;
+    const resolution = 1 / samples;
+
+    for (let i = 0; i < samples; i++) {
+      const point = this.getPointAtT(i * resolution);
+      const distance = v.dist(point);
+      if (distance < r) {
+        points.push([i * resolution, this]);
+      }
+    }
+    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
+    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)),
+      ),
+    );
+
+    return res;
+  }
+
+  doesIntersectCircle(x: number, y: number, r: number) {
+    const v = new Vector(x, y);
+    const samples = 25;
+    const resolution = 1 / samples;
+
+    let distance = Infinity;
+    let t;
+
+    for (let i = 0; i < samples; i++) {
+      if (i !== samples - 1) {
+        const a = this.getPointAtT(i * resolution);
+        const b = this.getPointAtT((i + 1) * resolution);
+        const ac = Vector.sub(v, a);
+        const ab = Vector.sub(b, a);
+
+        const d = Vector.add(Vector.vectorProjection(ac, ab), a);
+        const ad = Vector.sub(d, a);
+
+        const k = Math.abs(ab.x) > Math.abs(ab.y) ? ad.x / ab.x : ad.y / ab.y;
+
+        let dist;
+        if (k <= 0.0) {
+          dist = Vector.hypot2(v, a);
+        } else if (k >= 1.0) {
+          dist = Vector.hypot2(v, b);
+        }
+
+        dist = Vector.hypot2(v, d);
+
+        if (dist < distance) {
+          distance = dist;
+          t = i * resolution;
+        }
+      }
+    }
+
+    if (distance < r) return t;
+
+    return false;
+  }
+
+  calculateApproxLength(resolution = 25) {
+    const stepSize = 1 / resolution;
+    const points: Vector[] = [];
+    for (let i = 0; i <= resolution; i++) {
+      const current = stepSize * i;
+      points.push(this.getPointAtT(current));
+    }
+    this.length =
+      points.reduce((acc: { prev?: Vector; length: number }, cur) => {
+        const prev = acc.prev;
+        acc.prev = cur;
+        if (!prev) return acc;
+        acc.length += cur.dist(prev);
+        return acc;
+      }, { prev: undefined, length: 0 }).length;
+    return this.length;
+  }
+
+  calculateEvenlySpacedPoints(
+    spacing: number,
+    resolution = 1,
+    targetLength?: number,
+  ) {
+    const points: [Vector, number][] = [];
+
+    points.push([this.points[0], this.tangent(0).heading()]);
+    let [prev] = points[0];
+    let distSinceLastEvenPoint = 0;
+
+    let t = 0;
+
+    const div = Math.ceil(this.length * resolution * 10);
+    while (t < 1) {
+      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;
+    }
+
+    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 {}
+}

src/physics/follower.ts

@@ -1,34 +1,34 @@
 import { Constants } from "../math/constants.ts";
 import { map } from "../math/lerp.ts";
 import { ComplexPath, PathSegment } from "../math/path.ts";
-import { Vector } from "doodler";
+import { Vector } from "@bearmetal/doodler";
 import { Mover } from "./mover.ts";
 
-export class
+export class Follower extends Mover {
-  Follower extends Mover {
   debug = true;
 
-  follow(toFollow: ComplexPath |  PathSegment) {
+  follow(toFollow: ComplexPath | PathSegment) {
     if (toFollow instanceof ComplexPath) {
       const predict = this.velocity.copy();
       predict.normalize();
       predict.mult(25);
-      const predictpos = Vector.add(this.position, predict)
+      const predictpos = Vector.add(this.position, predict);
-  
+
-      if (this.ctx)
+      if (this.ctx) {
-        Mover.edges(predict, this.ctx.canvas.width, this.ctx.canvas.height)
+        Mover.edges(predict, this.ctx.canvas.width, this.ctx.canvas.height);
+      }
       let normal = null;
       let target = null;
       let worldRecord = 1000000;
-  
+
       for (let i = 0; i < toFollow.points.length; i++) {
         // Look at a line segment
         let a = toFollow.points[i];
         let b = toFollow.points[(i + 1) % toFollow.points.length]; // Note Path has to wraparound
-  
+
         // Get the normal point to that line
         let normalPoint = getNormalPoint(predictpos, a, b);
-  
+
         // Check if normal is on line segment
         let dir = Vector.sub(b, a);
         // If it's not within the line segment, consider the normal to just be the end of the line segment (point b)
@@ -45,14 +45,14 @@ export class
           b = toFollow.points[(i + 2) % toFollow.points.length]; // Path wraps around
           dir = Vector.sub(b, a);
         }
-  
+
         // How far away are we from the path?
         const d = Vector.dist(predictpos, normalPoint);
         // Did we beat the worldRecord and find the closest line segment?
         if (d < worldRecord) {
           worldRecord = d;
           normal = normalPoint;
-  
+
           // Look at the direction of the line segment so we can seek a little bit ahead of the normal
           dir.normalize();
           // This is an oversimplification
@@ -61,47 +61,47 @@ export class
           target = normal.copy();
           target.add(dir);
         }
-  
+
         if (worldRecord > toFollow.radius) {
           return this.seek(target!);
         }
       }
-  
+
       if (this.debug && this.ctx) {
         // Draw predicted future position
-        this.ctx.strokeStyle = 'red';
+        this.ctx.strokeStyle = "red";
-        this.ctx.fillStyle = 'pink';
+        this.ctx.fillStyle = "pink";
         this.ctx.beginPath();
-        this.ctx.moveTo(this.position.x, this.position.y)
+        this.ctx.moveTo(this.position.x, this.position.y);
         this.ctx.lineTo(predictpos.x, predictpos.y);
         this.ctx.stroke();
-  
+
         this.ctx.beginPath();
         this.ctx.arc(predictpos.x, predictpos.y, 4, 0, Constants.TWO_PI);
         this.ctx.fill();
         this.ctx.stroke();
-  
+
         // Draw normal position
         this.ctx.beginPath();
         this.ctx.arc(normal!.x, normal!.y, 4, 0, Constants.TWO_PI);
         this.ctx.fill();
         this.ctx.stroke();
-  
+
         // Draw actual target (red if steering towards it)
         this.ctx.beginPath();
-        this.ctx.moveTo(predictpos.x, predictpos.y)
+        this.ctx.moveTo(predictpos.x, predictpos.y);
         this.ctx.lineTo(target!.x, target!.y);
         this.ctx.stroke();
-  
+
         // if (worldRecord > toFollow.radius) fill(255, 0, 0);
         // noStroke();
-  
+
         this.ctx.beginPath();
         this.ctx.arc(target!.x, target!.y, 8, 0, Constants.TWO_PI);
         this.ctx.fill();
         this.ctx.stroke();
       }
-    } 
+    }
   }
 
   seek(target: Vector, strength: number = 1) {

src/physics/mover.ts

@@ -1,4 +1,5 @@
-import { Vector } from "doodler";
+import { Doodler, Vector } from "@bearmetal/doodler";
+import { getContextItem } from "../lib/context.ts";
 
 export class Mover {
   position: Vector;
@@ -29,25 +30,25 @@ export class Mover {
   boundingBox: {
     pos: Vector;
     size: Vector;
-  }
+  };
 
   constructor();
   constructor(random: boolean);
   constructor(pos?: Vector, vel?: Vector, acc?: Vector);
   constructor(posOrRandom?: Vector | boolean, vel?: Vector, acc?: Vector) {
-    if (typeof posOrRandom === 'boolean' && posOrRandom) {
+    if (typeof posOrRandom === "boolean" && posOrRandom) {
       this.position = Vector.random2D(new Vector());
       this.velocity = Vector.random2D(new Vector());
-      this.acceleration = new Vector()
+      this.acceleration = new Vector();
     } else {
       this.position = posOrRandom || new Vector();
       this.velocity = vel || new Vector();
-      this.acceleration = acc || new Vector()
+      this.acceleration = acc || new Vector();
     }
     this.boundingBox = {
       size: new Vector(20, 10),
-      pos: new Vector(this.position.x - 10, this.position.y - 5)
+      pos: new Vector(this.position.x - 10, this.position.y - 5),
-    }
+    };
 
     this.maxSpeed = 3;
     this.maxForce = .3;
@@ -59,7 +60,7 @@ export class Mover {
   }
 
   init() {
-    // 
+    //
   }
 
   move() {
@@ -81,20 +82,34 @@ export class Mover {
   }
 
   draw() {
+    const doodler = getContextItem<Doodler>("doodler");
     doodler.drawRotated(this.position, this.velocity.heading() || 0, () => {
-      doodler.fillCenteredRect(this.position, this.boundingBox.size.x, this.boundingBox.size.y, {fillColor: 'white'})
+      doodler.fillCenteredRect(
+        this.position,
+        this.boundingBox.size.x,
+        this.boundingBox.size.y,
+        { fillColor: "white" },
+      );
     });
     if (!this.ctx) return;
 
-    this.ctx.fillStyle = 'white'
+    this.ctx.fillStyle = "white";
     this.ctx.save();
     this.ctx.translate(this.position.x, this.position.y);
     this.ctx.rotate(this.velocity.heading() || 0);
     this.ctx.translate(-this.position.x, -this.position.y);
     // this.ctx.rotate(Math.PI)
     // this.ctx.rotate(.5);
-    this.ctx.translate(-(this.boundingBox.size.x / 2), -(this.boundingBox.size.y / 2));
+    this.ctx.translate(
-    this.ctx.fillRect(this.position.x, this.position.y, this.boundingBox.size.x, this.boundingBox.size.y);
+      -(this.boundingBox.size.x / 2),
+      -(this.boundingBox.size.y / 2),
+    );
+    this.ctx.fillRect(
+      this.position.x,
+      this.position.y,
+      this.boundingBox.size.x,
+      this.boundingBox.size.y,
+    );
     this.ctx.restore();
   }
 
@@ -112,4 +127,4 @@ export class Mover {
     if (point.x < 0) point.x = width;
     if (point.y < 0) point.y = height;
   }
-}
+}

src/state/machine.ts

@@ -0,0 +1,87 @@
+import { getContext } from "../lib/context.ts";
+import { TrackSystem } from "../track/system.ts";
+import { Train } from "../train/train.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);
+    }
+  }
+}

src/state/states/EditTrackState.ts

@@ -0,0 +1,430 @@
+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,
+  TightBankLeft,
+  TightBankRight,
+  WideBankLeft,
+  WideBankRight,
+} 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");
+
+    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);
+      });
+      segment.update();
+
+      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;
+            const ghostEndTangent = this.ghostSegment.tangent(0);
+
+            !this.ghostRotated && this.ghostSegment.rotateAboutPoint(
+              this.closestEnd.tangent.heading() - ghostEndTangent.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;
+          }
+        }
+        this.ghostSegment.update();
+
+        // } 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);
+      track.recalculateAll();
+    }
+
+    // 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(),
+      new WideBankLeft(),
+      new WideBankRight(),
+      new TightBankLeft(),
+      new TightBankRight(),
+    ]);
+
+    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.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);
+      }
+    });
+
+    inputManager.onKey("r", () => {
+      if (!this.selectedSegment) return;
+      const segment = this.selectedSegment;
+      let angle = Math.PI / 12;
+      segment.rotate(angle);
+    });
+    inputManager.onKey("R", () => {
+      if (!this.selectedSegment) return;
+      const segment = this.selectedSegment;
+      let angle = -Math.PI / 12;
+      segment.rotate(angle);
+    });
+    // TODO
+    // Cache trains and save
+
+    // 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("z");
+    inputManager.offKey("r");
+    inputManager.offKey("R");
+    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);
+  }
+}

src/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.");
+  }
+}

src/state/states/LoadState.ts

@@ -0,0 +1,71 @@
+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();
+
+    // This should be driven by a manifest
+    resources.set("snr:sprite/engine", new Image());
+    resources.set("snr:sprite/LargeLady", new Image());
+    // resources.get<HTMLImageElement>("snr:sprite/engine")!.src =
+    //   "/sprites/EngineSprites.png";
+
+    resources.set("snr:audio/ding", new Audio());
+    resources.ready().then(() => {
+      this.stateMachine.transitionTo(States.RUNNING);
+    }).catch((e) => console.error(e));
+
+    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 ?? new TrackSystem([new StraightTrack()]);
+  }
+
+  private loadTrains() {
+    const trains = JSON.parse(localStorage.getItem("trains") || "[]");
+    return trains;
+  }
+}

src/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
+  }
+}

src/state/states/RunningState.ts

@@ -0,0 +1,116 @@
+import { Doodler, Point, Vector, ZoomableDoodler } 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";
+import { LargeLady, LargeLadyTender } from "../../train/LargeLady.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[] = [];
+
+  activeTrain: Train | undefined;
+
+  override update(dt: number): void {
+    const ctx = getContext() as { trains: Train[]; track: TrackSystem };
+    const doodler = getContextItem<ZoomableDoodler>(
+      "doodler",
+    );
+    if (this.activeTrain) {
+      // (doodler as any).origin = doodler.worldToScreen(
+      //   doodler.width - this.activeTrain.aabb.center.x,
+      //   doodler.height - this.activeTrain.aabb.center.y,
+      // );
+      doodler.centerCameraOn(this.activeTrain.aabb.center);
+    }
+    // const ctx = getContext() as { trains: DotFollower[]; track: TrackSystem };
+    // TODO
+    // Update trains
+    // Update world
+    // Handle input
+    // Monitor world events
+    for (const train of ctx.trains) {
+      train.move(dt);
+    }
+  }
+  override start(): void {
+    console.log("Starting running state");
+    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 LargeLady(),
+        new LargeLadyTender(),
+      ]);
+      ctx.trains.push(train);
+    });
+    // const train = new Train(track.path, [
+    //   new LargeLady(),
+    //   new LargeLadyTender(),
+    // ]);
+    // ctx.trains.push(train);
+    // this.activeTr0ain = train;
+    // const trainCount = 1000;
+    // for (let i = 0; i < trainCount; i++) {
+    //   const train = new Train(track.path, [
+    //     new LargeLady(),
+    //     new LargeLadyTender(),
+    //   ]);
+    //   ctx.trains.push(train);
+    // }
+
+    inputManager.onKey("ArrowUp", () => {
+      const trains = getContextItem<Train[]>("trains");
+      for (const train of trains) {
+        train.speed += 1;
+      }
+      // for (const [i, train] of trains.entries()) {
+      //   train.speed += .01 * i;
+      // }
+    });
+    inputManager.onKey("ArrowDown", () => {
+      const trains = getContextItem<Train[]>("trains");
+      for (const train of trains) {
+        train.speed -= 1;
+      }
+    });
+  }
+  override stop(): void {
+    for (const layer of this.layers) {
+      getContextItem<Doodler>("doodler").deleteLayer(layer);
+    }
+  }
+}

src/state/states/index.ts

@@ -0,0 +1,25 @@
+import { StateMachine } from "../machine.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;
+}

src/test/angleMathBench.test.ts

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

src/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)`,
+  );
+  // });
+}

src/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,
+  );
+});

src/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,
+  );
+});

src/track/shapes.ts

@@ -0,0 +1,194 @@
+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(80, 0),
+      start.copy().add(120, -25),
+      start.copy().add(200, -25),
+    ]);
+  }
+}
+export class SBendRight extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+    super([
+      start,
+      start.copy().add(80, 0),
+      start.copy().add(120, 25),
+      start.copy().add(200, 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 = 66;
+
+    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 WideBankLeft extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+
+    const p1 = start.copy();
+    const p2 = start.copy();
+    const p3 = start.copy();
+    const p4 = start.copy();
+    const scale = 70.4;
+
+    p2.add(new Vector(1, 0).mult(scale));
+    p3.set(p2);
+    const dirToP3 = Vector.fromAngle(-Math.PI / 12).mult(scale);
+    p3.add(dirToP3);
+    p4.set(p3);
+    const dirToP4 = Vector.fromAngle(-Math.PI / 6).mult(scale);
+    p4.add(dirToP4);
+
+    super([
+      p1,
+      p2,
+      p3,
+      p4,
+    ]);
+  }
+}
+export class TightBankLeft extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+
+    const p1 = start.copy();
+    const p2 = start.copy();
+    const p3 = start.copy();
+    const p4 = start.copy();
+    const scale = 61.57;
+
+    p2.add(new Vector(1, 0).mult(scale));
+    p3.set(p2);
+    const dirToP3 = Vector.fromAngle(-Math.PI / 12).mult(scale);
+    p3.add(dirToP3);
+    p4.set(p3);
+    const dirToP4 = Vector.fromAngle(-Math.PI / 6).mult(scale);
+    p4.add(dirToP4);
+
+    super([
+      p1,
+      p2,
+      p3,
+      p4,
+    ]);
+  }
+}
+export class TightBankRight extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+
+    const p1 = start.copy();
+    const p2 = start.copy();
+    const p3 = start.copy();
+    const p4 = start.copy();
+    const scale = 61.57;
+
+    p2.add(new Vector(1, 0).mult(scale));
+    p3.set(p2);
+    const dirToP3 = Vector.fromAngle(Math.PI / 12).mult(scale);
+    p3.add(dirToP3);
+    p4.set(p3);
+    const dirToP4 = Vector.fromAngle(Math.PI / 6).mult(scale);
+    p4.add(dirToP4);
+
+    super([
+      p1,
+      p2,
+      p3,
+      p4,
+    ]);
+  }
+}
+export class WideBankRight extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+
+    const p1 = start.copy();
+    const p2 = start.copy();
+    const p3 = start.copy();
+    const p4 = start.copy();
+    const scale = 70.4;
+
+    p2.add(new Vector(1, 0).mult(scale));
+    p3.set(p2);
+    const dirToP3 = Vector.fromAngle(Math.PI / 12).mult(scale);
+    p3.add(dirToP3);
+    p4.set(p3);
+    const dirToP4 = Vector.fromAngle(Math.PI / 6).mult(scale);
+    p4.add(dirToP4);
+
+    super([
+      p1,
+      p2,
+      p3,
+      p4,
+    ]);
+  }
+}
+export class BankRight extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+
+    const p1 = start.copy();
+    const p2 = start.copy();
+    const p3 = start.copy();
+    const p4 = start.copy();
+    const scale = 66;
+
+    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,
+    ]);
+  }
+}

src/track/system.ts

@@ -0,0 +1,758 @@
+import { Doodler, Point, Vector } from "@bearmetal/doodler";
+import { ComplexPath, PathSegment } from "../math/path.ts";
+import { getContextItem, setDefaultContext } from "../lib/context.ts";
+import { clamp } from "../math/clamp.ts";
+import { Debuggable } from "../lib/debuggable.ts";
+
+export class TrackSystem extends Debuggable {
+  private _segments: Map<string, TrackSegment> = new Map();
+  private doodler: Doodler;
+
+  constructor(segments: TrackSegment[]) {
+    super("track");
+    this.doodler = getContextItem<Doodler>("doodler");
+    for (const segment of segments) {
+      this._segments.set(segment.id, segment);
+    }
+  }
+
+  getSegment(id: string) {
+    return this._segments.get(id);
+  }
+
+  get firstSegment() {
+    return this._segments.values().next().value;
+  }
+
+  get lastSegment() {
+    return this._segments.values().toArray().pop();
+  }
+
+  getNearestSegment(pos: Vector) {
+    let minDistance = Infinity;
+    let nearestSegment: TrackSegment | undefined;
+    for (const segment of this._segments.values()) {
+      const distance = segment.getDistanceTo(pos);
+      if (distance < minDistance) {
+        minDistance = distance;
+        nearestSegment = segment;
+      }
+    }
+    return nearestSegment;
+  }
+
+  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.update();
+      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 });
+    // }
+  }
+
+  override debugDraw(): void {
+    const debug = getContextItem("debug");
+    if (debug.track) {
+      for (const segment of this._segments.values()) {
+        segment.drawAABB();
+      }
+    }
+  }
+
+  ends: Map<TrackSegment, [End, End]> = new Map();
+  endArray: End[] = [];
+
+  findEnds() {
+    for (const segment of this._segments.values()) {
+      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 new TrackSystem([]);
+    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: false };
+    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[] = [];
+  evenPoints: [Vector, number][] = [];
+
+  aabb!: AABB;
+
+  private trackGuage = 12;
+
+  constructor(p: VectorSet, id?: string) {
+    super(p);
+    this.doodler = getContextItem<Doodler>("doodler");
+    this.id = id ?? crypto.randomUUID();
+    this.update();
+  }
+
+  getDistanceTo(pos: Vector) {
+    return Vector.dist(this.aabb.center, pos);
+  }
+
+  updateAABB() {
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    let maxY = -Infinity;
+
+    [...this.normalPoints, ...this.antiNormalPoints].forEach((p) => {
+      minX = Math.min(minX, p.x);
+      maxX = Math.max(maxX, p.x);
+      minY = Math.min(minY, p.y);
+      maxY = Math.max(maxY, p.y);
+    });
+
+    const width = maxX - minX;
+    const height = maxY - minY;
+    if (width < this.trackGuage) {
+      const extra = (this.trackGuage - width) / 2;
+      minX -= extra;
+      maxX += extra;
+    }
+    if (height < this.trackGuage) {
+      const extra = (this.trackGuage - height) / 2;
+      minY -= extra;
+      maxY += extra;
+    }
+    this.aabb = {
+      pos: new Vector(minX, minY),
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY,
+      center: new Vector(minX, minY).add(
+        new Vector(maxX - minX, maxY - minY).div(2),
+      ),
+    };
+  }
+
+  recalculateRailPoints(resolution = 60) {
+    this.normalPoints = [];
+    this.antiNormalPoints = [];
+    for (let i = 0; i <= resolution; i++) {
+      const t = i / resolution;
+      const normal = this.tangent(t).rotate(Math.PI / 2);
+      normal.setMag(this.trackGuage / 2);
+      const p = this.getPointAtT(t);
+      this.normalPoints.push(p.copy().add(normal));
+      this.antiNormalPoints.push(p.copy().add(normal.rotate(Math.PI)));
+    }
+  }
+  recalculateTiePoints() {
+    const spacing = Math.ceil(this.length / 10);
+    this.evenPoints = this.calculateEvenlySpacedPoints(this.length / spacing);
+  }
+
+  update() {
+    this.recalculateRailPoints();
+    this.recalculateTiePoints();
+    this.updateAABB();
+  }
+
+  setTrack(t: TrackSystem) {
+    this.track = t;
+  }
+
+  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 < this.evenPoints.length - 1; i++) {
+      // const t = i / ties;
+      // const p = this.getPointAtT(t);
+      const [p, t] = this.evenPoints[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,
+    // });
+  }
+
+  drawAABB() {
+    this.doodler.drawRect(this.aabb.pos, this.aabb.width, this.aabb.height, {
+      color: "lime",
+    });
+    this.doodler.drawCircle(this.aabb.center, 2, {
+      color: "cyan",
+    });
+  }
+
+  serialize(): SerializedTrackSegment {
+    return {
+      p: this.points.map((p) => p.array()),
+      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);
+    });
+  }
+}
+
+interface PathPoint {
+  p: Vector;
+  segmentId: string;
+  tangent: Vector;
+}
+
+export class Spline<T extends PathSegment = PathSegment> {
+  segments: T[] = [];
+  ctx?: CanvasRenderingContext2D;
+
+  evenPoints: PathPoint[];
+  _pointSpacing: number;
+  get pointSpacing() {
+    return this._pointSpacing;
+  }
+  set pointSpacing(value: number) {
+    this._pointSpacing = value;
+    this.evenPoints = this.calculateEvenlySpacedPoints(value);
+  }
+
+  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(this._pointSpacing);
+    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): PathPoint[] {
+    // this._pointSpacing = 1;
+    // return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
+    const points: PathPoint[] = [];
+
+    points.push({
+      p: this.segments[0].points[0],
+      segmentId: this.segments[0].id,
+      tangent: this.segments[0].tangent(0),
+    });
+    let prev = points[0].p;
+    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({
+            p: evenPoint,
+            segmentId: seg.id,
+            tangent: seg.tangent(t),
+          });
+          prev = evenPoint;
+          continue;
+        }
+
+        prev = point;
+      }
+    }
+
+    // this.evenPoints = points;
+
+    return points;
+  }
+
+  followEvenPoints(t: number): PathPoint {
+    if (this.looped) {
+      if (t < 0) t += this.evenPoints.length;
+      const i = Math.floor(t) % this.evenPoints.length;
+      const a = this.evenPoints[i];
+      const b = this.evenPoints[(i + 1) % this.evenPoints.length];
+      return {
+        p: Vector.lerp(a.p, b.p, t % 1),
+        segmentId: b.segmentId,
+        tangent: b.tangent,
+      };
+    }
+    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 {
+      p: Vector.lerp(a.p, b.p, t % 1),
+      segmentId: b.segmentId,
+      tangent: b.tangent,
+    };
+  }
+
+  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;
+}

src/train/LargeLady.ts

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

src/train/cars.ts

@@ -0,0 +1,90 @@
+import { Vector } from "@bearmetal/doodler";
+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,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      40,
+      20,
+      {
+        at: new Vector(80, 0),
+        width: 40,
+        height: 20,
+      },
+    );
+  }
+}
+export class Tank extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    super(
+      50,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      70,
+      20,
+      {
+        at: new Vector(80, 20),
+        width: 70,
+        height: 20,
+      },
+    );
+  }
+}
+export class YellowDumpCar extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    super(
+      50,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      70,
+      20,
+      {
+        at: new Vector(80, 40),
+        width: 70,
+        height: 20,
+      },
+    );
+  }
+}
+export class GrayDumpCar extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    super(
+      50,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      70,
+      20,
+      {
+        at: new Vector(80, 60),
+        width: 70,
+        height: 20,
+      },
+    );
+  }
+}
+export class NullCar extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    super(
+      50,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      70,
+      20,
+      {
+        at: new Vector(80, 80),
+        width: 70,
+        height: 20,
+      },
+    );
+  }
+}

src/train/engines.ts

@@ -0,0 +1,90 @@
+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,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      80,
+      20,
+      {
+        at: new Vector(0, 60),
+        width: 80,
+        height: 20,
+      },
+    );
+  }
+}
+export class PurpleEngine extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    super(
+      55,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      80,
+      20,
+      {
+        at: new Vector(0, 60),
+        width: 80,
+        height: 20,
+      },
+    );
+  }
+}
+export class GreenEngine extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    super(
+      55,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      80,
+      20,
+      {
+        at: new Vector(0, 40),
+        width: 80,
+        height: 20,
+      },
+    );
+  }
+}
+export class GrayEngine extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    super(
+      55,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      80,
+      20,
+      {
+        at: new Vector(0, 20),
+        width: 80,
+        height: 20,
+      },
+    );
+  }
+}
+export class BlueEngine extends TrainCar {
+  constructor() {
+    const resources = getContextItem<ResourceManager>("resources");
+    super(
+      55,
+      10,
+      resources.get<HTMLImageElement>("snr:sprite/engine")!,
+      80,
+      20,
+      {
+        at: new Vector(0, 0),
+        width: 80,
+        height: 20,
+      },
+    );
+  }
+}

src/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;
+}

src/train/train.ts

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

src/types.ts

@@ -0,0 +1,50 @@
+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[];
+  };
+
+  type Debug = {
+    track: boolean;
+    segment: boolean;
+    train: boolean;
+    car: boolean;
+    path: boolean;
+    bogies: boolean;
+    angles: boolean;
+    aabb: boolean;
+  };
+
+  type AABB = {
+    pos: Vector;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    center: Vector;
+  };
+}
+
+export function applyMixins(derivedCtor: any, baseCtors: any[]) {
+  baseCtors.forEach((baseCtor) => {
+    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
+      Object.defineProperty(
+        derivedCtor.prototype,
+        name,
+        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ?? {},
+      );
+    });
+  });
+}

src/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);
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

train/train.ts

@@ -1,145 +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;
-
-  speed = 0;
-
-  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)));
-    const engineSprites = document.getElementById(
-      "engine-sprites",
-    )! as HTMLImageElement;
-    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 },
-      ),
-    );
-    this.cars[0].points = this.nodes.map((n) => n) as [Vector, Vector];
-    this.cars[1].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(dTime: number) {
-    this.t = (this.t + this.speed * dTime * 10) % this.path.evenPoints.length;
-    // 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() {
-  //   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;
-}

vite.config.ts

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

vite/plugins/strip.ts

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