1672 lines
46 KiB
JavaScript
1672 lines
46 KiB
JavaScript
(() => {
|
|
// lib/context.ts
|
|
var contextStack = [];
|
|
var defaultContext = {};
|
|
var debug = JSON.parse(localStorage.getItem("debug") || "false");
|
|
function setDefaultContext(context) {
|
|
Object.assign(defaultContext, context);
|
|
}
|
|
var ctx = new Proxy(
|
|
{},
|
|
{
|
|
get(_, prop) {
|
|
for (let i = contextStack.length - 1; i >= 0; i--) {
|
|
if (prop in contextStack[i]) return contextStack[i][prop];
|
|
}
|
|
if (prop in defaultContext) return defaultContext[prop];
|
|
throw new Error(`Context variable '${prop}' is not defined.`);
|
|
}
|
|
}
|
|
);
|
|
function getContext() {
|
|
return ctx;
|
|
}
|
|
function getContextItem(prop) {
|
|
return ctx[prop];
|
|
}
|
|
function setContextItem(prop, value) {
|
|
Object.assign(contextStack[contextStack.length - 1] ?? defaultContext, {
|
|
[prop]: value
|
|
});
|
|
}
|
|
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, ctx2] of contextStack.entries()) {
|
|
const div2 = document.createElement("div");
|
|
const pre2 = document.createElement("pre");
|
|
const h32 = document.createElement("h3");
|
|
h32.textContent = "CTX " + idx;
|
|
div2.append(h32);
|
|
pre2.textContent = safeStringify(ctx2);
|
|
div2.append(pre2);
|
|
ctxEl.append(div2);
|
|
}
|
|
}, 1e3);
|
|
}
|
|
function safeStringify(obj) {
|
|
const seen = /* @__PURE__ */ new WeakSet();
|
|
return JSON.stringify(obj, (key, value) => {
|
|
if (typeof value === "object" && value !== null) {
|
|
if (seen.has(value)) {
|
|
return "[Circular]";
|
|
}
|
|
seen.add(value);
|
|
}
|
|
return value;
|
|
}, 2);
|
|
}
|
|
|
|
// lib/input.ts
|
|
var InputManager = class {
|
|
keyStates = /* @__PURE__ */ new Map();
|
|
mouseStates = /* @__PURE__ */ new Map();
|
|
mouseLocation = { x: 0, y: 0 };
|
|
mouseDelta = { x: 0, y: 0 };
|
|
keyEvents = /* @__PURE__ */ new Map();
|
|
mouseEvents = /* @__PURE__ */ new Map();
|
|
constructor() {
|
|
document.addEventListener("keydown", (e) => {
|
|
this.keyStates.set(e.key, true);
|
|
this.keyEvents.get(e.key)?.call(e);
|
|
});
|
|
document.addEventListener("keyup", (e) => {
|
|
this.keyStates.set(e.key, false);
|
|
});
|
|
document.addEventListener("mousedown", (e) => {
|
|
this.mouseStates.set(e.button, true);
|
|
this.mouseEvents.get(e.button)?.call(e);
|
|
});
|
|
document.addEventListener("mouseup", (e) => {
|
|
this.mouseStates.set(e.button, false);
|
|
});
|
|
self.addEventListener("mousemove", (e) => {
|
|
this.mouseLocation = { x: e.clientX, y: e.clientY };
|
|
this.mouseDelta = {
|
|
x: e.movementX,
|
|
y: e.movementY
|
|
};
|
|
});
|
|
}
|
|
getKeyState(key) {
|
|
return this.keyStates.get(key);
|
|
}
|
|
getMouseState(key) {
|
|
return this.mouseStates.get(key);
|
|
}
|
|
getMouseLocation() {
|
|
return this.mouseLocation;
|
|
}
|
|
getMouseDelta() {
|
|
return this.mouseDelta;
|
|
}
|
|
onKey(key, cb) {
|
|
this.keyEvents.set(key, cb);
|
|
}
|
|
onMouse(key, cb) {
|
|
this.mouseEvents.set(key, cb);
|
|
}
|
|
offKey(key) {
|
|
const events = this.keyEvents.get(key);
|
|
this.keyEvents.delete(key);
|
|
return events;
|
|
}
|
|
offMouse(key) {
|
|
this.mouseEvents.delete(key);
|
|
}
|
|
};
|
|
|
|
// https://jsr.io/@bearmetal/doodler/0.0.3/geometry/constants.ts
|
|
var Constants = {
|
|
TWO_PI: Math.PI * 2
|
|
};
|
|
|
|
// https://jsr.io/@bearmetal/doodler/0.0.3/geometry/vector.ts
|
|
var Vector = class _Vector {
|
|
x;
|
|
y;
|
|
z;
|
|
doodler;
|
|
constructor(x = 0, y = 0, z = 0) {
|
|
if (typeof x === "number") {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.z = z;
|
|
} else {
|
|
this.x = x.x;
|
|
this.y = x.y || y;
|
|
this.z = x.z || z;
|
|
}
|
|
}
|
|
initializeDoodler(doodler2) {
|
|
this.doodler = doodler2;
|
|
}
|
|
set(v, y, z) {
|
|
if (arguments.length === 1 && typeof v !== "number") {
|
|
this.set(
|
|
v.x || v[0] || 0,
|
|
v.y || v[1] || 0,
|
|
v.z || v[2] || 0
|
|
);
|
|
} else {
|
|
this.x = v;
|
|
this.y = y || 0;
|
|
this.z = z || 0;
|
|
}
|
|
}
|
|
get() {
|
|
return new _Vector(this.x, this.y, this.z);
|
|
}
|
|
mag() {
|
|
const x = this.x, y = this.y, z = this.z;
|
|
return Math.sqrt(x * x + y * y + z * z);
|
|
}
|
|
magSq() {
|
|
const x = this.x, y = this.y, z = this.z;
|
|
return x * x + y * y + z * z;
|
|
}
|
|
setMag(v_or_len, len) {
|
|
if (len === void 0) {
|
|
len = v_or_len;
|
|
this.normalize();
|
|
this.mult(len);
|
|
} else {
|
|
const v = v_or_len;
|
|
v.normalize();
|
|
v.mult(len);
|
|
return v;
|
|
}
|
|
}
|
|
add(v, y, z) {
|
|
if (arguments.length === 1 && typeof v !== "number") {
|
|
this.x += v.x;
|
|
this.y += v.y;
|
|
this.z += v.z;
|
|
} else if (arguments.length === 2) {
|
|
this.x += v;
|
|
this.y += y ?? 0;
|
|
} else {
|
|
this.x += v;
|
|
this.y += y ?? 0;
|
|
this.z += z ?? 0;
|
|
}
|
|
return this;
|
|
}
|
|
sub(v, y, z) {
|
|
if (arguments.length === 1 && typeof v !== "number") {
|
|
this.x -= v.x;
|
|
this.y -= v.y;
|
|
this.z -= v.z || 0;
|
|
} else if (arguments.length === 2) {
|
|
this.x -= v;
|
|
this.y -= y ?? 0;
|
|
} else {
|
|
this.x -= v;
|
|
this.y -= y ?? 0;
|
|
this.z -= z ?? 0;
|
|
}
|
|
return this;
|
|
}
|
|
mult(v) {
|
|
if (typeof v === "number") {
|
|
this.x *= v;
|
|
this.y *= v;
|
|
this.z *= v;
|
|
} else {
|
|
this.x *= v.x;
|
|
this.y *= v.y;
|
|
this.z *= v.z;
|
|
}
|
|
return this;
|
|
}
|
|
div(v) {
|
|
if (typeof v === "number") {
|
|
this.x /= v;
|
|
this.y /= v;
|
|
this.z /= v;
|
|
} else {
|
|
this.x /= v.x;
|
|
this.y /= v.y;
|
|
this.z /= v.z;
|
|
}
|
|
return this;
|
|
}
|
|
rotate(angle) {
|
|
const prev_x = this.x;
|
|
const c = Math.cos(angle);
|
|
const s = Math.sin(angle);
|
|
this.x = c * this.x - s * this.y;
|
|
this.y = s * prev_x + c * this.y;
|
|
return this;
|
|
}
|
|
dist(other) {
|
|
return Math.sqrt(
|
|
Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2) + Math.pow(this.z - other.z, 2)
|
|
);
|
|
}
|
|
dot(v, y, z) {
|
|
if (arguments.length === 1 && typeof v !== "number") {
|
|
return this.x * v.x + this.y * v.y + this.z * v.z;
|
|
}
|
|
return this.x * v + this.y * y + this.z * z;
|
|
}
|
|
cross(v) {
|
|
const x = this.x, y = this.y, z = this.z;
|
|
return new _Vector(y * v.z - v.y * z, z * v.x - v.z * x, x * v.y - v.x * y);
|
|
}
|
|
lerp(v_or_x, amt_or_y, z, amt) {
|
|
const lerp_val = (start, stop, amt2) => {
|
|
return start + (stop - start) * amt2;
|
|
};
|
|
let x, y;
|
|
if (arguments.length === 2 && typeof v_or_x !== "number") {
|
|
amt = amt_or_y;
|
|
x = v_or_x.x;
|
|
y = v_or_x.y;
|
|
z = v_or_x.z;
|
|
} else {
|
|
x = v_or_x;
|
|
y = amt_or_y;
|
|
}
|
|
this.x = lerp_val(this.x, x, amt);
|
|
this.y = lerp_val(this.y, y, amt);
|
|
this.z = lerp_val(this.z, z, amt);
|
|
return this;
|
|
}
|
|
normalize() {
|
|
const m = this.mag();
|
|
if (m > 0) {
|
|
this.div(m);
|
|
}
|
|
return this;
|
|
}
|
|
limit(high) {
|
|
if (this.mag() > high) {
|
|
this.normalize();
|
|
this.mult(high);
|
|
}
|
|
return this;
|
|
}
|
|
heading() {
|
|
return -Math.atan2(-this.y, this.x);
|
|
}
|
|
heading2D() {
|
|
return this.heading();
|
|
}
|
|
toString() {
|
|
return "[" + this.x.toFixed(2) + ", " + this.y.toFixed(2) + ", " + this.z.toFixed(2) + "]";
|
|
}
|
|
array() {
|
|
return [this.x, this.y, this.z];
|
|
}
|
|
copy() {
|
|
return new _Vector(this.x, this.y, this.z);
|
|
}
|
|
drawDot(color) {
|
|
if (!this.doodler) return;
|
|
this.doodler.dot(this, { weight: 2, color: color || "red" });
|
|
}
|
|
draw(origin) {
|
|
if (!this.doodler) return;
|
|
const startPoint = origin ? new _Vector(origin) : new _Vector();
|
|
this.doodler.line(
|
|
startPoint,
|
|
startPoint.copy().add(this.copy().normalize().mult(100))
|
|
);
|
|
}
|
|
normal(v) {
|
|
if (!v) return new _Vector(-this.y, this.x);
|
|
const dx = v.x - this.x;
|
|
const dy = v.y - this.y;
|
|
return new _Vector(-dy, dx);
|
|
}
|
|
static fromAngle(angle, v) {
|
|
if (v === void 0 || v === null) {
|
|
v = new _Vector();
|
|
}
|
|
v.x = Math.cos(angle);
|
|
v.y = Math.sin(angle);
|
|
return v;
|
|
}
|
|
static random2D(v) {
|
|
return _Vector.fromAngle(Math.random() * (Math.PI * 2), v);
|
|
}
|
|
static random3D(v) {
|
|
const angle = Math.random() * Constants.TWO_PI;
|
|
const vz = Math.random() * 2 - 1;
|
|
const mult = Math.sqrt(1 - vz * vz);
|
|
const vx = mult * Math.cos(angle);
|
|
const vy = mult * Math.sin(angle);
|
|
if (v === void 0 || v === null) {
|
|
v = new _Vector(vx, vy, vz);
|
|
} else {
|
|
v.set(vx, vy, vz);
|
|
}
|
|
return v;
|
|
}
|
|
static dist(v1, v2) {
|
|
return v1.dist(v2);
|
|
}
|
|
static dot(v1, v2) {
|
|
return v1.dot(v2);
|
|
}
|
|
static cross(v1, v2) {
|
|
return v1.cross(v2);
|
|
}
|
|
static add(v1, v2) {
|
|
return new _Vector(v1.x + v2.x, v1.y + v2.y, v1.z + v2.z);
|
|
}
|
|
static sub(v1, v2) {
|
|
return new _Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);
|
|
}
|
|
static angleBetween(v1, v2) {
|
|
return Math.acos(v1.dot(v2) / Math.sqrt(v1.magSq() * v2.magSq()));
|
|
}
|
|
static lerp(v1, v2, amt) {
|
|
const val = new _Vector(v1.x, v1.y, v1.z);
|
|
val.lerp(v2, amt);
|
|
return val;
|
|
}
|
|
static vectorProjection(v1, v2) {
|
|
v2 = v2.copy();
|
|
v2.normalize();
|
|
const sp = v1.dot(v2);
|
|
v2.mult(sp);
|
|
return v2;
|
|
}
|
|
static vectorProjectionAndDot(v1, v2) {
|
|
v2 = v2.copy();
|
|
v2.normalize();
|
|
const sp = v1.dot(v2);
|
|
v2.mult(sp);
|
|
return [v2, sp];
|
|
}
|
|
static hypot2(a, b) {
|
|
return _Vector.dot(_Vector.sub(a, b), _Vector.sub(a, b));
|
|
}
|
|
};
|
|
var OriginVector = class _OriginVector extends Vector {
|
|
origin;
|
|
get halfwayPoint() {
|
|
return {
|
|
x: this.mag() / 2 * Math.sin(this.heading()) + this.origin.x,
|
|
y: this.mag() / 2 * Math.cos(this.heading()) + this.origin.y
|
|
};
|
|
}
|
|
constructor(origin, p) {
|
|
super(p.x, p.y, p.z);
|
|
this.origin = origin;
|
|
}
|
|
static from(origin, p) {
|
|
const v = {
|
|
x: p.x - origin.x,
|
|
y: p.y - origin.y
|
|
};
|
|
return new _OriginVector(origin, v);
|
|
}
|
|
};
|
|
|
|
// https://jsr.io/@bearmetal/doodler/0.0.3/FPSCounter.ts
|
|
var FPSCounter = class {
|
|
frameTimes = [];
|
|
maxSamples;
|
|
totalFrameTime = 0;
|
|
constructor(maxSamples = 100) {
|
|
this.maxSamples = maxSamples;
|
|
}
|
|
update(deltaTime) {
|
|
const frameTime = deltaTime;
|
|
this.frameTimes.push(frameTime);
|
|
this.totalFrameTime += frameTime;
|
|
if (this.frameTimes.length > this.maxSamples) {
|
|
const removed = this.frameTimes.shift();
|
|
this.totalFrameTime -= removed;
|
|
}
|
|
}
|
|
getFPS() {
|
|
if (this.frameTimes.length === 0) {
|
|
return 0;
|
|
}
|
|
return this.frameTimes.length / this.totalFrameTime;
|
|
}
|
|
getFPSf() {
|
|
return this.getFPS().toFixed(0);
|
|
}
|
|
};
|
|
|
|
// https://jsr.io/@bearmetal/doodler/0.0.3/canvas.ts
|
|
var Doodler = class {
|
|
ctx;
|
|
_canvas;
|
|
layers = [];
|
|
bg;
|
|
framerate;
|
|
get width() {
|
|
return this.ctx.canvas.width;
|
|
}
|
|
get height() {
|
|
return this.ctx.canvas.height;
|
|
}
|
|
draggables = [];
|
|
clickables = [];
|
|
dragTarget;
|
|
constructor({
|
|
width,
|
|
height,
|
|
fillScreen,
|
|
canvas,
|
|
bg,
|
|
framerate
|
|
}, postInit) {
|
|
if (!canvas) {
|
|
canvas = document.createElement("canvas");
|
|
document.body.append(canvas);
|
|
}
|
|
this.bg = bg || "white";
|
|
this.framerate = framerate;
|
|
canvas.width = fillScreen ? document.body.clientWidth : width;
|
|
canvas.height = fillScreen ? document.body.clientHeight : height;
|
|
if (fillScreen) {
|
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
for (const entry of entries) {
|
|
this._canvas.width = entry.target.clientWidth;
|
|
this._canvas.height = entry.target.clientHeight;
|
|
}
|
|
});
|
|
resizeObserver.observe(document.body);
|
|
}
|
|
this._canvas = canvas;
|
|
const ctx2 = canvas.getContext("2d");
|
|
if (!ctx2) throw "Unable to initialize Doodler: Canvas context not found";
|
|
this.ctx = ctx2;
|
|
postInit?.(this.ctx);
|
|
}
|
|
init() {
|
|
this._canvas.addEventListener("mousedown", (e) => this.onClick(e));
|
|
this._canvas.addEventListener("mouseup", (e) => this.offClick(e));
|
|
this._canvas.addEventListener("mousemove", (e) => this.onDrag(e));
|
|
this.startDrawLoop();
|
|
}
|
|
timer;
|
|
lastFrameAt = performance.now();
|
|
startDrawLoop() {
|
|
this.lastFrameAt = Date.now();
|
|
if (this.framerate) {
|
|
this.timer = setInterval(
|
|
() => this.draw(Date.now()),
|
|
1e3 / this.framerate
|
|
);
|
|
} else {
|
|
const cb = (t) => {
|
|
this.draw(t);
|
|
requestAnimationFrame(cb);
|
|
};
|
|
requestAnimationFrame(cb);
|
|
}
|
|
}
|
|
fpsCounter = new FPSCounter();
|
|
get fps() {
|
|
return this.fpsCounter.getFPS();
|
|
}
|
|
draw(time) {
|
|
const frameTime = (time - this.lastFrameAt) / 1e3;
|
|
this.fpsCounter.update(frameTime);
|
|
this.ctx.clearRect(0, 0, this.width, this.height);
|
|
this.ctx.fillStyle = this.bg;
|
|
this.ctx.fillRect(0, 0, this.width, this.height);
|
|
if (frameTime > 0) {
|
|
for (const [i, l] of (this.layers || []).entries()) {
|
|
l(this.ctx, i, frameTime);
|
|
this.drawDeferred();
|
|
}
|
|
this.drawUI();
|
|
}
|
|
this.lastFrameAt = time;
|
|
}
|
|
// Layer management
|
|
createLayer(layer) {
|
|
this.layers.push(layer);
|
|
}
|
|
deleteLayer(layer) {
|
|
this.layers = this.layers.filter((l) => l !== layer);
|
|
}
|
|
moveLayer(layer, index) {
|
|
let temp = this.layers.filter((l) => l !== layer);
|
|
temp = [...temp.slice(0, index), layer, ...temp.slice(index)];
|
|
this.layers = temp;
|
|
}
|
|
// Drawing
|
|
line(start, end, style) {
|
|
this.setStyle(style);
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(start.x, start.y);
|
|
this.ctx.lineTo(end.x, end.y);
|
|
this.ctx.stroke();
|
|
}
|
|
dot(at, style) {
|
|
this.setStyle({ ...style, weight: 1 });
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(at.x, at.y, style?.weight || 1, 0, Constants.TWO_PI);
|
|
this.ctx.fill();
|
|
}
|
|
drawCircle(at, radius, style) {
|
|
this.setStyle(style);
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(at.x, at.y, radius, 0, Constants.TWO_PI);
|
|
this.ctx.stroke();
|
|
}
|
|
fillCircle(at, radius, style) {
|
|
this.setStyle(style);
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(at.x, at.y, radius, 0, Constants.TWO_PI);
|
|
this.ctx.fill();
|
|
}
|
|
drawRect(at, width, height, style) {
|
|
this.setStyle(style);
|
|
this.ctx.strokeRect(at.x, at.y, width, height);
|
|
}
|
|
fillRect(at, width, height, style) {
|
|
this.setStyle(style);
|
|
this.ctx.fillRect(at.x, at.y, width, height);
|
|
}
|
|
drawSquare(at, size, style) {
|
|
this.drawRect(at, size, size, style);
|
|
}
|
|
fillSquare(at, size, style) {
|
|
this.fillRect(at, size, size, style);
|
|
}
|
|
drawCenteredRect(at, width, height, style) {
|
|
this.ctx.save();
|
|
this.ctx.translate(-width / 2, -height / 2);
|
|
this.drawRect(at, width, height, style);
|
|
this.ctx.restore();
|
|
}
|
|
fillCenteredRect(at, width, height, style) {
|
|
this.ctx.save();
|
|
this.ctx.translate(-width / 2, -height / 2);
|
|
this.fillRect(at, width, height, style);
|
|
this.ctx.restore();
|
|
}
|
|
drawCenteredSquare(at, size, style) {
|
|
this.drawCenteredRect(at, size, size, style);
|
|
}
|
|
fillCenteredSquare(at, size, style) {
|
|
this.fillCenteredRect(at, size, size, style);
|
|
}
|
|
drawBezier(a, b, c, d, style) {
|
|
this.setStyle(style);
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(a.x, a.y);
|
|
this.ctx.bezierCurveTo(b.x, b.y, c.x, c.y, d.x, d.y);
|
|
this.ctx.stroke();
|
|
}
|
|
drawRotated(origin, angle, cb) {
|
|
this.ctx.save();
|
|
this.ctx.translate(origin.x, origin.y);
|
|
this.ctx.rotate(angle);
|
|
this.ctx.translate(-origin.x, -origin.y);
|
|
cb();
|
|
this.ctx.restore();
|
|
}
|
|
drawScaled(scale, cb) {
|
|
this.ctx.save();
|
|
this.ctx.transform(scale, 0, 0, scale, 0, 0);
|
|
cb();
|
|
this.ctx.restore();
|
|
}
|
|
drawWithAlpha(alpha, cb) {
|
|
this.ctx.save();
|
|
this.ctx.globalAlpha = Math.min(Math.max(alpha, 0), 1);
|
|
cb();
|
|
this.ctx.restore();
|
|
}
|
|
drawImage(img, at, w, h) {
|
|
w && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
|
|
}
|
|
drawImageWithOutline(img, at, w, h, style) {
|
|
this.ctx.save();
|
|
const s = (typeof w === "number" || !w ? style?.weight : w.weight) || 1;
|
|
this.ctx.shadowColor = (typeof w === "number" || !w ? style?.color || style?.fillColor : w.color || w.strokeColor) || "red";
|
|
this.ctx.shadowBlur = 0;
|
|
for (let x = -s; x <= s; x++) {
|
|
for (let y = -s; y <= s; y++) {
|
|
this.ctx.shadowOffsetX = x;
|
|
this.ctx.shadowOffsetY = y;
|
|
typeof w === "number" && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
|
|
}
|
|
}
|
|
this.ctx.restore();
|
|
}
|
|
drawSprite(img, spritePos, sWidth, sHeight, at, width, height) {
|
|
this.ctx.drawImage(
|
|
img,
|
|
spritePos.x,
|
|
spritePos.y,
|
|
sWidth,
|
|
sHeight,
|
|
at.x,
|
|
at.y,
|
|
width,
|
|
height
|
|
);
|
|
}
|
|
deferredDrawings = [];
|
|
deferDrawing(cb) {
|
|
this.deferredDrawings.push(cb);
|
|
}
|
|
drawDeferred() {
|
|
while (this.deferredDrawings.length) {
|
|
this.deferredDrawings.pop()?.();
|
|
}
|
|
}
|
|
setStyle(style) {
|
|
const ctx2 = this.ctx;
|
|
ctx2.fillStyle = style?.color || style?.fillColor || "black";
|
|
ctx2.strokeStyle = style?.color || style?.strokeColor || "black";
|
|
ctx2.lineWidth = style?.weight || 1;
|
|
ctx2.textAlign = style?.textAlign || ctx2.textAlign;
|
|
ctx2.textBaseline = style?.textBaseline || ctx2.textBaseline;
|
|
}
|
|
fillText(text, pos, maxWidth, style) {
|
|
this.setStyle(style);
|
|
this.ctx.fillText(text, pos.x, pos.y, maxWidth);
|
|
}
|
|
strokeText(text, pos, maxWidth, style) {
|
|
this.setStyle(style);
|
|
this.ctx.strokeText(text, pos.x, pos.y, maxWidth);
|
|
}
|
|
clearRect(at, width, height) {
|
|
this.ctx.clearRect(at.x, at.y, width, height);
|
|
}
|
|
// Interaction
|
|
mouseX = 0;
|
|
mouseY = 0;
|
|
registerDraggable(point, radius, style) {
|
|
if (this.draggables.find((d) => d.point === point)) return;
|
|
const id = this.addUIElement("circle", point, radius, {
|
|
fillColor: "#5533ff50",
|
|
strokeColor: "#5533ff50"
|
|
});
|
|
this.draggables.push({ point, radius, style, id });
|
|
}
|
|
unregisterDraggable(point) {
|
|
for (const d of this.draggables) {
|
|
if (d.point === point) {
|
|
this.removeUIElement(d.id);
|
|
}
|
|
}
|
|
this.draggables = this.draggables.filter((d) => d.point !== point);
|
|
}
|
|
registerClickable(p1, p2, cb) {
|
|
const top = Math.min(p1.y, p2.y);
|
|
const left = Math.min(p1.x, p2.x);
|
|
const bottom = Math.max(p1.y, p2.y);
|
|
const right = Math.max(p1.x, p2.x);
|
|
this.clickables.push({
|
|
onClick: cb,
|
|
checkBound: (p) => p.y >= top && p.x >= left && p.y <= bottom && p.x <= right
|
|
});
|
|
}
|
|
unregisterClickable(cb) {
|
|
this.clickables = this.clickables.filter((c) => c.onClick !== cb);
|
|
}
|
|
addDragEvents({
|
|
onDragEnd,
|
|
onDragStart,
|
|
onDrag,
|
|
point
|
|
}) {
|
|
const d = this.draggables.find((d2) => d2.point === point);
|
|
if (d) {
|
|
d.onDragEnd = onDragEnd;
|
|
d.onDragStart = onDragStart;
|
|
d.onDrag = onDrag;
|
|
}
|
|
}
|
|
onClick(_e) {
|
|
const mouse = new Vector(this.mouseX, this.mouseY);
|
|
for (const d of this.draggables) {
|
|
if (d.point.dist(mouse) <= d.radius) {
|
|
d.beingDragged = true;
|
|
d.onDragStart?.call(null);
|
|
this.dragTarget = d;
|
|
} else d.beingDragged = false;
|
|
}
|
|
for (const c of this.clickables) {
|
|
if (c.checkBound(mouse)) {
|
|
c.onClick();
|
|
}
|
|
}
|
|
}
|
|
offClick(_e) {
|
|
for (const d of this.draggables) {
|
|
d.beingDragged = false;
|
|
d.onDragEnd?.call(null);
|
|
}
|
|
this.dragTarget = void 0;
|
|
}
|
|
onDrag(e) {
|
|
const _rect = this._canvas.getBoundingClientRect();
|
|
this.mouseX = e.offsetX;
|
|
this.mouseY = e.offsetY;
|
|
for (const d of this.draggables.filter((d2) => d2.beingDragged)) {
|
|
d.point.add(e.movementX, e.movementY);
|
|
d.onDrag && d.onDrag({ x: e.movementX, y: e.movementY });
|
|
}
|
|
}
|
|
// UI Layer
|
|
uiElements = /* @__PURE__ */ new Map();
|
|
uiDrawing = {
|
|
rectangle: (...args) => {
|
|
!args[3].noFill && this.fillRect(args[0], args[1], args[2], args[3]);
|
|
!args[3].noStroke && this.drawRect(args[0], args[1], args[2], args[3]);
|
|
},
|
|
square: (...args) => {
|
|
!args[2].noFill && this.fillSquare(args[0], args[1], args[2]);
|
|
!args[2].noStroke && this.drawSquare(args[0], args[1], args[2]);
|
|
},
|
|
circle: (...args) => {
|
|
!args[2].noFill && this.fillCircle(args[0], args[1], args[2]);
|
|
!args[2].noStroke && this.drawCircle(args[0], args[1], args[2]);
|
|
}
|
|
};
|
|
drawUI() {
|
|
for (const [shape, ...args] of this.uiElements.values()) {
|
|
this.uiDrawing[shape].apply(null, args);
|
|
}
|
|
}
|
|
addUIElement(shape, ...args) {
|
|
const id = crypto.randomUUID();
|
|
for (const arg of args) {
|
|
delete arg.color;
|
|
}
|
|
this.uiElements.set(id, [shape, ...args]);
|
|
return id;
|
|
}
|
|
removeUIElement(id) {
|
|
this.uiElements.delete(id);
|
|
}
|
|
};
|
|
|
|
// https://jsr.io/@bearmetal/doodler/0.0.3/timing/EaseInOut.ts
|
|
var easeInOut = (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
|
|
|
|
// https://jsr.io/@bearmetal/doodler/0.0.3/timing/Map.ts
|
|
var map = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
|
|
|
|
// https://jsr.io/@bearmetal/doodler/0.0.3/zoomableCanvas.ts
|
|
var ZoomableDoodler = class extends Doodler {
|
|
scale = 1;
|
|
dragging = false;
|
|
origin = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
mouse = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
previousTouchLength;
|
|
touchTimer;
|
|
hasDoubleTapped = false;
|
|
zooming = false;
|
|
scaleAround = { x: 0, y: 0 };
|
|
maxScale = 4;
|
|
minScale = 1;
|
|
constructor(options, postInit) {
|
|
super(options, postInit);
|
|
this._canvas.addEventListener("wheel", (e) => {
|
|
this.scaleAtMouse(e.deltaY < 0 ? 1.1 : 0.9);
|
|
if (this.scale === 1) {
|
|
this.origin.x = 0;
|
|
this.origin.y = 0;
|
|
}
|
|
});
|
|
this._canvas.addEventListener("dblclick", (e) => {
|
|
e.preventDefault();
|
|
this.scale = 1;
|
|
this.origin.x = 0;
|
|
this.origin.y = 0;
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
});
|
|
this._canvas.addEventListener("mousedown", (e) => {
|
|
e.preventDefault();
|
|
this.dragging = true;
|
|
});
|
|
this._canvas.addEventListener("mouseup", (e) => {
|
|
e.preventDefault();
|
|
this.dragging = false;
|
|
});
|
|
this._canvas.addEventListener("mouseleave", (_e) => {
|
|
this.dragging = false;
|
|
});
|
|
this._canvas.addEventListener("mousemove", (e) => {
|
|
const prev = this.mouse;
|
|
this.mouse = {
|
|
x: e.offsetX,
|
|
y: e.offsetY
|
|
};
|
|
if (this.dragging && !this.dragTarget) this.drag(prev);
|
|
});
|
|
this._canvas.addEventListener("touchstart", (e) => {
|
|
e.preventDefault();
|
|
if (e.touches.length === 1) {
|
|
const t1 = e.touches.item(0);
|
|
if (t1) {
|
|
this.mouse = this.getTouchOffset({
|
|
x: t1.clientX,
|
|
y: t1.clientY
|
|
});
|
|
}
|
|
} else {
|
|
clearTimeout(this.touchTimer);
|
|
}
|
|
});
|
|
this._canvas.addEventListener("touchend", (e) => {
|
|
if (e.touches.length !== 2) {
|
|
this.previousTouchLength = void 0;
|
|
}
|
|
switch (e.touches.length) {
|
|
case 1:
|
|
break;
|
|
case 0:
|
|
if (!this.zooming) {
|
|
this.events.get("touchend")?.map((cb) => cb(e));
|
|
}
|
|
break;
|
|
}
|
|
this.dragging = e.touches.length === 1;
|
|
clearTimeout(this.touchTimer);
|
|
});
|
|
this._canvas.addEventListener("touchmove", (e) => {
|
|
e.preventDefault();
|
|
if (e.touches.length === 2) {
|
|
const t1 = e.touches.item(0);
|
|
const t2 = e.touches.item(1);
|
|
if (t1 && t2) {
|
|
const vect = OriginVector.from(
|
|
this.getTouchOffset({
|
|
x: t1.clientX,
|
|
y: t1.clientY
|
|
}),
|
|
{
|
|
x: t2.clientX,
|
|
y: t2.clientY
|
|
}
|
|
);
|
|
if (this.previousTouchLength) {
|
|
const diff = this.previousTouchLength - vect.mag();
|
|
this.scaleAt(vect.halfwayPoint, diff < 0 ? 1.01 : 0.99);
|
|
this.scaleAround = { ...vect.halfwayPoint };
|
|
}
|
|
this.previousTouchLength = vect.mag();
|
|
}
|
|
}
|
|
if (e.touches.length === 1) {
|
|
this.dragging === true;
|
|
const t1 = e.touches.item(0);
|
|
if (t1) {
|
|
const prev = this.mouse;
|
|
this.mouse = this.getTouchOffset({
|
|
x: t1.clientX,
|
|
y: t1.clientY
|
|
});
|
|
this.drag(prev);
|
|
}
|
|
}
|
|
});
|
|
this._canvas.addEventListener("touchstart", (e) => {
|
|
if (e.touches.length !== 1) return false;
|
|
if (!this.hasDoubleTapped) {
|
|
this.hasDoubleTapped = true;
|
|
setTimeout(() => this.hasDoubleTapped = false, 300);
|
|
return false;
|
|
}
|
|
if (this.scale > 1) {
|
|
this.frameCounter = map(this.scale, this.maxScale, 1, 0, 59);
|
|
this.zoomDirection = -1;
|
|
} else {
|
|
this.frameCounter = 0;
|
|
this.zoomDirection = 1;
|
|
}
|
|
if (this.zoomDirection > 0) {
|
|
this.scaleAround = { ...this.mouse };
|
|
}
|
|
this.events.get("doubletap")?.map((cb) => cb(e));
|
|
});
|
|
}
|
|
worldToScreen(x, y) {
|
|
x = x * this.scale + this.origin.x;
|
|
y = y * this.scale + this.origin.y;
|
|
return { x, y };
|
|
}
|
|
screenToWorld(x, y) {
|
|
x = (x - this.origin.x) / this.scale;
|
|
y = (y - this.origin.y) / this.scale;
|
|
return { x, y };
|
|
}
|
|
scaleAtMouse(scaleBy) {
|
|
if (this.scale === this.maxScale && scaleBy > 1) return;
|
|
this.scaleAt({
|
|
x: this.mouse.x,
|
|
y: this.mouse.y
|
|
}, scaleBy);
|
|
}
|
|
scaleAt(p, scaleBy) {
|
|
this.scale = Math.min(
|
|
Math.max(this.scale * scaleBy, this.minScale),
|
|
this.maxScale
|
|
);
|
|
this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
|
|
this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
|
|
this.constrainOrigin();
|
|
}
|
|
moveOrigin(motion) {
|
|
if (this.scale > 1) {
|
|
this.origin.x += motion.x;
|
|
this.origin.y += motion.y;
|
|
this.constrainOrigin();
|
|
}
|
|
}
|
|
drag(prev) {
|
|
if (this.scale > 1) {
|
|
const xOffset = this.mouse.x - prev.x;
|
|
const yOffset = this.mouse.y - prev.y;
|
|
this.origin.x += xOffset;
|
|
this.origin.y += yOffset;
|
|
this.constrainOrigin();
|
|
}
|
|
}
|
|
constrainOrigin() {
|
|
this.origin.x = Math.min(
|
|
Math.max(
|
|
this.origin.x,
|
|
-this._canvas.width * this.scale + this._canvas.width
|
|
),
|
|
0
|
|
);
|
|
this.origin.y = Math.min(
|
|
Math.max(
|
|
this.origin.y,
|
|
-this._canvas.height * this.scale + this._canvas.height
|
|
),
|
|
0
|
|
);
|
|
}
|
|
draw(time) {
|
|
this.ctx.setTransform(
|
|
this.scale,
|
|
0,
|
|
0,
|
|
this.scale,
|
|
this.origin.x,
|
|
this.origin.y
|
|
);
|
|
this.animateZoom();
|
|
this.ctx.fillStyle = this.bg;
|
|
this.ctx.fillRect(0, 0, this.width / this.scale, this.height / this.scale);
|
|
super.draw(time);
|
|
}
|
|
getTouchOffset(p) {
|
|
const { x, y } = this._canvas.getBoundingClientRect();
|
|
const offsetX = p.x - x;
|
|
const offsetY = p.y - y;
|
|
return {
|
|
x: offsetX,
|
|
y: offsetY
|
|
};
|
|
}
|
|
onDrag(e) {
|
|
const d = {
|
|
...e,
|
|
movementX: e.movementX / this.scale,
|
|
movementY: e.movementY / this.scale
|
|
};
|
|
super.onDrag(d);
|
|
const { x, y } = this.screenToWorld(e.offsetX, e.offsetY);
|
|
this.mouseX = x;
|
|
this.mouseY = y;
|
|
}
|
|
zoomDirection = -1;
|
|
frameCounter = 60;
|
|
animateZoom() {
|
|
if (this.frameCounter < 60) {
|
|
const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1));
|
|
switch (this.zoomDirection) {
|
|
case 1:
|
|
{
|
|
this.scale = map(frame, 0, 1, 1, this.maxScale);
|
|
}
|
|
break;
|
|
case -1:
|
|
{
|
|
this.scale = map(frame, 0, 1, this.maxScale, 1);
|
|
}
|
|
break;
|
|
}
|
|
this.origin.x = this.scaleAround.x - this.scaleAround.x * this.scale;
|
|
this.origin.y = this.scaleAround.y - this.scaleAround.y * this.scale;
|
|
this.constrainOrigin();
|
|
this.frameCounter++;
|
|
}
|
|
}
|
|
events = /* @__PURE__ */ new Map();
|
|
registerEvent(eventName, cb) {
|
|
let events = this.events.get(eventName);
|
|
if (!events) events = this.events.set(eventName, []).get(eventName);
|
|
events.push(cb);
|
|
}
|
|
};
|
|
|
|
// lib/resources.ts
|
|
var ResourceManager = class {
|
|
resources = /* @__PURE__ */ new Map();
|
|
statuses = /* @__PURE__ */ new Map();
|
|
get(name) {
|
|
if (!this.resources.has(name)) {
|
|
throw new Error(`Resource ${name} not found`);
|
|
}
|
|
return this.resources.get(name);
|
|
}
|
|
set(name, value) {
|
|
if (typeof value.addEventListener === "function") {
|
|
this.statuses.set(
|
|
name,
|
|
new Promise((resolve) => {
|
|
const onload = () => {
|
|
this.resources.set(name, value);
|
|
resolve(true);
|
|
value.removeEventListener("load", onload);
|
|
};
|
|
value.addEventListener("load", onload);
|
|
})
|
|
);
|
|
} else {
|
|
console.warn("Resource added was not a loadable resource");
|
|
}
|
|
this.resources.set(name, value);
|
|
}
|
|
delete(name) {
|
|
this.resources.delete(name);
|
|
}
|
|
ready() {
|
|
return Promise.all(Array.from(this.statuses.values()));
|
|
}
|
|
};
|
|
|
|
// ui/button.ts
|
|
function addButton(props) {
|
|
const doodler2 = getContextItem("doodler");
|
|
const { text, onClick, style } = props;
|
|
const { x, y } = props.at[1].copy().sub(props.at[0]);
|
|
const id = doodler2.addUIElement(
|
|
"rectangle",
|
|
props.at[0],
|
|
x,
|
|
y,
|
|
style
|
|
);
|
|
doodler2.registerClickable(props.at[0], props.at[1], onClick);
|
|
return {
|
|
id,
|
|
text,
|
|
onClick,
|
|
style
|
|
};
|
|
}
|
|
|
|
// state/machine.ts
|
|
var StateMachine = class {
|
|
_states = /* @__PURE__ */ new Map();
|
|
currentState;
|
|
update(dt, ctx2) {
|
|
this.currentState?.update(dt, ctx2);
|
|
}
|
|
get current() {
|
|
return this.currentState;
|
|
}
|
|
get states() {
|
|
return this._states;
|
|
}
|
|
addState(state2) {
|
|
this.states.set(state2.name, state2);
|
|
}
|
|
transitionTo(state2) {
|
|
if (!this.current) {
|
|
this.currentState = this._states.get(state2);
|
|
this.currentState.start();
|
|
return;
|
|
}
|
|
if (this.current?.canTransitionTo(state2) && this._states.has(state2)) {
|
|
this.current.stop();
|
|
this.currentState = this._states.get(state2);
|
|
this.current.start();
|
|
}
|
|
}
|
|
};
|
|
var State = class {
|
|
stateMachine;
|
|
constructor(stateMachine) {
|
|
this.stateMachine = stateMachine;
|
|
}
|
|
canTransitionTo(state2) {
|
|
return this.validTransitions.has(state2);
|
|
}
|
|
};
|
|
|
|
// state/states/EditTrainState.ts
|
|
var EditTrainState = class extends State {
|
|
name = 4 /* EDIT_TRAIN */;
|
|
validTransitions = /* @__PURE__ */ new Set([
|
|
1 /* RUNNING */,
|
|
2 /* PAUSED */
|
|
]);
|
|
update(dt) {
|
|
throw new Error("Method not implemented.");
|
|
}
|
|
start() {
|
|
throw new Error("Method not implemented.");
|
|
}
|
|
stop() {
|
|
throw new Error("Method not implemented.");
|
|
}
|
|
};
|
|
|
|
// state/states/EditTrackState.ts
|
|
var EditTrackState = class extends State {
|
|
name = 3 /* EDIT_TRACK */;
|
|
validTransitions = /* @__PURE__ */ new Set([
|
|
1 /* RUNNING */,
|
|
2 /* PAUSED */
|
|
]);
|
|
heldEvents = /* @__PURE__ */ new Map();
|
|
update(dt) {
|
|
const inputManager2 = getContextItem("inputManager");
|
|
const track = getContextItem("track");
|
|
const firstSegment = track.firstSegment;
|
|
if (firstSegment) {
|
|
const firstPoint = firstSegment.points[0].copy();
|
|
const { x, y } = inputManager2.getMouseLocation();
|
|
firstSegment.points.forEach((p, i) => {
|
|
const relativePoint = Vector.sub(p, firstPoint);
|
|
p.set(x, y);
|
|
p.add(relativePoint);
|
|
});
|
|
}
|
|
track.draw(true);
|
|
}
|
|
start() {
|
|
const inputManager2 = getContextItem("inputManager");
|
|
this.heldEvents.set("e", inputManager2.offKey("e"));
|
|
this.heldEvents.set("Escape", inputManager2.offKey("Escape"));
|
|
inputManager2.onKey("e", () => {
|
|
const state2 = getContextItem("state");
|
|
state2.transitionTo(1 /* RUNNING */);
|
|
});
|
|
const track = getContextItem("track");
|
|
setContextItem("trackCopy", track.copy());
|
|
inputManager2.onKey("Escape", () => {
|
|
const trackCopy = getContextItem("trackCopy");
|
|
setContextItem("track", trackCopy);
|
|
const state2 = getContextItem("state");
|
|
state2.transitionTo(1 /* RUNNING */);
|
|
});
|
|
}
|
|
stop() {
|
|
if (this.heldEvents.size > 0) {
|
|
for (const [key, cb] of this.heldEvents) {
|
|
if (cb) {
|
|
getContextItem("inputManager").onKey(key, cb);
|
|
}
|
|
this.heldEvents.delete(key);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// state/states/PausedState.ts
|
|
var PausedState = class extends State {
|
|
name = 2 /* PAUSED */;
|
|
validTransitions = /* @__PURE__ */ new Set([
|
|
0 /* LOAD */,
|
|
1 /* RUNNING */,
|
|
3 /* EDIT_TRACK */,
|
|
4 /* EDIT_TRAIN */
|
|
]);
|
|
update(dt) {
|
|
throw new Error("Method not implemented.");
|
|
}
|
|
start() {
|
|
throw new Error("Method not implemented.");
|
|
}
|
|
stop() {
|
|
throw new Error("Method not implemented.");
|
|
}
|
|
};
|
|
|
|
// state/states/RunningState.ts
|
|
var RunningState = class extends State {
|
|
name = 1 /* RUNNING */;
|
|
validTransitions = /* @__PURE__ */ new Set([
|
|
2 /* PAUSED */,
|
|
3 /* EDIT_TRACK */
|
|
]);
|
|
update(dt) {
|
|
const ctx2 = getContext();
|
|
ctx2.track.draw();
|
|
for (const train of ctx2.trains) {
|
|
train.draw();
|
|
}
|
|
}
|
|
start() {
|
|
}
|
|
stop() {
|
|
}
|
|
};
|
|
|
|
// inputs.ts
|
|
function bootstrapInputs() {
|
|
const inputManager2 = getContextItem("inputManager");
|
|
inputManager2.onKey("e", () => {
|
|
const state2 = getContextItem("state");
|
|
state2.transitionTo(3 /* EDIT_TRACK */);
|
|
});
|
|
}
|
|
|
|
// math/path.ts
|
|
var PathSegment = class {
|
|
points;
|
|
length;
|
|
constructor(points) {
|
|
this.points = points;
|
|
this.length = this.calculateApproxLength(100);
|
|
}
|
|
getPointAtT(t) {
|
|
const [a, b, c, d] = this.points;
|
|
const res = a.copy();
|
|
res.add(Vector.add(a.copy().mult(-3), b.copy().mult(3)).mult(t));
|
|
res.add(
|
|
Vector.add(
|
|
Vector.add(a.copy().mult(3), b.copy().mult(-6)),
|
|
c.copy().mult(3)
|
|
).mult(Math.pow(t, 2))
|
|
);
|
|
res.add(
|
|
Vector.add(
|
|
Vector.add(a.copy().mult(-1), b.copy().mult(3)),
|
|
Vector.add(c.copy().mult(-3), d.copy())
|
|
).mult(Math.pow(t, 3))
|
|
);
|
|
return res;
|
|
}
|
|
getClosestPoint(v) {
|
|
const samples = 25;
|
|
const resolution = 1 / samples;
|
|
let closest = this.points[0];
|
|
let closestDistance = this.points[0].dist(v);
|
|
let closestT = 0;
|
|
for (let i = 0; i < samples; i++) {
|
|
const point = this.getPointAtT(i * resolution);
|
|
const distance = v.dist(point);
|
|
if (distance < closestDistance) {
|
|
closest = point;
|
|
closestDistance = distance;
|
|
closestT = i * resolution;
|
|
}
|
|
}
|
|
return [closest, closestDistance, closestT];
|
|
}
|
|
getPointsWithinRadius(v, r) {
|
|
const points = [];
|
|
const samples = 25;
|
|
const resolution = 1 / samples;
|
|
for (let i = 0; i < samples; i++) {
|
|
const point = this.getPointAtT(i * resolution);
|
|
const distance = v.dist(point);
|
|
if (distance < r) {
|
|
points.push([i * resolution, this]);
|
|
}
|
|
}
|
|
return points;
|
|
}
|
|
tangent(t) {
|
|
const [a, b, c, d] = this.points;
|
|
const res = Vector.sub(b, a).mult(3 * Math.pow(1 - t, 2));
|
|
res.add(
|
|
Vector.add(
|
|
Vector.sub(c, b).mult(6 * (1 - t) * t),
|
|
Vector.sub(d, c).mult(3 * Math.pow(t, 2))
|
|
)
|
|
);
|
|
return res;
|
|
}
|
|
doesIntersectCircle(x, y, r) {
|
|
const v = new Vector(x, y);
|
|
const samples = 25;
|
|
const resolution = 1 / samples;
|
|
let distance = Infinity;
|
|
let t;
|
|
for (let i = 0; i < samples; i++) {
|
|
if (i !== samples - 1) {
|
|
const a = this.getPointAtT(i * resolution);
|
|
const b = this.getPointAtT((i + 1) * resolution);
|
|
const ac = Vector.sub(v, a);
|
|
const ab = Vector.sub(b, a);
|
|
const d = Vector.add(Vector.vectorProjection(ac, ab), a);
|
|
const ad = Vector.sub(d, a);
|
|
const k = Math.abs(ab.x) > Math.abs(ab.y) ? ad.x / ab.x : ad.y / ab.y;
|
|
let dist;
|
|
if (k <= 0) {
|
|
dist = Vector.hypot2(v, a);
|
|
} else if (k >= 1) {
|
|
dist = Vector.hypot2(v, b);
|
|
}
|
|
dist = Vector.hypot2(v, d);
|
|
if (dist < distance) {
|
|
distance = dist;
|
|
t = i * resolution;
|
|
}
|
|
}
|
|
}
|
|
if (distance < r) return t;
|
|
return false;
|
|
}
|
|
calculateApproxLength(resolution = 25) {
|
|
const stepSize = 1 / resolution;
|
|
const points = [];
|
|
for (let i = 0; i <= resolution; i++) {
|
|
const current = stepSize * i;
|
|
points.push(this.getPointAtT(current));
|
|
}
|
|
this.length = points.reduce((acc, cur) => {
|
|
const prev = acc.prev;
|
|
acc.prev = cur;
|
|
if (!prev) return acc;
|
|
acc.length += cur.dist(prev);
|
|
return acc;
|
|
}, { prev: void 0, length: 0 }).length;
|
|
return this.length;
|
|
}
|
|
calculateEvenlySpacedPoints(spacing, resolution = 1) {
|
|
const points = [];
|
|
points.push(this.points[0]);
|
|
let prev = points[0];
|
|
let distSinceLastEvenPoint = 0;
|
|
let t = 0;
|
|
const div = Math.ceil(this.length * resolution * 10);
|
|
while (t < 1) {
|
|
t += 1 / div;
|
|
const point = this.getPointAtT(t);
|
|
distSinceLastEvenPoint += prev.dist(point);
|
|
if (distSinceLastEvenPoint >= spacing) {
|
|
const overshoot = distSinceLastEvenPoint - spacing;
|
|
const evenPoint = Vector.add(
|
|
point,
|
|
Vector.sub(point, prev).normalize().mult(overshoot)
|
|
);
|
|
distSinceLastEvenPoint = overshoot;
|
|
points.push(evenPoint);
|
|
prev = evenPoint;
|
|
}
|
|
prev = point;
|
|
}
|
|
return points;
|
|
}
|
|
};
|
|
|
|
// track/system.ts
|
|
var TrackSystem = class _TrackSystem {
|
|
segments = /* @__PURE__ */ new Map();
|
|
doodler;
|
|
constructor(segments) {
|
|
this.doodler = getContextItem("doodler");
|
|
for (const segment of segments) {
|
|
this.segments.set(segment.id, segment);
|
|
}
|
|
}
|
|
get firstSegment() {
|
|
return this.segments.values().next().value;
|
|
}
|
|
draw(showControls = false) {
|
|
for (const segment of this.segments.values()) {
|
|
segment.draw(showControls);
|
|
}
|
|
try {
|
|
if (getContextItem("showEnds")) {
|
|
const ends = this.findEnds();
|
|
for (const end of ends) {
|
|
this.doodler.fillCircle(end.pos, 2, {
|
|
color: "red"
|
|
// weight: 3,
|
|
});
|
|
if (getContextItem("debug")) {
|
|
this.doodler.line(
|
|
end.pos,
|
|
end.pos.copy().add(end.tangent.copy().mult(20)),
|
|
{
|
|
color: "blue"
|
|
// weight: 3,
|
|
}
|
|
);
|
|
}
|
|
}
|
|
}
|
|
} catch {
|
|
setDefaultContext({ showEnds: false });
|
|
}
|
|
}
|
|
findEnds() {
|
|
const ends = [];
|
|
for (const segment of this.segments.values()) {
|
|
const [a, b, c, d] = segment.points;
|
|
{
|
|
const tangent = Vector.sub(a, b).normalize();
|
|
const pos = a.copy();
|
|
ends.push({ pos, segment, tangent });
|
|
}
|
|
{
|
|
const tangent = Vector.sub(d, c).normalize();
|
|
const pos = d.copy();
|
|
ends.push({ pos, segment, tangent });
|
|
}
|
|
}
|
|
return ends;
|
|
}
|
|
serialize() {
|
|
return this.segments.values().map((s) => s.serialize()).toArray();
|
|
}
|
|
copy() {
|
|
const track = new _TrackSystem([]);
|
|
for (const segment of this.segments.values()) {
|
|
track.segments.set(segment.id, segment.copy());
|
|
}
|
|
return track;
|
|
}
|
|
static deserialize(data) {
|
|
if (data.length === 0) return void 0;
|
|
const track = new _TrackSystem([]);
|
|
const neighborMap = /* @__PURE__ */ new Map();
|
|
for (const segment of data) {
|
|
track.segments.set(segment.id, TrackSegment.deserialize(segment));
|
|
}
|
|
for (const segment of track.segments.values()) {
|
|
segment.setTrack(track);
|
|
const neighbors = neighborMap.get(segment.id);
|
|
if (neighbors) {
|
|
segment.backNeighbours = neighbors[1].map(
|
|
(id) => track.segments.get(id)
|
|
).filter((s) => s);
|
|
segment.frontNeighbours = neighbors[0].map(
|
|
(id) => track.segments.get(id)
|
|
).filter((s) => s);
|
|
}
|
|
}
|
|
return track;
|
|
}
|
|
};
|
|
var TrackSegment = class _TrackSegment extends PathSegment {
|
|
frontNeighbours = [];
|
|
backNeighbours = [];
|
|
track;
|
|
doodler;
|
|
id;
|
|
constructor(p, id) {
|
|
super(p);
|
|
this.doodler = getContextItem("doodler");
|
|
this.id = id ?? crypto.randomUUID();
|
|
}
|
|
setTrack(t) {
|
|
this.track = t;
|
|
}
|
|
draw(showControls = false) {
|
|
this.doodler.drawBezier(
|
|
this.points[0],
|
|
this.points[1],
|
|
this.points[2],
|
|
this.points[3],
|
|
{
|
|
strokeColor: "#ffffff50"
|
|
}
|
|
);
|
|
if (showControls) {
|
|
this.doodler.drawCircle(this.points[1], 4, {
|
|
color: "red",
|
|
weight: 3
|
|
});
|
|
this.doodler.drawCircle(this.points[2], 4, {
|
|
color: "red",
|
|
weight: 3
|
|
});
|
|
}
|
|
}
|
|
serialize() {
|
|
return {
|
|
p: this.points.map((p) => p.array()),
|
|
id: this.id,
|
|
bNeighbors: this.backNeighbours.map((n) => n.id),
|
|
fNeighbors: this.frontNeighbours.map((n) => n.id)
|
|
};
|
|
}
|
|
copy() {
|
|
return new _TrackSegment(
|
|
this.points.map((p) => p.copy()),
|
|
this.id
|
|
);
|
|
}
|
|
static deserialize(data) {
|
|
return new _TrackSegment(
|
|
data.p.map((p) => new Vector(p[0], p[1], p[2])),
|
|
data.id
|
|
);
|
|
}
|
|
};
|
|
|
|
// track/shapes.ts
|
|
var StraightTrack = class extends TrackSegment {
|
|
constructor(start) {
|
|
start = start || new Vector(100, 100);
|
|
super([
|
|
start,
|
|
start.copy().add(25, 0),
|
|
start.copy().add(75, 0),
|
|
start.copy().add(100, 0)
|
|
]);
|
|
}
|
|
};
|
|
|
|
// state/states/LoadState.ts
|
|
var LoadState = class extends State {
|
|
name = 0 /* LOAD */;
|
|
validTransitions = /* @__PURE__ */ new Set([
|
|
1 /* RUNNING */
|
|
]);
|
|
update() {
|
|
}
|
|
start() {
|
|
const track = this.loadTrack() ?? new TrackSystem([new StraightTrack()]);
|
|
setContextItem("track", track);
|
|
const trains = this.loadTrains() ?? [];
|
|
setContextItem("trains", trains);
|
|
const resources2 = new ResourceManager();
|
|
setContextItem("resources", resources2);
|
|
const inputManager2 = new InputManager();
|
|
setContextItem("inputManager", inputManager2);
|
|
bootstrapInputs();
|
|
this.stateMachine.transitionTo(1 /* RUNNING */);
|
|
}
|
|
stop() {
|
|
}
|
|
loadTrack() {
|
|
const track = TrackSystem.deserialize(
|
|
JSON.parse(localStorage.getItem("track") || "[]")
|
|
);
|
|
return track;
|
|
}
|
|
loadTrains() {
|
|
const trains = JSON.parse(localStorage.getItem("trains") || "[]");
|
|
return trains;
|
|
}
|
|
};
|
|
|
|
// state/states/index.ts
|
|
function bootstrapGameStateMachine() {
|
|
const stateMachine = new StateMachine();
|
|
stateMachine.addState(new LoadState(stateMachine));
|
|
stateMachine.addState(new RunningState(stateMachine));
|
|
stateMachine.addState(new PausedState(stateMachine));
|
|
stateMachine.addState(new EditTrackState(stateMachine));
|
|
stateMachine.addState(new EditTrainState(stateMachine));
|
|
stateMachine.transitionTo(0 /* LOAD */);
|
|
return stateMachine;
|
|
}
|
|
|
|
// main.ts
|
|
var inputManager = new InputManager();
|
|
var resources = new ResourceManager();
|
|
var doodler = new ZoomableDoodler({
|
|
fillScreen: true,
|
|
bg: "#302040"
|
|
});
|
|
setDefaultContext({
|
|
inputManager,
|
|
doodler,
|
|
resources,
|
|
debug: true,
|
|
showEnds: true
|
|
});
|
|
var state = bootstrapGameStateMachine();
|
|
setContextItem("state", state);
|
|
doodler.init();
|
|
addButton({
|
|
text: "Hello World!",
|
|
onClick: () => {
|
|
console.log("Hello World!");
|
|
},
|
|
at: [
|
|
new Vector(10, doodler.height - 50),
|
|
new Vector(110, doodler.height - 10)
|
|
],
|
|
style: {
|
|
fillColor: "blue",
|
|
color: "white"
|
|
}
|
|
});
|
|
doodler.createLayer((_, __, dTime) => {
|
|
state.update(dTime);
|
|
});
|
|
})();
|