Initial commit

2025-03-13 16:05:09 +01:00
commit 5950d5ae9d
44 changed files with 5505 additions and 0 deletions
--- a/testing/SocketIO_Testing/frontend/index.html
+++ b/testing/SocketIO_Testing/frontend/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Erste Socket.io Seite</title>
+        <link rel="stylesheet" href="style/style.css" />
+    </head>
+    <body>
+        <h1>Multigame</h1>
+    </body>
+
+    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+    <script src="index.js" type="module"></script>
+
+    <canvas id="game" height="300px" width="300px" id> </canvas>
+</html>
--- a/testing/SocketIO_Testing/frontend/index.js
+++ b/testing/SocketIO_Testing/frontend/index.js
@@ -0,0 +1,37 @@
+/** @type {import("../backend/node_modules/socket.io-client").Socket} */
+const socket = io("http://localhost:3000");
+
+const gameScreen = document.getElementById("game");
+const ctx = gameScreen.getContext("2d")
+
+ctx.fillStyle = "red";
+
+socket.on("connect", () => {
+  console.log(`Connected as ${socket.id}`);
+});
+
+let keysPressed = new Set();
+
+document.addEventListener("keydown", (e) => {
+  keysPressed.add(e.key);
+});
+
+document.addEventListener("keyup", (e) => {
+  keysPressed.delete(e.key);
+});
+
+setInterval(() => {
+  if (keysPressed.has("ArrowUp")) socket.emit("moveUp");
+  if (keysPressed.has("ArrowDown")) socket.emit("moveDown");
+  if (keysPressed.has("ArrowRight")) socket.emit("moveRight");
+  if (keysPressed.has("ArrowLeft")) socket.emit("moveLeft");
+}, 50);
+
+socket.on("updatePos", (map) => {
+  ctx.clearRect(0, 0, gameScreen.width, gameScreen.height);
+  map.forEach(e => {
+    ctx.beginPath();
+    ctx.arc(e.x, e.y, 10, 0, Math.PI * 2, false);
+    ctx.fill();
+  });
+})
--- a/testing/SocketIO_Testing/frontend/style/style.css
+++ b/testing/SocketIO_Testing/frontend/style/style.css
@@ -0,0 +1,3 @@
+#game{
+    background-color: grey;
+}