Merge pull request #40 from ShaneIsrael/shane/various-bug-fixes

Various Frontend Bug Fixes
ShaneIsrael · Sep 28, 2023 · 80ba43c · 80ba43c
2 parents 6702fdd + 6c34689
commit 80ba43c
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 102 deletions.
diff --git a/client/src/components/board/BoardRow.js b/client/src/components/board/BoardRow.js
@@ -76,7 +76,7 @@ const HighlightLetterHolder = styled(Sheet)(({ theme, active, color, highlightbo
   fontWeight: 'bold',
 }))
 
-const BoardRow = ({ active, completed, letters, modifierLetters, highlightIndexes, puzzleComplete }) => {
+const BoardRow = ({ active, completed, letters, modifierLetters, highlightIndexes }) => {
   const [playPop] = useSound(popSound)
 
   React.useEffect(() => {
@@ -87,7 +87,7 @@ const BoardRow = ({ active, completed, letters, modifierLetters, highlightIndexe
       }
     }
     completed && play()
-  }, [completed])
+  }, [completed, letters.length, playPop])
 
   if (letters) {
     return (
@@ -96,20 +96,15 @@ const BoardRow = ({ active, completed, letters, modifierLetters, highlightIndexe
           const highlight = highlightIndexes.filter((e) => e.index === index)[0]
           let animationDelay = 'unset'
           if (completed) animationDelay = `${300 * index}ms`
-          if (puzzleComplete) animationDelay = `${100 * index}ms`
 
           if (highlight && !completed)
             return (
               <HighlightLetterHolder
                 key={(letter ? letter : 'blank_') + index}
-                className={clsx(
-                  highlight.animation,
-                  { [`hop${index}`]: completed && !puzzleComplete },
-                  { [`puzzleComplete${index}`]: puzzleComplete },
-                )}
+                className={clsx(highlight.animation, { [`hop${index}`]: completed })}
                 active={letter}
                 color={highlight.color}
-                highlightborder={modifierLetters.includes(letter) ? HIGHLIGHT_COLORS['yellow'].borderActiveDark : false}
+                highlightborder={modifierLetters.includes(letter) ? HIGHLIGHT_COLORS['yellow'].borderActiveDark : ''}
                 sx={{ animationDelay }}
               >
                 {letter}
@@ -120,7 +115,7 @@ const BoardRow = ({ active, completed, letters, modifierLetters, highlightIndexe
               <HighlightLetterHolder
                 key={'completed_' + letter + index}
                 // className={highlight.animation}
-                className={clsx({ [`hop${index}`]: !puzzleComplete }, { [`puzzleComplete${index}`]: puzzleComplete })}
+                className={clsx(`hop${index}`)}
                 active={letter}
                 color={modifierLetters.includes(letter) ? 'yellow' : 'completed'}
                 sx={{ animationDelay }}
@@ -133,7 +128,7 @@ const BoardRow = ({ active, completed, letters, modifierLetters, highlightIndexe
               key={(letter ? letter : 'blank_') + index}
               className={letter ? 'tilt-shake' : ''}
               active={letter}
-              highlightborder={modifierLetters.includes(letter) ? HIGHLIGHT_COLORS['yellow'].borderActiveDark : false}
+              highlightborder={modifierLetters.includes(letter) ? HIGHLIGHT_COLORS['yellow'].borderActiveDark : ''}
               sx={{ animationDelay }}
             >
               {letter}
@@ -163,14 +158,12 @@ BoardRow.propTypes = {
   modifierLetters: PropTypes.array,
   highlightIndexes: PropTypes.array,
   completed: PropTypes.bool,
-  puzzleComplete: PropTypes.bool,
 }
 
 BoardRow.defaultProps = {
   highlightIndexes: [],
   modifierLetters: [],
   completed: false,
-  puzzleComplete: false,
 }
 
 export default BoardRow
diff --git a/client/src/components/board/GameBoard.js b/client/src/components/board/GameBoard.js
@@ -5,43 +5,20 @@ import { Button, Grid, Sheet, Typography } from '@mui/joy'
 import { useTheme } from '@emotion/react'
 import useSound from 'use-sound'
 import BoardRow from './BoardRow'
-import wrongSfx from '../../sounds/wrong.wav'
 import _ from 'lodash'
 
-const GameBoard = ({
-  hide,
-  rows,
-  activeRow,
-  rowLetters,
-  modifierLetters,
-  rowHighlights,
-  onStart,
-  failedAttempt,
-  setFailedAttempt,
-  puzzleComplete,
-}) => {
+const GameBoard = ({ hide, rows, activeRow, rowLetters, modifierLetters, rowHighlights, onStart, failedAttempt }) => {
   const theme = useTheme()
 
   const [invalidAnimationOn, setInvalidAnimationOn] = React.useState(false)
 
-  const [playInvalid] = useSound(wrongSfx)
-
   React.useEffect(() => {
-    if (
-      (_.isNumber(failedAttempt) && failedAttempt > 0 && failedAttempt < rowLetters[0].length) ||
-      (_.isBoolean(failedAttempt) && failedAttempt)
-    ) {
-      playInvalid()
-    }
-    if (failedAttempt > 0 || (_.isBoolean(failedAttempt) && failedAttempt)) {
-      setInvalidAnimationOn(true)
-      const timeout = setTimeout(() => {
-        setInvalidAnimationOn(false)
-        setFailedAttempt(false)
-      }, 500)
-      return () => clearTimeout(timeout)
-    }
-  }, [failedAttempt, rowLetters, playInvalid, setFailedAttempt])
+    setInvalidAnimationOn(true)
+    const timeout = setTimeout(() => {
+      setInvalidAnimationOn(false)
+    }, 50)
+    return () => clearTimeout(timeout)
+  }, [failedAttempt])
 
   function getBoard() {
     if (!hide)
@@ -53,7 +30,6 @@ const GameBoard = ({
             letters={rowLetters[index]}
             modifierLetters={modifierLetters}
             highlightIndexes={rowHighlights[index]}
-            puzzleComplete={puzzleComplete}
           />
         </div>
       ))
@@ -94,9 +70,7 @@ GameBoard.propTypes = {
   rowHighlights: PropTypes.array,
   modifierLetters: PropTypes.array,
   onStart: PropTypes.func,
-  puzzleComplete: PropTypes.bool,
   failedAttempt: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-  setFailedAttempt: PropTypes.func,
 }
 
 GameBoard.defaultProps = {
@@ -106,8 +80,6 @@ GameBoard.defaultProps = {
   rowHighlights: [],
   modifierLetters: [],
   onStart: () => {},
-  puzzleComplete: false,
-  failedAttempt: false,
   setFailedAttempt: () => {},
 }
 

diff --git a/client/src/components/keyboard/VKeyboard.js b/client/src/components/keyboard/VKeyboard.js
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types'
 import { Box, Button, Grid, Sheet, styled } from '@mui/joy'
 import BackspaceIcon from '@mui/icons-material/Backspace'
 import { useTheme } from '@emotion/react'
-import wrongSfx from '../../sounds/wrong.wav'
-import useSound from 'use-sound'
 import clsx from 'clsx'
 
 const KeyButton = styled(Button)(({ theme, highlight }) => ({
@@ -31,35 +29,38 @@ const layout = [
   ['ENTER', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'DELETE'],
 ]
 
-const VKeyboard = ({ onKeyPressed, onDelete, onEnter, disabledKeys, highlightKeys, keyboardEnabled }) => {
+const VKeyboard = ({
+  onKeyPressed,
+  onDelete,
+  onEnter,
+  onInvalidKey,
+  disabledKeys,
+  highlightKeys,
+  keyboardEnabled,
+  invalidAnimationOn,
+}) => {
   const theme = useTheme()
 
   const [disabled, setDisabled] = React.useState(!keyboardEnabled)
-  const [invalidAnimationOn, setInvalidAnimationOn] = React.useState(false)
-  const [playInvalid] = useSound(wrongSfx)
 
   React.useEffect(() => {
     setDisabled(!keyboardEnabled)
   }, [keyboardEnabled])
 
   React.useEffect(() => {
     function handleKeyDown(e) {
-      if (/^[a-zA-Z]$/.test(e.key)) {
-        if (disabledKeys.indexOf(e.key.toUpperCase()) >= 0) {
-          playInvalid()
-          setInvalidAnimationOn(true)
-          setTimeout(() => {
-            setInvalidAnimationOn(false)
-          }, 500)
-        } else {
-          return onKeyPressed(e.key.toUpperCase())
-        }
-      }
       if (e.key === 'Delete' || e.key === 'Backspace') {
         return onDelete()
-      }
-      if (e.key === 'Enter') {
+      } else if (e.key === 'Enter') {
         return onEnter()
+      } else {
+        if (/^[a-zA-Z]$/.test(e.key)) {
+          if (disabledKeys.indexOf(e.key.toUpperCase()) >= 0) {
+            onInvalidKey()
+          } else {
+            return onKeyPressed(e.key.toUpperCase())
+          }
+        }
       }
     }
 
@@ -70,7 +71,7 @@ const VKeyboard = ({ onKeyPressed, onDelete, onEnter, disabledKeys, highlightKey
     return function cleanup() {
       document.removeEventListener('keydown', handleKeyDown)
     }
-  }, [onKeyPressed, onDelete, onEnter, disabled])
+  }, [onKeyPressed, onDelete, onEnter, onInvalidKey, disabled, disabledKeys])
 
   const getPrimaryButton = (key, functionKey, onClick, disabled, sx) => {
     const keyDisabled = (!functionKey && disabledKeys.indexOf(key) >= 0) || disabled

diff --git a/client/src/components/overview/BonusWord.js b/client/src/components/overview/BonusWord.js
@@ -46,12 +46,12 @@ const LetterHolder = styled(Sheet)(({ theme, color = 'red' }) => ({
   fontWeight: 'bold',
 }))
 
-const Diagonal = styled(Box)(({ theme, leftRight }) => ({
+const Diagonal = styled(Box)(({ theme, leftright }) => ({
   position: 'absolute',
   left: '50%',
   top: '50%',
   width: '140%',
-  transform: leftRight ? 'translate3d(-50%, -50%, 0) rotate(45deg)' : 'translate3d(-50%, -50%, 0) rotate(-45deg)',
+  transform: leftright ? 'translate3d(-50%, -50%, 0) rotate(45deg)' : 'translate3d(-50%, -50%, 0) rotate(-45deg)',
   borderTop: `1px solid ${
     theme.palette.mode === 'dark' ? HIGHLIGHT_COLORS['red'].borderDark : HIGHLIGHT_COLORS['red'].borderLight
   }`,
@@ -65,23 +65,23 @@ const BonusWord = ({ bonusWord, scoreModifiers }) => {
         <Grid container gap={0.5}>
           <LetterHolder>
             <Diagonal />
-            <Diagonal leftRight />
+            <Diagonal leftright="true" />
           </LetterHolder>
           <LetterHolder>
             <Diagonal />
-            <Diagonal leftRight />
+            <Diagonal leftright="true" />
           </LetterHolder>
           <LetterHolder>
             <Diagonal />
-            <Diagonal leftRight />
+            <Diagonal leftright="true" />
           </LetterHolder>
           <LetterHolder>
             <Diagonal />
-            <Diagonal leftRight />
+            <Diagonal leftright="true" />
           </LetterHolder>
           <LetterHolder>
             <Diagonal />
-            <Diagonal leftRight />
+            <Diagonal leftright="true" />
           </LetterHolder>
         </Grid>
       </Sheet>

diff --git a/client/src/components/overview/MiniBoard.js b/client/src/components/overview/MiniBoard.js
@@ -58,12 +58,12 @@ const NoLetterHolder = styled(Sheet)(({ theme }) => ({
   height: 34,
 }))
 
-const Diagonal = styled(Box)(({ theme, leftRight }) => ({
+const Diagonal = styled(Box)(({ theme, leftright }) => ({
   position: 'absolute',
   left: '50%',
   top: '50%',
   width: '140%',
-  transform: leftRight ? 'translate3d(-50%, -50%, 0) rotate(45deg)' : 'translate3d(-50%, -50%, 0) rotate(-45deg)',
+  transform: leftright ? 'translate3d(-50%, -50%, 0) rotate(45deg)' : 'translate3d(-50%, -50%, 0) rotate(-45deg)',
   borderTop: `1px solid ${theme.palette.mode === 'dark' ? '#616161' : '#B6B6B6'}`,
 }))
 
@@ -82,7 +82,7 @@ const MiniBoard = ({ wordMatrix, scoreModifiers }) => {
                 {!letter && (
                   <NoLetterHolder>
                     <Diagonal />
-                    <Diagonal leftRight />
+                    <Diagonal leftright="true" />
                   </NoLetterHolder>
                 )}
               </Grid>