updated

.dockerignore

@@ -1,23 +0,0 @@
-# Git
-.git
-.gitignore
-.gitattributes
-
-# Docker
-Dockerfile
-docker-compose.yml
-.dockerignore
-
-# Node.js (if you later add npm packages)
-node_modules
-npm-debug.log
-
-# IDE files
-.idea
-.vscode
-*.swp
-*.swo
-
-# OS files
-.DS_Store
-Thumbs.db

Dockerfile

@@ -6,11 +6,9 @@ WORKDIR /app
 COPY requirements.txt /app/
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy application files
-COPY index.html /app/
-COPY styles.css /app/
-COPY script.js /app/
+# Copy all application files
 COPY app.py /app/
+COPY README.md /app/
 
 # Set proper permissions
 RUN chmod -R 755 /app
@@ -25,8 +23,5 @@ ENV STREAMLIT_SERVER_HEADLESS=true
 ENV STREAMLIT_SERVER_ENABLE_CORS=false
 ENV STREAMLIT_BROWSER_GATHER_USAGE_STATS=false
 
-# Print environment for debugging
-RUN echo "Files in container:" && ls -la /app/
-
 # Run the Streamlit app
-CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]
+CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

README.md

@@ -3,107 +3,6 @@ title: HF Map
 emoji: 💻
 colorFrom: purple
 colorTo: green
-sdk: docker
+sdk: streamlit
 pinned: false
 ---
-
-# Battle Simulator
-
-An interactive battle simulation where red and blue forces fight on a dynamic battlefield. The application features different unit types, automatic combat AI, and an interactive interface that lets you inspect units during battle.
-
-## Features
-
-- **Multiple Unit Types**: Infantry, Tank, and Artillery units with unique stats and abilities
-- **Dynamic Combat**: Units automatically seek targets, attack, and respond to battlefield conditions
-- **Interactive UI**: Click on any unit to see its detailed stats and status
-- **Auto-respawn**: Units respawn after being defeated, maintaining continuous battle
-- **Visual Effects**: Attack lines, health bars, and status indicators provide visual feedback
-
-## Running the Application
-
-### Standard Method
-
-Simply open the `index.html` file in any modern web browser:
-
-```
-# Windows
-start index.html
-
-# macOS
-open index.html
-
-# Linux
-xdg-open index.html
-```
-
-### Using Docker
-
-This application can also be run using Docker, which ensures consistent behavior across different environments.
-
-#### Prerequisites
-
-- Docker
-- Docker Compose (optional, for easier management)
-
-#### Using Docker Directly
-
-1. Build the Docker image:
-   ```
-   docker build -t battle-simulator .
-   ```
-
-2. Run the container:
-   ```
-   docker run -p 8080:8080 battle-simulator
-   ```
-
-3. Open your browser and navigate to:
-   ```
-   http://localhost:8080
-   ```
-
-#### Using Docker Compose
-
-1. Start the application:
-   ```
-   docker-compose up
-   ```
-
-2. Open your browser and navigate to:
-   ```
-   http://localhost:8080
-   ```
-
-3. To stop the application:
-   ```
-   docker-compose down
-   ```
-
-### Deploying to Hugging Face Spaces
-
-This application is fully compatible with Hugging Face Spaces and uses Streamlit for the deployment:
-
-1. **Streamlit Integration**: Uses Streamlit to host the battle simulation in a web-friendly interface
-2. **Embedded HTML/JS Application**: The original HTML/CSS/JS application is embedded directly in the Streamlit interface
-3. **Port 8501**: The application runs on Streamlit's default port (8501)
-4. **Simplified Deployment**: No need for complex web server configurations
-5. **Hugging Face Spaces Optimized**: The Docker configuration is specifically designed to work seamlessly in the Hugging Face Spaces environment
-
-To deploy to Hugging Face Spaces:
-
-1. Push your code to a GitHub repository
-2. Create a new Space on Hugging Face with Docker SDK
-3. Connect your GitHub repository to the Space
-4. The Space will automatically build and deploy your application
-
-## How to Use
-
-- **View Unit Info**: Click on any unit to see its details in the info panel
-- **Close Info Panel**: Click the "Close" button to dismiss the unit info panel
-- **Watch the Battle**: Observe as units automatically engage in combat across the map
-
-## Technical Details
-
-- Built with pure JavaScript, HTML5, and CSS3
-- Uses HTML5 Canvas for rendering
-- No external dependencies required

app.py

@@ -1,654 +1,599 @@
 import streamlit as st
-import os
+import numpy as np
+import pandas as pd
+import time
+import random
+from PIL import Image, ImageDraw
+import math
+import uuid
+import base64
+from io import BytesIO
 
-# Set page configuration
+# Set page config
 st.set_page_config(
     page_title="Battle Simulator",
     page_icon="🎮",
-    layout="wide"
+    layout="wide",
+    initial_sidebar_state="expanded"
 )
 
