fix: correct collision message and improve asset loading

- Fix typo in collision message from "Ihr seit koolidiert!" to "Es gab eine Kollision!"
- Reorder TODO comment in endGame method
- Rename "Früchte" folder to "Fruits" for consistency
- Add TileLoader class to preload and cache game assets
- Refactor Overlay class to use TileLoader for improved image handling

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

@@ -1,11 +1,14 @@
+import TileLoader from "./TileLoader.js";
+
 class Overlay{
-    constructor(src = null, deg = 0){
-        this.src = src;
+    /** @param {TileLoader} tileLoader */
+    constructor(tileLoader, imgSrc = null, deg = 0){
+        this.tileLoader = tileLoader;
         this.deg = deg;
+        this.src = imgSrc;
 
         if(!this.src) return;
-        this.image = new Image();
-        this.image.src = src;
+        this.image = this.tileLoader.tileMap.get(this.src);
     }
 }
 

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

@@ -56,9 +56,9 @@ class Playground{
                 // Falls overlay vorhanden darauf rendern
                 const overlay = this.overlays[y][x];
                 if(!overlay.src) continue;
-                this.ctx.save();
-
+                
                 // Rotation anwenden | Bisschen Komplexes Mathe Funzt :)
+                this.ctx.save();
                 const centerX = posX + this.tileSize / 2;
                 const centerY = posY + this.tileSize / 2;
                 this.ctx.translate(centerX, centerY);
@@ -74,6 +74,7 @@ class Playground{
         this.overlays.forEach(row => {
             row.forEach(overlay => {
                 overlay.src = null;
+                overlay.image = null;
                 overlay.deg = 0;
             })
         })

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

@@ -0,0 +1,26 @@
+class TileLoader{
+    constructor(){
+        this.allSrc = [
+            "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",
+        ];
+
+        this.tileMap = new Map();
+
+        this.allSrc.forEach(src => {
+            const img = new Image();
+            img.src = `./assets/${src}`;
+            this.tileMap.set(src, img);
+        })
+    }
+}
+
+export default TileLoader;

frontend/game/scripts/Game/Loop.js

@@ -1,4 +1,5 @@
 import Overlay from "./Elements/Overlay.js";
+import TileLoader from "./Elements/TileLoader.js";
 import Game from "./Game.js"
 
 class Loop{
@@ -6,6 +7,7 @@ class Loop{
     constructor(socket, game){
         this.socket = socket;
         this.game = game;
+        this.tileLoader = new TileLoader();
 
         this.socket.on("loop", (data) => { this.loop(data) });
     }
@@ -14,13 +16,14 @@ class Loop{
         this.game.playGround.resetOverlay();
         const tiles = data.playground.tiles;
 
-        // Spielfeld Zeichenen TODO: Image Laden Bug Fixen
+        // Spielfeld Zeichenen
         tiles.forEach((row, x) => {
             row.forEach((tile, y) => {
                 if(!tile) return;
                 if(tile.class === "Snake"){
                     const overlay = new Overlay(
-                        `./assets/Snakes/${tile.color}/${tile.type}.png`,
+                        this.tileLoader,
+                        `Snakes/${tile.color}/${tile.type}.png`,
                         tile.deg
                     )
 
@@ -28,7 +31,8 @@ class Loop{
                 }
                 else if(tile.class === "Fruit"){
                     const overlay = new Overlay(
-                        `./assets/Früchte/${tile.type}.png`
+                        this.tileLoader,
+                        `Fruits/${tile.type}.png`
                     )
 
                     this.game.playGround.setOverlay(x, y, overlay);