Victory and defeat logic done

public/css/index.css

@@ -108,4 +108,20 @@ header h2 {
   color: #58ff6b;
 }
 
+.loading {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.loading img {
+  width: 50px;
+  height: 50px;
+}
+
 /*# sourceMappingURL=index.css.map */

public/css/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss","../sass/_defeat-victory.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss","../sass/_defeat-victory.scss","../sass/_loading.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA","file":"index.css"}

public/sass/_loading.scss

@@ -0,0 +1,19 @@
+.loading {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    width: 100vw;
+    height: 100vh;
+
+    background-color: #fff;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+        width: 50px;
+        height: 50px;
+    }
+}

public/sass/index.scss

@@ -22,4 +22,5 @@ html, body {
 
 @import 'header';
 @import 'app';
-@import 'defeat-victory';
+@import 'defeat-victory';
+@import 'loading';

src/App.js

@@ -5,6 +5,7 @@ import Header from "./components/Header";
 import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord";
 import Victory from "./components/Hangman/PuzzleWord/Victory";
 import Defeat from "./components/Hangman/PuzzleWord/Defeat";
+import Loading from "./components/Loading";
 
 function App() {
 
@@ -16,18 +17,13 @@ function App() {
   const [isVictory, setIsVictory] = useState(false)
   const [isDefeat, setIsDefeat] = useState(false)
 
-  const [keyPuzzleWord, setKeyPuzzleWord] = useState(1)
+  const [displayApp, setDisplayApp] = useState(false)
 
   if (isVictory || isDefeat) {
     
     
     setTimeout(() => {
-        setHangmanFrame(0)
-
-        setIsVictory(false)
-        setIsDefeat(false)
-
-        setKeyPuzzleWord(keyPuzzleWord + 1)
+        window.location.reload(true);
         }, 3000)
   }
 
@@ -40,18 +36,18 @@ function App() {
       <div className='column-1'>
         <Hangman
           hangmanFrame={hangmanFrame}
-        />
+          />
       </div>
       
       <div className='column-2'>
+
+
         <CurrentScore currentScore={currentScore} />
 
-        { isVictory || isDefeat ? null :
+          {!displayApp ? <Loading /> : null }
 
           <PuzzleWord
 
-          key={keyPuzzleWord}
-
           hangmanFrame={hangmanFrame}
           setHangmanFrame={setHangmanFrame}
 
@@ -63,10 +59,9 @@ function App() {
 
           isDefeat={isDefeat}
           setIsDefeat={setIsDefeat}
-          />
 
-        }
-        
+          setDisplayApp={setDisplayApp}
+          />
 
         {isVictory ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} /> : null}
         {isDefeat ? <Defeat /> : null}

src/components/Hangman/PuzzleWord/PuzzleWord.jsx

@@ -3,11 +3,10 @@ import Register_Input from '../../Scripts/Register input'
 import Defeat from './Defeat'
 import Victory from './Victory'
 
-const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat}) => {
+const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, setDisplayApp}) => {
 
     const [actualWord, setActualWord] = useState('papa')
 
-
     const generatePuzzleWord = () => {  
             
         const puzzleWord = document.getElementById('puzzleWord')
@@ -27,12 +26,12 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor
         counter.textContent = '(' + actualWord.length + ')'
     
         puzzleWord.appendChild(counter)
-        
-    }
+            }
 
     React.useEffect(() => {
         
         generatePuzzleWord()
+        setDisplayApp(true)
         
     }, [])
 

src/components/Loading.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import loadingGifLightTheme from './img/loading-light-theme.png'
+
+const Loading = () => {
+    return (
+        <div className='loading'>
+            <img src={loadingGifLightTheme} alt="" />
+        </div>
+    )
+}
+
+export default Loading