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;