From 220020bcfea79cc1b4e41b3eb46a249adae58322 Mon Sep 17 00:00:00 2001
From: edo999 <edo999@gmail.com>
Date: Sat, 15 Jun 2024 18:33:49 +0100
Subject: [PATCH] =?UTF-8?q?Show=20the=20different=20animations=20for=20cos?=
 =?UTF-8?q?tumes=20in=20set=200=20=F0=9F=9A=B6.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CostumesList.js      |  2 +-
 src/containers/CostumesContainer.js | 71 +++++++++++++++++++++--------
 2 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/src/components/CostumesList.js b/src/components/CostumesList.js
index 11b852b..0f132fb 100644
--- a/src/components/CostumesList.js
+++ b/src/components/CostumesList.js
@@ -7,7 +7,7 @@ const CostumesList = ({ costumeSets, currentSetId, currentId }) => {
       {costumeSets.map((costumeSet, costumeSetId) => (
         <div key={costumeSetId}>
           <ColumnListHeader>Costume set {costumeSetId}</ColumnListHeader>
-          {costumeSet.sprdesc.map((unused, id) => {
+          {costumeSet.map((unused, id) => {
             const selected = costumeSetId === currentSetId && id === currentId;
             const path = `/costumes/${costumeSetId}/${id}`;
             const label = `Costume ${id}`;
diff --git a/src/containers/CostumesContainer.js b/src/containers/CostumesContainer.js
index e3eb355..4718224 100644
--- a/src/containers/CostumesContainer.js
+++ b/src/containers/CostumesContainer.js
@@ -30,6 +30,13 @@ const CostumesContainer = ({
   const currentSetId =
     typeof setId === 'undefined' ? null : parseInt(setId, 10);
   const currentId = typeof id === 'undefined' ? null : parseInt(id, 10);
+  // Used for the side navbar:
+  // * Costume set 0 has 25 costumes (hardcoded value?).
+  // * Costume set 1 has as many costumes as entries in the corresponding sprdesc.
+  const costumeSets = [
+    Array(costumeIdLookupTable.length).fill(0),
+    sprdesc[1].sprdesc,
+  ];
   const costume =
     costumes.find(({ metadata }) => metadata.id === currentId) || null;
   const costumeId =
@@ -57,7 +64,7 @@ const CostumesContainer = ({
     <>
       <PrimaryColumn>
         <CostumesList
-          costumeSets={sprdesc}
+          costumeSets={costumeSets}
           currentSetId={currentSetId}
           currentId={currentId}
         />
@@ -67,24 +74,52 @@ const CostumesContainer = ({
         <MainHeader title={`Costume ${currentId}`}>
           <ResourceMetadata metadata={costume.metadata} />
         </MainHeader>
-        <div className="flex flex-row flex-wrap gap-4">
-          {Array(frameNum)
-            .fill()
-            .map((unused, frame) => (
-              <CostumeCanvasContainer
-                key={frame}
-                id={costumeId}
-                frame={frame}
-                gfx={costumegfx[currentSetId]}
-                sprdesc={sprdesc[currentSetId].sprdesc}
-                sproffs={sproffs[currentSetId].sproffs}
-                sprlens={sprlens[currentSetId].sprlens}
-                sprdata={sprdata[currentSetId].sprdata}
-                sprpals={sprpals[currentSetId]}
-                zoom={2}
-              />
+        {currentSetId === 0 ? (
+          <div className="space-y-4">
+            {costume.costumes.map((animation, i) => (
+              <div key={i}>
+                <h2 className="mb-1 text-sm font-semibold text-slate-700 md:text-base dark:text-slate-300">
+                  Animation {i}
+                </h2>
+                <div className="flex flex-row flex-wrap gap-4">
+                  {animation.map((frame, key) => (
+                    <CostumeCanvasContainer
+                      key={key}
+                      id={costumeId}
+                      frame={frame}
+                      gfx={costumegfx[currentSetId]}
+                      sprdesc={sprdesc[currentSetId].sprdesc}
+                      sproffs={sproffs[currentSetId].sproffs}
+                      sprlens={sprlens[currentSetId].sprlens}
+                      sprdata={sprdata[currentSetId].sprdata}
+                      sprpals={sprpals[currentSetId]}
+                      zoom={2}
+                    />
+                  ))}
+                </div>
+              </div>
             ))}
-        </div>
+          </div>
+        ) : (
+          <div className="flex flex-row flex-wrap gap-4">
+            {Array(frameNum)
+              .fill()
+              .map((unused, frame) => (
+                <CostumeCanvasContainer
+                  key={frame}
+                  id={costumeId}
+                  frame={frame}
+                  gfx={costumegfx[currentSetId]}
+                  sprdesc={sprdesc[currentSetId].sprdesc}
+                  sproffs={sproffs[currentSetId].sproffs}
+                  sprlens={sprlens[currentSetId].sprlens}
+                  sprdata={sprdata[currentSetId].sprdata}
+                  sprpals={sprpals[currentSetId]}
+                  zoom={2}
+                />
+              ))}
+          </div>
+        )}
       </Main>
     </>
   );