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

Game logic done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-14 00:29:28 -03:00
parent ab65d653aa
commit 9acedd2832
7 changed files with 108 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/css/index.css
View File

@@ -48,7 +48,7 @@ header h2 {
.puzzleWord {
font-family: "Rambla", sans-serif;
font-weight: 400;
font-size: 60pt;
font-size: 50pt;
display: flex;
align-items: center;
max-width: 70vw;
@@ -59,7 +59,10 @@ header h2 {
width: 3vw;
height: 70pt;
margin-left: 2vw;
border-bottom: 3px solid #000;
border-bottom: 5px solid #000;
display: flex;
justify-content: center;
align-items: flex-end;
}
.puzzleWord .counter {
font-size: 40pt;

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;;AAGJ;EACI;EAEA;EAEA;;;AC1BR;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"],"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"}

8
public/sass/_puzzleWord.scss
View File

@@ -1,7 +1,7 @@
.puzzleWord {
@include bodyFont();
font-size: 60pt;
font-size: 50pt;
display: flex;
align-items: center;
@@ -16,7 +16,11 @@
height: 70pt;
margin-left: 2vw;
border-bottom: 3px solid #000;
border-bottom: 5px solid #000;
display: flex;
justify-content: center;
align-items: flex-end;
}
.counter {

12
src/App.js
View File

@@ -9,6 +9,8 @@ function App() {
const [language, setLanguage] = useState('english')
const [currentScore, setCurrentScore] = useState(0)
const [hangmanFrame, setHangmanFrame] = useState(0)
return (
<>
<Header language={language}/>
@@ -16,12 +18,18 @@ function App() {
<div className="app">
<div className='column-1'>
<Hangman />
<Hangman
hangmanFrame={hangmanFrame}
/>
</div>
<div className='column-2'>
<CurrentScore currentScore={currentScore} />
<PuzzleWord />
<PuzzleWord
hangmanFrame={hangmanFrame}
setHangmanFrame={setHangmanFrame}
/>
</div>

5
src/components/Hangman/Hangman.jsx
View File

@@ -1,13 +1,12 @@
import React, {useState} from 'react'
import { images } from './Images'
const Hangman = () => {
const Hangman = (props) => {
const [hangmanFrame, setHangmanFrame] = useState(0)
return (
<div className="hangman">
<img src={images[hangmanFrame]} alt="" />
<img src={images[props.hangmanFrame]} alt="" />
</div>
)
}

28
src/components/PuzzleWord.jsx
View File

@@ -1,14 +1,11 @@
import React, {useState} from 'react'
import Register_Input from './Scripts/Register input'
const PuzzleWord = () => {
const PuzzleWord = ({hangmanFrame, setHangmanFrame}) => {
const [actualWord, setActualWord] = useState('murcielagos')
const [hiddenWord, setHiddenWord] = useState('')
console.log(actualWord.length)
React.useEffect(() => {
const [actualWord, setActualWord] = useState('murcielago')
const generatePuzzleWord = () => {
const puzzleWord = document.getElementById('puzzleWord')
for (let i = 0; i < actualWord.length; i++) {
@@ -26,12 +23,27 @@ const PuzzleWord = () => {
counter.textContent = '(' + actualWord.length + ')'
puzzleWord.appendChild(counter)
}
React.useEffect(() => {
generatePuzzleWord()
}, [])
React.useEffect(() => {
Register_Input(actualWord, hangmanFrame, setHangmanFrame)
}, [hangmanFrame])
return (
<div className="puzzleWord" id="puzzleWord">
{hiddenWord}
</div>
)

64
src/components/Scripts/Register input.js Normal file
View File

@@ -0,0 +1,64 @@
const Register_Input = (actualWord, hangmanFrame, setHangmanFrame) => {
const alphabet = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n", "ñ","o","p","q","r","s","t","u","v","w","x","y","z"];
const keyRegister = (event) => {
const currentKey = event.key.toLowerCase()
if (hangmanFrame < 6 && alphabet.includes(currentKey) ) {
actualWord = actualWord.toLowerCase()
const puzzleWord = document.getElementById('puzzleWord')
const letters = []
console.log(event.key)
if (actualWord.search(currentKey) + 1) {
for (let i = 0; i < actualWord.length; i++) {
if (currentKey === actualWord[i]) {
letters.push(i)
}
}
letters.forEach(letter => {
const index = letter
if (index === 0) {
puzzleWord.children[index].textContent = currentKey.toUpperCase()
}
else {
puzzleWord.children[index].textContent = currentKey
}
});
} else {
const quantity = hangmanFrame + 1
setHangmanFrame(quantity)
removeRegisterInput()
}
}
}
const removeRegisterInput = () => {
window.removeEventListener('keyup', keyRegister)
}
window.addEventListener('keyup', keyRegister)
}
export default Register_Input