From f4e92f039c1e7d2bf15f8a5399ddb7adedc907e3 Mon Sep 17 00:00:00 2001
From: quentin <quentin.leblanc@hesge.ch>
Date: Tue, 22 Apr 2025 16:27:52 +0200
Subject: [PATCH] solution is no longer available by inspection

---
 src/App.tsx                         | 15 ++---------
 src/index.css                       |  3 +--
 src/objects/Game/Game.css           | 14 ----------
 src/objects/Game/Game.tsx           | 27 ++++++-------------
 src/objects/GameState/GameState.css | 17 ++++++++++++
 src/objects/GameState/GameState.tsx | 41 +++++++++++++++++++++++++++++
 6 files changed, 69 insertions(+), 48 deletions(-)
 create mode 100644 src/objects/GameState/GameState.css
 create mode 100644 src/objects/GameState/GameState.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7b247a8..00011cc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,23 +31,12 @@ function App() {
   const nColors = 7;
   const nLines = 7;
 
-  if (!isPlaying) {
-    return (
-      <>
-        <div className="root">
-          <h1>Mastermind</h1>
-          <button id={"play-button"} onClick={() => setIsPlaying(true)}><b>Play</b></button>
-        </div>
-        <Footer />
-      </>
-    )
-  }
-
   return (
     <>
       <div className="root">
         <h1>Mastermind</h1>
-        <Game combination={generateCombination(nColors)} nColors={nColors} nLines={nLines}></Game>
+        <button id={"play-button"} onClick={() => setIsPlaying(true)} hidden={!isPlaying}><b>Play</b></button>
+        <div hidden={isPlaying}><Game combination={generateCombination(nColors)} nColors={nColors} nLines={nLines}></Game></div>
       </div>
       <Footer />
     </>
diff --git a/src/index.css b/src/index.css
index 8d65531..8ef4dba 100644
--- a/src/index.css
+++ b/src/index.css
@@ -49,8 +49,7 @@ button {
   overflow: hidden;
 }
 
-button:focus,
-button:focus-visible {
+button:hover:enabled {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
diff --git a/src/objects/Game/Game.css b/src/objects/Game/Game.css
index 52b8d40..8376354 100644
--- a/src/objects/Game/Game.css
+++ b/src/objects/Game/Game.css
@@ -28,17 +28,7 @@
     background-color: lightgray;
 }
 
-#lose-header {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    gap: 2em;
-}
 
-#lose-header .scroll-arrow {
-    font-size: 3em;
-}
 
 @media (max-width: 720px) {
     #game {
@@ -56,8 +46,4 @@
         width: 100%;
         flex-direction: row;
     }
-
-    #lose-header .scroll-arrow {
-        width: calc(3em / 1.5);
-    }
 }
\ No newline at end of file
diff --git a/src/objects/Game/Game.tsx b/src/objects/Game/Game.tsx
index bb0b63c..009b4d7 100644
--- a/src/objects/Game/Game.tsx
+++ b/src/objects/Game/Game.tsx
@@ -5,6 +5,7 @@ import DroppablePin from "../DroppablePin/DroppablePin.tsx";
 import Color, {colors} from "../Color.ts";
 import Line from "../Line/Line.tsx";
 import {CaseInfo} from "../Case/Case.tsx";
+import GameState from "../GameState/GameState.tsx";
 
 interface GameProps {
   combination: string[];
@@ -18,6 +19,7 @@ function Game(props: GameProps) {
   const [activeLine, setActiveLine] = useState<number>(0)
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [valid, setValid] = useState<boolean>(false)
+  const [isPlaying, setIsPlaying] = useState<boolean>(true)
 
   const initCases: CaseInfo[][] = []
   for(let li = 0; li < props.nLines; li++) {
@@ -42,8 +44,13 @@ function Game(props: GameProps) {
   const checkLine: (combination: Color[]) => boolean = (combination) => {
     if (combination.every((elem, idx) => elem.name === props.combination[idx]) ){
       setValid(true);
+      setIsPlaying(false);
       return true
     }
+
+    if (activeLine === props.nLines-1) {
+      setIsPlaying(false);
+    }
     return false;
   }
 
@@ -78,25 +85,7 @@ function Game(props: GameProps) {
         }
       </div>
     </div>
-
-    <div hidden={(valid || activeLine >= props.nLines)}><h1>Trys : {activeLine}</h1></div>
-
-    <div hidden={!valid}><h1>Congratulations ! you won in {activeLine+1} try(s) !</h1></div>
-
-    <div className={"lose"} hidden={!(!valid && activeLine >= props.nLines)}>
-      <div id={"lose-header"}><h1>You lost !</h1><div className={"fa fa-arrow-alt-circle-down scroll-arrow"}
-                                                      onClick={() => {
-                                                        console.log("clicked");
-                                                        document.getElementById("bottom")!.scrollIntoView({behavior: "smooth"});
-                                                      }}></div>
-      </div>
-      <h2>Combination was :</h2>
-      <div className={"line"}>
-        {props.combination.map(
-          (color, idx) => <DroppablePin key={'result-'+idx} color={color} id={'result-'+idx} className={'circle'} />)
-        }
-      </div>
-    </div>
+    <GameState isPlaying={isPlaying} hasWon={valid} activeLine={activeLine} combination={props.combination}></GameState>
     <span id="bottom"></span>
     </>
   )
diff --git a/src/objects/GameState/GameState.css b/src/objects/GameState/GameState.css
new file mode 100644
index 0000000..5192fd4
--- /dev/null
+++ b/src/objects/GameState/GameState.css
@@ -0,0 +1,17 @@
+#lose-header {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 2em;
+}
+
+#lose-header .scroll-arrow {
+    font-size: 3em;
+}
+
+@media (max-width: 720px) {
+    #lose-header .scroll-arrow {
+        width: calc(3em / 1.5);
+    }
+}
\ No newline at end of file
diff --git a/src/objects/GameState/GameState.tsx b/src/objects/GameState/GameState.tsx
new file mode 100644
index 0000000..a5c748e
--- /dev/null
+++ b/src/objects/GameState/GameState.tsx
@@ -0,0 +1,41 @@
+import DroppablePin from "../DroppablePin/DroppablePin.tsx";
+
+interface GameStateProps {
+  isPlaying: boolean;
+  hasWon: boolean;
+  activeLine: number;
+  combination: Array<string>;
+}
+
+function GameState(props: GameStateProps) {
+
+  const tries = props.isPlaying ? <div><h1>Tries : {props.activeLine}</h1></div> : null;
+
+  const win = (!props.isPlaying && props.hasWon) ? <div><h1>Congratulations ! you won in {props.activeLine+1} tries !</h1></div> : null;
+
+  const lose = (!props.isPlaying && !props.hasWon) ? <div className={"lose"}>
+    <div id={"lose-header"}><h1>You lost !</h1><div className={"fa fa-arrow-alt-circle-down scroll-arrow"}
+                                                    onClick={() => {
+                                                      console.log("clicked");
+                                                      document.getElementById("bottom")!.scrollIntoView({behavior: "smooth"});
+                                                    }}></div>
+    </div>
+    <h2>Combination was :</h2>
+    <div className={"line"}>
+      {props.combination!.map(
+        (color, idx) => <DroppablePin key={'result-'+idx} color={color} id={'result-'+idx} className={'circle'} />)
+      }
+    </div>
+  </div> : null;
+
+
+  return (
+  <>
+    {tries}
+    {win}
+    {lose}
+  </>
+  );
+}
+
+export default GameState;
\ No newline at end of file