-# Main app content
-st.title("Battle Simulator")
-st.markdown("Click on units to see their details as they battle!")
-
-# HTML content to embed (directly including instead of reading from files)
-html_content = """
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Battle Simulator</title>
-    <style>
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: Arial, sans-serif;
-    background-color: transparent;
-    padding: 0;
+# Constants
+MAP_WIDTH = 800
+MAP_HEIGHT = 600
+TEAM_RED = "red"
+TEAM_BLUE = "blue"
+UNIT_TYPES = ["infantry", "tank", "artillery"]
+TEAM_COLORS = {
+    TEAM_RED: "#e74c3c",
+    TEAM_BLUE: "#3498db"
 }
-
-.container {
-    max-width: 1000px;
-    margin: 0 auto;
-    background-color: white;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+UNIT_STATS = {
+    "infantry": {
+        "max_health": 80,
+        "attack": 8,
+        "defense": 3,
+        "range": 40,
+        "speed": 1.5,
+        "size": 10,
+        "shape": "circle",
+        "respawn_time": 120
+    },
+    "tank": {
+        "max_health": 150, 
+        "attack": 15,
+        "defense": 10,
+        "range": 60,
+        "speed": 0.8,
+        "size": 12,
+        "shape": "square",
+        "respawn_time": 240
+    },
+    "artillery": {
+        "max_health": 60,
+        "attack": 25,
+        "defense": 2,
+        "range": 120,
+        "speed": 0.5,
+        "size": 13,
+        "shape": "triangle",
+        "respawn_time": 180
+    }
 }
 
-h1 {
-    text-align: center;
-    margin-bottom: 20px;
-    color: #333;
-}
+# Utility functions
+def calculate_distance(x1, y1, x2, y2):
+    """Calculate Euclidean distance between two points"""
+    return math.sqrt((x2 - x1)**2 + (y2 - y1)**2)
 
-.battlefield {
-    position: relative;
-}
+def angle_between(x1, y1, x2, y2):
+    """Calculate angle between two points in radians"""
+    return math.atan2(y2 - y1, x2 - x1)
 
-canvas {
-    display: block;
-    margin: 0 auto;
-    border: 1px solid #ccc;
-    background-color: #e8f4e5;
-}
+class Unit:
+    def __init__(self, id, team, unit_type, x, y):
+        self.id = id
+        self.team = team
+        self.type = unit_type
+        self.x = x
+        self.y = y
+        self.target_x = x
+        self.target_y = y
+        
+        # Get stats from the unit type
+        stats = UNIT_STATS[unit_type]
+        self.max_health = stats["max_health"]
+        self.health = self.max_health
+        self.attack = stats["attack"]
+        self.defense = stats["defense"]
+        self.range = stats["range"]
+        self.speed = stats["speed"]
+        self.size = stats["size"]
+        self.shape = stats["shape"]
+        self.respawn_time = stats["respawn_time"]
+        
+        # Battle state
+        self.state = "idle"  # idle, moving, attacking, dead
+        self.target = None
+        self.dead_timer = 0
+        self.attack_cooldown = 0
+        self.attack_cooldown_max = 60
+        self.attack_line = None
 
-#info-panel {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background-color: rgba(255, 255, 255, 0.95);
-    padding: 20px;
-    border-radius: 8px;
-    border: 2px solid #4a6ea9;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-    width: 300px;
-    z-index: 10;
-    transition: all 0.3s ease;
-    animation: fadeIn 0.3s ease-out;
-}
+    def find_target(self, units):
+        """Find nearest enemy unit"""
+        if self.state == "dead":
+            return
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
+        nearest_dist = float("inf")
+        nearest_enemy = None
 
-#info-panel h3 {
-    margin-bottom: 15px;
-    color: #333;
-    border-bottom: 1px solid #ddd;
-    padding-bottom: 10px;
-}
+        for unit in units:
+            if unit.team != self.team and unit.state != "dead":
+                dist = calculate_distance(self.x, self.y, unit.x, unit.y)
+                if dist < nearest_dist:
+                    nearest_dist = dist
+                    nearest_enemy = unit
 
-#info-panel p {
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-}
+        self.target = nearest_enemy
 
-#close-info {
-    display: block;
-    margin: 20px auto 0;
-    padding: 8px 16px;
-    background-color: #4a6ea9;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
+    def update(self, units):
+        """Update unit state and position"""
+        if self.state == "dead":
+            self.dead_timer += 1
+            if self.dead_timer >= self.respawn_time:
+                self.respawn()
+            return
 
-#close-info:hover {
-    background-color: #3a5a89;
-}
+        # Find target if no current target or target is dead
+        if not self.target or self.target.state == "dead":
+            self.find_target(units)
+            self.state = "idle"
 
-.hidden {
-    display: none;
-}
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="battlefield">
-            <canvas id="map" width="800" height="600"></canvas>
-            <div id="info-panel" class="hidden">
-                <h3 id="unit-name">Unit Name</h3>
-                <p id="unit-type">Type: <span></span></p>
-                <p id="unit-health">Health: <span></span></p>
-                <p id="unit-attack">Attack: <span></span></p>
-                <p id="unit-defense">Defense: <span></span></p>
-                <p id="unit-status">Status: <span></span></p>
-                <button id="close-info">Close</button>
-            </div>
-        </div>
-    </div>
+        # If we have a target, pursue it
+        if self.target:
+            dist_to_target = calculate_distance(self.x, self.y, self.target.x, self.target.y)
+            
+            # If in attack range, attack
+            if dist_to_target <= self.range:
+                self.attack_target()
+                self.state = "attacking"
+            else:
+                # Move toward target
+                self.target_x = self.target.x
+                self.target_y = self.target.y
+                self.state = "moving"
+        else:
+            # Wander if no target
+            if random.random() < 0.02:
+                team_zone = 300 if self.team == TEAM_RED else 500
+                center_x = 200 if self.team == TEAM_RED else 600
+                
+                self.target_x = max(50, min(MAP_WIDTH - 50, 
+                                     center_x + (random.random() - 0.5) * team_zone))
+                self.target_y = max(50, min(MAP_HEIGHT - 50, 
+                                     300 + (random.random() - 0.5) * 400))
 
-    <script>
-// Unit class definitions
-class Unit {
-    constructor(id, team, type, x, y) {
-        this.id = id;
-        this.team = team; // 'red' or 'blue'
-        this.type = type; // 'infantry', 'tank', or 'artillery'
-        this.x = x;
-        this.y = y;
-        this.targetX = x;
-        this.targetY = y;
-        this.speed = 1;
-        this.health = 100;
-        this.maxHealth = 100;
-        this.attackRange = 50;
-        this.attackPower = 10;
-        this.defense = 5;
-        this.attackCooldown = 0;
-        this.attackCooldownMax = 60;
-        this.target = null;
-        this.attackLine = null;
-        this.isMoving = false;
-        this.state = 'idle'; // 'idle', 'moving', 'attacking', 'dead'
-        this.respawnTime = 0;
-        this.respawnTimeMax = 180;
-        
-        // Set unit-specific properties
-        this.setupUnitType();
-    }
-    
-    setupUnitType() {
-        switch (this.type) {
-            case 'infantry':
-                this.speed = 1.5;
-                this.health = 80;
-                this.maxHealth = 80;
-                this.attackRange = 40;
-                this.attackPower = Ω;
-                this.defense = 3;
-                this.attackCooldownMax = 45;
-                this.respawnTimeMax = 120;
-                break;
-            case 'tank':
-                this.speed = 0.8;
-                this.health = 150;
-                this.maxHealth = 150;
-                this.attackRange = 60;
-                this.attackPower = 15;
-                this.defense = 10;
-                this.attackCooldownMax = 75;
-                this.respawnTimeMax = 240;
-                break;
-            case 'artillery':
-                this.speed = 0.5;
-                this.health = 60;
-                this.maxHealth = 60;
-                this.attackRange = 120;
-                this.attackPower = 25;
-                this.defense = 2;
-                this.attackCooldownMax = 90;
-                this.respawnTimeMax = 180;
-                break;
-        }
-    }
-    
-    update(units) {
-        if (this.state === 'dead') {
-            this.respawnTime++;
-            if (this.respawnTime >= this.respawnTimeMax) {
-                this.respawn();
-            }
-            return;
-        }
+        # Move toward target position
+        self.move()
         
-        // Check for targets if we don't have one or our target is dead
-        if (!this.target || this.target.state === 'dead') {
-            this.findTarget(units);
-            this.state = 'idle';
-        }
-        
-        // If we have a target, pursue it
-        if (this.target) {
-            const distance = Math.sqrt(
-                Math.pow(this.target.x - this.x, 2) + 
-                Math.pow(this.target.y - this.y, 2)
-            );
+        # Update attack cooldown
+        if self.attack_cooldown > 0:
+            self.attack_cooldown -= 1
             
-            // If in attack range, attack
-            if (distance <= this.attackRange) {
-                this.attack();
-                this.state = 'attacking';
-            } 
-            // Otherwise move toward target
-            else {
-                this.moveTowardTarget();
-                this.state = 'moving';
-            }
-        } else {
-            // Wander if no target
-            this.wander();
-        }
-        
-        // Handle movement
-        this.move();
-        
-        // Update attack cooldown
-        if (this.attackCooldown > 0) {
-            this.attackCooldown--;
-        }
-    }
-    
-    findTarget(units) {
-        let nearestDist = Infinity;
-        this.target = null;
+        # Update attack line
+        if self.attack_line:
+            self.attack_line["duration"] -= 1
+            if self.attack_line["duration"] <= 0:
+                self.attack_line = None
+
+    def move(self):
+        """Move unit toward target position"""
+        if self.state == "dead":
+            return
+
+        dx = self.target_x - self.x
+        dy = self.target_y - self.y
+        dist = math.sqrt(dx*dx + dy*dy)
         
-        for (const unit of units) {
-            // Skip if same team or dead
-            if (unit.team === this.team || unit.state === 'dead') continue;
+        if dist > 5:
+            self.x += (dx / dist) * self.speed
+            self.y += (dy / dist) * self.speed
             
-            const dist = Math.sqrt(
-                Math.pow(unit.x - this.x, 2) + 
-                Math.pow(unit.y - this.y, 2)
-            );
+        # Keep units within map bounds
+        self.x = max(self.size, min(MAP_WIDTH - self.size, self.x))
+        self.y = max(self.size, min(MAP_HEIGHT - self.size, self.y))
+
+    def attack_target(self):
+        """Attack the current target"""
+        if self.attack_cooldown == 0 and self.target and self.target.state != "dead":
+            # Apply random variance to attack damage
+            damage_multiplier = 0.8 + random.random() * 0.4
+            base_damage = self.attack * damage_multiplier
+            final_damage = max(1, base_damage - self.target.defense / 2)
+            
+            # Apply damage to target
+            self.target.take_damage(final_damage)
             
-            if (dist < nearestDist) {
-                nearestDist = dist;
-                this.target = unit;
+            # Create attack line for visualization
+            self.attack_line = {
+                "from_x": self.x,
+                "from_y": self.y,
+                "to_x": self.target.x,
+                "to_y": self.target.y,
+                "duration": 10
             }
-        }
-    }
-    
-    attack() {
-        if (this.attackCooldown === 0 && this.target && this.target.state !== 'dead') {
-            // Calculate damage with some randomness
-            const baseDamage = this.attackPower * (0.8 + Math.random() * 0.4);
-            const damage = Math.max(1, baseDamage - this.target.defense / 2);
             
-            // Apply damage to target
-            this.target.takeDamage(damage);
+            # Reset cooldown
+            self.attack_cooldown = self.attack_cooldown_max
+
+    def take_damage(self, amount):
+        """Take damage from an attack"""
+        self.health -= amount
+        if self.health <= 0:
+            self.die()
+
+    def die(self):
+        """Unit death"""
+        self.state = "dead"
+        self.health = 0
+        self.dead_timer = 0
+        self.attack_line = None
+
+    def respawn(self):
+        """Respawn the unit"""
+        margin = 50
+        if self.team == TEAM_RED:
+            self.x = margin + random.random() * 100
+        else:
+            self.x = MAP_WIDTH - margin - random.random() * 100
+        
+        self.y = 100 + random.random() * 400
+        self.health = self.max_health
+        self.state = "idle"
+        self.target = None
+        self.attack_line = None
+        self.dead_timer = 0
+        self.attack_cooldown = 0
+
+    def is_point_inside(self, point_x, point_y):
+        """Check if a point is inside the unit"""
+        if self.state == "dead":
+            return False
             
-            // Create attack line for visual effect
-            this.attackLine = {
-                fromX: this.x,
-                fromY: this.y,
-                toX: this.target.x,
-                toY: this.target.y,
-                duration: 10, // frames the line will remain visible
-                current: 0
-            };
+        return calculate_distance(self.x, self.y, point_x, point_y) <= self.size
+
+class BattleSimulation:
+    def __init__(self):
+        self.units = []
+        self.selected_unit = None
+        self.frame_count = 0
+        
+        # Create initial units
+        self.create_units()
+        
+    def create_units(self):
+        """Create initial units for both teams"""
+        # Create red team (left side)
+        for i in range(5):
+            self.units.append(Unit(
+                id=f"red-infantry-{i}",
+                team=TEAM_RED,
+                unit_type="infantry",
+                x=50 + random.random() * 100,
+                y=100 + i * 100
+            ))
             
-            // Reset cooldown
-            this.attackCooldown = this.attackCooldownMax;
-        }
-    }
-    
-    takeDamage(amount) {
-        this.health -= amount;
-        if (this.health <= 0) {
-            this.die();
-        }
-    }
-    
-    die() {
-        this.state = 'dead';
-        this.health = 0;
-        this.respawnTime = 0;
-        this.attackLine = null;
-    }
-    
-    respawn() {
-        // Respawn in a random position based on team
-        const margin = 50;
-        this.x = this.team === 'red' 
-            ? margin + Math.random() * 100 
-            : 800 - margin - Math.random() * 100;
-        this.y = 100 + Math.random() * 400;
-        
-        this.health = this.maxHealth;
-        this.state = 'idle';
-        this.target = null;
-        this.attackLine = null;
-        this.respawnTime = 0;
-        this.attackCooldown = 0;
-    }
-    
-    moveTowardTarget() {
-        if (!this.target) return;
-        
-        this.targetX = this.target.x;
-        this.targetY = this.target.y;
-        
-        // Keep some distance based on unit type
-        const angle = Math.atan2(this.targetY - this.y, this.targetX - this.x);
-        let preferredDistance = this.attackRange * 0.8;
-        
-        if (this.type === 'artillery') {
-            preferredDistance = this.attackRange * 0.9;
-        } else if (this.type === 'infantry') {
-            preferredDistance = this.attackRange * 0.6;
-        }
-        
-        const distance = Math.sqrt(
-            Math.pow(this.target.x - this.x, 2) + 
-            Math.pow(this.target.y - this.y, 2)
-        );
-        
-        if (distance > preferredDistance) {
-            this.targetX = this.target.x - Math.cos(angle) * preferredDistance;
-            this.targetY = this.target.y - Math.sin(angle) * preferredDistance;
-        } else {
-            this.targetX = this.x;
-            this.targetY = this.y;
-        }
-        
-        this.isMoving = true;
-    }
-    
-    wander() {
-        // Only set a new random destination occasionally
-        if (Math.random() < 0.01 || !this.isMoving) {
-            const margin = 50;
-            const teamZone = this.team === 'red' ? 300 : 500;
-            const centerX = this.team === 'red' ? 200 : 600;
+        for i in range(3):
+            self.units.append(Unit(
+                id=f"red-tank-{i}",
+                team=TEAM_RED,
+                unit_type="tank",
+                x=100 + random.random() * 100,
+                y=150 + i * 150
+            ))
             
-            this.targetX = Math.max(margin, Math.min(800 - margin, 
-                centerX + (Math.random() - 0.5) * teamZone));
-            this.targetY = Math.max(margin, Math.min(600 - margin, 
-                300 + (Math.random() - 0.5) * 400));
+        for i in range(2):
+            self.units.append(Unit(
+                id=f"red-artillery-{i}",
+                team=TEAM_RED,
+                unit_type="artillery",
+                x=50 + random.random() * 80,
+                y=200 + i * 200
+            ))
+        
+        # Create blue team (right side)
+        for i in range(5):
+            self.units.append(Unit(
+                id=f"blue-infantry-{i}",
+                team=TEAM_BLUE,
+                unit_type="infantry",
+                x=650 + random.random() * 100,
+                y=100 + i * 100
+            ))
             
-            this.isMoving = true;
-        }
-    }
-    
-    move() {
-        if (this.state === 'dead') return;
-        
-        const dx = this.targetX - this.x;
-        const dy = this.targetY - this.y;
-        const distance = Math.sqrt(dx * dx + dy * dy);
-        
-        if (distance > 5) {
-            this.x += (dx / distance) * this.speed;
-            this.y += (dy / distance) * this.speed;
-        } else {
-            this.isMoving = false;
-        }
-        
-        // Keep units within bounds
-        this.x = Math.max(10, Math.min(790, this.x));
-        this.y = Math.max(10, Math.min(590, this.y));
-    }
-    
-    draw(ctx) {
-        if (this.state === 'dead') return;
-        
-        // Draw unit shape based on type
-        ctx.fillStyle = this.team === 'red' ? '#e74c3c' : '#3498db';
-        
-        // Different shape for different unit types
-        if (this.type === 'infantry') {
-            // Circle for infantry
-            ctx.beginPath();
-            ctx.arc(this.x, this.y, 10, 0, Math.PI * 2);
-            ctx.fill();
-        } else if (this.type === 'tank') {
-            // Square for tanks
-            ctx.fillRect(this.x - 12, this.y - 12, 24, 24);
-        } else if (this.type === 'artillery') {
-            // Triangle for artillery
-            ctx.beginPath();
-            ctx.moveTo(this.x, this.y - 15);
-            ctx.lineTo(this.x - 13, this.y + 10);
-            ctx.lineTo(this.x + 13, this.y + 10);
-            ctx.closePath();
-            ctx.fill();
-        }
-        
-        // Draw health bar
-        const healthPercentage = this.health / this.maxHealth;
-        const healthBarWidth = 20;
-        const healthBarHeight = 3;
-        
-        // Health bar background
-        ctx.fillStyle = '#e74c3c'; // Red for all health bars background
-        ctx.fillRect(
-            this.x - healthBarWidth / 2,
-            this.y - 20,
-            healthBarWidth,
-            healthBarHeight
-        );
-        
-        // Current health
-        ctx.fillStyle = '#2ecc71'; // Green for health
-        ctx.fillRect(
-            this.x - healthBarWidth / 2,
-            this.y - 20,
-            healthBarWidth * healthPercentage,
-            healthBarHeight
-        );
-        
-        // Draw attack lines
-        if (this.attackLine && this.attackLine.current < this.attackLine.duration) {
-            ctx.strokeStyle = this.team === 'red' ? 'rgba(231, 76, 60, 0.7)' : 'rgba(52, 152, 219, 0.7)';
-            ctx.lineWidth = 2;
-            ctx.beginPath();
-            ctx.moveTo(this.attackLine.fromX, this.attackLine.fromY);
-            ctx.lineTo(this.attackLine.toX, this.attackLine.toY);
-            ctx.stroke();
+        for i in range(3):
+            self.units.append(Unit(
+                id=f"blue-tank-{i}",
+                team=TEAM_BLUE,
+                unit_type="tank",
+                x=600 + random.random() * 100,
+                y=150 + i * 150
+            ))
             
-            this.attackLine.current++;
-        }
-        
-        // Draw unit state indicator
-        ctx.fillStyle = this.getStateColor();
-        ctx.beginPath();
-        ctx.arc(this.x, this.y - 25, 3, 0, Math.PI * 2);
-        ctx.fill();
-    }
-    
-    getStateColor() {
-        switch (this.state) {
-            case 'idle':
-                return '#95a5a6'; // Gray
-            case 'moving':
-                return '#3498db'; // Blue
-            case 'attacking':
-                return '#e74c3c'; // Red
-            default:
-                return '#95a5a6';
-        }
-    }
-    
-    isPointInside(pointX, pointY) {
-        if (this.state === 'dead') return false;
-        
-        const size = this.type === 'tank' ? 12 : 
-                     this.type === 'artillery' ? 13 : 10;
-        
-        return Math.sqrt(
-            Math.pow(this.x - pointX, 2) + 
-            Math.pow(this.y - pointY, 2)
-        ) <= size;
-    }
+        for i in range(2):
+            self.units.append(Unit(
+                id=f"blue-artillery-{i}",
+                team=TEAM_BLUE,
+                unit_type="artillery",
+                x=670 + random.random() * 80,
+                y=200 + i * 200
+            ))
     
-    getInfoText() {
-        return {
-            name: `${this.team.charAt(0).toUpperCase() + this.team.slice(1)} ${this.type.charAt(0).toUpperCase() + this.type.slice(1)} #${this.id}`,
-            type: this.type.charAt(0).toUpperCase() + this.type.slice(1),
-            health: `${Math.round(this.health)}/${this.maxHealth}`,
-            attack: this.attackPower,
-            defense: this.defense,
-            status: this.state.charAt(0).toUpperCase() + this.state.slice(1)
-        };
-    }
-}
+    def update(self):
+        """Update all units in the simulation"""
+        for unit in self.units:
+            unit.update(self.units)
+        
+        self.frame_count += 1
+        
+    def render(self):
+        """Render the current state of the battle"""
+        # Create a new image
+        img = Image.new('RGBA', (MAP_WIDTH, MAP_HEIGHT), (232, 244, 229, 255))
+        draw = ImageDraw.Draw(img)
+        
+        # Draw territory gradients
+        # (This is approximate as PIL doesn't have easy gradients)
+        # Red territory
+        for x in range(250):
+            alpha = int(50 * (1 - x / 250))
+            draw.line([(x, 0), (x, MAP_HEIGHT)], fill=(231, 76, 60, alpha), width=1)
+            
+        # Blue territory
+        for x in range(MAP_WIDTH - 250, MAP_WIDTH):
+            alpha = int(50 * (x - (MAP_WIDTH - 250)) / 250)
+            draw.line([(x, 0), (x, MAP_HEIGHT)], fill=(52, 152, 219, alpha), width=1)
+        
+        # Draw attack lines first (so they appear behind units)
+        for unit in self.units:
+            if unit.attack_line:
+                line_color = TEAM_COLORS[unit.team]
+                draw.line(
+                    [(unit.attack_line["from_x"], unit.attack_line["from_y"]), 
+                     (unit.attack_line["to_x"], unit.attack_line["to_y"])],
+                    fill=line_color,
+                    width=2
+                )
+        
+        # Draw units
+        for unit in self.units:
+            if unit.state == "dead":
+                continue
+                
+            # Draw the unit shape
+            fill_color = TEAM_COLORS[unit.team]
+            
+            if unit.shape == "circle":  # Infantry
+                draw.ellipse(
+                    [(unit.x - unit.size, unit.y - unit.size), 
+                     (unit.x + unit.size, unit.y + unit.size)],
+                    fill=fill_color
+                )
+            elif unit.shape == "square":  # Tank
+                draw.rectangle(
+                    [(unit.x - unit.size, unit.y - unit.size), 
+                     (unit.x + unit.size, unit.y + unit.size)],
+                    fill=fill_color
+                )
+            elif unit.shape == "triangle":  # Artillery
+                draw.polygon(
+                    [(unit.x, unit.y - unit.size),
+                     (unit.x - unit.size, unit.y + unit.size),
+                     (unit.x + unit.size, unit.y + unit.size)],
+                    fill=fill_color
+                )
+            
+            # Draw health bar
+            health_ratio = unit.health / unit.max_health
+            health_bar_width = 20
+            health_bar_height = 3
+            
+            # Health bar background (red)
+            draw.rectangle(
+                [(unit.x - health_bar_width/2, unit.y - 20),
+                 (unit.x + health_bar_width/2, unit.y - 20 + health_bar_height)],
+                fill="#e74c3c"
+            )
+            
+            # Health bar foreground (green)
+            draw.rectangle(
+                [(unit.x - health_bar_width/2, unit.y - 20),
+                 (unit.x - health_bar_width/2 + health_bar_width * health_ratio, unit.y - 20 + health_bar_height)],
+                fill="#2ecc71"
+            )
+            
+            # Draw state indicator
+            state_colors = {
+                "idle": "#95a5a6",     # Gray
+                "moving": "#3498db",    # Blue
+                "attacking": "#e74c3c"  # Red
+            }
+            
+            draw.ellipse(
+                [(unit.x - 3, unit.y - 25 - 3),
+                 (unit.x + 3, unit.y - 25 + 3)],
+                fill=state_colors.get(unit.state, "#95a5a6")
+            )
+            
+            # Highlight selected unit
+            if self.selected_unit and unit.id == self.selected_unit.id:
+                draw.ellipse(
+                    [(unit.x - unit.size - 5, unit.y - unit.size - 5), 
+                     (unit.x + unit.size + 5, unit.y + unit.size + 5)],
+                    outline="#f1c40f",
+                    width=2
+                )
+        
+        # Convert the image to base64 for displaying in Streamlit
+        buffered = BytesIO()
+        img.save(buffered, format="PNG")
+        img_str = base64.b64encode(buffered.getvalue()).decode()
+        
+        return img_str
+        
+    def handle_click(self, x, y):
+        """Handle click on the battle map"""
+        self.selected_unit = None
+        for unit in self.units:
+            if unit.is_point_inside(x, y) and unit.state != "dead":
+                self.selected_unit = unit
+                break
+        
+        return self.selected_unit
 
-// Main app code
-document.addEventListener('DOMContentLoaded', function() {
-    const canvas = document.getElementById('map');
-    const ctx = canvas.getContext('2d');
-    const infoPanel = document.getElementById('info-panel');
-    const closeInfoBtn = document.getElementById('close-info');
+def get_unit_info_html(unit):
+    """Generate HTML for unit info panel"""
+    if not unit:
+        return ""
+        
+    type_icon = {
+        "infantry": "⭕",
+        "tank": "⬛",
+        "artillery": "△"
+    }.get(unit.type, "")
     
-    let units = [];
-    let selectedUnit = null;
+    team_color = TEAM_COLORS[unit.team]
     
-    // Create initial units
-    createUnits();
+    html = f"""
+    <div style="background-color: rgba(255, 255, 255, 0.95); padding: 20px; 
+                border-radius: 8px; border: 2px solid {team_color}; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);">
+        <h3 style="margin-bottom: 15px; color: #333; border-bottom: 1px solid #ddd; padding-bottom: 10px;">
+            {unit.team.capitalize()} {unit.type.capitalize()} {type_icon}
+        </h3>
+        <p style="margin-bottom: 10px; display: flex; justify-content: space-between;">
+            <span>Health:</span> <span>{int(unit.health)}/{unit.max_health}</span>
+        </p>
+        <p style="margin-bottom: 10px; display: flex; justify-content: space-between;">
+            <span>Attack:</span> <span>{unit.attack}</span>
+        </p>
+        <p style="margin-bottom: 10px; display: flex; justify-content: space-between;">
+            <span>Defense:</span> <span>{unit.defense}</span>
+        </p>
+        <p style="margin-bottom: 10px; display: flex; justify-content: space-between;">
+            <span>Range:</span> <span>{unit.range}</span>
+        </p>
+        <p style="margin-bottom: 10px; display: flex; justify-content: space-between;">
+            <span>Speed:</span> <span>{unit.speed}</span>
+        </p>
+        <p style="margin-bottom: 10px; display: flex; justify-content: space-between;">
+            <span>Status:</span> <span>{unit.state.capitalize()}</span>
+        </p>
+    </div>
+    """
+    return html
+
+def main():
+    # Initialize session state
+    if 'battle_sim' not in st.session_state:
+        st.session_state.battle_sim = BattleSimulation()
+        st.session_state.last_click = None
     
-    // Set up game loop
-    setInterval(updateGame, 1000 / 60); // 60 FPS
+    # Title and description
+    st.title("Battle Simulator")
+    st.markdown("An interactive battle simulation where red and blue forces fight on a dynamic battlefield.")
     
-    // Add event listeners
-    canvas.addEventListener('click', handleCanvasClick);
-    closeInfoBtn.addEventListener('click', closeInfoPanel);
+    # Create a layout with columns
+    col1, col2 = st.columns([3, 1])
     
-    function createUnits() {
-        // Clear existing units
-        units = [];
+    with col1:
+        # Display battle map with click handler
+        battle_sim = st.session_state.battle_sim
+        battle_sim.update()  # Update simulation
+        img_str = battle_sim.render()  # Render the current state
+        
+        # Display the battle map with click handling
+        st.markdown(f"""
+        <div style="position: relative; width: {MAP_WIDTH}px; margin: 0 auto;">
+            <img src="data:image/png;base64,{img_str}" width="{MAP_WIDTH}" id="battlemap" 
+                 style="border: 1px solid #ccc; cursor: pointer;" onclick="handleMapClick(event)">
+        </div>
+        <script>
+            function handleMapClick(e) {
+                const rect = e.target.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                // Pass click coordinates to Streamlit
+                window.parent.postMessage({{
+                    type: "streamlit:setComponentValue",
+                    value: [x, y]
+                }}, "*");
+            }
+        </script>
+        """, unsafe_allow_html=True)
         
-        // Create red units (left side)
-        for (let i = 0; i < 5; i++) {
-            units.push(new Unit(i, 'red', 'infantry', 
-                50 + Math.random() * 100, 100 + i * 100));
-        }
-        for (let i = 0; i < 3; i++) {
-            units.push(new Unit(i + 5, 'red', 'tank', 
-                100 + Math.random() * 100, 150 + i * 150));
-        }
-        for (let i = 0; i < 2; i++) {
-            units.push(new Unit(i + 8, 'red', 'artillery', 
-                50 + Math.random() * 80, 200 + i * 200));
-        }
+        # Use a streamlit empty element to trigger rerun on map click
+        map_click = st.empty()
         
-        // Create blue units (right side)
-        for (let i = 0; i < 5; i++) {
-            units.push(new Unit(i + 10, 'blue', 'infantry', 
-                650 + Math.random() * 100, 100 + i * 100));
-        }
-        for (let i = 0; i < 3; i++) {
-            units.push(new Unit(i + 15, 'blue', 'tank', 
-                600 + Math.random() * 100, 150 + i * 150));
-        }
-        for (let i = 0; i < 2; i++) {
-            units.push(new Unit(i + 18, 'blue', 'artillery', 
-                670 + Math.random() * 80, 200 + i * 200));
-        }
-    }
-    
-    function updateGame() {
-        // Update units
-        for (const unit of units) {
-            unit.update(units);
-        }
+    with col2:
+        # Show information about selected unit
+        st.markdown("### Unit Information")
         
-        // Update display
-        drawGame();
-    }
+        unit_info = st.empty()
+        if battle_sim.selected_unit:
+            unit_info.markdown(get_unit_info_html(battle_sim.selected_unit), unsafe_allow_html=True)
+        else:
+            unit_info.markdown("Click on a unit to see its details")
+            
+        # Unit legend
+        st.markdown("### Unit Types")
+        st.markdown("""
+        - ⭕ **Infantry**: Fast but weaker units
+        - ⬛ **Tank**: Slow but powerful with strong defense
+        - △ **Artillery**: Long-range attacks but vulnerable
+        """)
+        
+        # Battle statistics
+        st.markdown("### Battle Statistics")
+        
+        # Count units by team and status
+        red_active = sum(1 for unit in battle_sim.units if unit.team == TEAM_RED and unit.state != "dead")
+        blue_active = sum(1 for unit in battle_sim.units if unit.team == TEAM_BLUE and unit.state != "dead")
+        
+        # Display counters
+        st.markdown(f"""
+        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
+            <div style="text-align: center; padding: 10px; background-color: rgba(231, 76, 60, 0.2); border-radius: 5px; width: 45%;">
+                <div style="font-size: 24px; font-weight: bold;">{red_active}</div>
+                <div>Red Forces</div>
+            </div>
+            <div style="text-align: center; padding: 10px; background-color: rgba(52, 152, 219, 0.2); border-radius: 5px; width: 45%;">
+                <div style="font-size: 24px; font-weight: bold;">{blue_active}</div>
+                <div>Blue Forces</div>
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
     
