Fix snake asset case handling

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 = [];

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 => {

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,6 +55,7 @@ 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");
@@ -57,13 +63,13 @@ class UIManager{
             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)";