From 415a0c6b6f9ffa615dd16fd4c84cabca00c7787c Mon Sep 17 00:00:00 2001 From: kolaflash Date: Wed, 31 Dec 2025 20:50:02 +0100 Subject: [PATCH] it works again --- dev/ItemList.tsx | 58 ++++++++++++++++++++++++++--------------- dev/main.tsx | 67 +++++++++++++++--------------------------------- 2 files changed, 57 insertions(+), 68 deletions(-) diff --git a/dev/ItemList.tsx b/dev/ItemList.tsx index 9f042d7..f7c9005 100644 --- a/dev/ItemList.tsx +++ b/dev/ItemList.tsx @@ -19,17 +19,19 @@ import { export type ListItem = { label: string; isActive: boolean }; -export type ItemHandler = (list: Array, index: number) => void; +export type ItemsRef = Array<{ item: ListItem; index: number }>; + +export type ItemHandler = (items: ItemsRef) => void; export type Direction = "default" | "asc" | "desc"; -export function mapActiveItem( - items: Array, - index: number, -): Array { - return items.map((item, idx) => ({ - ...item, - isActive: idx === index, +function mapActiveItem(items: ItemsRef, index: number): ItemsRef { + return items.map((ref, idx) => ({ + item: { + ...ref.item, + isActive: idx === index, + }, + index: ref.index, })); } @@ -65,31 +67,44 @@ function useDirection( ]; } +function createItemsRef(items: Array): ItemsRef { + return items.map((item, index) => ({ + item, + index, + })); +} + export const ItemList: Component<{ name: string; - items: Accessor>; + items: Accessor; handler: ItemHandler; }> = (props) => { const [showList, setShowList] = createSignal(true); - const [items, setItems] = createSignal([...props.items()]); + const [items, setItems] = createSignal( + createItemsRef(props.items().map((i) => ({ label: i, isActive: false }))), + ); const [direction, toggleDirection] = useDirection( createSignal("default"), ); createEffect(() => { - sortItems(props.items(), direction()); + sortItems( + createItemsRef(props.items().map((i) => ({ label: i, isActive: false }))), + direction(), + ); }); - const sortItems = (items: Array, direction: Direction) => { + const sortItems = (items: ItemsRef, direction: Direction) => { + const newItems = [...items]; if (direction === "default") { - setItems([...props.items()]); + newItems.sort((a, b) => a.index - b.index); + setItems(newItems); return; } - const newItems = [...items]; newItems.sort((a, b) => { - const labelA = a.label.toLocaleLowerCase(); - const labelB = b.label.toLocaleLowerCase(); + const labelA = a.item.label.toLocaleLowerCase(); + const labelB = b.item.label.toLocaleLowerCase(); if (labelA < labelB) { return direction === "asc" ? -1 : 1; @@ -101,7 +116,6 @@ export const ItemList: Component<{ return 0; }); - setItems(newItems); }; @@ -140,17 +154,19 @@ export const ItemList: Component<{
    - {(item, index) => { + {(ref, index) => { return (
  • { - props.handler(items(), index()); + const newItems = mapActiveItem(items(), index()); + setItems(newItems); + props.handler(newItems); }} > - {item.label} + {ref.item.label}
    • ); }} diff --git a/dev/main.tsx b/dev/main.tsx index 2df3dfb..065c1a5 100644 --- a/dev/main.tsx +++ b/dev/main.tsx @@ -3,7 +3,7 @@ import { type Component, createSignal, onMount } from "solid-js"; import { render } from "solid-js/web"; import { InputField } from "#/dev/controls/InputField.tsx"; import { RangeSlider } from "#/dev/controls/RangeSlider.tsx"; -import { ItemList, type ListItem, mapActiveItem } from "#/dev/ItemList.tsx"; +import { ItemList, type ItemsRef } from "#/dev/ItemList.tsx"; import { ArrowAutofitHeightIcon, ArrowAutofitWidthIcon, @@ -13,27 +13,15 @@ import { import { currentScene, loadScene, type SceneData } from "#/engine/Scene.ts"; import { setScale, viewport } from "#/engine/Viewport.ts"; -async function fetchScenes(): Promise> { +async function fetchScenes(): Promise { const indexRef: string[] = await (await fetch(`/api/scenes`)).json(); const items = indexRef.filter((value) => value.includes("index")); - return items.map((value) => { - const [label] = value.substring(1).split("/"); - return { label, isActive: false }; - }); + return items.map((i) => i.substring(1).split("/")[0]); } -function mapSceneEntities(sceneData: SceneData): Array { - const sets: Record = {}; - return sceneData.entities.map((entity, index) => { - sets[entity.name] = - sets[entity.name] === undefined ? 0 : sets[entity.name] + 1; - return { - label: entity.name, - isActive: false, - index, - }; - }); +function mapSceneEntities(sceneData: SceneData): string[] { + return sceneData.entities.map((entity) => entity.name); } function adjustGameContainer(gameContainer: HTMLElement, width: number): void { @@ -65,45 +53,30 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({ adjustGameContainer(gameContainer, width()); - const [scenes, setScenes] = createSignal( - scenesRaw.map((scene) => ({ - ...scene, - isActive: scene.label === currentScene.data.name, - })), - ); + const [scenes] = createSignal(scenesRaw); const [entities, setEntities] = createSignal( mapSceneEntities(currentScene.data), ); - const setCurrentScene = async ( - items: Array, - index: number, - ): Promise => { - setScenes(mapActiveItem(items, index)); - - await loadScene(items[index].label); + const setCurrentScene = async (items: ItemsRef): Promise => { + const name = items.find((ref) => ref.item.isActive)!.item.label; + await loadScene(name); setEntities(mapSceneEntities(currentScene.data)); }; - const setActiveEntity = (items: Array, index: number): void => { - const entities = mapActiveItem(items, index); - setEntities(entities); + const setActiveEntity = (items: ItemsRef): void => { + const activeRef = items.find((ref) => ref.item.isActive)!; + const instances = currentScene.entityInstanceMap.get( + activeRef.item.label, + )!.instances; - const entityName = items[index].label; - const instances = currentScene.entityInstanceMap.get(entityName)!.instances; + const entityRefs = items.filter( + (ref) => ref.item.label === activeRef.item.label, + ); + const instance = + instances[entityRefs.findIndex((ref) => ref.item.isActive)]; - let instanceIndex = 0; - let indexCount = 0; - for (const item of entities) { - if (item.label === entityName) { - if (item.isActive) { - instanceIndex = indexCount; - } - indexCount += 1; - } - } - - console.log(instances[instanceIndex].position); + console.log(instance.position); }; onMount(() => {