Compare commits
1 Commits
overhaul
...
f7fedd25a6
Author | SHA1 | Date | |
---|---|---|---|
f7fedd25a6 |
5
.gitignore
vendored
@@ -23,8 +23,3 @@ dist-ssr
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
# Packed devtools
|
|
||||||
devtools.zip
|
|
||||||
|
|
||||||
temp.*
|
|
10
.temp/deno.lock
generated
@@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"version": "4",
|
"version": "4",
|
||||||
"specifiers": {
|
"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.0",
|
||||||
"jsr:@luca/esbuild-deno-loader@0.11.1": "0.11.1",
|
"jsr:@luca/esbuild-deno-loader@0.11.1": "0.11.1",
|
||||||
"jsr:@std/assert@*": "1.0.10",
|
"jsr:@std/assert@*": "1.0.10",
|
||||||
@@ -24,6 +25,9 @@
|
|||||||
"@bearmetal/doodler@0.0.4": {
|
"@bearmetal/doodler@0.0.4": {
|
||||||
"integrity": "b631083cff84994c513f70d1f09e6a9256edabcb224112c93a9ca6a87c88a389"
|
"integrity": "b631083cff84994c513f70d1f09e6a9256edabcb224112c93a9ca6a87c88a389"
|
||||||
},
|
},
|
||||||
|
"@bearmetal/doodler@0.0.5-b": {
|
||||||
|
"integrity": "94f265ea21162f943291526800de7f3f6560634a4fe762a38cd73892685b6742"
|
||||||
|
},
|
||||||
"@luca/esbuild-deno-loader@0.11.0": {
|
"@luca/esbuild-deno-loader@0.11.0": {
|
||||||
"integrity": "c05a989aa7c4ee6992a27be5f15cfc5be12834cab7ff84cabb47313737c51a2c",
|
"integrity": "c05a989aa7c4ee6992a27be5f15cfc5be12834cab7ff84cabb47313737c51a2c",
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
@@ -204,11 +208,7 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"redirects": {
|
|
||||||
"https://deno.land/x/clipboard/mod.ts": "https://deno.land/x/clipboard@v0.0.3/mod.ts"
|
|
||||||
},
|
|
||||||
"remote": {
|
"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/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/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/geometry/vector.ts": "a08ecff64c5436a28c6451a31c68fc912d25f941aabafb79418fa0a1aeffa9d2",
|
||||||
@@ -232,7 +232,7 @@
|
|||||||
},
|
},
|
||||||
"workspace": {
|
"workspace": {
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"jsr:@bearmetal/doodler@0.0.5"
|
"jsr:@bearmetal/doodler@0.0.5-b"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -1 +0,0 @@
|
|||||||
[{"p":[[200,24,0],[233,24,0],[264.87555226753926,32.541028488383176,0],[293.45439059242574,49.041028488383176,0]],"id":"11d7561a-3172-4ad7-9d53-6f65f49ce8c3","bNeighbors":["93e4d69d-10f2-4ecc-a4d0-560ee71708e8"],"fNeighbors":["e44c3a93-01f0-42f1-aee9-939cbde5903b"]},{"p":[[293.45439059242574,49.041028488383176,0],[322.0332289173122,65.54102848838318,0],[345.3677526964683,88.87555226753923,0],[361.8677526964683,117.45439059242571,0]],"id":"e44c3a93-01f0-42f1-aee9-939cbde5903b","bNeighbors":["11d7561a-3172-4ad7-9d53-6f65f49ce8c3"],"fNeighbors":["bf9833f2-fd66-45fb-924d-f40b7c863c26"]},{"p":[[361.8677526964683,117.45439059242571,0],[378.3677526964683,146.0332289173122,0],[386.9087811848515,177.90878118485145,0],[386.9087811848515,210.90878118485148,0]],"id":"bf9833f2-fd66-45fb-924d-f40b7c863c26","bNeighbors":["e44c3a93-01f0-42f1-aee9-939cbde5903b"],"fNeighbors":["081c81f3-8fe7-4c71-babd-1d02d52c3385"]},{"p":[[386.9087811848515,210.90878118485148,0],[386.9087811848515,243.90878118485148,0],[378.3677526964683,275.78433345239074,0],[361.8677526964683,304.3631717772772,0]],"id":"081c81f3-8fe7-4c71-babd-1d02d52c3385","bNeighbors":["bf9833f2-fd66-45fb-924d-f40b7c863c26"],"fNeighbors":["d1380635-1dba-4180-8038-931289a56d17"]},{"p":[[361.8677526964683,304.3631717772772,0],[345.3677526964683,332.9420101021637,0],[322.0332289173122,356.2765338813198,0],[293.45439059242574,372.7765338813198,0]],"id":"d1380635-1dba-4180-8038-931289a56d17","bNeighbors":["081c81f3-8fe7-4c71-babd-1d02d52c3385"],"fNeighbors":["8fe94c53-c0be-4f0d-986b-f37e143e62d7"]},{"p":[[293.45439059242574,372.7765338813198,0],[264.87555226753926,389.2765338813198,0],[233,397.81756236970296,0],[200,397.81756236970296,0]],"id":"8fe94c53-c0be-4f0d-986b-f37e143e62d7","bNeighbors":["d1380635-1dba-4180-8038-931289a56d17"],"fNeighbors":["1542c063-b548-4d27-9fd8-c7a8344b05cb"]},{"p":[[200,397.81756236970296,0],[167,397.81756236970296,0],[135.12444773246074,389.2765338813198,0],[106.54560940757426,372.7765338813198,0]],"id":"1542c063-b548-4d27-9fd8-c7a8344b05cb","bNeighbors":["8fe94c53-c0be-4f0d-986b-f37e143e62d7"],"fNeighbors":["9be20051-651f-4cca-b6f1-ca80d5db7635"]},{"p":[[106.54560940757426,372.7765338813198,0],[77.96677108268779,356.2765338813198,0],[54.6322473035317,332.94201010216375,0],[38.1322473035317,304.3631717772772,0]],"id":"9be20051-651f-4cca-b6f1-ca80d5db7635","bNeighbors":["1542c063-b548-4d27-9fd8-c7a8344b05cb"],"fNeighbors":["4b7ff960-9fe7-48b3-b64e-9e32f60b0d2f"]},{"p":[[38.1322473035317,304.3631717772772,0],[21.632247303531692,275.7843334523908,0],[13.091218815148487,243.9087811848515,0],[13.09121881514848,210.90878118485153,0]],"id":"4b7ff960-9fe7-48b3-b64e-9e32f60b0d2f","bNeighbors":["9be20051-651f-4cca-b6f1-ca80d5db7635"],"fNeighbors":["0c481aa2-92de-4517-8e76-6c3f163f3dde"]},{"p":[[13.09121881514848,210.90878118485153,0],[13.091218815148467,177.90878118485153,0],[21.632247303531646,146.03322891731227,0],[38.132247303531635,117.45439059242577,0]],"id":"0c481aa2-92de-4517-8e76-6c3f163f3dde","bNeighbors":["4b7ff960-9fe7-48b3-b64e-9e32f60b0d2f"],"fNeighbors":["c62384ad-3fec-4479-9596-1173a6e651bb"]},{"p":[[38.132247303531635,117.45439059242577,0],[54.63224730353162,88.87555226753928,0],[77.96677108268767,65.54102848838318,0],[106.54560940757415,49.041028488383176,0]],"id":"c62384ad-3fec-4479-9596-1173a6e651bb","bNeighbors":["0c481aa2-92de-4517-8e76-6c3f163f3dde"],"fNeighbors":["93e4d69d-10f2-4ecc-a4d0-560ee71708e8"]},{"p":[[106.54560940757415,49.041028488383176,0],[135.12444773246062,32.541028488383176,0],[166.9999999999999,23.99999999999997,0],[199.9999999999999,23.99999999999997,0]],"id":"93e4d69d-10f2-4ecc-a4d0-560ee71708e8","bNeighbors":["c62384ad-3fec-4479-9596-1173a6e651bb"],"fNeighbors":["11d7561a-3172-4ad7-9d53-6f65f49ce8c3"]}]
|
|
@@ -3,8 +3,7 @@
|
|||||||
"dev": "deno run -A --node-modules-dir npm:vite",
|
"dev": "deno run -A --node-modules-dir npm:vite",
|
||||||
"build": "deno run -A --node-modules-dir npm:vite build",
|
"build": "deno run -A --node-modules-dir npm:vite build",
|
||||||
"preview": "deno run -A --node-modules-dir npm:vite preview",
|
"preview": "deno run -A --node-modules-dir npm:vite preview",
|
||||||
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/",
|
"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": {
|
"compilerOptions": {
|
||||||
"lib": [
|
"lib": [
|
||||||
@@ -14,9 +13,8 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"imports": {
|
"imports": {
|
||||||
"@bearmetal/doodler": "jsr:@bearmetal/doodler@0.0.5-i",
|
"@bearmetal/doodler": "jsr:@bearmetal/doodler@0.0.5-b",
|
||||||
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
|
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
|
||||||
"vite": "npm:vite@^6.0.1"
|
"vite": "npm:vite@^6.0.1"
|
||||||
},
|
}
|
||||||
"nodeModulesDir": "auto"
|
|
||||||
}
|
}
|
@@ -1,6 +1,6 @@
|
|||||||
// Create a new devtools panel named "Context Stack"
|
// Create a new devtools panel named "Context Stack"
|
||||||
browser.devtools.panels.create(
|
browser.devtools.panels.create(
|
||||||
"Smoke and Rails", // Tab title
|
"Context Stack", // Tab title
|
||||||
"train icon.png", // Icon for your panel (optional)
|
"train icon.png", // Icon for your panel (optional)
|
||||||
"panel.html", // HTML page for your panel content
|
"panel.html", // HTML page for your panel content
|
||||||
);
|
);
|
||||||
|
@@ -1,9 +1,8 @@
|
|||||||
{
|
{
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"name": "SNR DevTools",
|
"name": "Context Stack DevTools",
|
||||||
"version": "1.0",
|
"version": "1.0",
|
||||||
"description": "A devtools panel to view and edit context stack values.",
|
"description": "A devtools panel to view and edit context stack values.",
|
||||||
"author": "Emmaline Autumn",
|
|
||||||
"devtools_page": "devtools.html",
|
"devtools_page": "devtools.html",
|
||||||
"background": {
|
"background": {
|
||||||
"scripts": [
|
"scripts": [
|
||||||
@@ -25,13 +24,5 @@
|
|||||||
"devtools",
|
"devtools",
|
||||||
"tabs",
|
"tabs",
|
||||||
"*://*/*"
|
"*://*/*"
|
||||||
],
|
]
|
||||||
"icons": {
|
|
||||||
"48": "train icon.png"
|
|
||||||
},
|
|
||||||
"browser_specific_settings": {
|
|
||||||
"gecko": {
|
|
||||||
"id": "snrdt@cyborggrizzly.com"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
@@ -2,7 +2,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Smoke and Rails</title>
|
<title>Context Stack</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
@@ -40,9 +40,9 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h2>Smoke and Rails Debugger</h2>
|
<h1>Context Stack</h1>
|
||||||
<button id="refresh">Refresh</button>
|
|
||||||
<div id="contextContainer"></div>
|
<div id="contextContainer"></div>
|
||||||
|
<button id="refresh">Refresh</button>
|
||||||
<script src="panel.js"></script>
|
<script src="panel.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@@ -36,7 +36,7 @@ function generateObjectForm(obj, path = "") {
|
|||||||
const detail = document.createElement("details");
|
const detail = document.createElement("details");
|
||||||
detail.open = path === "";
|
detail.open = path === "";
|
||||||
const summary = document.createElement("summary");
|
const summary = document.createElement("summary");
|
||||||
summary.textContent = path.split(".").at(-1);
|
summary.textContent = path;
|
||||||
detail.appendChild(summary);
|
detail.appendChild(summary);
|
||||||
const form = document.createElement("form");
|
const form = document.createElement("form");
|
||||||
let count = 0;
|
let count = 0;
|
||||||
|
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -2,12 +2,8 @@ import { getContextItem } from "./lib/context.ts";
|
|||||||
import { InputManager } from "./lib/input.ts";
|
import { InputManager } from "./lib/input.ts";
|
||||||
import { StateMachine } from "./state/machine.ts";
|
import { StateMachine } from "./state/machine.ts";
|
||||||
import { States } from "./state/states/index.ts";
|
import { States } from "./state/states/index.ts";
|
||||||
import { TrackSystem } from "./track/system.ts";
|
|
||||||
|
|
||||||
export function bootstrapInputs() {
|
export function bootstrapInputs() {
|
||||||
addEventListener("keydown", (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
});
|
|
||||||
const inputManager = getContextItem<InputManager>("inputManager");
|
const inputManager = getContextItem<InputManager>("inputManager");
|
||||||
inputManager.onKey("e", () => {
|
inputManager.onKey("e", () => {
|
||||||
const state = getContextItem<StateMachine<States>>("state");
|
const state = getContextItem<StateMachine<States>>("state");
|
||||||
@@ -18,22 +14,4 @@ export function bootstrapInputs() {
|
|||||||
localStorage.removeItem("track");
|
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
@@ -1,35 +1,10 @@
|
|||||||
import { ZoomableDoodler } from "@bearmetal/doodler";
|
|
||||||
import { TrackSegment } from "../track/system.ts";
|
|
||||||
import { Train, TrainCar } from "../train/train.ts";
|
|
||||||
import { InputManager } from "./input.ts";
|
|
||||||
import { ResourceManager } from "./resources.ts";
|
|
||||||
import { Debuggable } from "./debuggable.ts";
|
|
||||||
|
|
||||||
interface ContextMap {
|
|
||||||
inputManager: InputManager;
|
|
||||||
doodler: ZoomableDoodler;
|
|
||||||
resources: ResourceManager;
|
|
||||||
debug: Debug;
|
|
||||||
debuggables: Debuggable[];
|
|
||||||
colors: [
|
|
||||||
string,
|
|
||||||
string,
|
|
||||||
string,
|
|
||||||
string,
|
|
||||||
string,
|
|
||||||
string,
|
|
||||||
string,
|
|
||||||
string,
|
|
||||||
...string[],
|
|
||||||
];
|
|
||||||
[key: string]: unknown;
|
|
||||||
}
|
|
||||||
|
|
||||||
type ContextStore = Record<string, any>;
|
type ContextStore = Record<string, any>;
|
||||||
|
|
||||||
const defaultContext: ContextStore = {};
|
const defaultContext: ContextStore = {};
|
||||||
const contextStack: ContextStore[] = [defaultContext];
|
const contextStack: ContextStore[] = [defaultContext];
|
||||||
|
|
||||||
|
const debug = JSON.parse(localStorage.getItem("debug") || "false");
|
||||||
|
|
||||||
export function setDefaultContext(context: ContextStore) {
|
export function setDefaultContext(context: ContextStore) {
|
||||||
Object.assign(defaultContext, context);
|
Object.assign(defaultContext, context);
|
||||||
}
|
}
|
||||||
@@ -59,10 +34,6 @@ export const ctx = new Proxy(
|
|||||||
export function getContext() {
|
export function getContext() {
|
||||||
return ctx;
|
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 {
|
export function getContextItem<T>(prop: string): T {
|
||||||
return ctx[prop] as T;
|
return ctx[prop] as T;
|
||||||
}
|
}
|
||||||
@@ -79,6 +50,36 @@ export function setContextItem<T>(prop: string, value: T) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (debug) {
|
||||||
|
setInterval(() => {
|
||||||
|
let ctxEl = document.getElementById("context");
|
||||||
|
if (!ctxEl) {
|
||||||
|
ctxEl = document.createElement("div");
|
||||||
|
ctxEl.id = "context";
|
||||||
|
document.body.append(ctxEl);
|
||||||
|
}
|
||||||
|
ctxEl.innerHTML = "";
|
||||||
|
const div = document.createElement("div");
|
||||||
|
const pre = document.createElement("pre");
|
||||||
|
const h3 = document.createElement("h3");
|
||||||
|
h3.textContent = "Default";
|
||||||
|
div.append(h3);
|
||||||
|
pre.textContent = safeStringify(defaultContext);
|
||||||
|
div.append(pre);
|
||||||
|
ctxEl.append(div);
|
||||||
|
for (const [idx, ctx] of contextStack.entries()) {
|
||||||
|
const div = document.createElement("div");
|
||||||
|
const pre = document.createElement("pre");
|
||||||
|
const h3 = document.createElement("h3");
|
||||||
|
h3.textContent = "CTX " + idx;
|
||||||
|
div.append(h3);
|
||||||
|
pre.textContent = safeStringify(ctx);
|
||||||
|
div.append(pre);
|
||||||
|
ctxEl.append(div);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
function safeStringify(obj: any) {
|
function safeStringify(obj: any) {
|
||||||
const seen = new WeakSet();
|
const seen = new WeakSet();
|
||||||
return JSON.stringify(obj, (key, value) => {
|
return JSON.stringify(obj, (key, value) => {
|
||||||
@@ -88,53 +89,6 @@ function safeStringify(obj: any) {
|
|||||||
}
|
}
|
||||||
seen.add(value);
|
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;
|
return value;
|
||||||
}, 2);
|
}, 2);
|
||||||
}
|
}
|
||||||
@@ -144,25 +98,17 @@ const updateContextValue = (
|
|||||||
value: unknown,
|
value: unknown,
|
||||||
depth = contextStack.length - 1,
|
depth = contextStack.length - 1,
|
||||||
) => {
|
) => {
|
||||||
|
console.log("updateContextValue", key, value, depth);
|
||||||
const keys = key.split(".");
|
const keys = key.split(".");
|
||||||
let context = contextStack[depth] ?? defaultContext;
|
let context = contextStack[depth] ?? defaultContext;
|
||||||
for (let i = 0; i < keys.length - 1; i++) {
|
for (let i = 0; i < keys.length - 1; i++) {
|
||||||
if (context instanceof Map) {
|
context = context[keys[i]];
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
context[keys.at(-1)!] = value;
|
||||||
};
|
};
|
||||||
if (location.hostname === "localhost") {
|
if (location.hostname === "localhost") {
|
||||||
globalThis.getContextStack = getContextStack;
|
globalThis.getContextStack = getContextStack;
|
||||||
globalThis.updateContextValue = updateContextValue;
|
globalThis.updateContextValue = updateContextValue;
|
||||||
globalThis.contextStack = contextStack;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
@@ -1,37 +0,0 @@
|
|||||||
import { getContextItem } from "./context.ts";
|
|
||||||
|
|
||||||
export abstract class Drawable {
|
|
||||||
abstract draw(...args: unknown[]): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export abstract class Debuggable extends Drawable {
|
|
||||||
constructor(...debugKeys: [boolean | keyof Debug, ...(keyof Debug)[]]) {
|
|
||||||
super();
|
|
||||||
if (import.meta.env.DEV) {
|
|
||||||
let drawFirst = false;
|
|
||||||
if (typeof debugKeys[0] === "boolean") {
|
|
||||||
drawFirst = debugKeys.shift() as boolean;
|
|
||||||
}
|
|
||||||
const debuggables = getContextItem("debuggables");
|
|
||||||
debuggables.push(this);
|
|
||||||
// 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;
|
|
||||||
}
|
|
@@ -1,64 +1,24 @@
|
|||||||
// namespace:type/location
|
|
||||||
type sprite = "sprite";
|
|
||||||
type img = "img";
|
|
||||||
type audio = "audio";
|
|
||||||
type ResourceType = keyof ResourceMap;
|
|
||||||
type SpriteId = `${string}:${sprite}/${string}`;
|
|
||||||
|
|
||||||
interface ResourceMap {
|
|
||||||
sprite: HTMLImageElement;
|
|
||||||
img: HTMLImageElement;
|
|
||||||
audio: HTMLAudioElement;
|
|
||||||
}
|
|
||||||
type NamespacedId<T extends keyof ResourceMap> = `${string}:${T}/${string}`;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Resources are stored in namespaces, and can be accessed by their namespaced id.
|
|
||||||
* Sprites are located in blob storage as a single png file.
|
|
||||||
* Audio is located in blob storage as a single mp3 file.
|
|
||||||
*
|
|
||||||
* Custom resources can be loaded via the public API, however they will not be loaded on other clients.
|
|
||||||
* Ideally, engine and car definitions should be stored in the resource manager so that custom cars can be created.
|
|
||||||
*/
|
|
||||||
export class ResourceManager {
|
export class ResourceManager {
|
||||||
private resources: Map<string, unknown> = new Map();
|
private resources: Map<string, unknown> = new Map();
|
||||||
private statuses: Map<string, Promise<boolean>> = new Map();
|
private statuses: Map<string, Promise<boolean>> = new Map();
|
||||||
|
|
||||||
get<K extends ResourceType>(name: NamespacedId<K>): ResourceMap[K];
|
get<T>(name: string): T {
|
||||||
get<T>(name: string): T;
|
|
||||||
get<T>(
|
|
||||||
name: string,
|
|
||||||
): T {
|
|
||||||
if (!this.resources.has(name)) {
|
if (!this.resources.has(name)) {
|
||||||
throw new Error(`Resource ${name} not found`);
|
throw new Error(`Resource ${name} not found`);
|
||||||
}
|
}
|
||||||
return this.resources.get(name) as T;
|
return this.resources.get(name) as T;
|
||||||
}
|
}
|
||||||
|
|
||||||
set<T extends keyof ResourceMap>(
|
set(name: string, value: unknown) {
|
||||||
name: NamespacedId<T>,
|
|
||||||
value: unknown,
|
|
||||||
) {
|
|
||||||
const identifier = parseNamespacedId(name);
|
|
||||||
if (typeof (value as EventSource).addEventListener === "function") {
|
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(
|
this.statuses.set(
|
||||||
name,
|
name,
|
||||||
new Promise((resolve) => {
|
new Promise((resolve) => {
|
||||||
const onload = () => {
|
const onload = () => {
|
||||||
this.resources.set(name, value);
|
this.resources.set(name, value);
|
||||||
resolve(true);
|
resolve(true);
|
||||||
(value as EventSource).removeEventListener("loadeddata", onload);
|
|
||||||
(value as EventSource).removeEventListener("load", onload);
|
(value as EventSource).removeEventListener("load", onload);
|
||||||
};
|
};
|
||||||
(value as EventSource).addEventListener("loadeddata", onload);
|
|
||||||
(value as EventSource).addEventListener("load", onload);
|
(value as EventSource).addEventListener("load", onload);
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
@@ -76,28 +36,3 @@ export class ResourceManager {
|
|||||||
return Promise.all(Array.from(this.statuses.values()));
|
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("/") };
|
|
||||||
}
|
|
||||||
|
51
src/main.ts
@@ -20,14 +20,11 @@ const resources = new ResourceManager();
|
|||||||
const doodler = new ZoomableDoodler({
|
const doodler = new ZoomableDoodler({
|
||||||
fillScreen: true,
|
fillScreen: true,
|
||||||
bg: "#302040",
|
bg: "#302040",
|
||||||
noSmooth: true,
|
});
|
||||||
}, () => {});
|
(doodler as any as { ctx: CanvasRenderingContext2D }).ctx
|
||||||
setTimeout(() => {
|
.imageSmoothingEnabled = false;
|
||||||
(doodler as any as { ctx: CanvasRenderingContext2D }).ctx
|
|
||||||
.imageSmoothingEnabled = false;
|
|
||||||
}, 0);
|
|
||||||
// doodler.minScale = 0.1;
|
// doodler.minScale = 0.1;
|
||||||
// (doodler as any).scale = 3.14;
|
// (doodler as any).scale = doodler.maxScale;
|
||||||
|
|
||||||
const colors = [
|
const colors = [
|
||||||
"red",
|
"red",
|
||||||
@@ -40,39 +37,12 @@ const colors = [
|
|||||||
"violet",
|
"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({
|
setDefaultContext({
|
||||||
inputManager,
|
inputManager,
|
||||||
doodler,
|
doodler,
|
||||||
resources,
|
resources,
|
||||||
debug,
|
debug: true,
|
||||||
|
showEnds: true,
|
||||||
colors,
|
colors,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -113,12 +83,3 @@ setInterval(() => {
|
|||||||
|
|
||||||
const gameLoop = new GameLoop();
|
const gameLoop = new GameLoop();
|
||||||
gameLoop.start(state);
|
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;
|
|
||||||
}
|
|
||||||
|
@@ -1,7 +0,0 @@
|
|||||||
export function angleToRadians(angle: number) {
|
|
||||||
return angle / 180 * Math.PI;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function angleToDegrees(angle: number) {
|
|
||||||
return angle * 180 / Math.PI;
|
|
||||||
}
|
|
@@ -9,19 +9,3 @@ export const map = (
|
|||||||
x2: number,
|
x2: number,
|
||||||
y2: number,
|
y2: number,
|
||||||
) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
|
) => (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);
|
|
||||||
}
|
|
||||||
|
@@ -1,66 +0,0 @@
|
|||||||
import { Vector } from "@bearmetal/doodler";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
type GridItem = [Vector, Vector, Set<tag>];
|
|
||||||
}
|
|
||||||
export class SpatialHashGrid {
|
|
||||||
private grid: Map<string, GridItem[]> = new Map();
|
|
||||||
private cellSize: number;
|
|
||||||
|
|
||||||
constructor(cellSize: number) {
|
|
||||||
this.cellSize = cellSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
private getKey(x: number, y: number): string {
|
|
||||||
return `${Math.floor(x / this.cellSize)},${Math.floor(y / this.cellSize)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
insert(segment: GridItem) {
|
|
||||||
const [a, b] = segment;
|
|
||||||
const minX = Math.min(a.x, b.x);
|
|
||||||
const minY = Math.min(a.y, b.y);
|
|
||||||
const maxX = Math.max(a.x, b.x);
|
|
||||||
const maxY = Math.max(a.y, b.y);
|
|
||||||
|
|
||||||
for (let x = minX; x <= maxX; x += this.cellSize) {
|
|
||||||
for (let y = minY; y <= maxY; y += this.cellSize) {
|
|
||||||
const key = this.getKey(x, y);
|
|
||||||
if (!this.grid.has(key)) this.grid.set(key, []);
|
|
||||||
this.grid.get(key)!.push(segment);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
query(position: Vector, radius: number, tag?: tag): GridItem[] {
|
|
||||||
const minX = position.x - radius;
|
|
||||||
const minY = position.y - radius;
|
|
||||||
const maxX = position.x + radius;
|
|
||||||
const maxY = position.y + radius;
|
|
||||||
|
|
||||||
const segments: Set<GridItem> = new Set();
|
|
||||||
|
|
||||||
for (let x = minX; x <= maxX; x += this.cellSize) {
|
|
||||||
for (let y = minY; y <= maxY; y += this.cellSize) {
|
|
||||||
const key = this.getKey(x, y);
|
|
||||||
if (this.grid.has(key)) {
|
|
||||||
for (const segment of this.grid.get(key)!) {
|
|
||||||
tag
|
|
||||||
? segment[2].has(tag) &&
|
|
||||||
segments.add(segment)
|
|
||||||
: segments.add(segment);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return Array.from(segments);
|
|
||||||
}
|
|
||||||
|
|
||||||
getAllSegments() {
|
|
||||||
return Array.from(this.grid.values()).flatMap((s) => s);
|
|
||||||
}
|
|
||||||
|
|
||||||
clear() {
|
|
||||||
this.grid.clear();
|
|
||||||
}
|
|
||||||
}
|
|
@@ -1,39 +0,0 @@
|
|||||||
export class PhysicsSolver {
|
|
||||||
tasks: SolverTask[] = [];
|
|
||||||
maxTickStep?: number;
|
|
||||||
|
|
||||||
addTask(c: SolverTask) {
|
|
||||||
c.solver = this;
|
|
||||||
this.tasks.push(c);
|
|
||||||
this.tasks.sort((a, b) => a.priority - b.priority);
|
|
||||||
}
|
|
||||||
removeTask(c: SolverTask) {
|
|
||||||
this.tasks = this.tasks.filter((c1) => c1 !== c);
|
|
||||||
}
|
|
||||||
|
|
||||||
cleanupTasks() {
|
|
||||||
this.tasks = this.tasks.filter((c) => c.active);
|
|
||||||
}
|
|
||||||
|
|
||||||
solve(dt: number) {
|
|
||||||
dt = Math.min(dt, this.maxTickStep ?? Infinity);
|
|
||||||
for (const c of this.tasks) {
|
|
||||||
for (let i = 0; i < c.iterations; i++) {
|
|
||||||
if (!c.apply(dt)) break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export abstract class SolverTask {
|
|
||||||
iterations: number = 10;
|
|
||||||
solver?: PhysicsSolver;
|
|
||||||
priority: number = 0;
|
|
||||||
|
|
||||||
active = true;
|
|
||||||
|
|
||||||
abstract apply(dt: number): boolean;
|
|
||||||
remove() {
|
|
||||||
this.solver?.removeTask(this);
|
|
||||||
}
|
|
||||||
}
|
|
@@ -14,10 +14,6 @@ import {
|
|||||||
SBendLeft,
|
SBendLeft,
|
||||||
SBendRight,
|
SBendRight,
|
||||||
StraightTrack,
|
StraightTrack,
|
||||||
TightBankLeft,
|
|
||||||
TightBankRight,
|
|
||||||
WideBankLeft,
|
|
||||||
WideBankRight,
|
|
||||||
} from "../../track/shapes.ts";
|
} from "../../track/shapes.ts";
|
||||||
import { TrackSegment } from "../../track/system.ts";
|
import { TrackSegment } from "../../track/system.ts";
|
||||||
import { clamp } from "../../math/clamp.ts";
|
import { clamp } from "../../math/clamp.ts";
|
||||||
@@ -44,6 +40,18 @@ export class EditTrackState extends State<States> {
|
|||||||
const track = getContextItem<TrackSystem>("track");
|
const track = getContextItem<TrackSystem>("track");
|
||||||
const doodler = getContextItem<Doodler>("doodler");
|
const doodler = getContextItem<Doodler>("doodler");
|
||||||
|
|
||||||
|
// For moving a segment, i.e. the currently active one
|
||||||
|
// const segment = track.lastSegment;
|
||||||
|
// if (segment) {
|
||||||
|
// const firstPoint = segment.points[0].copy();
|
||||||
|
// const { x, y } = inputManager.getMouseLocation();
|
||||||
|
// segment.points.forEach((p, i) => {
|
||||||
|
// const relativePoint = Vector.sub(p, firstPoint);
|
||||||
|
// p.set(x, y);
|
||||||
|
// p.add(relativePoint);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
if (this.selectedSegment) {
|
if (this.selectedSegment) {
|
||||||
const segment = this.selectedSegment;
|
const segment = this.selectedSegment;
|
||||||
const firstPoint = segment.points[0].copy();
|
const firstPoint = segment.points[0].copy();
|
||||||
@@ -53,7 +61,6 @@ export class EditTrackState extends State<States> {
|
|||||||
p.set(mousePos);
|
p.set(mousePos);
|
||||||
p.add(relativePoint);
|
p.add(relativePoint);
|
||||||
});
|
});
|
||||||
segment.update();
|
|
||||||
|
|
||||||
const ends = track.findEnds();
|
const ends = track.findEnds();
|
||||||
setContextItem("showEnds", true);
|
setContextItem("showEnds", true);
|
||||||
@@ -102,21 +109,18 @@ export class EditTrackState extends State<States> {
|
|||||||
this.ghostRotated = false;
|
this.ghostRotated = false;
|
||||||
}
|
}
|
||||||
switch (this.closestEnd.frontOrBack) {
|
switch (this.closestEnd.frontOrBack) {
|
||||||
case "front": {
|
case "front":
|
||||||
this.ghostSegment.setPositionByPoint(
|
this.ghostSegment.setPositionByPoint(
|
||||||
this.closestEnd.pos,
|
this.closestEnd.pos,
|
||||||
this.ghostSegment.points[0],
|
this.ghostSegment.points[0],
|
||||||
);
|
);
|
||||||
// this.ghostSegment.points[0] = this.closestEnd.pos;
|
// this.ghostSegment.points[0] = this.closestEnd.pos;
|
||||||
const ghostEndTangent = this.ghostSegment.tangent(0);
|
|
||||||
|
|
||||||
!this.ghostRotated && this.ghostSegment.rotateAboutPoint(
|
!this.ghostRotated && this.ghostSegment.rotateAboutPoint(
|
||||||
this.closestEnd.tangent.heading() - ghostEndTangent.heading(),
|
this.closestEnd.tangent.heading(),
|
||||||
this.ghostSegment.points[0],
|
this.ghostSegment.points[0],
|
||||||
);
|
);
|
||||||
this.ghostRotated = true;
|
this.ghostRotated = true;
|
||||||
break;
|
break;
|
||||||
}
|
|
||||||
case "back": {
|
case "back": {
|
||||||
this.ghostSegment.setPositionByPoint(
|
this.ghostSegment.setPositionByPoint(
|
||||||
this.closestEnd.pos,
|
this.closestEnd.pos,
|
||||||
@@ -132,8 +136,6 @@ export class EditTrackState extends State<States> {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.ghostSegment.update();
|
|
||||||
|
|
||||||
// } else if (closestEnd) {
|
// } else if (closestEnd) {
|
||||||
// this.closestEnd = closestEnd;
|
// this.closestEnd = closestEnd;
|
||||||
} else if (!this.closestEnd || !closestEnd) {
|
} else if (!this.closestEnd || !closestEnd) {
|
||||||
@@ -247,7 +249,6 @@ export class EditTrackState extends State<States> {
|
|||||||
|
|
||||||
if (translation.x !== 0 || translation.y !== 0) {
|
if (translation.x !== 0 || translation.y !== 0) {
|
||||||
track.translate(translation);
|
track.translate(translation);
|
||||||
track.recalculateAll();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO
|
// TODO
|
||||||
@@ -285,10 +286,6 @@ export class EditTrackState extends State<States> {
|
|||||||
new SBendRight(),
|
new SBendRight(),
|
||||||
new BankLeft(),
|
new BankLeft(),
|
||||||
new BankRight(),
|
new BankRight(),
|
||||||
new WideBankLeft(),
|
|
||||||
new WideBankRight(),
|
|
||||||
new TightBankLeft(),
|
|
||||||
new TightBankRight(),
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const inputManager = getContextItem<InputManager>("inputManager");
|
const inputManager = getContextItem<InputManager>("inputManager");
|
||||||
@@ -309,6 +306,14 @@ export class EditTrackState extends State<States> {
|
|||||||
state.transitionTo(States.RUNNING);
|
state.transitionTo(States.RUNNING);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
inputManager.onKey(" ", () => {
|
||||||
|
if (this.selectedSegment) {
|
||||||
|
this.selectedSegment = undefined;
|
||||||
|
} else {
|
||||||
|
this.selectedSegment = new StraightTrack();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
inputManager.onMouse("left", () => {
|
inputManager.onMouse("left", () => {
|
||||||
const track = getContextItem<TrackSystem>("track");
|
const track = getContextItem<TrackSystem>("track");
|
||||||
if (this.ghostSegment && this.closestEnd) {
|
if (this.ghostSegment && this.closestEnd) {
|
||||||
@@ -378,18 +383,6 @@ export class EditTrackState extends State<States> {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
inputManager.onKey("r", () => {
|
|
||||||
if (!this.selectedSegment) return;
|
|
||||||
const segment = this.selectedSegment;
|
|
||||||
let angle = Math.PI / 12;
|
|
||||||
segment.rotate(angle);
|
|
||||||
});
|
|
||||||
inputManager.onKey("R", () => {
|
|
||||||
if (!this.selectedSegment) return;
|
|
||||||
const segment = this.selectedSegment;
|
|
||||||
let angle = -Math.PI / 12;
|
|
||||||
segment.rotate(angle);
|
|
||||||
});
|
|
||||||
// TODO
|
// TODO
|
||||||
// Cache trains and save
|
// Cache trains and save
|
||||||
|
|
||||||
@@ -411,9 +404,6 @@ export class EditTrackState extends State<States> {
|
|||||||
const inputManager = getContextItem<InputManager>("inputManager");
|
const inputManager = getContextItem<InputManager>("inputManager");
|
||||||
inputManager.offKey("e");
|
inputManager.offKey("e");
|
||||||
inputManager.offKey("w");
|
inputManager.offKey("w");
|
||||||
inputManager.offKey("z");
|
|
||||||
inputManager.offKey("r");
|
|
||||||
inputManager.offKey("R");
|
|
||||||
inputManager.offKey("Escape");
|
inputManager.offKey("Escape");
|
||||||
inputManager.offMouse("left");
|
inputManager.offMouse("left");
|
||||||
if (this.heldEvents.size > 0) {
|
if (this.heldEvents.size > 0) {
|
||||||
|
@@ -34,16 +34,12 @@ export class LoadState extends State<States> {
|
|||||||
|
|
||||||
bootstrapInputs();
|
bootstrapInputs();
|
||||||
|
|
||||||
// This should be driven by a manifest
|
resources.set("engine-sprites", new Image());
|
||||||
resources.set("snr:sprite/engine", new Image());
|
resources.get<HTMLImageElement>("engine-sprites")!.src =
|
||||||
resources.set("snr:sprite/LargeLady", new Image());
|
"/sprites/EngineSprites.png";
|
||||||
// resources.get<HTMLImageElement>("snr:sprite/engine")!.src =
|
|
||||||
// "/sprites/EngineSprites.png";
|
|
||||||
|
|
||||||
resources.set("snr:audio/ding", new Audio());
|
|
||||||
resources.ready().then(() => {
|
resources.ready().then(() => {
|
||||||
this.stateMachine.transitionTo(States.RUNNING);
|
this.stateMachine.transitionTo(States.RUNNING);
|
||||||
}).catch((e) => console.error(e));
|
});
|
||||||
|
|
||||||
const doodler = getContextItem<Doodler>("doodler");
|
const doodler = getContextItem<Doodler>("doodler");
|
||||||
// this.layers.push(doodler.createLayer((_, __, dTime) => {
|
// this.layers.push(doodler.createLayer((_, __, dTime) => {
|
||||||
|
@@ -1,16 +1,13 @@
|
|||||||
import { Doodler, Point, Vector, ZoomableDoodler } from "@bearmetal/doodler";
|
import { Doodler } from "@bearmetal/doodler";
|
||||||
import { getContext, getContextItem } from "../../lib/context.ts";
|
import { getContext, getContextItem } from "../../lib/context.ts";
|
||||||
import { InputManager } from "../../lib/input.ts";
|
import { InputManager } from "../../lib/input.ts";
|
||||||
import { TrackSystem } from "../../track/system.ts";
|
import { TrackSystem } from "../../track/system.ts";
|
||||||
import { Tender } from "../../train/cars.ts";
|
import { Tender } from "../../train/cars.ts";
|
||||||
import { RedEngine } from "../../train/engines.ts";
|
import { RedEngine } from "../../train/engines.ts";
|
||||||
// import { Train } from "../../train/train.ts";
|
import { DotFollower } from "../../train/newTrain.ts";
|
||||||
import { Train } from "../../train/newTrain/Train.ts";
|
import { Train } from "../../train/train.ts";
|
||||||
import { Bogie, Driver } from "../../train/newTrain/Bogie.ts";
|
|
||||||
import { TrainCar } from "../../train/newTrain/TrainCar.ts";
|
|
||||||
import { State } from "../machine.ts";
|
import { State } from "../machine.ts";
|
||||||
import { States } from "./index.ts";
|
import { States } from "./index.ts";
|
||||||
import { LargeLady, LargeLadyTender } from "../../train/LargeLady.ts";
|
|
||||||
|
|
||||||
export class RunningState extends State<States> {
|
export class RunningState extends State<States> {
|
||||||
override name: States = States.RUNNING;
|
override name: States = States.RUNNING;
|
||||||
@@ -21,20 +18,8 @@ export class RunningState extends State<States> {
|
|||||||
|
|
||||||
layers: number[] = [];
|
layers: number[] = [];
|
||||||
|
|
||||||
activeTrain: Train | undefined;
|
|
||||||
|
|
||||||
override update(dt: number): void {
|
override update(dt: number): void {
|
||||||
const ctx = getContext() as { trains: Train[]; track: TrackSystem };
|
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 };
|
// const ctx = getContext() as { trains: DotFollower[]; track: TrackSystem };
|
||||||
// TODO
|
// TODO
|
||||||
// Update trains
|
// Update trains
|
||||||
@@ -42,7 +27,7 @@ export class RunningState extends State<States> {
|
|||||||
// Handle input
|
// Handle input
|
||||||
// Monitor world events
|
// Monitor world events
|
||||||
for (const train of ctx.trains) {
|
for (const train of ctx.trains) {
|
||||||
train.update(dt);
|
train.move(dt);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
override start(): void {
|
override start(): void {
|
||||||
@@ -73,44 +58,25 @@ export class RunningState extends State<States> {
|
|||||||
// const path = track.path;
|
// const path = track.path;
|
||||||
// const follower = new DotFollower(path, path.points[0].copy());
|
// const follower = new DotFollower(path, path.points[0].copy());
|
||||||
// ctx.trains.push(follower);
|
// ctx.trains.push(follower);
|
||||||
// const train = new Train(track.path, [
|
const train = new Train(track.path, [new RedEngine(), new Tender()]);
|
||||||
// new LargeLady(),
|
|
||||||
// new LargeLadyTender(),
|
|
||||||
// ]);
|
|
||||||
const bogies = [new Bogie(20, 20, 1), new Driver(20, 20, 1)];
|
|
||||||
const train = new Train(track, [
|
|
||||||
new TrainCar(
|
|
||||||
bogies,
|
|
||||||
),
|
|
||||||
]);
|
|
||||||
track.generatePath();
|
|
||||||
const firstPoint = track.path.points[0].copy();
|
|
||||||
let prevOffset = 0;
|
|
||||||
for (let i = 0; i < bogies.length; i++) {
|
|
||||||
const b = bogies[i];
|
|
||||||
b.position = firstPoint.add(b.leadingOffset + prevOffset, 0);
|
|
||||||
b.prevPos = b.position.copy();
|
|
||||||
prevOffset += b.trailingOffset;
|
|
||||||
}
|
|
||||||
ctx.trains.push(train);
|
ctx.trains.push(train);
|
||||||
});
|
});
|
||||||
|
// const trainCount = 2000;
|
||||||
|
// for (let i = 0; i < trainCount; i++) {
|
||||||
|
// const train = new Train(track.path, [new RedEngine(), new Tender()]);
|
||||||
|
// ctx.trains.push(train);
|
||||||
|
// }
|
||||||
|
|
||||||
inputManager.onKey("ArrowUp", () => {
|
inputManager.onKey("ArrowUp", () => {
|
||||||
const trains = getContextItem<Train[]>("trains");
|
const trains = getContextItem<Train[]>("trains");
|
||||||
for (const train of trains) {
|
for (const train of trains) {
|
||||||
train.bogies.filter((b) => b instanceof Driver).forEach((b) => {
|
train.speed += 1;
|
||||||
b.drivingForce += 10;
|
|
||||||
if (b.dir.mag() < 0.1) b.updateDirection(new Vector(1, 0));
|
|
||||||
b.velocity = new Vector(10, 0);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
inputManager.onKey("ArrowDown", () => {
|
inputManager.onKey("ArrowDown", () => {
|
||||||
const trains = getContextItem<Train[]>("trains");
|
const trains = getContextItem<Train[]>("trains");
|
||||||
for (const train of trains) {
|
for (const train of trains) {
|
||||||
train.bogies.filter((b) => b instanceof Driver).forEach((b) => {
|
train.speed -= 1;
|
||||||
b.drivingForce -= 10;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@@ -1,32 +0,0 @@
|
|||||||
/// <reference no-default-lib="true" />
|
|
||||||
/// <reference lib="esnext" />
|
|
||||||
/// <reference lib="dom" />
|
|
||||||
/// <reference lib="dom.iterable" />
|
|
||||||
/// <reference lib="dom.asynciterable" />
|
|
||||||
/// <reference lib="deno.ns" />
|
|
||||||
|
|
||||||
import { averageAngles, lerpAngle } from "../math/lerp.ts";
|
|
||||||
import { testPerformance } from "./bench.ts";
|
|
||||||
|
|
||||||
Deno.test("angle math", () => {
|
|
||||||
console.log("Average angles");
|
|
||||||
testPerformance(
|
|
||||||
() => {
|
|
||||||
const a = Math.random() * Math.PI * 2;
|
|
||||||
const b = Math.random() * Math.PI * 2;
|
|
||||||
const avg = averageAngles(a, b);
|
|
||||||
},
|
|
||||||
10000,
|
|
||||||
60,
|
|
||||||
);
|
|
||||||
console.log("Lerp angles");
|
|
||||||
testPerformance(
|
|
||||||
() => {
|
|
||||||
const a = Math.random() * Math.PI * 2;
|
|
||||||
const b = Math.random() * Math.PI * 2;
|
|
||||||
const avg = lerpAngle(a, b, .5);
|
|
||||||
},
|
|
||||||
10000,
|
|
||||||
60,
|
|
||||||
);
|
|
||||||
});
|
|
@@ -18,9 +18,9 @@ export class SBendLeft extends TrackSegment {
|
|||||||
start = start || new Vector(100, 100);
|
start = start || new Vector(100, 100);
|
||||||
super([
|
super([
|
||||||
start,
|
start,
|
||||||
start.copy().add(80, 0),
|
start.copy().add(60, 0),
|
||||||
start.copy().add(120, -25),
|
start.copy().add(90, -25),
|
||||||
start.copy().add(200, -25),
|
start.copy().add(150, -25),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -29,9 +29,9 @@ export class SBendRight extends TrackSegment {
|
|||||||
start = start || new Vector(100, 100);
|
start = start || new Vector(100, 100);
|
||||||
super([
|
super([
|
||||||
start,
|
start,
|
||||||
start.copy().add(80, 0),
|
start.copy().add(60, 0),
|
||||||
start.copy().add(120, 25),
|
start.copy().add(90, 25),
|
||||||
start.copy().add(200, 25),
|
start.copy().add(150, 25),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -44,7 +44,7 @@ export class BankLeft extends TrackSegment {
|
|||||||
const p2 = start.copy();
|
const p2 = start.copy();
|
||||||
const p3 = start.copy();
|
const p3 = start.copy();
|
||||||
const p4 = start.copy();
|
const p4 = start.copy();
|
||||||
const scale = 66;
|
const scale = 33;
|
||||||
|
|
||||||
p2.add(new Vector(1, 0).mult(scale));
|
p2.add(new Vector(1, 0).mult(scale));
|
||||||
p3.set(p2);
|
p3.set(p2);
|
||||||
@@ -62,110 +62,6 @@ export class BankLeft extends TrackSegment {
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class WideBankLeft extends TrackSegment {
|
|
||||||
constructor(start?: Vector) {
|
|
||||||
start = start || new Vector(100, 100);
|
|
||||||
|
|
||||||
const p1 = start.copy();
|
|
||||||
const p2 = start.copy();
|
|
||||||
const p3 = start.copy();
|
|
||||||
const p4 = start.copy();
|
|
||||||
const scale = 70.4;
|
|
||||||
|
|
||||||
p2.add(new Vector(1, 0).mult(scale));
|
|
||||||
p3.set(p2);
|
|
||||||
const dirToP3 = Vector.fromAngle(-Math.PI / 12).mult(scale);
|
|
||||||
p3.add(dirToP3);
|
|
||||||
p4.set(p3);
|
|
||||||
const dirToP4 = Vector.fromAngle(-Math.PI / 6).mult(scale);
|
|
||||||
p4.add(dirToP4);
|
|
||||||
|
|
||||||
super([
|
|
||||||
p1,
|
|
||||||
p2,
|
|
||||||
p3,
|
|
||||||
p4,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export class TightBankLeft extends TrackSegment {
|
|
||||||
constructor(start?: Vector) {
|
|
||||||
start = start || new Vector(100, 100);
|
|
||||||
|
|
||||||
const p1 = start.copy();
|
|
||||||
const p2 = start.copy();
|
|
||||||
const p3 = start.copy();
|
|
||||||
const p4 = start.copy();
|
|
||||||
const scale = 61.57;
|
|
||||||
|
|
||||||
p2.add(new Vector(1, 0).mult(scale));
|
|
||||||
p3.set(p2);
|
|
||||||
const dirToP3 = Vector.fromAngle(-Math.PI / 12).mult(scale);
|
|
||||||
p3.add(dirToP3);
|
|
||||||
p4.set(p3);
|
|
||||||
const dirToP4 = Vector.fromAngle(-Math.PI / 6).mult(scale);
|
|
||||||
p4.add(dirToP4);
|
|
||||||
|
|
||||||
super([
|
|
||||||
p1,
|
|
||||||
p2,
|
|
||||||
p3,
|
|
||||||
p4,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export class TightBankRight extends TrackSegment {
|
|
||||||
constructor(start?: Vector) {
|
|
||||||
start = start || new Vector(100, 100);
|
|
||||||
|
|
||||||
const p1 = start.copy();
|
|
||||||
const p2 = start.copy();
|
|
||||||
const p3 = start.copy();
|
|
||||||
const p4 = start.copy();
|
|
||||||
const scale = 61.57;
|
|
||||||
|
|
||||||
p2.add(new Vector(1, 0).mult(scale));
|
|
||||||
p3.set(p2);
|
|
||||||
const dirToP3 = Vector.fromAngle(Math.PI / 12).mult(scale);
|
|
||||||
p3.add(dirToP3);
|
|
||||||
p4.set(p3);
|
|
||||||
const dirToP4 = Vector.fromAngle(Math.PI / 6).mult(scale);
|
|
||||||
p4.add(dirToP4);
|
|
||||||
|
|
||||||
super([
|
|
||||||
p1,
|
|
||||||
p2,
|
|
||||||
p3,
|
|
||||||
p4,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export class WideBankRight extends TrackSegment {
|
|
||||||
constructor(start?: Vector) {
|
|
||||||
start = start || new Vector(100, 100);
|
|
||||||
|
|
||||||
const p1 = start.copy();
|
|
||||||
const p2 = start.copy();
|
|
||||||
const p3 = start.copy();
|
|
||||||
const p4 = start.copy();
|
|
||||||
const scale = 70.4;
|
|
||||||
|
|
||||||
p2.add(new Vector(1, 0).mult(scale));
|
|
||||||
p3.set(p2);
|
|
||||||
const dirToP3 = Vector.fromAngle(Math.PI / 12).mult(scale);
|
|
||||||
p3.add(dirToP3);
|
|
||||||
p4.set(p3);
|
|
||||||
const dirToP4 = Vector.fromAngle(Math.PI / 6).mult(scale);
|
|
||||||
p4.add(dirToP4);
|
|
||||||
|
|
||||||
super([
|
|
||||||
p1,
|
|
||||||
p2,
|
|
||||||
p3,
|
|
||||||
p4,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export class BankRight extends TrackSegment {
|
export class BankRight extends TrackSegment {
|
||||||
constructor(start?: Vector) {
|
constructor(start?: Vector) {
|
||||||
start = start || new Vector(100, 100);
|
start = start || new Vector(100, 100);
|
||||||
@@ -174,7 +70,7 @@ export class BankRight extends TrackSegment {
|
|||||||
const p2 = start.copy();
|
const p2 = start.copy();
|
||||||
const p3 = start.copy();
|
const p3 = start.copy();
|
||||||
const p4 = start.copy();
|
const p4 = start.copy();
|
||||||
const scale = 66;
|
const scale = 33;
|
||||||
|
|
||||||
p2.add(new Vector(1, 0).mult(scale));
|
p2.add(new Vector(1, 0).mult(scale));
|
||||||
p3.set(p2);
|
p3.set(p2);
|
||||||
|
@@ -2,76 +2,47 @@ import { Doodler, Point, Vector } from "@bearmetal/doodler";
|
|||||||
import { ComplexPath, PathSegment } from "../math/path.ts";
|
import { ComplexPath, PathSegment } from "../math/path.ts";
|
||||||
import { getContextItem, setDefaultContext } from "../lib/context.ts";
|
import { getContextItem, setDefaultContext } from "../lib/context.ts";
|
||||||
import { clamp } from "../math/clamp.ts";
|
import { clamp } from "../math/clamp.ts";
|
||||||
import { Debuggable } from "../lib/debuggable.ts";
|
|
||||||
import { SpatialHashGrid } from "../physics/SpatialGrid.ts";
|
|
||||||
|
|
||||||
export class TrackSystem extends Debuggable {
|
export class TrackSystem {
|
||||||
private _segments: Map<string, TrackSegment> = new Map();
|
private segments: Map<string, TrackSegment> = new Map();
|
||||||
private doodler: Doodler;
|
private doodler: Doodler;
|
||||||
public grid: SpatialHashGrid = new SpatialHashGrid(10);
|
|
||||||
|
|
||||||
constructor(segments: TrackSegment[]) {
|
constructor(segments: TrackSegment[]) {
|
||||||
super("track");
|
|
||||||
this.doodler = getContextItem<Doodler>("doodler");
|
this.doodler = getContextItem<Doodler>("doodler");
|
||||||
for (const segment of segments) {
|
for (const segment of segments) {
|
||||||
this._segments.set(segment.id, segment);
|
this.segments.set(segment.id, segment);
|
||||||
let [prev] = segment.evenPoints[0];
|
|
||||||
for (const [p] of segment.evenPoints.slice(1)) {
|
|
||||||
const seg: GridItem = [prev, p, new Set([segment.id])];
|
|
||||||
segment.lineSegments ??= [];
|
|
||||||
segment.lineSegments.push(seg);
|
|
||||||
this.grid.insert(seg);
|
|
||||||
prev = p;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getSegment(id: string) {
|
|
||||||
return this._segments.get(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
get firstSegment() {
|
get firstSegment() {
|
||||||
return this._segments.values().next().value;
|
return this.segments.values().next().value;
|
||||||
}
|
}
|
||||||
|
|
||||||
get lastSegment() {
|
get lastSegment() {
|
||||||
return this._segments.values().toArray().pop();
|
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) {
|
optimize(percent: number) {
|
||||||
console.log("Optimizing track", percent * 100 / 4);
|
console.log("Optimizing track", percent * 100 / 4);
|
||||||
for (const segment of this._segments.values()) {
|
for (const segment of this.segments.values()) {
|
||||||
segment.recalculateRailPoints(Math.round(percent * 100 / 4));
|
segment.recalculateRailPoints(Math.round(percent * 100 / 4));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
recalculateAll() {
|
recalculateAll() {
|
||||||
for (const segment of this._segments.values()) {
|
for (const segment of this.segments.values()) {
|
||||||
segment.update();
|
segment.recalculateRailPoints();
|
||||||
segment.length = segment.calculateApproxLength();
|
segment.length = segment.calculateApproxLength();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
registerSegment(segment: TrackSegment) {
|
registerSegment(segment: TrackSegment) {
|
||||||
segment.setTrack(this);
|
segment.setTrack(this);
|
||||||
this._segments.set(segment.id, segment);
|
this.segments.set(segment.id, segment);
|
||||||
}
|
}
|
||||||
unregisterSegment(segment: TrackSegment) {
|
unregisterSegment(segment: TrackSegment) {
|
||||||
this._segments.delete(segment.id);
|
this.segments.delete(segment.id);
|
||||||
for (const s of this._segments.values()) {
|
for (const s of this.segments.values()) {
|
||||||
s.backNeighbours = s.backNeighbours.filter((n) => n !== segment);
|
s.backNeighbours = s.backNeighbours.filter((n) => n !== segment);
|
||||||
s.frontNeighbours = s.frontNeighbours.filter((n) => n !== segment);
|
s.frontNeighbours = s.frontNeighbours.filter((n) => n !== segment);
|
||||||
}
|
}
|
||||||
@@ -81,31 +52,40 @@ export class TrackSystem extends Debuggable {
|
|||||||
}
|
}
|
||||||
|
|
||||||
draw(showControls = false) {
|
draw(showControls = false) {
|
||||||
for (const [i, segment] of this._segments.entries()) {
|
for (const [i, segment] of this.segments.entries()) {
|
||||||
segment.draw(showControls);
|
segment.draw(showControls);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
override debugDraw(): void {
|
// try {
|
||||||
const debug = getContextItem("debug");
|
// if (getContextItem<boolean>("showEnds")) {
|
||||||
if (debug.track) {
|
// const ends = this.findEnds();
|
||||||
for (const segment of this._segments.values()) {
|
// for (const end of ends) {
|
||||||
segment.drawAABB();
|
// this.doodler.fillCircle(end.pos, 2, {
|
||||||
}
|
// color: "red",
|
||||||
}
|
// // weight: 3,
|
||||||
this.grid.getAllSegments().forEach((segment) => {
|
// });
|
||||||
this.doodler.drawLine(segment.slice(0, 2) as Vector[], {
|
// if (getContextItem<boolean>("debug")) {
|
||||||
color: "red",
|
// this.doodler.line(
|
||||||
weight: 2,
|
// end.pos,
|
||||||
});
|
// end.pos.copy().add(end.tangent.copy().mult(20)),
|
||||||
});
|
// {
|
||||||
|
// color: "blue",
|
||||||
|
// // weight: 3,
|
||||||
|
// },
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// } catch {
|
||||||
|
// setDefaultContext({ showEnds: false });
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
ends: Map<TrackSegment, [End, End]> = new Map();
|
ends: Map<TrackSegment, [End, End]> = new Map();
|
||||||
endArray: End[] = [];
|
endArray: End[] = [];
|
||||||
|
|
||||||
findEnds() {
|
findEnds() {
|
||||||
for (const segment of this._segments.values()) {
|
for (const segment of this.segments.values()) {
|
||||||
if (this.ends.has(segment)) continue;
|
if (this.ends.has(segment)) continue;
|
||||||
const ends: [End, End] = [
|
const ends: [End, End] = [
|
||||||
{
|
{
|
||||||
@@ -129,14 +109,14 @@ export class TrackSystem extends Debuggable {
|
|||||||
|
|
||||||
serialize() {
|
serialize() {
|
||||||
return JSON.stringify(
|
return JSON.stringify(
|
||||||
this._segments.values().map((s) => s.serialize()).toArray(),
|
this.segments.values().map((s) => s.serialize()).toArray(),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
copy() {
|
copy() {
|
||||||
const track = new TrackSystem([]);
|
const track = new TrackSystem([]);
|
||||||
for (const segment of this._segments.values()) {
|
for (const segment of this.segments.values()) {
|
||||||
track._segments.set(segment.id, segment.copy());
|
track.segments.set(segment.id, segment.copy());
|
||||||
}
|
}
|
||||||
return track;
|
return track;
|
||||||
}
|
}
|
||||||
@@ -147,19 +127,19 @@ export class TrackSystem extends Debuggable {
|
|||||||
const neighborMap = new Map<string, [string[], string[]]>();
|
const neighborMap = new Map<string, [string[], string[]]>();
|
||||||
|
|
||||||
for (const segment of data) {
|
for (const segment of data) {
|
||||||
track._segments.set(segment.id, TrackSegment.deserialize(segment));
|
track.segments.set(segment.id, TrackSegment.deserialize(segment));
|
||||||
neighborMap.set(segment.id, [segment.fNeighbors, segment.bNeighbors]);
|
neighborMap.set(segment.id, [segment.fNeighbors, segment.bNeighbors]);
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const segment of track._segments.values()) {
|
for (const segment of track.segments.values()) {
|
||||||
segment.setTrack(track);
|
segment.setTrack(track);
|
||||||
const neighbors = neighborMap.get(segment.id);
|
const neighbors = neighborMap.get(segment.id);
|
||||||
if (neighbors) {
|
if (neighbors) {
|
||||||
segment.backNeighbours = neighbors[1].map((id) =>
|
segment.backNeighbours = neighbors[1].map((id) =>
|
||||||
track._segments.get(id)
|
track.segments.get(id)
|
||||||
).filter((s) => s) as TrackSegment[];
|
).filter((s) => s) as TrackSegment[];
|
||||||
segment.frontNeighbours = neighbors[0].map((id) =>
|
segment.frontNeighbours = neighbors[0].map((id) =>
|
||||||
track._segments.get(id)
|
track.segments.get(id)
|
||||||
).filter((s) => s) as TrackSegment[];
|
).filter((s) => s) as TrackSegment[];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -168,7 +148,7 @@ export class TrackSystem extends Debuggable {
|
|||||||
}
|
}
|
||||||
|
|
||||||
translate(v: Vector) {
|
translate(v: Vector) {
|
||||||
for (const segment of this._segments.values()) {
|
for (const segment of this.segments.values()) {
|
||||||
segment.translate(v);
|
segment.translate(v);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -184,7 +164,7 @@ export class TrackSystem extends Debuggable {
|
|||||||
|
|
||||||
generatePath() {
|
generatePath() {
|
||||||
if (!this.firstSegment) throw new Error("No first segment");
|
if (!this.firstSegment) throw new Error("No first segment");
|
||||||
const flags = { looping: false };
|
const flags = { looping: true };
|
||||||
const rightOnlyPath = [
|
const rightOnlyPath = [
|
||||||
this.firstSegment.copy(),
|
this.firstSegment.copy(),
|
||||||
...this.findRightPath(
|
...this.findRightPath(
|
||||||
@@ -199,11 +179,6 @@ export class TrackSystem extends Debuggable {
|
|||||||
const prev = arr[i - 1];
|
const prev = arr[i - 1];
|
||||||
s.points[0] = prev.points[3];
|
s.points[0] = prev.points[3];
|
||||||
s.prev = prev;
|
s.prev = prev;
|
||||||
let [prevEvenPoint] = prev.evenPoints[0];
|
|
||||||
for (const [p] of s.evenPoints.slice(1)) {
|
|
||||||
this.grid.insert([prevEvenPoint, p, new Set([s.id])]);
|
|
||||||
prevEvenPoint = p;
|
|
||||||
}
|
|
||||||
prev.next = s;
|
prev.next = s;
|
||||||
});
|
});
|
||||||
if (flags.looping) {
|
if (flags.looping) {
|
||||||
@@ -301,83 +276,26 @@ export class TrackSegment extends PathSegment {
|
|||||||
doodler: Doodler;
|
doodler: Doodler;
|
||||||
normalPoints: Vector[] = [];
|
normalPoints: Vector[] = [];
|
||||||
antiNormalPoints: Vector[] = [];
|
antiNormalPoints: Vector[] = [];
|
||||||
evenPoints: [Vector, number][] = [];
|
|
||||||
lineSegments?: GridItem[];
|
|
||||||
|
|
||||||
aabb!: AABB;
|
|
||||||
|
|
||||||
private trackGuage = 12;
|
|
||||||
|
|
||||||
constructor(p: VectorSet, id?: string) {
|
constructor(p: VectorSet, id?: string) {
|
||||||
super(p);
|
super(p);
|
||||||
this.doodler = getContextItem<Doodler>("doodler");
|
this.doodler = getContextItem<Doodler>("doodler");
|
||||||
this.id = id ?? crypto.randomUUID();
|
this.id = id ?? crypto.randomUUID();
|
||||||
this.update();
|
this.recalculateRailPoints();
|
||||||
}
|
}
|
||||||
|
|
||||||
getDistanceTo(pos: Vector) {
|
recalculateRailPoints(resolution = 100) {
|
||||||
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.normalPoints = [];
|
||||||
this.antiNormalPoints = [];
|
this.antiNormalPoints = [];
|
||||||
for (let i = 0; i <= resolution; i++) {
|
for (let i = 0; i <= resolution; i++) {
|
||||||
const t = i / resolution;
|
const t = i / resolution;
|
||||||
const normal = this.tangent(t).rotate(Math.PI / 2);
|
const normal = this.tangent(t).rotate(Math.PI / 2);
|
||||||
normal.setMag(this.trackGuage / 2);
|
normal.setMag(6);
|
||||||
const p = this.getPointAtT(t);
|
const p = this.getPointAtT(t);
|
||||||
this.normalPoints.push(p.copy().add(normal));
|
this.normalPoints.push(p.copy().add(normal));
|
||||||
this.antiNormalPoints.push(p.copy().add(normal.rotate(Math.PI)));
|
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) {
|
setTrack(t: TrackSystem) {
|
||||||
this.track = t;
|
this.track = t;
|
||||||
@@ -412,12 +330,12 @@ export class TrackSegment extends PathSegment {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// const spacing = Math.ceil(this.length / 10);
|
const spacing = Math.ceil(this.length / 10);
|
||||||
// const points = this.calculateEvenlySpacedPoints(this.length / spacing);
|
const points = this.calculateEvenlySpacedPoints(this.length / spacing);
|
||||||
for (let i = 0; i < this.evenPoints.length - 1; i++) {
|
for (let i = 0; i < points.length - 1; i++) {
|
||||||
// const t = i / ties;
|
// const t = i / ties;
|
||||||
// const p = this.getPointAtT(t);
|
// const p = this.getPointAtT(t);
|
||||||
const [p, t] = this.evenPoints[i];
|
const [p, t] = points[i];
|
||||||
// this.doodler.drawCircle(p, 2, {
|
// this.doodler.drawCircle(p, 2, {
|
||||||
// color: "red",
|
// color: "red",
|
||||||
// weight: 3,
|
// weight: 3,
|
||||||
@@ -463,15 +381,6 @@ export class TrackSegment extends PathSegment {
|
|||||||
// });
|
// });
|
||||||
}
|
}
|
||||||
|
|
||||||
drawAABB() {
|
|
||||||
this.doodler.drawRect(this.aabb.pos, this.aabb.width, this.aabb.height, {
|
|
||||||
color: "lime",
|
|
||||||
});
|
|
||||||
this.doodler.drawCircle(this.aabb.center, 2, {
|
|
||||||
color: "cyan",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
serialize(): SerializedTrackSegment {
|
serialize(): SerializedTrackSegment {
|
||||||
return {
|
return {
|
||||||
p: this.points.map((p) => p.array()),
|
p: this.points.map((p) => p.array()),
|
||||||
@@ -514,7 +423,6 @@ export class TrackSegment extends PathSegment {
|
|||||||
rotate(angle: number | Vector) {
|
rotate(angle: number | Vector) {
|
||||||
const [p1, p2, p3, p4] = this.points;
|
const [p1, p2, p3, p4] = this.points;
|
||||||
let newP2;
|
let newP2;
|
||||||
|
|
||||||
if (angle instanceof Vector) {
|
if (angle instanceof Vector) {
|
||||||
const tan = angle;
|
const tan = angle;
|
||||||
angle = tan.heading() - (this.lastHeading ?? 0);
|
angle = tan.heading() - (this.lastHeading ?? 0);
|
||||||
@@ -551,7 +459,7 @@ export class TrackSegment extends PathSegment {
|
|||||||
}
|
}
|
||||||
|
|
||||||
rotateAboutPoint(angle: number, point: Vector) {
|
rotateAboutPoint(angle: number, point: Vector) {
|
||||||
// if (!this.points.includes(point)) return;
|
if (!this.points.includes(point)) return;
|
||||||
point = point.copy();
|
point = point.copy();
|
||||||
this.points.forEach((p, i) => {
|
this.points.forEach((p, i) => {
|
||||||
const relativePoint = Vector.sub(p, point);
|
const relativePoint = Vector.sub(p, point);
|
||||||
@@ -572,25 +480,12 @@ export class TrackSegment extends PathSegment {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
interface PathPoint {
|
|
||||||
p: Vector;
|
|
||||||
segmentId: string;
|
|
||||||
tangent: Vector;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class Spline<T extends PathSegment = PathSegment> {
|
export class Spline<T extends PathSegment = PathSegment> {
|
||||||
segments: T[] = [];
|
segments: T[] = [];
|
||||||
ctx?: CanvasRenderingContext2D;
|
ctx?: CanvasRenderingContext2D;
|
||||||
|
|
||||||
evenPoints: PathPoint[];
|
evenPoints: Vector[];
|
||||||
_pointSpacing: number;
|
pointSpacing: number;
|
||||||
get pointSpacing() {
|
|
||||||
return this._pointSpacing;
|
|
||||||
}
|
|
||||||
set pointSpacing(value: number) {
|
|
||||||
this._pointSpacing = value;
|
|
||||||
this.evenPoints = this.calculateEvenlySpacedPoints(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
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)));
|
||||||
@@ -605,8 +500,8 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
if (this.segments.at(-1)?.next === this.segments[0]) {
|
if (this.segments.at(-1)?.next === this.segments[0]) {
|
||||||
this.looped = true;
|
this.looped = true;
|
||||||
}
|
}
|
||||||
this._pointSpacing = 1;
|
this.pointSpacing = 1;
|
||||||
this.evenPoints = this.calculateEvenlySpacedPoints(this._pointSpacing);
|
this.evenPoints = this.calculateEvenlySpacedPoints(1);
|
||||||
this.nodes = [];
|
this.nodes = [];
|
||||||
// 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 = {
|
||||||
@@ -639,17 +534,13 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
calculateEvenlySpacedPoints(spacing: number, resolution = 1): PathPoint[] {
|
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: PathPoint[] = [];
|
const points: Vector[] = [];
|
||||||
|
|
||||||
points.push({
|
points.push(this.segments[0].points[0]);
|
||||||
p: this.segments[0].points[0],
|
let prev = points[0];
|
||||||
segmentId: this.segments[0].id,
|
|
||||||
tangent: this.segments[0].tangent(0),
|
|
||||||
});
|
|
||||||
let prev = points[0].p;
|
|
||||||
let distSinceLastEvenPoint = 0;
|
let distSinceLastEvenPoint = 0;
|
||||||
for (const seg of this.segments) {
|
for (const seg of this.segments) {
|
||||||
let t = 0;
|
let t = 0;
|
||||||
@@ -667,35 +558,26 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
Vector.sub(point, prev).normalize().mult(overshoot),
|
Vector.sub(point, prev).normalize().mult(overshoot),
|
||||||
);
|
);
|
||||||
distSinceLastEvenPoint = overshoot;
|
distSinceLastEvenPoint = overshoot;
|
||||||
points.push({
|
points.push(evenPoint);
|
||||||
p: evenPoint,
|
|
||||||
segmentId: seg.id,
|
|
||||||
tangent: seg.tangent(t),
|
|
||||||
});
|
|
||||||
prev = evenPoint;
|
prev = evenPoint;
|
||||||
continue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
prev = point;
|
prev = point;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// this.evenPoints = points;
|
this.evenPoints = points;
|
||||||
|
|
||||||
return points;
|
return points;
|
||||||
}
|
}
|
||||||
|
|
||||||
followEvenPoints(t: number): PathPoint {
|
followEvenPoints(t: number) {
|
||||||
if (this.looped) {
|
if (this.looped) {
|
||||||
if (t < 0) t += this.evenPoints.length;
|
if (t < 0) t += this.evenPoints.length;
|
||||||
const i = Math.floor(t) % this.evenPoints.length;
|
const i = Math.floor(t) % this.evenPoints.length;
|
||||||
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 {
|
return Vector.lerp(a, b, t % 1);
|
||||||
p: Vector.lerp(a.p, b.p, t % 1),
|
|
||||||
segmentId: b.segmentId,
|
|
||||||
tangent: b.tangent,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
t = clamp(t, 0, this.evenPoints.length - 1);
|
t = clamp(t, 0, this.evenPoints.length - 1);
|
||||||
const i = clamp(Math.floor(t), 0, this.evenPoints.length - 1);
|
const i = clamp(Math.floor(t), 0, this.evenPoints.length - 1);
|
||||||
@@ -704,11 +586,7 @@ export class Spline<T extends PathSegment = PathSegment> {
|
|||||||
.evenPoints[
|
.evenPoints[
|
||||||
clamp((i + 1) % this.evenPoints.length, 0, this.evenPoints.length - 1)
|
clamp((i + 1) % this.evenPoints.length, 0, this.evenPoints.length - 1)
|
||||||
];
|
];
|
||||||
return {
|
return Vector.lerp(a, b, t % 1);
|
||||||
p: Vector.lerp(a.p, b.p, t % 1),
|
|
||||||
segmentId: b.segmentId,
|
|
||||||
tangent: b.tangent,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
calculateApproxLength() {
|
calculateApproxLength() {
|
||||||
|
@@ -1,194 +0,0 @@
|
|||||||
import { Doodler, Vector } from "@bearmetal/doodler";
|
|
||||||
import { Train, TrainCar } from "./train.ts";
|
|
||||||
import { getContextItem } from "../lib/context.ts";
|
|
||||||
import { ResourceManager } from "../lib/resources.ts";
|
|
||||||
import { debug } from "node:console";
|
|
||||||
import { averageAngles, lerpAngle } from "../math/lerp.ts";
|
|
||||||
|
|
||||||
export class LargeLady extends TrainCar {
|
|
||||||
scale = 1;
|
|
||||||
constructor() {
|
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
|
||||||
const img = resources.get<HTMLImageElement>("snr:sprite/LargeLady")!;
|
|
||||||
super(50, 10, img, 132, 23, {
|
|
||||||
at: new Vector(0, 0),
|
|
||||||
width: 132,
|
|
||||||
height: 23,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.bogies = [
|
|
||||||
{
|
|
||||||
pos: new Vector(0, 0),
|
|
||||||
angle: 0,
|
|
||||||
length: 35 * this.scale,
|
|
||||||
sprite: {
|
|
||||||
at: new Vector(0, 24),
|
|
||||||
width: 35,
|
|
||||||
height: 23,
|
|
||||||
offset: new Vector(-23, -11.5),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pos: new Vector(0, 0),
|
|
||||||
angle: 0,
|
|
||||||
length: 64 * this.scale,
|
|
||||||
// sprite: {
|
|
||||||
// at: new Vector(0, 23),
|
|
||||||
// width: 33,
|
|
||||||
// height: 19,
|
|
||||||
// offset: new Vector(-19, -9.5),
|
|
||||||
// },
|
|
||||||
sprite: {
|
|
||||||
at: new Vector(36, 24),
|
|
||||||
width: 60,
|
|
||||||
height: 23,
|
|
||||||
offset: new Vector(-35, -11.5),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pos: new Vector(0, 0),
|
|
||||||
angle: 0,
|
|
||||||
length: 35 * this.scale,
|
|
||||||
sprite: {
|
|
||||||
at: new Vector(36, 24),
|
|
||||||
width: 60,
|
|
||||||
height: 23,
|
|
||||||
offset: new Vector(-35, -11.5),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pos: new Vector(0, 0),
|
|
||||||
angle: 0,
|
|
||||||
length: 28,
|
|
||||||
sprite: {
|
|
||||||
at: new Vector(97, 24),
|
|
||||||
width: 22,
|
|
||||||
height: 23,
|
|
||||||
offset: new Vector(-11, -11.5),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
this.leading = 23;
|
|
||||||
}
|
|
||||||
|
|
||||||
drawAngle?: number;
|
|
||||||
|
|
||||||
override draw(): void {
|
|
||||||
const doodler = getContextItem<Doodler>("doodler");
|
|
||||||
for (const b of this.bogies) {
|
|
||||||
if (!b.sprite) continue;
|
|
||||||
doodler.drawRotated(b.pos, b.angle + (b.rotate ? 0 : Math.PI), () => {
|
|
||||||
doodler.drawSprite(
|
|
||||||
this.img,
|
|
||||||
b.sprite!.at,
|
|
||||||
b.sprite!.width,
|
|
||||||
b.sprite!.height,
|
|
||||||
b.pos.copy().add(b.sprite!.offset ?? new Vector(0, 0)),
|
|
||||||
b.sprite!.width,
|
|
||||||
b.sprite!.height,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const b = this.bogies[2];
|
|
||||||
const a = this.bogies[1];
|
|
||||||
// const origin = Vector.add(Vector.sub(a.pos, b.pos).div(2), b.pos);
|
|
||||||
// const angle = Vector.sub(b.pos, a.pos).heading();
|
|
||||||
const debug = getContextItem<Debug>("debug");
|
|
||||||
if (debug.bogies) return;
|
|
||||||
|
|
||||||
const difAngle = Vector.sub(a.pos, b.pos).heading();
|
|
||||||
if (this.drawAngle == undefined) this.drawAngle = b.angle + Math.PI;
|
|
||||||
const origin = b.pos.copy().add(new Vector(33, 0).rotate(difAngle));
|
|
||||||
const angle = b.angle;
|
|
||||||
const avgAngle = averageAngles(difAngle, angle) + Math.PI;
|
|
||||||
this.drawAngle = lerpAngle(this.drawAngle, avgAngle, .2);
|
|
||||||
|
|
||||||
doodler.drawRotated(origin, this.drawAngle, () => {
|
|
||||||
this.sprite
|
|
||||||
? doodler.drawSprite(
|
|
||||||
this.img,
|
|
||||||
this.sprite.at,
|
|
||||||
this.sprite.width,
|
|
||||||
this.sprite.height,
|
|
||||||
origin.copy().sub(
|
|
||||||
this.imgWidth * this.scale / 2,
|
|
||||||
this.imgHeight * this.scale / 2,
|
|
||||||
),
|
|
||||||
this.imgWidth * this.scale,
|
|
||||||
this.imgHeight * this.scale,
|
|
||||||
)
|
|
||||||
: doodler.drawImage(
|
|
||||||
this.img,
|
|
||||||
origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
// doodler.drawCircle(origin, 4, { color: "blue" });
|
|
||||||
|
|
||||||
doodler.deferDrawing(() => {
|
|
||||||
doodler.drawRotated(origin, this.drawAngle! + Math.PI, () => {
|
|
||||||
doodler.drawSprite(
|
|
||||||
this.img,
|
|
||||||
new Vector(133, 0),
|
|
||||||
28,
|
|
||||||
23,
|
|
||||||
origin.copy().sub(93, this.imgHeight / 2),
|
|
||||||
28,
|
|
||||||
23,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class LargeLadyTender extends TrainCar {
|
|
||||||
constructor() {
|
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
|
||||||
const sprite = resources.get("snr:sprite/LargeLady");
|
|
||||||
super(40, 39, sprite, 98, 23, {
|
|
||||||
at: new Vector(0, 48),
|
|
||||||
width: 98,
|
|
||||||
height: 23,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.leading = 19;
|
|
||||||
}
|
|
||||||
|
|
||||||
override draw(): void {
|
|
||||||
const doodler = getContextItem<Doodler>("doodler");
|
|
||||||
const b = this.bogies[0];
|
|
||||||
doodler.drawRotated(b.pos, b.angle, () => {
|
|
||||||
doodler.drawSprite(
|
|
||||||
this.img,
|
|
||||||
new Vector(97, 24),
|
|
||||||
22,
|
|
||||||
23,
|
|
||||||
b.pos.copy().sub(11, 11.5),
|
|
||||||
22,
|
|
||||||
23,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const angle = Vector.sub(this.bogies[1].pos, this.bogies[0].pos).heading();
|
|
||||||
const origin = this.bogies[1].pos.copy().add(
|
|
||||||
new Vector(-11, 0).rotate(angle),
|
|
||||||
);
|
|
||||||
doodler.drawRotated(origin, angle, () => {
|
|
||||||
this.sprite
|
|
||||||
? doodler.drawSprite(
|
|
||||||
this.img,
|
|
||||||
this.sprite.at,
|
|
||||||
this.sprite.width,
|
|
||||||
this.sprite.height,
|
|
||||||
origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
|
|
||||||
this.imgWidth,
|
|
||||||
this.imgHeight,
|
|
||||||
)
|
|
||||||
: doodler.drawImage(
|
|
||||||
this.img,
|
|
||||||
origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
@@ -6,85 +6,50 @@ import { getContextItem } from "../lib/context.ts";
|
|||||||
export class Tender extends TrainCar {
|
export class Tender extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(25, resources.get<HTMLImageElement>("engine-sprites")!, 40, 20, {
|
||||||
25,
|
at: new Vector(80, 0),
|
||||||
10,
|
width: 40,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
40,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(80, 0),
|
|
||||||
width: 40,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class Tank extends TrainCar {
|
export class Tank extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
|
||||||
50,
|
at: new Vector(80, 20),
|
||||||
10,
|
width: 70,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
70,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(80, 20),
|
|
||||||
width: 70,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class YellowDumpCar extends TrainCar {
|
export class YellowDumpCar extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
|
||||||
50,
|
at: new Vector(80, 40),
|
||||||
10,
|
width: 70,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
70,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(80, 40),
|
|
||||||
width: 70,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class GrayDumpCar extends TrainCar {
|
export class GrayDumpCar extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
|
||||||
50,
|
at: new Vector(80, 60),
|
||||||
10,
|
width: 70,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
70,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(80, 60),
|
|
||||||
width: 70,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class NullCar extends TrainCar {
|
export class NullCar extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
|
||||||
50,
|
at: new Vector(80, 80),
|
||||||
10,
|
width: 70,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
70,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(80, 80),
|
|
||||||
width: 70,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -6,85 +6,50 @@ import { ResourceManager } from "../lib/resources.ts";
|
|||||||
export class RedEngine extends TrainCar {
|
export class RedEngine extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||||
55,
|
at: new Vector(0, 60),
|
||||||
10,
|
width: 80,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
80,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(0, 60),
|
|
||||||
width: 80,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class PurpleEngine extends TrainCar {
|
export class PurpleEngine extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||||
55,
|
at: new Vector(0, 60),
|
||||||
10,
|
width: 80,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
80,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(0, 60),
|
|
||||||
width: 80,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class GreenEngine extends TrainCar {
|
export class GreenEngine extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||||
55,
|
at: new Vector(0, 40),
|
||||||
10,
|
width: 80,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
80,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(0, 40),
|
|
||||||
width: 80,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class GrayEngine extends TrainCar {
|
export class GrayEngine extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||||
55,
|
at: new Vector(0, 20),
|
||||||
10,
|
width: 80,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
80,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(0, 20),
|
|
||||||
width: 80,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export class BlueEngine extends TrainCar {
|
export class BlueEngine extends TrainCar {
|
||||||
constructor() {
|
constructor() {
|
||||||
const resources = getContextItem<ResourceManager>("resources");
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
super(
|
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||||
55,
|
at: new Vector(0, 0),
|
||||||
10,
|
width: 80,
|
||||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
height: 20,
|
||||||
80,
|
});
|
||||||
20,
|
|
||||||
{
|
|
||||||
at: new Vector(0, 0),
|
|
||||||
width: 80,
|
|
||||||
height: 20,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
147
src/train/newTrain.ts
Normal file
@@ -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;
|
||||||
|
}
|
@@ -1,75 +0,0 @@
|
|||||||
import { Vector } from "@bearmetal/doodler";
|
|
||||||
import { getContextItem } from "../../lib/context.ts";
|
|
||||||
import { Debuggable } from "../../lib/debuggable.ts";
|
|
||||||
|
|
||||||
export class Bogie extends Debuggable {
|
|
||||||
private pos: Vector = new Vector(0, 0);
|
|
||||||
private prevPos: Vector = this.pos.copy();
|
|
||||||
public dir: Vector = new Vector(0, 0);
|
|
||||||
public velocity: Vector = new Vector(0, 0);
|
|
||||||
private acceleration: Vector = new Vector(0, 0);
|
|
||||||
private damping: number = 0.999;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
public leadingOffset: number,
|
|
||||||
public trailingOffset: number,
|
|
||||||
public mass: number = 1,
|
|
||||||
) {
|
|
||||||
super("bogies");
|
|
||||||
}
|
|
||||||
|
|
||||||
get position() {
|
|
||||||
return this.pos;
|
|
||||||
}
|
|
||||||
set position(v: Vector) {
|
|
||||||
this.pos.set(v);
|
|
||||||
}
|
|
||||||
|
|
||||||
applyForce(force: Vector) {
|
|
||||||
this.acceleration.add(force.copy().div(this.mass));
|
|
||||||
}
|
|
||||||
|
|
||||||
update(dt: number) {
|
|
||||||
// Compute velocity from previous position
|
|
||||||
this.velocity = this.pos.copy().sub(this.prevPos);
|
|
||||||
|
|
||||||
// Apply friction to the velocity instead of velocity storage
|
|
||||||
this.velocity.mult(this.damping);
|
|
||||||
|
|
||||||
// Apply Verlet integration with forces
|
|
||||||
const temp = this.pos.copy();
|
|
||||||
this.pos.add(this.velocity.add(this.acceleration.copy().mult(dt * dt)));
|
|
||||||
this.prevPos = temp; // Store previous position
|
|
||||||
this.acceleration.set(0, 0); // Reset acceleration after update
|
|
||||||
}
|
|
||||||
|
|
||||||
draw() {}
|
|
||||||
debugDraw() {
|
|
||||||
const d = getContextItem("doodler");
|
|
||||||
d.deferDrawing(() => {
|
|
||||||
d.dot(this.pos, {
|
|
||||||
color: this instanceof Driver ? "red" : "white",
|
|
||||||
weight: 3,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class Driver extends Bogie {
|
|
||||||
public drivingForce: number = 0;
|
|
||||||
|
|
||||||
override update(dt: number): void {
|
|
||||||
const force = this.dir.copy();
|
|
||||||
force.setMag(this.drivingForce);
|
|
||||||
this.applyForce(force);
|
|
||||||
super.update(dt);
|
|
||||||
}
|
|
||||||
updateDirection(dir: Vector) {
|
|
||||||
if (this.dir.dot(dir) < -0.5) {
|
|
||||||
// If new dir is nearly opposite, blend gradually
|
|
||||||
this.dir = this.dir.mult(0.9).add(dir.mult(0.1)).normalize();
|
|
||||||
} else {
|
|
||||||
this.dir = dir;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@@ -1,70 +0,0 @@
|
|||||||
import { getContextItem } from "../../lib/context.ts";
|
|
||||||
import { TrackSystem } from "../../track/system.ts";
|
|
||||||
import { Debuggable } from "../../lib/debuggable.ts";
|
|
||||||
import { PhysicsSolver } from "../../physics/solver.ts";
|
|
||||||
import { MoveTask, TrackConstraint, TrainTask } from "./physics.ts";
|
|
||||||
import { TrainCar } from "./TrainCar.ts";
|
|
||||||
import { Bogie } from "./Bogie.ts";
|
|
||||||
|
|
||||||
export class Train extends Debuggable {
|
|
||||||
private _bogies: Bogie[];
|
|
||||||
get bogies() {
|
|
||||||
return this._bogies;
|
|
||||||
}
|
|
||||||
|
|
||||||
private solver: PhysicsSolver;
|
|
||||||
|
|
||||||
constructor(private track: TrackSystem, private cars: TrainCar[] = []) {
|
|
||||||
super("train");
|
|
||||||
this._bogies = this.recalculateBogies();
|
|
||||||
this.solver = new PhysicsSolver();
|
|
||||||
this._bogies.forEach((b) =>
|
|
||||||
this.solver.addTask(new TrackConstraint(b, this.track))
|
|
||||||
);
|
|
||||||
let prev: Bogie | null = null;
|
|
||||||
for (const car of this.cars) {
|
|
||||||
for (const b of car.bogies) {
|
|
||||||
if (prev) {
|
|
||||||
this.solver.addTask(
|
|
||||||
new TrainTask(prev, b, prev.trailingOffset + b.leadingOffset),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
prev = b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.solver.addTask(new MoveTask(this));
|
|
||||||
this.solver.maxTickStep = 1 / 30;
|
|
||||||
}
|
|
||||||
|
|
||||||
addCar(car: TrainCar, toFront = false) {
|
|
||||||
this.cars.push(car);
|
|
||||||
for (const b of toFront ? car.bogies.reverse() : car.bogies) {
|
|
||||||
this.solver.addTask(new TrackConstraint(b, this.track));
|
|
||||||
}
|
|
||||||
this._bogies = this.recalculateBogies();
|
|
||||||
}
|
|
||||||
removeCar(car: TrainCar) {
|
|
||||||
this.cars = this.cars.filter((c) => c !== car);
|
|
||||||
}
|
|
||||||
|
|
||||||
recalculateBogies() {
|
|
||||||
return this.cars.flatMap((c) => c.bogies);
|
|
||||||
}
|
|
||||||
|
|
||||||
update(dt: number) {
|
|
||||||
this.solver.solve(dt);
|
|
||||||
}
|
|
||||||
|
|
||||||
draw() {
|
|
||||||
for (const car of this.cars) {
|
|
||||||
car.draw();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
debugDraw(): void {
|
|
||||||
const d = getContextItem("doodler");
|
|
||||||
// this.track._segments.forEach((s) =>
|
|
||||||
// s.evenPoints.forEach((p) => d.dot(p[0], { color: "lime", weight: 2 }))
|
|
||||||
// );
|
|
||||||
}
|
|
||||||
}
|
|
@@ -1,68 +0,0 @@
|
|||||||
import { Vector } from "@bearmetal/doodler";
|
|
||||||
import { getContextItem } from "../../lib/context.ts";
|
|
||||||
import { Debuggable } from "../../lib/debuggable.ts";
|
|
||||||
import { Bogie } from "./Bogie.ts";
|
|
||||||
|
|
||||||
export class TrainCar extends Debuggable {
|
|
||||||
private spriteImg: HTMLImageElement;
|
|
||||||
private sprite?: ISprite;
|
|
||||||
constructor(
|
|
||||||
public bogies: Bogie[] = [],
|
|
||||||
) {
|
|
||||||
super("car");
|
|
||||||
const res = getContextItem("resources");
|
|
||||||
this.spriteImg = res.get("snr:sprite/engine");
|
|
||||||
this.sprite = {
|
|
||||||
at: new Vector(80, 20),
|
|
||||||
width: 70,
|
|
||||||
height: 20,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
draw(): void {
|
|
||||||
const doodler = getContextItem("doodler");
|
|
||||||
for (const b of this.bogies) {
|
|
||||||
doodler.drawCircle(b.position, 4, { color: "blue" });
|
|
||||||
doodler.fillText(
|
|
||||||
b.velocity.mag().toFixed(1).toString(),
|
|
||||||
b.position.copy().add(10, 10),
|
|
||||||
100,
|
|
||||||
{
|
|
||||||
color: "white",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const angle = Vector.sub(this.bogies[1].position, this.bogies[0].position)
|
|
||||||
.heading();
|
|
||||||
const origin = Vector.lerp(
|
|
||||||
this.bogies[0].position,
|
|
||||||
this.bogies[1].position,
|
|
||||||
.5,
|
|
||||||
);
|
|
||||||
doodler.drawRotated(origin, angle, () => {
|
|
||||||
this.sprite
|
|
||||||
? doodler.drawSprite(
|
|
||||||
this.spriteImg,
|
|
||||||
this.sprite.at,
|
|
||||||
this.sprite.width,
|
|
||||||
this.sprite.height,
|
|
||||||
origin.copy().sub(
|
|
||||||
this.sprite.width / 2,
|
|
||||||
this.sprite.height / 2,
|
|
||||||
),
|
|
||||||
this.sprite.width,
|
|
||||||
this.sprite.height,
|
|
||||||
)
|
|
||||||
: doodler.drawImage(
|
|
||||||
this.spriteImg,
|
|
||||||
origin.copy().sub(
|
|
||||||
this.spriteImg.width / 2,
|
|
||||||
this.spriteImg.height / 2,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
debugDraw(): void {
|
|
||||||
}
|
|
||||||
}
|
|
@@ -1,138 +0,0 @@
|
|||||||
import { Vector } from "@bearmetal/doodler";
|
|
||||||
import { SolverTask } from "../../physics/solver.ts";
|
|
||||||
import { Bogie, Driver } from "./Bogie.ts";
|
|
||||||
import { TrackSystem } from "../../track/system.ts";
|
|
||||||
import { clamp } from "../../math/clamp.ts";
|
|
||||||
import { Train } from "./Train.ts";
|
|
||||||
|
|
||||||
export class TrackConstraint extends SolverTask {
|
|
||||||
detached: boolean = false;
|
|
||||||
detachmentThreshold: number = 1;
|
|
||||||
reattachmentThreshold: number = 0.1;
|
|
||||||
pathTag?: tag;
|
|
||||||
constructor(
|
|
||||||
private node: Bogie,
|
|
||||||
private track: TrackSystem,
|
|
||||||
) {
|
|
||||||
super();
|
|
||||||
this.priority = 1;
|
|
||||||
this.iterations = 1;
|
|
||||||
}
|
|
||||||
override apply(): boolean {
|
|
||||||
if (this.detached) {
|
|
||||||
if (this.node.velocity.mag() < this.reattachmentThreshold) {
|
|
||||||
this.detached = false;
|
|
||||||
} else {
|
|
||||||
this.active = false;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// if (this.node.velocity.mag() < 0) {
|
|
||||||
// return false;
|
|
||||||
// }
|
|
||||||
|
|
||||||
const searchRadius = 10;
|
|
||||||
const nearbySegments = this.track.grid.query(
|
|
||||||
this.node.position,
|
|
||||||
searchRadius,
|
|
||||||
this.pathTag,
|
|
||||||
);
|
|
||||||
|
|
||||||
let closestSegment: GridItem | null = null;
|
|
||||||
let closestDistance = Infinity;
|
|
||||||
let projectedPoint: Vector | null = null;
|
|
||||||
for (const seg of nearbySegments) {
|
|
||||||
const candidate = this.closestPointOnSegment(seg, this.node.position);
|
|
||||||
const distance = this.node.position.dist(candidate);
|
|
||||||
if (distance < closestDistance) {
|
|
||||||
closestSegment = seg;
|
|
||||||
closestDistance = distance;
|
|
||||||
projectedPoint = candidate;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (closestSegment && projectedPoint) {
|
|
||||||
const correctionForce = Vector.sub(projectedPoint, this.node.position);
|
|
||||||
const correctionMag = correctionForce.mag() * this.node.mass;
|
|
||||||
|
|
||||||
if (correctionMag > this.detachmentThreshold) {
|
|
||||||
this.detached = true;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.node.position = projectedPoint;
|
|
||||||
const pathDir = Vector.sub(closestSegment[1], closestSegment[0])
|
|
||||||
.normalize();
|
|
||||||
this.node.velocity.set(pathDir.mult(this.node.velocity.dot(pathDir)));
|
|
||||||
if (this.node instanceof Driver) {
|
|
||||||
this.node.updateDirection(pathDir);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
closestPointOnSegment([a, b]: GridItem, point: Vector): Vector {
|
|
||||||
const ab = Vector.sub(b, a);
|
|
||||||
const ap = Vector.sub(point, a);
|
|
||||||
const t = clamp(ab.dot(ap) / ab.magSq(), 0, 1);
|
|
||||||
|
|
||||||
return Vector.add(a, ab.mult(t));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class MoveTask extends SolverTask {
|
|
||||||
constructor(
|
|
||||||
private train: Train,
|
|
||||||
) {
|
|
||||||
super();
|
|
||||||
this.priority = 2;
|
|
||||||
this.iterations = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
override apply(dt: number): boolean {
|
|
||||||
for (const bogie of this.train.bogies) {
|
|
||||||
bogie.update(dt);
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class TrainTask extends SolverTask {
|
|
||||||
constructor(
|
|
||||||
private a: Bogie,
|
|
||||||
private b: Bogie,
|
|
||||||
private restLength: number,
|
|
||||||
private tolerance = 0,
|
|
||||||
private solid = false,
|
|
||||||
private breakThreshold = 10,
|
|
||||||
) {
|
|
||||||
super();
|
|
||||||
this.iterations = 100;
|
|
||||||
}
|
|
||||||
override apply(): boolean {
|
|
||||||
const delta = Vector.sub(this.b.position, this.a.position);
|
|
||||||
const currentLength = delta.mag();
|
|
||||||
if (currentLength <= this.tolerance) return false;
|
|
||||||
|
|
||||||
const correction = currentLength - this.restLength;
|
|
||||||
const correctionVector = delta.normalize().mult(correction / currentLength);
|
|
||||||
|
|
||||||
const requiredForce = correction / this.restLength;
|
|
||||||
|
|
||||||
if (!this.solid && Math.abs(requiredForce) > this.breakThreshold) {
|
|
||||||
this.active = false;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const totalMass = this.a.mass + this.b.mass;
|
|
||||||
const aWeight = this.b.mass / totalMass;
|
|
||||||
const bWeight = this.b.mass / totalMass;
|
|
||||||
|
|
||||||
this.a.position.add(correctionVector.copy().mult(aWeight));
|
|
||||||
this.b.position.sub(correctionVector.copy().mult(bWeight));
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
@@ -1,10 +1,12 @@
|
|||||||
import { getContextItem } from "../lib/context.ts";
|
import { ComplexPath, PathSegment } from "../math/path.ts";
|
||||||
|
import { Follower } from "../physics/follower.ts";
|
||||||
|
import { Mover } from "../physics/mover.ts";
|
||||||
|
import { getContext, getContextItem } from "../lib/context.ts";
|
||||||
import { Doodler, Vector } from "@bearmetal/doodler";
|
import { Doodler, Vector } from "@bearmetal/doodler";
|
||||||
import { Spline, TrackSegment, TrackSystem } from "../track/system.ts";
|
import { Spline, TrackSegment } from "../track/system.ts";
|
||||||
import { Debuggable } from "../lib/debuggable.ts";
|
import { ResourceManager } from "../lib/resources.ts";
|
||||||
import { lerp, lerpAngle, map } from "../math/lerp.ts";
|
|
||||||
|
|
||||||
export class Train extends Debuggable {
|
export class Train {
|
||||||
nodes: Vector[] = [];
|
nodes: Vector[] = [];
|
||||||
|
|
||||||
cars: TrainCar[] = [];
|
cars: TrainCar[] = [];
|
||||||
@@ -12,91 +14,70 @@ export class Train extends Debuggable {
|
|||||||
path: Spline<TrackSegment>;
|
path: Spline<TrackSegment>;
|
||||||
t: number;
|
t: number;
|
||||||
|
|
||||||
spacing = 0;
|
engineLength = 40;
|
||||||
|
spacing = 30;
|
||||||
|
|
||||||
speed = 5;
|
speed = 10;
|
||||||
|
|
||||||
aabb!: AABB;
|
constructor(track: Spline<TrackSegment>, cars: TrainCar[]) {
|
||||||
|
|
||||||
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 = track;
|
||||||
this.path.pointSpacing = 4;
|
this.t = 0;
|
||||||
|
const resources = getContextItem<ResourceManager>("resources");
|
||||||
this.cars = cars;
|
this.cars = cars;
|
||||||
this.t = this.cars.reduce((acc, c) => acc + c.length, 0) +
|
// this.cars.push(
|
||||||
(this.cars.length - 1) * this.spacing;
|
// new TrainCar(
|
||||||
this.t = this.t / this.path.pointSpacing;
|
// 55,
|
||||||
|
// engineSprites,
|
||||||
|
// 80,
|
||||||
|
// 20,
|
||||||
|
// { at: new Vector(0, 60), width: 80, height: 20 },
|
||||||
|
// ),
|
||||||
|
// new TrainCar(
|
||||||
|
// 25,
|
||||||
|
// engineSprites,
|
||||||
|
// 40,
|
||||||
|
// 20,
|
||||||
|
// { at: new Vector(80, 0), width: 40, height: 20 },
|
||||||
|
// ),
|
||||||
|
// );
|
||||||
let currentOffset = 0;
|
let currentOffset = 0;
|
||||||
// try {
|
try {
|
||||||
for (const car of this.cars) {
|
for (const car of this.cars) {
|
||||||
car.train = this;
|
currentOffset += this.spacing;
|
||||||
currentOffset += car.moveAlongPath(this.t - currentOffset, true) +
|
const a = this.path.followEvenPoints(this.t - currentOffset);
|
||||||
this.spacing / this.path.pointSpacing;
|
currentOffset += car.length;
|
||||||
|
const b = this.path.followEvenPoints(this.t - currentOffset);
|
||||||
|
car.points = [a, b];
|
||||||
|
this.nodes.push(a, b);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
currentOffset = 0;
|
||||||
|
for (const car of this.cars.toReversed()) {
|
||||||
|
currentOffset += this.spacing;
|
||||||
|
const a = this.path.followEvenPoints(this.t - currentOffset);
|
||||||
|
currentOffset += car.length;
|
||||||
|
const b = this.path.followEvenPoints(this.t - currentOffset);
|
||||||
|
car.points = [a, b];
|
||||||
|
this.nodes.push(a, b);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// } catch {
|
|
||||||
// currentOffset = 0;
|
|
||||||
// console.log("Reversed");
|
|
||||||
// for (const car of this.cars.toReversed()) {
|
|
||||||
// for (const [i, bogie] of car.bogies.entries().toArray().reverse()) {
|
|
||||||
// currentOffset += bogie.length;
|
|
||||||
// const a = this.path.followEvenPoints(this.t - currentOffset);
|
|
||||||
// car.setBogiePosition(a.p, i);
|
|
||||||
// this.nodes.push(a.p);
|
|
||||||
// car.segments.add(a.segmentId);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
this.updateAABB();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
move(dTime: number) {
|
move(dTime: number) {
|
||||||
if (!this.speed) return;
|
this.t = this.t + this.speed * dTime * 10;
|
||||||
this.t = this.t + (this.speed / this.path.pointSpacing) * dTime * 10;
|
|
||||||
// % this.path.evenPoints.length; // This should probably be on the track system
|
// % this.path.evenPoints.length; // This should probably be on the track system
|
||||||
|
// console.log(this.t);
|
||||||
let currentOffset = 0;
|
let currentOffset = 0;
|
||||||
for (const car of this.cars) {
|
for (const car of this.cars) {
|
||||||
// This needs to be moved to the car itself
|
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));
|
||||||
// const nA = this.path.followEvenPoints(this.t - currentOffset);
|
currentOffset += car.length;
|
||||||
// a.set(nA.p);
|
b.set(this.path.followEvenPoints(this.t - currentOffset));
|
||||||
// currentOffset += car.length;
|
currentOffset += this.spacing;
|
||||||
// const nB = this.path.followEvenPoints(this.t - currentOffset);
|
|
||||||
// b.set(nB.p);
|
|
||||||
// currentOffset += this.spacing;
|
|
||||||
// car.segments = [nA.segmentId, nB.segmentId];
|
|
||||||
// car.draw();
|
// car.draw();
|
||||||
|
|
||||||
currentOffset += car.moveAlongPath(this.t - currentOffset) +
|
|
||||||
(this.spacing / this.path.pointSpacing);
|
|
||||||
}
|
}
|
||||||
// this.draw();
|
// 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() {
|
// draw() {
|
||||||
@@ -115,54 +96,19 @@ export class Train extends Debuggable {
|
|||||||
// }
|
// }
|
||||||
|
|
||||||
draw() {
|
draw() {
|
||||||
for (const car of this.cars) {
|
const ctx = getContext();
|
||||||
car.draw();
|
if (ctx.debug) {
|
||||||
}
|
const doodler = getContextItem<Doodler>("doodler");
|
||||||
}
|
|
||||||
|
|
||||||
override debugDraw(): void {
|
|
||||||
const debug = getContextItem<Debug>("debug");
|
|
||||||
const doodler = getContextItem<Doodler>("doodler");
|
|
||||||
if (debug.path) {
|
|
||||||
// doodler.drawLine(this.path.points, {
|
// doodler.drawLine(this.path.points, {
|
||||||
// color: "red",
|
// color: "red",
|
||||||
// weight: 3,
|
// weight: 3,
|
||||||
// });
|
// });
|
||||||
const colors = getContextItem<string[]>("colors");
|
for (const p of this.path.evenPoints) {
|
||||||
for (const [i, p] of this.path.evenPoints.entries()) {
|
doodler.drawCircle(p, 2, { color: "red", weight: .5 });
|
||||||
const color = colors[
|
|
||||||
Math.floor(
|
|
||||||
map(i, 0, this.path.evenPoints.length, 0, colors.length),
|
|
||||||
)
|
|
||||||
];
|
|
||||||
doodler.drawCircle(p.p, 2, { color, weight: .5 });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
for (const car of this.cars) {
|
||||||
if (debug.train) {
|
car.draw();
|
||||||
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",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -171,156 +117,35 @@ export class Train extends Debuggable {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Bogie {
|
export class TrainCar {
|
||||||
pos: Vector;
|
|
||||||
angle: number;
|
|
||||||
length: number;
|
|
||||||
sprite?: ISprite & { offset?: Vector };
|
|
||||||
rotate?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class TrainCar extends Debuggable {
|
|
||||||
img: HTMLImageElement;
|
img: HTMLImageElement;
|
||||||
imgWidth: number;
|
imgWidth: number;
|
||||||
imgHeight: number;
|
imgHeight: number;
|
||||||
sprite?: ISprite;
|
sprite?: ISprite;
|
||||||
|
|
||||||
points?: [Vector, Vector, ...Vector[]];
|
points?: [Vector, Vector, ...Vector[]];
|
||||||
_length: number;
|
length: number;
|
||||||
leading: number = 0;
|
|
||||||
|
|
||||||
bogies: Bogie[] = [];
|
|
||||||
|
|
||||||
segments: Set<string> = new Set();
|
|
||||||
|
|
||||||
train?: Train;
|
|
||||||
|
|
||||||
aabb!: AABB;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
length: number,
|
length: number,
|
||||||
trailing: number,
|
|
||||||
img: HTMLImageElement,
|
img: HTMLImageElement,
|
||||||
w: number,
|
w: number,
|
||||||
h: number,
|
h: number,
|
||||||
sprite?: ISprite,
|
sprite?: ISprite,
|
||||||
) {
|
) {
|
||||||
super(true, "car", "bogies", "angles");
|
|
||||||
this.img = img;
|
this.img = img;
|
||||||
this.sprite = sprite;
|
this.sprite = sprite;
|
||||||
this.imgWidth = w;
|
this.imgWidth = w;
|
||||||
this.imgHeight = h;
|
this.imgHeight = h;
|
||||||
this._length = length;
|
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() {
|
draw() {
|
||||||
|
if (!this.points) return;
|
||||||
const doodler = getContextItem<Doodler>("doodler");
|
const doodler = getContextItem<Doodler>("doodler");
|
||||||
const [a, b] = this.bogies;
|
const [a, b] = this.points;
|
||||||
const origin = Vector.add(Vector.sub(a.pos, b.pos).div(2), b.pos);
|
const origin = Vector.add(Vector.sub(a, b).div(2), b);
|
||||||
const angle = Vector.sub(b.pos, a.pos).heading();
|
const angle = Vector.sub(b, a).heading();
|
||||||
|
|
||||||
doodler.drawCircle(origin, 4, { color: "blue" });
|
doodler.drawCircle(origin, 4, { color: "blue" });
|
||||||
|
|
||||||
@@ -340,102 +165,19 @@ export class TrainCar extends Debuggable {
|
|||||||
origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
|
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) {
|
const ctx = getContext();
|
||||||
doodler.deferDrawing(() => {
|
if (ctx.debug) {
|
||||||
doodler.drawRect(this.aabb.pos, this.aabb.width, this.aabb.height, {
|
doodler.drawLine(this.points, {
|
||||||
color: "white",
|
color: "blue",
|
||||||
weight: .5,
|
weight: 3,
|
||||||
});
|
|
||||||
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",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
interface ISprite {
|
||||||
interface ISprite {
|
at: Vector;
|
||||||
at: Vector;
|
width: number;
|
||||||
width: number;
|
height: number;
|
||||||
height: number;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
34
src/types.ts
@@ -15,38 +15,4 @@ declare global {
|
|||||||
bNeighbors: string[];
|
bNeighbors: string[];
|
||||||
fNeighbors: 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;
|
|
||||||
};
|
|
||||||
|
|
||||||
type tag = string | number;
|
|
||||||
}
|
|
||||||
|
|
||||||
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) ?? {},
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
@@ -1,8 +1,7 @@
|
|||||||
import { defineConfig } from "vite";
|
import { defineConfig } from 'vite'
|
||||||
import deno from "@deno/vite-plugin";
|
import deno from '@deno/vite-plugin'
|
||||||
import { strip } from "./vite/plugins/strip.ts";
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [deno(), strip()],
|
plugins: [deno()],
|
||||||
});
|
})
|
||||||
|
@@ -1,67 +0,0 @@
|
|||||||
import { Plugin } from "vite";
|
|
||||||
|
|
||||||
export function strip(): Plugin {
|
|
||||||
const p: Plugin = {
|
|
||||||
name: "debug-strip",
|
|
||||||
enforce: "pre",
|
|
||||||
apply: "build",
|
|
||||||
transform(code: string, id: string) {
|
|
||||||
if (!id.endsWith(".ts") || import.meta.env.DEV) {
|
|
||||||
return code;
|
|
||||||
}
|
|
||||||
|
|
||||||
const keyword = "override debugDraw";
|
|
||||||
const results = [];
|
|
||||||
let currentIndex = 0;
|
|
||||||
|
|
||||||
while (true) {
|
|
||||||
// Find the next occurrence of the keyword starting from currentIndex.
|
|
||||||
const startIndex = code.indexOf(keyword, currentIndex);
|
|
||||||
if (startIndex === -1) {
|
|
||||||
break; // No more occurrences.
|
|
||||||
}
|
|
||||||
|
|
||||||
// Find the first opening brace '{' after the keyword.
|
|
||||||
const braceStart = code.indexOf("{", startIndex);
|
|
||||||
if (braceStart === -1) {
|
|
||||||
// No opening brace found; skip this occurrence.
|
|
||||||
currentIndex = startIndex + keyword.length;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use a counter to find the matching closing brace.
|
|
||||||
let openBraces = 0;
|
|
||||||
let endIndex = -1;
|
|
||||||
for (let i = braceStart; i < code.length; i++) {
|
|
||||||
if (code[i] === "{") {
|
|
||||||
openBraces++;
|
|
||||||
} else if (code[i] === "}") {
|
|
||||||
openBraces--;
|
|
||||||
}
|
|
||||||
|
|
||||||
// When openBraces returns to 0, we found the matching closing brace.
|
|
||||||
if (openBraces === 0) {
|
|
||||||
endIndex = i;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If a matching closing brace was found, extract the substring.
|
|
||||||
if (endIndex !== -1) {
|
|
||||||
results.push(code.substring(startIndex, endIndex + 1));
|
|
||||||
// Move the currentIndex past the extracted block.
|
|
||||||
currentIndex = endIndex + 1;
|
|
||||||
} else {
|
|
||||||
// If no matching closing brace is found, skip this occurrence.
|
|
||||||
currentIndex = startIndex + keyword.length;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const result of results) {
|
|
||||||
code = code.replace(result, "");
|
|
||||||
}
|
|
||||||
return code;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
return p;
|
|
||||||
}
|
|