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/backend/package-lock.json
+++ b/testing/SocketIO_Testing/backend/package-lock.json
--- a/testing/SocketIO_Testing/backend/package.json
+++ b/testing/SocketIO_Testing/backend/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "node ./src/index.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "body-parser": "^1.20.3",
+    "express": "^4.21.2",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1"
+  }
+}
--- a/testing/SocketIO_Testing/backend/src/index.js
+++ b/testing/SocketIO_Testing/backend/src/index.js
@@ -0,0 +1,103 @@
+const express = require("express");
+const http = require("http");
+const socketIO = require("socket.io");
+const bp = require("body-parser");
+const path = require("path");
+
+const _PORT = 3000;
+
+const app = express();
+const server = http.createServer(app);
+/** @type {import("socket.io").Server} */
+const io = socketIO(server);
+
+app.use(bp.urlencoded({ extended: false }));
+app.use(express.static(path.join(__dirname, "../../frontend")));
+
+app.use((req, res, next) => {
+    console.log(`${req.method} | ${req.url}`);
+
+    next();
+})
+
+const playerList = [];
+
+io.on('connection', (socket) => {
+    console.log("Es ist ein neuer Spieler beigetreten");
+
+    const player = {
+        id: socket.id,
+        x: 100,
+        y: 100,
+        socket: socket,
+    };
+
+    playerList.push(player);
+    emitPlayerMovement();
+
+    socket.on("moveUp", () => {
+        const player = playerList.find((p) => p.id === socket.id);
+        if (player) {
+            player.y -= 10;
+        }
+
+        emitPlayerMovement();
+    });
+
+    socket.on("moveDown", () => {
+        const player = playerList.find((p) => p.id === socket.id);
+        if (player) {
+            player.y += 10;
+        }
+
+        emitPlayerMovement();
+    });
+
+    socket.on("moveRight", () => {
+        const player = playerList.find((p) => p.id === socket.id);
+        if (player) {
+            player.x += 10;
+        }
+
+        emitPlayerMovement();
+    });
+
+    socket.on("moveLeft", () => {
+        const player = playerList.find((p) => p.id === socket.id);
+        if (player) {
+            player.x -= 10;
+        }
+
+        emitPlayerMovement();
+    });
+
+    // Handle player disconnect
+    socket.on("disconnect", () => {
+        console.log(`Spieler ${socket.id} hat das Spiel verlassen`);
+        const index = playerList.findIndex((p) => p.id === socket.id);
+        if (index !== -1) {
+            playerList.splice(index, 1);
+        }
+
+        emitPlayerMovement();
+    });
+
+    socket.on("disconnect", () => {
+        playerList.splice(playerList.findIndex(p => p.id === socket.id), 1);
+    })
+});
+
+function emitPlayerMovement() {
+    const playerMap = playerList.map(x => {
+        return {
+            id: x.id,
+            x: x.x,
+            y: x.y
+        }
+    });
+    io.emit("updatePos", playerMap);
+}
+
+server.listen(_PORT, () => {
+    console.log(`Backend gestartet auf http://localhost:${_PORT}`);
+})
--- 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;
+}