Update app.py

app.py

@@ -1,209 +1,554 @@
 import gradio as gr
-import random
 import numpy as np
-from PIL import Image, ImageDraw, ImageFont
-import os
+import time
+from PIL import Image, ImageDraw
+import random
+import json
+import base64
 
-class SnakeAndLadderGame:
+class SpaceShooterGame:
     def __init__(self):
-        # Board size
-        self.board_size = 10
-        self.total_cells = self.board_size * self.board_size
-        
-        # Initialize snakes and ladders
-        self.snakes = {
-            16: 6,
-            47: 26,
-            49: 11,
-            56: 53,
-            62: 19,
-            64: 60,
-            87: 24,
-            93: 73,
-            95: 75,
-            98: 78
-        }
+        # Canvas dimensions
+        self.width = 480
+        self.height = 640
         
-        self.ladders = {
-            1: 38,
-            4: 14,
-            9: 31,
-            21: 42,
-            28: 84,
-            36: 44,
-            51: 67,
-            71: 91,
-            80: 100
+        # Game state
+        self.score = 0
+        self.lives = 3
+        self.game_over = False
+        self.game_started = False
+        self.last_update = time.time()
+        
+        # Player
+        self.player = {
+            'x': self.width / 2,
+            'y': self.height - 60,
+            'width': 40,
+            'height': 40,
+            'speed': 5,
+            'color': '#3498db',
+            'is_moving_left': False,
+            'is_moving_right': False,
+            'is_moving_up': False,
+            'is_moving_down': False,
+            'is_shooting': False,
+            'last_shot': 0,
+            'shoot_cooldown': 300  # milliseconds
         }
         
-        # Player positions
-        self.player_positions = [0, 0]  # Two players starting at position 0
-        self.current_player = 0
-        self.game_over = False
-        self.winner = None
-        self.last_move = ""
+        # Game elements
+        self.enemies = []
+        self.bullets = []
+        self.stars = []
+        self.particles = []
         
-    def roll_dice(self):
-        return random.randint(1, 6)
+        # Timers
+        self.last_enemy_spawn = 0
+        self.enemy_spawn_rate = 1500  # milliseconds
+        self.last_star_spawn = 0
+        self.star_spawn_rate = 200  # milliseconds
+        
+        # Initialize stars
+        self.init_stars()
+    
+    def init_stars(self):
+        for _ in range(50):
+            self.stars.append({
+                'x': random.random() * self.width,
+                'y': random.random() * self.height,
+                'size': random.random() * 2 + 1,
+                'speed': random.random() * 2 + 1
+            })
+    
+    def update_stars(self, timestamp):
+        # Move existing stars
+        for i in range(len(self.stars) - 1, -1, -1):
+            self.stars[i]['y'] += self.stars[i]['speed']
+            
+            # Remove stars that go off screen
+            if self.stars[i]['y'] > self.height:
+                self.stars.pop(i)
+        
+        # Add new stars occasionally
+        if timestamp - self.last_star_spawn > self.star_spawn_rate:
+            self.stars.append({
+                'x': random.random() * self.width,
+                'y': 0,
+                'size': random.random() * 2 + 1,
+                'speed': random.random() * 2 + 1
+            })
+            self.last_star_spawn = timestamp
+    
+    def shoot(self, timestamp):
+        if self.player['is_shooting'] and timestamp - self.player['last_shot'] > self.player['shoot_cooldown']:
+            self.bullets.append({
+                'x': self.player['x'],
+                'y': self.player['y'] - self.player['height'] / 2,
+                'width': 4,
+                'height': 15,
+                'speed': 10,
+                'color': '#ffff00'
+            })
+            self.player['last_shot'] = timestamp
     
-    def move_player(self, player_idx, steps):
+    def update_bullets(self):
+        for i in range(len(self.bullets) - 1, -1, -1):
+            self.bullets[i]['y'] -= self.bullets[i]['speed']
+            
+            # Remove bullets that go off screen
+            if self.bullets[i]['y'] < 0:
+                self.bullets.pop(i)
+    
+    def spawn_enemies(self, timestamp):
+        if timestamp - self.last_enemy_spawn > self.enemy_spawn_rate:
+            size = random.random() * 20 + 20
+            self.enemies.append({
+                'x': random.random() * (self.width - size) + size / 2,
+                'y': 0,
+                'width': size,
+                'height': size,
+                'speed': random.random() * 2 + 1,
+                'color': f'hsl({random.random() * 360}, 100%, 50%)'
+            })
+            self.last_enemy_spawn = timestamp
+            
+            # Increase difficulty over time
+            if self.enemy_spawn_rate > 500:
+                self.enemy_spawn_rate -= 10
+    
+    def update_enemies(self):
+        for i in range(len(self.enemies) - 1, -1, -1):
+            self.enemies[i]['y'] += self.enemies[i]['speed']
+            
+            # Game over if enemy reaches bottom
+            if self.enemies[i]['y'] > self.height:
+                self.enemies.pop(i)
+                self.lives -= 1
+                
+                if self.lives <= 0:
+                    self.game_over = True
+    
+    def create_explosion(self, x, y, color):
+        particle_count = 15
+        for _ in range(particle_count):
+            angle = random.random() * 3.14159 * 2
+            speed = random.random() * 3 + 1
+            self.particles.append({
+                'x': x,
+                'y': y,
+                'vx': np.cos(angle) * speed,
+                'vy': np.sin(angle) * speed,
+                'radius': random.random() * 3 + 1,
+                'color': color,
+                'life': 30  # frames
+            })
+    
+    def update_particles(self):
+        for i in range(len(self.particles) - 1, -1, -1):
+            self.particles[i]['x'] += self.particles[i]['vx']
+            self.particles[i]['y'] += self.particles[i]['vy']
+            self.particles[i]['life'] -= 1
+            
+            if self.particles[i]['life'] <= 0:
+                self.particles.pop(i)
+    
+    def check_collisions(self):
+        # Check bullet-enemy collisions
+        for i in range(len(self.bullets) - 1, -1, -1):
+            bullet_removed = False
+            for j in range(len(self.enemies) - 1, -1, -1):
+                if (
+                    self.bullets[i]['x'] < self.enemies[j]['x'] + self.enemies[j]['width'] / 2 and
+                    self.bullets[i]['x'] + self.bullets[i]['width'] > self.enemies[j]['x'] - self.enemies[j]['width'] / 2 and
+                    self.bullets[i]['y'] < self.enemies[j]['y'] + self.enemies[j]['height'] / 2 and
+                    self.bullets[i]['y'] + self.bullets[i]['height'] > self.enemies[j]['y'] - self.enemies[j]['height'] / 2
+                ):
+                    # Collision detected
+                    self.create_explosion(self.enemies[j]['x'], self.enemies[j]['y'], self.enemies[j]['color'])
+                    self.score += int(self.enemies[j]['width'])
+                    
+                    # Remove the bullet and enemy
+                    if not bullet_removed:
+                        self.bullets.pop(i)
+                        bullet_removed = True
+                    self.enemies.pop(j)
+                    break
+            
+            if bullet_removed:
+                break
+        
+        # Check player-enemy collisions
+        for i in range(len(self.enemies) - 1, -1, -1):
+            dx = self.player['x'] - self.enemies[i]['x']
+            dy = self.player['y'] - self.enemies[i]['y']
+            distance = np.sqrt(dx * dx + dy * dy)
+            
+            if distance < (self.player['width'] / 2 + self.enemies[i]['width'] / 2):
+                # Collision detected
+                self.create_explosion(self.player['x'], self.player['y'], self.player['color'])
+                self.create_explosion(self.enemies[i]['x'], self.enemies[i]['y'], self.enemies[i]['color'])
+                
+                # Remove the enemy
+                self.enemies.pop(i)
+                
+                # Decrease player lives
+                self.lives -= 1
+                
+                if self.lives <= 0:
+                    self.game_over = True
+                break
+    
+    def update_player(self):
+        # Update player position based on current movement flags
+        if self.player['is_moving_left'] and self.player['x'] > self.player['width'] / 2:
+            self.player['x'] -= self.player['speed']
+        if self.player['is_moving_right'] and self.player['x'] < self.width - self.player['width'] / 2:
+            self.player['x'] += self.player['speed']
+        if self.player['is_moving_up'] and self.player['y'] > self.player['height']:
+            self.player['y'] -= self.player['speed']
+        if self.player['is_moving_down'] and self.player['y'] < self.height - self.player['height'] / 2:
+            self.player['y'] += self.player['speed']
+    
+    def render_frame(self):
+        # Create image
+        img = Image.new('RGB', (self.width, self.height), (17, 17, 17))
+        draw = ImageDraw.Draw(img)
+        
+        # Draw stars
+        for star in self.stars:
+            draw.ellipse(
+                [star['x'] - star['size'], star['y'] - star['size'], 
+                 star['x'] + star['size'], star['y'] + star['size']], 
+                fill='white'
+            )
+        
+        # Draw enemies
+        for enemy in self.enemies:
+            # Draw enemy as a circle
+            draw.ellipse(
+                [enemy['x'] - enemy['width'] / 2, enemy['y'] - enemy['height'] / 2,
+                 enemy['x'] + enemy['width'] / 2, enemy['y'] + enemy['height'] / 2],
+                fill=enemy['color']
+            )
+            
+            # Add details to the enemy
+            draw.ellipse(
+                [enemy['x'] - enemy['width'] / 3, enemy['y'] - enemy['height'] / 3,
+                 enemy['x'] + enemy['width'] / 3, enemy['y'] + enemy['height'] / 3],
+                outline='white'
+            )
+        
+        # Draw bullets
+        for bullet in self.bullets:
+            draw.rectangle(
+                [bullet['x'] - bullet['width'] / 2, bullet['y'],
+                 bullet['x'] + bullet['width'] / 2, bullet['y'] + bullet['height']],
+                fill=bullet['color']
+            )
+        
+        # Draw player ship
+        if not self.game_over:
+            # Ship body (triangle)
+            draw.polygon(
+                [
+                    (self.player['x'], self.player['y'] - self.player['height'] / 2),
+                    (self.player['x'] - self.player['width'] / 2, self.player['y'] + self.player['height'] / 2),
+                    (self.player['x'] + self.player['width'] / 2, self.player['y'] + self.player['height'] / 2)
+                ],
+                fill=self.player['color']
+            )
+            
+            # Engine glow
+            draw.polygon(
+                [
+                    (self.player['x'] - self.player['width'] / 4, self.player['y'] + self.player['height'] / 2),
+                    (self.player['x'], self.player['y'] + self.player['height'] / 2 + 10),
+                    (self.player['x'] + self.player['width'] / 4, self.player['y'] + self.player['height'] / 2)
+                ],
+                fill='#ff9900'
+            )
+        
+        # Draw particles
+        for particle in self.particles:
+            # Calculate alpha based on life
+            alpha = int(255 * (particle['life'] / 30))
+            color = self.hex_to_rgb(particle['color'])
+            particle_color = (color[0], color[1], color[2], alpha)
+            
+            draw.ellipse(
+                [particle['x'] - particle['radius'], particle['y'] - particle['radius'],
+                 particle['x'] + particle['radius'], particle['y'] + particle['radius']],
+                fill=particle['color']
+            )
+        
+        # Draw UI
+        draw.text((10, 10), f"Score: {self.score}", fill='white')
+        draw.text((self.width - 70, 10), f"Lives: {self.lives}", fill='white')
+        
+        # Draw game over screen
         if self.game_over:
-            return f"Game over! Player {self.winner + 1} has won!"
+            # Semi-transparent background
+            overlay = Image.new('RGBA', (self.width, self.height), (0, 0, 0, 180))
+            img = Image.alpha_composite(img.convert('RGBA'), overlay)
+            draw = ImageDraw.Draw(img)
+            
+            # Game over text
+            draw.text((self.width // 2 - 40, self.height // 2 - 30), "GAME OVER", fill='red')
+            draw.text((self.width // 2 - 50, self.height // 2), f"Final Score: {self.score}", fill='white')
+            draw.text((self.width // 2 - 65, self.height // 2 + 30), "Click to play again", fill='white')
+        
+        # Draw start screen
+        if not self.game_started and not self.game_over:
+            # Semi-transparent background
+            overlay = Image.new('RGBA', (self.width, self.height), (0, 0, 0, 180))
+            img = Image.alpha_composite(img.convert('RGBA'), overlay)
+            draw = ImageDraw.Draw(img)
+            
+            # Start game text
+            draw.text((self.width // 2 - 60, self.height // 2 - 50), "SPACE SHOOTER", fill='#ff5555')
+            draw.text((self.width // 2 - 90, self.height // 2 - 20), "Use arrow keys to move", fill='white')
+            draw.text((self.width // 2 - 85, self.height // 2), "Click mouse to shoot", fill='white')
+            draw.text((self.width // 2 - 55, self.height // 2 + 30), "Click to start", fill='white')
         
-        old_position = self.player_positions[player_idx]
-        new_position = old_position + steps
+        return img
+    
+    def update(self):
+        if not self.game_started or self.game_over:
+            return self.render_frame()
         
-        # Check if the player won
-        if new_position >= 100:
-            self.player_positions[player_idx] = 100
-            self.game_over = True
-            self.winner = player_idx
-            return f"Player {player_idx + 1} has won the game!"
+        current_time = time.time() * 1000  # Convert to milliseconds
         
-        # Check if the player landed on a snake
-        elif new_position in self.snakes:
-            self.player_positions[player_idx] = self.snakes[new_position]
-            return f"Player {player_idx + 1} got bitten by a snake and moved from {new_position} to {self.snakes[new_position]}"
+        # Calculate delta time
+        delta_time = current_time - self.last_update
+        self.last_update = current_time
         
-        # Check if the player landed on a ladder
-        elif new_position in self.ladders:
-            self.player_positions[player_idx] = self.ladders[new_position]
-            return f"Player {player_idx + 1} climbed a ladder and moved from {new_position} to {self.ladders[new_position]}"
+        # Update game state
+        self.update_stars(current_time)
+        self.spawn_enemies(current_time)
+        self.update_enemies()
+        self.update_player()
+        self.shoot(current_time)
+        self.update_bullets()
+        self.update_particles()
+        self.check_collisions()
         
-        else:
-            self.player_positions[player_idx] = new_position
-            return f"Player {player_idx + 1} moved from {old_position} to {new_position}"
+        return self.render_frame()
     
-    def play_turn(self):
+    def handle_click(self, evt: gr.SelectData):
+        # Start game if not started
+        if not self.game_started:
+            self.game_started = True
+            return self.update()
+        
+        # Restart game if game over
         if self.game_over:
-            return self.draw_board(), f"Game over! Player {self.winner + 1} has won!"
+            self.reset_game()
+            return self.update()
         
-        dice_roll = self.roll_dice()
-        move_message = self.move_player(self.current_player, dice_roll)
+        # Handle shooting on left click
+        if evt.index == 1:  # Left click
+            self.player['is_shooting'] = True
+            self.shoot(time.time() * 1000)
+            self.player['is_shooting'] = False
         
-        # Switch to the next player
-        self.current_player = (self.current_player + 1) % 2
+        return self.update()
+    
+    def handle_keypress(self, key):
+        if not self.game_started or self.game_over:
+            self.game_started = True
+            if self.game_over:
+                self.reset_game()
+            return self.update()
         
-        status = f"Dice: {dice_roll}. {move_message}"
-        if not self.game_over:
-            status += f"\nPlayer {self.current_player + 1}'s turn next."
+        # Handle arrow key movement
+        if key == "ArrowLeft":
+            self.player['is_moving_left'] = True
+        elif key == "ArrowRight":
+            self.player['is_moving_right'] = True
+        elif key == "ArrowUp":
+            self.player['is_moving_up'] = True
+        elif key == "ArrowDown":
+            self.player['is_moving_down'] = True
+        elif key == "a":
+            self.player['is_moving_left'] = True
+        elif key == "d":
+            self.player['is_moving_right'] = True
+        elif key == "w":
+            self.player['is_moving_up'] = True
+        elif key == "s":
+            self.player['is_moving_down'] = True
+        elif key == " ":
+            self.player['is_shooting'] = True
         
-        return self.draw_board(), status
+        return self.update()
     
-    def draw_board(self):
-        # Create a new image
-        cell_size = 60
-        board_width = self.board_size * cell_size
-        board_height = self.board_size * cell_size
-        padding = 20
+    def handle_keyrelease(self, key):
+        if key == "ArrowLeft":
+            self.player['is_moving_left'] = False
+        elif key == "ArrowRight":
+            self.player['is_moving_right'] = False
+        elif key == "ArrowUp":
+            self.player['is_moving_up'] = False
+        elif key == "ArrowDown":
+            self.player['is_moving_down'] = False
+        elif key == "a":
+            self.player['is_moving_left'] = False
+        elif key == "d":
+            self.player['is_moving_right'] = False
+        elif key == "w":
+            self.player['is_moving_up'] = False
+        elif key == "s":
+            self.player['is_moving_down'] = False
+        elif key == " ":
+            self.player['is_shooting'] = False
         
-        img = Image.new('RGB', (board_width + 2*padding, board_height + 2*padding), color=(255, 255, 255))
-        draw = ImageDraw.Draw(img)
+        return self.update()
+    
+    def handle_mouse_move(self, evt: gr.SelectData):
+        # Update player position based on mouse position if game is running
+        if self.game_started and not self.game_over:
+            x_coordinates = evt.index[0] if isinstance(evt.index, tuple) else evt.index
+            self.player['x'] = max(self.player['width'] / 2, min(x_coordinates, self.width - self.player['width'] / 2))
         
-        try:
-            font = ImageFont.truetype("arial.ttf", 16)
-        except IOError:
-            font = ImageFont.load_default()
-        
-        # Draw board grid
-        for row in range(self.board_size):
-            for col in range(self.board_size):
-                # Determine cell number based on row (0-9 from bottom to top)
-                if row % 2 == 0:  # Even rows (0, 2, 4, 6, 8) go left to right
-                    cell_num = (self.board_size - 1 - row) * self.board_size + col + 1
-                else:  # Odd rows (1, 3, 5, 7, 9) go right to left
-                    cell_num = (self.board_size - 1 - row) * self.board_size + (self.board_size - col)
-                
-                # Cell position
-                x0 = col * cell_size + padding
-                y0 = (self.board_size - 1 - row) * cell_size + padding
-                x1 = x0 + cell_size
-                y1 = y0 + cell_size
-                
-                # Alternate cell colors for better visualization
-                cell_color = (220, 220, 220) if (row + col) % 2 == 0 else (240, 240, 240)
-                
-                # Highlight snake cells
-                if cell_num in self.snakes:
-                    cell_color = (255, 200, 200)  # Light red for snakes
-                
-                # Highlight ladder cells
-                if cell_num in self.ladders:
-                    cell_color = (200, 255, 200)  # Light green for ladders
-                
-                draw.rectangle([x0, y0, x1, y1], fill=cell_color, outline=(0, 0, 0))
-                
-                # Draw cell number
-                draw.text((x0 + 5, y0 + 5), str(cell_num), fill=(0, 0, 0), font=font)
-                
-                # Mark snakes
-                if cell_num in self.snakes:
-                    draw.text((x0 + 5, y0 + 25), f"S→{self.snakes[cell_num]}", fill=(255, 0, 0), font=font)
-                
-                # Mark ladders
-                if cell_num in self.ladders:
-                    draw.text((x0 + 5, y0 + 25), f"L→{self.ladders[cell_num]}", fill=(0, 128, 0), font=font)
-        
-        # Draw player positions
-        player_colors = [(0, 0, 255), (255, 0, 0)]  # Blue for Player 1, Red for Player 2
-        for idx, pos in enumerate(self.player_positions):
-            if pos > 0:
-                # Find the cell position for the player
-                row = (self.board_size - 1) - ((pos - 1) // self.board_size)
-                if row % 2 == 0:  # Even rows go left to right
-                    col = (pos - 1) % self.board_size
-                else:  # Odd rows go right to left
-                    col = self.board_size - 1 - ((pos - 1) % self.board_size)
-                
-                # Draw player token
-                player_x = col * cell_size + padding + (cell_size // 2) + (idx * 10 - 5)
-                player_y = (self.board_size - 1 - row) * cell_size + padding + (cell_size // 2) + 10
-                
-                draw.ellipse([player_x - 10, player_y - 10, player_x + 10, player_y + 10], 
-                             fill=player_colors[idx], outline=(0, 0, 0))
-                draw.text((player_x - 4, player_y - 8), str(idx + 1), fill=(255, 255, 255), font=font)
+        return self.update()
+    
+    def reset_game(self):
+        # Reset game state
+        self.score = 0
+        self.lives = 3
+        self.game_over = False
+        self.game_started = True
+        self.enemies = []
+        self.bullets = []
+        self.particles = []
+        self.last_enemy_spawn = 0
+        self.enemy_spawn_rate = 1500
         
-        return img
+        # Reset player position
+        self.player['x'] = self.width / 2
+        self.player['y'] = self.height - 60
+        
+        self.last_update = time.time() * 1000
+    
+    def hex_to_rgb(self, hex_color):
+        hex_color = hex_color.lstrip('#')
+        if len(hex_color) == 6:
+            return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
+        else:
+            # Handle HSL colors by converting to a default color
+            return (255, 0, 0)  # Return red by default
+
+# Create game instance
+game = SpaceShooterGame()
+
+def update_frame():
+    return game.update()
 
-def reset_game():
-    global game
-    game = SnakeAndLadderGame()
-    return game.draw_board(), "Game reset. Player 1's turn to roll the dice."
+def handle_click(img, evt: gr.SelectData):
+    return game.handle_click(evt)
 
-def take_turn():
-    global game
-    return game.play_turn()
+def handle_keypress(key):
+    return game.handle_keypress(key)
 
-# Initialize game
-game = SnakeAndLadderGame()
+def handle_keyrelease(key):
+    return game.handle_keyrelease(key)
 
-# Create Gradio interface
-with gr.Blocks(title="Snake and Ladder Game") as demo:
-    gr.Markdown("# Snake and Ladder Game")
-    gr.Markdown("Roll the dice and make your way to 100 while avoiding snakes and climbing ladders!")
+def handle_mouse_move(img, evt: gr.SelectData):
+    return game.handle_mouse_move(evt)
+
+# Set up Gradio interface
+with gr.Blocks() as demo:
+    gr.Markdown("# Space Shooter Game")
+    gr.Markdown("Use arrow keys (or WASD) to move. Left click to shoot.")
+    
+    with gr.Row():
+        game_display = gr.Image(game.render_frame(), elem_id="game-canvas")
     
     with gr.Row():
-        with gr.Column(scale=2):
-            board_display = gr.Image(game.draw_board(), label="Game Board")
+        gr.Markdown("### Controls:")
+        gr.Markdown("- **Arrow Keys or WASD**: Move ship")
+        gr.Markdown("- **Left Click**: Shoot")
+        gr.Markdown("- **Click on Game**: Start/Restart")
+    
+    # Handle events
+    game_display.select(handle_click, [game_display], [game_display])
+    
+    # Game loop using Gradio's JavaScript event system
+    demo.load(update_frame, [], [game_display], every=0.1)
+    
+    # Handle keyboard events
+    demo.queue()
+    
+    # Handle keyboard inputs via JavaScript events
+    js_keyboard = """
+    function setupKeyboardHandlers() {
+        const gameCanvas = document.getElementById('game-canvas');
+        if (!gameCanvas) {
+            setTimeout(setupKeyboardHandlers, 100);
+            return;
+        }
         
-        with gr.Column(scale=1):
-            status_text = gr.Textbox(value="Welcome to Snake and Ladder Game! Player 1's turn to roll the dice.", 
-                                    label="Game Status", lines=5)
+        document.addEventListener('keydown', function(e) {
+            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'a', 'd', 'w', 's', ' '].includes(e.key)) {
+                e.preventDefault();
+                keyPressEvent(e.key);
+            }
+        });
+        
+        document.addEventListener('keyup', function(e) {
+            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'a', 'd', 'w', 's', ' '].includes(e.key)) {
+                e.preventDefault();
+                keyReleaseEvent(e.key);
+            }
+        });
+        
+        // Add mousemove handler with debouncing for better performance
+        let lastMove = 0;
+        gameCanvas.addEventListener('mousemove', function(e) {
+            const now = Date.now();
+            if (now - lastMove < 50) return; // Only process every 50ms
+            lastMove = now;
             
-            roll_button = gr.Button("Roll Dice")
-            reset_button = gr.Button("Reset Game")
-    
-    gr.Markdown("### Game Rules:")
-    gr.Markdown("""
-    1. Two players take turns rolling a dice.
-    2. Move your token according to the dice roll.
-    3. If you land on a snake's head, you'll slide down to its tail.
-    4. If you land on the bottom of a ladder, you'll climb up to the top.
-    5. The first player to reach or exceed position 100 wins!
-    """)
+            const rect = gameCanvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            
+            // Only update if mouse is over the canvas
+            if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
+                // Scale coordinates to match game dimensions
+                const scaleX = 480 / rect.width;
+                const scaledX = x * scaleX;
+                
+                mouseMove([scaledX, 0]);
+            }
+        });
+    }
+    
+    // Set up the event handlers once the page loads
+    setTimeout(setupKeyboardHandlers, 100);
+    """
     
-    roll_button.click(take_turn, inputs=[], outputs=[board_display, status_text])
-    reset_button.click(reset_game, inputs=[], outputs=[board_display, status_text])
+    demo.load(None, [], [], _js=js_keyboard)
+
+    # Add events for keyboard handling
+    keypress_event = demo.input(fn=handle_keypress, inputs=[], outputs=[game_display])
+    keyrelease_event = demo.input(fn=handle_keyrelease, inputs=[], outputs=[game_display])
+    mousemove_event = demo.input(fn=handle_mouse_move, inputs=[game_display], outputs=[game_display])
+    
+    # Connect JavaScript events to Python functions
+    demo.after_setup(_js=f"""
+    function keyPressEvent(key) {{
+        {keypress_event.name}(key);
+    }}
+    
+    function keyReleaseEvent(key) {{
+        {keyrelease_event.name}(key);
+    }}
+    
+    function mouseMove(coords) {{
+        {mousemove_event.name}(null, coords);
+    }}
+    """)
 
 # Launch the app
 if __name__ == "__main__":