Merge pull request #10 from IRLL/key_input

Fix the keyboard input
IRLL · Jan 21, 2021 · b44a7f3 · b44a7f3
2 parents 1d0ffe0 + 4c2f5fc
commit b44a7f3
Showing 1 changed file with 18 additions and 22 deletions.
diff --git a/src/components/Game/game.js b/src/components/Game/game.js
@@ -27,14 +27,14 @@ class Game extends React.Component{
         isVisible : false,
         UIlist : [],
         progress : 0,
-        allData : null,
         inputBudget : 0,
         usedInputBudget : 0,
         receiveData : null,
         isPause : false,
         displayData : null,
         inMessage : [],
-        outMessage : []
+        outMessage : [],
+        holdKey : null
     }
 
     componentDidMount() {
@@ -49,22 +49,6 @@ class Game extends React.Component{
             },1000)
         }
 
-        //Running a check every 1/100 second(10 millisecond)
-        //If allData is not null then send the message
-        //otherwise just wait until next checking
-        this.sendData = setInterval(() => {
-            if(this.state.allData && this.state.isConnection){
-                this.websocket.send(JSON.stringify(this.state.allData));
-                //record every message send to the server
-                if(DEBUG){
-                    this.setState(prevState => ({
-                        outMessage : [prevState.allData,...prevState.outMessage],
-                    }))
-                }
-                this.setState(({allData : null}));
-            }
-        }, 10);
-
         //To update the progress of loading game content
         //Since we always need to wait 30 seconds before the game
         //content get loaded, we update the progress (100/30) per second
@@ -164,13 +148,27 @@ class Game extends React.Component{
             }
 
             if(this.state.UIlist.includes(dataToSend.action)){
+                if(this.state.holdKey !== dataToSend.actionType){
+                    this.setState(({holdKey : dataToSend.actionType}));
+                    this.sendMessage(dataToSend);
+                }
+            }
+        })
+
+        document.addEventListener('keyup', (event) => {
+            //Used to prevent arrow keys and space key from scrolling the page
+            let dataToSend = getKeyInput(event.code);
+            if(this.state.UIlist.includes(dataToSend.action)){
+                dataToSend.action = 'noop';
+                if(this.state.holdKey === dataToSend.actionType){
+                    this.setState({holdKey : null});
+                }
                 this.sendMessage(dataToSend);
             }
         })
     }
 
     componentWillUnmount() {
-        clearInterval(this.sendData);
         if(this.setInMessage) clearInterval(this.setInMessage);
     }
 
@@ -199,9 +197,7 @@ class Game extends React.Component{
                 frameCount : this.state.frameCount,
                 frameId : this.state.frameId
             }
-            this.setState(({
-                allData : allData
-            }))
+            this.websocket.send(JSON.stringify(allData));
         }
     }