Add costume gfx to the Gfx section 🥻.

gmarty · Jun 4, 2024 · 750ea3d · 750ea3d
1 parent 35f9883
commit 750ea3d
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 15 deletions.
diff --git a/src/components/CostumeGfxList.js b/src/components/CostumeGfxList.js
@@ -0,0 +1,25 @@
+import ColumnListHeader from './ColumnListHeader';
+import ColumnListItem from './ColumnListItem';
+
+const CostumeGfxList = ({ gfx, currentId }) => {
+  return (
+    <>
+      <ColumnListHeader>Costume gfx</ColumnListHeader>
+      {gfx.map(({ metadata }) => {
+        const selected = metadata.id === currentId;
+        const path = `/costumegfx/${metadata.id}`;
+        const label = `Tileset ${metadata.id}`;
+
+        return (
+          <ColumnListItem
+            key={metadata.id}
+            path={selected ? null : path}>
+            {label}
+          </ColumnListItem>
+        );
+      })}
+    </>
+  );
+};
+
+export default CostumeGfxList;
diff --git a/src/containers/GfxContainer.js b/src/containers/GfxContainer.js
@@ -1,19 +1,26 @@
 import { useMatch, useParams } from 'react-router-dom';
 import PrimaryColumn from '../components/PrimaryColumn';
-import RoomGfxList from '../components/RoomGfxList';
 import TitleGfxList from '../components/TitleGfxList';
+import CostumeGfxList from '../components/CostumeGfxList';
+import RoomGfxList from '../components/RoomGfxList';
 import Main from '../components/Main';
 import MainHeader from '../components/MainHeader';
 import ResourceMetadata from '../components/ResourceMetadata';
 import GfxCanvasContainer from './GfxCanvasContainer';
 
-const GfxContainer = ({ roomgfx, titlegfx }) => {
+const GfxContainer = ({ titlegfx, costumegfx, roomgfx }) => {
+  const isTitleGfx = !!useMatch('/titlegfx/:gfcId');
+  const isCostumeGfx = !!useMatch('/costumegfx/:gfcId');
   const isRoomGfx = !!useMatch('/roomgfx/:gfcId');
   const { gfcId } = useParams();
 
   const currentGfcId =
     typeof gfcId === 'undefined' ? null : parseInt(gfcId, 10);
-  const gfc = isRoomGfx ? roomgfx[currentGfcId] : titlegfx[currentGfcId];
+  const gfc = isTitleGfx
+    ? titlegfx[currentGfcId]
+    : isCostumeGfx
+      ? costumegfx[currentGfcId]
+      : roomgfx[currentGfcId];
 
   if (!gfc) {
     return null;
@@ -22,23 +29,29 @@ const GfxContainer = ({ roomgfx, titlegfx }) => {
   return (
     <>
       <PrimaryColumn>
+        <TitleGfxList
+          gfx={titlegfx}
+          currentId={isTitleGfx ? currentGfcId : null}
+        />
+        <CostumeGfxList
+          gfx={costumegfx}
+          currentId={isCostumeGfx ? currentGfcId : null}
+        />
         <RoomGfxList
           gfx={roomgfx}
           currentId={isRoomGfx ? currentGfcId : null}
         />
-        <TitleGfxList
-          gfx={titlegfx}
-          currentId={isRoomGfx ? null : currentGfcId}
-        />
       </PrimaryColumn>
       <Main>
         <MainHeader
           title={
             currentGfcId === null
               ? 'Graphics'
-              : isRoomGfx
-                ? `Room graphics tileset ${currentGfcId}`
-                : `Title graphics tileset ${currentGfcId}`
+              : isTitleGfx
+                ? `Title graphics tileset ${currentGfcId}`
+                : isCostumeGfx
+                  ? `Costume graphics tileset ${currentGfcId}`
+                  : `Room graphics tileset ${currentGfcId}`
           }>
           {currentGfcId !== null && (
             <ResourceMetadata metadata={gfc.metadata} />

diff --git a/src/containers/ResourceExplorer.js b/src/containers/ResourceExplorer.js
@@ -58,37 +58,61 @@ const ResourceExplorer = () => {
         />
       </Route>
       <Route
-        path="/roomgfx"
+        path="/titlegfx"
         element={
           <GfxContainer
-            roomgfx={resources.roomgfx}
             titlegfx={resources.titles}
+            costumegfx={resources.costumegfx}
+            roomgfx={resources.roomgfx}
           />
         }>
         <Route
           path=":gfcId"
           element={
             <GfxContainer
-              roomgfx={resources.roomgfx}
               titlegfx={resources.titles}
+              costumegfx={resources.costumegfx}
+              roomgfx={resources.roomgfx}
             />
           }
         />
       </Route>
       <Route
-        path="/titlegfx"
+        path="/costumegfx"
         element={
           <GfxContainer
-            roomgfx={resources.roomgfx}
             titlegfx={resources.titles}
+            costumegfx={resources.costumegfx}
+            roomgfx={resources.roomgfx}
           />
         }>
         <Route
           path=":gfcId"
           element={
             <GfxContainer
+              titlegfx={resources.titles}
+              costumegfx={resources.costumegfx}
               roomgfx={resources.roomgfx}
+            />
+          }
+        />
+      </Route>
+      <Route
+        path="/roomgfx"
+        element={
+          <GfxContainer
+            titlegfx={resources.titles}
+            costumegfx={resources.costumegfx}
+            roomgfx={resources.roomgfx}
+          />
+        }>
+        <Route
+          path=":gfcId"
+          element={
+            <GfxContainer
               titlegfx={resources.titles}
+              costumegfx={resources.costumegfx}
+              roomgfx={resources.roomgfx}
             />
           }
         />

diff --git a/src/lib/parser/parseRom.js b/src/lib/parser/parseRom.js
@@ -156,6 +156,7 @@ const parseRom = (arrayBuffer, res) => {
     roomgfx,
     globdata,
     scripts,
+    costumegfx,
     costumes,
     sprpals,
     sprdesc,