City Water Distribution Simulation
Real-time water network monitoring and control
{/* Main Canvas */}
Time:
{timeStr}
Demand:
{demandMultiplier.toFixed(1)}x
Reservoir:
30 ? 'text-cyan-400' : 'text-red-400'}`}>
{Math.round(reservoirLevel)}%
{/* Legend */}
{/* Control Panel */}
{/* Events */}
Trigger Events
{/* Treatment Plant Status */}
Treatment Plants
{['t1', 't2', 't3'].map(id => {
const plant = nodes.find(n => n.id === id);
return (
Plant {id.replace('t', '')}
);
})}
{/* System Stats */}
System Statistics
Total Demand:
{nodes.filter(n => n.type === 'neighborhood').reduce((sum, n) => sum + n.demand, 0).toFixed(1)} units
Supply Capacity:
{nodes.filter(n => n.type === 'treatment').filter(n => n.online !== false).reduce((sum, n) => sum + (n.capacity || 0), 0)} units
Active Pipes:
{pipes.filter(p => !p.burst).length}/{pipes.length}
Critical Zones:
n.type === 'neighborhood' && n.pressure < 40).length > 0
? 'text-red-400'
: 'text-green-400'
}`}>
{nodes.filter(n => n.type === 'neighborhood' && n.pressure < 40).length}
{/* Neighborhood Pressure Grid */}
Neighborhood Pressures
{nodes.filter(n => n.type === 'neighborhood').map((n, i) => (
70
? 'bg-green-900 text-green-300'
: n.pressure > 40
? 'bg-yellow-900 text-yellow-300'
: 'bg-red-900 text-red-300'
}`}
>
{i + 1}: {Math.round(n.pressure)}
))}
{/* Status Messages */}
{activeEvent === 'heatwave' && (
⚠️ HEATWAVE ALERT: Water demand has doubled. Reservoir levels dropping faster than normal.
)}
{activeEvent === 'pipeburst' && (
💥 PIPE BURST WARNING: Random pipe failures occurring. Monitor affected neighborhoods.
)}
{nodes.filter(n => n.type === 'neighborhood' && n.pressure < 30).length > 0 && (
🚨 CRITICAL: Neighborhoods experiencing complete water loss. Immediate intervention required!
)}
{reservoirLevel < 20 && (
🔴 RESERVOIR CRITICAL: Water reserves below 20%. System at risk of complete failure.
)}