Update app.py

app.py

@@ -2,554 +2,164 @@ import gradio as gr
 import numpy as np
 import time
 from PIL import Image, ImageDraw
-import random
-import json
+import io
 import base64
 
-class SpaceShooterGame:
+# Game state class
+class SpaceShooter:
     def __init__(self):
-        # Canvas dimensions
         self.width = 480
         self.height = 640
-        
-        # 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
+            "x": self.width / 2,
+            "y": self.height - 60,
+            "width": 40,
+            "height": 40,
+            "speed": 5
         }
         
-        # Game elements
-        self.enemies = []
         self.bullets = []
-        self.stars = []
-        self.particles = []
-        
-        # 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 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 = []
+        self.last_enemy_spawn = time.time()
+        self.enemy_spawn_rate = 1.5  # seconds
+        self.last_shot = 0
+        self.shoot_cooldown = 0.3  # seconds
+
+    def spawn_enemy(self, current_time):
+        if current_time - self.last_enemy_spawn > self.enemy_spawn_rate:
+            size = np.random.uniform(20, 40)
             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%)'
+                "x": np.random.uniform(size/2, self.width - size/2),
+                "y": 0,
+                "width": size,
+                "height": size,
+                "speed": np.random.uniform(1, 3)
             })
-            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
+            self.last_enemy_spawn = current_time
+
+    def shoot(self, current_time):
+        if current_time - self.last_shot > self.shoot_cooldown:
+            self.bullets.append({
+                "x": self.player["x"],
+                "y": self.player["y"] - self.player["height"]/2,
+                "width": 4,
+                "height": 15,
+                "speed": 10
             })
-    
-    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
+            self.last_shot = current_time
+
+    def update(self):
+        current_time = time.time()
         
-        # 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
+        # Update bullets
+        for bullet in self.bullets[:]:
+            bullet["y"] -= bullet["speed"]
+            if bullet["y"] < 0:
+                self.bullets.remove(bullet)
+
+        # Update enemies
+        for enemy in self.enemies[:]:
+            enemy["y"] += enemy["speed"]
+            if enemy["y"] > self.height:
+                self.enemies.remove(enemy)
                 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):
+
+        # Check collisions
+        for bullet in self.bullets[:]:
+            for enemy in self.enemies[:]:
+                if (bullet["x"] < enemy["x"] + enemy["width"]/2 and
+                    bullet["x"] + bullet["width"] > enemy["x"] - enemy["width"]/2 and
+                    bullet["y"] < enemy["y"] + enemy["height"]/2 and
+                    bullet["y"] + bullet["height"] > enemy["y"] - enemy["height"]/2):
+                    self.bullets.remove(bullet)
+                    self.enemies.remove(enemy)
+                    self.score += int(enemy["width"])
+                    break
+
+        # Spawn new enemies
+        self.spawn_enemy(current_time)
+
+    def draw(self):
         # Create image
-        img = Image.new('RGB', (self.width, self.height), (17, 17, 17))
+        img = Image.new('RGB', (self.width, self.height), color='black')
         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 player
+        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='#3498db')
+
         # 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:
-            # 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')
-        
-        return img
-    
-    def update(self):
-        if not self.game_started or self.game_over:
-            return self.render_frame()
-        
-        current_time = time.time() * 1000  # Convert to milliseconds
-        
-        # Calculate delta time
-        delta_time = current_time - self.last_update
-        self.last_update = current_time
-        
-        # 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()
-        
-        return self.render_frame()
-    
-    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:
-            self.reset_game()
-            return self.update()
-        
-        # 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
-        
-        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()
-        
-        # 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.update()
-    
-    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
-        
-        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))
-        
-        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
-        
-        # 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()
+            draw.rectangle([
+                (bullet["x"] - bullet["width"]/2, bullet["y"]),
+                (bullet["x"] + bullet["width"]/2, bullet["y"] + bullet["height"])
+            ], fill='#ff0')
 
-def update_frame():
-    return game.update()
+        # Draw enemies
+        for enemy in self.enemies:
+            draw.ellipse([
+                (enemy["x"] - enemy["width"]/2, enemy["y"] - enemy["height"]/2),
+                (enemy["x"] + enemy["width"]/2, enemy["y"] + enemy["height"]/2)
+            ], fill='#ff5555')
 
-def handle_click(img, evt: gr.SelectData):
-    return game.handle_click(evt)
+        return img
 
-def handle_keypress(key):
-    return game.handle_keypress(key)
+# Game instance
+game = SpaceShooter()
 
-def handle_keyrelease(key):
-    return game.handle_keyrelease(key)
+def move_player(direction):
+    if game.lives <= 0:
+        return game.draw(), f"Game Over! Score: {game.score}"
+    
+    if direction == "left" and game.player["x"] > game.player["width"]/2:
+        game.player["x"] -= game.player["speed"]
+    elif direction == "right" and game.player["x"] < game.width - game.player["width"]/2:
+        game.player["x"] += game.player["speed"]
+    elif direction == "shoot":
+        game.shoot(time.time())
+    
+    game.update()
+    status = f"Score: {game.score} | Lives: {game.lives}"
+    if game.lives <= 0:
+        status = f"Game Over! Score: {game.score}"
+    
+    return game.draw(), status
 
-def handle_mouse_move(img, evt: gr.SelectData):
-    return game.handle_mouse_move(evt)
+def reset_game():
+    global game
+    game = SpaceShooter()
+    return game.draw(), f"Score: {game.score} | Lives: {game.lives}"
 
-# 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.")
+# Gradio interface
+with gr.Blocks(title="Space Shooter") as demo:
+    gr.Markdown("# Space Shooter")
+    gr.Markdown("Use the buttons to move left, right, and shoot. Game updates after each action.")
     
     with gr.Row():
-        game_display = gr.Image(game.render_frame(), elem_id="game-canvas")
+        game_output = gr.Image(label="Game", width=480, height=640)
+        status_output = gr.Textbox(label="Status")
     
     with gr.Row():
-        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;
-        }
-        
-        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;
-            
-            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);
-    """
-    
-    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);
-    }}
-    """)
+        left_btn = gr.Button("Left")
+        right_btn = gr.Button("Right")
+        shoot_btn = gr.Button("Shoot")
+        reset_btn = gr.Button("Reset")
+    
+    # Initial state
+    game_output.value = game.draw()
+    status_output.value = f"Score: {game.score} | Lives: {game.lives}"
+    
+    # Event handlers
+    left_btn.click(move_player, inputs=gr.State(value="left"), outputs=[game_output, status_output])
+    right_btn.click(move_player, inputs=gr.State(value="right"), outputs=[game_output, status_output])
+    shoot_btn.click(move_player, inputs=gr.State(value="shoot"), outputs=[game_output, status_output])
+    reset_btn.click(reset_game, inputs=None, outputs=[game_output, status_output])
 
-# Launch the app
-if __name__ == "__main__":
-    demo.launch()
+demo.launch()