Chore/update node and npm versions

.eslintrc.yml

@@ -15,13 +15,13 @@ rules:
   no-implicit-coercion: warn
   no-warning-comments: warn
   no-useless-return: warn
+  no-use-before-define: off
   no-new: warn
   no-multi-spaces:
     - warn
     - exceptions:
         ImportDeclaration: true
   no-undef-init: warn
-  no-undefined: warn
   computed-property-spacing:
     - warn
     - never
@@ -41,9 +41,6 @@ rules:
     - stroustrup
     - allowSingleLine: true
   block-spacing: warn
-  array-element-newline:
-    - warn
-    - consistent
   array-bracket-spacing: warn
   array-bracket-newline:
     - warn

.nvmrc

@@ -1 +1 @@
-v10.15.1
+v12.6.0

package.json

@@ -1,34 +1,35 @@
 {
   "name": "react-rpg.com",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "body-scroll-lock": "^2.6.1",
-    "customize-cra": "^0.2.11",
+    "customize-cra": "^0.8.0",
     "hammerjs": "^2.0.8",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "node-sass": "^4.11.0",
-    "react": "^16.8.1",
+    "react": "16.10.1",
     "react-app-rewired": "^2.1.0",
     "react-device-detect": "^1.6.2",
     "react-dom": "^16.8.1",
     "react-ga": "^2.5.7",
-    "react-redux": "^5.0.7",
-    "react-scripts": "^2.1.3",
+    "react-redux": "^7.1.1",
+    "react-scripts": "^3.2.0",
     "react-sound": "^1.2.0",
     "react-timeout": "^1.1.2",
     "redux": "^4.0.0",
-    "redux-persist": "^5.10.0",
+    "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
-    "typeface-montserrat": "^0.0.54",
-    "typeface-roboto": "^0.0.54"
+    "typeface-montserrat": "^0.0.75",
+    "typeface-roboto": "^0.0.75"
   },
   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ."
   },
   "browserslist": [
     ">0.2%",

src/App.js

@@ -31,7 +31,7 @@ const App = ({ appState, world }) => {
     if(!nativeApp && !optOutDownload) {
       setShowDownloadPopup(true);
     }
-  }, []);
+  }, [nativeApp, optOutDownload]);
 
   const { optOutDownload, sideMenu } = appState;
   const { gameMode, floorNum } = world;

src/__tests__/utils/get-surrounding-tiles.js

@@ -58,7 +58,7 @@ describe('getSurroundingTiles tests:', () => {
       expect(getSurroundingTiles(startPos).tiles).toEqual(expected);
     });
 
