add victory screen placeholder

subvisual · Nov 7, 2024 · 394adba · 394adba
1 parent b229745
commit 394adba
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -21,6 +21,14 @@
   margin: 10px auto;
 }
 
+.victory {
+  margin: auto;
+  background: white;
+  color: black;
+  padding: 40px;
+  width: 200px;
+}
+
 .logo {
   height: 6em;
   padding: 1.5em;

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -54,6 +54,11 @@ function App() {
             if (balance) setWdtBalance(balance)
             if (alphabet) setAlphabet(alphabet)
             if (playerGuesses) setPlayerGuesses(playerGuesses)
+
+            // check if player already won
+            const latestGuess = playerGuesses[playerGuesses.length - 1];
+            setVictory(isGuessCorrect(latestGuess))
+
         }
 
         if (currentAddress) {
@@ -65,14 +70,14 @@ function App() {
     // handle the guess input
     const handleGuessChange = (e) => setGuess(e.target.value)
 
+    const isGuessCorrect = (array) =>
+        array.every((element) => element.state === 2n);
+
     const handleNewGuess = (account, guess) => {
         // check if the previous guess was correct and
         // disables new guess acceptance
-        const isGuessCorrect = (array) =>
-            array.every((element) => element.state === 2n);
 
         const previousGuess = playerGuesses[playerGuesses.length - 1] || [];
-
         if (previousGuess.length != 0 && isGuessCorrect(previousGuess)) {
             return;
         }
@@ -121,6 +126,7 @@ function App() {
         setAlphabet(undefined)
         setWdtBalance(undefined)
         setPlayerGuesses([])
+        setVictory(false)
     }
 
     return (
@@ -134,7 +140,7 @@ function App() {
                 {approvalModal && <ApprovalModal account={currentAddress} close={() => setApprovalModal(false)} init={() => handleInitAttempts(currentAddress)}/>}
                 {lowFundsWarn && <LowFunds account={currentAddress} updateBalance={setWdtBalance}  close={() => setLowFundsWarn(false)}/>}
                 {playedToday && <AlreadyPlayed close={() => setPlayedToday(false)}/>}
-                {victory && <div>Will become a component</div>}
+                {victory && <div className={"victory"}>TBD: Victory Component</div>}
 
                 <p>WDT Balance: {wdtBalance ? `${wdtBalance.toString()} WDT` : '???'}</p>