Compare commits
No commits in common. "main" and "vite" have entirely different histories.
5
.gitignore
vendored
5
.gitignore
vendored
@ -23,8 +23,3 @@ dist-ssr
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Packed devtools
|
||||
devtools.zip
|
||||
|
||||
temp.*
|
||||
@ -3,8 +3,7 @@
|
||||
"dev": "deno run -A --node-modules-dir npm:vite",
|
||||
"build": "deno run -A --node-modules-dir npm:vite build",
|
||||
"preview": "deno run -A --node-modules-dir npm:vite preview",
|
||||
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/",
|
||||
"pack-devtools": "rm -rf devtools.zip && deno run -A npm:web-ext build -o --source-dir devtools --artifacts-dir devtools.zip"
|
||||
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
||||
},
|
||||
"compilerOptions": {
|
||||
"lib": [
|
||||
@ -14,9 +13,8 @@
|
||||
]
|
||||
},
|
||||
"imports": {
|
||||
"@bearmetal/doodler": "jsr:@bearmetal/doodler@0.0.5-e",
|
||||
"@bearmetal/doodler": "jsr:@bearmetal/doodler@0.0.5-b",
|
||||
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
|
||||
"vite": "npm:vite@^6.0.1"
|
||||
},
|
||||
"nodeModulesDir": "auto"
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,8 @@
|
||||
{
|
||||
"manifest_version": 2,
|
||||
"name": "SNR DevTools",
|
||||
"name": "Context Stack DevTools",
|
||||
"version": "1.0",
|
||||
"description": "A devtools panel to view and edit context stack values.",
|
||||
"author": "Emmaline Autumn",
|
||||
"devtools_page": "devtools.html",
|
||||
"background": {
|
||||
"scripts": [
|
||||
@ -25,13 +24,5 @@
|
||||
"devtools",
|
||||
"tabs",
|
||||
"*://*/*"
|
||||
],
|
||||
"icons": {
|
||||
"48": "train icon.png"
|
||||
},
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "snrdt@cyborggrizzly.com"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
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 { StateMachine } from "./state/machine.ts";
|
||||
import { States } from "./state/states/index.ts";
|
||||
import { TrackSystem } from "./track/system.ts";
|
||||
|
||||
export function bootstrapInputs() {
|
||||
addEventListener("keydown", (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
const inputManager = getContextItem<InputManager>("inputManager");
|
||||
inputManager.onKey("e", () => {
|
||||
const state = getContextItem<StateMachine<States>>("state");
|
||||
@ -18,22 +14,4 @@ export function bootstrapInputs() {
|
||||
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,33 +1,14 @@
|
||||
import { ZoomableDoodler } from "@bearmetal/doodler";
|
||||
import { TrackSegment } from "../track/system.ts";
|
||||
import { Train, TrainCar } from "../train/train.ts";
|
||||
import { InputManager } from "./input.ts";
|
||||
import { ResourceManager } from "./resources.ts";
|
||||
|
||||
interface ContextMap {
|
||||
inputManager: InputManager;
|
||||
doodler: ZoomableDoodler;
|
||||
resources: ResourceManager;
|
||||
debug: Debug;
|
||||
colors: [
|
||||
string,
|
||||
string,
|
||||
string,
|
||||
string,
|
||||
string,
|
||||
string,
|
||||
string,
|
||||
string,
|
||||
...string[],
|
||||
];
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
type ContextStore = Record<string, any>;
|
||||
|
||||
const defaultContext: ContextStore = {};
|
||||
const contextStack: ContextStore[] = [defaultContext];
|
||||
|
||||
const debug = JSON.parse(localStorage.getItem("debug") || "false");
|
||||
|
||||
export function setDefaultContext(context: ContextStore) {
|
||||
Object.assign(defaultContext, context);
|
||||
}
|
||||
@ -57,10 +38,6 @@ export const ctx = new Proxy(
|
||||
export function getContext() {
|
||||
return ctx;
|
||||
}
|
||||
export function getContextItem<K extends keyof ContextMap>(
|
||||
prop: K,
|
||||
): ContextMap[K];
|
||||
export function getContextItem<T>(prop: string): T;
|
||||
export function getContextItem<T>(prop: string): T {
|
||||
return ctx[prop] as T;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
private resources: Map<string, unknown> = new Map();
|
||||
private statuses: Map<string, Promise<boolean>> = new Map();
|
||||
|
||||
get<K extends ResourceType>(name: NamespacedId<K>): ResourceMap[K];
|
||||
get<T>(name: string): T;
|
||||
get<T>(
|
||||
name: string,
|
||||
): T {
|
||||
get<T>(name: string): T {
|
||||
if (!this.resources.has(name)) {
|
||||
throw new Error(`Resource ${name} not found`);
|
||||
}
|
||||
return this.resources.get(name) as T;
|
||||
}
|
||||
|
||||
set<T extends keyof ResourceMap>(
|
||||
name: NamespacedId<T>,
|
||||
value: unknown,
|
||||
) {
|
||||
const identifier = parseNamespacedId(name);
|
||||
set(name: string, value: unknown) {
|
||||
if (typeof (value as EventSource).addEventListener === "function") {
|
||||
if (value instanceof Image || value instanceof Audio) {
|
||||
// During development, we can use the local file system
|
||||
value.src =
|
||||
`/blobs/${identifier.namespace}/${identifier.type}/${identifier.name}${
|
||||
extensionByType(identifier.type)
|
||||
}`;
|
||||
console.log(value.src);
|
||||
}
|
||||
this.statuses.set(
|
||||
name,
|
||||
new Promise((resolve) => {
|
||||
const onload = () => {
|
||||
this.resources.set(name, value);
|
||||
resolve(true);
|
||||
(value as EventSource).removeEventListener("loadeddata", onload);
|
||||
(value as EventSource).removeEventListener("load", onload);
|
||||
};
|
||||
(value as EventSource).addEventListener("loadeddata", onload);
|
||||
(value as EventSource).addEventListener("load", onload);
|
||||
}),
|
||||
);
|
||||
@ -76,28 +36,3 @@ export class ResourceManager {
|
||||
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("/") };
|
||||
}
|
||||
|
||||
23
src/main.ts
23
src/main.ts
@ -20,14 +20,11 @@ const resources = new ResourceManager();
|
||||
const doodler = new ZoomableDoodler({
|
||||
fillScreen: true,
|
||||
bg: "#302040",
|
||||
noSmooth: true,
|
||||
}, () => {});
|
||||
setTimeout(() => {
|
||||
(doodler as any as { ctx: CanvasRenderingContext2D }).ctx
|
||||
});
|
||||
(doodler as any as { ctx: CanvasRenderingContext2D }).ctx
|
||||
.imageSmoothingEnabled = false;
|
||||
}, 0);
|
||||
// doodler.minScale = 0.1;
|
||||
// (doodler as any).scale = 3.14;
|
||||
(doodler as any).scale = 3.14;
|
||||
|
||||
const colors = [
|
||||
"red",
|
||||
@ -40,20 +37,13 @@ const colors = [
|
||||
"violet",
|
||||
];
|
||||
|
||||
const _fullDebug: Debug = {
|
||||
const _debug: Debug = JSON.parse(localStorage.getItem("debug") || "0") || {
|
||||
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) {
|
||||
@ -117,8 +107,3 @@ 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,
|
||||
y2: number,
|
||||
) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
|
||||
|
||||
export function lerpAngle(a: number, b: number, t: number) {
|
||||
let diff = b - a;
|
||||
// Wrap difference to [-PI, PI]
|
||||
while (diff < -Math.PI) diff += 2 * Math.PI;
|
||||
while (diff > Math.PI) diff -= 2 * Math.PI;
|
||||
return a + diff * t;
|
||||
}
|
||||
|
||||
export function averageAngles(angle1: number, angle2: number) {
|
||||
// Convert angles to unit vectors
|
||||
const x = Math.cos(angle1) + Math.cos(angle2);
|
||||
const y = Math.sin(angle1) + Math.sin(angle2);
|
||||
// Compute the angle of the resulting vector
|
||||
return Math.atan2(y, x);
|
||||
}
|
||||
|
||||
@ -14,10 +14,6 @@ import {
|
||||
SBendLeft,
|
||||
SBendRight,
|
||||
StraightTrack,
|
||||
TightBankLeft,
|
||||
TightBankRight,
|
||||
WideBankLeft,
|
||||
WideBankRight,
|
||||
} from "../../track/shapes.ts";
|
||||
import { TrackSegment } from "../../track/system.ts";
|
||||
import { clamp } from "../../math/clamp.ts";
|
||||
@ -44,6 +40,18 @@ export class EditTrackState extends State<States> {
|
||||
const track = getContextItem<TrackSystem>("track");
|
||||
const doodler = getContextItem<Doodler>("doodler");
|
||||
|
||||
// For moving a segment, i.e. the currently active one
|
||||
// const segment = track.lastSegment;
|
||||
// if (segment) {
|
||||
// const firstPoint = segment.points[0].copy();
|
||||
// const { x, y } = inputManager.getMouseLocation();
|
||||
// segment.points.forEach((p, i) => {
|
||||
// const relativePoint = Vector.sub(p, firstPoint);
|
||||
// p.set(x, y);
|
||||
// p.add(relativePoint);
|
||||
// });
|
||||
// }
|
||||
|
||||
if (this.selectedSegment) {
|
||||
const segment = this.selectedSegment;
|
||||
const firstPoint = segment.points[0].copy();
|
||||
@ -53,7 +61,6 @@ export class EditTrackState extends State<States> {
|
||||
p.set(mousePos);
|
||||
p.add(relativePoint);
|
||||
});
|
||||
segment.update();
|
||||
|
||||
const ends = track.findEnds();
|
||||
setContextItem("showEnds", true);
|
||||
@ -102,21 +109,18 @@ export class EditTrackState extends State<States> {
|
||||
this.ghostRotated = false;
|
||||
}
|
||||
switch (this.closestEnd.frontOrBack) {
|
||||
case "front": {
|
||||
case "front":
|
||||
this.ghostSegment.setPositionByPoint(
|
||||
this.closestEnd.pos,
|
||||
this.ghostSegment.points[0],
|
||||
);
|
||||
// this.ghostSegment.points[0] = this.closestEnd.pos;
|
||||
const ghostEndTangent = this.ghostSegment.tangent(0);
|
||||
|
||||
!this.ghostRotated && this.ghostSegment.rotateAboutPoint(
|
||||
this.closestEnd.tangent.heading() - ghostEndTangent.heading(),
|
||||
this.closestEnd.tangent.heading(),
|
||||
this.ghostSegment.points[0],
|
||||
);
|
||||
this.ghostRotated = true;
|
||||
break;
|
||||
}
|
||||
case "back": {
|
||||
this.ghostSegment.setPositionByPoint(
|
||||
this.closestEnd.pos,
|
||||
@ -132,8 +136,6 @@ export class EditTrackState extends State<States> {
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.ghostSegment.update();
|
||||
|
||||
// } else if (closestEnd) {
|
||||
// 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) {
|
||||
track.translate(translation);
|
||||
track.recalculateAll();
|
||||
}
|
||||
|
||||
// TODO
|
||||
@ -285,10 +286,6 @@ export class EditTrackState extends State<States> {
|
||||
new SBendRight(),
|
||||
new BankLeft(),
|
||||
new BankRight(),
|
||||
new WideBankLeft(),
|
||||
new WideBankRight(),
|
||||
new TightBankLeft(),
|
||||
new TightBankRight(),
|
||||
]);
|
||||
|
||||
const inputManager = getContextItem<InputManager>("inputManager");
|
||||
@ -309,6 +306,14 @@ export class EditTrackState extends State<States> {
|
||||
state.transitionTo(States.RUNNING);
|
||||
});
|
||||
|
||||
inputManager.onKey(" ", () => {
|
||||
if (this.selectedSegment) {
|
||||
this.selectedSegment = undefined;
|
||||
} else {
|
||||
this.selectedSegment = new StraightTrack();
|
||||
}
|
||||
});
|
||||
|
||||
inputManager.onMouse("left", () => {
|
||||
const track = getContextItem<TrackSystem>("track");
|
||||
if (this.ghostSegment && this.closestEnd) {
|
||||
@ -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
|
||||
// Cache trains and save
|
||||
|
||||
@ -411,9 +404,6 @@ export class EditTrackState extends State<States> {
|
||||
const inputManager = getContextItem<InputManager>("inputManager");
|
||||
inputManager.offKey("e");
|
||||
inputManager.offKey("w");
|
||||
inputManager.offKey("z");
|
||||
inputManager.offKey("r");
|
||||
inputManager.offKey("R");
|
||||
inputManager.offKey("Escape");
|
||||
inputManager.offMouse("left");
|
||||
if (this.heldEvents.size > 0) {
|
||||
|
||||
@ -34,16 +34,12 @@ export class LoadState extends State<States> {
|
||||
|
||||
bootstrapInputs();
|
||||
|
||||
// This should be driven by a manifest
|
||||
resources.set("snr:sprite/engine", new Image());
|
||||
resources.set("snr:sprite/LargeLady", new Image());
|
||||
// resources.get<HTMLImageElement>("snr:sprite/engine")!.src =
|
||||
// "/sprites/EngineSprites.png";
|
||||
|
||||
resources.set("snr:audio/ding", new Audio());
|
||||
resources.set("engine-sprites", new Image());
|
||||
resources.get<HTMLImageElement>("engine-sprites")!.src =
|
||||
"/sprites/EngineSprites.png";
|
||||
resources.ready().then(() => {
|
||||
this.stateMachine.transitionTo(States.RUNNING);
|
||||
}).catch((e) => console.error(e));
|
||||
});
|
||||
|
||||
const doodler = getContextItem<Doodler>("doodler");
|
||||
// this.layers.push(doodler.createLayer((_, __, dTime) => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Doodler, Point, Vector, ZoomableDoodler } from "@bearmetal/doodler";
|
||||
import { Doodler } from "@bearmetal/doodler";
|
||||
import { getContext, getContextItem } from "../../lib/context.ts";
|
||||
import { InputManager } from "../../lib/input.ts";
|
||||
import { TrackSystem } from "../../track/system.ts";
|
||||
@ -8,7 +8,6 @@ import { DotFollower } from "../../train/newTrain.ts";
|
||||
import { Train } from "../../train/train.ts";
|
||||
import { State } from "../machine.ts";
|
||||
import { States } from "./index.ts";
|
||||
import { LargeLady, LargeLadyTender } from "../../train/LargeLady.ts";
|
||||
|
||||
export class RunningState extends State<States> {
|
||||
override name: States = States.RUNNING;
|
||||
@ -19,20 +18,8 @@ export class RunningState extends State<States> {
|
||||
|
||||
layers: number[] = [];
|
||||
|
||||
activeTrain: Train | undefined;
|
||||
|
||||
override update(dt: number): void {
|
||||
const ctx = getContext() as { trains: Train[]; track: TrackSystem };
|
||||
const doodler = getContextItem<ZoomableDoodler>(
|
||||
"doodler",
|
||||
);
|
||||
if (this.activeTrain) {
|
||||
// (doodler as any).origin = doodler.worldToScreen(
|
||||
// doodler.width - this.activeTrain.aabb.center.x,
|
||||
// doodler.height - this.activeTrain.aabb.center.y,
|
||||
// );
|
||||
doodler.centerCameraOn(this.activeTrain.aabb.center);
|
||||
}
|
||||
// const ctx = getContext() as { trains: DotFollower[]; track: TrackSystem };
|
||||
// TODO
|
||||
// Update trains
|
||||
@ -71,24 +58,12 @@ export class RunningState extends State<States> {
|
||||
// const path = track.path;
|
||||
// const follower = new DotFollower(path, path.points[0].copy());
|
||||
// ctx.trains.push(follower);
|
||||
const train = new Train(track.path, [
|
||||
new LargeLady(),
|
||||
new LargeLadyTender(),
|
||||
]);
|
||||
const train = new Train(track.path, [new RedEngine(), new Tender()]);
|
||||
ctx.trains.push(train);
|
||||
});
|
||||
// const train = new Train(track.path, [
|
||||
// new LargeLady(),
|
||||
// new LargeLadyTender(),
|
||||
// ]);
|
||||
// ctx.trains.push(train);
|
||||
// this.activeTr0ain = train;
|
||||
// const trainCount = 1000;
|
||||
// for (let i = 0; i < trainCount; i++) {
|
||||
// const train = new Train(track.path, [
|
||||
// new LargeLady(),
|
||||
// new LargeLadyTender(),
|
||||
// ]);
|
||||
// const train = new Train(track.path, [new RedEngine(), new Tender()]);
|
||||
// ctx.trains.push(train);
|
||||
// }
|
||||
|
||||
|
||||
@ -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);
|
||||
super([
|
||||
start,
|
||||
start.copy().add(80, 0),
|
||||
start.copy().add(120, -25),
|
||||
start.copy().add(200, -25),
|
||||
start.copy().add(60, 0),
|
||||
start.copy().add(90, -25),
|
||||
start.copy().add(150, -25),
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -29,9 +29,9 @@ export class SBendRight extends TrackSegment {
|
||||
start = start || new Vector(100, 100);
|
||||
super([
|
||||
start,
|
||||
start.copy().add(80, 0),
|
||||
start.copy().add(120, 25),
|
||||
start.copy().add(200, 25),
|
||||
start.copy().add(60, 0),
|
||||
start.copy().add(90, 25),
|
||||
start.copy().add(150, 25),
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -44,7 +44,7 @@ export class BankLeft extends TrackSegment {
|
||||
const p2 = start.copy();
|
||||
const p3 = start.copy();
|
||||
const p4 = start.copy();
|
||||
const scale = 66;
|
||||
const scale = 33;
|
||||
|
||||
p2.add(new Vector(1, 0).mult(scale));
|
||||
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 {
|
||||
constructor(start?: Vector) {
|
||||
start = start || new Vector(100, 100);
|
||||
@ -174,7 +70,7 @@ export class BankRight extends TrackSegment {
|
||||
const p2 = start.copy();
|
||||
const p3 = start.copy();
|
||||
const p4 = start.copy();
|
||||
const scale = 66;
|
||||
const scale = 33;
|
||||
|
||||
p2.add(new Vector(1, 0).mult(scale));
|
||||
p3.set(p2);
|
||||
|
||||
@ -2,14 +2,12 @@ import { Doodler, Point, Vector } from "@bearmetal/doodler";
|
||||
import { ComplexPath, PathSegment } from "../math/path.ts";
|
||||
import { getContextItem, setDefaultContext } from "../lib/context.ts";
|
||||
import { clamp } from "../math/clamp.ts";
|
||||
import { Debuggable } from "../lib/debuggable.ts";
|
||||
|
||||
export class TrackSystem extends Debuggable {
|
||||
export class TrackSystem {
|
||||
private _segments: Map<string, TrackSegment> = new Map();
|
||||
private doodler: Doodler;
|
||||
|
||||
constructor(segments: TrackSegment[]) {
|
||||
super("track");
|
||||
this.doodler = getContextItem<Doodler>("doodler");
|
||||
for (const segment of segments) {
|
||||
this._segments.set(segment.id, segment);
|
||||
@ -28,19 +26,6 @@ export class TrackSystem extends Debuggable {
|
||||
return this._segments.values().toArray().pop();
|
||||
}
|
||||
|
||||
getNearestSegment(pos: Vector) {
|
||||
let minDistance = Infinity;
|
||||
let nearestSegment: TrackSegment | undefined;
|
||||
for (const segment of this._segments.values()) {
|
||||
const distance = segment.getDistanceTo(pos);
|
||||
if (distance < minDistance) {
|
||||
minDistance = distance;
|
||||
nearestSegment = segment;
|
||||
}
|
||||
}
|
||||
return nearestSegment;
|
||||
}
|
||||
|
||||
optimize(percent: number) {
|
||||
console.log("Optimizing track", percent * 100 / 4);
|
||||
for (const segment of this._segments.values()) {
|
||||
@ -50,7 +35,7 @@ export class TrackSystem extends Debuggable {
|
||||
|
||||
recalculateAll() {
|
||||
for (const segment of this._segments.values()) {
|
||||
segment.update();
|
||||
segment.recalculateRailPoints();
|
||||
segment.length = segment.calculateApproxLength();
|
||||
}
|
||||
}
|
||||
@ -100,15 +85,6 @@ export class TrackSystem extends Debuggable {
|
||||
// }
|
||||
}
|
||||
|
||||
override debugDraw(): void {
|
||||
const debug = getContextItem("debug");
|
||||
if (debug.track) {
|
||||
for (const segment of this._segments.values()) {
|
||||
segment.drawAABB();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ends: Map<TrackSegment, [End, End]> = new Map();
|
||||
endArray: End[] = [];
|
||||
|
||||
@ -306,56 +282,14 @@ export class TrackSegment extends PathSegment {
|
||||
antiNormalPoints: Vector[] = [];
|
||||
evenPoints: [Vector, number][] = [];
|
||||
|
||||
aabb!: AABB;
|
||||
|
||||
private trackGuage = 12;
|
||||
|
||||
constructor(p: VectorSet, id?: string) {
|
||||
super(p);
|
||||
this.doodler = getContextItem<Doodler>("doodler");
|
||||
this.id = id ?? crypto.randomUUID();
|
||||
this.update();
|
||||
}
|
||||
this.recalculateRailPoints();
|
||||
|
||||
getDistanceTo(pos: Vector) {
|
||||
return Vector.dist(this.aabb.center, pos);
|
||||
}
|
||||
|
||||
updateAABB() {
|
||||
let minX = Infinity;
|
||||
let maxX = -Infinity;
|
||||
let minY = Infinity;
|
||||
let maxY = -Infinity;
|
||||
|
||||
[...this.normalPoints, ...this.antiNormalPoints].forEach((p) => {
|
||||
minX = Math.min(minX, p.x);
|
||||
maxX = Math.max(maxX, p.x);
|
||||
minY = Math.min(minY, p.y);
|
||||
maxY = Math.max(maxY, p.y);
|
||||
});
|
||||
|
||||
const width = maxX - minX;
|
||||
const height = maxY - minY;
|
||||
if (width < this.trackGuage) {
|
||||
const extra = (this.trackGuage - width) / 2;
|
||||
minX -= extra;
|
||||
maxX += extra;
|
||||
}
|
||||
if (height < this.trackGuage) {
|
||||
const extra = (this.trackGuage - height) / 2;
|
||||
minY -= extra;
|
||||
maxY += extra;
|
||||
}
|
||||
this.aabb = {
|
||||
pos: new Vector(minX, minY),
|
||||
x: minX,
|
||||
y: minY,
|
||||
width: maxX - minX,
|
||||
height: maxY - minY,
|
||||
center: new Vector(minX, minY).add(
|
||||
new Vector(maxX - minX, maxY - minY).div(2),
|
||||
),
|
||||
};
|
||||
const spacing = Math.ceil(this.length / 10);
|
||||
this.evenPoints = this.calculateEvenlySpacedPoints(this.length / spacing);
|
||||
}
|
||||
|
||||
recalculateRailPoints(resolution = 60) {
|
||||
@ -364,22 +298,12 @@ export class TrackSegment extends PathSegment {
|
||||
for (let i = 0; i <= resolution; i++) {
|
||||
const t = i / resolution;
|
||||
const normal = this.tangent(t).rotate(Math.PI / 2);
|
||||
normal.setMag(this.trackGuage / 2);
|
||||
normal.setMag(6);
|
||||
const p = this.getPointAtT(t);
|
||||
this.normalPoints.push(p.copy().add(normal));
|
||||
this.antiNormalPoints.push(p.copy().add(normal.rotate(Math.PI)));
|
||||
}
|
||||
}
|
||||
recalculateTiePoints() {
|
||||
const spacing = Math.ceil(this.length / 10);
|
||||
this.evenPoints = this.calculateEvenlySpacedPoints(this.length / spacing);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.recalculateRailPoints();
|
||||
this.recalculateTiePoints();
|
||||
this.updateAABB();
|
||||
}
|
||||
|
||||
setTrack(t: TrackSystem) {
|
||||
this.track = t;
|
||||
@ -465,15 +389,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 {
|
||||
return {
|
||||
p: this.points.map((p) => p.array()),
|
||||
@ -516,7 +431,6 @@ export class TrackSegment extends PathSegment {
|
||||
rotate(angle: number | Vector) {
|
||||
const [p1, p2, p3, p4] = this.points;
|
||||
let newP2;
|
||||
|
||||
if (angle instanceof Vector) {
|
||||
const tan = angle;
|
||||
angle = tan.heading() - (this.lastHeading ?? 0);
|
||||
@ -553,7 +467,7 @@ export class TrackSegment extends PathSegment {
|
||||
}
|
||||
|
||||
rotateAboutPoint(angle: number, point: Vector) {
|
||||
// if (!this.points.includes(point)) return;
|
||||
if (!this.points.includes(point)) return;
|
||||
point = point.copy();
|
||||
this.points.forEach((p, i) => {
|
||||
const relativePoint = Vector.sub(p, point);
|
||||
@ -585,14 +499,7 @@ export class Spline<T extends PathSegment = PathSegment> {
|
||||
ctx?: CanvasRenderingContext2D;
|
||||
|
||||
evenPoints: PathPoint[];
|
||||
_pointSpacing: number;
|
||||
get pointSpacing() {
|
||||
return this._pointSpacing;
|
||||
}
|
||||
set pointSpacing(value: number) {
|
||||
this._pointSpacing = value;
|
||||
this.evenPoints = this.calculateEvenlySpacedPoints(value);
|
||||
}
|
||||
pointSpacing: number;
|
||||
|
||||
get points() {
|
||||
return Array.from(new Set(this.segments.flatMap((s) => s.points)));
|
||||
@ -607,8 +514,8 @@ export class Spline<T extends PathSegment = PathSegment> {
|
||||
if (this.segments.at(-1)?.next === this.segments[0]) {
|
||||
this.looped = true;
|
||||
}
|
||||
this._pointSpacing = 1;
|
||||
this.evenPoints = this.calculateEvenlySpacedPoints(this._pointSpacing);
|
||||
this.pointSpacing = 1;
|
||||
this.evenPoints = this.calculateEvenlySpacedPoints(1);
|
||||
this.nodes = [];
|
||||
// for (let i = 0; i < this.points.length; i += 3) {
|
||||
// const node: IControlNode = {
|
||||
@ -642,7 +549,7 @@ export class Spline<T extends PathSegment = PathSegment> {
|
||||
}
|
||||
|
||||
calculateEvenlySpacedPoints(spacing: number, resolution = 1): PathPoint[] {
|
||||
// this._pointSpacing = 1;
|
||||
this.pointSpacing = 1;
|
||||
// return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
|
||||
const points: PathPoint[] = [];
|
||||
|
||||
@ -682,7 +589,7 @@ export class Spline<T extends PathSegment = PathSegment> {
|
||||
}
|
||||
}
|
||||
|
||||
// this.evenPoints = points;
|
||||
this.evenPoints = points;
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
25,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
40,
|
||||
20,
|
||||
{
|
||||
super(25, resources.get<HTMLImageElement>("engine-sprites")!, 40, 20, {
|
||||
at: new Vector(80, 0),
|
||||
width: 40,
|
||||
height: 20,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
export class Tank extends TrainCar {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
50,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
70,
|
||||
20,
|
||||
{
|
||||
super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
|
||||
at: new Vector(80, 20),
|
||||
width: 70,
|
||||
height: 20,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
export class YellowDumpCar extends TrainCar {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
50,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
70,
|
||||
20,
|
||||
{
|
||||
super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
|
||||
at: new Vector(80, 40),
|
||||
width: 70,
|
||||
height: 20,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
export class GrayDumpCar extends TrainCar {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
50,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
70,
|
||||
20,
|
||||
{
|
||||
super(50, resources.get<HTMLImageElement>("engine-sprites")!, 70, 20, {
|
||||
at: new Vector(80, 60),
|
||||
width: 70,
|
||||
height: 20,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
export class NullCar extends TrainCar {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
50,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
70,
|
||||
20,
|
||||
{
|
||||
super(50, resources.get<HTMLImageElement>("engine-sprites")!, 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 {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
55,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
80,
|
||||
20,
|
||||
{
|
||||
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||
at: new Vector(0, 60),
|
||||
width: 80,
|
||||
height: 20,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
export class PurpleEngine extends TrainCar {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
55,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
80,
|
||||
20,
|
||||
{
|
||||
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||
at: new Vector(0, 60),
|
||||
width: 80,
|
||||
height: 20,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
export class GreenEngine extends TrainCar {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
55,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
80,
|
||||
20,
|
||||
{
|
||||
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||
at: new Vector(0, 40),
|
||||
width: 80,
|
||||
height: 20,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
export class GrayEngine extends TrainCar {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
55,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
80,
|
||||
20,
|
||||
{
|
||||
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||
at: new Vector(0, 20),
|
||||
width: 80,
|
||||
height: 20,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
export class BlueEngine extends TrainCar {
|
||||
constructor() {
|
||||
const resources = getContextItem<ResourceManager>("resources");
|
||||
super(
|
||||
55,
|
||||
10,
|
||||
resources.get<HTMLImageElement>("snr:sprite/engine")!,
|
||||
80,
|
||||
20,
|
||||
{
|
||||
super(55, resources.get<HTMLImageElement>("engine-sprites")!, 80, 20, {
|
||||
at: new Vector(0, 0),
|
||||
width: 80,
|
||||
height: 20,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { getContextItem } from "../lib/context.ts";
|
||||
import { Doodler, Vector } from "@bearmetal/doodler";
|
||||
import { Spline, TrackSegment, TrackSystem } from "../track/system.ts";
|
||||
import { Debuggable } from "../lib/debuggable.ts";
|
||||
import { lerp, lerpAngle, map } from "../math/lerp.ts";
|
||||
import { map } from "../math/lerp.ts";
|
||||
|
||||
export class Train extends Debuggable {
|
||||
nodes: Vector[] = [];
|
||||
@ -12,91 +12,64 @@ export class Train extends Debuggable {
|
||||
path: Spline<TrackSegment>;
|
||||
t: number;
|
||||
|
||||
spacing = 0;
|
||||
spacing = 20;
|
||||
|
||||
speed = 5;
|
||||
|
||||
aabb!: AABB;
|
||||
speed = 10;
|
||||
|
||||
get segments() {
|
||||
return Array.from(
|
||||
new Set(this.cars.flatMap((c) => c.segments.values().toArray())),
|
||||
);
|
||||
return Array.from(new Set(this.cars.flatMap((c) => c.segments)));
|
||||
}
|
||||
|
||||
constructor(track: Spline<TrackSegment>, cars: TrainCar[], t = 0) {
|
||||
constructor(track: Spline<TrackSegment>, cars: TrainCar[]) {
|
||||
super("train", "path");
|
||||
this.path = track;
|
||||
this.path.pointSpacing = 4;
|
||||
this.t = 0;
|
||||
this.cars = cars;
|
||||
this.t = this.cars.reduce((acc, c) => acc + c.length, 0) +
|
||||
(this.cars.length - 1) * this.spacing;
|
||||
this.t = this.t / this.path.pointSpacing;
|
||||
|
||||
let currentOffset = 0;
|
||||
// try {
|
||||
try {
|
||||
for (const car of this.cars) {
|
||||
car.train = this;
|
||||
currentOffset += car.moveAlongPath(this.t - currentOffset, true) +
|
||||
this.spacing / this.path.pointSpacing;
|
||||
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.p, b.p];
|
||||
this.nodes.push(a.p, b.p);
|
||||
car.segments = [a.segmentId, b.segmentId];
|
||||
}
|
||||
} 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.p, b.p];
|
||||
this.nodes.push(a.p, b.p);
|
||||
car.segments = [a.segmentId, b.segmentId];
|
||||
}
|
||||
}
|
||||
// } catch {
|
||||
// currentOffset = 0;
|
||||
// console.log("Reversed");
|
||||
// for (const car of this.cars.toReversed()) {
|
||||
// for (const [i, bogie] of car.bogies.entries().toArray().reverse()) {
|
||||
// currentOffset += bogie.length;
|
||||
// const a = this.path.followEvenPoints(this.t - currentOffset);
|
||||
// car.setBogiePosition(a.p, i);
|
||||
// this.nodes.push(a.p);
|
||||
// car.segments.add(a.segmentId);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
this.updateAABB();
|
||||
}
|
||||
|
||||
move(dTime: number) {
|
||||
if (!this.speed) return;
|
||||
this.t = this.t + (this.speed / this.path.pointSpacing) * dTime * 10;
|
||||
this.t = this.t + this.speed * dTime * 10;
|
||||
// % this.path.evenPoints.length; // This should probably be on the track system
|
||||
let currentOffset = 0;
|
||||
for (const car of this.cars) {
|
||||
// This needs to be moved to the car itself
|
||||
// if (!car.points) return;
|
||||
// const [a, b] = car.points;
|
||||
// const nA = this.path.followEvenPoints(this.t - currentOffset);
|
||||
// a.set(nA.p);
|
||||
// currentOffset += car.length;
|
||||
// const nB = this.path.followEvenPoints(this.t - currentOffset);
|
||||
// b.set(nB.p);
|
||||
// currentOffset += this.spacing;
|
||||
// car.segments = [nA.segmentId, nB.segmentId];
|
||||
if (!car.points) return;
|
||||
const [a, b] = car.points;
|
||||
const nA = this.path.followEvenPoints(this.t - currentOffset);
|
||||
a.set(nA.p);
|
||||
currentOffset += car.length;
|
||||
const nB = this.path.followEvenPoints(this.t - currentOffset);
|
||||
b.set(nB.p);
|
||||
currentOffset += this.spacing;
|
||||
car.segments = [nA.segmentId, nB.segmentId];
|
||||
// car.draw();
|
||||
|
||||
currentOffset += car.moveAlongPath(this.t - currentOffset) +
|
||||
(this.spacing / this.path.pointSpacing);
|
||||
}
|
||||
// this.draw();
|
||||
this.updateAABB();
|
||||
}
|
||||
|
||||
updateAABB() {
|
||||
const minX = Math.min(...this.cars.map((c) => c.aabb.x));
|
||||
const maxX = Math.max(...this.cars.map((c) => c.aabb.x + c.aabb.width));
|
||||
const minY = Math.min(...this.cars.map((c) => c.aabb.y));
|
||||
const maxY = Math.max(...this.cars.map((c) => c.aabb.y + c.aabb.height));
|
||||
this.aabb = {
|
||||
pos: new Vector(minX, minY),
|
||||
x: minX,
|
||||
y: minY,
|
||||
width: maxX - minX,
|
||||
height: maxY - minY,
|
||||
center: new Vector(minX, minY).add(
|
||||
new Vector(maxX - minX, maxY - minY).div(2),
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
// draw() {
|
||||
@ -145,7 +118,7 @@ export class Train extends Debuggable {
|
||||
colors.push(colors.shift()!);
|
||||
colors.push(colors.shift()!);
|
||||
colors.push(colors.shift()!);
|
||||
for (const [i, segmentId] of this.segments.entries().toArray()) {
|
||||
for (const [i, segmentId] of this.segments.entries()) {
|
||||
const segment = track.getSegment(segmentId);
|
||||
segment &&
|
||||
doodler.drawBezier(...segment.points, {
|
||||
@ -154,16 +127,6 @@ export class Train extends Debuggable {
|
||||
});
|
||||
}
|
||||
}
|
||||
if (debug.aabb) {
|
||||
doodler.deferDrawing(() => {
|
||||
doodler.drawRect(this.aabb.pos, this.aabb.width, this.aabb.height, {
|
||||
color: "orange",
|
||||
});
|
||||
doodler.drawCircle(this.aabb.center, 2, {
|
||||
color: "lime",
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
real2Track(length: number) {
|
||||
@ -171,14 +134,6 @@ export class Train extends Debuggable {
|
||||
}
|
||||
}
|
||||
|
||||
interface Bogie {
|
||||
pos: Vector;
|
||||
angle: number;
|
||||
length: number;
|
||||
sprite?: ISprite & { offset?: Vector };
|
||||
rotate?: boolean;
|
||||
}
|
||||
|
||||
export class TrainCar extends Debuggable {
|
||||
img: HTMLImageElement;
|
||||
imgWidth: number;
|
||||
@ -186,141 +141,31 @@ export class TrainCar extends Debuggable {
|
||||
sprite?: ISprite;
|
||||
|
||||
points?: [Vector, Vector, ...Vector[]];
|
||||
_length: number;
|
||||
leading: number = 0;
|
||||
length: number;
|
||||
|
||||
bogies: Bogie[] = [];
|
||||
|
||||
segments: Set<string> = new Set();
|
||||
|
||||
train?: Train;
|
||||
|
||||
aabb!: AABB;
|
||||
segments: string[] = [];
|
||||
|
||||
constructor(
|
||||
length: number,
|
||||
trailing: number,
|
||||
img: HTMLImageElement,
|
||||
w: number,
|
||||
h: number,
|
||||
sprite?: ISprite,
|
||||
) {
|
||||
super(true, "car", "bogies", "angles");
|
||||
super(true, "car");
|
||||
this.img = img;
|
||||
this.sprite = sprite;
|
||||
this.imgWidth = w;
|
||||
this.imgHeight = h;
|
||||
this._length = length;
|
||||
|
||||
this.bogies = [
|
||||
{
|
||||
pos: new Vector(0, 0),
|
||||
angle: 0,
|
||||
length: length,
|
||||
},
|
||||
{
|
||||
pos: new Vector(0, 0),
|
||||
angle: 0,
|
||||
length: trailing,
|
||||
},
|
||||
];
|
||||
|
||||
this.updateAABB();
|
||||
}
|
||||
|
||||
get length() {
|
||||
return this.bogies.reduce((acc, b) => acc + b.length, 0) + this.leading;
|
||||
}
|
||||
|
||||
setBogiePosition(pos: Vector, idx: number) {
|
||||
this.bogies[idx].pos.set(pos);
|
||||
}
|
||||
|
||||
update(dTime: number, t: number) {
|
||||
if (this.train) {
|
||||
for (const [i, bogie] of this.bogies.entries()) {
|
||||
const a = this.train.path.followEvenPoints(t - this._length * i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateAABB() {
|
||||
let minX = Infinity;
|
||||
let maxX = -Infinity;
|
||||
let minY = Infinity;
|
||||
let maxY = -Infinity;
|
||||
|
||||
this.bogies.forEach((bogie, index) => {
|
||||
// Unit vector in the direction the bogie is facing.
|
||||
const u = new Vector(Math.cos(bogie.angle), Math.sin(bogie.angle));
|
||||
// Perpendicular vector (to thicken the rectangle).
|
||||
const v = new Vector(-Math.sin(bogie.angle), Math.cos(bogie.angle));
|
||||
|
||||
// For the first bogie, extend in the opposite direction by this.leading.
|
||||
let front = bogie.pos.copy();
|
||||
if (index === 0) {
|
||||
front = front.sub(u.copy().rotate(Math.PI).mult(this.leading));
|
||||
}
|
||||
// Rear point is at bogie.pos plus the bogie length.
|
||||
const rear = bogie.pos.copy().add(
|
||||
u.copy().rotate(Math.PI).mult(bogie.length),
|
||||
);
|
||||
|
||||
// Calculate half the height to offset from the center line.
|
||||
const halfHeight = this.imgHeight / 2;
|
||||
|
||||
// Calculate the four corners of the rectangle.
|
||||
const corners = [
|
||||
front.copy().add(v.copy().mult(halfHeight)),
|
||||
front.copy().add(v.copy().mult(-halfHeight)),
|
||||
rear.copy().add(v.copy().mult(halfHeight)),
|
||||
rear.copy().add(v.copy().mult(-halfHeight)),
|
||||
];
|
||||
|
||||
// Update the overall AABB limits.
|
||||
corners.forEach((corner) => {
|
||||
minX = Math.min(minX, corner.x);
|
||||
minY = Math.min(minY, corner.y);
|
||||
maxX = Math.max(maxX, corner.x);
|
||||
maxY = Math.max(maxY, corner.y);
|
||||
});
|
||||
});
|
||||
this.aabb = {
|
||||
pos: new Vector(minX, minY),
|
||||
center: new Vector(minX, minY).add(
|
||||
new Vector(maxX - minX, maxY - minY).div(2),
|
||||
),
|
||||
x: minX,
|
||||
y: minY,
|
||||
width: maxX - minX,
|
||||
height: maxY - minY,
|
||||
};
|
||||
}
|
||||
|
||||
moveAlongPath(t: number, initial = false): number {
|
||||
if (!this.train) return 0;
|
||||
let offset = this.leading / this.train.path.pointSpacing;
|
||||
this.segments.clear();
|
||||
for (const [i, bogie] of this.bogies.entries()) {
|
||||
const a = this.train.path.followEvenPoints(t - offset);
|
||||
a.tangent.rotate(TWO_PI);
|
||||
offset += bogie.length / this.train.path.pointSpacing;
|
||||
this.setBogiePosition(a.p, i);
|
||||
if (initial) bogie.angle = a.tangent.heading();
|
||||
else {
|
||||
bogie.angle = lerpAngle(a.tangent.heading(), bogie.angle, .1);
|
||||
}
|
||||
this.segments.add(a.segmentId);
|
||||
}
|
||||
this.updateAABB();
|
||||
return offset;
|
||||
this.length = length;
|
||||
}
|
||||
|
||||
draw() {
|
||||
if (!this.points) return;
|
||||
const doodler = getContextItem<Doodler>("doodler");
|
||||
const [a, b] = this.bogies;
|
||||
const origin = Vector.add(Vector.sub(a.pos, b.pos).div(2), b.pos);
|
||||
const angle = Vector.sub(b.pos, a.pos).heading();
|
||||
const [a, b] = this.points;
|
||||
const origin = Vector.add(Vector.sub(a, b).div(2), b);
|
||||
const angle = Vector.sub(b, a).heading();
|
||||
|
||||
doodler.drawCircle(origin, 4, { color: "blue" });
|
||||
|
||||
@ -342,93 +187,12 @@ export class TrainCar extends Debuggable {
|
||||
});
|
||||
}
|
||||
override debugDraw(...args: unknown[]): void {
|
||||
if (!this.points) return;
|
||||
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), {
|
||||
doodler.drawLine(this.points, {
|
||||
color: "blue",
|
||||
weight: 2,
|
||||
weight: 3,
|
||||
});
|
||||
doodler.deferDrawing(() => {
|
||||
const colors = getContextItem<string[]>("colors");
|
||||
for (const [i, b] of this.bogies.entries()) {
|
||||
doodler.drawCircle(b.pos, 5, { color: colors[i % colors.length] });
|
||||
doodler.fillText(
|
||||
b.length.toString(),
|
||||
b.pos.copy().add(10, 0),
|
||||
100,
|
||||
{
|
||||
color: "white",
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (debug.aabb) {
|
||||
doodler.deferDrawing(() => {
|
||||
doodler.drawRect(this.aabb.pos, this.aabb.width, this.aabb.height, {
|
||||
color: "white",
|
||||
weight: .5,
|
||||
});
|
||||
doodler.drawCircle(this.aabb.center, 2, {
|
||||
color: "yellow",
|
||||
});
|
||||
doodler.fillText(
|
||||
this.aabb.width.toFixed(1).toString(),
|
||||
this.aabb.center.copy().add(10, 10),
|
||||
100,
|
||||
{
|
||||
color: "white",
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (debug.angles) {
|
||||
doodler.deferDrawing(() => {
|
||||
const ps: { pos: Vector; angle: number }[] = [];
|
||||
for (const [i, b] of this.bogies.entries()) {
|
||||
ps.push({ pos: b.pos, angle: b.angle });
|
||||
const next = this.bogies[i + 1];
|
||||
if (!next) continue;
|
||||
const heading = Vector.sub(next.pos, b.pos);
|
||||
const p = b.pos.copy().add(heading.mult(.5));
|
||||
ps.push({ pos: p, angle: heading.heading() });
|
||||
}
|
||||
for (const p of ps) {
|
||||
doodler.dot(p.pos, { color: "green" });
|
||||
doodler.fillText(
|
||||
p.angle.toFixed(2).toString(),
|
||||
p.pos.copy().add(0, 20),
|
||||
100,
|
||||
{
|
||||
color: "white",
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
25
src/types.ts
25
src/types.ts
@ -18,33 +18,8 @@ declare global {
|
||||
|
||||
type Debug = {
|
||||
track: boolean;
|
||||
segment: boolean;
|
||||
train: boolean;
|
||||
car: boolean;
|
||||
path: boolean;
|
||||
bogies: boolean;
|
||||
angles: boolean;
|
||||
aabb: boolean;
|
||||
};
|
||||
|
||||
type AABB = {
|
||||
pos: Vector;
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
center: Vector;
|
||||
};
|
||||
}
|
||||
|
||||
export function applyMixins(derivedCtor: any, baseCtors: any[]) {
|
||||
baseCtors.forEach((baseCtor) => {
|
||||
Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
|
||||
Object.defineProperty(
|
||||
derivedCtor.prototype,
|
||||
name,
|
||||
Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ?? {},
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user