diff --git a/public/css/index.css b/public/css/index.css index 111b5b9..fbf96d3 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -302,4 +302,23 @@ header h2 { margin-left: 1vw; } +.letter-input-container { + height: 30vh; + display: flex; + align-items: center; + justify-content: center; +} +.letter-input-container #letter-input { + width: 10vw; + height: 10vw; + text-align: center; + font-size: calc(10vw - 20px); + border-radius: 5px; + border: none; + outline: none; + border: 2px solid #f87665; + background-color: #303030cd; + color: #ffffff5f; +} + /*# sourceMappingURL=index.css.map */ diff --git a/public/css/index.css.map b/public/css/index.css.map index b4a7d1d..46cf9f9 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/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.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;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;AChBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.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;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;AChBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI;;;ACdR;EACI;EAEA;EACA;EACA;;AAEA;EAII,OAFO;EAGP,QAHO;EAKP;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA","file":"index.css"} \ No newline at end of file diff --git a/public/sass/_letter-input.scss b/public/sass/_letter-input.scss new file mode 100644 index 0000000..afed7cf --- /dev/null +++ b/public/sass/_letter-input.scss @@ -0,0 +1,26 @@ +.letter-input-container { + height: 30vh; + + display: flex; + align-items: center; + justify-content: center; + + #letter-input { + + $size: 10vw; + + width: $size; + height: $size; + + text-align: center; + font-size: calc(#{$size} - 20px); //CREDITS: https://stackoverflow.com/a/52364513 + + border-radius: 5px; + border: none; + outline: none; + + border: 2px solid #f87665; + background-color: #303030cd; + color: #ffffff5f; + } +} \ No newline at end of file diff --git a/public/sass/index.scss b/public/sass/index.scss index 59a8369..5494c04 100644 --- a/public/sass/index.scss +++ b/public/sass/index.scss @@ -24,4 +24,5 @@ html, body { @import 'game-container'; @import 'defeat-victory'; @import 'loading'; -@import 'letters-registered'; \ No newline at end of file +@import 'letters-registered'; +@import 'letter-input' \ No newline at end of file diff --git a/src/App.js b/src/App.js index 058ba76..b9767f0 100644 --- a/src/App.js +++ b/src/App.js @@ -101,37 +101,51 @@ function App() { if (mobileUser) { - currentKey = e.explicitOriginalTarget.nodeValue + if (e.key) { + currentKey = e.key.toLowerCase() + + } + else { + + currentKey = e.explicitOriginalTarget.nodeValue + } } if (alphabet.includes(currentKey)) { - - setLettersRegistered([...lettersRegistered, currentKey]) - - if (selectedWord.includes(currentKey)) { - - if (!correctLetters.includes(currentKey)) { - - setCorrectLetters([...correctLetters, currentKey]) + + setLettersRegistered([...lettersRegistered, currentKey]) - checkVictory(setEndOfGame) + if (selectedWord.includes(currentKey)) { + + if (!correctLetters.includes(currentKey)) { + + setCorrectLetters([...correctLetters, currentKey]) + + checkVictory(setEndOfGame) + } + } - - } else { - setHangmanFrame(hangmanFrame + 1) - - checkDefeat(setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord) + + if (hangmanFrame <= 5) { + + setHangmanFrame(hangmanFrame + 1) + } + + checkDefeat(setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord, mobileUser) } - } + } } } - window.addEventListener('keyup', registerKeys) + if (endOfGame === '') { + + window.addEventListener('keyup', registerKeys) + } return () => window.removeEventListener('keyup', registerKeys) - }, [correctLetters, displayApp, lettersRegistered, setLettersRegistered, hangmanFrame, selectedWord]) + }, [correctLetters, displayApp, lettersRegistered, setLettersRegistered, hangmanFrame, selectedWord, mobileUser, endOfGame]) React.useEffect(() => { @@ -199,22 +213,6 @@ function App() { { mobileUser ? :null } diff --git a/src/General Scripts/checkDefeat.js b/src/General Scripts/checkDefeat.js index 1166e19..f385903 100644 --- a/src/General Scripts/checkDefeat.js +++ b/src/General Scripts/checkDefeat.js @@ -1,10 +1,11 @@ -const checkDefeat = (setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord, mobileUser = false) => { +const checkDefeat = (setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord, mobileUser) => { if (hangmanFrame >= 5) { setCorrectLetters([...selectedWord]) setEndOfGame('Defeat') - if (!mobileUser) { + console.log(navigator.keyboard) + if (!mobileUser && navigator.keyboard) { navigator.keyboard.lock(); } diff --git a/src/components/Letter Input/LetterInput.jsx b/src/components/Letter Input/LetterInput.jsx index ab0e268..eb79cfa 100644 --- a/src/components/Letter Input/LetterInput.jsx +++ b/src/components/Letter Input/LetterInput.jsx @@ -1,8 +1,6 @@ import React from 'react' -import alphabet from '../../General Scripts/alphabet' -import checkDefeat from '../../General Scripts/checkDefeat' -const LetterInput = ({displayApp, setLettersRegistered, lettersRegistered, selectedWord, correctLetters, setCorrectLetters, setEndOfGame, setHangmanFrame, hangmanFrame, checkVictory}) => { +const LetterInput = () => { const registerInput = (letter) => {