diff --git a/app/react/components/devtools.module.css b/app/react/components/devtools.module.css index 4ee7f58..c136358 100644 --- a/app/react/components/devtools.module.css +++ b/app/react/components/devtools.module.css @@ -1,12 +1,16 @@ .devtools { background-color: #444444; color: white; + font-size: 24px; height: 100%; overflow: hidden; width: 100%; } .devtools form { + &, & * { + font-size: 100%; + } label { font-weight: bold; :first-child { @@ -29,6 +33,24 @@ > :global(.react-tabs__tab-panel) { overflow-y: auto; } + :global(.react-tabs__tab) { + button { + background: transparent; + border: none; + border-radius: 1em; + cursor: pointer; + left: 0.25em; + padding: 0 0.125em; + position: relative; + visibility: hidden; + &:hover { + background-color: #ffffff33; + } + } + &:hover button { + visibility: visible; + } + } :global(.react-tabs__tab--selected) { background-color: #00000022; color: #ffffff; diff --git a/app/react/components/devtools/entities.jsx b/app/react/components/devtools/entities.jsx index 8c88248..bbc6da9 100644 --- a/app/react/components/devtools/entities.jsx +++ b/app/react/components/devtools/entities.jsx @@ -1,5 +1,6 @@ import {Map} from 'immutable'; import {useCallback, useEffect, useState} from 'react'; +import {Tab, Tabs, TabList, TabPanel} from 'react-tabs'; import {useClient} from '@/react/context/client.js'; import {useEcs, useEcsTick} from '@/react/context/ecs.js'; @@ -10,15 +11,15 @@ const entityJsonPaths = Object.keys(import.meta.glob('%/**/*.entity.json')); function entityLabel(entity) { let label = `${entity.id}`; - const {Player, Position} = entity; + const {Label, Player} = entity; if (1 === entity.id) { label = 'Master'; } if (Player) { - label += `: Player (${Player.id})`; + label = `Player (${Player.id})`; } - if (Position) { - label += `: [${Position.x.toFixed(2)}, ${Position.y.toFixed(2)}]` + if (Label) { + label = Label.label; } return label; } @@ -26,7 +27,7 @@ function entityLabel(entity) { function Entities({eventsChannel}) { const client = useClient(); const ecsRef = useEcs(); - const [activeEntity, setActiveEntity] = useState(1); + const [activeEntity, setActiveEntity] = useState('1'); const [creatingEntityPath, setCreatingEntityPath] = useState(entityJsonPaths[0]); const [entities, setEntities] = useState(Map()); const onEcsTick = useCallback((payload, ecs) => { @@ -53,6 +54,8 @@ function Entities({eventsChannel}) { }); }, []); useEcsTick(onEcsTick); + const list = Array.from(entities.keys()) + .toSorted(new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'}).compare); useEffect(() => { if (!ecsRef.current) { return; @@ -92,7 +95,36 @@ function Entities({eventsChannel}) { }; }, [activeEntity, client, ecsRef, eventsChannel]); const options = []; - for (const [id, label] of entities.entries()) { + const tabLabels = []; + const tabPanels = []; + for (const id of list) { + const label = entities.get(id); + tabLabels.push( + + {label} + + + ); + tabPanels.push( + + {id} + + ); options.push(