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) => (
Costume set {costumeSetId}
- {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 = ({
<>
@@ -67,24 +74,52 @@ const CostumesContainer = ({
-
- {Array(frameNum)
- .fill()
- .map((unused, frame) => (
-
+ {currentSetId === 0 ? (
+
+ {costume.costumes.map((animation, i) => (
+
+
+ Animation {i}
+
+
+ {animation.map((frame, key) => (
+
+ ))}
+
+
))}
-
+
+ ) : (
+
+ {Array(frameNum)
+ .fill()
+ .map((unused, frame) => (
+
+ ))}
+
+ )}
>
);