updated

Dockerfile

@@ -1,27 +0,0 @@
-FROM python:3.10-slim
-
-WORKDIR /app
-
-# Copy requirements first for better caching
-COPY requirements.txt /app/
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Copy all application files
-COPY app.py /app/
-COPY README.md /app/
-
-# Set proper permissions
-RUN chmod -R 755 /app
-
-# Expose port 8501 (Streamlit's default port)
-EXPOSE 8501
-
-# Set environment variables
-ENV PYTHONUNBUFFERED=1
-ENV STREAMLIT_SERVER_PORT=8501
-ENV STREAMLIT_SERVER_HEADLESS=true
-ENV STREAMLIT_SERVER_ENABLE_CORS=false
-ENV STREAMLIT_BROWSER_GATHER_USAGE_STATS=false
-
-# Run the Streamlit app
-CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

README.md

@@ -3,6 +3,6 @@ title: HF Map
 emoji: 💻
 colorFrom: purple
 colorTo: green
-sdk: streamlit
+sdk: static
 pinned: false
 ---

app.py

@@ -1,599 +0,0 @@
-import streamlit as st
-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 config
-st.set_page_config(
-    page_title="Battle Simulator",
-    page_icon="🎮",
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
-
-# 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"
-}
-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
-    }
-}
-
-# Utility functions
-def calculate_distance(x1, y1, x2, y2):
-    """Calculate Euclidean distance between two points"""
-    return math.sqrt((x2 - x1)**2 + (y2 - y1)**2)
-
-def angle_between(x1, y1, x2, y2):
-    """Calculate angle between two points in radians"""
-    return math.atan2(y2 - y1, x2 - x1)
-
-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
-
-    def find_target(self, units):
-        """Find nearest enemy unit"""
-        if self.state == "dead":
-            return
-
-        nearest_dist = float("inf")
-        nearest_enemy = None
-
-        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
-
-        self.target = nearest_enemy
-
-    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
-
-        # 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"
-
-        # 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))
-
-        # Move toward target position
-        self.move()
-        
-        # Update attack cooldown
-        if self.attack_cooldown > 0:
-            self.attack_cooldown -= 1
-            
-        # 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)
-        
-        if dist > 5:
-            self.x += (dx / dist) * self.speed
-            self.y += (dy / dist) * self.speed
-            
-        # 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)
-            
-            # 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
-            }
-            
-            # 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
-            
-        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
-            ))
-            
-        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
-            ))
-            
-        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
-            ))
-            
-        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
-            ))
-            
-        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
-            ))
-    
-    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
-
-def get_unit_info_html(unit):
-    """Generate HTML for unit info panel"""
-    if not unit:
-        return ""
-        
-    type_icon = {
-        "infantry": "⭕",
-        "tank": "⬛",
-        "artillery": "△"
-    }.get(unit.type, "")
-    
-    team_color = TEAM_COLORS[unit.team]
-    
-    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
-    
-    # Title and description
-    st.title("Battle Simulator")
-    st.markdown("An interactive battle simulation where red and blue forces fight on a dynamic battlefield.")
-    
-    # Create a layout with columns
-    col1, col2 = st.columns([3, 1])
-    
-    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)
-        
-        # Use a streamlit empty element to trigger rerun on map click
-        map_click = st.empty()
-        
-    with col2:
-        # Show information about selected unit
-        st.markdown("### Unit Information")
-        
-        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)
-    
-    # Handle map clicks
-    clicked = st.button('Refresh Battle State', key='refresh_battle')
-    
-    # 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
-    
-    # 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'));
-            }
-        });
-        
-        // 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>
-    """, unsafe_allow_html=True)
-
-if __name__ == "__main__":
-    main()

docker-compose.yml

@@ -1,17 +0,0 @@
-version: '3'
-
-services:
-  battle-simulator:
-    build: .
-    ports:
-      - "8501:8501"
-    volumes:
-      - ./app.py:/app/app.py
-      - ./requirements.txt:/app/requirements.txt
-    environment:
-      - STREAMLIT_SERVER_PORT=8501
-      - STREAMLIT_SERVER_HEADLESS=true
-      - STREAMLIT_SERVER_ENABLE_CORS=false
-      - PYTHONUNBUFFERED=1
-    # Restart policy
-    restart: unless-stopped

index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Battlefield Simulator</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Battlefield Simulator</h1>
+            <div class="timer">
+                <span id="day-counter">Day 1 - 00:00 hours</span>
+                <button id="pause-button">Pause</button>
+            </div>
+        </header>
+        <main>
+            <div id="map"></div>
+            <div class="info-panel">
+                <h2>Unit Information</h2>
+                <div id="unit-info">
+                    <p class="no-unit-selected">Click on a unit to see details</p>
+                </div>
+            </div>
+        </main>
+        <footer>
+            <div class="legend">
+                <div class="legend-item">
+                    <div class="circle blue"></div>
+                    <span>Blue Forces</span>
+                </div>
+                <div class="legend-item">
+                    <div class="circle red"></div>
+                    <span>Red Forces</span>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

requirements.txt

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

script.js

@@ -0,0 +1,439 @@
+// Map initialization
+let map;
+let units = [];
+let selectedUnit = null;
+let isPaused = false;
+let dayCounter = 1;
+let hourCounter = 0;
+let battleIntervals = [];
+let timer;
+
+// Unit types with their properties
+const unitTypes = {
+    infantry: { speed: 0.001, attackPower: 10, range: 0.01, icon: '👤' },
+    armor: { speed: 0.002, attackPower: 25, range: 0.015, icon: '🛡️' },
+    artillery: { speed: 0.0005, attackPower: 30, range: 0.03, icon: '💥' },
+    recon: { speed: 0.003, attackPower: 5, range: 0.02, icon: '🔍' },
+    airDefense: { speed: 0.0008, attackPower: 20, range: 0.025, icon: '🚀' },
+    command: { speed: 0.0006, attackPower: 5, range: 0.015, icon: '⭐' },
+    medical: { speed: 0.001, attackPower: 0, range: 0.008, icon: '🩺' }
+};
+
+// Initialize the map when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initializeMap();
+    generateUnits();
+    placeUnitsOnMap();
+    startSimulation();
+    
+    // Set up event listener for pause button
+    document.getElementById('pause-button').addEventListener('click', togglePause);
+});
+
+function initializeMap() {
+    // Create map centered on a fictional battle area
+    map = L.map('map').setView([40.7, -74.0], 13);
+    
+    // Add the base map tiles (OpenStreetMap)
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        maxZoom: 19
+    }).addTo(map);
+}
+
+function generateUnits() {
+    // Generate blue forces
+    for (let i = 0; i < 15; i++) {
+        const type = getRandomUnitType();
+        units.push({
+            id: `blue-${i}`,
+            name: `Blue Force ${getUnitName(type)} ${i + 1}`,
+            type: type,
+            faction: 'blue',
+            strength: Math.floor(Math.random() * 50) + 50, // 50-99
+            health: 100,
+            status: getRandomStatus(),
+            lat: 40.7 + (Math.random() * 0.05 - 0.025), // Around the center
+            lng: -74.0 + (Math.random() * 0.05 - 0.025),
+            targetLat: null,
+            targetLng: null,
+            marker: null,
+            icon: unitTypes[type].icon,
+            speed: unitTypes[type].speed,
+            attackPower: unitTypes[type].attackPower,
+            range: unitTypes[type].range,
+            inBattle: false,
+            movingToTarget: false,
+            kills: 0,
+            lastMoveTimestamp: Date.now()
+        });
+    }
+    
+    // Generate red forces
+    for (let i = 0; i < 15; i++) {
+        const type = getRandomUnitType();
+        units.push({
+            id: `red-${i}`,
+            name: `Red Force ${getUnitName(type)} ${i + 1}`,
+            type: type,
+            faction: 'red',
+            strength: Math.floor(Math.random() * 50) + 50, // 50-99
+            health: 100,
+            status: getRandomStatus(),
+            lat: 40.7 + (Math.random() * 0.05 - 0.025), // Around the center
+            lng: -74.0 + (Math.random() * 0.05 - 0.025),
+            targetLat: null,
+            targetLng: null,
+            marker: null,
+            icon: unitTypes[type].icon,
+            speed: unitTypes[type].speed,
+            attackPower: unitTypes[type].attackPower,
+            range: unitTypes[type].range,
+            inBattle: false,
+            movingToTarget: false,
+            kills: 0,
+            lastMoveTimestamp: Date.now()
+        });
+    }
+}
+
+function getRandomUnitType() {
+    const types = Object.keys(unitTypes);
+    return types[Math.floor(Math.random() * types.length)];
+}
+
+function getUnitName(type) {
+    const names = {
+        infantry: 'Battalion',
+        armor: 'Tank Division',
+        artillery: 'Artillery Battery',
+        recon: 'Reconnaissance Unit',
+        airDefense: 'Air Defense Unit',
+        command: 'Command Center',
+        medical: 'Medical Corps'
+    };
+    return names[type] || 'Unit';
+}
+
+function getRandomStatus() {
+    const statuses = ['Operational', 'Engaged', 'Advancing', 'Defending', 'Flanking', 'Retreating'];
+    return statuses[Math.floor(Math.random() * statuses.length)];
+}
+
+function placeUnitsOnMap() {
+    units.forEach(unit => {
+        const markerSize = unit.strength / 15 + 20; // Size based on strength
+        
+        // Create custom HTML element for the marker
+        const markerHtml = `
+            <div class="unit-marker ${unit.faction}-unit" style="width: ${markerSize}px; height: ${markerSize}px; line-height: ${markerSize}px; font-size: ${markerSize/2}px;">
+                ${unit.icon}
+            </div>
+        `;
+        
+        // Create the icon
+        const customIcon = L.divIcon({
+            html: markerHtml,
+            className: '',
+            iconSize: [markerSize, markerSize],
+            iconAnchor: [markerSize/2, markerSize/2]
+        });
+        
+        // Create marker and add to map
+        unit.marker = L.marker([unit.lat, unit.lng], { icon: customIcon })
+            .addTo(map)
+            .on('click', function() {
+                selectUnit(unit);
+            });
+    });
+}
+
+function selectUnit(unit) {
+    // Reset previous selection
+    if (selectedUnit) {
+        const prevMarker = selectedUnit.marker;
+        const prevIcon = prevMarker.options.icon;
+        const prevHtml = prevIcon.options.html.replace(' selected', '');
+        
+        const newIcon = L.divIcon({
+            html: prevHtml,
+            className: prevIcon.options.className,
+            iconSize: prevIcon.options.iconSize,
+            iconAnchor: prevIcon.options.iconAnchor
+        });
+        
+        prevMarker.setIcon(newIcon);
+    }
+    
+    // Set new selection
+    selectedUnit = unit;
+    
+    // Update marker to show selection
+    const marker = unit.marker;
+    const icon = marker.options.icon;
+    const newHtml = icon.options.html.replace('unit-marker', 'unit-marker selected');
+    
+    const newIcon = L.divIcon({
+        html: newHtml,
+        className: icon.options.className,
+        iconSize: icon.options.iconSize,
+        iconAnchor: icon.options.iconAnchor
+    });
+    
+    marker.setIcon(newIcon);
+    
+    // Update info panel
+    updateUnitInfo(unit);
+}
+
+function updateUnitInfo(unit) {
+    const unitInfoDiv = document.getElementById('unit-info');
+    
+    let healthClass = unit.health > 70 ? '' : (unit.health > 30 ? 'health-warning' : 'health-critical');
+    
+    unitInfoDiv.innerHTML = `
+        <div class="unit-name">${unit.name}</div>
+        <div class="unit-type">Type: ${getUnitName(unit.type)}</div>
+        <div class="unit-strength">Strength: ${unit.strength} personnel</div>
+        <div class="unit-status">Status: ${unit.status}</div>
+        <div class="unit-health">
+            Health: ${unit.health}%
+            <div class="health-bar ${healthClass}">
+                <div class="health-fill" style="width: ${unit.health}%"></div>
+            </div>
+        </div>
+        <div class="unit-stats">
+            <div>Attack Power: ${unit.attackPower}</div>
+            <div>Range: ${(unit.range * 1000).toFixed(1)} meters</div>
+            <div>Speed: ${(unit.speed * 1000).toFixed(1)}</div>
+            <div>Kills: ${unit.kills}</div>
+        </div>
+        <div class="unit-position">
+            Position: ${unit.lat.toFixed(4)}, ${unit.lng.toFixed(4)}
+        </div>
+    `;
+    
+    // If the unit is in battle, show that information
+    if (unit.inBattle) {
+        unitInfoDiv.innerHTML += `
+            <div class="unit-battle-status">
+                <span style="color: red; font-weight: bold;">⚔️ ENGAGED IN BATTLE ⚔️</span>
+            </div>
+        `;
+    }
+}
+
+function startSimulation() {
+    // Update time every second
+    timer = setInterval(() => {
+        if (!isPaused) {
+            updateTime();
+            
+            // Every 3 seconds, assign new targets to some units
+            if (hourCounter % 3 === 0) {
+                assignRandomTargets();
+            }
+            
+            moveUnits();
+            checkForBattles();
+            
+            // Update the selected unit's info if one is selected
+            if (selectedUnit) {
+                updateUnitInfo(selectedUnit);
+            }
+        }
+    }, 1000);
+}
+
+function updateTime() {
+    hourCounter++;
+    if (hourCounter >= 24) {
+        hourCounter = 0;
+        dayCounter++;
+    }
+    
+    // Format hours with leading zero
+    const formattedHours = hourCounter.toString().padStart(2, '0');
+    document.getElementById('day-counter').textContent = `Day ${dayCounter} - ${formattedHours}:00 hours`;
+}
+
+function togglePause() {
+    isPaused = !isPaused;
+    const pauseButton = document.getElementById('pause-button');
+    pauseButton.textContent = isPaused ? 'Resume' : 'Pause';
+}
+
+function assignRandomTargets() {
+    const activeFactions = ['blue', 'red'];
+    
+    // Randomly select units to assign new targets
+    units.forEach(unit => {
+        // Only assign new targets to units that aren't in battle and at random (30% chance)
+        if (!unit.inBattle && Math.random() < 0.3) {
+            // Find potential enemy targets
+            const enemyFaction = unit.faction === 'blue' ? 'red' : 'blue';
+            const enemies = units.filter(u => u.faction === enemyFaction && u.health > 0);
+            
+            if (enemies.length > 0) {
+                // Choose random enemy as target
+                const target = enemies[Math.floor(Math.random() * enemies.length)];
+                unit.targetLat = target.lat;
+                unit.targetLng = target.lng;
+                unit.movingToTarget = true;
+                unit.status = 'Advancing';
+            }
+        }
+    });
+}
+
+function moveUnits() {
+    const now = Date.now();
+    
+    units.forEach(unit => {
+        // Only move units that are alive and have a target
+        if (unit.health > 0 && unit.movingToTarget && unit.targetLat && unit.targetLng) {
+            const timeDelta = (now - unit.lastMoveTimestamp) / 1000; // Time in seconds since last move
+            unit.lastMoveTimestamp = now;
+            
+            // Calculate direction vector
+            const dLat = unit.targetLat - unit.lat;
+            const dLng = unit.targetLng - unit.lng;
+            
+            // Calculate distance to target
+            const distance = Math.sqrt(dLat * dLat + dLng * dLng);
+            
+            // If we've reached the target (or close enough)
+            if (distance < 0.0005) {
+                unit.movingToTarget = false;
+                unit.status = 'Operational';
+                return;
+            }
+            
+            // Normalize direction vector
+            const magnitude = Math.sqrt(dLat * dLat + dLng * dLng);
+            const dirLat = dLat / magnitude;
+            const dirLng = dLng / magnitude;
+            
+            // Move unit towards target with speed influenced by unit type
+            const moveDistance = unit.speed * timeDelta;
+            unit.lat += dirLat * moveDistance;
+            unit.lng += dirLng * moveDistance;
+            
+            // Update marker position
+            if (unit.marker) {
+                unit.marker.setLatLng([unit.lat, unit.lng]);
+            }
+        }
+    });
+}
+
+function checkForBattles() {
+    // Clear any existing battle animations
+    document.querySelectorAll('.battle-indicator').forEach(el => el.remove());
+    
+    // Check each unit against potential enemies
+    units.forEach(unit => {
+        if (unit.health <= 0) return; // Skip dead units
+        
+        const enemyFaction = unit.faction === 'blue' ? 'red' : 'blue';
+        const enemies = units.filter(u => u.faction === enemyFaction && u.health > 0);
+        
+        // Reset battle state
+        unit.inBattle = false;
+        
+        enemies.forEach(enemy => {
+            // Calculate distance between units
+            const dLat = unit.lat - enemy.lat;
+            const dLng = unit.lng - enemy.lng;
+            const distance = Math.sqrt(dLat * dLat + dLng * dLng);
+            
+            // If within range, start battle
+            if (distance < unit.range) {
+                // Mark both units as in battle
+                unit.inBattle = true;
+                enemy.inBattle = true;
+                
+                // Update statuses
+                unit.status = 'Engaged';
+                enemy.status = 'Engaged';
+                
+                // Create battle animation at midpoint
+                const battleLat = (unit.lat + enemy.lat) / 2;
+                const battleLng = (unit.lng + enemy.lng) / 2;
+                
+                createBattleAnimation(battleLat, battleLng);
+                
+                // Calculate damage based on unit properties (simplified for this demo)
+                const unitDamage = Math.round(Math.random() * unit.attackPower * 0.2);
+                const enemyDamage = Math.round(Math.random() * enemy.attackPower * 0.2);
+                
+                // Apply damage
+                enemy.health = Math.max(0, enemy.health - unitDamage);
+                unit.health = Math.max(0, unit.health - enemyDamage);
+                
+                // Check if unit defeated enemy
+                if (enemy.health <= 0 && unitDamage > 0) {
+                    unit.kills++;
+                    checkUnitDeath(enemy);
+                }
+                
+                // Check if enemy defeated unit
+                if (unit.health <= 0 && enemyDamage > 0) {
+                    enemy.kills++;
+                    checkUnitDeath(unit);
+                    return; // Stop checking more enemies if this unit is dead
+                }
+            }
+        });
+    });
+}
+
+function createBattleAnimation(lat, lng) {
+    // Convert lat/lng to pixel coordinates
+    const point = map.latLngToLayerPoint([lat, lng]);
+    
+    // Create battle indicator element
+    const battleEl = document.createElement('div');
+    battleEl.className = 'battle-indicator';
+    battleEl.style.left = point.x + 'px';
+    battleEl.style.top = point.y + 'px';
+    
+    // Add to map container
+    document.querySelector('#map').appendChild(battleEl);
+    
+    // Remove element after animation completes
+    setTimeout(() => {
+        if (battleEl.parentNode) {
+            battleEl.parentNode.removeChild(battleEl);
+        }
+    }, 2000);
+}
+
+function checkUnitDeath(unit) {
+    if (unit.health <= 0) {
+        // Update the unit's appearance to show it's destroyed
+        if (unit.marker) {
+            // Change the marker to show a destroyed unit (smaller and gray)
+            const markerSize = 15; // Smaller size for destroyed units
+            
+            const markerHtml = `
+                <div class="unit-marker ${unit.faction}-unit" style="width: ${markerSize}px; height: ${markerSize}px; line-height: ${markerSize}px; font-size: ${markerSize/2}px; opacity: 0.5; background-color: #888;">
+                    ☠️
+                </div>
+            `;
+            
+            const destroyedIcon = L.divIcon({
+                html: markerHtml,
+                className: '',
+                iconSize: [markerSize, markerSize],
+                iconAnchor: [markerSize/2, markerSize/2]
+            });
+            
+            unit.marker.setIcon(destroyedIcon);
+        }
+        
+        unit.status = 'Destroyed';
+        unit.movingToTarget = false;
+        unit.inBattle = false;
+    }
+}

style.css

@@ -0,0 +1,214 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    margin-bottom: 1rem;
+}
+
+header h1 {
+    font-size: 1.8rem;
+    color: #2c3e50;
+}
+
+.timer {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#pause-button {
+    padding: 0.4rem 0.8rem;
+    background-color: #3498db;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+#pause-button:hover {
+    background-color: #2980b9;
+}
+
+main {
+    display: flex;
+    flex: 1;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+#map {
+    flex: 3;
+    height: 100%;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.info-panel {
+    flex: 1;
+    background-color: white;
+    padding: 1rem;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
+}
+
+.info-panel h2 {
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #ddd;
+    color: #2c3e50;
+}
+
+#unit-info {
+    line-height: 1.6;
+}
+
+.no-unit-selected {
+    color: #7f8c8d;
+    font-style: italic;
+}
+
+.unit-name {
+    font-weight: bold;
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+    color: #2c3e50;
+}
+
+.unit-type, .unit-strength, .unit-status {
+    margin-bottom: 0.5rem;
+}
+
+.unit-health {
+    margin: 1rem 0;
+}
+
+.health-bar {
+    height: 10px;
+    background-color: #ecf0f1;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-top: 0.3rem;
+}
+
+.health-fill {
+    height: 100%;
+    background-color: #2ecc71;
+    border-radius: 5px;
+    transition: width 0.3s;
+}
+
+.health-critical .health-fill {
+    background-color: #e74c3c;
+}
+
+.health-warning .health-fill {
+    background-color: #f39c12;
+}
+
+.unit-actions {
+    margin-top: 1rem;
+}
+
+footer {
+    padding: 0.5rem 0;
+}
+
+.legend {
+    display: flex;
+    gap: 1.5rem;
+    justify-content: center;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.circle {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+}
+
+.blue {
+    background-color: #3498db;
+}
+
+.red {
+    background-color: #e74c3c;
+}
+
+/* Map marker styles */
+.unit-marker {
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-weight: bold;
+    border: 2px solid white;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.unit-marker:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    z-index: 1000 !important;
+}
+
+.unit-marker.blue-unit {
+    background-color: #3498db;
+}
+
+.unit-marker.red-unit {
+    background-color: #e74c3c;
+}
+
+.unit-marker.selected {
+    transform: scale(1.2);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
+    z-index: 1000 !important;
+}
+
+/* Battle animation */
+@keyframes battle-pulse {
+    0% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.5); opacity: 0.7; }
+    100% { transform: scale(2); opacity: 0; }
+}
+
+.battle-indicator {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-color: yellow;
+    border-radius: 50%;
+    pointer-events: none;
+    animation: battle-pulse 1s infinite;
+}