migrate to vite working

This commit is contained in:
2025-02-15 09:24:56 -07:00
parent 10f6d92b7f
commit 8e6294c96f
53 changed files with 608 additions and 219 deletions

3
.temp/.gitignore vendored Normal file
View File

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

18
.temp/deno.json Normal file
View File

@@ -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"
}
}

238
.temp/deno.lock generated Normal file
View File

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

153
.temp/dev.ts Normal file
View File

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

0
.temp/game.ts Normal file
View File

46
.temp/index.html Normal file
View File

@@ -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>

282
.temp/prototype.ts Normal file
View File

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

347
.temp/track.ts Normal file
View File

@@ -0,0 +1,347 @@
import { PathSegment } from "./math/path.ts";
import { Vector } from "doodler";
import { Train } from "./train/train.ts";
export class Track extends PathSegment {
editable = false;
next: Track;
prev: Track;
id: string;
constructor(
points: [Vector, Vector, Vector, Vector],
next?: Track,
prev?: Track,
) {
super(points);
this.id = crypto.randomUUID();
this.next = next || this;
this.prev = prev || this;
}
// followTrack(train: Train): [Vector, number] {
// const predict = train.velocity.copy();
// predict.normalize();
// predict.mult(1);
// const predictpos = Vector.add(train.position, predict)
// // const leading = train.leadingPoint;
// // let closest = this.points[0];
// // let closestDistance = this.getClosestPoint(leading);
// let [closest, closestDistance, closestT] = this.getClosestPoint(predictpos);
// // deno-lint-ignore no-this-alias
// let mostValid: Track = this;
// if (this.next !== this) {
// const [point, distance, t] = this.next.getClosestPoint(predictpos);
// if (distance < closestDistance) {
// closest = point;
// closestDistance = distance;
// mostValid = this.next;
// closestT = t;
// }
// }
// if (this.prev !== this) {
// const [point, distance, t] = this.next.getClosestPoint(predictpos);
// if (distance < closestDistance) {
// closest = point;
// closestDistance = distance;
// mostValid = this.next;
// closestT = t;
// }
// }
// train.currentTrack = mostValid;
// train.arrive(closest);
// // if (predictpos.dist(closest) > 2) train.arrive(closest);
// return [closest, closestT];
// }
getNearestPoint(p: Vector) {
let [closest, closestDistance] = this.getClosestPoint(p);
if (this.next !== this) {
const [point, distance, t] = this.next.getClosestPoint(p);
if (distance < closestDistance) {
closest = point;
closestDistance = distance;
}
}
if (this.prev !== this) {
const [point, distance, t] = this.next.getClosestPoint(p);
if (distance < closestDistance) {
closest = point;
closestDistance = distance;
}
}
return closest;
}
getAllPointsInRange(v: Vector, r: number) {
const points: [number, PathSegment][] = this.getPointsWithinRadius(v, r)
.concat(
this.next.getPointsWithinRadius(v, r),
this.prev.getPointsWithinRadius(v, r),
);
return points;
}
draw(): void {
super.draw();
if (this.editable) {
const [a, b, c, d] = this.points;
doodler.line(a, b);
doodler.line(c, d);
}
}
setNext(t: Track) {
this.next = t;
this.next.points[0] = this.points[3];
}
setPrev(t: Track) {
this.prev = t;
this.prev.points[3] = this.points[0];
}
}
export class Spline<T extends PathSegment = PathSegment> {
segments: T[] = [];
ctx?: CanvasRenderingContext2D;
evenPoints: Vector[];
pointSpacing: number;
get points() {
return Array.from(new Set(this.segments.flatMap((s) => s.points)));
}
nodes: IControlNode[];
constructor(segs: T[]) {
this.segments = segs;
this.pointSpacing = 1;
this.evenPoints = this.calculateEvenlySpacedPoints(1);
this.nodes = [];
for (let i = 0; i < this.points.length; i += 3) {
const node: IControlNode = {
anchor: this.points[i],
controls: [
this.points.at(i - 1)!,
this.points[(i + 1) % this.points.length],
],
mirrored: false,
tangent: true,
};
this.nodes.push(node);
}
}
setContext(ctx: CanvasRenderingContext2D) {
this.ctx = ctx;
for (const segment of this.segments) {
segment.setContext(ctx);
}
}
draw() {
for (const segment of this.segments) {
segment.draw();
}
}
calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
this.pointSpacing = 1;
// return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
const points: Vector[] = [];
points.push(this.segments[0].points[0]);
let prev = points[0];
let distSinceLastEvenPoint = 0;
for (const seg of this.segments) {
let t = 0;
const div = Math.ceil(seg.length * resolution * 10);
while (t < 1) {
t += 1 / div;
const point = seg.getPointAtT(t);
distSinceLastEvenPoint += prev.dist(point);
if (distSinceLastEvenPoint >= spacing) {
const overshoot = distSinceLastEvenPoint - spacing;
const evenPoint = Vector.add(
point,
Vector.sub(point, prev).normalize().mult(overshoot),
);
distSinceLastEvenPoint = overshoot;
points.push(evenPoint);
prev = evenPoint;
}
prev = point;
}
}
this.evenPoints = points;
return points;
}
followEvenPoints(t: number) {
if (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);
}
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 const generateSquareTrack = () => {
const first = new Track([
new Vector(20, 40),
new Vector(20, 100),
new Vector(20, 300),
new Vector(20, 360),
]);
const second = new Track([
first.points[3],
new Vector(20, 370),
new Vector(30, 380),
new Vector(40, 380),
]);
const third = new Track([
second.points[3],
new Vector(100, 380),
new Vector(300, 380),
new Vector(360, 380),
]);
const fourth = new Track([
third.points[3],
new Vector(370, 380),
new Vector(380, 370),
new Vector(380, 360),
]);
const fifth = new Track([
fourth.points[3],
new Vector(380, 300),
new Vector(380, 100),
new Vector(380, 40),
]);
const sixth = new Track([
fifth.points[3],
new Vector(380, 30),
new Vector(370, 20),
new Vector(360, 20),
]);
const seventh = new Track([
sixth.points[3],
new Vector(300, 20),
new Vector(100, 20),
new Vector(40, 20),
]);
const eighth = new Track([
seventh.points[3],
new Vector(30, 20),
new Vector(20, 30),
first.points[0],
]);
const tracks = [first, second, third, fourth, fifth, sixth, seventh, eighth];
for (const [i, track] of tracks.entries()) {
track.next = tracks[(i + 1) % tracks.length];
track.prev = tracks.at(i - 1)!;
}
// first.next = second;
// first.prev = eighth;
// second.next = third;
// second.prev = first;
// third.
return new Spline<Track>([
first,
second,
third,
fourth,
fifth,
sixth,
seventh,
eighth,
]);
};
export const loadFromJson = () => {
const json = JSON.parse(localStorage.getItem("railPath") || "");
if (!json) return generateSquareTrack();
const segments: Track[] = [];
for (const { points } of json.segments) {
segments.push(
new Track(
points.map((p: { x: number; y: number }) => new Vector(p.x, p.y)),
),
);
}
for (const [i, s] of segments.entries()) {
s.setNext(segments[(i + 1) % segments.length]);
s.setPrev(segments.at(i - 1)!);
}
return new Spline<Track>(segments);
};
export interface IControlNode {
anchor: Vector;
controls: [Vector, Vector];
tangent: boolean;
mirrored: boolean;
}

