mirror of
https://github.com/FranP-code/Hangman-game-with-React.git
synced 2025-10-13 00:42:32 +00:00
bk commit
This commit is contained in:
41
src/App.js
41
src/App.js
@@ -3,6 +3,8 @@ import CurrentScore from "./components/CurrentScore";
|
|||||||
import Hangman from "./components/Hangman/Hangman";
|
import Hangman from "./components/Hangman/Hangman";
|
||||||
import Header from "./components/Header";
|
import Header from "./components/Header";
|
||||||
import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord";
|
import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord";
|
||||||
|
import Victory from "./components/Hangman/PuzzleWord/Victory";
|
||||||
|
import Defeat from "./components/Hangman/PuzzleWord/Defeat";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
@@ -11,6 +13,24 @@ function App() {
|
|||||||
|
|
||||||
const [hangmanFrame, setHangmanFrame] = useState(0)
|
const [hangmanFrame, setHangmanFrame] = useState(0)
|
||||||
|
|
||||||
|
const [isVictory, setIsVictory] = useState(false)
|
||||||
|
const [isDefeat, setIsDefeat] = useState(false)
|
||||||
|
|
||||||
|
const [keyPuzzleWord, setKeyPuzzleWord] = useState(1)
|
||||||
|
|
||||||
|
if (isVictory || isDefeat) {
|
||||||
|
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setHangmanFrame(0)
|
||||||
|
|
||||||
|
setIsVictory(false)
|
||||||
|
setIsDefeat(false)
|
||||||
|
|
||||||
|
setKeyPuzzleWord(keyPuzzleWord + 1)
|
||||||
|
}, 3000)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header language={language}/>
|
<Header language={language}/>
|
||||||
@@ -25,14 +45,31 @@ function App() {
|
|||||||
|
|
||||||
<div className='column-2'>
|
<div className='column-2'>
|
||||||
<CurrentScore currentScore={currentScore} />
|
<CurrentScore currentScore={currentScore} />
|
||||||
<PuzzleWord
|
|
||||||
|
{ isVictory || isDefeat ? null :
|
||||||
|
|
||||||
|
<PuzzleWord
|
||||||
|
|
||||||
|
key={keyPuzzleWord}
|
||||||
|
|
||||||
hangmanFrame={hangmanFrame}
|
hangmanFrame={hangmanFrame}
|
||||||
setHangmanFrame={setHangmanFrame}
|
setHangmanFrame={setHangmanFrame}
|
||||||
|
|
||||||
currentScore={currentScore}
|
currentScore={currentScore}
|
||||||
setCurrentScore={setCurrentScore}
|
setCurrentScore={setCurrentScore}
|
||||||
/>
|
|
||||||
|
isVictory={isVictory}
|
||||||
|
setIsVictory={setIsVictory}
|
||||||
|
|
||||||
|
isDefeat={isDefeat}
|
||||||
|
setIsDefeat={setIsDefeat}
|
||||||
|
/>
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
{isVictory ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} /> : null}
|
||||||
|
{isDefeat ? <Defeat /> : null}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -3,30 +3,31 @@ import Register_Input from '../../Scripts/Register input'
|
|||||||
import Defeat from './Defeat'
|
import Defeat from './Defeat'
|
||||||
import Victory from './Victory'
|
import Victory from './Victory'
|
||||||
|
|
||||||
const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore}) => {
|
const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat}) => {
|
||||||
|
|
||||||
const [actualWord, setActualWord] = useState('papa')
|
const [actualWord, setActualWord] = useState('papa')
|
||||||
const [isVictory, setIsVictory] = useState(false)
|
|
||||||
const [isDefeat, setIsDefeat] = useState(false)
|
|
||||||
|
|
||||||
const generatePuzzleWord = () => {
|
|
||||||
|
const generatePuzzleWord = () => {
|
||||||
|
|
||||||
const puzzleWord = document.getElementById('puzzleWord')
|
const puzzleWord = document.getElementById('puzzleWord')
|
||||||
|
|
||||||
for (let i = 0; i < actualWord.length; i++) {
|
for (let i = 0; i < actualWord.length; i++) {
|
||||||
|
|
||||||
let letter = document.createElement('span')
|
let letter = document.createElement('span')
|
||||||
|
|
||||||
letter.className = 'letter'
|
letter.className = 'letter'
|
||||||
letter.textContent = ''
|
letter.textContent = ''
|
||||||
|
|
||||||
puzzleWord.appendChild(letter)
|
puzzleWord.appendChild(letter)
|
||||||
}
|
}
|
||||||
|
|
||||||
const counter = document.createElement('span')
|
const counter = document.createElement('span')
|
||||||
counter.className = 'counter'
|
counter.className = 'counter'
|
||||||
counter.textContent = '(' + actualWord.length + ')'
|
counter.textContent = '(' + actualWord.length + ')'
|
||||||
|
|
||||||
puzzleWord.appendChild(counter)
|
puzzleWord.appendChild(counter)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
@@ -42,13 +43,12 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor
|
|||||||
Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat)
|
Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat)
|
||||||
|
|
||||||
}, [hangmanFrame])
|
}, [hangmanFrame])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="puzzleWord" id="puzzleWord"></div>
|
<div className="puzzleWord" id="puzzleWord"></div>
|
||||||
|
|
||||||
{isVictory ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} /> : null}
|
|
||||||
{isDefeat ? <Defeat /> : null}
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ const CheckVictory = (setIsVictory) => {
|
|||||||
if (allChildrenHaveText) {
|
if (allChildrenHaveText) {
|
||||||
|
|
||||||
setIsVictory(true)
|
setIsVictory(true)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import CheckVictory from "./CheckVictory.jsx";
|
import CheckVictory from "./CheckVictory";
|
||||||
|
|
||||||
const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) => {
|
const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) => {
|
||||||
|
|
||||||
@@ -46,7 +46,6 @@ const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory,
|
|||||||
});
|
});
|
||||||
|
|
||||||
CheckVictory(setIsVictory)
|
CheckVictory(setIsVictory)
|
||||||
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
@@ -61,9 +60,7 @@ const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory,
|
|||||||
removeRegisterInput()
|
removeRegisterInput()
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const removeRegisterInput = () => {
|
const removeRegisterInput = () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user