updated

index.html

@@ -19,9 +19,41 @@
         <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 class="panel-section">
+                    <h2>Unit Information</h2>
+                    <div id="unit-info">
+                        <p class="no-unit-selected">Click on a unit to see details</p>
+                    </div>
+                </div>
+                <div class="panel-section">
+                    <h2>Battle Statistics</h2>
+                    <div id="battle-stats">
+                        <div class="stat-row">
+                            <div class="stat-label">Active Units:</div>
+                            <div class="stat-value"><span id="blue-active">15</span> 🔵 vs <span id="red-active">15</span> 🔴</div>
+                        </div>
+                        <div class="stat-row">
+                            <div class="stat-label">Casualties:</div>
+                            <div class="stat-value"><span id="blue-casualties">0</span> 🔵 | <span id="red-casualties">0</span> 🔴</div>
+                        </div>
+                        <div class="stat-row">
+                            <div class="stat-label">Reinforcements:</div>
+                            <div class="stat-value"><span id="blue-reinforcements">0</span> 🔵 | <span id="red-reinforcements">0</span> 🔴</div>
+                        </div>
+                        <div class="stat-row">
+                            <div class="stat-label">Active Battles:</div>
+                            <div class="stat-value"><span id="active-battles">0</span></div>
+                        </div>
+                        <div class="stat-row">
+                            <div class="stat-label">Territory Control:</div>
+                            <div class="stat-value">
+                                <div class="control-bar">
+                                    <div id="blue-control" class="blue-control" style="width: 50%"></div>
+                                    <div id="red-control" class="red-control" style="width: 50%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </main>

script.js

@@ -8,15 +8,40 @@ let hourCounter = 0;
 let battleIntervals = [];
 let timer;
 
-// Unit types with their properties
+// Battle statistics
+let statistics = {
+    blueActive: 15,
+    redActive: 15,
+    blueCasualties: 0,
+    redCasualties: 0,
+    blueReinforcements: 0,
+    redReinforcements: 0,
+    activeBattles: 0,
+    blueControl: 50,
+    redControl: 50,
+    nextUnitId: 30 // Starting after initial 30 units (15 blue + 15 red)
+};
+
+// Unit types with their properties - expanded with new types that unlock over time
 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: '🩺' }
+    // Base units available from start
+    infantry: { speed: 0.001, attackPower: 10, range: 0.01, icon: '👤', unlockDay: 0 },
+    armor: { speed: 0.002, attackPower: 25, range: 0.015, icon: '🛡️', unlockDay: 0 },
+    artillery: { speed: 0.0005, attackPower: 30, range: 0.03, icon: '💥', unlockDay: 0 },
+    recon: { speed: 0.003, attackPower: 5, range: 0.02, icon: '🔍', unlockDay: 0 },
+    airDefense: { speed: 0.0008, attackPower: 20, range: 0.025, icon: '🚀', unlockDay: 0 },
+    command: { speed: 0.0006, attackPower: 5, range: 0.015, icon: '⭐', unlockDay: 0 },
+    medical: { speed: 0.001, attackPower: 0, range: 0.008, icon: '🩺', unlockDay: 0 },
+    
+    // Units that unlock over time
+    airborne: { speed: 0.0025, attackPower: 15, range: 0.02, icon: '🪂', unlockDay: 2 },
+    specialForces: { speed: 0.0035, attackPower: 18, range: 0.015, icon: '🥷', unlockDay: 3 },
+    mechanized: { speed: 0.0015, attackPower: 22, range: 0.018, icon: '🚜', unlockDay: 4 },
+    engineers: { speed: 0.001, attackPower: 8, range: 0.01, icon: '🔧', unlockDay: 5, special: 'fortify' },
+    naval: { speed: 0.0008, attackPower: 35, range: 0.04, icon: '⚓', unlockDay: 6 },
+    airForce: { speed: 0.004, attackPower: 28, range: 0.05, icon: '✈️', unlockDay: 7 },
+    missile: { speed: 0.0005, attackPower: 40, range: 0.06, icon: '🚀', unlockDay: 10 },
+    elite: { speed: 0.002, attackPower: 35, range: 0.03, icon: '👑', unlockDay: 15 }
 };
 
 // Initialize the map when the DOM is fully loaded
@@ -98,8 +123,24 @@ function generateUnits() {
 }
 
 function getRandomUnitType() {
-    const types = Object.keys(unitTypes);
-    return types[Math.floor(Math.random() * types.length)];
+    // Filter unit types based on the current day
+    const availableTypes = Object.entries(unitTypes)
+        .filter(([type, properties]) => properties.unlockDay <= dayCounter)
+        .map(([type]) => type);
+    
+    // Give higher probability to newly unlocked units to make them more noticeable
+    const newlyUnlockedTypes = availableTypes.filter(type =>
+        unitTypes[type].unlockDay === dayCounter);
+    
+    // 30% chance to select a newly unlocked unit type if available
+    if (newlyUnlockedTypes.length > 0 && Math.random() < 0.3) {
+        const randomIndex = Math.floor(Math.random() * newlyUnlockedTypes.length);
+        return newlyUnlockedTypes[randomIndex];
+    }
+    
+    // Otherwise select randomly from all available types
+    const randomIndex = Math.floor(Math.random() * availableTypes.length);
+    return availableTypes[randomIndex];
 }
 
 function getUnitName(type) {
@@ -110,7 +151,16 @@ function getUnitName(type) {
         recon: 'Reconnaissance Unit',
         airDefense: 'Air Defense Unit',
         command: 'Command Center',
-        medical: 'Medical Corps'
+        medical: 'Medical Corps',
+        // New unit types
+        airborne: 'Airborne Division',
+        specialForces: 'Special Forces',
+        mechanized: 'Mechanized Infantry',
+        engineers: 'Combat Engineers',
+        naval: 'Naval Support',
+        airForce: 'Air Squadron',
+        missile: 'Missile Battery',
+        elite: 'Elite Force'
     };
     return names[type] || 'Unit';
 }