-    function drawGame() {
-        // Clear canvas
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        
-        // Draw background elements - territory markers
-        drawTerritories();
-        
-        // Draw units
-        for (const unit of units) {
-            unit.draw(ctx);
-        }
-    }
+    # Handle map clicks
+    clicked = st.button('Refresh Battle State', key='refresh_battle')
     
-    function drawTerritories() {
-        // Draw red territory
-        const redGradient = ctx.createLinearGradient(0, 0, 250, 0);
-        redGradient.addColorStop(0, 'rgba(231, 76, 60, 0.2)');
-        redGradient.addColorStop(1, 'rgba(231, 76, 60, 0.05)');
-        ctx.fillStyle = redGradient;
-        ctx.fillRect(0, 0, 250, canvas.height);
-        
-        // Draw blue territory
-        const blueGradient = ctx.createLinearGradient(canvas.width - 250, 0, canvas.width, 0);
-        blueGradient.addColorStop(0, 'rgba(52, 152, 219, 0.05)');
-        blueGradient.addColorStop(1, 'rgba(52, 152, 219, 0.2)');
-        ctx.fillStyle = blueGradient;
-        ctx.fillRect(canvas.width - 250, 0, 250, canvas.height);
-    }
+    # Create a container for receiving click data and auto-refreshing
+    click_container = st.container()
+    with click_container:
+        click_data = st.text_input("Click coordinates", 
+                                  value="", 
+                                  label_visibility="collapsed", 
+                                  key="click_data")
+        
+        if click_data:
+            try:
+                x, y = map(float, click_data.strip('[]').split(','))
+                selected = battle_sim.handle_click(x, y)
+                st.session_state.last_click = (x, y)
+                st.experimental_rerun()
+            except:
+                pass
     
