Use the room names from Maniac Mansion Decoded 🏷️.

gmarty · May 29, 2024 · b864880 · b864880
1 parent 81b6eb5
commit b864880
Show file tree

Hide file tree

Showing 12 changed files with 317 additions and 159 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ The goal is to encourage the ROM hacking community to modify the game and create
 
 This app only works with Maniac Mansion on NES, it won't work with SCUMM files from other platforms or other NES games.
 
-Some of the code comes from the [ScummVM](https://github.com/scummvm) project.
+Portion of the code comes from [ScummVM](https://github.com/scummvm) and [Maniac Mansion Decoded](https://github.com/gzip/nes-6502-maniac-mansion-decoded).
 
 ## What does it do?
 

diff --git a/src/components/PaletteSelector.js b/src/components/PaletteSelector.js
@@ -1,4 +1,4 @@
-import { RadioGroup } from '@headlessui/react';
+import { RadioGroup, Label, Description } from '@headlessui/react';
 import { CheckCircleIcon } from '@heroicons/react/20/solid';
 import { clsx } from 'clsx';
 
@@ -11,83 +11,85 @@ const PaletteSelector = ({ palette, paletteOptions, setPalette }) => {
 
       <RadioGroup
         value={palette}
-        onChange={setPalette}>
-        <div className="flex flex-wrap justify-center gap-4 md:gap-5 xl:gap-6">
-          {paletteOptions.map((palette) => (
-            <RadioGroup.Option
-              key={palette.name}
-              value={palette}
-              className={({ active }) =>
-                clsx(
-                  active
-                    ? 'border-primary-600 ring-2 ring-primary-600'
-                    : 'border-gray-300 dark:border-gray-700',
-                  'relative flex cursor-pointer flex-col gap-4 rounded-lg border bg-slate-200 p-4 text-slate-900 shadow-sm hover:bg-slate-200/50 focus:outline-none dark:bg-slate-800 dark:text-slate-100 hover:dark:bg-slate-800/50',
-                )
-              }>
-              {({ checked, active }) => (
-                <>
-                  <span className="flex">
-                    <span className="flex flex-1">
-                      <span className="flex flex-col gap-0">
-                        <RadioGroup.Label
-                          as="span"
-                          className="flex gap-1 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100">
-                          {palette.name}
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                            strokeWidth="1.5"
-                            stroke="currentColor"
-                            fill="none"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            className={clsx(
-                              palette.experimental ? '' : 'invisible',
-                              'size-5 text-gray-500 dark:text-gray-500',
-                            )}>
-                            <path d="M18.5 15L5.5 15"></path>
-                            <path d="M16 4L8 4"></path>
-                            <path d="M9 4.5L9 10.2602C9 10.7376 8.82922 11.1992 8.51851 11.5617L3.48149 17.4383C3.17078 17.8008 3 18.2624 3 18.7398V19C3 20.1046 3.89543 21 5 21L19 21C20.1046 21 21 20.1046 21 19V18.7398C21 18.2624 20.8292 17.8008 20.5185 17.4383L15.4815 11.5617C15.1708 11.1992 15 10.7376 15 10.2602L15 4.5"></path>
-                            <path d="M12 9.01L12.01 8.99889"></path>
-                            <path d="M11 2.01L11.01 1.99889"></path>
-                          </svg>
-                        </RadioGroup.Label>
-                        <RadioGroup.Description
-                          as="span"
-                          className="text-sm text-gray-500">
-                          {palette.description}
-                        </RadioGroup.Description>
-                      </span>
+        onChange={setPalette}
+        className="flex flex-wrap gap-4 pl-8 md:gap-5 xl:gap-6">
+        {paletteOptions.map((option) => (
+          <RadioGroup.Option
+            key={option.name}
+            value={option}
+            className={({ focus, checked }) =>
+              clsx(
+                'relative flex cursor-pointer flex-col gap-4 rounded-lg border bg-slate-200 p-4 text-slate-900 shadow-sm focus:outline-none dark:bg-slate-800 dark:text-slate-100',
+                focus
+                  ? 'border-primary-600 ring-2 ring-primary-600'
+                  : 'border-slate-300 dark:border-slate-700',
+                !checked
+                  ? 'hover:bg-slate-200/50 hover:dark:bg-slate-800/50'
+                  : '',
+              )
+            }>
+            {({ focus, checked }) => (
+              <>
+                <span className="flex">
+                  <span className="flex flex-1">
+                    <span className="flex flex-col gap-0">
+                      <Label
+                        as="span"
+                        className="flex gap-1 text-sm font-medium leading-5 text-slate-900 dark:text-slate-100">
+                        {option.name}
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          strokeWidth="1.5"
+                          stroke="currentColor"
+                          fill="none"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          className={clsx(
+                            option.experimental ? '' : 'invisible',
+                            'size-5 text-slate-500 dark:text-slate-500',
+                          )}>
+                          <path d="M18.5 15L5.5 15"></path>
+                          <path d="M16 4L8 4"></path>
+                          <path d="M9 4.5L9 10.2602C9 10.7376 8.82922 11.1992 8.51851 11.5617L3.48149 17.4383C3.17078 17.8008 3 18.2624 3 18.7398V19C3 20.1046 3.89543 21 5 21L19 21C20.1046 21 21 20.1046 21 19V18.7398C21 18.2624 20.8292 17.8008 20.5185 17.4383L15.4815 11.5617C15.1708 11.1992 15 10.7376 15 10.2602L15 4.5"></path>
+                          <path d="M12 9.01L12.01 8.99889"></path>
+                          <path d="M11 2.01L11.01 1.99889"></path>
+                        </svg>
+                      </Label>
+                      <Description
+                        as="span"
+                        className="text-sm text-slate-500">
+                        {option.description}
+                      </Description>
                     </span>
-                    <CheckCircleIcon
-                      className={clsx(
-                        !checked ? 'invisible' : '',
-                        'size-5 text-primary-600',
-                      )}
-                      aria-hidden="true"
-                    />
                   </span>
-                  <RadioGroup.Description as="span">
-                    <img
-                      src={palette.img}
-                      className="w-48 rounded"
-                      alt={`Preview of a room with palette ${palette.name}.`}
-                    />
-                  </RadioGroup.Description>
-                  <span
+                  <CheckCircleIcon
                     className={clsx(
-                      active ? 'border' : 'border-2',
-                      checked ? 'border-primary-600' : 'border-transparent',
-                      'pointer-events-none absolute -inset-px rounded-lg',
+                      !checked ? 'invisible' : '',
+                      'size-5 text-primary-600',
                     )}
                     aria-hidden="true"
                   />
-                </>
-              )}
-            </RadioGroup.Option>
-          ))}
-        </div>
+                </span>
+                <Description as="span">
+                  <img
+                    src={option.img}
+                    className="w-48 rounded"
+                    alt={`Preview of a room with palette ${option.name}.`}
+                  />
+                </Description>
+                <span
+                  className={clsx(
+                    'pointer-events-none absolute -inset-px rounded-lg',
+                    focus ? 'border' : 'border-2',
+                    checked ? 'border-primary-600' : 'border-transparent',
+                  )}
+                  aria-hidden="true"
+                />
+              </>
+            )}
+          </RadioGroup.Option>
+        ))}
       </RadioGroup>
     </>
   );

diff --git a/src/components/Room.js b/src/components/Room.js
@@ -1,5 +1,3 @@
-import MainHeader from './MainHeader';
-import ResourceMetadata from './ResourceMetadata';
 import ScreenCanvasContainer from '../containers/ScreenCanvasContainer';
 import HoveredObjects from './HoveredObjects';
 
@@ -18,9 +16,6 @@ const Room = ({
 
   return (
     <>
-      <MainHeader title={`Room ${room.metadata.id}`}>
-        <ResourceMetadata metadata={room.metadata} />
-      </MainHeader>
       <div
         className="relative overflow-hidden"
         style={{ maxWidth: width * 8 * zoom }}>

diff --git a/src/components/RoomsList.js b/src/components/RoomsList.js
diff --git a/src/components/ScreenNamesSelector.js b/src/components/ScreenNamesSelector.js
@@ -0,0 +1,72 @@
+import { Fragment } from 'react';
+import {
+  Field,
+  Label,
+  Description,
+  Radio,
+  RadioGroup,
+} from '@headlessui/react';
+import { clsx } from 'clsx';
+
+const ScreenNamesSelector = ({
+  screenName,
+  screenNameOptions,
+  setScreenName,
+}) => {
+  return (
+    <>
+      <h2 className="text-xl font-semibold leading-6 text-slate-700 md:text-2xl dark:text-slate-300">
+        Screen names
+      </h2>
+
+      <RadioGroup
+        value={screenName}
+        onChange={setScreenName}
+        className="flex flex-col gap-5 pl-8">
+        {screenNameOptions.map((option) => (
+          <Field
+            key={option.value}
+            className="flex items-center gap-1">
+            <Radio
+              value={option}
+              as={Fragment}>
+              {({ focus, checked }) => (
+                <div className="flex outline-none ">
+                  <div
+                    className={clsx(
+                      'group flex size-4 cursor-pointer items-center justify-center rounded-full border',
+                      focus && 'ring-2 ring-primary-600 ring-offset-1',
+                      !checked
+                        ? 'bg-slate-200 hover:bg-slate-100 hover:dark:bg-slate-100'
+                        : 'bg-primary-600',
+                    )}>
+                    <span
+                      className={clsx(
+                        'size-1.5 rounded-full bg-slate-200',
+                        !checked ? 'invisible' : 'visible',
+                      )}
+                    />
+                  </div>
+                  <div className="ml-3 text-sm leading-6">
+                    <Label
+                      as="p"
+                      className="font-medium leading-5 text-slate-900 dark:text-slate-100">
+                      {option.name}
+                    </Label>
+                    <Description
+                      as="p"
+                      className="text-slate-500">
+                      {option.description}
+                    </Description>
+                  </div>
+                </div>
+              )}
+            </Radio>
+          </Field>
+        ))}
+      </RadioGroup>
+    </>
+  );
+};
+
+export default ScreenNamesSelector;
diff --git a/src/components/ScreenSelector.js b/src/components/ScreenSelector.js
@@ -9,11 +9,12 @@ import {
 } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import { clsx } from 'clsx';
+import getScreenLabel from '../lib/getScreenLabel';
 
 const getScreenNameFromPathname = (pathname) => {
   const id = pathname.split('/').pop();
   const screenType = pathname.startsWith('/rooms/') ? 'room' : 'title';
-  return screenType === 'title' ? `Title screen ${id}` : `Room ${id}`;
+  return getScreenLabel(screenType, id);
 };
 
 const ScreenSelector = ({ rooms, titles }) => {
@@ -72,7 +73,7 @@ const ScreenSelector = ({ rooms, titles }) => {
                           selected ? 'font-semibold' : 'font-normal',
                           'block truncate',
                         )}>
-                        {`Title screen ${metadata.id}`}
+                        {getScreenLabel('title', metadata.id)}
                       </span>
 
                       {selected ? (
@@ -117,7 +118,7 @@ const ScreenSelector = ({ rooms, titles }) => {
                             selected ? 'font-semibold' : 'font-normal',
                             'block truncate',
                           )}>
-                          {`Room ${metadata.id}`}
+                          {getScreenLabel('room', metadata.id)}
                         </span>
 
                         {selected ? (

diff --git a/src/components/ThemeSwitcher.js b/src/components/ThemeSwitcher.js
@@ -1,4 +1,4 @@
-import { RadioGroup } from '@headlessui/react';
+import { RadioGroup, Label } from '@headlessui/react';
 import { clsx } from 'clsx';
 
 const ThemeSwitcher = ({ theme, setTheme, themeOptions }) => {
@@ -10,27 +10,25 @@ const ThemeSwitcher = ({ theme, setTheme, themeOptions }) => {
 
       <RadioGroup
         value={theme}
-        onChange={setTheme}>
-        <RadioGroup.Label className="sr-only">Choose a theme</RadioGroup.Label>
-        <div className="flex justify-center gap-4 md:gap-5 xl:gap-6">
-          {themeOptions.map((option) => (
-            <RadioGroup.Option
-              key={option.name}
-              value={option}
-              className={({ active, checked }) =>
-                clsx(
-                  active && 'ring-2 ring-primary-600 ring-offset-2',
-                  checked
-                    ? 'bg-primary-600 text-slate-100 hover:bg-primary-500'
-                    : 'bg-slate-200 text-slate-900 ring-1 ring-inset ring-slate-300 hover:bg-slate-200/50 dark:bg-slate-800 dark:text-slate-100 dark:ring-slate-700 hover:dark:bg-slate-800/50',
-                  'cursor-pointer focus:outline-none',
-                  'flex w-48 max-w-48 flex-initial items-center justify-center rounded-md px-3 py-3 text-sm font-semibold sm:flex-1',
-                )
-              }>
-              <RadioGroup.Label as="span">{option.name}</RadioGroup.Label>
-            </RadioGroup.Option>
-          ))}
-        </div>
+        onChange={setTheme}
+        className="flex gap-4 pl-8 md:gap-5 xl:gap-6">
+        {themeOptions.map((option) => (
+          <RadioGroup.Option
+            key={option.name}
+            value={option}
+            className={({ focus, checked }) =>
+              clsx(
+                'cursor-pointer focus:outline-none',
+                'flex w-48 max-w-48 flex-initial items-center justify-center rounded-md px-3 py-3 text-sm font-medium sm:flex-1',
+                focus && 'ring-2 ring-primary-600 ring-offset-2',
+                checked
+                  ? 'bg-primary-600 text-slate-100'
+                  : 'bg-slate-200 text-slate-900 ring-1 ring-inset ring-slate-300 hover:bg-slate-200/50 dark:bg-slate-800 dark:text-slate-100 dark:ring-slate-700 hover:dark:bg-slate-800/50',
+              )
+            }>
+            <Label as="span">{option.name}</Label>
+          </RadioGroup.Option>
+        ))}
       </RadioGroup>
     </>
   );