@@ -229,13 +279,50 @@ function startSimulation() {
         if (!isPaused) {
             updateTime();
             
-            // Every 3 seconds, assign new targets to some units
-            if (hourCounter % 3 === 0) {
+            // More frequent target assignments on busier days
+            if (hourCounter % (3 - Math.min(2, Math.floor(dayCounter / 5))) === 0) {
                 assignRandomTargets();
             }
             
+            // Dynamic reinforcement spawning
+            // Base chance increases with time and if there are fewer active battles
+            const baseSpawnChance = 0.15 + (dayCounter / 50);
+            const battleAdjustment = Math.max(0, 0.1 - (statistics.activeBattles / 30));
+            
+            if (Math.random() < baseSpawnChance + battleAdjustment) {
+                spawnReinforcements();
+            }
+            
+            // Create sudden "hot zones" where units are redirected
+            if (Math.random() < 0.03) {
+                createHotZone();
+            }
+            
             moveUnits();
             checkForBattles();
+            updateBattleStatistics();
+            
+            // Increase frequency of random events for more action
+            if (Math.random() < 0.05) {  // 5x more frequent events
+                triggerRandomEvent();
+            }
+            
+            // Ensure battle never ends by checking unit counts and adding reinforcements if needed
+            const blueSurvivors = units.filter(u => u.faction === 'blue' && u.health > 0).length;
+            const redSurvivors = units.filter(u => u.faction === 'red' && u.health > 0).length;
+            
+            // If either faction is below minimum threshold, add emergency reinforcements
+            const MIN_UNITS_PER_FACTION = 8;  // Ensure at least 8 units per side
+            if (blueSurvivors < MIN_UNITS_PER_FACTION) {
+                for (let i = 0; i < (MIN_UNITS_PER_FACTION - blueSurvivors); i++) {
+                    spawnNewUnit('blue');
+                }
+            }
+            if (redSurvivors < MIN_UNITS_PER_FACTION) {
+                for (let i = 0; i < (MIN_UNITS_PER_FACTION - redSurvivors); i++) {
+                    spawnNewUnit('red');
+                }
+            }
             
             // Update the selected unit's info if one is selected
             if (selectedUnit) {
@@ -245,16 +332,1263 @@ function startSimulation() {
     }, 1000);
 }
 
+// Helper function to get a random unit type based on day counter
+function getRandomUnitType() {
+    // Get all unit types that have been unlocked by the current day
+    const availableTypes = Object.entries(unitTypes)
+        .filter(([type, properties]) => properties.unlockDay <= dayCounter)
+        .map(([type]) => type);
+    
+    // Select a random type from available ones
+    return availableTypes[Math.floor(Math.random() * availableTypes.length)];
+}
+
+// Helper function to get a formatted name for a unit type
+function getUnitName(type) {
+    // Format the type name with proper capitalization and spacing
+    const formattedName = type
+        .replace(/([A-Z])/g, ' $1') // Add space before capital letters
+        .replace(/^./, str => str.toUpperCase()); // Capitalize first letter
+    
+    return formattedName;
+}
+
+function createHotZone() {
+    // Create a random focal point on the map with faction control bias
+    // This makes hotspots appear more often in controlled territory
+    let hotspotLat, hotspotLng;
+    
+    if (Math.random() < 0.5) {
+        // Neutral hotspot
+        hotspotLat = 40.7 + (Math.random() * 0.1 - 0.05);
+        hotspotLng = -74.0 + (Math.random() * 0.1 - 0.05);
+    } else {
+        // Faction-biased hotspot
+        const dominantFaction = statistics.blueControl > statistics.redControl ? 'blue' : 'red';
+        
+        if (dominantFaction === 'blue') {
+            // Blue territory tends to be west/south
+            hotspotLat = 40.68 + (Math.random() * 0.06);
+            hotspotLng = -74.03 - (Math.random() * 0.04);
+        } else {
+            // Red territory tends to be east/north
+            hotspotLat = 40.72 + (Math.random() * 0.06);
+            hotspotLng = -73.97 - (Math.random() * 0.04);
+        }
+    }
+    
+    // Divert some portion of units to this hotspot
+    units.forEach(unit => {
+        if (unit.health > 0 && Math.random() < 0.3) {
+            unit.targetLat = hotspotLat;
+            unit.targetLng = hotspotLng;
+            unit.movingToTarget = true;
+            unit.status = 'Redeploying';
+        }
+    });
+    
+    // Determine the type of hotspot (battle, supply drop, strategic location)
+    const hotspotTypes = [
+        { name: 'battle', probability: 0.5, color: 'rgba(255, 0, 0, 0.2)', shadowColor: 'rgba(255, 0, 0, 0.5)' },
+        { name: 'supply', probability: 0.3, color: 'rgba(0, 255, 0, 0.2)', shadowColor: 'rgba(0, 255, 0, 0.5)' },
+        { name: 'strategic', probability: 0.2, color: 'rgba(255, 255, 0, 0.2)', shadowColor: 'rgba(255, 255, 0, 0.5)' }
+    ];
+    
+    // Select a hotspot type based on probability
+    let hotspotType;
+    const random = Math.random();
+    let cumulativeProbability = 0;
+    
+    for (const type of hotspotTypes) {
+        cumulativeProbability += type.probability;
+        if (random < cumulativeProbability) {
+            hotspotType = type;
+            break;
+        }
+    }
+    
+    // Determine if this is a major event (less common, but more dramatic)
+    const isMajorEvent = Math.random() < 0.3;
+    const size = isMajorEvent ? 60 : 40;
+    const duration = isMajorEvent ? 8000 : 4000;
+    
+    // Create visual effect for the hotspot
+    const point = map.latLngToLayerPoint([hotspotLat, hotspotLng]);
+    
+    // Create main hotspot element
+    const hotspotEl = document.createElement('div');
+    hotspotEl.style.position = 'absolute';
+    hotspotEl.style.left = (point.x - size/2) + 'px';
+    hotspotEl.style.top = (point.y - size/2) + 'px';
+    hotspotEl.style.width = size + 'px';
+    hotspotEl.style.height = size + 'px';
+    hotspotEl.style.backgroundColor = hotspotType.color;
+    hotspotEl.style.borderRadius = '50%';
+    hotspotEl.style.zIndex = '600';
+    hotspotEl.style.boxShadow = `0 0 ${size/2}px ${hotspotType.shadowColor}`;
+    hotspotEl.style.animation = `battle-expand ${duration/1000}s forwards`;
+    
+    // Add pulsing effect to make it more dynamic
+    const pulseAnimation = document.createElement('style');
+    pulseAnimation.textContent = `
+        @keyframes pulse-${Date.now()} {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.2); opacity: 0.8; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+    `;
+    document.head.appendChild(pulseAnimation);
+    hotspotEl.style.animation = `pulse-${Date.now()} 1.5s infinite`;
+    
+    document.querySelector('#map').appendChild(hotspotEl);
+    
+    // Add secondary ring effect for major events
+    if (isMajorEvent) {
+        const outerRing = document.createElement('div');
+        outerRing.style.position = 'absolute';
+        outerRing.style.left = (point.x - size) + 'px';
+        outerRing.style.top = (point.y - size) + 'px';
+        outerRing.style.width = (size * 2) + 'px';
+        outerRing.style.height = (size * 2) + 'px';
+        outerRing.style.border = `2px solid ${hotspotType.color}`;
+        outerRing.style.borderRadius = '50%';
+        outerRing.style.zIndex = '599';
+        outerRing.style.opacity = '0.7';
+        
+        // Outward expansion animation
+        const expandAnimation = document.createElement('style');
+        expandAnimation.textContent = `
+            @keyframes expand-${Date.now()} {
+                0% { transform: scale(0.5); opacity: 0.7; }
+                100% { transform: scale(2); opacity: 0; }
+            }
+        `;
+        document.head.appendChild(expandAnimation);
+        outerRing.style.animation = `expand-${Date.now()} 4s infinite`;
+        
+        document.querySelector('#map').appendChild(outerRing);
+        
+        // Add notification for major events
+        let eventTitle = '';
+        let eventDesc = '';
+        
+        if (hotspotType.name === 'battle') {
+            eventTitle = 'Major Battle Erupting';
+            eventDesc = 'Heavy fighting reported in sector';
+        } else if (hotspotType.name === 'supply') {
+            eventTitle = 'Supply Drop Zone';
+            eventDesc = 'Critical supplies have been airdropped';
+        } else {
+            eventTitle = 'Strategic Location';
+            eventDesc = 'Forces moving to secure key position';
+        }
+        
+        displayEventNotification(eventTitle, eventDesc);
+        
+        // Remove the outer ring after the duration
+        setTimeout(() => {
+            if (outerRing.parentNode) {
+                outerRing.parentNode.removeChild(outerRing);
+            }
+        }, duration);
+    }
+    
+    // Remove the hotspot element after the duration
+    setTimeout(() => {
+        if (hotspotEl.parentNode) {
+            hotspotEl.parentNode.removeChild(hotspotEl);
+        }
+    }, duration);
+}
+
+// Function to spawn a new unit for a given faction
+function spawnNewUnit(faction) {
+    // Determine entry point based on faction
+    let entryLat, entryLng;
+    
+    if (faction === 'blue') {
+        // Blue forces come from west or south
+        if (Math.random() < 0.5) {
+            entryLat = 40.7 + (Math.random() * 0.05 - 0.025);
+            entryLng = -74.05 - (Math.random() * 0.02); // West
+        } else {
+            entryLat = 40.65 - (Math.random() * 0.02); // South
+            entryLng = -74.0 + (Math.random() * 0.05 - 0.025);
+        }
+    } else {
+        // Red forces come from east or north
+        if (Math.random() < 0.5) {
+            entryLat = 40.7 + (Math.random() * 0.05 - 0.025);
+            entryLng = -73.95 + (Math.random() * 0.02); // East
+        } else {
+            entryLat = 40.75 + (Math.random() * 0.02); // North
+            entryLng = -74.0 + (Math.random() * 0.05 - 0.025);
+        }
+    }
+    
+    // Create a new unit
+    const type = getRandomUnitType();
+    const unitId = `${faction}-${statistics.nextUnitId++}`;
+    
+    const newUnit = {
+        id: unitId,
+        name: `${faction.charAt(0).toUpperCase() + faction.slice(1)} Force ${getUnitName(type)} ${statistics.nextUnitId}`,
+        type: type,
+        faction: faction,
+        strength: 50 + Math.floor(Math.random() * 50), // 50-99
+        health: 100,
+        status: 'Reinforcing',
+        lat: entryLat,
+        lng: entryLng,
+        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()
+    };
+    
+    units.push(newUnit);
+    
+    // Create marker for the new unit
+    const markerSize = newUnit.strength / 15 + 20;
+    
+    const markerHtml = `
+        <div class="unit-marker ${newUnit.faction}-unit new-unit" style="width: ${markerSize}px; height: ${markerSize}px; line-height: ${markerSize}px; font-size: ${markerSize/2}px;">
+            ${newUnit.icon}
+        </div>
+    `;
+    
+    const customIcon = L.divIcon({
+        html: markerHtml,
+        className: '',
+        iconSize: [markerSize, markerSize],
+        iconAnchor: [markerSize/2, markerSize/2]
+    });
+    
+    newUnit.marker = L.marker([newUnit.lat, newUnit.lng], { icon: customIcon })
+        .addTo(map)
+        .on('click', function() {
+            selectUnit(newUnit);
+        });
+        
+    // Add an entrance effect
+    const point = map.latLngToLayerPoint([newUnit.lat, newUnit.lng]);
+    
+    const entryEffect = document.createElement('div');
+    entryEffect.style.position = 'absolute';
+    entryEffect.style.left = point.x + 'px';
+    entryEffect.style.top = point.y + 'px';
+    entryEffect.style.width = '30px';
+    entryEffect.style.height = '30px';
+    entryEffect.style.backgroundColor = faction === 'blue' ? 'rgba(0, 100, 255, 0.5)' : 'rgba(255, 0, 0, 0.5)';
+    entryEffect.style.borderRadius = '50%';
+    entryEffect.style.zIndex = '700';
+    entryEffect.style.boxShadow = `0 0 15px ${faction === 'blue' ? 'blue' : 'red'}`;
+    entryEffect.style.animation = 'unit-entry 1.5s forwards';
+    
+    // Add custom animation if not already defined
+    if (!document.querySelector('#unit-entry-animation')) {
+        const style = document.createElement('style');
+        style.id = 'unit-entry-animation';
+        style.textContent = `
+            @keyframes unit-entry {
+                0% { transform: scale(0); opacity: 1; }
+                70% { transform: scale(1.5); opacity: 0.7; }
+                100% { transform: scale(2); opacity: 0; }
+            }
+            
+            .new-unit {
+                animation: highlight-new 2s;
+            }
+            
+            @keyframes highlight-new {
+                0% { box-shadow: 0 0 15px gold; transform: scale(1.2); }
+                100% { box-shadow: none; transform: scale(1); }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    
+    document.querySelector('#map').appendChild(entryEffect);
+    
+    // Remove effect after animation completes
+    setTimeout(() => {
+        if (entryEffect.parentNode) entryEffect.parentNode.removeChild(entryEffect);
+    }, 1500);
+    
+    // Assign target to the new unit
+    assignTargetToUnit(newUnit);
+    
+    // Update faction statistics
+    if (faction === 'blue') {
+        statistics.blueActive++;
+        statistics.blueReinforcements++;
+    } else {
+        statistics.redActive++;
+        statistics.redReinforcements++;
+    }
+    
+    return newUnit;
+}
+
+function triggerRandomEvent() {
+    // Increment hour counter - every 12 hours is a new day
+    hourCounter++;
+    if (hourCounter >= 12) {
+        hourCounter = 0;
+        dayCounter++;
+        
+        // Update the day counter in UI if it exists
+        const dayCounterElement = document.getElementById('day-counter');
+        if (dayCounterElement) {
+            dayCounterElement.textContent = `Day ${dayCounter}`;
+        } else {
+            // Create day counter element if it doesn't exist
+            const statsContainer = document.querySelector('.statistics-container');
+            if (statsContainer) {
+                const dayElement = document.createElement('div');
+                dayElement.id = 'day-counter';
+                dayElement.style.fontSize = '18px';
+                dayElement.style.fontWeight = 'bold';
+                dayElement.style.marginBottom = '10px';
+                dayElement.textContent = `Day ${dayCounter}`;
+                statsContainer.prepend(dayElement);
+            }
+        }
+        
+        // Check if new unit types have been unlocked
+        const newlyUnlocked = Object.entries(unitTypes)
+            .filter(([type, properties]) => properties.unlockDay === dayCounter)
+            .map(([type]) => type);
+        
+        if (newlyUnlocked.length > 0) {
+            // Announce new technology
+            const techAnnouncement = document.createElement('div');
+            techAnnouncement.className = 'tech-announcement';
+            techAnnouncement.style.position = 'absolute';
+            techAnnouncement.style.top = '50%';
+            techAnnouncement.style.left = '50%';
+            techAnnouncement.style.transform = 'translate(-50%, -50%)';
+            techAnnouncement.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+            techAnnouncement.style.color = 'white';
+            techAnnouncement.style.padding = '20px';
+            techAnnouncement.style.borderRadius = '10px';
+            techAnnouncement.style.zIndex = '2000';
+            techAnnouncement.style.textAlign = 'center';
+            techAnnouncement.style.boxShadow = '0 0 20px gold';
+            
+            techAnnouncement.innerHTML = `
+                <h3>New Technology Unlocked!</h3>
+                <div>${newlyUnlocked.map(type => `${unitTypes[type].icon} ${getUnitName(type)}`).join('<br>')}</div>
+            `;
+            
+            document.body.appendChild(techAnnouncement);
+            
+            // Remove after 5 seconds
+            setTimeout(() => {
+                techAnnouncement.style.opacity = '0';
+                techAnnouncement.style.transition = 'opacity 1s';
+                setTimeout(() => {
+                    if (techAnnouncement.parentNode) {
+                        techAnnouncement.parentNode.removeChild(techAnnouncement);
+                    }
+                }, 1000);
+            }, 5000);
+        }
+    }
+    
+    // List of possible random events with weighted probabilities
+    const events = [
+        { name: 'Reinforcement Surge', weight: 0.3, handler: () => {
+            // Spawn extra units for a random faction
+            const faction = Math.random() < 0.5 ? 'blue' : 'red';
+            for (let i = 0; i < 3 + Math.floor(Math.random() * 3); i++) {
+                spawnNewUnit(faction);
+            }
+            
+            // Display notification
+            displayEventNotification(
+                'Reinforcement Surge',
+                `${faction.charAt(0).toUpperCase() + faction.slice(1)} forces receiving reinforcements`
+            );
+        }},
+        { name: 'Supply Line Disruption', weight: 0.15, handler: () => {
+            // Randomly weaken some units of one faction
+            const faction = Math.random() < 0.5 ? 'blue' : 'red';
+            const affectedUnits = units.filter(u => u.faction === faction && u.health > 30);
+            
+            if (affectedUnits.length > 0) {
+                affectedUnits.forEach(unit => {
+                    unit.health = Math.max(30, unit.health - 20);
+                    updateUnitMarkerAppearance(unit);
+                });
+                
+                // Display notification
+                displayEventNotification(
+                    'Supply Line Disruption',
+                    `${faction.charAt(0).toUpperCase() + faction.slice(1)} forces weakened by supply issues`
+                );
+            }
+        }},
+        { name: 'Strategic Redeployment', weight: 0.2, handler: () => {
+            // Randomly reassign targets to create new battle lines
+            assignRandomTargets(0.7); // Higher chance of reassignment
+            
+            // Display notification
+            displayEventNotification(
+                'Strategic Redeployment',
+                'Forces repositioning for tactical advantage'
+            );
+        }},
+        { name: 'Environmental Event', weight: 0.2, handler: () => {
+            // Trigger a weather or environment event
+            triggerEnvironmentalEvent();
+        }},
+        { name: 'Hot Zone', weight: 0.15, handler: () => {
+            // Create a hot zone where forces converge
+            createHotZone();
+            
+            // Display notification
+            displayEventNotification(
+                'Strategic Hotspot',
+                'A critical location has been identified for control'
+            );
+        }}
+    ];
+    
+    // Weighted random selection
+    const totalWeight = events.reduce((sum, event) => sum + event.weight, 0);
+    let random = Math.random() * totalWeight;
+    let selectedEvent = null;
+    
+    for (const event of events) {
+        random -= event.weight;
+        if (random <= 0) {
+            selectedEvent = event;
+            break;
+        }
+    }
+    
+    // Execute the selected event
+    selectedEvent.handler();
+    
+    // Auto-balance forces if one side is getting too dominant
+    const blueSurvivors = units.filter(u => u.faction === 'blue' && u.health > 0).length;
+    const redSurvivors = units.filter(u => u.faction === 'red' && u.health > 0).length;
+    
+    if (blueSurvivors < 5 || redSurvivors < 5) {
+        // If either side is getting too low, reinforce them
+        const weakerFaction = blueSurvivors < redSurvivors ? 'blue' : 'red';
+        const reinforcementCount = 3 + Math.floor(Math.random() * 3);
+        
+        for (let i = 0; i < reinforcementCount; i++) {
+            spawnNewUnit(weakerFaction);
+        }
+        
+        displayEventNotification(
+            'Emergency Reinforcements',
+            `${weakerFaction.charAt(0).toUpperCase() + weakerFaction.slice(1)} forces receiving critical support`
+        );
+    }
+}
+
+// Function to display event notifications
+function displayEventNotification(title, message) {
+    const notification = document.createElement('div');
+    notification.className = 'event-notification';
+    notification.style.position = 'absolute';
+    notification.style.top = '20px';
+    notification.style.right = '20px';
+    notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+    notification.style.color = 'white';
+    notification.style.padding = '10px 15px';
+    notification.style.borderRadius = '5px';
+    notification.style.zIndex = '2000';
+    notification.style.maxWidth = '250px';
+    notification.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
+    notification.style.opacity = '0';
+    notification.style.transition = 'opacity 0.5s';
+    
+    notification.innerHTML = `
+        <div style="font-weight: bold; font-size: 14px; margin-bottom: 5px;">${title}</div>
+        <div style="font-size: 12px;">${message}</div>
+    `;
+    
+    document.body.appendChild(notification);
+    
+    // Fade in
+    setTimeout(() => {
+        notification.style.opacity = '1';
+    }, 100);
+    
+    // Remove after 5 seconds
+    setTimeout(() => {
+        notification.style.opacity = '0';
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 500);
+    }, 5000);
+}
+
+// Environmental events function
+function triggerEnvironmentalEvent() {
+    // Random selection of environmental events
+    const events = [
+        {
+            name: 'Fog of War',
+            probability: 0.3,
+            handler: () => {
+                // Reduce all units' range temporarily
+                units.forEach(unit => {
+                    if (!unit.originalRange) unit.originalRange = unit.range;
+                    unit.range *= 0.5; // 50% reduction in range
+                });
+                
+                // Add a fog overlay to the map
+                const fogOverlay = document.createElement('div');
+                fogOverlay.id = 'fog-overlay';
+                fogOverlay.style.position = 'absolute';
+                fogOverlay.style.top = '0';
+                fogOverlay.style.left = '0';
+                fogOverlay.style.width = '100%';
+                fogOverlay.style.height = '100%';
+                fogOverlay.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
+                fogOverlay.style.pointerEvents = 'none';
+                fogOverlay.style.zIndex = '500';
+                fogOverlay.style.transition = 'opacity 2s';
+                
+                document.querySelector('#map').appendChild(fogOverlay);
+                
+                // Show event notification
+                displayEventNotification('Fog of War', 'Visibility reduced for all units');
+                
+                // Restore normal visibility after duration
+                setTimeout(() => {
+                    // Fade out fog
+                    fogOverlay.style.opacity = '0';
+                    
+                    // Remove fog and restore ranges
+                    setTimeout(() => {
+                        if (fogOverlay.parentNode) fogOverlay.parentNode.removeChild(fogOverlay);
+                        units.forEach(unit => {
+                            if (unit.originalRange) {
+                                unit.range = unit.originalRange;
+                                delete unit.originalRange;
+                            }
+                        });
+                    }, 2000);
+                }, 15000); // 15 seconds for simulation
+                
+                return true;
+            }
+        },
+        {
+            name: 'Artillery Barrage',
+            probability: 0.3,
+            handler: () => {
+                // Random faction launches barrage
+                const launchingFaction = Math.random() < 0.5 ? 'blue' : 'red';
+                const targetFaction = launchingFaction === 'blue' ? 'red' : 'blue';
+                
+                // Find target units
+                const targetUnits = units.filter(u => u.faction === targetFaction && u.health > 0);
+                
+                if (targetUnits.length > 0) {
+                    // Calculate target area (center of enemy forces)
+                    let centerLat = 0, centerLng = 0;
+                    targetUnits.forEach(unit => {
+                        centerLat += unit.lat;
+                        centerLng += unit.lng;
+                    });
+                    centerLat /= targetUnits.length;
+                    centerLng /= targetUnits.length;
+                    
+                    displayEventNotification(
+                        'Artillery Barrage',
+                        `${launchingFaction.charAt(0).toUpperCase() + launchingFaction.slice(1)} forces launching artillery strike`
+                    );
+                    
+                    // Visual effects - multiple explosions
+                    for (let i = 0; i < 5; i++) {
+                        setTimeout(() => {
+                            const offsetLat = centerLat + (Math.random() * 0.01 - 0.005);
+                            const offsetLng = centerLng + (Math.random() * 0.01 - 0.005);
+                            
+                            // Create explosion animation
+                            const point = map.latLngToLayerPoint([offsetLat, offsetLng]);
+                            
+                            const explosionEl = document.createElement('div');
+                            explosionEl.style.position = 'absolute';
+                            explosionEl.style.left = point.x + 'px';
+                            explosionEl.style.top = point.y + 'px';
+                            explosionEl.style.width = '40px';
+                            explosionEl.style.height = '40px';
+                            explosionEl.style.backgroundColor = '#ff4500';
+                            explosionEl.style.borderRadius = '50%';
+                            explosionEl.style.zIndex = '700';
+                            explosionEl.style.boxShadow = '0 0 30px red';
+                            explosionEl.style.animation = 'explosion 1.5s forwards';
+                            
+                            // Add custom animation if not already defined
+                            if (!document.querySelector('#explosion-animation')) {
+                                const style = document.createElement('style');
+                                style.id = 'explosion-animation';
+                                style.textContent = `
+                                    @keyframes explosion {
+                                        0% { transform: scale(0.2); opacity: 0.8; }
+                                        50% { transform: scale(1.5); opacity: 0.9; }
+                                        100% { transform: scale(2); opacity: 0; }
+                                    }
+                                `;
+                                document.head.appendChild(style);
+                            }
+                            
+                            document.querySelector('#map').appendChild(explosionEl);
+                            
+                            // Apply damage to units in radius
+                            targetUnits.forEach(unit => {
+                                const dLat = unit.lat - offsetLat;
+                                const dLng = unit.lng - offsetLng;
+                                const distance = Math.sqrt(dLat * dLat + dLng * dLng);
+                                
+                                // Units within blast radius take damage
+                                if (distance < 0.005) {
+                                    const damage = Math.round(20 * (1 - distance / 0.005));
+                                    unit.health = Math.max(0, unit.health - damage);
+                                    
+                                    // Update unit appearance
+                                    updateUnitMarkerAppearance(unit);
+                                    
+                                    // Check for death
+                                    if (unit.health <= 0) {
+                                        checkUnitDeath(unit);
+                                    }
+                                }
+                            });
+                            
+                            // Remove explosion after animation
+                            setTimeout(() => {
+                                if (explosionEl.parentNode) {
+                                    explosionEl.parentNode.removeChild(explosionEl);
+                                }
+                            }, 1500);
+                        }, i * 800); // Staggered explosions
+                    }
+                    
+                    return true;
+                }
+                
+                return false;
+            }
+        },
+        {
+            name: 'Supply Drop',
+            probability: 0.4,
+            handler: () => {
+                // Random faction receives supplies
+                const targetFaction = Math.random() < 0.5 ? 'blue' : 'red';
+                
+                // Find units that would benefit
+                const targetUnits = units.filter(u => u.faction === targetFaction && u.health < 80 && u.health > 0);
+                
+                if (targetUnits.length > 0) {
+                    // Calculate drop zone
+                    let dropLat = 0, dropLng = 0;
+                    const selectedUnits = targetUnits.slice(0, Math.min(5, targetUnits.length));
+                    
+                    selectedUnits.forEach(unit => {
+                        dropLat += unit.lat;
+                        dropLng += unit.lng;
+                    });
+                    dropLat /= selectedUnits.length;
+                    dropLng /= selectedUnits.length;
+                    
+                    displayEventNotification(
+                        'Supply Drop',
+                        `${targetFaction.charAt(0).toUpperCase() + targetFaction.slice(1)} forces receiving supplies`
+                    );
+                    
+                    // Visual effect for supply drop
+                    const point = map.latLngToLayerPoint([dropLat, dropLng]);
+                    
+                    const supplyEl = document.createElement('div');
+                    supplyEl.style.position = 'absolute';
+                    supplyEl.style.left = point.x + 'px';
+                    supplyEl.style.top = point.y + 'px';
+                    supplyEl.style.fontSize = '30px';
+                    supplyEl.style.zIndex = '700';
+                    supplyEl.textContent = '📦';
+                    supplyEl.style.animation = 'supply-drop 2s forwards';
+                    
+                    // Add custom animation if not already defined
+                    if (!document.querySelector('#supply-drop-animation')) {
+                        const style = document.createElement('style');
+                        style.id = 'supply-drop-animation';
+                        style.textContent = `
+                            @keyframes supply-drop {
+                                0% { transform: translateY(-50px); opacity: 0; }
+                                80% { transform: translateY(0); opacity: 1; }
+                                100% { transform: translateY(0); opacity: 0; }
+                            }
+                        `;
+                        document.head.appendChild(style);
+                    }
+                    
+                    document.querySelector('#map').appendChild(supplyEl);
+                    
+                    // Apply healing to nearby units
+                    selectedUnits.forEach(unit => {
+                        const dLat = unit.lat - dropLat;
+                        const dLng = unit.lng - dropLng;
+                        const distance = Math.sqrt(dLat * dLat + dLng * dLng);
+                        
+                        // Units near the drop get healed
+                        if (distance < 0.008) {
+                            const healAmount = 15 + Math.floor(Math.random() * 20);
+                            unit.health = Math.min(100, unit.health + healAmount);
+                            
+                            // Update unit appearance
+                            updateUnitMarkerAppearance(unit);
+                            
+                            // Show healing effect
+                            if (unit.marker) {
+                                const unitPoint = map.latLngToLayerPoint([unit.lat, unit.lng]);
+                                
+                                const healEl = document.createElement('div');
+                                healEl.style.position = 'absolute';
+                                healEl.style.left = unitPoint.x + 'px';
+                                healEl.style.top = unitPoint.y + 'px';
+                                healEl.style.fontSize = '14px';
+                                healEl.style.fontWeight = 'bold';
+                                healEl.style.color = '#2ecc71';
+                                healEl.style.textShadow = '0 0 3px white';
+                                healEl.style.zIndex = '1000';
+                                healEl.style.transition = 'transform 1.5s, opacity 1.5s';
+                                healEl.style.opacity = '1';
+                                healEl.textContent = `+${healAmount}`;
+                                
+                                document.querySelector('#map').appendChild(healEl);
+                                
+                                setTimeout(() => {
+                                    healEl.style.transform = 'translateY(-20px)';
+                                    healEl.style.opacity = '0';
+                                }, 100);
+                                
+                                setTimeout(() => {
+                                    if (healEl.parentNode) {
+                                        healEl.parentNode.removeChild(healEl);
+                                    }
+                                }, 1600);
+                            }
+                        }
+                    });
+                    
+                    // Remove supply after animation
+                    setTimeout(() => {
+                        if (supplyEl.parentNode) {
+                            supplyEl.parentNode.removeChild(supplyEl);
+                        }
+                    }, 2000);
+                    
+                    return true;
+                }
+                
+                return false;
+            }
+        }
+    ];
+    
+    // Randomly select an event based on probability
+    const randomValue = Math.random();
+    let cumulativeProbability = 0;
+    
+    for (const event of events) {
+        cumulativeProbability += event.probability;
+        if (randomValue < cumulativeProbability) {
+            // Execute the selected event and check if it was successful
+            if (event.handler()) {
+                return event.name;
+            }
+        }
+    }
+    
+    // If no event was triggered or all failed, default to a supply drop for a random faction
+    const faction = Math.random() < 0.5 ? 'blue' : 'red';
+    for (let i = 0; i < 2; i++) {
+        spawnNewUnit(faction);
+    }
+    
+    displayEventNotification(
+        'Tactical Reinforcements',
+        `${faction.charAt(0).toUpperCase() + faction.slice(1)} forces receiving light support`
+    );
+    
+    return 'Tactical Reinforcements';
+}
+
+// Function to update unit type counts display
+function updateUnitTypeCounts() {
+    // Container for unit type statistics
+    let unitCountsContainer = document.getElementById('unit-counts-container');
+    
+    if (!unitCountsContainer) {
+        // Create container if it doesn't exist
+        const statsContainer = document.querySelector('.statistics-container');
+        if (statsContainer) {
+            unitCountsContainer = document.createElement('div');
+            unitCountsContainer.id = 'unit-counts-container';
+            unitCountsContainer.style.marginTop = '15px';
+            unitCountsContainer.style.padding = '10px';
+            unitCountsContainer.style.borderTop = '1px solid #444';
+            unitCountsContainer.style.display = 'flex';
+            unitCountsContainer.style.flexWrap = 'wrap';
+            unitCountsContainer.style.justifyContent = 'space-between';
+            
+            const title = document.createElement('div');
+            title.style.width = '100%';
+            title.style.fontWeight = 'bold';
+            title.style.marginBottom = '5px';
+            title.textContent = 'Active Unit Types:';
+            unitCountsContainer.appendChild(title);
+            
+            statsContainer.appendChild(unitCountsContainer);
+        }
+    }
+    
+    if (unitCountsContainer) {
+        // Clear previous counts (except the title)
+        while (unitCountsContainer.childNodes.length > 1) {
+            unitCountsContainer.removeChild(unitCountsContainer.lastChild);
+        }
+        
+        // Get counts by unit type for each faction
+        const blueUnitCounts = {};
+        const redUnitCounts = {};
+        
+        units.forEach(unit => {
+            if (unit.health <= 0) return; // Skip dead units
+            
+            if (unit.faction === 'blue') {
+                blueUnitCounts[unit.type] = (blueUnitCounts[unit.type] || 0) + 1;
+            } else {
+                redUnitCounts[unit.type] = (redUnitCounts[unit.type] || 0) + 1;
+            }
+        });
+        
+        // Get all unit types currently in use
+        const activeTypes = Object.keys({...blueUnitCounts, ...redUnitCounts})
+            .filter(type => unitTypes[type].unlockDay <= dayCounter)
+            .sort();
+        
+        // Create unit type count display
+        activeTypes.forEach(type => {
+            const blueCount = blueUnitCounts[type] || 0;
+            const redCount = redUnitCounts[type] || 0;
+            
+            const unitTypeEl = document.createElement('div');
+            unitTypeEl.style.display = 'flex';
+            unitTypeEl.style.alignItems = 'center';
+            unitTypeEl.style.margin = '3px 0';
+            unitTypeEl.style.width = '48%';
+            
+            unitTypeEl.innerHTML = `
+                <span style="font-size: 16px; margin-right: 5px;">${unitTypes[type].icon}</span>
+                <span style="flex-grow: 1;">${getUnitName(type)}</span>
+                <span style="color: #3498db; margin-right: 5px;">${blueCount}</span>
+                <span style="color: #e74c3c;">${redCount}</span>
+            `;
+            
+            unitCountsContainer.appendChild(unitTypeEl);
+        });
+    }
+}
+
+function updateBattleStatistics() {
+    // Update UI statistics
+    document.getElementById('blue-active').textContent = statistics.blueActive;
+    document.getElementById('red-active').textContent = statistics.redActive;
+    document.getElementById('blue-casualties').textContent = statistics.blueCasualties;
+    document.getElementById('red-casualties').textContent = statistics.redCasualties;
+    document.getElementById('blue-reinforcements').textContent = statistics.blueReinforcements;
+    document.getElementById('red-reinforcements').textContent = statistics.redReinforcements;
+    document.getElementById('active-battles').textContent = statistics.activeBattles;
+    
+    // Update territory control visualization
+    document.getElementById('blue-control').style.width = `${statistics.blueControl}%`;
+    document.getElementById('red-control').style.width = `${statistics.redControl}%`;
+    
+    // Update day counter or create it if it doesn't exist
+    if (!document.getElementById('day-counter')) {
+        const statsContainer = document.querySelector('.statistics-container');
+        if (statsContainer) {
+            const dayElement = document.createElement('div');
+            dayElement.id = 'day-counter';
+            dayElement.style.fontSize = '18px';
+            dayElement.style.fontWeight = 'bold';
+            dayElement.style.marginBottom = '10px';
+            dayElement.style.textAlign = 'center';
+            dayElement.style.color = '#FFD700'; // Gold color for day counter
+            dayElement.textContent = `Day ${dayCounter}`;
+            statsContainer.prepend(dayElement);
+            
+            // Add hour indicator
+            const hourElement = document.createElement('span');
+            hourElement.id = 'hour-indicator';
+            hourElement.style.fontSize = '14px';
+            hourElement.style.marginLeft = '10px';
+            hourElement.style.color = '#AAAAAA';
+            hourElement.textContent = `(Hour ${hourCounter})`;
+            dayElement.appendChild(hourElement);
+        }
+    } else {
+        document.getElementById('day-counter').textContent = `Day ${dayCounter}`;
+        
+        // Update hour indicator if it exists, or create it
+        if (!document.getElementById('hour-indicator')) {
+            const dayCounterElement = document.getElementById('day-counter');
+            const hourElement = document.createElement('span');
+            hourElement.id = 'hour-indicator';
+            hourElement.style.fontSize = '14px';
+            hourElement.style.marginLeft = '10px';
+            hourElement.style.color = '#AAAAAA';
+            hourElement.textContent = `(Hour ${hourCounter})`;
+            dayCounterElement.appendChild(hourElement);
+        } else {
+            document.getElementById('hour-indicator').textContent = `(Hour ${hourCounter})`;
+        }
+    }
+    
+    // Update unit type counts
+    updateUnitTypeCounts();
+    
+    // Randomize territory control slightly for visual effect
+    let blueVariation = Math.random() * 5 - 2.5; // -2.5 to +2.5
+    let newBlueControl = Math.min(Math.max(statistics.blueControl + blueVariation, 10), 90); // Keep between 10% and 90%
+    
+    statistics.blueControl = newBlueControl;
+    statistics.redControl = 100 - newBlueControl;
+}
+
+function spawnReinforcements() {
+    // Ensure minimum active forces for each side
+    const minimumForceSize = 10 + Math.floor(dayCounter / 2); // Increases with time
+    
+    // Calculate the total active units
+    const totalActive = statistics.blueActive + statistics.redActive;
+    const maxTotalUnits = 60 + (dayCounter * 5) + Math.floor(Math.random() * 20); // More variance in unit cap
+    
+    // If we're under the maximum total, proceed with reinforcements
+    if (totalActive < maxTotalUnits) {
+        // Track reinforcements for notification
+        let blueSpawned = 0;
+        let redSpawned = 0;
+        
+        // Always spawn at least one unit for each faction that's below minimum strength
+        if (statistics.blueActive < minimumForceSize) {
+            spawnNewUnit('blue');
+            blueSpawned++;
+            statistics.blueReinforcements++;
+        }
+        
+        if (statistics.redActive < minimumForceSize) {
+            spawnNewUnit('red');
+            redSpawned++;
+            statistics.redReinforcements++;
+        }
+        
+        // Additional random reinforcements (favor the losing side)
+        let spawnBlueSide = Math.random() < (statistics.redActive / (statistics.blueActive + statistics.redActive));
+        let faction = spawnBlueSide ? 'blue' : 'red';
+        
+        // Determine how many extra units to spawn (1-4, increasing with time)
+        // Increased maximum from 3+1 to 5+1 for more variance
+        const extraUnitCount = Math.floor(Math.random() * 5) + 1 + Math.floor(dayCounter / 10);
+        
+        // Generate units for the chosen faction
+        for (let i = 0; i < extraUnitCount; i++) {
+            // 50% chance to switch to the other faction for balance
+            if (i > 0 && Math.random() < 0.5) {
+                faction = faction === 'blue' ? 'red' : 'blue';
+            }
+            
+            // 20% chance to use a specific unit type for variety
+            if (Math.random() < 0.2) {
+                // Get all available unit types
+                const availableTypes = Object.entries(unitTypes)
+                    .filter(([type, props]) => props.unlockDay <= dayCounter)
+                    .map(([type]) => type);
+                
+                // Pick a random type
+                const randomType = availableTypes[Math.floor(Math.random() * availableTypes.length)];
+                spawnNewUnit(faction, randomType);
+            } else {
+                spawnNewUnit(faction);
+            }
+            
+            // Count reinforcements
+            if (faction === 'blue') {
+                blueSpawned++;
+                statistics.blueReinforcements++;
+            } else {
+                redSpawned++;
+                statistics.redReinforcements++;
+            }
+        }
+        
+        // Display notification if significant reinforcements arrive
+        if (blueSpawned >= 3) {
+            displayEventNotification(
+                'Blue Reinforcements',
+                `${blueSpawned} Blue units have arrived as reinforcements`
+            );
+        }
+        
+        if (redSpawned >= 3) {
+            displayEventNotification(
+                'Red Reinforcements',
+                `${redSpawned} Red units have arrived as reinforcements`
+            );
+        }
+    }
+    
+    // Randomly vary some statistics to make the display more dynamic even if not much is happening
+    // This creates the impression of ongoing battle even if units are repositioning
+    
+    // Randomize territory control slightly for visual effect
+    const controlVariation = Math.random() * 4 - 2; // -2 to +2 percent
+    statistics.blueControl = Math.min(Math.max(statistics.blueControl + controlVariation, 15), 85);
+    statistics.redControl = 100 - statistics.blueControl;
+    
+    // Vary active battles count slightly
+    const battleDelta = Math.random() < 0.3 ? (Math.random() < 0.5 ? 1 : -1) : 0;
+    statistics.activeBattles = Math.max(1, statistics.activeBattles + battleDelta);
+}
+
+function spawnNewUnit(faction) {
+    const type = getRandomUnitType();
+    const unitId = statistics.nextUnitId++;
+    
+    // Calculate spawn location - at the edges of the map with some randomness
+    let lat, lng;
+    
+    if (faction === 'blue') {
+        // Blue forces spawn from the west
+        lat = 40.7 + (Math.random() * 0.1 - 0.05);
+        lng = -74.05 - (Math.random() * 0.02); // West of center
+        statistics.blueActive++;
+        statistics.blueReinforcements++;
+    } else {
+        // Red forces spawn from the east
+        lat = 40.7 + (Math.random() * 0.1 - 0.05);
+        lng = -73.95 + (Math.random() * 0.02); // East of center
+        statistics.redActive++;
+        statistics.redReinforcements++;
+    }
+    
+    // Create the new unit
+    const newUnit = {
+        id: `${faction}-${unitId}`,
+        name: `${faction.charAt(0).toUpperCase() + faction.slice(1)} Force ${getUnitName(type)} ${unitId}`,
+        type: type,
+        faction: faction,
+        strength: Math.floor(Math.random() * 50) + 50, // 50-99
+        health: 100,
+        status: 'Reinforcement',
+        lat: lat,
+        lng: lng,
+        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()
+    };
+    
+    units.push(newUnit);
+    
+    // Create marker for the new unit
+    const markerSize = newUnit.strength / 15 + 20;
+    
+    const markerHtml = `
+        <div class="unit-marker ${newUnit.faction}-unit" style="width: ${markerSize}px; height: ${markerSize}px; line-height: ${markerSize}px; font-size: ${markerSize/2}px;">
+            ${newUnit.icon}
+        </div>
+    `;
+    
+    const customIcon = L.divIcon({
+        html: markerHtml,
+        className: '',
+        iconSize: [markerSize, markerSize],
+        iconAnchor: [markerSize/2, markerSize/2]
+    });
+    
+    newUnit.marker = L.marker([newUnit.lat, newUnit.lng], { icon: customIcon })
+        .addTo(map)
+        .on('click', function() {
+            selectUnit(newUnit);
+        });
+    
+    // Immediately assign target to move toward
+    assignTargetToUnit(newUnit);
+}
+
+function assignTargetToUnit(unit) {
+    // Find a strategic position to move to
+    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';
+    } else {
+        // Move toward center of map if no enemies
+        unit.targetLat = 40.7;
+        unit.targetLng = -74.0;
+        unit.movingToTarget = true;
+        unit.status = 'Advancing';
+    }
+}
+
 function updateTime() {
     hourCounter++;
     if (hourCounter >= 24) {
         hourCounter = 0;
         dayCounter++;
+        
+        // Check for newly unlocked units on day change
+        const newlyUnlockedTypes = Object.entries(unitTypes)
+            .filter(([type, props]) => props.unlockDay === dayCounter)
+            .map(([type]) => type);
+            
+        if (newlyUnlockedTypes.length > 0) {
+            displayTechUnlockNotification(newlyUnlockedTypes);
+        }
+        
+        // Add additional random reinforcements on new day
+        const blueSurvivors = units.filter(u => u.faction === 'blue' && u.health > 0).length;
+        const redSurvivors = units.filter(u => u.faction === 'red' && u.health > 0).length;
+        
+        // Add 1-3 reinforcements for each faction at day change
+        const blueReinforcements = 1 + Math.floor(Math.random() * 3);
+        const redReinforcements = 1 + Math.floor(Math.random() * 3);
+        
+        for (let i = 0; i < blueReinforcements; i++) {
+            spawnNewUnit('blue');
+        }
+        
+        for (let i = 0; i < redReinforcements; i++) {
+            spawnNewUnit('red');
+        }
+        
+        // Display day change notification
+        displayEventNotification(
+            `Day ${dayCounter} Begins`,
+            'Forces are repositioning and receiving reinforcements'
+        );
     }
     
     // Format hours with leading zero
     const formattedHours = hourCounter.toString().padStart(2, '0');
-    document.getElementById('day-counter').textContent = `Day ${dayCounter} - ${formattedHours}:00 hours`;
+    
+    // Make sure day-counter element exists before updating
+    const dayCounter_el = document.getElementById('day-counter');
+    if (dayCounter_el) {
+        dayCounter_el.textContent = `Day ${dayCounter} - ${formattedHours}:00 hours`;
+    }
+}
+
+// Display tech unlock notification
+function displayTechUnlockNotification(unlockTypes) {
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = 'tech-unlock-notification';
+    notification.style.position = 'absolute';
+    notification.style.top = '50%';
+    notification.style.left = '50%';
+    notification.style.transform = 'translate(-50%, -50%)';
+    notification.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
+    notification.style.color = 'white';
+    notification.style.padding = '20px';
+    notification.style.borderRadius = '10px';
+    notification.style.zIndex = '2000';
+    notification.style.minWidth = '300px';
+    notification.style.textAlign = 'center';
+    notification.style.boxShadow = '0 0 30px gold';
+    notification.style.border = '2px solid gold';
+    
+    // Create content
+    let innerHTML = `
+        <h2 style="margin: 0 0 15px 0; color: gold;">New Technology Unlocked!</h2>
+        <div style="display: flex; flex-direction: column; gap: 10px;">
+    `;
+    
+    unlockTypes.forEach(type => {
+        innerHTML += `
+            <div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
+                <span style="font-size: 24px;">${unitTypes[type].icon}</span>
+                <span style="font-size: 18px;">${getUnitName(type)}</span>
+            </div>
+        `;
+    });
+    
+    innerHTML += '</div>';
+    notification.innerHTML = innerHTML;
+    
+    document.body.appendChild(notification);
+    
+    // Add animation CSS if not already defined
+    if (!document.getElementById('notification-animations')) {
+        const styleEl = document.createElement('style');
+        styleEl.id = 'notification-animations';
+        styleEl.textContent = `
+            @keyframes fadeIn {
+                from { opacity: 0; transform: translate(-50%, -60%); }
+                to { opacity: 1; transform: translate(-50%, -50%); }
+            }
+            
+            @keyframes fadeOut {
+                from { opacity: 1; transform: translate(-50%, -50%); }
+                to { opacity: 0; transform: translate(-50%, -40%); }
+            }
+            
+            .tech-unlock-notification {
+                animation: fadeIn 0.8s forwards;
+            }
+            
+            .tech-unlock-notification.fadeout {
+                animation: fadeOut 0.8s forwards;
+            }
+        `;
+        document.head.appendChild(styleEl);
+    }
+    
+    // Remove after delay
+    setTimeout(() => {
+        notification.classList.add('fadeout');
+        
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 800);
+    }, 5000);
 }
 
 function togglePause() {
@@ -263,27 +1597,87 @@ function togglePause() {
     pauseButton.textContent = isPaused ? 'Resume' : 'Pause';
 }
 
-function assignRandomTargets() {
+function assignRandomTargets(chance = 0.3) {
     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) {
+        // Only assign new targets to units that aren't in battle and at random (default 30% chance)
+        if (!unit.inBattle && Math.random() < chance) {
             // 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)];
+                // Choose random enemy as target - prefer weaker enemies occasionally
+                let target;
+                if (Math.random() < 0.2) {
+                    // Sort by health ascending and pick from the weakest third
+                    const sortedEnemies = [...enemies].sort((a, b) => a.health - b.health);
+                    const weakEnemyIndex = Math.floor(Math.random() * Math.ceil(sortedEnemies.length / 3));
+                    target = sortedEnemies[weakEnemyIndex];
+                } else {
+                    // Random target
+                    target = enemies[Math.floor(Math.random() * enemies.length)];
+                }
+                
                 unit.targetLat = target.lat;
                 unit.targetLng = target.lng;
                 unit.movingToTarget = true;
-                unit.status = 'Advancing';
+                
+                // Occasionally give units different movement statuses for variety
+                const statuses = ['Advancing', 'Flanking', 'Pursuing', 'Engaging'];
+                unit.status = statuses[Math.floor(Math.random() * statuses.length)];
             }
         }
     });
+    
+    // Occasionally upgrade some units
+    if (Math.random() < 0.1) {
+        upgradeRandomUnit();
+    }
+}
+
+function upgradeRandomUnit() {
+    // Find a unit that's active and has been in battles
+    const eligibleUnits = units.filter(u => u.health > 50 && u.kills > 0);
+    
+    if (eligibleUnits.length > 0) {
+        const unit = eligibleUnits[Math.floor(Math.random() * eligibleUnits.length)];
+        
+        // Boost its stats
+        unit.attackPower = Math.min(100, unit.attackPower + 5);
+        unit.range = Math.min(0.05, unit.range + 0.002);
+        unit.speed = Math.min(0.005, unit.speed * 1.1);
+        
+        // Visual upgrade - make it slightly larger and add a star if it's reached elite status
+        if (unit.marker) {
+            const markerSize = unit.strength / 15 + 20 + (unit.kills * 0.5);
+            
+            // Add a visual indicator for veteran/elite units
+            let eliteIndicator = '';
+            if (unit.kills >= 10) {
+                eliteIndicator = '⭐';
+            } else if (unit.kills >= 5) {
+                eliteIndicator = '★';
+            }
+            
+            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}${eliteIndicator}
+                </div>
+            `;
+            
+            const customIcon = L.divIcon({
+                html: markerHtml,
+                className: '',
+                iconSize: [markerSize, markerSize],
+                iconAnchor: [markerSize/2, markerSize/2]
+            });
+            
+            unit.marker.setIcon(customIcon);
+        }
+    }
 }
 
 function moveUnits() {
@@ -328,8 +1722,19 @@ function moveUnits() {
 }
 
 function checkForBattles() {
-    // Clear any existing battle animations
-    document.querySelectorAll('.battle-indicator').forEach(el => el.remove());
+    // Clear any existing battle animations that are outdated
+    document.querySelectorAll('.battle-indicator').forEach(el => {
+        // Only remove indicators that have been around for more than 3 seconds
+        if (el.dataset.timestamp && (Date.now() - parseInt(el.dataset.timestamp)) > 3000) {
+            el.remove();
+        }
+    });
+    
+    // Reset active battles counter
+    statistics.activeBattles = 0;
+    
+    // Create a set to track unique battle pairs
+    const battlePairs = new Set();
     
     // Check each unit against potential enemies
     units.forEach(unit => {
@@ -339,6 +1744,7 @@ function checkForBattles() {
         const enemies = units.filter(u => u.faction === enemyFaction && u.health > 0);
         
         // Reset battle state
+        const wasInBattle = unit.inBattle;
         unit.inBattle = false;
         
         enemies.forEach(enemy => {
@@ -353,60 +1759,320 @@ function checkForBattles() {
                 unit.inBattle = true;
                 enemy.inBattle = true;
                 
-                // Update statuses
-                unit.status = 'Engaged';
-                enemy.status = 'Engaged';
+                // Create a unique identifier for this battle pair
+                const battleId = [unit.id, enemy.id].sort().join('-');
+                
+                // Only count unique battles
+                if (!battlePairs.has(battleId)) {
+                    battlePairs.add(battleId);
+                    statistics.activeBattles++;
+                    
+                    // Create battle animation at midpoint with slight randomness
+                    const battleLat = (unit.lat + enemy.lat) / 2 + (Math.random() * 0.002 - 0.001);
+                    const battleLng = (unit.lng + enemy.lng) / 2 + (Math.random() * 0.002 - 0.001);
+                    
+                    // More frequent battle animations for increased visual impact
+                    // but avoid too many by only creating on every other check or for elite units
+                    if (Math.random() < 0.7 || unit.kills >= 3 || enemy.kills >= 3) {
+                        createBattleAnimation(battleLat, battleLng);
+                    }
+                }
+                
+                // More varied battle statuses
+                const battleStatuses = ['Engaged', 'In Combat', 'Fighting', 'Attacking', 'Defending'];
+                unit.status = battleStatuses[Math.floor(Math.random() * battleStatuses.length)];
+                enemy.status = battleStatuses[Math.floor(Math.random() * battleStatuses.length)];
+                
+                // More dynamic damage calculation
+                // Base damage
+                let unitBaseDamage = unit.attackPower * 0.15 * (0.5 + Math.random());
+                let enemyBaseDamage = enemy.attackPower * 0.15 * (0.5 + Math.random());
                 
-                // Create battle animation at midpoint
-                const battleLat = (unit.lat + enemy.lat) / 2;
-                const battleLng = (unit.lng + enemy.lng) / 2;
+                // Modify damage based on unit kills/experience (veteran bonus)
+                unitBaseDamage *= (1 + (unit.kills * 0.05));
+                enemyBaseDamage *= (1 + (enemy.kills * 0.05));
                 
-                createBattleAnimation(battleLat, battleLng);
+                // Health-based modifications (wounded units deal less damage)
+                unitBaseDamage *= (0.5 + (unit.health / 200));
+                enemyBaseDamage *= (0.5 + (enemy.health / 200));
                 
-                // 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);
+                // Final randomization and rounding
+                const unitDamage = Math.round(unitBaseDamage * (0.8 + Math.random() * 0.4));
+                const enemyDamage = Math.round(enemyBaseDamage * (0.8 + Math.random() * 0.4));
                 
                 // Apply damage
                 enemy.health = Math.max(0, enemy.health - unitDamage);
                 unit.health = Math.max(0, unit.health - enemyDamage);
                 
+                // Update marker appearance based on health
+                updateUnitMarkerAppearance(unit);
+                updateUnitMarkerAppearance(enemy);
+                
+                // Critical hits for more drama (rare but powerful)
+                if (Math.random() < 0.05) {
+                    const criticalTarget = Math.random() < 0.5 ? unit : enemy;
+                    const criticalDamage = Math.round(criticalTarget.health * 0.3);
+                    criticalTarget.health = Math.max(0, criticalTarget.health - criticalDamage);
+                    
+                    // Visual indication of critical hit
+                    if (criticalTarget.marker) {
+                        const point = map.latLngToLayerPoint([criticalTarget.lat, criticalTarget.lng]);
+                        
+                        const criticalEl = document.createElement('div');
+                        criticalEl.style.position = 'absolute';
+                        criticalEl.style.left = point.x + 'px';
+                        criticalEl.style.top = point.y + 'px';
+                        criticalEl.style.fontSize = '16px';
+                        criticalEl.style.fontWeight = 'bold';
+                        criticalEl.style.color = '#ff0000';
+                        criticalEl.style.textShadow = '0 0 3px #ffffff';
+                        criticalEl.style.zIndex = '1000';
+                        criticalEl.style.transition = 'transform 1s, opacity 1s';
+                        criticalEl.style.opacity = '1';
+                        criticalEl.textContent = "CRITICAL!";
+                        
+                        document.querySelector('#map').appendChild(criticalEl);
+                        
+                        setTimeout(() => {
+                            criticalEl.style.transform = 'translateY(-20px) scale(1.5)';
+                            criticalEl.style.opacity = '0';
+                        }, 100);
+                        
+                        setTimeout(() => {
+                            if (criticalEl.parentNode) {
+                                criticalEl.parentNode.removeChild(criticalEl);
+                            }
+                        }, 1100);
+                    }
+                }
+                
                 // Check if unit defeated enemy
                 if (enemy.health <= 0 && unitDamage > 0) {
                     unit.kills++;
                     checkUnitDeath(enemy);
+                    // Victory effect
+                    if (unit.marker) {
+                        const point = map.latLngToLayerPoint([unit.lat, unit.lng]);
+                        showVictoryEffect(point.x, point.y, unit.faction);
+                    }
                 }
                 
                 // Check if enemy defeated unit
                 if (unit.health <= 0 && enemyDamage > 0) {
                     enemy.kills++;
                     checkUnitDeath(unit);
+                    // Victory effect
+                    if (enemy.marker) {
+                        const point = map.latLngToLayerPoint([enemy.lat, enemy.lng]);
+                        showVictoryEffect(point.x, point.y, enemy.faction);
+                    }
                     return; // Stop checking more enemies if this unit is dead
                 }
             }
         });
+        
+        // If unit was in battle but no longer is, potentially assign new target
+        if (wasInBattle && !unit.inBattle) {
+            // Higher chance to pursue new targets for experienced units
+            const reassignChance = 0.3 + (unit.kills * 0.05);
+            if (Math.random() < reassignChance) {
+                assignTargetToUnit(unit);
+            }
+        }
+    });
+}
+
+function showVictoryEffect(x, y, faction) {
+    const victoryEl = document.createElement('div');
+    victoryEl.style.position = 'absolute';
+    victoryEl.style.left = x + 'px';
+    victoryEl.style.top = y + 'px';
+    victoryEl.style.fontSize = '14px';
+    victoryEl.style.fontWeight = 'bold';
+    victoryEl.style.color = faction === 'blue' ? '#3498db' : '#e74c3c';
+    victoryEl.style.textShadow = '0 0 3px white';
+    victoryEl.style.zIndex = '1000';
+    victoryEl.style.transition = 'transform 1.5s, opacity 1.5s';
+    victoryEl.style.opacity = '1';
+    victoryEl.textContent = "Victory!";
+    
+    document.querySelector('#map').appendChild(victoryEl);
+    
+    setTimeout(() => {
+        victoryEl.style.transform = 'translateY(-25px) scale(1.2)';
+        victoryEl.style.opacity = '0';
+    }, 100);
+    
+    setTimeout(() => {
+        if (victoryEl.parentNode) {
+            victoryEl.parentNode.removeChild(victoryEl);
+        }
+    }, 1600);
+}
+
+function updateUnitMarkerAppearance(unit) {
+    if (!unit.marker || unit.health <= 0) return;
+    
+    const markerSize = unit.strength / 15 + 20 + (unit.kills * 0.5);
+    
+    // Visual indicator for health status
+    let healthIndicator = '';
+    let glowColor = '';
+    
+    if (unit.health < 30) {
+        healthIndicator = '🩸'; // Injured
+        glowColor = 'rgba(255, 0, 0, 0.5)';
+    } else if (unit.inBattle) {
+        healthIndicator = '⚔️'; // In battle
+        glowColor = 'rgba(255, 165, 0, 0.5)';
+    }
+    
+    // Add a visual indicator for veteran/elite units
+    let eliteIndicator = '';
+    if (unit.kills >= 10) {
+        eliteIndicator = '⭐';
+    } else if (unit.kills >= 5) {
+        eliteIndicator = '★';
+    }
+    
+    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;
+                   box-shadow: 0 0 8px ${glowColor};">
+            ${unit.icon}${healthIndicator}${eliteIndicator}
+        </div>
+    `;
+    
+    const customIcon = L.divIcon({
+        html: markerHtml,
+        className: '',
+        iconSize: [markerSize, markerSize],
+        iconAnchor: [markerSize/2, markerSize/2]
     });
+    
+    unit.marker.setIcon(customIcon);
 }
 
 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';
+    // Create multiple battle indicators for more intense visuals
+    const indicatorCount = 1 + Math.floor(Math.random() * 3); // 1-3 indicators per battle
+    
+    for (let i = 0; i < indicatorCount; i++) {
+        // Add slight position variance for multiple indicators
+        const offsetX = Math.random() * 30 - 15;
+        const offsetY = Math.random() * 30 - 15;
+        
+        // Choose a random battle animation type to add variety
+        const animationTypes = ['flash', 'expand', 'pulse', 'burst'];
+        const battleType = animationTypes[Math.floor(Math.random() * animationTypes.length)];
+        
+        // Randomly vary the size and color of battle indicators
+        const size = 15 + Math.floor(Math.random() * 20); // 15-35px
+        
+        // More varied colors including faction colors
+        const baseColors = ['#ffcc00', '#ff9900', '#ff3300', '#cc0000', '#3498db', '#e74c3c'];
+        const color = baseColors[Math.floor(Math.random() * baseColors.length)];
+        
+        // Create battle indicator element with staggered timing
+        setTimeout(() => {
+            const battleEl = document.createElement('div');
+            battleEl.className = `battle-indicator battle-${battleType}`;
+            battleEl.style.left = (point.x + offsetX) + 'px';
+            battleEl.style.top = (point.y + offsetY) + 'px';
+            battleEl.style.width = size + 'px';
+            battleEl.style.height = size + 'px';
+            battleEl.style.backgroundColor = color;
+            
+            // Add to map container
+            document.querySelector('#map').appendChild(battleEl);
+            
+            // Remove element after animation completes
+            setTimeout(() => {
+                if (battleEl.parentNode) {
+                    battleEl.parentNode.removeChild(battleEl);
+                }
+            }, 2000 + Math.random() * 1000);
+        }, i * 150); // Staggered start times
+    }
     
-    // Add to map container
-    document.querySelector('#map').appendChild(battleEl);
+    // Add combat symbols with more variety and quantity
+    const symbolCount = Math.floor(Math.random() * 4) + 1; // 1-4 symbols
     
-    // Remove element after animation completes
-    setTimeout(() => {
-        if (battleEl.parentNode) {
-            battleEl.parentNode.removeChild(battleEl);
-        }
-    }, 2000);
+    for (let i = 0; i < symbolCount; i++) {
+        setTimeout(() => {
+            // Expanded symbol set with more variety
+            const symbols = ['💥', '🔥', '⚔️', '💣', '🧨', '💀', '⚡', '🛡️', '🏹', '🗡️', '🔫'];
+            const symbol = symbols[Math.floor(Math.random() * symbols.length)];
+            
+            const symbolEl = document.createElement('div');
+            symbolEl.style.position = 'absolute';
+            symbolEl.style.left = (point.x + Math.random() * 40 - 20) + 'px';
+            symbolEl.style.top = (point.y + Math.random() * 40 - 20) + 'px';
+            symbolEl.style.fontSize = (12 + Math.random() * 16) + 'px';
+            symbolEl.style.zIndex = '1000';
+            symbolEl.style.transition = 'transform 1.5s, opacity 1.5s';
+            symbolEl.style.transform = 'translateY(0) rotate(0deg)';
+            symbolEl.style.opacity = '1';
+            symbolEl.textContent = symbol;
+            
+            document.querySelector('#map').appendChild(symbolEl);
+            
+            // Random movement direction
+            const dirX = Math.random() * 30 - 15;
+            const dirY = -10 - Math.random() * 20; // Always move up somewhat
+            const rotation = Math.random() * 360;
+            
+            setTimeout(() => {
+                symbolEl.style.transform = `translate(${dirX}px, ${dirY}px) rotate(${rotation}deg)`;
+                symbolEl.style.opacity = '0';
+            }, 100);
+            
+            setTimeout(() => {
+                if (symbolEl.parentNode) {
+                    symbolEl.parentNode.removeChild(symbolEl);
+                }
+            }, 1600);
+        }, i * 200); // Staggered symbols
+    }
+    
+    // Occasionally add damage numbers for more battle feedback
+    if (Math.random() < 0.4) {
+        setTimeout(() => {
+            const damageEl = document.createElement('div');
+            damageEl.style.position = 'absolute';
+            damageEl.style.left = (point.x + Math.random() * 20 - 10) + 'px';
+            damageEl.style.top = (point.y + Math.random() * 20 - 10) + 'px';
+            damageEl.style.fontSize = '14px';
+            damageEl.style.fontWeight = 'bold';
+            damageEl.style.color = 'red';
+            damageEl.style.textShadow = '0 0 3px white';
+            damageEl.style.zIndex = '1000';
+            damageEl.style.transition = 'transform 1.5s, opacity 1.5s';
+            damageEl.style.opacity = '1';
+            
+            // Generate a random damage number
+            const damage = Math.floor(Math.random() * 20) + 5;
+            damageEl.textContent = `-${damage}`;
+            
+            document.querySelector('#map').appendChild(damageEl);
+            
+            setTimeout(() => {
+                damageEl.style.transform = 'translateY(-20px)';
+                damageEl.style.opacity = '0';
+            }, 100);
+            
+            setTimeout(() => {
+                if (damageEl.parentNode) {
+                    damageEl.parentNode.removeChild(damageEl);
+                }
+            }, 1600);
+        }, Math.random() * 500);
+    }
 }
 
 function checkUnitDeath(unit) {
@@ -432,8 +2098,54 @@ function checkUnitDeath(unit) {
             unit.marker.setIcon(destroyedIcon);
         }
         
+        // Update unit status
         unit.status = 'Destroyed';
         unit.movingToTarget = false;
         unit.inBattle = false;
+        
+        // Update statistics
+        if (unit.faction === 'blue') {
+            statistics.blueActive--;
+            statistics.blueCasualties++;
+            
+            // Adjust territory control slightly toward red
+            statistics.redControl = Math.min(statistics.redControl + 2, 90);
+            statistics.blueControl = 100 - statistics.redControl;
+        } else {
+            statistics.redActive--;
+            statistics.redCasualties++;
+            
+            // Adjust territory control slightly toward blue
+            statistics.blueControl = Math.min(statistics.blueControl + 2, 90);
+            statistics.redControl = 100 - statistics.blueControl;
+        }
+        
+        // After a delay, remove the unit marker from the map
+        setTimeout(() => {
+            if (unit.marker) {
+                // Fade out effect (optional)
+                const icon = unit.marker.options.icon;
+                const html = icon.options.html.replace('opacity: 0.5', 'opacity: 0.2');
+                
+                const fadedIcon = L.divIcon({
+                    html: html,
+                    className: icon.options.className,
+                    iconSize: icon.options.iconSize,
+                    iconAnchor: icon.options.iconAnchor
+                });
+                
+                unit.marker.setIcon(fadedIcon);
+                
+                // After another longer delay, units will disappear completely
+                // This creates a nice visual effect of "cleaning up" the battlefield
+                // Left commented out to keep destroyed units visible on the map
+                /*
+                setTimeout(() => {
+                    map.removeLayer(unit.marker);
+                    unit.marker = null;
+                }, 30000);
+                */
+            }
+        }, 5000);
     }
 }

style.css

@@ -73,15 +73,66 @@ main {
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.panel-section {
+    flex: 1;
 }
 
-.info-panel h2 {
+.panel-section h2 {
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid #ddd;
     color: #2c3e50;
 }
 
+/* Battle statistics styles */
+#battle-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+}
+
+.stat-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.3rem 0;
+}
+
+.stat-label {
+    font-weight: bold;
+    color: #555;
+}
+
+.stat-value {
+    font-family: monospace;
+    font-size: 1.1em;
+}
+
+.control-bar {
+    height: 15px;
+    width: 100%;
+    background-color: #eee;
+    border-radius: 7px;
+    overflow: hidden;
+    display: flex;
+}
+
+.blue-control {
+    height: 100%;
+    background-color: #3498db;
+    transition: width 0.5s ease;
+}
+
+.red-control {
+    height: 100%;
+    background-color: #e74c3c;
+    transition: width 0.5s ease;
+}
+
 #unit-info {
     line-height: 1.6;
 }
@@ -196,19 +247,54 @@ footer {
     z-index: 1000 !important;
 }
 
-/* Battle animation */
+/* Battle animations */
 @keyframes battle-pulse {
     0% { transform: scale(1); opacity: 1; }
     50% { transform: scale(1.5); opacity: 0.7; }
     100% { transform: scale(2); opacity: 0; }
 }
 
+@keyframes battle-flash {
+    0% { opacity: 1; transform: scale(1); }
+    25% { opacity: 0.8; transform: scale(1.1); }
+    50% { opacity: 1; transform: scale(1); }
+    75% { opacity: 0.5; transform: scale(1.2); }
+    100% { opacity: 0; transform: scale(1.5); }
+}
+
+@keyframes battle-expand {
+    0% { transform: scale(0.5); opacity: 1; }
+    100% { transform: scale(3); opacity: 0; }
+}
+
+@keyframes battle-burst {
+    0% { transform: scale(0.2); opacity: 0; }
+    20% { transform: scale(1.2); opacity: 1; }
+    50% { transform: scale(1.5); opacity: 0.8; }
+    80% { transform: scale(1.8); opacity: 0.4; }
+    100% { transform: scale(2.5); opacity: 0; }
+}
+
 .battle-indicator {
     position: absolute;
-    width: 20px;
-    height: 20px;
-    background-color: yellow;
     border-radius: 50%;
     pointer-events: none;
+    box-shadow: 0 0 10px rgba(255, 200, 0, 0.8);
+    z-index: 800;
+}
+
+.battle-pulse {
     animation: battle-pulse 1s infinite;
+}
+
+.battle-flash {
+    animation: battle-flash 0.8s infinite;
+}
+
+.battle-expand {
+    animation: battle-expand 1.2s forwards;
+}
+
+.battle-burst {
+    animation: battle-burst 1s forwards;
 }