From 26bef9ecd6b035b1bdae2bdd0766261fd90b6554 Mon Sep 17 00:00:00 2001 From: Andrew Steinheiser Date: Thu, 3 Oct 2019 01:18:07 -0700 Subject: [PATCH 1/4] fix abrupt app store message, smoother transition (#89) * smoothly present the app store dialog * v1.0.1 --- package.json | 4 ++-- src/components/download-app-popup/index.js | 11 +++++++++-- src/components/download-app-popup/styles.scss | 13 +++++++++++++ src/index.scss | 5 +++-- 4 files changed, 27 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 383e2642..8cb691dc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-rpg.com", - "version": "1.0.0", + "version": "1.0.1", "private": true, "dependencies": { "body-scroll-lock": "^2.6.1", @@ -36,4 +36,4 @@ "not ie <= 11", "not op_mini all" ] -} +} \ No newline at end of file diff --git a/src/components/download-app-popup/index.js b/src/components/download-app-popup/index.js index 6219d157..6dad409d 100644 --- a/src/components/download-app-popup/index.js +++ b/src/components/download-app-popup/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { connect } from 'react-redux'; import optOutDownload from '../../features/app-state/actions/opt-out-download'; @@ -11,14 +11,21 @@ const ANDROID_URL = 'https://play.google.com/store/apps/details?id=com.reactrpgn const IOS_URL = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1450907766&mt=8'; const DownloadAppPopup = ({ onClose, optOutDownload, open }) => { + const [ready, setReady] = useState(false); - if(!open) return null; + useEffect(() => { + if (open) { + setTimeout(() => setReady(true), 5000); + } + }, [open]); function handleOptOutDownload() { optOutDownload(); onClose(); } + if(!open || !ready) return null; + return(
diff --git a/src/components/download-app-popup/styles.scss b/src/components/download-app-popup/styles.scss index c0ff6eae..4339b86d 100644 --- a/src/components/download-app-popup/styles.scss +++ b/src/components/download-app-popup/styles.scss @@ -11,6 +11,8 @@ justify-content: center; align-items: center; + animation: fadein 2s; + .background-close { position: absolute; top: 0; @@ -80,10 +82,21 @@ .ios-icon { padding: 32px 0 16px; } + .android-icon { padding: 16px 0 32px; } } } } +} + +@keyframes fadein { + from { + opacity: 0; + } + + to { + opacity: 1; + } } \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index 1f6a6048..e17ea456 100644 --- a/src/index.scss +++ b/src/index.scss @@ -8,7 +8,7 @@ html { --orange: #daa43d; --light-red: #ff593b; --purple: #8000ed; - --transparent: rgba(0,0,0,0); + --transparent: rgba(0, 0, 0, 0); } body { @@ -38,6 +38,7 @@ button { cursor: pointer; } + a { outline-color: var(--gray); } @@ -91,4 +92,4 @@ a { border: 1px solid; border-radius: 2px; color: var(--gray); -} +} \ No newline at end of file From 7faa3381845837248073b553ed2e0f795d676502 Mon Sep 17 00:00:00 2001 From: Andrew Date: Thu, 3 Oct 2019 23:20:47 -0700 Subject: [PATCH 2/4] update node version --- .nvmrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From a359154cd15ea079e631401ed84d77ed358a5bf1 Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 6 Nov 2019 22:33:41 -0700 Subject: [PATCH 3/4] upgrade packages --- .eslintrc.yml | 5 +- package.json | 17 +- src/App.js | 2 +- src/__tests__/utils/get-surrounding-tiles.js | 2 +- src/components/dialog/index.js | 27 +- src/components/micro-dialog/index.js | 34 +- .../actions/use-game-viewport-scaling.js | 2 +- .../dialogs/chest-loot/index.js | 27 +- src/features/game-menus/game-music/index.js | 106 +- src/features/player/controls.js | 172 +- yarn.lock | 8329 ++++++++++------- 11 files changed, 5008 insertions(+), 3715 deletions(-) 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/package.json b/package.json index 8cb691dc..637ee66f 100644 --- a/package.json +++ b/package.json @@ -4,31 +4,32 @@ "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 (