Update static/scripts.js

static/scripts.js

@@ -3,21 +3,20 @@ const canvas = document.getElementById('gameCanvas');
 const ctx = canvas.getContext('2d');
 const tileSize = 32;
 
-// Load sprite sheet (assuming the same 96x64 sprite sheet)
-const spriteSheet = new Image();
-spriteSheet.src = '/static/images/spritesheet.png';
-
-// Map entity types to sprite sheet coordinates (x, y)
-const spriteMap = {
-    'w': [0, 0],      // Wall
-    'f': [32, 0],     // Floor
-    'player': [64, 0], // Player
-    'goblin': [0, 32], // Goblin
-    'skeleton': [0, 32], // Reuse goblin sprite for simplicity (update later if needed)
-    'potion': [32, 32], // Potion
-    'sword': [64, 32],  // Sword
-    'door': [64, 32]    // Reuse sword sprite for door (update later)
+// Preload individual images
+const images = {
+    'w': new Image(), 'f': new Image(), 'player': new Image(),
+    'goblin': new Image(), 'skeleton': new Image(), 'potion': new Image(),
+    'sword': new Image(), 'door': new Image()
 };
+images['w'].src = '/static/images/wall.png';
+images['f'].src = '/static/images/floor.png';
+images['player'].src = '/static/images/player.png';
+images['goblin'].src = '/static/images/goblin.png';
+images['skeleton'].src = '/static/images/goblin.png'; // Reuse goblin for skeleton (update if needed)
+images['potion'].src = '/static/images/potion.png';
+images['sword'].src = '/static/images/sword.png';
+images['door'].src = '/static/images/sword.png'; // Reuse sword for door (update if needed)
 
 socket.on('update_game', (state) => {
     drawGame(state);
@@ -42,16 +41,20 @@ function drawGame(state) {
     // Draw visible 10x10 area centered on player
     for (let y = 0; y < state.terrain.length; y++) {
         for (let x = 0; x < state.terrain[y].length; x++) {
-            const [sx, sy] = spriteMap[state.terrain[y][x] || 'f']; // Default to floor if empty
-            ctx.drawImage(spriteSheet, sx, sy, tileSize, tileSize, x * tileSize, y * tileSize, tileSize, tileSize);
+            const img = images[state.terrain[y][x] || 'f']; // Default to floor if empty
+            if (img.complete) {
+                ctx.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize);
+            }
         }
     }
     // Draw entities on top
     for (let y = 0; y < state.entities.length; y++) {
         for (let x = 0; x < state.entities[y].length; x++) {
-            if (state.entities[y][x] && spriteMap[state.entities[y][x]]) {
-                const [sx, sy] = spriteMap[state.entities[y][x]];
-                ctx.drawImage(spriteSheet, sx, sy, tileSize, tileSize, x * tileSize, y * tileSize, tileSize, tileSize);
+            if (state.entities[y][x] && images[state.entities[y][x]]) {
+                const img = images[state.entities[y][x]];
+                if (img.complete) {
+                    ctx.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize);
+                }
             }
         }
     }
@@ -68,7 +71,17 @@ document.getElementById('usePotion').addEventListener('click', () => {
     socket.emit('use_item', 'potion');
 });
 
-// Ensure sprite sheet is loaded before drawing
-spriteSheet.onload = () => {
-    console.log('Sprite sheet loaded');
-};
+// Ensure all images are loaded before drawing
+let imagesLoaded = 0;
+const totalImages = Object.keys(images).length;
+for (let key in images) {
+    images[key].onload = () => {
+        imagesLoaded++;
+        if (imagesLoaded === totalImages) {
+            console.log('All images loaded');
+        }
+    };
+    images[key].onerror = () => {
+        console.error(`Failed to load image: ${images[key].src}`);
+    };
+}