franpcode/Hangman-game-with-React
1
0
Fork 0
mirror of https://github.com/FranP-code/Hangman-game-with-React.git synced 2025-10-13 00:42:32 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Styled victory and defeat

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-14 01:23:04 -03:00
parent cb6e728a3e
commit f56746bf68
9 changed files with 82 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/css/index.css
View File

@@ -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 */

2
public/css/index.css.map
View File

@@ -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"}
{"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"}

6
public/index.html
View File

@@ -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/

32
public/sass/_defeat-victory.scss Normal file
View File

@@ -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);
}

3
public/sass/index.scss
View File

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

3
src/App.js
View File

@@ -29,6 +29,9 @@ function App() {
hangmanFrame={hangmanFrame}
setHangmanFrame={setHangmanFrame}
currentScore={currentScore}
setCurrentScore={setCurrentScore}
/>
</div>

2
src/components/Hangman/PuzzleWord/Defeat.jsx
View File

@@ -1,6 +1,6 @@
const Defeat = () => {
return (
<div>
<div className="defeat animate__animated animate__backInDown">
<h1>DEFEAT</h1>
</div>
)

6
src/components/Hangman/PuzzleWord/PuzzleWord.jsx
View File

@@ -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}
</>
)

10
src/components/Hangman/PuzzleWord/Victory.jsx
View File

@@ -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>
)