Shake on invalid word.

src/components/WordGrid/WordGrid.jsx

@@ -1,26 +1,29 @@
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { useWeldor } from "../../hooks/useWeldor"
 import './WordGrid.styles.css'
 
-const Row = ({ word, savedWord, boxStatus, isActive }) => {
+const Row = ({ word, savedWord, boxStatus, isActive, isShake }) => {
+    let toShake = ''
+    if (isShake) toShake = ' shake'
     return (
-        <div className="row-container">
+        <div className={"row-container"}>
             {Array.from({ length: 6 }, (_, i) => (
-                <div key={i} className={boxStatus[i] || 'letter-box'}>
-                    { isActive ? word[i] || '' : savedWord[i]}
+                <div key={i} className={(boxStatus[i] || 'letter-box')+toShake}>
+                    {isActive ? word[i] || '' : savedWord[i]}
                 </div>
             ))}
         </div>
     )
 }
 
-export const WordGrid = ({rulesModalActive, weldorInstance}) => {
-    const { 
-        guessedWord, 
-        guessedWordSet, 
-        boxStatusSet, 
-        activeBoxKey, 
-        handleUserInput
+export const WordGrid = ({ rulesModalActive, weldorInstance }) => {
+    const {
+        guessedWord,
+        guessedWordSet,
+        boxStatusSet,
+        activeBoxKey,
+        handleUserInput,
+        shake
     } = weldorInstance
 
     useEffect(() => {
@@ -29,13 +32,20 @@ export const WordGrid = ({rulesModalActive, weldorInstance}) => {
         return () => window.removeEventListener('keyup', handleUserInput)
     }, [handleUserInput])
 
+    const [toShake, setToShake] = useState(false)
+
+    useEffect(() => {
+        setToShake(shake)
+    }, [shake])
+
     return (
         <div className="container">
             {Array.from({ length: 10 }, (_, i) => (
-                <Row word={guessedWord.toUpperCase()} 
-                    savedWord={guessedWordSet[i]} 
-                    boxStatus={boxStatusSet[i]} 
+                <Row word={guessedWord.toUpperCase()}
+                    savedWord={guessedWordSet[i]}
+                    boxStatus={boxStatusSet[i]}
                     isActive={i === activeBoxKey}
+                    isShake={toShake && (i === activeBoxKey)}
                 />
             ))}
         </div>

src/components/WordGrid/WordGrid.styles.css

@@ -8,7 +8,7 @@
     display: flex;
     gap: 2.5px;
     margin: 2.5px;
-    overflow: auto;
+    overflow: hidden;
     justify-content: center;
 }
 
@@ -41,4 +41,22 @@
 
 .center {
     text-align: center;
-}
+}
+
+.shake {
+    animation: shake 1s;
+}
+
+@keyframes shake {
+    0% { transform: translate(1px, 0px) rotate(0deg); }
+    10% { transform: translate(-1px, 0px) rotate(-1deg); }
+    20% { transform: translate(-3px, 0px) rotate(1deg); }
+    30% { transform: translate(3px, 0px) rotate(0deg); }
+    40% { transform: translate(1px, 0px) rotate(1deg); }
+    50% { transform: translate(-1px, 0px) rotate(-1deg); }
+    60% { transform: translate(-3px, 0px) rotate(0deg); }
+    70% { transform: translate(3px, 0px) rotate(-1deg); }
+    80% { transform: translate(-1px, 0px) rotate(1deg); }
+    90% { transform: translate(1px, 0px) rotate(0deg); }
+    100% { transform: translate(1px, 0px) rotate(-1deg); }
+  }

src/hooks/useWeldor.js

@@ -22,6 +22,7 @@ export const useWeldor = () => {
     const [winConditionMet, setWinConditionMet] = useState(JSON.parse(localStorage.getItem('winConditionMet')) || false)
     const [loseConditionMet, setLoseConditionMet] = useState(JSON.parse(localStorage.getItem('loseConditionMet')) || false)
     const [score, setScore] = useState(JSON.parse(localStorage.getItem('score')) || 0)
+    const [shake, setShake] = useState(false)
 
     const { wordExists } = useWordChecker('en')
 
@@ -180,6 +181,11 @@ export const useWeldor = () => {
                     setValidWordCount(validWordCount + 1)
                     setScore((prev) => prev == 2 ? prev + 3 : prev + 1)
                 }
+                else if (result == null){
+                    // Shake shake shake!
+                    setShake(true)
+                    setTimeout(()=>{setShake(false)},1000)
+                }
             }
         } else if (/^[a-zA-Z]$/.test(key)) {
             if (guessedWord.length < 6) 
@@ -198,6 +204,7 @@ export const useWeldor = () => {
         score,
         anagramSetSelected,
         emojified,
-        handleUserInput 
+        handleUserInput,
+        shake
     }
 }