Input logic for mobile users done

package.json

@@ -2,23 +2,15 @@
   "name": "hangman-game",
   "version": "0.1.0",
   "private": true,
-  "engines": {
-    "node": "12.22.7",
-    "npm": "6.14.15"
-  },
   "dependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "buildpack": "0.0.1",
-    "firebase": "^9.1.2",
-    "html-webpack-plugin": "^5.4.0",
+    "firebase": "^9.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "^4.0.3",
-    "web-vitals": "^1.1.2",
-    "webpack": "^5.59.0",
-    "webpack-dev-server": "^4.3.1"
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

package.json.save

@@ -0,0 +1,24 @@
+  "name": "hangman-game",
+  "version": "0.1.0",
+  "description": "This is a project for create an Hangman game with React",
+  "main": "index.js",
+  "engines": {
+    "node": "12.22.7",
+    "npm": "8.1.0"
+ },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+{
+{
+{
+
+  },
+  "author": "",
+  "license": "ISC",
+
+"scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "watch": "webpack --watch",
+      "build": "webpack"
+    },
+}

package.json.save.1

@@ -0,0 +1,23 @@
+{
+  "name": "hangman-game",
+  "version": "0.1.0",
+  "description": "This is a project for create an Hangman game with React",
+  "main": "index.js",
+  "engines": {
+    "node": "12.22.7",
+    "npm": "8.1.0"
+ },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+
+
+	"scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "watch": "webpack --watch",
+      "build": "webpack"
+    },
+
+}

src/App.js

@@ -89,9 +89,20 @@ function App() {
     
     const registerKeys = e => {
 
-      const currentKey = e.key.toLowerCase()
-
       if (displayApp) {
+        console.log(e)
+
+        let currentKey
+        
+        if (!mobileUser) {
+
+          currentKey = e.key.toLowerCase()
+        }
+
+        if (mobileUser) {
+
+          currentKey = e.explicitOriginalTarget.nodeValue
+        }
         
         if (alphabet.includes(currentKey)) {
 
@@ -187,7 +198,24 @@ function App() {
     </div>
         {
           mobileUser ?
-            <LetterInput />
+            <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,13 @@
-const checkDefeat = (setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord) => {
+const checkDefeat = (setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord, mobileUser = false) => {
     
     if (hangmanFrame >= 5) {
         setCorrectLetters([...selectedWord])
         setEndOfGame('Defeat')
 
-        navigator.keyboard.lock();
+        if (!mobileUser) {
+
+            navigator.keyboard.lock();
+        }
 
     }
 }

src/General Scripts/checkVictory.js

@@ -2,12 +2,16 @@ import React from 'react'
 
 const checkVictory = (setEndOfGame) => {
 
+    console.log('check victory exec')
+
     let parent_element = document.getElementById('word').childNodes
         parent_element = [...parent_element]
 
     let result = true
 
     parent_element.forEach(children => {
+
+        console.log(children.innerText)
     
         if (children.innerText === '') {
             result = false
@@ -21,11 +25,6 @@ const checkVictory = (setEndOfGame) => {
        
         setEndOfGame('Victory')
     }
-    return (
-        <div>
-            
-        </div>
-    )
 }
 
 export default checkVictory

src/components/Letter Input/LetterInput.jsx

@@ -1,13 +1,18 @@
 import React from 'react'
+import alphabet from '../../General Scripts/alphabet'
+import checkDefeat from '../../General Scripts/checkDefeat'
 
-const LetterInput = ({registerKeys}) => {
-
+const LetterInput = ({displayApp, setLettersRegistered, lettersRegistered, selectedWord, correctLetters, setCorrectLetters, setEndOfGame, setHangmanFrame, hangmanFrame, checkVictory}) => {
+    
+    
     const registerInput = (letter) => {
 
         const input = document.getElementById('letter-input')
+        const currentKey = letter
 
-        input.value = ''
-    }
+        document.dispatchEvent(new KeyboardEvent('keyup', input));
+            input.value = ''
+        }
 
     return (
         <div className="letter-input-container">