diff --git a/src/components/WordGrid/WordGrid.jsx b/src/components/WordGrid/WordGrid.jsx index b589d99..1929385 100644 --- a/src/components/WordGrid/WordGrid.jsx +++ b/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 ( -
+
{Array.from({ length: 6 }, (_, i) => ( -
- { isActive ? word[i] || '' : savedWord[i]} +
+ {isActive ? word[i] || '' : savedWord[i]}
))}
) } -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 (
{Array.from({ length: 10 }, (_, i) => ( - ))}
diff --git a/src/components/WordGrid/WordGrid.styles.css b/src/components/WordGrid/WordGrid.styles.css index 7c0ab44..d700450 100644 --- a/src/components/WordGrid/WordGrid.styles.css +++ b/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; -} \ No newline at end of file +} + +.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); } + } \ No newline at end of file diff --git a/src/hooks/useWeldor.js b/src/hooks/useWeldor.js index 21263d0..872ac57 100644 --- a/src/hooks/useWeldor.js +++ b/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 } } \ No newline at end of file