responsiveness of solution

src/assets/icons/circle-arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM127 297c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l71 71L232 120c0-13.3 10.7-24 24-24s24 10.7 24 24l0 214.1 71-71c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 409c-9.4 9.4-24.6 9.4-33.9 0L127 297z"/></svg>

src/objects/Game/Game.css

@@ -28,6 +28,18 @@
     background-color: lightgray;
 }
 
+#lose-header {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 2em;
+}
+
+#lose-header .scroll-arrow {
+    width: 3em;
+}
+
 @media (max-width: 720px) {
     #game {
         width: calc(500px / 1.5);
@@ -44,4 +56,8 @@
         width: 100%;
         flex-direction: row;
     }
+
+    #lose-header .scroll-arrow {
+        width: calc(3em / 1.5);
+    }
 }

src/objects/Game/Game.tsx

@@ -14,7 +14,9 @@ interface GameProps {
 
 function Game(props: GameProps) {
   //TODO manage number of lines and number of colors
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [activeLine, setActiveLine] = useState<number>(0)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [valid, setValid] = useState<boolean>(false)
 
   const initCases: CaseInfo[][] = []
@@ -54,16 +56,6 @@ function Game(props: GameProps) {
     setCases((prev) => [...prev.slice(0, activeLine), currentLine, ...prev.slice(activeLine+1)])
   }
 
-  const win = valid ? <div className={"result"}><h1>Congratulations ! you won in {activeLine+1} try(s) !</h1></div> : <div className={"result"}><h1>Trys : {activeLine}</h1></div>;
-  const lose = !valid && activeLine >= props.nLines ? <div className={"lose"}><h1>You lost !</h1>
-    <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 (
     <>
     <div id='game'>
@@ -86,8 +78,25 @@ function Game(props: GameProps) {
         }
       </div>
     </div>
-    {win}
-    {lose}
+
+    <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><img className={"scroll-arrow"} src="src/assets/icons/circle-arrow-down.svg" alt={"scroll to solution"}
+                                                      onClick={() => {
+                                                        console.log("clicked");
+                                                        document.getElementById("bottom")!.scrollIntoView({behavior: "smooth"});
+                                                      }}/></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>
+    <span id="bottom"></span>
     </>
   )
 }