Update static/scripts.js

static/scripts.js

@@ -3,23 +3,28 @@ const canvas = document.getElementById('gameCanvas');
 const ctx = canvas.getContext('2d');
 const tileSize = 32;
 
-// Preload images
-const images = {
-    'w': new Image(), 'f': new Image(), 'player': new Image(),
-    'goblin': new Image(), 'potion': new Image(), 'sword': new Image()
+// 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)
 };
-images['w'].src = '/static/wall.png';
-images['f'].src = '/static/floor.png';
-images['player'].src = '/static/player.png';
-images['goblin'].src = '/static/goblin.png';
-images['potion'].src = '/static/potion.png';
-images['sword'].src = '/static/sword.png';
 
 socket.on('update_game', (state) => {
     drawGame(state);
     document.getElementById('health').textContent = state.health;
     document.getElementById('attack').textContent = state.attack;
     document.getElementById('inventory').textContent = state.inventory.join(', ');
+    document.getElementById('level').textContent = state.level;
     document.getElementById('usePotion').disabled = !state.inventory.includes('potion');
     if (state.health <= 0) {
         alert('Game Over! Refresh to restart.');
@@ -34,17 +39,19 @@ socket.on('message', (msg) => {
 
 function drawGame(state) {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    // Draw terrain
+    // 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++) {
-            ctx.drawImage(images[state.terrain[y][x]], x * tileSize, y * tileSize);
+            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);
         }
     }
-    // Draw entities
+    // 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] && images[state.entities[y][x]]) {
-                ctx.drawImage(images[state.entities[y][x]], x * tileSize, y * tileSize);
+            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);
             }
         }
     }
@@ -59,4 +66,9 @@ document.addEventListener('keydown', (e) => {
 
 document.getElementById('usePotion').addEventListener('click', () => {
     socket.emit('use_item', 'potion');
-});
+});
+
+// Ensure sprite sheet is loaded before drawing
+spriteSheet.onload = () => {
+    console.log('Sprite sheet loaded');
+};