Add script parser 📜. (#13)

* Add script parser 📜.
* Rename parse script functions
* Refactor getVariable method
* Remove console.log
* Remove dead code
* Remove unnecessary state
* Refactor script object
* Add "header" and rename script to "code"
* Rename some files accordingly

src/components/Header.js

@@ -16,6 +16,7 @@ import meteor from '../assets/meteor.png';
 const navigation = [
   { name: 'Rooms', href: '/rooms/1' },
   { name: 'Room Gfx', href: '/roomgfx/0' },
+  { name: 'Scripts', href: '/scripts/1' },
   { name: 'Prepositions', href: '/preps' },
   { name: 'ROM map', href: '/rom-map' },
   { name: 'Settings', href: '/settings', sideBarOnly: true },

src/components/RoomScripts.js

@@ -0,0 +1,22 @@
+import ScriptCode from './ScriptCode';
+
+const RoomScripts = ({ excdScript, encdScript }) => {
+  return (
+    <div className="flex gap-4 md:gap-5 xl:gap-6">
+      <div>
+        <h2>Enter Script</h2>
+        <div>
+          <ScriptCode code={encdScript} />
+        </div>
+      </div>
+      <div>
+        <h2>Exit Script</h2>
+        <div>
+          <ScriptCode code={excdScript} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoomScripts;

src/components/RoomTabs.js

@@ -4,7 +4,7 @@ const RoomTabs = ({ currentTab, setCurrentTab }) => {
   const tabs = [
     { name: 'Palettes', current: currentTab === 'Palettes' },
     { name: 'Tilesets', current: currentTab === 'Tilesets' },
-    // { name: 'Scripts', current: currentTab === 'Scripts' },
+    { name: 'Scripts', current: currentTab === 'Scripts' },
   ];
 
   return (

src/components/Script.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import MainHeader from './MainHeader';
+import ResourceMetadata from './ResourceMetadata';
+import ScriptCode from './ScriptCode';
+
+const Script = ({ script }) => {
+  if (!script) {
+    return null;
+  }
+
+  return (
+    <>
+      <MainHeader title={`Script ${script.metadata.id}`}>
+        <ResourceMetadata metadata={script.metadata} />
+      </MainHeader>
+
+      <div className="text-xs">
+        <ScriptCode code={script.code} />
+      </div>
+    </>
+  );
+};
+
+export default Script;

src/components/ScriptCode.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ScriptCodeInstruction from './ScriptCodeInstruction.js';
+
+const ScriptCode = ({ code }) => {
+  if (!code) {
+    return null;
+  }
+
+  return (
+    <div className="text-xs">
+      {code.map(({ 0: address, 1: command }) => (
+        <div
+          key={address}
+          id={`L${address}`}
+          className="flex gap-4 px-2 font-monocode">
+          <Link
+            className="font-thin opacity-50"
+            to={`#L${address}`}>
+            0x{address}
+          </Link>
+          <ScriptCodeInstruction
+            address={address}
+            command={command}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ScriptCode;

src/components/ScriptCodeInstruction.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { hex } from '../lib/utils.js';
+
+const prettifyArguments = (operation) => {
+  const opCode = operation[0];
+  let args = operation.slice(2);
+
+  switch (opCode) {
+    case 0x18: // goTo
+      args = [
+        <Link
+          className="underline"
+          to={`#L${args[0]}`}>
+          0x{args[0]}
+        </Link>,
+      ];
+      break;
+    case 0x24: // loadRoomWithEgo
+      args = [
+        args[0],
+        <Link
+          className="underline"
+          to={`/rooms/${args[1]}`}>
+          {args[1]}
+        </Link>,
+        args[2],
+        args[3],
+      ];
+      break;
+    case 0x72:
+      args = [
+        <Link
+          className="underline"
+          to={`/rooms/${args[0]}`}>
+          {args[0]}
+        </Link>,
+      ];
+      break;
+    case 0x2d: // putActorInRoom
+      args = [
+        args[0],
+        <Link
+          className="underline"
+          to={`/rooms/${args[1]}`}>
+          {args[1]}
+        </Link>,
+      ];
+      break;
+    case 0x42: // startScript
+    case 0x62: // stopScript
+    case 0x4a: // chainScript
+      args = [
+        <Link
+          className="underline"
+          to={`/scripts/${args[0]}`}>
+          {args[0]}
+        </Link>,
+      ];
+      break;
+    case 0x48: // isEqual
+    case 0xc8: // isEqual
+    case 0x78: // isGreater
+    case 0xf8: // isGreater
+    case 0x04: // isGreaterEqual
+    case 0x84: // isGreaterEqual
+    case 0x44: // isLess
+    case 0xc4: // isLess
+    case 0x08: // isNotEqual
+    case 0x88: // isNotEqual
+    case 0x38: // lessOrEqual
+    case 0xb8: // lessOrEqual
+      args = [
+        args[0],
+        args[1],
+        <Link
+          className="underline"
+          to={`#L${args[2]}`}>
+          0x{args[2]}
+        </Link>,
+      ];
+      break;
+    case 0x28: // equalZero
+    case 0xa8: // notEqualZero
+      args = [
+        args[0],
+        <Link
+          className="underline"
+          to={`#L${args[1]}`}>
+          0x{args[1]}
+        </Link>,
+      ];
+      break;
+    case 0x28: // equalZero
+    case 0xa8: // notEqualZero
+      args = [
+        args[0],
+        <Link
+          className="underline"
+          to={`#L${args[1]}`}>
+          0x{args[1]}
+        </Link>,
+      ];
+      break;
+    case 0x3f: // ifNotState01
+    case 0x5f: // ifNotState02
+    case 0x2f: // ifNotState04
+    case 0x0f: // ifNotState08
+    case 0x7f: // ifState01
+    case 0x1f: // ifState02
+    case 0x6f: // ifState04
+    case 0x4f: // ifState08
+      args = [
+        args[0],
+        <Link
+          className="underline"
+          to={`#L${args[1]}`}>
+          0x{args[1]}
+        </Link>,
+      ];
+      break;
+  }
+  return args;
+};
+
+const ScriptCodeInstruction = ({ command }) => {
+  const opCode = hex(command[0], 2);
+  const instruction = command[1];
+  const args = prettifyArguments(command);
+
+  return (
+    <span>
+      <span className="text-primary-600 dark:text-primary-300">
+        (${opCode}) {instruction}
+      </span>{' '}
+      {args.map((arg, i) => (
+        <span key={`${i}`}>
+          {arg}
+          {i < args.length - 1 ? <span className={'opacity-50'}>, </span> : ''}
+        </span>
+      ))}
+    </span>
+  );
+};
+
+export default ScriptCodeInstruction;

src/components/ScriptsList.js

@@ -0,0 +1,31 @@
+import ColumnListHeader from './ColumnListHeader';
+import ColumnListItem from './ColumnListItem';
+
+const ScriptsList = ({ scripts, currentId }) => {
+  return (
+    <>
+      <ColumnListHeader>Scripts</ColumnListHeader>
+      {scripts
+        .sort((a, b) => a.num > b.num)
+        .map(({ metadata, code }) => {
+          if (code.length == 0) {
+            return null;
+          }
+
+          const selected = metadata.id === currentId;
+          const path = `/scripts/${metadata.id}`;
+          const label = `Script ${metadata.id}`;
+
+          return (
+            <ColumnListItem
+              key={metadata.id}
+              path={selected ? null : path}>
+              {label}
+            </ColumnListItem>
+          );
+        })}
+    </>
+  );
+};
+
+export default ScriptsList;

src/containers/ResourceExplorer.js

@@ -4,6 +4,7 @@ import RoomGfxContainer from './RoomGfxContainer';
 import PrepositionsContainer from './PrepositionsContainer';
 import RomMapContainer from './RomMapContainer';
 import SettingsContainer from './SettingsContainer';
+import ScriptContainer from './ScriptContainer';
 
 const ResourceExplorer = ({ rom, res, resources }) => {
   if (!resources) {
@@ -49,6 +50,14 @@ const ResourceExplorer = ({ rom, res, resources }) => {
           />
         }
       />
+      <Route
+        path="/scripts"
+        element={<ScriptContainer scripts={resources.scripts} />}>
+        <Route
+          path=":scriptId"
+          element={<ScriptContainer scripts={resources.scripts} />}
+        />
+      </Route>
       <Route
         path="/rom-map"
         element={

src/containers/RoomsContainer.js

@@ -10,6 +10,7 @@ import Room from '../components/Room';
 import RoomTabs from '../components/RoomTabs';
 import Palettes from '../components/Palettes';
 import RoomGfx from '../components/RoomGfx';
+import RoomScripts from '../components/RoomScripts';
 
 const RoomsContainer = ({ rooms, roomgfx, globdata }) => {
   const { roomId } = useParams();
@@ -115,7 +116,12 @@ const RoomsContainer = ({ rooms, roomgfx, globdata }) => {
                 roomgfc={roomgfc}
               />
             )}
-            {currentTab === 'Scripts' && <h2>Scripts</h2>}
+            {currentTab === 'Scripts' && (
+              <RoomScripts
+                excdScript={room.excdScript}
+                encdScript={room.encdScript}
+              />
+            )}
           </>
         )}
       </Main>

src/containers/ScriptContainer.js

@@ -0,0 +1,37 @@
+import { useParams } from 'react-router-dom';
+import PrimaryColumn from '../components/PrimaryColumn';
+import Main from '../components/Main';
+import ScriptsList from '../components/ScriptsList';
+import Script from '../components/Script';
+
+const ScriptContainer = ({ scripts }) => {
+  const { scriptId } = useParams();
+
+  const currentScriptId =
+    typeof scriptId === 'undefined' ? null : parseInt(scriptId, 10);
+
+  const script =
+    scripts.find(({ metadata }) => metadata.id === currentScriptId) || null;
+
+  return (
+    <>
+      <PrimaryColumn>
+        <ScriptsList
+          scripts={scripts}
+          currentId={currentScriptId}
+        />
+      </PrimaryColumn>
+      <Main>
+        {!script ? (
+          <h1>Scripts</h1>
+        ) : (
+          <>
+            <Script script={script}></Script>
+          </>
+        )}
+      </Main>
+    </>
+  );
+};
+
+export default ScriptContainer;