diff --git a/.eslintrc.yml b/.eslintrc.yml index dc417b32..df5f9a11 100644 --- a/.eslintrc.yml +++ b/.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 diff --git a/.nvmrc b/.nvmrc index 7b4bce4d..b65ea2e8 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v10.15.1 \ No newline at end of file +v12.6.0 diff --git a/package.json b/package.json index 8cb691dc..efbabd1b 100644 --- a/package.json +++ b/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%", diff --git a/src/App.js b/src/App.js index 40ee24d0..cbd2d78e 100644 --- a/src/App.js +++ b/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; diff --git a/src/__tests__/utils/get-surrounding-tiles.js b/src/__tests__/utils/get-surrounding-tiles.js index 59f85208..1979c105 100644 --- a/src/__tests__/utils/get-surrounding-tiles.js +++ b/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], diff --git a/src/components/dialog/index.js b/src/components/dialog/index.js index d0f43e56..03eb2faf 100644 --- a/src/components/dialog/index.js +++ b/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(
- { - goBack && - - } + {goBack && ( + + )} + { children }
); diff --git a/src/components/micro-dialog/index.js b/src/components/micro-dialog/index.js index 9bf4a7cf..d58990f2 100644 --- a/src/components/micro-dialog/index.js +++ b/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( -
- - { - !noButton && - - } +
+ {!noButton && ( + + )} { children } diff --git a/src/features/app-state/actions/use-game-viewport-scaling.js b/src/features/app-state/actions/use-game-viewport-scaling.js index eaa14bff..a827705f 100644 --- a/src/features/app-state/actions/use-game-viewport-scaling.js +++ b/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({ diff --git a/src/features/dialog-manager/dialogs/chest-loot/index.js b/src/features/dialog-manager/dialogs/chest-loot/index.js index 48814dd2..b38b3dcd 100644 --- a/src/features/dialog-manager/dialogs/chest-loot/index.js +++ b/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 }) => { { exp }
- { - item && -
-
- - {item.name} - -
- } + {item && ( +
+
+ + {item.name} + +
+ )}
diff --git a/src/features/game-menus/game-music/index.js b/src/features/game-menus/game-music/index.js index ab68ae32..c6dbc5ca 100644 --- a/src/features/game-menus/game-music/index.js +++ b/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( { 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( + + ); + } + // 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( - - ); - 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 (