Fix refresh exploit by incorporating local storage

src/components/ResultsModal/ResultsModal.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import './ResultsModal.styles.css'
 import { TwitterShareButton, XIcon } from 'react-share'
 
@@ -11,6 +12,22 @@ export const ResultsModal = ({ weldorInstance,  }) => {
         anagramSetSelected,
         emojified,
     } = weldorInstance
+    const [countDown, setCountDown] = useState('')
+
+    useEffect(() => {
+        setInterval(() => {
+            let now = new Date()
+            let nowHours = now.getUTCHours()
+            let nowMinutes = now.getUTCMinutes()
+            let nowSeconds = now.getUTCSeconds()
+
+            let hoursLeft = String(23 - nowHours).padStart(2, '0');
+            let minutesLeft = String(59 - nowMinutes).padStart(2, '0');
+            let secondsLeft = String(59 - nowSeconds).padStart(2, '0');
+
+            return setCountDown(`${hoursLeft}:${minutesLeft}:${secondsLeft}`)
+        }, 1000)
+    }, [])
 
     const remaining = (wordSet, anagramSet) => {
         return anagramSet.filter((word) => !wordSet.includes(word.toUpperCase()))
@@ -44,9 +61,10 @@ export const ResultsModal = ({ weldorInstance,  }) => {
                     <h3>{winConditionMet ? 'You win! 🎉' : loseConditionMet ? "You're out of attempts, sorry. 😭" : ''}</h3>
                     <p>Score: {score}</p>
                     <p>{score == 0 ? 'Answers:' : 'Other answer(s):'}</p>
-                    <p>{remainingWords}</p>
+                    <p>{!remainingWords.length ? '-' : remainingWords}</p>
                     <p style={{whiteSpace: "pre-wrap", pointerEvents: "none", userSelect: "none", fontSize: '0.8rem'}}>{emojified}</p>
                 </div>
+                <p style={{fontSize: '0.85rem'}}>Resets in: {countDown}</p>
                 <div className="close-results">
                     <h3>Share on Twitter/X: </h3>
                     <div className="share-twitter">

src/hooks/useWeldor.js

@@ -4,25 +4,89 @@ import { getAnagramSet } from "./getAnagramSet"
 
 export const useWeldor = () => {
     const [guessedWord, setGuessedWord] = useState('')
-    const [guessedWordSet, setGuessedWordSet] = useState([...Array.from({ length: 10 }, () => '')])
-    const [boxStatusSet, setBoxStatusSet] = useState([...Array.from({ length: 10 }, () => 
-                                                        [...Array.from({ length: 6 }, () => '')]
-                                                    )])
-    const [keyStatusSet, setKeyStatusSet] = useState([...Array.from({ length: 26 }, () => '')])
-    const [emojified, setEmojified] = useState('')
-    const [activeBoxKey, setActiveBoxKey] = useState(0)
-    const [validWordCount, setValidWordCount] = useState(0)
-    const [winConditionMet, setWinConditionMet] = useState(false)
-    const [loseConditionMet, setLoseConditionMet] = useState(false)
-    const [score, setScore] = useState(0)
+    const [guessedWordSet, setGuessedWordSet] = useState(
+        JSON.parse(localStorage.getItem('guessedWordSet')) || 
+        [...Array.from({ length: 10 }, () => '')]
+    )
+    const [boxStatusSet, setBoxStatusSet] = useState(
+        JSON.parse(localStorage.getItem('boxStatusSet')) ||
+        [...Array.from({ length: 10 }, () => [...Array.from({ length: 6 }, () => '')])]
+    )
+    const [keyStatusSet, setKeyStatusSet] = useState(
+        JSON.parse(localStorage.getItem('keyStatusSet')) || 
+        [...Array.from({ length: 26 }, () => '')]
+    )
+    const [emojified, setEmojified] = useState(localStorage.getItem('emojified') || '')
+    const [activeBoxKey, setActiveBoxKey] = useState(JSON.parse(localStorage.getItem('activeBoxKey')) || 0)
+    const [validWordCount, setValidWordCount] = useState(JSON.parse(localStorage.getItem('validWordCount')) || 0)
+    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 { wordExists } = useWordChecker('en')
 
+    const date = new Date()
+    const presentDay = date.getUTCDay() + 1 // Ensure that we don't end up with 0th day
+
+    // On mount, retrieves data from local storage if it exists                                               
+    useEffect(() => {
+        // Compare current date with previous date.
+        // If different or value for previous date does not exist, clear local storage/reset all states:
+        const previousDay = JSON.parse(localStorage.getItem('previousDay'))
+        if (!previousDay || (presentDay !== previousDay)) {
+            setGuessedWordSet([...Array.from({ length: 10 }, () => '')])
+            setActiveBoxKey(0)
+            setBoxStatusSet(
+                [...Array.from({ length: 10 }, () => [...Array.from({ length: 6 }, () => '')])]
+            )
+            setKeyStatusSet([...Array.from({ length: 26 }, () => '')])
+            setEmojified('')
+            setValidWordCount(0)
+            //setWinConditionMet(false)
+            //setLoseConditionMet(false)
+            setScore(0)
+        }
+        return
+    }, [presentDay])
+
+    // Sets and updates data on local storage                                            
+    useEffect(() => {
+        // Set states into respective local storage keys:
+        localStorage.setItem('winConditionMet', winConditionMet)
+        localStorage.setItem('guessedWordSet', JSON.stringify(guessedWordSet))
+        localStorage.setItem('activeBoxKey', activeBoxKey)
+        localStorage.setItem('boxStatusSet', JSON.stringify(boxStatusSet))
+        localStorage.setItem('keyStatusSet', JSON.stringify(keyStatusSet))
+        localStorage.setItem('emojified', emojified)
+        localStorage.setItem('validWordCount', validWordCount)
+        localStorage.setItem('loseConditionMet', loseConditionMet)
+        localStorage.setItem('score', score)
+
+        // Store presentDay into 'previousDay':
+        localStorage.setItem('previousDay', presentDay)
+        return
+    }, [
+        winConditionMet, 
+        guessedWordSet, 
+        activeBoxKey, 
+        boxStatusSet, 
+        keyStatusSet, 
+        emojified, 
+        validWordCount, 
+        loseConditionMet,
+        score,
+        presentDay
+    ])
+
     useEffect(() => {
         if (validWordCount == 3) {
-            setScore(score + 2)
             return setWinConditionMet(true)
-        } else if (guessedWordSet[guessedWordSet.length - 1] !== '') {
+        } else if (guessedWordSet.filter(Boolean).length == guessedWordSet.length) {
             return setLoseConditionMet(true)
+        } else {
+            setWinConditionMet(false)
+            setLoseConditionMet(false)
+            return
         }
     }, [validWordCount, guessedWordSet])
 
@@ -114,7 +178,7 @@ export const useWeldor = () => {
                 let result = returnColor(guessedWord, anagramSetSelected)
                 if (result === 'G'.repeat(guessedWord.length)) {
                     setValidWordCount(validWordCount + 1)
-                    setScore(score + 1)
+                    setScore((prev) => prev == 2 ? prev + 3 : prev + 1)
                 }
             }
         } else if (/^[a-zA-Z]$/.test(key)) {

src/index.js

@@ -28,7 +28,7 @@ const getAnagramSet = (length, timestamp=-1) => {
     if (unixdate == -1) unixdate = new Date()
     unixdate = 536870911 + Math.floor(unixdate/(8.64e7))
 
-    let anagramFile = {"total":0}
+    let anagramFile = {}
     if(length==5) anagramFile = anagram5
     if(length==6) anagramFile = anagram6
     if(length==7) anagramFile = anagram7
@@ -50,7 +50,7 @@ const getAnagramSet = (length, timestamp=-1) => {
         for(let i=0;i<10;i=i+1) random_number = xorshift64(random_number)
     }
 
-    let index = random_number % anagramFile["total"]
+    let index = Math.abs(random_number % anagramFile["total"])
     let result = anagramFile["anagrams"][index]
     return result
 }
@@ -81,9 +81,9 @@ const rl = require('readline-sync')
 const gameLoop = (debug=false) => {
     let count = 0, requiredLength = 6, winConditionMet = false
     let resultColors = [], correctWords = []
-    let anagramSet = getAnagramSet(6)
+    let anagramSet = []
     if (debug==true) anagramSet = ["canter","nectar","recant","trance"]
-
+    else anagramSet = getAnagramSet(6)
     while (count < 10) {
         if (correctWords.length == 3) {
             winConditionMet = true

test/frontend_test.js

@@ -39,7 +39,7 @@ describe('#gameLoop()', () => {
         questionStub.onCall(8).returns('trance')
         questionStub.onCall(9).returns('canter')
 
-        gameLoop()
+        gameLoop(true)
 
         expect(consoleLogStub.calledWith('You\'re out of attempts. Sorry :(')).to.be.true
     })