From 394adba2d673edd19e153bed72b6b0a608d573ed Mon Sep 17 00:00:00 2001
From: Rui Sousa <contact@ruisousa.me>
Date: Thu, 7 Nov 2024 14:55:22 +0000
Subject: [PATCH] add victory screen placeholder

---
 frontend/src/App.css |  8 ++++++++
 frontend/src/App.jsx | 14 ++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6e2c25d..4cd3a09 100644
--- 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
index ab7d44e..9bfe450 100644
--- 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>