Snake Movement Handler Setup

backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js

@@ -0,0 +1,22 @@
+const SocketUser = require("../../../../Classes/SocketUser");
+const Playground = require("../Playground/Playground");
+
+class Snake{
+    /** @param {SocketUser} player @param {Playground} playground */
+    constructor(player, playground, color, startTiles) {
+        this.player = player;
+        this.playground = playground;
+        this.color = color;
+        
+        this.tiles = [];
+        this.nextMovement = null;
+
+        this.player.socket.on("movement", (data) => { this.updateNextMovement(data) })
+    }
+
+    updateNextMovement(data){
+
+    }
+}
+
+module.exports = Snake;

backend/src/SocketIO/GameManager/Game/GameLoop.js

@@ -15,8 +15,8 @@ class GameLoop{
         this.io.to(`game-${this.game.code}`).emit("loop", {
             code: this.game.code,
             playground: {
-                height: this.playground.height,
+                // height: this.playground.height,
-                width: this.playground.width,
+                // width: this.playground.width,
                 tiles: this.playground.tiles,
             }
         });

frontend/game/scripts/Game/Elements/MovementHandler.js

@@ -0,0 +1,47 @@
+class MovementHandler{
+    /**@param {import("../../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/
+    constructor(socket){
+        this.socket = socket;
+
+        this.keys = [
+            {
+                keys: ["w", "W", "ArrowUp"],
+                name:"up"
+            },
+            {
+                keys: ["s", "S", "ArrowDown"],
+                name:"down"
+            },
+            {
+                keys: ["d", "D", "ArrowRight"],
+                name:"right"
+            },
+            {
+                keys: ["a", "A", "ArrowLeft"],
+                name:"left"
+            }
+        ]
+
+        document.addEventListener("keydown", (e) => { this.updateMovement(e) });
+    }
+
+    /**@param {KeyboardEvent} e */
+    updateMovement(e){
+        const key = e.key;
+        let direction = null;
+
+        this.keys.forEach(e => {
+            e.keys.forEach(x => {
+                if(x === key){
+                    direction = e.name;
+                }
+            })
+        });
+
+        if(!direction) return;
+
+        console.log(direction);
+    }
+}
+
+export default MovementHandler;

frontend/game/scripts/Game/Game.js

@@ -1,6 +1,7 @@
 import Loop from "./Loop.js";
 import UIManager from "./UI/UIManager.js";
 import Playground from "./Elements/Playground.js";
+import MovementHandler from "./Elements/MovementHandler.js";
 
 class Game{
     /**@param {import("../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/
@@ -9,6 +10,7 @@ class Game{
 
         this.loop = new Loop(this.socket, this);
         this.uiManager = new UIManager();
+        this.movementHandler = undefined;
         this.playGround = undefined;
 
         this.gameStarted = false;
@@ -20,6 +22,7 @@ class Game{
         this.gameStarted = true;
         this.uiManager.loadGameContent();
 
+        this.movementHandler = new MovementHandler(this.socket);
         this.playGround = new Playground(this, this.uiManager, playgroundSize);
     }
 }

frontend/game/style/mainStyle.css

@@ -10,4 +10,7 @@ td, tr {
 
 td img {
     vertical-align: top;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
 }