Add names to costumes 🏷️.

src/components/CostumesList.js

@@ -1,3 +1,4 @@
+import getCostumeLabel from '../lib/getCostumeLabel';
 import ColumnListHeader from './ColumnListHeader';
 import ColumnListItem from './ColumnListItem';
 
@@ -10,7 +11,7 @@ const CostumesList = ({ costumeSets, currentSetId, currentId }) => {
           {costumeSet.map((unused, id) => {
             const selected = costumeSetId === currentSetId && id === currentId;
             const path = `/costumes/${costumeSetId}/${id}`;
-            const label = `Costume ${id}`;
+            const label = getCostumeLabel(costumeSetId, id);
 
             return (
               <ColumnListItem

src/components/ScreenNamesSelector.js

@@ -16,7 +16,7 @@ const ScreenNamesSelector = ({
   return (
     <>
       <h2 className="text-xl font-semibold leading-6 text-slate-700 md:text-2xl dark:text-slate-300">
-        Screen names
+        Resource naming scheme
       </h2>
 
       <RadioGroup

src/containers/CostumesContainer.js

@@ -1,4 +1,5 @@
 import { useParams } from 'react-router-dom';
+import getCostumeLabel from '../lib/getCostumeLabel';
 import PrimaryColumn from '../components/PrimaryColumn';
 import CostumesList from '../components/CostumesList';
 import Main from '../components/Main';
@@ -71,7 +72,7 @@ const CostumesContainer = ({
       </PrimaryColumn>
 
       <Main>
-        <MainHeader title={`Costume ${currentId}`}>
+        <MainHeader title={getCostumeLabel(currentSetId, currentId, true)}>
           <ResourceMetadata metadata={costume.metadata} />
         </MainHeader>
         {currentSetId === 0 ? (

src/containers/SettingsContainer.js

@@ -3,7 +3,7 @@ import Main from '../components/Main';
 import MainHeader from '../components/MainHeader';
 import ThemeSwitcher from '../components/ThemeSwitcher';
 import PaletteSelector from '../components/PaletteSelector';
-import ScreenNamesSelector from '../components/ScreenNamesSelector';
+import NameSelector from '../components/ScreenNamesSelector';
 import { setColourTheme } from '../lib/colourThemeUtils';
 
 import digitalPrimeFbxImg from '../assets/palettes/digital-prime-fbx.png';
@@ -39,16 +39,16 @@ const paletteOptions = [
   },
 ];
 
-const screenNameOptions = [
+const nameOptions = [
   {
     value: 'mm',
-    name: 'Maniac Mansion screen names',
+    name: 'Names from Maniac Mansion',
     description: 'Useful when working on a Maniac Mansion ROM hack.',
     defaultOption: true,
   },
   {
     value: 'numbers',
-    name: 'Numbered screen names',
+    name: 'Numbered items',
     description: 'Better if your ROM hack is a completely different game.',
   },
 ];
@@ -65,14 +65,14 @@ const SettingsContainer = () => {
     paletteOptions.find(({ value }) => value === selectedPaletteValue) ||
     paletteOptions.find(({ defaultOption }) => defaultOption);
 
-  const selectedScreenNameValue = localStorage.getItem('screen-name');
-  const selectedScreenName =
-    screenNameOptions.find(({ value }) => value === selectedScreenNameValue) ||
-    screenNameOptions.find(({ defaultOption }) => defaultOption);
+  const selectedNameValue = localStorage.getItem('screen-name');
+  const selectedName =
+    nameOptions.find(({ value }) => value === selectedNameValue) ||
+    nameOptions.find(({ defaultOption }) => defaultOption);
 
   const [theme, setTheme] = useState(selectedTheme);
   const [palette, setPalette] = useState(selectedPalette);
-  const [screenName, setScreenName] = useState(selectedScreenName);
+  const [name, setName] = useState(selectedName);
 
   // Keep the local storage and the DOM in sync with the state.
   const setThemeWrapper = (theme) => {
@@ -99,15 +99,15 @@ const SettingsContainer = () => {
     localStorage.setItem('palette', palette.value);
   };
 
-  const setScreenNameWrapper = (screenName) => {
-    setScreenName(screenName);
+  const setNameWrapper = (name) => {
+    setName(name);
 
-    if (screenName.defaultOption) {
+    if (name.defaultOption) {
       localStorage.removeItem('screen-name');
       return;
     }
 
-    localStorage.setItem('screen-name', screenName.value);
+    localStorage.setItem('screen-name', name.value);
   };
 
   return (
@@ -123,10 +123,10 @@ const SettingsContainer = () => {
         paletteOptions={paletteOptions}
         setPalette={setPaletteWrapper}
       />
-      <ScreenNamesSelector
-        screenName={screenName}
-        screenNameOptions={screenNameOptions}
-        setScreenName={setScreenNameWrapper}
+      <NameSelector
+        screenName={name}
+        screenNameOptions={nameOptions}
+        setScreenName={setNameWrapper}
       />
     </Main>
   );

src/lib/getCostumeLabel.js

@@ -0,0 +1,58 @@
+import { zeroPad } from './utils';
+
+const costumeNames = [
+  [
+    'Unused',
+    'Syd',
+    'Razor',
+    'Dave',
+    'Michael',
+    'Bernard',
+    'Wendy',
+    'Jeff',
+    'Radioactive suit',
+    'Fred Edison',
+    'Nurse Edna',
+    'Weird Ed',
+    'Cousin Ted',
+    'Purple tentacle',
+    'Green tentacle',
+    'Meteor police',
+    'Meteor',
+    'Mark Eteer',
+    'Wink Smiley',
+    'Man eating plant',
+    'Bubble',
+    'Unused',
+    'Unused',
+    'Sandy',
+    'Suit w/ meteor',
+  ],
+  ['Flying Edsel', 'Meteor intro', 'Cursor arrow', 'Sprite0'],
+];
+
+const getCostumeLabel = (costumeSetId = 0, id = 0, long = false) => {
+  switch (localStorage.getItem('screen-name')) {
+    default:
+    case 'mm':
+      const costumeName = costumeNames[costumeSetId][id];
+      if (!costumeName) {
+        throw new Error(
+          `Unknown costume id ${id} in costume set id ${costumeSetId}`,
+        );
+      }
+
+      if (long) {
+        return `Costume ${zeroPad(id)} - ${costumeName}`;
+      }
+      return `${id} ${costumeName}`;
+
+    case 'numbers':
+      if (long) {
+        return `Costume ${zeroPad(id)}`;
+      }
+      return `Costume ${id}`;
+  }
+};
+
+export default getCostumeLabel;