From f56746bf6895fc2d7bc1869d83fe730de068ed45 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Thu, 14 Oct 2021 01:23:04 -0300
Subject: [PATCH] Styled victory and defeat

---
 public/css/index.css                          | 26 +++++++++++++++
 public/css/index.css.map                      |  2 +-
 public/index.html                             |  6 ++++
 public/sass/_defeat-victory.scss              | 32 +++++++++++++++++++
 public/sass/index.scss                        |  3 +-
 src/App.js                                    |  3 ++
 src/components/Hangman/PuzzleWord/Defeat.jsx  |  2 +-
 .../Hangman/PuzzleWord/PuzzleWord.jsx         |  6 ++--
 src/components/Hangman/PuzzleWord/Victory.jsx | 10 ++++--
 9 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100644 public/sass/_defeat-victory.scss

diff --git a/public/css/index.css b/public/css/index.css
index 6ef49d3..379a6b4 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -82,4 +82,30 @@ header h2 {
   user-select: none;
 }
 
+.defeat, .victory {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80pt;
+  background-color: rgba(0, 0, 0, 0.775);
+  user-select: none;
+}
+.defeat h1, .victory h1 {
+  padding: 5%;
+  background-color: rgba(0, 0, 0, 0.775);
+}
+
+.defeat {
+  color: #ff6363;
+}
+
+.victory {
+  color: #58ff6b;
+}
+
 /*# sourceMappingURL=index.css.map */
diff --git a/public/css/index.css.map b/public/css/index.css.map
index 7e4a44d..91f2f67 100644
--- a/public/css/index.css.map
+++ b/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"],"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","file":"index.css"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 6dd6fd5..265de18 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,6 +14,12 @@
     <link href="https://fonts.googleapis.com/css2?family=Rambla&display=swap" rel="stylesheet"> 
 
     <link rel="stylesheet" href="./css/index.css">
+
+    <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/public/sass/_defeat-victory.scss b/public/sass/_defeat-victory.scss
new file mode 100644
index 0000000..900642c
--- /dev/null
+++ b/public/sass/_defeat-victory.scss
@@ -0,0 +1,32 @@
+.defeat, .victory {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    height: 100vh;
+    width: 100vw;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    font-size: 80pt;
+
+    background-color: rgba(0, 0, 0, 0.775);
+
+    user-select: none;
+
+    h1 {
+        padding: 5%;
+        background-color: rgba(0, 0, 0, 0.775);
+    }
+}
+
+.defeat {
+    color: rgb(255, 99, 99);
+}
+
+.victory {
+    color: rgb(88, 255, 107);
+}
\ No newline at end of file
diff --git a/public/sass/index.scss b/public/sass/index.scss
index 0e4c7f9..4fd21ce 100644
--- a/public/sass/index.scss
+++ b/public/sass/index.scss
@@ -21,4 +21,5 @@ html, body {
 }
 
 @import 'header';
-@import 'app';
\ No newline at end of file
+@import 'app';
+@import 'defeat-victory';
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index e40d70f..9e43c75 100644
--- a/src/App.js
+++ b/src/App.js
@@ -29,6 +29,9 @@ function App() {
 
           hangmanFrame={hangmanFrame}
           setHangmanFrame={setHangmanFrame}
+
+          currentScore={currentScore}
+          setCurrentScore={setCurrentScore}
         />
 
       </div>
diff --git a/src/components/Hangman/PuzzleWord/Defeat.jsx b/src/components/Hangman/PuzzleWord/Defeat.jsx
index c821aa2..cccd1c4 100644
--- a/src/components/Hangman/PuzzleWord/Defeat.jsx
+++ b/src/components/Hangman/PuzzleWord/Defeat.jsx
@@ -1,6 +1,6 @@
 const Defeat = () => {
     return (
-        <div>
+        <div className="defeat animate__animated animate__backInDown">
             <h1>DEFEAT</h1>
         </div>
     )
diff --git a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx
index 8093f7c..3c4e892 100644
--- a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx
+++ b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx
@@ -3,9 +3,9 @@ import Register_Input from '../../Scripts/Register input'
 import Defeat from './Defeat'
 import Victory from './Victory'
 
-const PuzzleWord = ({hangmanFrame, setHangmanFrame}) => {
+const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore}) => {
 
-    const [actualWord, setActualWord] = useState('murcielago')
+    const [actualWord, setActualWord] = useState('papa')
     const [isVictory, setIsVictory] = useState(false)
     const [isDefeat, setIsDefeat] = useState(false)
 
@@ -47,7 +47,7 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame}) => {
         <>
             <div className="puzzleWord" id="puzzleWord"></div>
         
-            {isVictory ? <Victory /> : null}
+            {isVictory ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} /> : null}
             {isDefeat ? <Defeat /> : null}
         </>
     )
diff --git a/src/components/Hangman/PuzzleWord/Victory.jsx b/src/components/Hangman/PuzzleWord/Victory.jsx
index 7ba7d58..5fa9c1a 100644
--- a/src/components/Hangman/PuzzleWord/Victory.jsx
+++ b/src/components/Hangman/PuzzleWord/Victory.jsx
@@ -1,8 +1,14 @@
 import React from 'react'
 
-const Victory = () => {
+const Victory = ({currentScore, setCurrentScore}) => {
+
+    React.useEffect(() => {
+
+        setCurrentScore(currentScore + 1)
+    }, [])
+
     return (
-        <div>
+        <div className="victory animate__animated animate__backInDown">
             <h1>VICTORIA</h1>
         </div>
     )