Configure eslint 🧾.

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "react-app"
+  ]
+}

package.json

@@ -44,8 +44,11 @@
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@tailwindcss/forms": "^0.5.7",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-react-app": "^7.0.1",
     "parcel": "^2.12.0",
     "parcel-reporter-static-files-copy": "^1.5.3",
     "postcss": "^8.4.38",

src/components/DropZone.js

@@ -33,6 +33,8 @@ const DropZone = ({ children, isDragActive, isDragReject, errorCode }) => {
     case 'reading-file-failed':
       errorMsg = 'File reading has failed. Please try again.';
       break;
+    default:
+      break;
   }
 
   return (

src/components/Footer.js

@@ -1,4 +1,5 @@
-import pkg from '../../package.json' with { type: 'json' };
+// eslint-disable-next-line no-undef
+import pkg from '../../package.json';
 
 const navigation = [
   {

src/components/PaletteSelector.js

@@ -72,6 +72,7 @@ const PaletteSelector = ({ palette, paletteOptions, setPalette }) => {
                     <img
                       src={palette.img}
                       className="w-48 rounded"
+                      alt={`Preview of a room with palette ${palette.name}.`}
                     />
                   </RadioGroup.Description>
                   <span

src/components/ScriptCodeInstruction.js

@@ -81,17 +81,6 @@ const prettifyArguments = (operation) => {
       ];
       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],
@@ -119,6 +108,9 @@ const prettifyArguments = (operation) => {
         </Link>,
       ];
       break;
+
+    default:
+      break;
   }
   return args;
 };

src/components/ScriptsList.js

@@ -8,7 +8,7 @@ const ScriptsList = ({ scripts, currentId }) => {
       {scripts
         .sort((a, b) => a.num > b.num)
         .map(({ metadata, code }) => {
-          if (code.length == 0) {
+          if (code.length === 0) {
             return null;
           }
 

src/containers/DropZoneContainer.js

@@ -105,7 +105,7 @@ const DropZoneContainer = ({ onFile }) => {
     if (acceptedFiles.length === 1 && rom && res) {
       onFile(rom, res);
     }
-  }, [acceptedFiles, rom, res]);
+  }, [acceptedFiles, rom, res, onFile]);
 
   return (
     <Main>

src/containers/GfxCanvasContainer.js

@@ -45,7 +45,7 @@ const GfxCanvasContainer = ({
       );
       setIsComputing(false);
     });
-  }, [gfx, nametable]);
+  }, [gfx, nametable, nametableStart, objectImages, rowLength, spacing]);
 
   return (
     <canvas

src/containers/RoomsContainer.js

@@ -41,7 +41,7 @@ const RoomsContainer = ({ rooms, titles, roomgfx, globdata }) => {
       selectedObjects[i] = !!(initialState & 0b10000000);
     }
     setSelectedObjects(selectedObjects);
-  }, [id]);
+  }, [currentId, globdata, rooms]);
 
   const setSelectedObjectState = (id, state) => {
     const newSelectedObjects = [...selectedObjects];

src/containers/ScreenCanvasContainer.js

@@ -26,7 +26,7 @@ const ScreenCanvasContainer = ({
       drawBoxes(ctx, screen.boxes, hoveredBox);
       setIsComputing(false);
     });
-  }, [screen, selectedObjects, hoveredBox, crop]);
+  }, [screen, selectedObjects, hoveredBox, crop, baseTiles, gfc]);
 
   return (
     <canvas

src/containers/TitlesContainer.js

@@ -35,7 +35,7 @@ const TitlesContainer = ({ rooms, titles }) => {
     };
 
     setTitle(title);
-  }, [id]);
+  }, [id, titles]);
 
   const updatePalette = (i, colourId) => {
     const newRoom = structuredClone(title);

src/index.js

@@ -18,8 +18,11 @@ root.render(
 
 setColourTheme(localStorage.getItem('theme'));
 
+// eslint-disable-next-line no-undef
 if (process.env.NODE_ENV === 'production' && insights) {
   // Load the analytics.
+  // eslint-disable-next-line no-undef
   insights.init('OTy7QFoUv4bUuKzo');
+  // eslint-disable-next-line no-undef
   insights.trackPages();
 }

src/lib/paletteUtils.js

@@ -37,7 +37,7 @@ const getPalette = (palette = [], forceColour = false) => {
         }
       });
 
-    case 'dmg': // Unused
+    case 'dmg-alt': // Unused
       // Method 2: Sort the colours by brightness and maps to DMG's palette.
       // May result in the same colour being mapped to 2 different DMG colour on different palettes.
       // The colours looks harsher and there are some artefacts.

src/lib/parser/parseRom.js

@@ -59,7 +59,7 @@ const parseRom = (arrayBuffer, res) => {
 
   // The title screens are stored outside of SCUMM.
   for (let i = 0; i < res?.titleoffs?.length; i++) {
-    const [offset, length] = res.titleoffs[i];
+    const [offset] = res.titleoffs[i];
 
     // @todo Figure out the length of the title chunks.
     const buffer = arrayBuffer.slice(offset); //, offset + length);

src/lib/parser/parseScriptCode.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-fallthrough */
 import { opCodes, varNames } from '../opcodes.js';
 import { hex } from '../utils.js';
 

src/lib/parser/parseTitles.js

@@ -1,5 +1,4 @@
 import Parser from './parser.js';
-import { hex } from '../utils.js';
 
 const assert = console.assert;