From fe1e76fe412c3e731748322cb1b270bc4651a394 Mon Sep 17 00:00:00 2001 From: kolaflash Date: Tue, 30 Dec 2025 18:47:00 +0100 Subject: [PATCH] Well so far and so --- dev/ItemList.tsx | 69 ---------------------------- dev/RemoteItemList.css | 4 +- dev/RemoteItemList.tsx | 102 +++++++++++++++++++++++++++++++---------- dev/main.tsx | 37 +-------------- 4 files changed, 81 insertions(+), 131 deletions(-) diff --git a/dev/ItemList.tsx b/dev/ItemList.tsx index 14f2b22..5edd635 100644 --- a/dev/ItemList.tsx +++ b/dev/ItemList.tsx @@ -5,75 +5,6 @@ export type ListItem = { label: string; isActive: boolean }; export type ItemHandler = (item: ListItem, index: number) => void; -export type Direction = "default" | "asc" | "desc"; - -export function useSort( - items: Array, -): [ - (direction?: Direction) => Array, - (newItems: Array) => void, -] { - let itemsRef = items; - - return [ - (direction = "default") => { - if (direction === "default") { - return [...itemsRef]; - } - const newItems = [...itemsRef]; - - newItems.sort((a, b) => { - const labelA = a.label.toLocaleLowerCase(); - const labelB = b.label.toLocaleLowerCase(); - - if (labelA < labelB) { - return direction === "asc" ? -1 : 1; - } - - if (labelA > labelB) { - return direction === "asc" ? 1 : -1; - } - - return 0; - }); - - return newItems; - }, - (newItems) => { - itemsRef = newItems; - }, - ]; -} - -export function useDirection( - initialDirection: Direction = "default", -): (forcedDirection?: Direction) => Direction { - let direction: Direction = initialDirection; - - return (forcedDirection) => { - if (forcedDirection) { - direction = forcedDirection; - return direction; - } - - switch (direction) { - case "asc": { - direction = "desc"; - break; - } - case "desc": { - direction = "default"; - break; - } - default: { - direction = "asc"; - } - } - - return direction; - }; -} - export const ItemList: Component<{ items: Accessor>; handler: ItemHandler; diff --git a/dev/RemoteItemList.css b/dev/RemoteItemList.css index f6a4498..d7aff7f 100644 --- a/dev/RemoteItemList.css +++ b/dev/RemoteItemList.css @@ -24,8 +24,8 @@ } .remote-item-list-header { - display: grid; - grid-template-columns: 1fr auto auto; + display: flex; + justify-content: space-between; border-bottom: 1px solid var(--c-fg-3); } diff --git a/dev/RemoteItemList.tsx b/dev/RemoteItemList.tsx index 0d33976..6b3cb29 100644 --- a/dev/RemoteItemList.tsx +++ b/dev/RemoteItemList.tsx @@ -1,39 +1,95 @@ import "./RemoteItemList.css"; -import { type Component, createSignal, Match, Show, Switch } from "solid-js"; import { - type Direction, - type ItemHandler, - ItemList, - type ListItem, - useDirection, - useSort, -} from "#/dev/ItemList.tsx"; + type Accessor, + type Component, + createEffect, + createSignal, + Match, + Show, + type Signal, + Switch, +} from "solid-js"; +import { type ItemHandler, ItemList, type ListItem } from "#/dev/ItemList.tsx"; import { ArrowNarrowDownIcon, ArrowNarrowUpIcon, ArrowsSortIcon, ChevronDownIcon, - ReloadIcon, } from "#/dev/icons/index.ts"; +export type Direction = "default" | "asc" | "desc"; + +function useDirection( + signal: Signal, +): [Accessor, (forcedDirection?: Direction) => Direction] { + const [direction, setDirection] = signal; + + return [ + direction, + (forcedDirection) => { + if (forcedDirection) { + setDirection(forcedDirection); + return direction(); + } + + switch (direction()) { + case "asc": { + setDirection("desc"); + break; + } + case "desc": { + setDirection("default"); + break; + } + default: { + setDirection("asc"); + } + } + + return direction(); + }, + ]; +} + export const RemoteItemList: Component<{ name: string; - fetch: () => Promise>; + items: Accessor>; handler: ItemHandler; }> = (props) => { const [showList, setShowList] = createSignal(true); - const [items, setItems] = createSignal>([]); - const [direction, setDirection] = createSignal("default"); - const [sorted, setSorted] = useSort([]); - const toggleDirection = useDirection(); + const [items, setItems] = createSignal([...props.items()]); + const [direction, toggleDirection] = useDirection( + createSignal("default"), + ); - const fetchItems = () => { - props.fetch().then((items) => { - setSorted(items); - setItems(sorted(direction())); + createEffect(() => { + sortItems(props.items(), direction()); + }); + + const sortItems = (items: Array, direction: Direction) => { + if (direction === "default") { + setItems([...props.items()]); + return; + } + + const newItems = [...items]; + newItems.sort((a, b) => { + const labelA = a.label.toLocaleLowerCase(); + const labelB = b.label.toLocaleLowerCase(); + + if (labelA < labelB) { + return direction === "asc" ? -1 : 1; + } + + if (labelA > labelB) { + return direction === "asc" ? 1 : -1; + } + + return 0; }); + + setItems(newItems); }; - fetchItems(); return (
@@ -49,12 +105,11 @@ export const RemoteItemList: Component<{ {props.name}
+ - diff --git a/dev/main.tsx b/dev/main.tsx index d8d6e29..c753845 100644 --- a/dev/main.tsx +++ b/dev/main.tsx @@ -29,21 +29,6 @@ async function fetchBrowserData(dir: string): Promise { return new Map([[dir, scenes]]); } -function mapSceneEntitiesOld(sceneData: SceneData): BrowserFolder { - const sets: Record = {}; - const entites = sceneData.entities.reduce((root, entity) => { - sets[entity.name] = - sets[entity.name] === undefined ? 0 : sets[entity.name] + 1; - root.set(`${entity.name}:${sets[entity.name]}`, { - path: `${entity.name}:${sets[entity.name]}`, - isActive: false, - }); - return root; - }, new Map() as BrowserFolder); - - return new Map([["entities", entites]]); -} - const scenesRaw = await fetchBrowserData("scenes"); function mapSceneEntities(sceneData: SceneData): Array { @@ -113,24 +98,6 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({ ]); }; - let activeEntity = null; - const setActiveEntity = (entityItem: ListItem & { index: number }): void => { - const instances = currentScene.entityInstanceMap.get( - entityItem.label, - )!.instances; - console.log(entityItem); - activeEntity = instances[entityItem.index] as Entity; - // setEntities(mapActive("entities", path, entities)); - console.log(activeEntity); - }; - // const setActiveEntity = (path: string): void => { - // const [id, index] = path.split(":"); - // const instances = currentScene.entityInstanceMap.get(id)!.instances; - // activeEntity = instances[parseInt(index)] as Entity; - // setEntities(mapActive("entities", path, entities)); - // console.log(activeEntity); - // }; - const [scenes, setScenes] = createSignal(scenesRaw); const setCurrentScene = async (path: string) => { @@ -195,8 +162,8 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({ entities()} + handler={console.log} + items={entities} />