-    test('startPos is top right corner: [19, 0]', () => { 
+    test('startPos is top right corner: [19, 0]', () => {
       const startPos = [(MAP_DIMENSIONS[0] - 1), 0];
       const expected = [
         [16, 0], [17, 0], [18, 0], [19, 0],

src/components/dialog/index.js

@@ -5,27 +5,28 @@ import './styles.scss';
 const Dialog = ({ children, goBack, onKeyPress }) => {
 
   useEffect(() => {
+    const handleKeyPress = event => {
+      // case for 'enter' or 'space' key
+      if(event.keyCode === 13 || event.keyCode === 32) {
+        onKeyPress();
+      }
+    };
+
     if(onKeyPress) window.addEventListener('keydown', handleKeyPress);
     return () => {
       if(onKeyPress) window.removeEventListener('keydown', handleKeyPress);
     };
-  }, []);
+  }, [onKeyPress]);
 
-  function handleKeyPress(event) {
-    // case for 'enter' or 'space' key
-    if(event.keyCode === 13 || event.keyCode === 32) {
-      onKeyPress();
-    }
-  }
 
   return(
     <div className='dialog__container white-border'>
-      {
-        goBack &&
-          <button onClick={goBack} className='dialog__back-button'>
-            <i className={`fa fa-arrow-left`} />
-          </button>
-      }
+      {goBack && (
+        <button onClick={goBack} className='dialog__back-button'>
+          <i className={`fa fa-arrow-left`} />
+        </button>
+      )}
+
       { children }
     </div>
   );

src/components/micro-dialog/index.js

@@ -5,31 +5,31 @@ import './styles.scss';
 const MicroDialog = ({ noButton, onClose, children, fullsize, className, onKeyPress }) => {
 
   useEffect(() => {
+    const handleKeyPress = event => {
+      // case for 'enter' or 'space' key
+      if(event.keyCode === 13 || event.keyCode === 32) {
+        onKeyPress();
+      }
+    };
+
     if(onKeyPress) window.addEventListener('keydown', handleKeyPress);
     return () => {
       if(onKeyPress) window.removeEventListener('keydown', handleKeyPress);
     };
-  }, []);
-
-  function handleKeyPress(event) {
-    // case for 'enter' or 'space' key
-    if(event.keyCode === 13 || event.keyCode === 32) {
-      onKeyPress();
-    }
-  }
+  }, [onKeyPress]);
 
   const noSpacing = { top: 0, bottom: 0, left: 0, right: 0 };
 
   return(
-    <div style={fullsize ? noSpacing : {}}
-      className={`micro-dialog__container white-border ${className || ''}`}>
-
-      {
-        !noButton &&
-          <button className='micro-dialog__close' onClick={onClose}>
-            <i className={`fa fa-times`} />
-          </button>
-      }
+    <div
+      style={fullsize ? noSpacing : {}}
+      className={`micro-dialog__container white-border ${className || ''}`}
+    >
+      {!noButton && (
+        <button className='micro-dialog__close' onClick={onClose}>
+          <i className={`fa fa-times`} />
+        </button>
+      )}
 
       { children }
 

src/features/app-state/actions/use-game-viewport-scaling.js

@@ -36,7 +36,7 @@ const useGameViewportScaling = () => {
 
     _updateViewportScale({ largeView, sideMenu });
 
-  }, [height, width]);
+  }, [height, width, _updateViewportScale]);
 
   function updateViewportScale({ largeView, sideMenu }) {
     store.dispatch({

src/features/dialog-manager/dialogs/chest-loot/index.js

@@ -16,7 +16,7 @@ const ChestLoot = ({ dialog, pickupItem, openChest, closeChestDialog }) => {
 
   useEffect(() => {
     if(!chestOpen) openChest();
-  }, []);
+  }, [chestOpen, openChest]);
 
   function handleContinue() {
     pickupItem();
@@ -44,19 +44,18 @@ const ChestLoot = ({ dialog, pickupItem, openChest, closeChestDialog }) => {
           <span>{ exp }</span>
         </div>
 
-        {
-          item &&
-            <div className='flex-row chest-loot__item'>
-              <div style={{
-                  backgroundImage: `url('${item.image}')`,
-                  width: '40px',
-                  height: '40px'
-                }} />
-                <span className='flex-column chest-loot__item-name'>
-                  {item.name}
-                </span>
-            </div>
-        }
+        {item && (
+          <div className='flex-row chest-loot__item'>
+            <div style={{
+                backgroundImage: `url('${item.image}')`,
+                width: '40px',
+                height: '40px'
+              }} />
+              <span className='flex-column chest-loot__item-name'>
+                {item.name}
+              </span>
+          </div>
+        )}
       </div>
 
       <div className='flex-column chest-loot__buttons'>

src/features/game-menus/game-music/index.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { connect }                    from 'react-redux';
-import Sound                          from 'react-sound';
+import React, { useState, useEffect, useCallback } from 'react';
+import { connect } from 'react-redux';
+import Sound from 'react-sound';
 
-import AmbientMusic     from './ambient-music.mp3';
-import setGameSound     from '../actions/set-game-sound';
+import AmbientMusic from './ambient-music.mp3';
+import setGameSound from '../actions/set-game-sound';
 import gameSoundEnabled from '../actions/game-sound-enabled';
 
 import './styles.scss';
@@ -12,23 +12,13 @@ const GameMusic = ({ sideMenu, gameSoundEnabled, setGameSound }) => {
 
   const [gameMusic, setGameMusic] = useState(null);
 
-  useEffect(() => {
-    window.addEventListener('mousedown', handleKeyPress);
-    window.addEventListener('keydown', handleKeyPress);
-    window.addEventListener('focus', handleFocus);
-    window.addEventListener('blur', handleBlur);
-    return () => {
-      window.removeEventListener('mousedown', handleKeyPress);
-      window.removeEventListener('keydown', handleKeyPress);
-      window.removeEventListener('focus', handleFocus);
-      window.removeEventListener('blur', handleBlur);
-    };
-  }, []);
+  function turnOffSound() {
+    setGameMusic(null);
+    setGameSound(false);
+  }
 
-  function handleKeyPress() {
-    // we have to load music only have user has clicked or pressed a key
-    // chrome disables auto play until user has interacted with window
-    if(gameSoundEnabled()) {
+  const turnOnSound = useCallback(
+    () => {
       setGameMusic(
         <Sound
           url={AmbientMusic}
@@ -37,11 +27,10 @@ const GameMusic = ({ sideMenu, gameSoundEnabled, setGameSound }) => {
           loop={true}
           volume={50} />
       );
-    }
-    // now we no longer need our key or mouse event listeners
-    window.removeEventListener('mousedown', handleKeyPress);
-    window.removeEventListener('keydown', handleKeyPress);
-  }
+      setGameSound(true);
+    },
+    [setGameSound]
+  );
 
   function toggleMusic() {
     if(gameMusic) {
@@ -52,34 +41,49 @@ const GameMusic = ({ sideMenu, gameSoundEnabled, setGameSound }) => {
     }
   }
 
-  function handleFocus() {
-    // make sure the player has music enabled before turning it back on
-    if(gameSoundEnabled()) {
-      turnOnSound();
-    }
-  }
+  useEffect(() => {
+    const handleKeyPress = () => {
+      // we have to load music only have user has clicked or pressed a key
+      // chrome disables auto play until user has interacted with window
+      if(gameSoundEnabled()) {
+        setGameMusic(
+          <Sound
+            url={AmbientMusic}
+            playStatus={'PLAYING'}
+            autoLoad={true}
+            loop={true}
+            volume={50} />
+        );
+      }
+      // now we no longer need our key or mouse event listeners
+      window.removeEventListener('mousedown', handleKeyPress);
+      window.removeEventListener('keydown', handleKeyPress);
+    };
 
-  function handleBlur() {
-    // during blur, don't change the sound redux state, just turn off music
-    setGameMusic(null);
-  }
 
-  function turnOffSound() {
-    setGameMusic(null);
-    setGameSound(false);
-  }
+    function handleFocus() {
+      // make sure the player has music enabled before turning it back on
+      if(gameSoundEnabled()) {
+        turnOnSound();
+      }
+    }
 
-  function turnOnSound() {
-    setGameMusic(
-      <Sound
-        url={AmbientMusic}
-        playStatus={'PLAYING'}
-        autoLoad={true}
-        loop={true}
-        volume={50} />
-    );
-    setGameSound(true);
-  }
+    function handleBlur() {
+      // during blur, don't change the sound redux state, just turn off music
+      setGameMusic(null);
+    }
+
+    window.addEventListener('mousedown', handleKeyPress);
+    window.addEventListener('keydown', handleKeyPress);
+    window.addEventListener('focus', handleFocus);
+    window.addEventListener('blur', handleBlur);
+    return () => {
+      window.removeEventListener('mousedown', handleKeyPress);
+      window.removeEventListener('keydown', handleKeyPress);
+      window.removeEventListener('focus', handleFocus);
+      window.removeEventListener('blur', handleBlur);
+    };
+  }, [gameSoundEnabled, turnOnSound]);
 
   return (
     <button className='game-music__button white-border'