Update static/scripts.js

static/scripts.js

@@ -1,54 +1,24 @@
 const socket = io("https://broadfield-dev-dungeon-game.hf.space", {
-    transports: ['websocket'] // Force WebSocket for reliability
+    transports: ['websocket'] // Force WebSocket transport
 });
 
-socket.on('connect', () => console.log('Connected to the server!'));
-socket.on('connect_error', (error) => console.error('Connection error:', error));
-socket.on('disconnect', () => console.log('Disconnected from the server.'));
-
-const canvas = document.getElementById('gameCanvas');
-const ctx = canvas.getContext('2d');
-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/goblin.png';
-images['potion'].src = '/static/potion.png';
-images['sword'].src = '/static/sword.png';
-images['door'].src = '/static/door.png';
-
+socket.on('connect', () => {
+    console.log('Connected to the server! Socket ID:', socket.id);
+});
 
+socket.on('connect_error', (error) => {
+    console.error('Connection error:', error);
+});
 
-let allImagesLoaded = false;
-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');
-            allImagesLoaded = true;
-            if (window.currentState) drawGame(window.currentState);
-        }
-    };
-    images[key].onerror = () => console.error(`Failed to load image: ${images[key].src}`);
-}
+socket.on('disconnect', (reason) => {
+    console.log('Disconnected from the server. Reason:', reason);
+});
 
 socket.on('update_game', (state) => {
     console.log('Received game state:', state);
     window.currentState = state;
     if (allImagesLoaded) drawGame(state);
     else console.log('Waiting for images to load...');
-    window.currentState = state;
-    if (allImagesLoaded) drawGame(state);
-    else console.log('Waiting for images to load...');
     document.getElementById('health').textContent = state.health;
     document.getElementById('attack').textContent = state.attack;
     document.getElementById('inventory').textContent = state.inventory.join(', ');
@@ -58,47 +28,8 @@ socket.on('update_game', (state) => {
 });
 
 socket.on('message', (msg) => {
+    console.log('Received message:', msg); // Log messages to ensure they’re working
     const messagesDiv = document.getElementById('messages');
     messagesDiv.innerHTML += `<p>${msg}</p>`;
     messagesDiv.scrollTop = messagesDiv.scrollHeight;
-});
-
-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 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++) {
-            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}`);
-                }
-            }
-        }
-    }
-}
-
-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');
 });