Compare commits
2 Commits
08d63395e3
...
b3772052f5
| Author | SHA1 | Date | |
|---|---|---|---|
| b3772052f5 | |||
| ed0daeef2b |
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
@ -1,7 +1,6 @@
|
|||||||
{
|
{
|
||||||
"deno.enable": true,
|
"deno.enable": true,
|
||||||
"deno.unstable": true,
|
"deno.unstable": true,
|
||||||
"deno.config": "./deno.jsonc",
|
|
||||||
"workbench.colorCustomizations": {
|
"workbench.colorCustomizations": {
|
||||||
"activityBar.activeBackground": "#520088",
|
"activityBar.activeBackground": "#520088",
|
||||||
"activityBar.background": "#520088",
|
"activityBar.background": "#520088",
|
||||||
|
|||||||
@ -1,17 +1,18 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"lib": [
|
"lib": [
|
||||||
// "deno.window"
|
"deno.ns",
|
||||||
"DOM",
|
"deno.window",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
"ES2021",
|
"ES2021",
|
||||||
"ESNext"
|
"ESNext"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"tasks": {
|
"tasks": {
|
||||||
"dev": "deno bundle --watch main.ts bundle.js"
|
"dev": "deno run -RWEN --allow-run --unstable dev.ts dev"
|
||||||
},
|
},
|
||||||
"imports": {
|
"imports": {
|
||||||
"drawing": "./drawing/index.ts",
|
"doodler": "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/mod.ts"
|
||||||
"doodler": "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.0.7a/mod.ts"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
197
deno.lock
generated
Normal file
197
deno.lock
generated
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
{
|
||||||
|
"version": "4",
|
||||||
|
"specifiers": {
|
||||||
|
"jsr:@luca/esbuild-deno-loader@*": "0.11.0",
|
||||||
|
"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/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",
|
||||||
|
"npm:esbuild@*": "0.24.2"
|
||||||
|
},
|
||||||
|
"jsr": {
|
||||||
|
"@luca/esbuild-deno-loader@0.11.0": {
|
||||||
|
"integrity": "c05a989aa7c4ee6992a27be5f15cfc5be12834cab7ff84cabb47313737c51a2c",
|
||||||
|
"dependencies": [
|
||||||
|
"jsr:@std/bytes",
|
||||||
|
"jsr:@std/encoding",
|
||||||
|
"jsr:@std/path@^1.0.6"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"@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/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"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
141
dev.ts
Normal file
141
dev.ts
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
/// <reference lib="deno.ns" />
|
||||||
|
|
||||||
|
import * as esbuild from "npm:esbuild";
|
||||||
|
import { denoPlugins } from "jsr:@luca/esbuild-deno-loader";
|
||||||
|
import { serveDir } from "jsr:@std/http";
|
||||||
|
|
||||||
|
async function dev() {
|
||||||
|
const paths = [];
|
||||||
|
const ignoredFiles = ["bundler", "bundle", "dev"];
|
||||||
|
|
||||||
|
for (const path of Deno.readDirSync("./")) {
|
||||||
|
if (
|
||||||
|
path.name.endsWith(".ts") &&
|
||||||
|
!ignoredFiles.find((file) => path.name.includes(file))
|
||||||
|
) {
|
||||||
|
paths.push(path.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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();
|
||||||
|
}
|
||||||
10
index.html
10
index.html
@ -5,6 +5,16 @@
|
|||||||
<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>
|
||||||
|
html, body {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="bundle.js"></script>
|
<script src="bundle.js"></script>
|
||||||
|
|||||||
34
lib/context.ts
Normal file
34
lib/context.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
41
lib/input.ts
Normal file
41
lib/input.ts
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
200
main.ts
200
main.ts
@ -1,200 +0,0 @@
|
|||||||
import { lerp } from "./math/lerp.ts";
|
|
||||||
import { ComplexPath, PathSegment } from "./math/path.ts";
|
|
||||||
import { Mover } from "./physics/mover.ts";
|
|
||||||
import { Train, TrainCar } from "./train.ts";
|
|
||||||
import { fillCircle, drawCircle } from 'drawing';
|
|
||||||
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({
|
|
||||||
width: 400,
|
|
||||||
height: 400,
|
|
||||||
bg: '#333'
|
|
||||||
});
|
|
||||||
|
|
||||||
const path = loadFromJson();
|
|
||||||
|
|
||||||
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 train = new Train(path, [car]);
|
|
||||||
|
|
||||||
let dragEndCounter = 0
|
|
||||||
let selectedNode: IControlNode | undefined;
|
|
||||||
|
|
||||||
doodler.createLayer(() => {
|
|
||||||
for (let i = 0; i < path.evenPoints.length; i+=10) {
|
|
||||||
const p = path.evenPoints[i];
|
|
||||||
const next = path.evenPoints[(i + 1)%path.evenPoints.length];
|
|
||||||
const last = path.evenPoints.at(i - 1);
|
|
||||||
if (!last) break;
|
|
||||||
const tan = Vector.sub(last, next);
|
|
||||||
|
|
||||||
doodler.drawRotated(p, tan.heading(), () => {
|
|
||||||
doodler.line(p, p.copy().add(0,10), {color: '#291b17', weight: 4})
|
|
||||||
doodler.line(p, p.copy().add(0,-10), {color: '#291b17', weight: 4})
|
|
||||||
doodler.line(p.copy().add(-6,5), p.copy().add(6,5), {color: 'grey', weight: 2})
|
|
||||||
doodler.line(p.copy().add(-6,-5), p.copy().add(6,-5), {color: 'grey', weight: 2})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
path.draw();
|
|
||||||
train.move();
|
|
||||||
|
|
||||||
selectedNode?.anchor.drawDot();
|
|
||||||
selectedNode?.controls.forEach(e => e.drawDot());
|
|
||||||
})
|
|
||||||
|
|
||||||
let editable = false;
|
|
||||||
|
|
||||||
const clickables = new Map()
|
|
||||||
|
|
||||||
let selectedPoint: Vector;
|
|
||||||
|
|
||||||
document.addEventListener('keyup', e => {
|
|
||||||
if (e.key === 'd') {
|
|
||||||
// console.log(trains)
|
|
||||||
// console.log(path.segments.reduce((a,b) => a + b.calculateApproxLength(1000), 0))
|
|
||||||
// console.log(path.evenPoints);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.key === 'ArrowUp') {
|
|
||||||
// for (const train of trains) {
|
|
||||||
// train.speed += .1;
|
|
||||||
// }
|
|
||||||
speed += .1
|
|
||||||
}
|
|
||||||
if (e.key === 'ArrowDown') {
|
|
||||||
// for (const train of trains) {
|
|
||||||
// train.speed -= .1;
|
|
||||||
// }
|
|
||||||
speed -= .1
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.key === 'm' && selectedPoint) {
|
|
||||||
const points = path.points;
|
|
||||||
const index = points.findIndex(p => p === selectedPoint);
|
|
||||||
if (index > -1) {
|
|
||||||
const prev = points.at(index - 1)!;
|
|
||||||
const next = points[(index + 1) % points.length];
|
|
||||||
|
|
||||||
const toPrev = Vector.sub(prev, selectedPoint);
|
|
||||||
toPrev.setMag(next.dist(selectedPoint));
|
|
||||||
toPrev.rotate(Math.PI)
|
|
||||||
const toNext = Vector.add(toPrev, selectedPoint);
|
|
||||||
next.set(toNext);
|
|
||||||
|
|
||||||
path.calculateApproxLength();
|
|
||||||
path.calculateEvenlySpacedPoints(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.key === 'e') {
|
|
||||||
editable = !editable;
|
|
||||||
for (const t of path.segments) {
|
|
||||||
t.editable = !t.editable;
|
|
||||||
for (const p of t.points) {
|
|
||||||
if (t.editable) {
|
|
||||||
doodler.registerDraggable(p, 10)
|
|
||||||
doodler.addDragEvents({
|
|
||||||
point: p,
|
|
||||||
onDragEnd: () => {
|
|
||||||
dragEndCounter++
|
|
||||||
t.length = t.calculateApproxLength(100)
|
|
||||||
path.evenPoints = path.calculateEvenlySpacedPoints(1)
|
|
||||||
},
|
|
||||||
onDrag: (movement) => {
|
|
||||||
// todo - remove ! after updating doodler
|
|
||||||
path.handleNodeEdit(p, movement!)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
doodler.unregisterDraggable(p)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (const p of path.points) {
|
|
||||||
if (editable) {
|
|
||||||
const onClick = () => {
|
|
||||||
selectedPoint = p;
|
|
||||||
selectedNode = path.nodes.find(e => e.anchor === p || e.controls.includes(p));
|
|
||||||
}
|
|
||||||
|
|
||||||
clickables.set(p, onClick);
|
|
||||||
doodler.registerClickable(p.copy().sub(10, 10), p.copy().add(10, 10), onClick);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const the = clickables.get(p);
|
|
||||||
doodler.unregisterClickable(the);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// document.addEventListener('keydown', e => {
|
|
||||||
// const valid = ["ArrowUp",
|
|
||||||
// "ArrowRight",
|
|
||||||
// "ArrowDown",
|
|
||||||
// "ArrowLeft",]
|
|
||||||
// if (valid.includes(e.key))
|
|
||||||
// controls[e.key as keyof typeof controls] = true;
|
|
||||||
// })
|
|
||||||
// document.addEventListener('keyup', e => {
|
|
||||||
// const valid = ["ArrowUp",
|
|
||||||
// "ArrowRight",
|
|
||||||
// "ArrowDown",
|
|
||||||
// "ArrowLeft",]
|
|
||||||
// if (valid.includes(e.key))
|
|
||||||
// controls[e.key as keyof typeof controls] = false;
|
|
||||||
// })
|
|
||||||
|
|
||||||
// function getSteeringForce(mover: Mover, dir: string) {
|
|
||||||
// const dirs = {
|
|
||||||
// ArrowUp: 0,
|
|
||||||
// ArrowRight: .1 * Math.PI,
|
|
||||||
// ArrowDown: Math.PI,
|
|
||||||
// ArrowLeft: -.1 * Math.PI,
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const target = mover.velocity.copy();
|
|
||||||
// target.normalize();
|
|
||||||
// target.mult(10);
|
|
||||||
// target.rotate(dirs[dir as keyof typeof dirs]);
|
|
||||||
// const force = Vector.sub(target, mover.velocity);
|
|
||||||
// force.limit(.1)
|
|
||||||
// return force;
|
|
||||||
// }
|
|
||||||
|
|
||||||
document.addEventListener('keydown', e => {
|
|
||||||
if (e.ctrlKey && e.key === 's') {
|
|
||||||
e.preventDefault();
|
|
||||||
path.segments.forEach((s: any) => {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
282
prototype.ts
Normal file
282
prototype.ts
Normal 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.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);
|
||||||
|
}
|
||||||
|
});
|
||||||
1455
test/bundle.js
Normal file
1455
test/bundle.js
Normal file
File diff suppressed because it is too large
Load Diff
142
track.ts
142
track.ts
@ -1,9 +1,8 @@
|
|||||||
import { PathSegment } from "./math/path.ts";
|
import { PathSegment } from "./math/path.ts";
|
||||||
import { Vector } from "doodler";
|
import { Vector } from "doodler";
|
||||||
import { Train } from "./train.ts";
|
import { Train } from "./train/train.ts";
|
||||||
|
|
||||||
export class Track extends PathSegment {
|
export class Track extends PathSegment {
|
||||||
|
|
||||||
editable = false;
|
editable = false;
|
||||||
|
|
||||||
next: Track;
|
next: Track;
|
||||||
@ -11,7 +10,11 @@ export class Track extends PathSegment {
|
|||||||
|
|
||||||
id: string;
|
id: string;
|
||||||
|
|
||||||
constructor(points: [Vector, Vector, Vector, Vector], next?: Track, prev?: Track) {
|
constructor(
|
||||||
|
points: [Vector, Vector, Vector, Vector],
|
||||||
|
next?: Track,
|
||||||
|
prev?: Track,
|
||||||
|
) {
|
||||||
super(points);
|
super(points);
|
||||||
this.id = crypto.randomUUID();
|
this.id = crypto.randomUUID();
|
||||||
this.next = next || this;
|
this.next = next || this;
|
||||||
@ -78,7 +81,11 @@ export class Track extends PathSegment {
|
|||||||
}
|
}
|
||||||
|
|
||||||
getAllPointsInRange(v: Vector, r: number) {
|
getAllPointsInRange(v: Vector, r: number) {
|
||||||
const points: [number, PathSegment][] = this.getPointsWithinRadius(v, r).concat(this.next.getPointsWithinRadius(v, r), this.prev.getPointsWithinRadius(v, r))
|
const points: [number, PathSegment][] = this.getPointsWithinRadius(v, r)
|
||||||
|
.concat(
|
||||||
|
this.next.getPointsWithinRadius(v, r),
|
||||||
|
this.prev.getPointsWithinRadius(v, r),
|
||||||
|
);
|
||||||
|
|
||||||
return points;
|
return points;
|
||||||
}
|
}
|
||||||
@ -111,7 +118,7 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
pointSpacing: number;
|
pointSpacing: number;
|
||||||
|
|
||||||
get points() {
|
get points() {
|
||||||
return Array.from(new Set(this.segments.flatMap(s => s.points)));
|
return Array.from(new Set(this.segments.flatMap((s) => s.points)));
|
||||||
}
|
}
|
||||||
|
|
||||||
nodes: IControlNode[];
|
nodes: IControlNode[];
|
||||||
@ -124,10 +131,13 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
for (let i = 0; i < this.points.length; i += 3) {
|
for (let i = 0; i < this.points.length; i += 3) {
|
||||||
const node: IControlNode = {
|
const node: IControlNode = {
|
||||||
anchor: this.points[i],
|
anchor: this.points[i],
|
||||||
controls: [this.points.at(i - 1)!, this.points[(i + 1) % this.points.length]],
|
controls: [
|
||||||
|
this.points.at(i - 1)!,
|
||||||
|
this.points[(i + 1) % this.points.length],
|
||||||
|
],
|
||||||
mirrored: false,
|
mirrored: false,
|
||||||
tangent: true
|
tangent: true,
|
||||||
}
|
};
|
||||||
this.nodes.push(node);
|
this.nodes.push(node);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -148,13 +158,12 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
|
calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
|
||||||
this.pointSpacing = 1;
|
this.pointSpacing = 1;
|
||||||
// return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
|
// return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
|
||||||
const points: Vector[] = []
|
const points: Vector[] = [];
|
||||||
|
|
||||||
points.push(this.segments[0].points[0]);
|
points.push(this.segments[0].points[0]);
|
||||||
let prev = points[0];
|
let prev = points[0];
|
||||||
let distSinceLastEvenPoint = 0
|
let distSinceLastEvenPoint = 0;
|
||||||
for (const seg of this.segments) {
|
for (const seg of this.segments) {
|
||||||
|
|
||||||
let t = 0;
|
let t = 0;
|
||||||
|
|
||||||
const div = Math.ceil(seg.length * resolution * 10);
|
const div = Math.ceil(seg.length * resolution * 10);
|
||||||
@ -163,16 +172,18 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
const point = seg.getPointAtT(t);
|
const point = seg.getPointAtT(t);
|
||||||
distSinceLastEvenPoint += prev.dist(point);
|
distSinceLastEvenPoint += prev.dist(point);
|
||||||
|
|
||||||
|
|
||||||
if (distSinceLastEvenPoint >= spacing) {
|
if (distSinceLastEvenPoint >= spacing) {
|
||||||
const overshoot = distSinceLastEvenPoint - spacing;
|
const overshoot = distSinceLastEvenPoint - spacing;
|
||||||
const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot))
|
const evenPoint = Vector.add(
|
||||||
|
point,
|
||||||
|
Vector.sub(point, prev).normalize().mult(overshoot),
|
||||||
|
);
|
||||||
distSinceLastEvenPoint = overshoot;
|
distSinceLastEvenPoint = overshoot;
|
||||||
points.push(evenPoint);
|
points.push(evenPoint);
|
||||||
prev = evenPoint;
|
prev = evenPoint;
|
||||||
}
|
}
|
||||||
|
|
||||||
prev = point
|
prev = point;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -182,10 +193,10 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
followEvenPoints(t: number) {
|
followEvenPoints(t: number) {
|
||||||
if (t < 0) t += this.evenPoints.length
|
if (t < 0) t += this.evenPoints.length;
|
||||||
const i = Math.floor(t);
|
const i = Math.floor(t);
|
||||||
const a = this.evenPoints[i]
|
const a = this.evenPoints[i];
|
||||||
const b = this.evenPoints[(i + 1) % this.evenPoints.length]
|
const b = this.evenPoints[(i + 1) % this.evenPoints.length];
|
||||||
|
|
||||||
return Vector.lerp(a, b, t % 1);
|
return Vector.lerp(a, b, t % 1);
|
||||||
}
|
}
|
||||||
@ -197,50 +208,92 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
toggleNodeTangent(p: Vector) {
|
toggleNodeTangent(p: Vector) {
|
||||||
const node = this.nodes.find(n => n.anchor === p);
|
const node = this.nodes.find((n) => n.anchor === p);
|
||||||
|
|
||||||
node && (node.tangent = !node.tangent);
|
node && (node.tangent = !node.tangent);
|
||||||
}
|
}
|
||||||
toggleNodeMirrored(p: Vector) {
|
toggleNodeMirrored(p: Vector) {
|
||||||
const node = this.nodes.find(n => n.anchor === p);
|
const node = this.nodes.find((n) => n.anchor === p);
|
||||||
|
|
||||||
node && (node.mirrored = !node.mirrored);
|
node && (node.mirrored = !node.mirrored);
|
||||||
}
|
}
|
||||||
handleNodeEdit(p: Vector, movement: { x: number, y: number }) {
|
handleNodeEdit(p: Vector, movement: { x: number; y: number }) {
|
||||||
const node = this.nodes.find(n => n.anchor === p || n.controls.includes(p));
|
const node = this.nodes.find((n) =>
|
||||||
|
n.anchor === p || n.controls.includes(p)
|
||||||
|
);
|
||||||
if (!node || !(node.mirrored || node.tangent)) return;
|
if (!node || !(node.mirrored || node.tangent)) return;
|
||||||
|
|
||||||
if (node.anchor !== p) {
|
if (node.anchor !== p) {
|
||||||
if (node.mirrored || node.tangent) {
|
if (node.mirrored || node.tangent) {
|
||||||
const mover = node.controls.find(e => e !== p)!;
|
const mover = node.controls.find((e) => e !== p)!;
|
||||||
const v = Vector.sub(node.anchor, p);
|
const v = Vector.sub(node.anchor, p);
|
||||||
if (!node.mirrored) v.setMag(Vector.sub(node.anchor, mover).mag());
|
if (!node.mirrored) v.setMag(Vector.sub(node.anchor, mover).mag());
|
||||||
mover.set(Vector.add(v, node.anchor));
|
mover.set(Vector.add(v, node.anchor));
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (const control of node.controls) {
|
for (const control of node.controls) {
|
||||||
control.add(movement.x, movement.y)
|
control.add(movement.x, movement.y);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const generateSquareTrack = () => {
|
export const generateSquareTrack = () => {
|
||||||
const first = new Track([new Vector(20, 40), new Vector(20, 100), new Vector(20, 300), new Vector(20, 360)]);
|
const first = new Track([
|
||||||
|
new Vector(20, 40),
|
||||||
|
new Vector(20, 100),
|
||||||
|
new Vector(20, 300),
|
||||||
|
new Vector(20, 360),
|
||||||
|
]);
|
||||||
|
|
||||||
const second = new Track([first.points[3], new Vector(20, 370), new Vector(30, 380), new Vector(40, 380)]);
|
const second = new Track([
|
||||||
|
first.points[3],
|
||||||
|
new Vector(20, 370),
|
||||||
|
new Vector(30, 380),
|
||||||
|
new Vector(40, 380),
|
||||||
|
]);
|
||||||
|
|
||||||
const third = new Track([second.points[3], new Vector(100, 380), new Vector(300, 380), new Vector(360, 380)]);
|
const third = new Track([
|
||||||
|
second.points[3],
|
||||||
|
new Vector(100, 380),
|
||||||
|
new Vector(300, 380),
|
||||||
|
new Vector(360, 380),
|
||||||
|
]);
|
||||||
|
|
||||||
const fourth = new Track([third.points[3], new Vector(370, 380), new Vector(380, 370), new Vector(380, 360)]);
|
const fourth = new Track([
|
||||||
|
third.points[3],
|
||||||
|
new Vector(370, 380),
|
||||||
|
new Vector(380, 370),
|
||||||
|
new Vector(380, 360),
|
||||||
|
]);
|
||||||
|
|
||||||
const fifth = new Track([fourth.points[3], new Vector(380, 300), new Vector(380, 100), new Vector(380, 40)]);
|
const fifth = new Track([
|
||||||
|
fourth.points[3],
|
||||||
|
new Vector(380, 300),
|
||||||
|
new Vector(380, 100),
|
||||||
|
new Vector(380, 40),
|
||||||
|
]);
|
||||||
|
|
||||||
const sixth = new Track([fifth.points[3], new Vector(380, 30), new Vector(370, 20), new Vector(360, 20)]);
|
const sixth = new Track([
|
||||||
|
fifth.points[3],
|
||||||
|
new Vector(380, 30),
|
||||||
|
new Vector(370, 20),
|
||||||
|
new Vector(360, 20),
|
||||||
|
]);
|
||||||
|
|
||||||
const seventh = new Track([sixth.points[3], new Vector(300, 20), new Vector(100, 20), new Vector(40, 20)]);
|
const seventh = new Track([
|
||||||
|
sixth.points[3],
|
||||||
|
new Vector(300, 20),
|
||||||
|
new Vector(100, 20),
|
||||||
|
new Vector(40, 20),
|
||||||
|
]);
|
||||||
|
|
||||||
const eighth = new Track([seventh.points[3], new Vector(30, 20), new Vector(20, 30), first.points[0]]);
|
const eighth = new Track([
|
||||||
|
seventh.points[3],
|
||||||
|
new Vector(30, 20),
|
||||||
|
new Vector(20, 30),
|
||||||
|
first.points[0],
|
||||||
|
]);
|
||||||
|
|
||||||
const tracks = [first, second, third, fourth, fifth, sixth, seventh, eighth];
|
const tracks = [first, second, third, fourth, fifth, sixth, seventh, eighth];
|
||||||
for (const [i, track] of tracks.entries()) {
|
for (const [i, track] of tracks.entries()) {
|
||||||
@ -253,25 +306,38 @@ export const generateSquareTrack = () => {
|
|||||||
// second.prev = first;
|
// second.prev = first;
|
||||||
// third.
|
// third.
|
||||||
|
|
||||||
return new Spline<Track>([first, second, third, fourth, fifth, sixth, seventh, eighth]);
|
return new Spline<Track>([
|
||||||
}
|
first,
|
||||||
|
second,
|
||||||
|
third,
|
||||||
|
fourth,
|
||||||
|
fifth,
|
||||||
|
sixth,
|
||||||
|
seventh,
|
||||||
|
eighth,
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
export const loadFromJson = () => {
|
export const loadFromJson = () => {
|
||||||
const json = JSON.parse(localStorage.getItem('railPath') || '');
|
const json = JSON.parse(localStorage.getItem("railPath") || "");
|
||||||
if (!json) return generateSquareTrack();
|
if (!json) return generateSquareTrack();
|
||||||
const segments: Track[] = [];
|
const segments: Track[] = [];
|
||||||
|
|
||||||
for (const { points } of json.segments) {
|
for (const { points } of json.segments) {
|
||||||
segments.push(new Track(points.map((p: { x: number, y: number }) => new Vector(p.x, p.y))));
|
segments.push(
|
||||||
|
new Track(
|
||||||
|
points.map((p: { x: number; y: number }) => new Vector(p.x, p.y)),
|
||||||
|
),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const [i, s] of segments.entries()) {
|
for (const [i, s] of segments.entries()) {
|
||||||
s.setNext(segments[(i + 1) % segments.length])
|
s.setNext(segments[(i + 1) % segments.length]);
|
||||||
s.setPrev(segments.at(i - 1)!)
|
s.setPrev(segments.at(i - 1)!);
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Spline<Track>(segments);
|
return new Spline<Track>(segments);
|
||||||
}
|
};
|
||||||
|
|
||||||
export interface IControlNode {
|
export interface IControlNode {
|
||||||
anchor: Vector;
|
anchor: Vector;
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
import { drawLine } from "./drawing/line.ts";
|
import { drawLine } from "../drawing/line.ts";
|
||||||
import { ComplexPath, PathSegment } from "./math/path.ts";
|
import { ComplexPath, PathSegment } from "../math/path.ts";
|
||||||
import { Vector } from "doodler";
|
import { Vector } from "doodler";
|
||||||
import { Follower } from "./physics/follower.ts";
|
import { Follower } from "../physics/follower.ts";
|
||||||
import { Mover } from "./physics/mover.ts";
|
import { Mover } from "../physics/mover.ts";
|
||||||
import { Spline, Track } from "./track.ts";
|
import { Spline, Track } from "../track.ts";
|
||||||
|
|
||||||
export class Train {
|
export class Train {
|
||||||
nodes: Vector[] = [];
|
nodes: Vector[] = [];
|
||||||
@ -16,30 +16,52 @@ export class Train {
|
|||||||
engineLength = 40;
|
engineLength = 40;
|
||||||
spacing = 30;
|
spacing = 30;
|
||||||
|
|
||||||
|
speed = 0;
|
||||||
|
|
||||||
constructor(track: Spline<Track>, cars: TrainCar[] = []) {
|
constructor(track: Spline<Track>, cars: TrainCar[] = []) {
|
||||||
this.path = track;
|
this.path = track;
|
||||||
this.t = 0;
|
this.t = 0;
|
||||||
this.nodes.push(this.path.followEvenPoints(this.t),)
|
this.nodes.push(this.path.followEvenPoints(this.t));
|
||||||
this.nodes.push(this.path.followEvenPoints(this.t - this.real2Track(40)));
|
this.nodes.push(this.path.followEvenPoints(this.t - this.real2Track(40)));
|
||||||
this.cars.push(new TrainCar(55, document.getElementById('engine-sprites')! as HTMLImageElement, 80, 20, { at: new Vector(0, 60), width: 80, height: 20 }));
|
const engineSprites = document.getElementById(
|
||||||
this.cars[0].points = this.nodes.map(n => n) as [Vector, Vector];
|
"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;
|
let currentOffset = 40;
|
||||||
for (const car of cars) {
|
for (const car of cars) {
|
||||||
currentOffset += this.spacing;
|
currentOffset += this.spacing;
|
||||||
const a = this.path.followEvenPoints(this.t - currentOffset);
|
const a = this.path.followEvenPoints(this.t - currentOffset);
|
||||||
currentOffset += car.length;
|
currentOffset += car.length;
|
||||||
const b = this.path.followEvenPoints(this.t - currentOffset);
|
const b = this.path.followEvenPoints(this.t - currentOffset);
|
||||||
car.points = [a,b];
|
car.points = [a, b];
|
||||||
this.cars.push(car);
|
this.cars.push(car);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
move() {
|
move(dTime: number) {
|
||||||
this.t = (this.t + 1) % this.path.evenPoints.length;
|
this.t = (this.t + this.speed * dTime * 10) % this.path.evenPoints.length;
|
||||||
|
// console.log(this.t);
|
||||||
let currentOffset = 0;
|
let currentOffset = 0;
|
||||||
for (const car of this.cars) {
|
for (const car of this.cars) {
|
||||||
if (!car.points) return;
|
if (!car.points) return;
|
||||||
const [a,b] = car.points;
|
const [a, b] = car.points;
|
||||||
a.set(this.path.followEvenPoints(this.t - currentOffset));
|
a.set(this.path.followEvenPoints(this.t - currentOffset));
|
||||||
currentOffset += car.length;
|
currentOffset += car.length;
|
||||||
b.set(this.path.followEvenPoints(this.t - currentOffset));
|
b.set(this.path.followEvenPoints(this.t - currentOffset));
|
||||||
@ -62,7 +84,7 @@ export class Train {
|
|||||||
// }
|
// }
|
||||||
|
|
||||||
real2Track(length: number) {
|
real2Track(length: number) {
|
||||||
return length / this.path.pointSpacing
|
return length / this.path.pointSpacing;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -75,7 +97,13 @@ export class TrainCar {
|
|||||||
points?: [Vector, Vector];
|
points?: [Vector, Vector];
|
||||||
length: number;
|
length: number;
|
||||||
|
|
||||||
constructor(length: number, img: HTMLImageElement, w: number, h: number, sprite?: ISprite) {
|
constructor(
|
||||||
|
length: number,
|
||||||
|
img: HTMLImageElement,
|
||||||
|
w: number,
|
||||||
|
h: number,
|
||||||
|
sprite?: ISprite,
|
||||||
|
) {
|
||||||
this.img = img;
|
this.img = img;
|
||||||
this.sprite = sprite;
|
this.sprite = sprite;
|
||||||
this.imgWidth = w;
|
this.imgWidth = w;
|
||||||
@ -89,13 +117,24 @@ export class TrainCar {
|
|||||||
const origin = Vector.add(Vector.sub(a, b).div(2), b);
|
const origin = Vector.add(Vector.sub(a, b).div(2), b);
|
||||||
const angle = Vector.sub(b, a).heading();
|
const angle = Vector.sub(b, a).heading();
|
||||||
|
|
||||||
doodler.drawCircle(origin, 4, {color: 'blue'})
|
doodler.drawCircle(origin, 4, { color: "blue" });
|
||||||
|
|
||||||
doodler.drawRotated(origin, angle, () => {
|
doodler.drawRotated(origin, angle, () => {
|
||||||
this.sprite ?
|
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.drawSprite(
|
||||||
doodler.drawImage(this.img, origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2));
|
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),
|
||||||
|
);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user