Update static/scripts.js

static/scripts.js

@@ -1,5 +1,8 @@
 const socket = io("https://broadfield-dev-dungeon-game.hf.space", {
-    transports: ['websocket'] // Force WebSocket transport
+    transports: ['websocket', 'polling'], // Try both WebSocket and polling
+    reconnection: true,
+    reconnectionAttempts: 5,
+    reconnectionDelay: 1000
 });
 
 socket.on('connect', () => {
@@ -7,7 +10,23 @@ socket.on('connect', () => {
 });
 
 socket.on('connect_error', (error) => {
-    console.error('Connection error:', error);
+    console.error('Connection error:', error.message || error);
+});
+
+socket.on('connect_timeout', (timeout) => {
+    console.error('Connection timeout after', timeout, 'ms');
+});
+
+socket.on('reconnect_attempt', (attempt) => {
+    console.log('Reconnection attempt #', attempt);
+});
+
+socket.on('reconnect_error', (error) => {
+    console.error('Reconnection error:', error.message || error);
+});
+
+socket.on('reconnect_failed', () => {
+    console.error('Reconnection failed after all attempts');
 });
 
 socket.on('disconnect', (reason) => {
@@ -28,8 +47,98 @@ socket.on('update_game', (state) => {
 });
 
 socket.on('message', (msg) => {
-    console.log('Received message:', msg); // Log messages to ensure they’re working
+    console.log('Received message:', msg);
     const messagesDiv = document.getElementById('messages');
     messagesDiv.innerHTML += `<p>${msg}</p>`;
     messagesDiv.scrollTop = messagesDiv.scrollHeight;
+});
+
+const canvas = document.getElementById('gameCanvas');
+console.log('Canvas:', canvas);
+if (!canvas) console.error('Canvas element not found');
+const ctx = canvas.getContext('2d');
+console.log('Context:', ctx);
+if (!ctx) console.error('Canvas context not available');
+const tileSize = 32;
+
+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/wall.png';
+images['f'].src = '/static/floor.png';
+images['player'].src = '/static/player.png';
+images['goblin'].src = '/static/goblin.png';
+images['skeleton'].src = '/static/skeleton.png';
+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;
+for (let key in images) {
+    images[key].onload = () => {
+        imagesLoaded++;
+        console.log(`Loaded image: ${images[key].src}`);
+        if (imagesLoaded === totalImages) {
+            console.log('All images loaded');
+            allImagesLoaded = true;
+            if (window.currentState) drawGame(window.currentState);
+        }
+    };
+    images[key].onerror = () => {
+        console.error(`Failed to load image: ${images[key].src}`);
+    };
+    console.log(`Attempting to load: ${images[key].src}`);
+}
+
+function drawGame(state) {
+    console.log('Drawing game with state:', state);
+    ctx.fillStyle = 'red'; // Test with a red background
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    if (!state.terrain || !state.entities) {
+        console.warn('State missing terrain or entities:', state);
+        return;
+    }
+    for (let y = 0; y < state.terrain.length; y++) {
+        for (let x = 0; x < state.terrain[y].length; x++) {
+            const terrainType = state.terrain[y][x] || 'f';
+            console.log(`Terrain at (${x},${y}): ${terrainType}`);
+            const img = images[terrainType];
+            if (img && img.complete) {
+                console.log(`Drawing ${terrainType} at (${x},${y})`);
+                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++) {
+            const entityType = state.entities[y][x];
+            if (entityType) {
+                console.log(`Entity at (${x},${y}): ${entityType}`);
+                const img = images[entityType];
+                if (img && img.complete) {
+                    console.log(`Drawing ${entityType} at (${x},${y})`);
+                    ctx.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize);
+                } else {
+                    console.warn(`Image not ready for ${entityType}`);
+                }
+            }
+        }
+    }
+}
+
+document.addEventListener('keydown', (e) => {
+    const directions = { 'ArrowUp': 'up', 'ArrowDown': 'down', 'ArrowLeft': 'left', 'ArrowRight': 'right' };
+    if (directions[e.key]) {
+        socket.emit('move', directions[e.key]);
+    }
+});
+
+document.getElementById('usePotion').addEventListener('click', () => {
+    socket.emit('use_item', 'potion');
 });