From 02eb51808338a70d609029b6f53ec50804f0a2b2 Mon Sep 17 00:00:00 2001
From: Jonas <77726472+kobolol@users.noreply.github.com>
Date: Sun, 21 Sep 2025 20:23:42 +0200
Subject: [PATCH] Fix snake asset case handling

---
 backend/src/SocketIO/GameManager/Game/Game.js |  4 ++-
 .../game/scripts/Game/Elements/TileLoader.js  | 29 +++++++++++++------
 frontend/game/scripts/Game/UI/UIManager.js    | 14 ++++++---
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/backend/src/SocketIO/GameManager/Game/Game.js b/backend/src/SocketIO/GameManager/Game/Game.js
index 3042124..197d7e3 100644
--- a/backend/src/SocketIO/GameManager/Game/Game.js
+++ b/backend/src/SocketIO/GameManager/Game/Game.js
@@ -5,6 +5,8 @@ const GameManager = require("../GameManager");
 const GameLoop = require("./GameLoop");
 const Snake = require("./Classes/Snake/Snake");
 
+const SNAKE_COLORS = ["red", "blue"]; // must stay in sync with the frontend asset map
+
 class Game{
     /** @param {socketIO.Server} io @param {GameManager} gameManager @param {number} code */
     constructor(io, gameManager, code) {
@@ -17,7 +19,7 @@ class Game{
         this.waitingSeconds = 5;
         this.gameStarted = false;
 
-        this.snakeColors = ["red", "blue"];
+        this.snakeColors = [...SNAKE_COLORS];
 
         /**@type {Array<SocketUser>} */
         this.players = [];
diff --git a/frontend/game/scripts/Game/Elements/TileLoader.js b/frontend/game/scripts/Game/Elements/TileLoader.js
index 2a63b85..c607e9e 100644
--- a/frontend/game/scripts/Game/Elements/TileLoader.js
+++ b/frontend/game/scripts/Game/Elements/TileLoader.js
@@ -1,18 +1,29 @@
+const SNAKE_COLOR_ASSET_MAP = {
+    blue: "Blue",
+    red: "Red",
+};
+
 class TileLoader{
     constructor(){
-        this.allSrc = [
+        const fruitSources = [
             "Fruits/Apfel.png",
             "Fruits/Blaubeere.png",
-            "Snakes/blue/End.png",
-            "Snakes/blue/Head.png",
-            "Snakes/blue/Straight.png",
-            "Snakes/blue/Turn.png",
-            "Snakes/red/End.png",
-            "Snakes/red/Head.png",
-            "Snakes/red/Straight.png",
-            "Snakes/red/Turn.png",
         ];
 
+        const snakeSegments = [
+            "End.png",
+            "Head.png",
+            "Straight.png",
+            "Turn.png",
+        ];
+
+        const snakeSources = Object.keys(SNAKE_COLOR_ASSET_MAP).flatMap(color => {
+            const assetColor = SNAKE_COLOR_ASSET_MAP[color] ?? color;
+            return snakeSegments.map(segment => `Snakes/${assetColor}/${segment}`);
+        });
+
+        this.allSrc = [...fruitSources, ...snakeSources];
+
         this.tileMap = new Map();
 
         this.allSrc.forEach(src => {
diff --git a/frontend/game/scripts/Game/UI/UIManager.js b/frontend/game/scripts/Game/UI/UIManager.js
index 7ba64e1..402d37c 100644
--- a/frontend/game/scripts/Game/UI/UIManager.js
+++ b/frontend/game/scripts/Game/UI/UIManager.js
@@ -1,3 +1,8 @@
+const SNAKE_COLOR_ASSET_MAP = {
+    blue: "Blue",
+    red: "Red",
+};
+
 class UIManager{
     constructor(){
         this.mainDiv = document.getElementById("mainMenu");
@@ -50,20 +55,21 @@ class UIManager{
 
         const snakeTable = document.createElement("table");
         const lenght = 3;
+        const assetColor = SNAKE_COLOR_ASSET_MAP[color] ?? color;
         for (let i = 0; i < lenght; i++) {
             const tr = document.createElement("tr");
             const td = document.createElement("td");
-    
+
             const img = document.createElement("img");
             switch (i) {
                 case 0:
-                    img.src = `./assets/Snakes/${color}/Head.png`;
+                    img.src = `./assets/Snakes/${assetColor}/Head.png`;
                     break;
                 case lenght - 1:
-                    img.src = `./assets/Snakes/${color}/End.png`;
+                    img.src = `./assets/Snakes/${assetColor}/End.png`;
                     break;
                 default:
-                    img.src = `./assets/Snakes/${color}/Straight.png`;
+                    img.src = `./assets/Snakes/${assetColor}/Straight.png`;
                     break;
             }
             img.style.transform = "rotate(270deg)";