Merge pull request #89 from UTDallasEPICS/dev/daniel/frontend-key-inputs

Players' Keyboard Inputs to Controller Server

.env.example

@@ -1,4 +1,4 @@
-PRISMA_DB_URL="file: dev.db"
+PRISMA_DB_URL="file:dev.db"
 
 PORT_EXPRESS_CONTROLLER_GAMEMANAGER=PORT1
 PORT_WSS_CONTROLLER_CLIENT=PORT2

pages/index.vue

@@ -22,6 +22,7 @@ const ws_queue = ref<WebSocket>()
 const ws_controller = ref<WebSocket>()
 const confirmationRequest = ref(false)
 const confirmationPassword = ref("")
+const accesspassword = ref("")
 
 const sse = ref()
 const queue = ref<Array<string>>()
@@ -50,7 +51,39 @@ const joinQueue = () => {
         }
         else if(type === "MATCH_START"){
             confirmationRequest.value = false
+            accesspassword.value = payload
+            document.cookie = "accesspassword=" + accesspassword.value
             ws_controller.value = new WebSocket(`ws://localhost:${useRuntimeConfig().public.PORT_WSS_CONTROLLER_CLIENT}`)
+            ws_controller.value.onopen = (event) => {
+                const wasdMapping: { [key: string]: number, "w": number, "a": number, "s": number, "d": number } = {"w": 0, "a": 0, "s": 0, "d": 0} 
+                const updateKeyUp = (event: KeyboardEvent) => {
+                    if(wasdMapping.hasOwnProperty(event.key)){
+                        wasdMapping[event.key] = 0
+                    }
+                }
+                const updateKeyDown = (event: KeyboardEvent) => {
+                    if(wasdMapping.hasOwnProperty(event.key)){
+                        wasdMapping[event.key] = 1
+                    }
+                }
+                window.addEventListener("keyup", updateKeyUp)
+                window.addEventListener("keydown", updateKeyDown)
+                const keyInputs = setInterval(() => {
+                    if(ws_controller.value?.OPEN){
+                        
+                        const message = {
+                            type: "KEY_INPUT",
+                            payload: "" + wasdMapping["w"] + wasdMapping["a"] + wasdMapping["s"] + wasdMapping["d"]
+                        }
+                        ws_controller.value.send(JSON.stringify(message))
+                    }
+                    else{
+                        clearInterval(keyInputs)
+                        window.removeEventListener("keyup", updateKeyUp)
+                        window.removeEventListener("keydown", updateKeyDown)
+                    }
+                }, 100)
+            }
         }
     }
     ws_queue.value.onopen = (event) => {

server/Game_Manager/src/index.ts

@@ -24,7 +24,7 @@ const players: Array<{username: string, user_id: string, ws: any, accepted: bool
 let CONFIRMATION_PASSWORD: string = "sousounofrieren" // "Tearful goodbyes aren’t our style. It’d be embarrassing when we meet again"
 let CONTROLLER_ACCESS: string = "donutvampire" // the initial value does not do anything here
 let timer: number = 0
-const timer_duration: number = 300 // this is the initial timer duration, in seconds
+const timer_duration: number = 30 // this is the initial timer duration, in seconds
 let confirmation_timer: number = 0
 let score1: number = 0
 let score2: number = 0
@@ -78,8 +78,8 @@ const gameCycle = setInterval( async () => {
                 await fetch(`http://localhost:${PORT_EXPRESS_CONTROLLER_GAMEMANAGER}/addusers`, {
                     method: "POST",
                     headers: {"Content-Type": "application/json"},
-                    body: JSON.stringify([  {"user_id": players[0]["user_id"], "playernumber": 0}, 
-                                            {"user_id": players[1]["user_id"], "playernumber": 1}])
+                    body: JSON.stringify({ "users": [  {"user_id": players[0]["user_id"], "playernumber": 0}, 
+                                            {"user_id": players[1]["user_id"], "playernumber": 1}] })
                 })
                 // give players the access code to connect to Controller server WebSocket
                 queue[0].ws.send(JSON.stringify({
@@ -146,8 +146,8 @@ const gameCycle = setInterval( async () => {
         await fetch(`http://localhost:${PORT_EXPRESS_CONTROLLER_GAMEMANAGER}/removeusers`, {
             method: "POST",
             headers: {"Content-Type": "application/json"},
-            body: JSON.stringify([  {"user_id": players[0]["user_id"]}, 
-                                    {"user_id": players[1]["user_id"]}])
+            body: JSON.stringify({ "users": [  {"user_id": players[0]["user_id"]}, 
+                                    {"user_id": players[1]["user_id"]}] })
         })
         players.splice(0, 2)
         robots_ready = false
@@ -360,17 +360,21 @@ ws_raspberry.onclose = (event) => {
 
 ws_raspberry.onmessage = (event) => {
     const { type, payload } = JSON.parse(event.data.toString())
-    console.log(`Received message => ${type} : ${payload}`)
+    // console.log(`Received message => ${type} : ${payload}`)
     if(type === "IS_READY") {
         robots_ready = payload
+        console.log(`Received message => ${type} : ${payload}`)
     }
     else if(type === "TIMER_UPDATE"){
-        timer = payload
+        const { timer:timerUpdate } : { timer: number } = payload
+        timer = timerUpdate
+        console.log(`Received message => ${type} : ${timerUpdate}`)
     }
     else if(type === "SCORE_UPDATE"){
         const { score1:s1Update, score2:s2Update } : { score1: number, score2: number } = payload
         score1 = s1Update
         score2 = s2Update
+        console.log(`Received message => ${type} : ${score1} ${score2}`)
     }
     else if(type === "GAME_END"){
         const { timer:finalTimer, score1:s1final, score2:s2final } : { timer: number, score1: number, score2: number } = payload