mobile users input style done

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

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

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

public/sass/index.scss

@@ -24,4 +24,5 @@ html, body {
 @import 'game-container';
 @import 'defeat-victory';
 @import 'loading';
-@import 'letters-registered';
+@import 'letters-registered';
+@import 'letter-input'

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])
+            setLettersRegistered([...lettersRegistered, currentKey])
-
-          if (selectedWord.includes(currentKey)) {
-
-            if (!correctLetters.includes(currentKey)) {
-              
-              setCorrectLetters([...correctLetters, currentKey])
             
-              checkVictory(setEndOfGame)
+            if (selectedWord.includes(currentKey)) {
+              
+              if (!correctLetters.includes(currentKey)) {
+                
+                setCorrectLetters([...correctLetters, currentKey])
+                
+                checkVictory(setEndOfGame)
+              }
+              
             }
-
-          }
             else {
-              setHangmanFrame(hangmanFrame + 1)
+              
-
+              if (hangmanFrame <= 5) {
-              checkDefeat(setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord)
+                
+                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 ?
             <LetterInput
-              displayApp={displayApp}
-
-              setLettersRegistered={setLettersRegistered}
-              lettersRegistered={lettersRegistered}
-
-              selectedWord={selectedWord}
-
-              setCorrectLetters={setCorrectLetters}
-              correctLetters={correctLetters}
-
-              setEndOfGame={setEndOfGame}
-
-              setHangmanFrame={setHangmanFrame}
-              hangmanFrame={hangmanFrame}
-
-              checkVictory={checkVictory}
             />
           :null
         }

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

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