From ee53f008d59510c1e3be1d8dab0f038a171570a4 Mon Sep 17 00:00:00 2001
From: Saurab S <13sau7@gmail.com>
Date: Sat, 19 Feb 2022 01:32:16 -0500
Subject: [PATCH 1/4] Initial GiveUp feature implementation

The button appears 40 s after each new puzzle. Reloading the page resets the timer.
---
 src/App.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index 7daacb3b..3bbbae7d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -112,6 +112,14 @@ function App() {
     setInfoModalIsOpen(false)
   }
 
+  const [hideGiveUp,setHideGiveUp] = useState(true)
+  useEffect(()=>{
+    setTimeout(() => {
+      setHideGiveUp(false)
+         }, 40000);
+       },
+   [])
+
   const [darkMode, setDarkMode] = useLocalStorage('dark-mode', false)
   const toggleDarkMode = () => setDarkMode((prev: boolean) => !prev)
 
@@ -329,6 +337,8 @@ function App() {
     setSubmittedInvalidWord(initialStates.submittedInvalidWord)
     setExactGuesses({})
 
+    setHideGiveUp(true)
+    setTimeout(function() {setHideGiveUp(false)}, 40000);
     closeModal()
   }
 
@@ -403,6 +413,22 @@ function App() {
                   </span>
                 ))
               )}
+            </div>       
+            <div
+              className={`absolute -bottom-24 left-1/2 transform -translate-x-1/2 ${
+                hideGiveUp ? 'hidden' : ''
+              }`}
+            >
+              <div className={darkMode ? 'dark' : ''}>
+                <button
+                    autoFocus
+                    type="button"
+                    className="rounded-lg z-10 px-6 py-2 text-lg nm-flat-background dark:nm-flat-background-dark hover:nm-inset-background dark:hover:nm-inset-background-dark text-primary dark:text-primary-dark"
+                    onClick={() => {setGameState(state.lost); setCurrentStreak(0)}}
+                  >
+                  Give Up
+                </button>
+              </div>
             </div>
             <div
               className={`absolute -bottom-24 left-1/2 transform -translate-x-1/2 ${

From bb9f8783287a84f7cc4e364d1dedba420efa1717 Mon Sep 17 00:00:00 2001
From: Saurab S <13sau7@gmail.com>
Date: Sat, 19 Feb 2022 03:35:23 -0500
Subject: [PATCH 2/4] Handling responsiveness

---
 src/App.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3bbbae7d..9702be72 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -113,6 +113,7 @@ function App() {
   }
 
   const [hideGiveUp,setHideGiveUp] = useState(true)
+  
   useEffect(()=>{
     setTimeout(() => {
       setHideGiveUp(false)
@@ -415,7 +416,7 @@ function App() {
               )}
             </div>       
             <div
-              className={`absolute -bottom-24 left-1/2 transform -translate-x-1/2 ${
+              className={`flex justify-center pt-6 ${
                 hideGiveUp ? 'hidden' : ''
               }`}
             >

From 8d9ebb4fb7cf274969f44b2a888149563b87954d Mon Sep 17 00:00:00 2001
From: aishug134 <13sau7@gmail.com>
Date: Sat, 19 Feb 2022 13:26:14 -0500
Subject: [PATCH 3/4] Show giveup only when playing

Show Give Up button only when playing, not after a game is lost (6 attempts or giving up) or won
---
 src/App.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9702be72..ba5abebf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -113,7 +113,7 @@ function App() {
   }
 
   const [hideGiveUp,setHideGiveUp] = useState(true)
-  
+
   useEffect(()=>{
     setTimeout(() => {
       setHideGiveUp(false)
@@ -414,10 +414,10 @@ function App() {
                   </span>
                 ))
               )}
-            </div>       
+            </div>
             <div
               className={`flex justify-center pt-6 ${
-                hideGiveUp ? 'hidden' : ''
+                hideGiveUp ||  gameState !== state.playing ? 'hidden' : ''
               }`}
             >
               <div className={darkMode ? 'dark' : ''}>

From 74af439753a99a856da8617694f72fc127a19106 Mon Sep 17 00:00:00 2001
From: aishug134 <13sau7@gmail.com>
Date: Sat, 19 Feb 2022 15:14:42 -0500
Subject: [PATCH 4/4] Fix: Reset Give Up timer after each win

---
 src/App.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ba5abebf..362ccf4f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,8 @@ export const difficulty = {
   hard: 'hard',
 }
 
+const GIVE_UP_TIME_OUT = 40000
+
 const getRandomAnswer = () => {
   const randomIndex = Math.floor(Math.random() * answers.length)
   return answers[randomIndex].toUpperCase()
@@ -115,11 +117,15 @@ function App() {
   const [hideGiveUp,setHideGiveUp] = useState(true)
 
   useEffect(()=>{
-    setTimeout(() => {
-      setHideGiveUp(false)
-         }, 40000);
-       },
-   [])
+      setHideGiveUp(true)
+      const giveUpTimer = window.setTimeout(() => {
+        setHideGiveUp(false)
+      }, GIVE_UP_TIME_OUT);
+
+      return () => {
+        clearTimeout(giveUpTimer);
+      };
+  }, [gameState])
 
   const [darkMode, setDarkMode] = useLocalStorage('dark-mode', false)
   const toggleDarkMode = () => setDarkMode((prev: boolean) => !prev)
@@ -338,8 +344,6 @@ function App() {
     setSubmittedInvalidWord(initialStates.submittedInvalidWord)
     setExactGuesses({})
 
-    setHideGiveUp(true)
-    setTimeout(function() {setHideGiveUp(false)}, 40000);
     closeModal()
   }