Schluffe/nage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

houston...

Browse Source
This commit is contained in:
kolaflash
2026-01-06 14:12:21 +01:00
parent 5dd5f13c43
commit c52b62cdaf
9 changed files with 95 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev/GraphBrowser.tsx
+32 -21
View File
@@ -1,5 +1,6 @@
import "./GraphBrowser.css";
import { type Component, createSignal, onMount } from "solid-js";
import { currentScene, sceneCache } from "#/engine/Scene.ts";
import {
type Edge,
type Graph,
@@ -92,25 +93,13 @@ function hookEdge<T extends PhysicsPartial>([a, b]: Edge<T>): void {
}
export const GraphBrowser: Component<{
graph: Graph<PhysicsPartial & { label: string }>;
graph: Graph<string>;
}> = (props) => {
let canvasRef!: HTMLCanvasElement;
const [width] = createSignal(300);
const [height] = createSignal(300);
const nodes: Array<Node<PhysicsPartial>> = [...props.graph.keys()];
const edges: Array<Edge<PhysicsPartial>> = props.graph.entries().reduce(
(acc, [node, neighbours]) => {
for (const neighbour of neighbours) {
acc.push([node, neighbour]);
}
return acc;
},
[] as Array<Edge<PhysicsPartial>>,
);
onMount(() => {
const ctx: CanvasRenderingContext2D = canvasRef.getContext("2d", {
alpha: false,
@@ -118,8 +107,34 @@ export const GraphBrowser: Component<{
const damping = 0.8;
const activeNode = props.graph.keys().find((_, i) => i === 3);
const activeNeighbours = getNeighbours(props.graph, activeNode);
const nodes: Array<Node<PhysicsPartial & { name: string }>> = [
...props.graph.keys(),
].map((node: string) => ({
name: node,
position: createVector(Math.random(), Math.random()),
velocity: createVector(),
acceleration: createVector(),
}));
const edges: Array<Edge<PhysicsPartial>> = props.graph.entries().reduce(
(acc, [name, neighbours]) => {
const node = nodes.find((n) => n.name === name)!;
for (const neighbour of neighbours) {
const n = nodes.find((node) => node.name === neighbour);
if (n !== undefined) {
acc.push([node, n]);
}
}
return acc;
},
[] as Array<Edge<PhysicsPartial>>,
);
const activeNode = props.graph
.keys()
.find((name) => name === currentScene.data.name);
const activeNeighbours = getNeighbours(props.graph, activeNode!);
const animate = (): void => {
applyRepulsion(nodes);
@@ -151,14 +166,10 @@ export const GraphBrowser: Component<{
}
for (const node of nodes) {
if (node === activeNode) {
if (node.name === activeNode) {
drawNode(node, ctx, "#ee459e");
} else {
if (
activeNeighbours.includes(
node as PhysicsPartial & { label: string },
)
) {
if (activeNeighbours.includes(node.name)) {
drawNode(node, ctx, "#6572f5");
} else {
drawNode(node, ctx, "#404249");
dev/main.tsx
+8 -45
View File
@@ -10,10 +10,13 @@ import {
FileIcon,
ZoomScanIcon,
} from "#/dev/icons/index.ts";
import { currentScene, loadScene, type SceneData } from "#/engine/Scene.ts";
import {
currentScene,
type SceneData,
sceneGraph,
setScene,
} from "#/engine/Scene.ts";
import { setScale, viewport } from "#/engine/Viewport.ts";
import { createGraph, type Edge, type Node } from "#/lib/Graph.ts";
import { createVector, type Vector } from "#/lib/Vector.ts";
import { GraphBrowser } from "./GraphBrowser.tsx";
async function fetchScenes(): Promise<string[]> {
@@ -33,46 +36,6 @@ function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
const scenesRaw = await fetchScenes();
type TestNode = Node<{
position: Vector;
velocity: Vector;
acceleration: Vector;
label: string;
}>;
function createTestNode(label: string): TestNode {
return {
label,
position: createVector(Math.random(), Math.random()),
velocity: createVector(),
acceleration: createVector(),
};
}
const nodes: Array<TestNode> = [
createTestNode("foo"),
createTestNode("bar"),
createTestNode("lol"),
createTestNode("hai"),
createTestNode("sea"),
createTestNode("vot"),
createTestNode("zoe"),
createTestNode("asm"),
];
const edges: Array<Edge<TestNode>> = [
[nodes[0], nodes[1]],
[nodes[0], nodes[2]],
[nodes[1], nodes[2]],
[nodes[2], nodes[3]],
[nodes[4], nodes[5]],
[nodes[4], nodes[3]],
[nodes[5], nodes[6]],
[nodes[3], nodes[6]],
];
const graph = createGraph<TestNode>(nodes, edges);
const DevTools: Component<{ gameContainer: HTMLElement }> = ({
gameContainer,
}) => {
@@ -103,7 +66,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
const setCurrentScene = async (items: ItemsRef): Promise<void> => {
const name = items.find((ref) => ref.item.isActive)!.item.label;
await loadScene(name);
await setScene(name);
setEntities(mapSceneEntities(currentScene.data));
};
@@ -177,7 +140,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
<ItemList name="Scenes" handler={setCurrentScene} items={scenes} />
<ItemList name="Entities" handler={setActiveEntity} items={entities} />
<GraphBrowser graph={graph} />
<GraphBrowser graph={sceneGraph} />
</div>
<div class="tool-bar-resize" onMouseDown={startResizing}></div>
</div>
engine/Scene.ts
+42 -41
View File
@@ -1,3 +1,4 @@
import { useWithAsyncCache } from "#/lib/cache.ts";
import { type Graph, getNeighbours } from "#/lib/Graph.ts";
import {
type Animate as AnimateEntity,
@@ -38,7 +39,38 @@ export type SceneChangeCallback = (from: Scene, to: Scene) => void;
const sceneDataMap = new Map<string, SceneData>();
const sceneProcessMap = new Map<string, Process>();
const sceneEntiyMap = new Map<string, EntityInstanceMap>();
const sceneGraph: Graph<string> = new Map();
export const sceneGraph: Graph<string> = new Map();
export const [loadScene, sceneCache] = useWithAsyncCache(
async (name: string) => {
await import(`#/scenes/${name}/index.ts`);
const data = sceneDataMap.get(name)!;
const entityInstanceMap = sceneEntiyMap.get(name)!;
entityInstanceMap.clear();
Promise.all(
data.entities.map(async (entity: Entity<unknown>) => {
await import(`#/entities/${entity.name}/index.ts`);
if (!entityInstanceMap.has(entity.name)) {
entityInstanceMap.set(entity.name, {
animate: entityAnimateMap.get(entity.name) ?? (() => {}),
process: entityProcessMap.get(entity.name) ?? (() => {}),
instances: [],
});
}
const instance: Entity<unknown> = structuredClone({
...entityMap.get(entity.name)!,
...entity,
});
entityInstanceMap.get(entity.name)!.instances.push(instance);
}),
);
},
);
export const currentScene: Scene = {
data: {
@@ -77,8 +109,8 @@ function linkScenes(a: string, b: string): void {
export function useScene(data: SceneData): {
linkScenes: <T extends readonly string[]>(
ids: T,
) => (id: T[number]) => Promise<void>;
names: T,
) => (name: T[number]) => Promise<void>;
process: (fn: Process) => void;
} {
sceneDataMap.set(data.name, data);
@@ -91,7 +123,7 @@ export function useScene(data: SceneData): {
}
return async (id) => {
return changeScene(id);
return setScene(id);
};
},
process(fn) {
@@ -104,48 +136,17 @@ export function useScene(data: SceneData): {
};
}
export function changeScene(id: string): Promise<void> {
const data = sceneDataMap.get(id)!;
const process = sceneProcessMap.get(id)!;
const entityInstanceMap = sceneEntiyMap.get(id)!;
for (const neighbour of getNeighbours(sceneGraph, id)) {
export async function setScene(name: string): Promise<void> {
await loadScene(name);
for (const neighbour of getNeighbours(sceneGraph, name)) {
if (!sceneCache.has(neighbour)) {
sceneCache.set(neighbour, loadScene(neighbour));
}
}
currentScene.data = data;
currentScene.process = process;
currentScene.entityInstanceMap = entityInstanceMap;
}
export async function loadScene(id: string): Promise<void> {
await import(`#/scenes/${id}/index.ts`);
const data = sceneDataMap.get(id)!;
const process = sceneProcessMap.get(id)!;
const entityInstanceMap = sceneEntiyMap.get(id)!;
entityInstanceMap.clear();
Promise.all(
data.entities.map(async (entity: Entity<unknown>) => {
await import(`#/entities/${entity.name}/index.ts`);
if (!entityInstanceMap.has(entity.name)) {
entityInstanceMap.set(entity.name, {
animate: entityAnimateMap.get(entity.name) ?? (() => {}),
process: entityProcessMap.get(entity.name) ?? (() => {}),
instances: [],
});
}
const instance: Entity<unknown> = structuredClone({
...entityMap.get(entity.name)!,
...entity,
});
entityInstanceMap.get(entity.name)!.instances.push(instance);
}),
);
const data = sceneDataMap.get(name)!;
const process = sceneProcessMap.get(name)!;
const entityInstanceMap = sceneEntiyMap.get(name)!;
currentScene.data = data;
currentScene.process = process;
lib/cache.ts
+4 -4
View File
@@ -1,7 +1,7 @@
export type Cache<T> = Map<string, T>;
export type AsyncCache<T> = Map<string, Promise<T>>;
export function withCache<T, U extends (...args: unknown[]) => T>(
export function withCache<T, U extends (...args: any[]) => T>(
callback: U,
key: string,
cache: Cache<T>,
@@ -18,7 +18,7 @@ export function withCache<T, U extends (...args: unknown[]) => T>(
};
}
export function withAsyncCache<T, U extends (...args: unknown[]) => Promise<T>>(
export function withAsyncCache<T, U extends (...args: any[]) => Promise<T>>(
callback: U,
key: string,
cache: AsyncCache<T>,
@@ -36,7 +36,7 @@ export function withAsyncCache<T, U extends (...args: unknown[]) => Promise<T>>(
}
export function useWithCache<T>(
callback: (...args: unknown[]) => T,
callback: (...args: any[]) => T,
): [(uri: string) => T, Cache<T>] {
const cache: Cache<T> = new Map();
@@ -44,7 +44,7 @@ export function useWithCache<T>(
}
export function useWithAsyncCache<T>(
callback: (...args: unknown[]) => Promise<T>,
callback: (...args: any[]) => Promise<T>,
): [(uri: string) => Promise<T>, AsyncCache<T>] {
const cache: AsyncCache<T> = new Map();
main.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { currentScene, loadScene } from "#/engine/Scene.ts";
import { currentScene, setScene } from "#/engine/Scene.ts";
import {
initViewport,
resetCtx,
@@ -23,7 +23,7 @@ function animate(timestamp: number): void {
}
initViewport();
await loadScene("testScene");
await setScene("testScene");
resizeCanvas(currentScene.data.width, currentScene.data.height);
self.addEventListener("resize", () => {
scenes/barScene/data.json
+2 -2
View File
@@ -1,7 +1,7 @@
{
"name": "barScene",
"width": 80,
"height": 48,
"width": 240,
"height": 160,
"entities": [
{
"name": "fooEntity",
scenes/barScene/index.ts
+1 -3
View File
@@ -3,8 +3,6 @@ import data from "./data.json";
const { process, linkScenes } = useScene(data);
// const changeScene = linkScenes(["testScene"] as const);
// changeScene("testScene");
linkScenes(["testScene"] as const);
process((_ctx, _delta) => {});
scenes/fooScene/index.ts
+1 -3
View File
@@ -3,8 +3,6 @@ import data from "./data.json";
const { process, linkScenes } = useScene(data);
// const changeScene = linkScenes(["testScene"] as const);
// changeScene("testScene");
linkScenes(["barScene"] as const);
process((_ctx, _delta) => {});
scenes/testScene/index.ts
+3 -1
View File
@@ -1,6 +1,8 @@
import { useScene } from "#/engine/Scene.ts";
import data from "./data.json";
const { process } = useScene(data);
const { process, linkScenes } = useScene(data);
linkScenes(["fooScene"] as const);
process((_ctx, _delta) => {});