diff --git a/public/css/index.css b/public/css/index.css index 4f239cd..6ef49d3 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -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; diff --git a/public/css/index.css.map b/public/css/index.css.map index 3e6d8f1..7e4a44d 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;;AAGJ;EACI;EAEA;EAEA;;;AC1BR;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"],"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 diff --git a/public/sass/_puzzleWord.scss b/public/sass/_puzzleWord.scss index 5064705..953f09f 100644 --- a/public/sass/_puzzleWord.scss +++ b/public/sass/_puzzleWord.scss @@ -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 { diff --git a/src/App.js b/src/App.js index 46cb983..9e4a8fb 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,8 @@ function App() { const [language, setLanguage] = useState('english') const [currentScore, setCurrentScore] = useState(0) + const [hangmanFrame, setHangmanFrame] = useState(0) + return ( <>
@@ -16,12 +18,18 @@ function App() {
- +
- +
diff --git a/src/components/Hangman/Hangman.jsx b/src/components/Hangman/Hangman.jsx index f985343..01d52d7 100644 --- a/src/components/Hangman/Hangman.jsx +++ b/src/components/Hangman/Hangman.jsx @@ -1,13 +1,12 @@ import React, {useState} from 'react' import { images } from './Images' -const Hangman = () => { +const Hangman = (props) => { - const [hangmanFrame, setHangmanFrame] = useState(0) return (
- +
) } diff --git a/src/components/PuzzleWord.jsx b/src/components/PuzzleWord.jsx index 48fa30d..37c5de7 100644 --- a/src/components/PuzzleWord.jsx +++ b/src/components/PuzzleWord.jsx @@ -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 (
- {hiddenWord} +
) diff --git a/src/components/Scripts/Register input.js b/src/components/Scripts/Register input.js new file mode 100644 index 0000000..bfbb91f --- /dev/null +++ b/src/components/Scripts/Register input.js @@ -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