Use prettierrc

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

package-lock.json

@@ -10945,6 +10945,12 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "prettier": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
+      "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",

package.json

@@ -57,6 +57,7 @@
     "babel-eslint": "^10.1.0",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.4",
-    "nodemon": "^2.0.4"
+    "nodemon": "^2.0.4",
+    "prettier": "2.0.5"
   }
 }

src/App.js

@@ -45,17 +45,17 @@ function App() {
   return (
     <RecoilRoot>
       <Provider url={SOCKET_URL} options={SOCKET_OPTIONS}>
-        <div className='App'>
+        <div className="App">
           <Router>
             <Switch>
-              <Route path='/room/:room/'>
+              <Route path="/room/:room/">
                 <ConnectedBoardView />
               </Route>
-              <Redirect path='/room/' to={`/room/${genRoomName()}`} />
+              <Redirect path="/room/" to={`/room/${genRoomName()}`} />
               {/*<Route exact path='/home'>
                   <HomePage />
               </Route>*/}
-              <Redirect from='/' to='/room/' />
+              <Redirect from="/" to="/room/" />
             </Switch>
           </Router>
         </div>

src/components/AvailableItems.js

@@ -1,10 +1,10 @@
-import React from "react";
-import { nanoid } from "nanoid";
-import { useRecoilState, atom } from "recoil";
-import { ItemListAtom } from "./Items";
+import React from 'react';
+import { nanoid } from 'nanoid';
+import { useRecoilState, atom } from 'recoil';
+import { ItemListAtom } from './Items';
 
 export const AvailableItemListAtom = atom({
-  key: "availableItemList",
+  key: 'availableItemList',
   default: [],
 });
 

src/components/Board.js

@@ -25,7 +25,7 @@ export const Board = ({ user, users, config }) => {
       <ActionPane>
         <CursorPane user={user} users={users}>
           <div
-            className='content'
+            className="content"
             style={{
               background:
                 'repeating-linear-gradient(45deg, #606dbc60, #606dbc60 10px, #46529860 10px, #46529860 20px)',

src/components/Cursor.js

@@ -17,9 +17,9 @@ export const Cursor = ({ color = '#666', size = 40, pos, text }) => (
       <g>
         <g
           fill={color}
-          transform='translate(0.000000,511.000000) scale(0.100000,-0.100000)'
+          transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"
         >
-          <path d='M4637.4,4295.2v-712.7l-66.3-10.4c-294.2-47.7-464.1-87-652.6-149.2c-1060.8-346-1885.4-1170.6-2231.4-2231.4c-62.2-188.5-101.5-358.4-149.2-650.6l-10.4-68.4H814.8H100V110v-362.6h714.8h712.7l10.4-66.3c72.5-449.6,159.5-743.8,308.7-1060.8c348.1-731.4,932.3-1315.6,1663.7-1663.7c317-149.2,611.2-236.2,1060.8-308.7l66.3-10.4v-712.7V-4790H5000h362.6v714.8v712.7l68.4,10.4c439.2,72.5,733.4,155.4,1042.2,300.4c735.5,346,1342.6,953.1,1688.6,1688.6c145,308.7,227.9,602.9,300.4,1044.2l10.4,66.3h712.7H9900V110v362.6h-714.8h-712.7l-10.4,68.4c-72.5,447.5-159.5,741.7-308.7,1058.7c-348.1,731.4-932.4,1315.6-1663.7,1663.7c-317,149.2-611.2,236.2-1058.7,308.7l-68.4,10.4v712.7V5010H5000h-362.6V4295.2z M4637.4,2026.5v-953.1H5000h362.6v953.1c0,646.4,6.2,953.1,20.7,953.1c12.4,0,93.2-14.5,182.3-33.1c1087.7-223.8,1953.8-1042.2,2229.4-2105c29-105.7,58-232,64.2-279.7l14.5-89.1h-955.1h-955.1V110v-362.6h955.1h955.1l-14.5-87c-72.5-470.3-304.6-986.2-619.5-1375.7c-430.9-536.6-1110.5-928.2-1788-1033.9l-89.1-14.5v955.1v955.1H5000h-362.6v-955.1v-955.1l-87,14.5c-49.7,6.2-176.1,35.2-281.8,64.2c-1062.9,275.6-1881.3,1141.6-2105,2229.4c-18.6,89.1-33.2,169.9-33.2,182.3c0,14.5,306.6,20.7,953.1,20.7h953.1V110v362.6h-955.1h-955.1l14.5,89.1c6.2,47.7,35.2,174,64.2,279.7c246.6,955.1,988.3,1734.2,1920.6,2024.2c172,53.9,408.2,109.8,476.5,111.9C4635.3,2979.6,4637.4,2921.5,4637.4,2026.5z' />
+          <path d="M4637.4,4295.2v-712.7l-66.3-10.4c-294.2-47.7-464.1-87-652.6-149.2c-1060.8-346-1885.4-1170.6-2231.4-2231.4c-62.2-188.5-101.5-358.4-149.2-650.6l-10.4-68.4H814.8H100V110v-362.6h714.8h712.7l10.4-66.3c72.5-449.6,159.5-743.8,308.7-1060.8c348.1-731.4,932.3-1315.6,1663.7-1663.7c317-149.2,611.2-236.2,1060.8-308.7l66.3-10.4v-712.7V-4790H5000h362.6v714.8v712.7l68.4,10.4c439.2,72.5,733.4,155.4,1042.2,300.4c735.5,346,1342.6,953.1,1688.6,1688.6c145,308.7,227.9,602.9,300.4,1044.2l10.4,66.3h712.7H9900V110v362.6h-714.8h-712.7l-10.4,68.4c-72.5,447.5-159.5,741.7-308.7,1058.7c-348.1,731.4-932.4,1315.6-1663.7,1663.7c-317,149.2-611.2,236.2-1058.7,308.7l-68.4,10.4v712.7V5010H5000h-362.6V4295.2z M4637.4,2026.5v-953.1H5000h362.6v953.1c0,646.4,6.2,953.1,20.7,953.1c12.4,0,93.2-14.5,182.3-33.1c1087.7-223.8,1953.8-1042.2,2229.4-2105c29-105.7,58-232,64.2-279.7l14.5-89.1h-955.1h-955.1V110v-362.6h955.1h955.1l-14.5-87c-72.5-470.3-304.6-986.2-619.5-1375.7c-430.9-536.6-1110.5-928.2-1788-1033.9l-89.1-14.5v955.1v955.1H5000h-362.6v-955.1v-955.1l-87,14.5c-49.7,6.2-176.1,35.2-281.8,64.2c-1062.9,275.6-1881.3,1141.6-2105,2229.4c-18.6,89.1-33.2,169.9-33.2,182.3c0,14.5,306.6,20.7,953.1,20.7h953.1V110v362.6h-955.1h-955.1l14.5,89.1c6.2,47.7,35.2,174,64.2,279.7c246.6,955.1,988.3,1734.2,1920.6,2024.2c172,53.9,408.2,109.8,476.5,111.9C4635.3,2979.6,4637.4,2921.5,4637.4,2026.5z" />
         </g>
       </g>
     </svg>

src/components/Item.js

@@ -177,7 +177,7 @@ const Image = ({
       <>
         {text && (
           <div
-            className='image-text'
+            className="image-text"
             style={{
               position: 'absolute',
               right: 0,
@@ -193,7 +193,7 @@ const Image = ({
         )}
         <img
           src={backContent}
-          alt=''
+          alt=""
           draggable={false}
           {...size}
           style={{ userSelect: 'none', pointerEvents: 'none' }}
@@ -202,7 +202,7 @@ const Image = ({
     );
   } else {
     image = (
-      <div className='image-wrapper' style={{ position: 'relative' }}>
+      <div className="image-wrapper" style={{ position: 'relative' }}>
         {unflippedFor && (
           <div
             style={{
@@ -221,7 +221,7 @@ const Image = ({
         {overlay && (
           <img
             src={overlay.content}
-            alt=''
+            alt=""
             style={{
               position: 'absolute',
               userSelect: 'none',
@@ -231,7 +231,7 @@ const Image = ({
         )}
         {text && (
           <div
-            className='image-text'
+            className="image-text"
             style={{
               position: 'absolute',
               right: 0,
@@ -247,7 +247,7 @@ const Image = ({
         )}
         <img
           src={content}
-          alt=''
+          alt=""
           draggable={false}
           {...size}
           style={{ userSelect: 'none', pointerEvents: 'none' }}
@@ -359,7 +359,7 @@ const Item = ({ setState, state }) => {
         transform: `rotate(${rotation}deg)`,
         ...style,
       }}
-      className='item'
+      className="item"
       ref={itemRef}
     >
       <Component {...state} updateState={updateState} />

src/components/PanZoomRotate.js

@@ -53,7 +53,7 @@ const PanZoomRotate = ({ children }) => {
   };
 
   const onMouseDown = (e) => {
-    if ((e.button === 1) || e.altKey) {
+    if (e.button === 1 || e.altKey) {
       stateRef.current.moving = true;
       stateRef.current.startX = e.clientX;
       stateRef.current.startY = e.clientY;

src/components/SelectedItems.js

@@ -177,7 +177,7 @@ export const SelectedItems = () => {
               <label>
                 Locked:
                 <input
-                  type='checkbox'
+                  type="checkbox"
                   checked={Boolean(state.locked)}
                   onChange={(e) =>
                     updateItem(id, (item) => ({

src/games/gloomhaven-box.js

@@ -3,9 +3,9 @@ const genGloomhavenBox = () => {
 
   // map-tiles
 
-  Array.from("abcdefghijkl").forEach((l, index) => {
+  Array.from('abcdefghijkl').forEach((l, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/map-tiles/${l}1a.png`,
       backContent: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/map-tiles/${l}1b.png`,
       text: `${l}1a`,
@@ -14,7 +14,7 @@ const genGloomhavenBox = () => {
       y: 80,
     });
     items.push({
-      type: "image",
+      type: 'image',
       content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/map-tiles/${l}2a.png`,
       backContent: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/map-tiles/${l}2b.png`,
       text: `${l}2a`,
@@ -27,40 +27,40 @@ const genGloomhavenBox = () => {
   // character-mats
 
   items.push({
-    type: "image",
+    type: 'image',
     content:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-mats/brute.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-mats/brute.png',
     backContent:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-mats/brute-back.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-mats/brute-back.png',
     width: 300,
     x: 500,
     y: 500,
   });
 
   items.push({
-    type: "image",
+    type: 'image',
     content:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-mats/spellweaver.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-mats/spellweaver.png',
     backContent:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-mats/spellweaver-back.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-mats/spellweaver-back.png',
     width: 300,
     x: 500,
     y: 700,
   });
 
   items.push({
-    type: "image",
+    type: 'image',
     content:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-perks/brute-perks.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-perks/brute-perks.png',
     width: 300,
     x: 1000,
     y: 500,
   });
 
   items.push({
-    type: "image",
+    type: 'image',
     content:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-perks/spellweaver-perks.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-perks/spellweaver-perks.png',
     width: 300,
     x: 1000,
     y: 700,
@@ -69,11 +69,11 @@ const genGloomhavenBox = () => {
   // Attack modifiers
 
   [...Array(19).keys()].forEach((_, index) => {
-    const number = index < 9 ? "0" + (index + 1) : "" + (index + 1);
+    const number = index < 9 ? '0' + (index + 1) : '' + (index + 1);
     items.push({
-      type: "image",
+      type: 'image',
       content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/attack-modifiers/base/player/am-p-${number}.png`,
-      backContent: "/games/gloom/attackback.png",
+      backContent: '/games/gloom/attackback.png',
       width: 100,
       flipped: true,
       x: 300,
@@ -82,11 +82,11 @@ const genGloomhavenBox = () => {
   });
 
   [...Array(19).keys()].forEach((_, index) => {
-    const number = index < 9 ? "0" + (index + 1) : "" + (index + 1);
+    const number = index < 9 ? '0' + (index + 1) : '' + (index + 1);
     items.push({
-      type: "image",
+      type: 'image',
       content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/attack-modifiers/base/player/am-p-${number}.png`,
-      backContent: "/games/gloom/attackback.png",
+      backContent: '/games/gloom/attackback.png',
       width: 100,
       flipped: true,
       x: 300,
@@ -95,11 +95,11 @@ const genGloomhavenBox = () => {
   });
 
   [...Array(19).keys()].forEach((_, index) => {
-    const number = index < 9 ? "0" + (index + 1) : "" + (index + 1);
+    const number = index < 9 ? '0' + (index + 1) : '' + (index + 1);
     items.push({
-      type: "image",
+      type: 'image',
       content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/attack-modifiers/base/monster/am-m-${number}.png`,
-      backContent: "/games/gloom/attackback.png",
+      backContent: '/games/gloom/attackback.png',
       width: 100,
       flipped: true,
       x: 1000,
@@ -110,54 +110,54 @@ const genGloomhavenBox = () => {
   // monster tokens
   [...Array(10).keys()].forEach((_, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content:
-        "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/monster-tokens/bandit-guard.png",
+        'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/monster-tokens/bandit-guard.png',
       x: 1400 + 60 * index,
       y: 0,
       width: 60,
       text: `${index}`,
       overlay: {
         content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/monster-tokens/${
-          index < 7 ? "normal" : "elite"
+          index < 7 ? 'normal' : 'elite'
         }-monster-overlay.svg`,
       },
     });
     items.push({
-      type: "image",
+      type: 'image',
       content:
-        "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/monster-tokens/bandit-archer.png",
+        'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/monster-tokens/bandit-archer.png',
       x: 1400 + 60 * index,
       y: 50,
       width: 60,
       text: `${index}`,
       overlay: {
         content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/monster-tokens/${
-          index < 7 ? "normal" : "elite"
+          index < 7 ? 'normal' : 'elite'
         }-monster-overlay.svg`,
       },
     });
     items.push({
-      type: "image",
+      type: 'image',
       content:
-        "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/monster-tokens/living-bones.png",
+        'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/monster-tokens/living-bones.png',
       x: 1400 + 60 * index,
       y: 100,
       width: 60,
       text: `${index}`,
       overlay: {
         content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/monster-tokens/${
-          index < 7 ? "normal" : "elite"
+          index < 7 ? 'normal' : 'elite'
         }-monster-overlay.svg`,
       },
     });
   });
 
-  const monsters = ["bandit-guard", "bandit-archer", "living-bones"];
+  const monsters = ['bandit-guard', 'bandit-archer', 'living-bones'];
 
   monsters.forEach((monsterName, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content: `https://raw.githubusercontent.com//romgar/gloomhaven/master/images/monster-stat-cards/${monsterName}-0.png`,
       x: 1300 + 200 * index,
       y: 300,
@@ -168,9 +168,9 @@ const genGloomhavenBox = () => {
   // Overlay tokens
   [...Array(20).keys()].forEach((_, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content:
-        "https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/treasures/coin-1.png",
+        'https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/treasures/coin-1.png',
       x: 1100 + 20 * index,
       y: 200,
       width: 50,
@@ -178,8 +178,8 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "counter",
-    label: "Life #1",
+    type: 'counter',
+    label: 'Life #1',
     value: 0,
     x: 100,
     y: 100,
@@ -187,8 +187,8 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "counter",
-    label: "Life #2",
+    type: 'counter',
+    label: 'Life #2',
     value: 0,
     x: 100,
     y: 300,
@@ -196,8 +196,8 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "counter",
-    label: "XP #1",
+    type: 'counter',
+    label: 'XP #1',
     value: 0,
     x: 300,
     y: 100,
@@ -205,8 +205,8 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "counter",
-    label: "XP #2",
+    type: 'counter',
+    label: 'XP #2',
     value: 0,
     x: 300,
     y: 300,
@@ -214,8 +214,8 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "counter",
-    label: "Gold #1",
+    type: 'counter',
+    label: 'Gold #1',
     value: 0,
     x: 100,
     y: 600,
@@ -223,8 +223,8 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "counter",
-    label: "Gold #2",
+    type: 'counter',
+    label: 'Gold #2',
     value: 0,
     x: 100,
     y: 900,
@@ -232,9 +232,9 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "image",
+    type: 'image',
     content:
-      "https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/treasures/treasure.png",
+      'https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/treasures/treasure.png',
     x: 1100,
     y: 250,
     width: 50,
@@ -242,9 +242,9 @@ const genGloomhavenBox = () => {
 
   [...Array(2).keys()].forEach((_, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content:
-        "https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/doors/stone-door.png",
+        'https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/doors/stone-door.png',
       x: 1100 + 20 * index,
       y: 300,
       width: 50,
@@ -253,9 +253,9 @@ const genGloomhavenBox = () => {
 
   [...Array(2).keys()].forEach((_, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content:
-        "https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/traps/spike-pit-trap.png",
+        'https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/traps/spike-pit-trap.png',
       x: 1100 + 20 * index,
       y: 350,
       width: 50,
@@ -264,9 +264,9 @@ const genGloomhavenBox = () => {
 
   [...Array(2).keys()].forEach((_, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content:
-        "https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/obstacles/table.png",
+        'https://raw.githubusercontent.com//romgar/gloomhaven/master/images/overlay-tokens/obstacles/table.png',
       x: 1100 + 20 * index,
       y: 400,
       width: 50,
@@ -275,41 +275,41 @@ const genGloomhavenBox = () => {
 
   // Character ability cards
   const brute = {
-    code: "BR",
+    code: 'BR',
     abilityCards: {
-      "level-1": [
-        "eye-for-an-eye",
-        "grab-and-go",
-        "leaping-cleave",
-        "overwhelming-assault",
-        "provoking-roar",
-        "shield-bash",
-        "spare-dagger",
-        "sweeping-blow",
-        "trample",
-        "warding-strength",
+      'level-1': [
+        'eye-for-an-eye',
+        'grab-and-go',
+        'leaping-cleave',
+        'overwhelming-assault',
+        'provoking-roar',
+        'shield-bash',
+        'spare-dagger',
+        'sweeping-blow',
+        'trample',
+        'warding-strength',
       ],
-      "level-X": ["balanced-measure", "skewer", "wall-of-doom"],
-      "level-2": ["fatal-advance", "juggernaut"],
-      "level-3": ["brute-force", "hook-and-chain"],
-      "level-4": ["devastating-hack", "unstoppable-charge"],
-      "level-5": ["skirmishing-maneuver", "whirlwind"],
-      "level-6": ["immovable-phalanx", "quietus"],
-      "level-7": ["crippling-offensive", "defensive-tactics"],
-      "level-8": ["frenzied-onslaught", "selfish-retribution"],
-      "level-9": ["face-your-end", "king-of-the-hill"],
+      'level-X': ['balanced-measure', 'skewer', 'wall-of-doom'],
+      'level-2': ['fatal-advance', 'juggernaut'],
+      'level-3': ['brute-force', 'hook-and-chain'],
+      'level-4': ['devastating-hack', 'unstoppable-charge'],
+      'level-5': ['skirmishing-maneuver', 'whirlwind'],
+      'level-6': ['immovable-phalanx', 'quietus'],
+      'level-7': ['crippling-offensive', 'defensive-tactics'],
+      'level-8': ['frenzied-onslaught', 'selfish-retribution'],
+      'level-9': ['face-your-end', 'king-of-the-hill'],
     },
     backCard:
-      "https://raw.githubusercontent.com//romgar/gloomhaven/master/images/character-ability-cards/BR/br-back.png",
+      'https://raw.githubusercontent.com//romgar/gloomhaven/master/images/character-ability-cards/BR/br-back.png',
     icon:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-icons/brute-icon.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-icons/brute-icon.png',
     token:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-icons/brute-character-token.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-icons/brute-character-token.png',
   };
 
-  brute.abilityCards["level-1"].forEach((abilityName, index) => {
+  brute.abilityCards['level-1'].forEach((abilityName, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content: `https://raw.githubusercontent.com//romgar/gloomhaven/master/images/character-ability-cards/${brute.code}/${abilityName}.png`,
       backContent: `${brute.backCard}`,
       x: 0 + 100 * index,
@@ -319,7 +319,7 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "image",
+    type: 'image',
     content: brute.icon,
     x: 450,
     y: 500,
@@ -328,7 +328,7 @@ const genGloomhavenBox = () => {
 
   [...Array(5).keys()].forEach((_, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content: brute.token,
       x: 350 + 20 * index,
       y: 500,
@@ -337,39 +337,39 @@ const genGloomhavenBox = () => {
   });
 
   const spellWeaver = {
-    code: "SW",
+    code: 'SW',
     abilityCards: {
-      "level-1": [
-        "fire-orbs",
-        "flame-strike",
-        "freezing-nova",
-        "frost-armor",
-        "impaling-eruption",
-        "mana-bolt",
-        "reviving-ether",
-        "ride-the-wind",
+      'level-1': [
+        'fire-orbs',
+        'flame-strike',
+        'freezing-nova',
+        'frost-armor',
+        'impaling-eruption',
+        'mana-bolt',
+        'reviving-ether',
+        'ride-the-wind',
       ],
-      "level-X": ["crackling-air", "hardened-spikes", "aid-from-the-ether"],
-      "level-2": ["flashing-burst", "icy-blast"],
-      "level-3": ["elemental-aid", "cold-fire"],
-      "level-4": ["forked-beam", "spirit-of-doom"],
-      "level-5": ["engulfed-in-flames", "chromatic-explosion"],
-      "level-6": ["frozen-night", "living-torch"],
-      "level-7": ["stone-fists", "twin-restoration"],
-      "level-8": ["zephyr-wings", "cold-front"],
-      "level-9": ["inferno", "black-hole"],
+      'level-X': ['crackling-air', 'hardened-spikes', 'aid-from-the-ether'],
+      'level-2': ['flashing-burst', 'icy-blast'],
+      'level-3': ['elemental-aid', 'cold-fire'],
+      'level-4': ['forked-beam', 'spirit-of-doom'],
+      'level-5': ['engulfed-in-flames', 'chromatic-explosion'],
+      'level-6': ['frozen-night', 'living-torch'],
+      'level-7': ['stone-fists', 'twin-restoration'],
+      'level-8': ['zephyr-wings', 'cold-front'],
+      'level-9': ['inferno', 'black-hole'],
     },
     backCard:
-      "https://raw.githubusercontent.com//romgar/gloomhaven/master/images/character-ability-cards/SW/sw-back.png",
+      'https://raw.githubusercontent.com//romgar/gloomhaven/master/images/character-ability-cards/SW/sw-back.png',
     icon:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-icons/spellweaver-icon.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-icons/spellweaver-icon.png',
     token:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-icons/spellweaver-character-token.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/character-icons/spellweaver-character-token.png',
   };
 
-  spellWeaver.abilityCards["level-1"].forEach((abilityName, index) => {
+  spellWeaver.abilityCards['level-1'].forEach((abilityName, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content: `https://raw.githubusercontent.com//romgar/gloomhaven/master/images/character-ability-cards/${spellWeaver.code}/${abilityName}.png`,
       backContent: `${spellWeaver.backCard}`,
       x: 0 + 100 * index,
@@ -379,7 +379,7 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "image",
+    type: 'image',
     content: spellWeaver.icon,
     x: 450,
     y: 700,
@@ -388,7 +388,7 @@ const genGloomhavenBox = () => {
 
   [...Array(5).keys()].forEach((_, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content: spellWeaver.token,
       x: 350 + 20 * index,
       y: 700,
@@ -396,10 +396,10 @@ const genGloomhavenBox = () => {
     });
   });
 
-  const elements = ["ice", "air", "earth", "fire", "dark", "light"];
+  const elements = ['ice', 'air', 'earth', 'fire', 'dark', 'light'];
   elements.forEach((elementName, index) => {
     items.push({
-      type: "image",
+      type: 'image',
       content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/elements/${elementName}-element.svg`,
       x: 0 + 30 * index,
       y: 0,
@@ -408,28 +408,28 @@ const genGloomhavenBox = () => {
   });
 
   items.push({
-    type: "image",
+    type: 'image',
     content:
-      "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/elements/element-matboard.png",
+      'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/elements/element-matboard.png',
     x: 0,
     y: 100,
     width: 300,
   });
 
   const ailments = [
-    "reinforcement",
-    "disarm",
-    "immobilise",
-    "wound",
-    "stun",
-    "invisible",
-    "confusion",
-    "poison",
+    'reinforcement',
+    'disarm',
+    'immobilise',
+    'wound',
+    'stun',
+    'invisible',
+    'confusion',
+    'poison',
   ];
   [...Array(5).keys()].forEach((_, rowIndex) => {
     ailments.forEach((ailmentName, index) => {
       items.push({
-        type: "image",
+        type: 'image',
         content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/ailments/${ailmentName}.png`,
         x: 0 + 30 * index,
         y: 100 + 40 * rowIndex,
@@ -438,37 +438,37 @@ const genGloomhavenBox = () => {
     });
 
     const battleGoals = [
-      "aggressor",
-      "diehard",
-      "dynamo",
-      "executioner",
-      "explorer",
-      "fasthealer",
-      "hoarder",
-      "hunter",
-      "indigent",
-      "layabout",
-      "masochist",
-      "neutralizer",
-      "opener",
-      "pacifist",
-      "plunderer",
-      "professional",
-      "protector",
-      "purist",
-      "sadist",
-      "scrambler",
-      "straggler",
-      "streamliner",
-      "workhorse",
-      "zealot",
+      'aggressor',
+      'diehard',
+      'dynamo',
+      'executioner',
+      'explorer',
+      'fasthealer',
+      'hoarder',
+      'hunter',
+      'indigent',
+      'layabout',
+      'masochist',
+      'neutralizer',
+      'opener',
+      'pacifist',
+      'plunderer',
+      'professional',
+      'protector',
+      'purist',
+      'sadist',
+      'scrambler',
+      'straggler',
+      'streamliner',
+      'workhorse',
+      'zealot',
     ];
     battleGoals.forEach((battleGoalName, index) => {
       items.push({
-        type: "image",
+        type: 'image',
         content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/battle-goals/${battleGoalName}.png`,
         backContent:
-          "https://raw.githubusercontent.com/romgar/gloomhaven/master/images/battle-goals/battlegoal-back.png",
+          'https://raw.githubusercontent.com/romgar/gloomhaven/master/images/battle-goals/battlegoal-back.png',
         x: 200 + 1 * index,
         y: 0 + 1 * index,
         flipped: true,
@@ -477,24 +477,24 @@ const genGloomhavenBox = () => {
     });
 
     const characterItems = [
-      "boots-of-striding",
-      "cloak-of-invisibility",
-      "eagle-eye-goggles",
-      "heater-shield",
-      "hide-armor",
-      "iron-helmet",
-      "leather-armor",
-      "minor-healing-potion",
-      "minor-power-potion",
-      "minor-stamina-potion",
-      "piercing-bow",
-      "poison-dagger",
-      "war-hammer",
-      "winged-shoes",
+      'boots-of-striding',
+      'cloak-of-invisibility',
+      'eagle-eye-goggles',
+      'heater-shield',
+      'hide-armor',
+      'iron-helmet',
+      'leather-armor',
+      'minor-healing-potion',
+      'minor-power-potion',
+      'minor-stamina-potion',
+      'piercing-bow',
+      'poison-dagger',
+      'war-hammer',
+      'winged-shoes',
     ];
     characterItems.forEach((itemName, index) => {
       items.push({
-        type: "image",
+        type: 'image',
         content: `https://raw.githubusercontent.com/romgar/gloomhaven/master/images/items/1-14/${itemName}.png`,
         x: 1500 + 40 * index,
         y: 1500,

src/serviceWorker.js

@@ -57,7 +57,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
@@ -103,7 +103,7 @@ function checkValidServiceWorker(swUrl, config) {
   fetch(swUrl, {
     headers: { 'Service-Worker': 'script' },
   })
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
       if (
@@ -111,7 +111,7 @@ function checkValidServiceWorker(swUrl, config) {
         (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -131,10 +131,10 @@ function checkValidServiceWorker(swUrl, config) {
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready
-      .then(registration => {
+      .then((registration) => {
         registration.unregister();
       })
-      .catch(error => {
+      .catch((error) => {
         console.error(error.message);
       });
   }

src/views/BoardView.js

@@ -21,7 +21,7 @@ export const BoardView = () => {
   const [boardConfig, setBoardConfig] = React.useState({});
 
   return (
-    <div className='board'>
+    <div className="board">
       <ZoomPanRotate>
         <Board user={user} users={users} config={boardConfig} />
       </ZoomPanRotate>