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

mobile users input style done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-20 19:12:40 -03:00
parent 65251009de
commit ef0fe3d836
7 changed files with 84 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/css/index.css
View File

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

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

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

26
public/sass/_letter-input.scss Normal file
View File

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

1
public/sass/index.scss
View File

@@ -25,3 +25,4 @@ html, body {
@import 'defeat-victory';
@import 'loading';
@import 'letters-registered';
@import 'letter-input'

36
src/App.js
View File

@@ -101,8 +101,15 @@ function App() {
if (mobileUser) {
if (e.key) {
currentKey = e.key.toLowerCase()
}
else {
currentKey = e.explicitOriginalTarget.nodeValue
}
}
if (alphabet.includes(currentKey)) {
@@ -119,19 +126,26 @@ function App() {
}
else {
setHangmanFrame(hangmanFrame + 1)
checkDefeat(setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord)
if (hangmanFrame <= 5) {
setHangmanFrame(hangmanFrame + 1)
}
checkDefeat(setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord, mobileUser)
}
}
}
}
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 ?
<LetterInput
displayApp={displayApp}
setLettersRegistered={setLettersRegistered}
lettersRegistered={lettersRegistered}
selectedWord={selectedWord}
setCorrectLetters={setCorrectLetters}
correctLetters={correctLetters}
setEndOfGame={setEndOfGame}
setHangmanFrame={setHangmanFrame}
hangmanFrame={hangmanFrame}
checkVictory={checkVictory}
/>
:null
}

5
src/General Scripts/checkDefeat.js
View File

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

4
src/components/Letter Input/LetterInput.jsx
View File

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