Update static/scripts.js

static/scripts.js

@@ -24,6 +24,8 @@ images['potion'].src = '/static/potion.png';
 images['sword'].src = '/static/sword.png';
 images['door'].src = '/static/door.png';
 
+
+
 let allImagesLoaded = false;
 let imagesLoaded = 0;
 const totalImages = Object.keys(images).length;
@@ -58,21 +60,30 @@ socket.on('message', (msg) => {
 });
 
 function drawGame(state) {
+    console.log('Drawing game with state:', state); // Log the entire state
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     for (let y = 0; y < state.terrain.length; y++) {
         for (let x = 0; x < state.terrain[y].length; x++) {
-            const img = images[state.terrain[y][x] || 'f'];
+            const terrainType = state.terrain[y][x] || 'f';
+            console.log(`Terrain at (${x},${y}): ${terrainType}`);
+            const img = images[terrainType];
             if (img && img.complete) {
                 ctx.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize);
+            } else {
+                console.warn(`Image not ready for ${terrainType}`);
             }
         }
     }
     for (let y = 0; y < state.entities.length; y++) {
         for (let x = 0; x < state.entities[y].length; x++) {
-            if (state.entities[y][x] && images[state.entities[y][x]]) {
-                const img = images[state.entities[y][x]];
+            const entityType = state.entities[y][x];
+            if (entityType) {
+                console.log(`Entity at (${x},${y}): ${entityType}`);
+                const img = images[entityType];
                 if (img && img.complete) {
                     ctx.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize);
+                } else {
+                    console.warn(`Image not ready for ${entityType}`);
                 }
             }
         }