-    function handleCanvasClick(event) {
-        const rect = canvas.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-        
-        // Check if a unit was clicked
-        selectedUnit = null;
-        for (const unit of units) {
-            if (unit.isPointInside(x, y)) {
-                selectedUnit = unit;
-                break;
+    # Auto-refresh the page
+    st.markdown("""
+    <script>
+        // Set up to receive messages from the iframe
+        window.addEventListener('message', function(e) {
+            if (e.data.type === 'streamlit:setComponentValue') {
+                const coordinates = e.data.value;
+                document.querySelector('input[key="click_data"]').value = coordinates;
+                document.querySelector('input[key="click_data"]').dispatchEvent(new Event('input'));
             }
-        }
-        
-        if (selectedUnit) {
-            showUnitInfo(selectedUnit);
-        } else {
-            closeInfoPanel();
-        }
-    }
-    
-    function showUnitInfo(unit) {
-        const info = unit.getInfoText();
+        });
         
-        document.getElementById('unit-name').textContent = info.name;
-        document.getElementById('unit-type').querySelector('span').textContent = info.type;
-        document.getElementById('unit-health').querySelector('span').textContent = info.health;
-        document.getElementById('unit-attack').querySelector('span').textContent = info.attack;
-        document.getElementById('unit-defense').querySelector('span').textContent = info.defense;
-        document.getElementById('unit-status').querySelector('span').textContent = info.status;
-        
-        infoPanel.classList.remove('hidden');
-    }
-    
-    function closeInfoPanel() {
-        infoPanel.classList.add('hidden');
-        selectedUnit = null;
-    }
-});
-
-// Quick fix for the undefined variable in the code
-const Ω = 8; // Infantry attack power
+        // Auto-refresh the simulation every 1 second
+        const refreshInterval = setInterval(function() {
+            const refreshButton = document.querySelector('button[key="refresh_battle"]');
+            if (refreshButton) {
+                refreshButton.click();
+            }
+        }, 1000);
     </script>
-</body>
-</html>
-"""
+    """, unsafe_allow_html=True)
 
-# Display the app in a fullscreen iframe
-st.components.v1.html(html_content, height=750, scrolling=False)
-
-# Add some additional info in sidebar
-with st.sidebar:
-    st.header("Battle Simulator")
-    st.markdown("""
-    This simulation shows red and blue forces battling on a map.
-    
-    **Unit Types:**
-    - ⭕ Infantry (Circles): Fast but weaker units
-    - ⬛ Tanks (Squares): Strong with high defense
-    - △ Artillery (Triangles): Powerful long-range attacks
-    
-    **Instructions:**
-    - Click on any unit to see its stats
-    - Watch as units automatically engage in combat
-    """)
-    
-    # Debug information
-    if st.checkbox("Show Debug Info"):
-        st.write(f"Working directory: {os.getcwd()}")
-        st.write(f"Files available: {', '.join(os.listdir('.'))}")
+if __name__ == "__main__":
+    main()

docker-compose.yml

@@ -4,15 +4,14 @@ services:
   battle-simulator:
     build: .
     ports:
-      - "8080:8080"
+      - "8501:8501"
     volumes:
-      - ./index.html:/usr/share/nginx/html/index.html
-      - ./styles.css:/usr/share/nginx/html/styles.css
-      - ./script.js:/usr/share/nginx/html/script.js
-      - ./nginx.conf:/etc/nginx/nginx.conf
-    # Add read-only flag to prevent write attempts to read-only filesystem in HF Spaces
-    read_only: false
-    # Specific settings for Hugging Face Spaces or similar restricted environments
+      - ./app.py:/app/app.py
+      - ./requirements.txt:/app/requirements.txt
     environment:
-      - NGINX_ENTRYPOINT_QUIET_LOGS=1
-      - NGINX_WORKER_PROCESSES=1
+      - STREAMLIT_SERVER_PORT=8501
+      - STREAMLIT_SERVER_HEADLESS=true
+      - STREAMLIT_SERVER_ENABLE_CORS=false
+      - PYTHONUNBUFFERED=1
+    # Restart policy
+    restart: unless-stopped

healthcheck.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Battle Simulator Health Check</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Special meta tags for Hugging Face Spaces -->
-    <meta property="og:title" content="Battle Simulator">
-    <meta property="og:description" content="Interactive battle simulation with units on a map">
-</head>
-<body>
-    <h1>Battle Simulator is running!</h1>
-    <p>Status: OK</p>
-    <p>If you're seeing this page directly, please click on the "App" tab to view the simulation.</p>
-    <script>
-        // Redirect to index.html if accessed directly
-        if (window.location.pathname === '/healthcheck.html') {
-            window.location.href = '/';
-        }
-    </script>
-</body>
-</html>

index.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Battle Simulator</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <div class="container">
-        <h1>Battle Simulator</h1>
-        <div class="battlefield">
-            <canvas id="map" width="800" height="600"></canvas>
-            <div id="info-panel" class="hidden">
-                <h3 id="unit-name">Unit Name</h3>
-                <p id="unit-type">Type: <span></span></p>
-                <p id="unit-health">Health: <span></span></p>
-                <p id="unit-attack">Attack: <span></span></p>
-                <p id="unit-defense">Defense: <span></span></p>
-                <p id="unit-status">Status: <span></span></p>
-                <button id="close-info">Close</button>
-            </div>
-        </div>
-    </div>
-    <script src="script.js"></script>
-</body>
-</html>

interface.py

@@ -1,46 +0,0 @@
-import gradio as gr
-import os
-import http.server
-import socketserver
-import threading
-import webbrowser
-
-# Define constants
-PORT = int(os.environ.get("PORT", 8080))
-HOST = "0.0.0.0"  # Listen on all interfaces
-DIRECTORY = os.path.dirname(os.path.abspath(__file__))
-
-# Start HTTP server in a separate thread
-def start_http_server():
-    os.chdir(DIRECTORY)
-    handler = http.server.SimpleHTTPRequestHandler
-    httpd = socketserver.TCPServer((HOST, PORT), handler)
-    print(f"Server started at http://{HOST}:{PORT}")
-    print(f"Current directory: {DIRECTORY}")
-    httpd.serve_forever()
-
-# Start server in a background thread
-server_thread = threading.Thread(target=start_http_server, daemon=True)
-server_thread.start()
-
-# Create a simple Gradio interface for Hugging Face
-with gr.Blocks() as demo:
-    gr.HTML(f"""
-    <iframe 
-        src="http://{HOST}:{PORT}" 
-        width="100%" 
-        height="800px" 
-        frameborder="0"
-        style="border: 1px solid #ddd; border-radius: 8px;"
-    ></iframe>
-    <div style="text-align: center; margin-top: 10px; padding: 10px; background-color: #f8f8f8; border-radius: 5px;">
-        <h3>Battle Simulator</h3>
-        <p>If the simulation doesn't appear above, you can access it directly at: 
-           <a href="http://{HOST}:{PORT}" target="_blank">Battle Simulator</a>
-        </p>
-    </div>
-    """)
-
-# Launch the interface
-if __name__ == "__main__":
-    demo.launch(server_name=HOST, server_port=7860)

nginx.conf

@@ -1,40 +0,0 @@
-worker_processes auto;
-
-error_log /dev/stderr warn;
-pid /tmp/nginx.pid;
-
-events {
-    worker_connections 1024;
-}
-
-http {
-    include       /etc/nginx/mime.types;
-    default_type  application/octet-stream;
-
-    # Use /tmp for all temp files (it's writable in Spaces)
-    client_body_temp_path /tmp/client_temp;
-    proxy_temp_path       /tmp/proxy_temp;
-    fastcgi_temp_path     /tmp/fastcgi_temp;
-    scgi_temp_path        /tmp/scgi_temp;
-    uwsgi_temp_path       /tmp/uwsgi_temp;
-
-    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
-                      '$status $body_bytes_sent "$http_referer" '
-                      '"$http_user_agent" "$http_x_forwarded_for"';
-
-    access_log  /dev/stdout  main;
-
-    sendfile        on;
-    keepalive_timeout  65;
-
-    # Basic server block on port 8080
-    server {
-        listen 8080;
-        server_name localhost;
-
-        location / {
-            root   /usr/share/nginx/html;
-            index  index.html;
-        }
-    }
-}

requirements.txt

@@ -1 +1,4 @@
-streamlit>=1.22.0
+streamlit>=1.22.0
+numpy>=1.20.0
+pandas>=1.3.0
+pillow>=8.0.0

script.js

@@ -1,412 +0,0 @@
-// Initialize elements when the page loads
-let canvas, ctx;
-window.addEventListener('DOMContentLoaded', () => {
-    canvas = document.getElementById('map');
-    ctx = canvas.getContext('2d');
-    initializeGame();
-});
-
-// Constants for unit types and teams
-const UNIT_TYPES = {
-    INFANTRY: {
-        name: 'Infantry',
-        baseHealth: 100,
-        baseAttack: 10,
-        baseDefense: 5,
-        speed: 1,
-        attackRange: 50,
-        radius: 12,
-        color: '#3498db'
-    },
-    TANK: {
-        name: 'Tank',
-        baseHealth: 200,
-        baseAttack: 20,
-        baseDefense: 15,
-        speed: 0.5,
-        attackRange: 100,
-        radius: 18,
-        color: '#e74c3c'
-    },
-    ARTILLERY: {
-        name: 'Artillery',
-        baseHealth: 80,
-        baseAttack: 30,
-        baseDefense: 3,
-        speed: 0.3,
-        attackRange: 150,
-        radius: 15,
-        color: '#f39c12'
-    }
-};
-
-const TEAMS = {
-    RED: {
-        name: 'Red Forces',
-        primaryColor: '#e74c3c',
-        secondaryColor: '#c0392b'
-    },
-    BLUE: {
-        name: 'Blue Forces',
-        primaryColor: '#3498db',
-        secondaryColor: '#2980b9'
-    }
-};
-
-// Class to represent a military unit
-class Unit {
-    constructor(id, type, team, x, y) {
-        this.id = id;
-        this.type = type;
-        this.team = team;
-        this.x = x;
-        this.y = y;
-        this.targetX = x;
-        this.targetY = y;
-        this.health = type.baseHealth;
-        this.maxHealth = type.baseHealth;
-        this.attack = type.baseAttack;
-        this.defense = type.baseDefense;
-        this.radius = type.radius;
-        this.speed = type.speed;
-        this.attackRange = type.attackRange;
-        this.attackCooldown = 0;
-        this.target = null;
-        this.selected = false;
-        this.status = 'Idle';
-        this.deadTimer = 0;
-        this.isAlive = true;
-    }
-
-    // Update the unit's position and state
-    update(units, deltaTime) {
-        if (!this.isAlive) {
-            this.deadTimer += deltaTime;
-            if (this.deadTimer > 3000) {
-                this.respawn();
-            }
-            return;
-        }
-
-        if (!this.target || !this.target.isAlive) {
-            this.findNewTarget(units);
-        }
-
-        if (this.attackCooldown > 0) {
-            this.attackCooldown -= deltaTime;
-        }
-
-        if (this.target) {
-            // Calculate distance to target
-            const dx = this.target.x - this.x;
-            const dy = this.target.y - this.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-
-            if (distance <= this.attackRange) {
-                // Attack if in range
-                this.status = 'Attacking';
-                if (this.attackCooldown <= 0) {
-                    this.attackTarget();
-                }
-            } else {
-                // Move towards target
-                this.status = 'Moving';
-                const angle = Math.atan2(dy, dx);
-                const moveDistance = this.speed * deltaTime / 16;
-
-                this.x += Math.cos(angle) * moveDistance;
-                this.y += Math.sin(angle) * moveDistance;
-            }
-        } else {
-            this.status = 'Idle';
-            // Random wandering
-            if (Math.random() < 0.01) {
-                this.targetX = Math.random() * canvas.width;
-                this.targetY = Math.random() * canvas.height;
-            }
-
-            // Move towards random target
-            const dx = this.targetX - this.x;
-            const dy = this.targetY - this.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-
-            if (distance > 5) {
-                const angle = Math.atan2(dy, dx);
-                const moveDistance = this.speed * deltaTime / 32;
-
-                this.x += Math.cos(angle) * moveDistance;
-                this.y += Math.sin(angle) * moveDistance;
-            }
-        }
-    }
-
-    // Find a new target from the opposing team
-    findNewTarget(units) {
-        let closestDistance = Infinity;
-        let closestTarget = null;
-
-        for (const unit of units) {
-            if (unit.team !== this.team && unit.isAlive) {
-                const dx = unit.x - this.x;
-                const dy = unit.y - this.y;
-                const distance = Math.sqrt(dx * dx + dy * dy);
-
-                if (distance < closestDistance) {
-                    closestDistance = distance;
-                    closestTarget = unit;
-                }
-            }
-        }
-
-        this.target = closestTarget;
-    }
-
-    // Attack the current target
-    attackTarget() {
-        if (!this.target || !this.target.isAlive) return;
-        
-        const damage = Math.max(1, this.attack - this.target.defense / 2);
-        this.target.takeDamage(damage);
-        this.attackCooldown = 1000; // 1 second cooldown
-
-        // Visual feedback (particle effect could be added here)
-    }
-
-    // Take damage from an attack
-    takeDamage(amount) {
-        this.health -= amount;
-        if (this.health <= 0) {
-            this.die();
-        }
-    }
-
-    // Die and set a timer for respawn
-    die() {
-        this.health = 0;
-        this.isAlive = false;
-        this.deadTimer = 0;
-        this.status = 'Dead';
-    }
-
-    // Respawn the unit at a random position on its team's side
-    respawn() {
-        this.health = this.maxHealth;
-        this.isAlive = true;
-        this.status = 'Idle';
-        
-        // Respawn on team's side
-        if (this.team === TEAMS.RED) {
-            this.x = Math.random() * (canvas.width / 3);
-        } else {
-            this.x = canvas.width - Math.random() * (canvas.width / 3);
-        }
-        this.y = Math.random() * canvas.height;
-        
-        this.targetX = this.x;
-        this.targetY = this.y;
-    }
-
-    // Draw the unit on the canvas
-    draw(ctx) {
-        const alpha = this.isAlive ? 1 : 0.3;
-        
-        // Draw health bar
-        if (this.isAlive) {
-            const healthPercent = this.health / this.maxHealth;
-            ctx.fillStyle = `rgba(0, 0, 0, ${alpha * 0.2})`;
-            ctx.fillRect(this.x - this.radius, this.y - this.radius - 10, this.radius * 2, 5);
-            
-            ctx.fillStyle = healthPercent > 0.5 ? `rgba(46, 204, 113, ${alpha})` : 
-                           healthPercent > 0.2 ? `rgba(241, 196, 15, ${alpha})` : 
-                           `rgba(231, 76, 60, ${alpha})`;
-            ctx.fillRect(this.x - this.radius, this.y - this.radius - 10, this.radius * 2 * healthPercent, 5);
-        }
-        
-        // Draw unit body
-        ctx.beginPath();
-        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-        ctx.fillStyle = `rgba(${this.team === TEAMS.RED ? '231, 76, 60' : '52, 152, 219'}, ${alpha})`;
-        ctx.fill();
-        
-        // Draw outline if selected
-        if (this.selected) {
-            ctx.strokeStyle = '#2ecc71';
-            ctx.lineWidth = 2;
-            ctx.stroke();
-        }
-        
-        // Draw unit type indicator
-        ctx.beginPath();
-        if (this.type === UNIT_TYPES.INFANTRY) {
-            ctx.moveTo(this.x - 5, this.y - 5);
-            ctx.lineTo(this.x + 5, this.y - 5);
-            ctx.lineTo(this.x, this.y + 5);
-            ctx.closePath();
-        } else if (this.type === UNIT_TYPES.TANK) {
-            ctx.rect(this.x - 6, this.y - 6, 12, 12);
-        } else if (this.type === UNIT_TYPES.ARTILLERY) {
-            ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
-        }
-        ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.8})`;
-        ctx.fill();
-        
-        // Draw attack line if attacking
-        if (this.target && this.isAlive && this.target.isAlive && this.status === 'Attacking') {
-            ctx.beginPath();
-            ctx.moveTo(this.x, this.y);
-            ctx.lineTo(this.target.x, this.target.y);
-            ctx.strokeStyle = `rgba(255, 0, 0, ${alpha * 0.5})`;
-            ctx.lineWidth = 1;
-            ctx.stroke();
-        }
-    }
-
-    // Check if a point is inside the unit (for click detection)
-    containsPoint(x, y) {
-        const dx = this.x - x;
-        const dy = this.y - y;
-        return dx * dx + dy * dy <= this.radius * this.radius;
-    }
-}
-
-// Create units for both teams
-let units = [];
-let selectedUnit = null;
-let lastTime = 0;
-
-function initializeUnits() {
-    units = [];
-    
-    // Create Red team units
-    createUnits(10, UNIT_TYPES.INFANTRY, TEAMS.RED, 0, canvas.width / 3, 0, canvas.height);
-    createUnits(5, UNIT_TYPES.TANK, TEAMS.RED, 0, canvas.width / 3, 0, canvas.height);
-    createUnits(3, UNIT_TYPES.ARTILLERY, TEAMS.RED, 0, canvas.width / 3, 0, canvas.height);
-    
-    // Create Blue team units
-    createUnits(10, UNIT_TYPES.INFANTRY, TEAMS.BLUE, canvas.width * 2/3, canvas.width, 0, canvas.height);
-    createUnits(5, UNIT_TYPES.TANK, TEAMS.BLUE, canvas.width * 2/3, canvas.width, 0, canvas.height);
-    createUnits(3, UNIT_TYPES.ARTILLERY, TEAMS.BLUE, canvas.width * 2/3, canvas.width, 0, canvas.height);
-}
-
-function createUnits(count, type, team, minX, maxX, minY, maxY) {
-    for (let i = 0; i < count; i++) {
-        const x = minX + Math.random() * (maxX - minX);
-        const y = minY + Math.random() * (maxY - minY);
-        const unit = new Unit(units.length, type, team, x, y);
-        units.push(unit);
-    }
-}
-
-// Main game loop
-function gameLoop(currentTime) {
-    if (!lastTime) lastTime = currentTime;
-    const deltaTime = currentTime - lastTime;
-    lastTime = currentTime;
-    
-    // Clear the canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    
-    // Update and draw all units
-    for (const unit of units) {
-        unit.update(units, deltaTime);
-    }
-    
-    // Draw in two passes to ensure selected units appear on top
-    // First draw non-selected units
-    for (const unit of units) {
-        if (!unit.selected) {
-            unit.draw(ctx);
-        }
-    }
-    
-    // Then draw selected units
-    for (const unit of units) {
-        if (unit.selected) {
-            unit.draw(ctx);
-        }
-    }
-    
-    // Continue the game loop
-    requestAnimationFrame(gameLoop);
-}
-
-// Handle clicks on units
-function handleCanvasClick(event) {
-    const rect = canvas.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-    
-    console.log(`Click at coordinates: (${x}, ${y})`);
-    
-    // Deselect any previously selected unit
-    if (selectedUnit) {
-        selectedUnit.selected = false;
-        selectedUnit = null;
-        
-        // Make sure the info panel is hidden when deselecting
-        document.getElementById('info-panel').classList.add('hidden');
-    }
-    
-    // Check if a unit was clicked
-    let unitClicked = false;
-    
-    for (let i = units.length - 1; i >= 0; i--) {
-        const unit = units[i];
-        if (unit.containsPoint(x, y)) {
-            console.log(`Unit clicked: ${unit.team.name} ${unit.type.name} (${unit.id})`);
-            selectedUnit = unit;
-            unit.selected = true;
-            unitClicked = true;
-            
-            // Update info panel with unit details
-            const nameElement = document.getElementById('unit-name');
-            const typeElement = document.getElementById('unit-type').querySelector('span');
-            const healthElement = document.getElementById('unit-health').querySelector('span');
-            const attackElement = document.getElementById('unit-attack').querySelector('span');
-            const defenseElement = document.getElementById('unit-defense').querySelector('span');
-            const statusElement = document.getElementById('unit-status').querySelector('span');
-            
-            nameElement.textContent = `${unit.team.name} ${unit.type.name}`;
-            typeElement.textContent = unit.type.name;
-            healthElement.textContent = `${Math.max(0, Math.floor(unit.health))} / ${unit.maxHealth}`;
-            attackElement.textContent = unit.attack;
-            defenseElement.textContent = unit.defense;
-            statusElement.textContent = unit.status;
-            
-            // Set team color for the unit name
-            nameElement.style.color = unit.team.primaryColor;
-            
-            // Show the info panel
-            const infoPanel = document.getElementById('info-panel');
-            infoPanel.classList.remove('hidden');
-            
-            break;
-        }
-    }
-    
-    if (!unitClicked) {
-        console.log("No unit clicked");
-    }
-}
-
-// Initialize the game
-function initializeGame() {
-    // Initialize game components
-    initializeUnits();
-    
-    // Add event listeners
-    canvas.addEventListener('click', handleCanvasClick);
-    
-    document.getElementById('close-info').addEventListener('click', () => {
-        document.getElementById('info-panel').classList.add('hidden');
-        if (selectedUnit) {
-            selectedUnit.selected = false;
-            selectedUnit = null;
-        }
-    });
-    
-    // Start the game loop
-    requestAnimationFrame(gameLoop);
-    
-    console.log("Battle simulator initialized successfully");
-}

styles.css

@@ -1,95 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
-    padding: 20px;
-}
-
-.container {
-    max-width: 1000px;
-    margin: 0 auto;
-    background-color: white;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
-h1 {
-    text-align: center;
-    margin-bottom: 20px;
-    color: #333;
-}
-
-.battlefield {
-    position: relative;
-}
-
-canvas {
-    display: block;
-    margin: 0 auto;
-    border: 1px solid #ccc;
-    background-color: #e8f4e5;
-}
-
-#info-panel {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background-color: rgba(255, 255, 255, 0.95);
-    padding: 20px;
-    border-radius: 8px;
-    border: 2px solid #4a6ea9;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-    width: 300px;
-    z-index: 10;
-    transition: all 0.3s ease;
-    animation: fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-#info-panel h3 {
-    margin-bottom: 15px;
-    color: #333;
-    border-bottom: 1px solid #ddd;
-    padding-bottom: 10px;
-}
-
-#info-panel p {
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-}
-
-#close-info {
-    display: block;
-    margin: 20px auto 0;
-    padding: 8px 16px;
-    background-color: #4a6ea9;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-#close-info:hover {
-    background-color: #3a5a89;
-}
-
-.hidden {
-    display: none;
-}