312
.temp/train.old.ts Normal file
View File

@@ -0,0 +1,312 @@
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 { Track } from "./track.ts";
export class Train extends Follower {
nodes?: Vector[];
currentTrack: Track;
speed: number;
follower?: TrainCar;
followers?: TrainCar[];
constructor(track: Track, length: number) {
super(track.points[0].copy());
this.maxSpeed = 2;
this.speed = 1;
this.currentTrack = track;
this.velocity = this.currentTrack.tangent(0).normalize().mult(this.maxSpeed);
this.addCar(length);
this.maxForce = .2;
}
init(): void {
this.boundingBox.size.set(30, 10);
this._trailingPoint = 30;
}
move(): void {
this.follow();
super.move();
this.follower?.move()
// this.draw();
}
follow(): void {
// const [_, t] = this.currentTrack.followTrack(this);
// this.position = this.currentTrack.getPointAtT(t);
// this.velocity = this.currentTrack.tangent(t);
this.velocity.normalize().mult(this.speed || this.maxSpeed);
// if (nearest.dist(this.position) > 10)
// this.seek(nearest);
}
// draw(): void {
// if (!this.ctx) return;
// const ctx = this.ctx;
// // const [a, b] = this.nodes;
// ctx.strokeStyle = 'blue'
// ctx.lineWidth = 10;
// // drawLine(ctx, a.x, a.y, b.x, b.y);
// super.draw()
// }
setContext(ctx: CanvasRenderingContext2D): void {
super.setContext(ctx);
this.follower?.setContext(ctx);
}
addCar(length: number,) {
console.log(length);
if (length)
this.follower = new TrainCar(this.currentTrack, length - 1);
this.follower?.setTarget(this);
this.follower?.position.set(this.trailingPoint);
this._trailingPoint -= 2;
}
}
class TrainCar extends Train {
// constructor(n: [Vector, Vector], track: Track) {
// super(track);
// this.nodes = n;
// }
target?: Train;
setTarget(t: Train) {
this.target = t;
}
init(): void {
this.boundingBox.size.set(20, 10)
this._trailingPoint = 25;
this.maxSpeed = this.maxSpeed * 2;
this.maxForce = this.maxForce * 2;
// this.speed = 0;
}
// follow(): void {
// if (!this.target) return;
// const points = this.currentTrack.getAllPointsInRange(this.target.position, this.target._trailingPoint);
// let closest = this.target.position;
// let closestTan = this.target.velocity;
// for (const [t, path] of points) {
// const point = path.getPointAtT(t);
// if (point.dist(this.target.trailingPoint) < this.target.trailingPoint.dist(closest)) {
// closest = point;
// closestTan = path.tangent(t);
// }
// }
// // this.position.set(closest);
// this.seek(closest);
// this.velocity.set(closestTan.normalize().mult(this.target.speed));
// }
move(): void {
// if (!this.target) return;
// const r = 30;
// const points = this.currentTrack.getAllPointsInRange(this.target.position, this.target._trailingPoint);
// let closest = this.target.position;
// let closestTan = this.target.velocity;
// for (const [t, path] of points) {
// const point = path.getPointAtT(t);
// if (point.dist(this.target.trailingPoint) < this.target.trailingPoint.dist(closest)) {
// closest = point;
// closestTan = path.tangent(t);
// }
// }
// // this.position.set(closest);
// // this.seek(closest);
// this.velocity.set(closestTan.normalize().mult(this.target.speed));
// super.move();
// if (this.target && this.position.dist(this.target.trailingPoint) < 2) {
// this.velocity.setMag(0);
// } else if (this.target) {
// this.velocity.setMag(this.target.velocity.mag());
// }
// if (this.target) {
// this.position.set(this.target.trailingPoint);
// this.speed = this.target.speed;
// }
// const [pos,t] = this.currentTrack.followTrack(this);
// this.position = pos.copy()
// if (this.target) {
// const points = this.currentTrack.getPointWithinRadius(this.target.position, 30);
// let closest = this.target.position;
// for (const [i,point] of points.entries()) {
// if (typeof point !== "number") break;
// const tracks = [this.currentTrack, this.currentTrack.next, this.currentTrack.prev];
// const a = tracks[i].getPointAtT(point);
// if (a.dist(this.target.trailingPoint) < closest.dist(this.target.trailingPoint)) {
// closest = a;
// }
// }
// this.position = closest;
// }
// this.draw();
if (this.target) {
if (this.position.dist(this.target.position) > this.target.position.dist(this.target.trailingPoint)) {
// this.velocity = this.currentTrack.tangent(t);
// this.velocity.normalize().mult(this.speed);
this.arrive(this.currentTrack.getNearestPoint(this.target.trailingPoint));
// if (this.position.dist())
// this.move()
this.speed = this.target.speed;
super.move();
} else {
this.draw()
this.follower?.draw();
}
}
// this.draw()
// this.follower?.move()
}
// draw(): void {
// if (!this.ctx) return;
// super.draw()
// this.ctx.fillStyle = 'red';
// this.position.drawDot(this.ctx);
// this.ctx.fillStyle = 'green';
// this.target?.trailingPoint.drawDot(this.ctx);
// }
edges(): void {
}
}
// export class Train extends Follower {
// currentSegment: Track;
// cars: TrainCar[] = [];
// id: string;
// constructor(path: Track);
// constructor(x: number, y: number, segment: Track);
// constructor(x: number | Track, y?: number, segment?: Track) {
// super(x instanceof Track ? x.points[0].copy() : new Vector(x, y))
// if (x instanceof Track) {
// this.currentSegment = x;
// } else if (segment) {
// this.currentSegment = segment;
// } else {
// throw new Error('Path not provided for train construction')
// }
// // super(new Vector(Math.floor(Math.random() * 200),Math.floor(Math.random() * 200)), Vector.random2D());
// this.id = crypto.randomUUID()
// this.boundingBox.size.set(40, 10)
// this.maxSpeed = 3;
// this.maxForce = .3;
// this.addCar();
// this._trailingPoint = 40;
// this._leadingPoint = 15;
// }
// move(): void {
// for (const car of this.cars) {
// car.move();
// }
// this.follow(this.currentSegment)
// super.move();
// }
// draw(): void {
// if (!this.ctx) return;
// // this.ctx.save();
// this.ctx.fillStyle = 'white';
// this.ctx.strokeStyle = 'red';
// super.draw();
// // this.ctx.restore();
// }
// addCar() {
// const last = this.cars[this.cars.length - 1];
// this.cars.push(new TrainCar(this, (last || this).velocity.copy().normalize().mult(-30), last));
// }
// setContext(ctx: CanvasRenderingContext2D): void {
// super.setContext(ctx);
// for (const car of this.cars) {
// car.setContext(ctx);
// }
// }
// follow(toFollow: Track): void {
// // const predict = this.velocity.copy();
// // predict.normalize();
// // predict.mult(25);
// // const predictpos = Vector.add(this.position, predict)
// const nearest = toFollow.getMostValidTrack(this);
// this.seek(nearest);
// }
// }
// export class TrainCar extends Follower {
// train?: Train;
// prevCar?: Mover;
// constructor(train: Train, pos: Vector, prevCar: Mover) {
// super(pos);
// this.train = train;
// this.boundingBox.size.set(20, 15);
// this.prevCar = prevCar || train;
// this.maxSpeed = 2;
// this.maxForce = .3;
// this._trailingPoint = 25;
// this._leadingPoint = 25;
// }
// move(): void {
// if (this.train && this.prevCar) {
// this.link(this.prevCar);
// // super.move();
// this.edges();
// this.ctx && (this.ctx.fillStyle = 'orange')
// this.draw();
// }
// else super.move();
// }
// edges(): void {
// if (!this.ctx || !this.train) return;
// if (this.train.position.x > this.ctx.canvas.width) this.position.x -= this.ctx.canvas.width;
// if (this.train.position.y > this.ctx.canvas.height) this.position.y -= this.ctx.canvas.height;
// if (this.train.position.x < 0) this.position.x += this.ctx.canvas.width;
// if (this.train.position.y < 0) this.position.y += this.ctx.canvas.height;
// }
// }