updated

Dockerfile

@@ -11,23 +11,22 @@ COPY index.html /app/
 COPY styles.css /app/
 COPY script.js /app/
 COPY app.py /app/
-COPY healthcheck.html /app/
-COPY interface.py /app/
 
 # Set proper permissions
 RUN chmod -R 755 /app
 
-# Expose ports (Gradio uses 7860 by default)
-EXPOSE 7860
-EXPOSE 8080
+# Expose port 8501 (Streamlit's default port)
+EXPOSE 8501
 
 # Set environment variables
 ENV PYTHONUNBUFFERED=1
-ENV DOCKER_CONTAINER=true
-ENV HF_SPACE=true
+ENV STREAMLIT_SERVER_PORT=8501
+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 Gradio interface
-CMD ["python", "-u", "interface.py"]
+# Run the Streamlit app
+CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

README.md

@@ -81,13 +81,13 @@ This application can also be run using Docker, which ensures consistent behavior
 
 ### Deploying to Hugging Face Spaces
 
-This application is compatible with Hugging Face Spaces Docker deployments. The Docker configuration has been specifically designed for the Hugging Face Spaces environment:
+This application is fully compatible with Hugging Face Spaces and uses Streamlit for the deployment:
 
-1. **Simple Python HTTP Server**: Instead of using Nginx (which has permission issues on Spaces), we use Python's built-in HTTP server
-2. **Port 8080**: The web server listens on port 8080 (the default port expected by Hugging Face Spaces)
-3. **Python-based Entry Point**: Using app.py as the main entry point improves compatibility with Hugging Face's environment
-4. **Minimal Dependencies**: No complex web server configurations required, making deployment more reliable
-5. **Environment Variable Integration**: The app detects when it's running in a Docker container on Hugging Face
+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:
 

app.py

@@ -1,67 +1,654 @@
+import streamlit as st
 import os
-import http.server
-import socketserver
-import threading
-import time
-
-# This file is for serving our static app on Hugging Face Spaces
-
-# Configuration
-PORT = int(os.environ.get("PORT", 8080))
-HOST = "0.0.0.0"  # Listen on all interfaces
-DIRECTORY = os.path.dirname(os.path.abspath(__file__))
-
-# Change to the directory with our static files
-os.chdir(DIRECTORY)
-
-# Custom request handler with better error handling
-class CustomHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
-    # Set correct MIME types
-    extensions_map = {
-        '.html': 'text/html',
-        '.css': 'text/css',
-        '.js': 'application/javascript',
-        '.json': 'application/json',
-        '.png': 'image/png',
-        '.jpg': 'image/jpeg',
-        '.jpeg': 'image/jpeg',
-        '.gif': 'image/gif',
-        '.svg': 'image/svg+xml',
-        '': 'application/octet-stream',
-    }
-    
-    def log_message(self, format, *args):
-        # Enhanced logging
-        print(f"[{self.log_date_time_string()}] {format % args}")
-    
-    def do_GET(self):
-        # Handle specific paths
-        if self.path == '/' or self.path == '':
-            self.path = '/index.html'
-        
-        # Print detailed request info for debugging
-        print(f"Handling request for: {self.path}")
-        
-        # Serve the file
-        return http.server.SimpleHTTPRequestHandler.do_GET(self)
-
-# Print startup information
-print("=" * 60)
-print(f"Starting Battle Simulator Server")
-print(f"Current directory: {DIRECTORY}")
-print(f"Files in directory:")
-for file in os.listdir(DIRECTORY):
-    print(f"  - {file}")
-print(f"Listening on {HOST}:{PORT}")
-print("=" * 60)
-
-# Create and start the server
-handler = CustomHTTPRequestHandler
-httpd = socketserver.TCPServer((HOST, PORT), handler)
-
-# Print ready message
-print(f"Server started - Battle Simulator ready!")
-print(f"Open the 'App' tab to view the application")
-
-# Start serving
-httpd.serve_forever()
+
+# Set page configuration
+st.set_page_config(
+    page_title="Battle Simulator",
+    page_icon="🎮",
+    layout="wide"
+)
+
+# 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;
+}
+
+.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;
+}
+    </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>
+
+    <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;
+        }
+        
+        // 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)
+            );
+            
+            // 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;
+        
+        for (const unit of units) {
+            // Skip if same team or dead
+            if (unit.team === this.team || unit.state === 'dead') continue;
+            
+            const dist = Math.sqrt(
+                Math.pow(unit.x - this.x, 2) + 
+                Math.pow(unit.y - this.y, 2)
+            );
+            
+            if (dist < nearestDist) {
+                nearestDist = dist;
+                this.target = unit;
+            }
+        }
+    }
+    
+    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);
+            
+            // 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
+            };
+            
+            // 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;
+            
+            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));
+            
+            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();
+            
+            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;
+    }
+    
+    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)
+        };
+    }
+}
+
+// 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');
+    
+    let units = [];
+    let selectedUnit = null;
+    
+    // Create initial units
+    createUnits();
+    
+    // Set up game loop
+    setInterval(updateGame, 1000 / 60); // 60 FPS
+    
+    // Add event listeners
+    canvas.addEventListener('click', handleCanvasClick);
+    closeInfoBtn.addEventListener('click', closeInfoPanel);
+    
+    function createUnits() {
+        // Clear existing units
+        units = [];
+        
+        // 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));
+        }
+        
+        // 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);
+        }
+        
+        // Update display
+        drawGame();
+    }
+    
+    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);
+        }
+    }
+    
+    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);
+    }
+    
+    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;
+            }
+        }
+        
+        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
+    </script>
+</body>
+</html>
+"""
+
+# 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('.'))}")

requirements.txt

@@ -1 +1 @@
-gradio>=3.50.2
+streamlit>=1.22.0