78 lines
3.2 KiB
TypeScript
78 lines
3.2 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { HeaderPanel } from '@/components/HeaderPanel'
|
|
import { ForcePanel } from '@/components/ForcePanel'
|
|
import { WarMap } from '@/components/WarMap'
|
|
import { CombatLossesPanel } from '@/components/CombatLossesPanel'
|
|
import { PowerChart } from '@/components/PowerChart'
|
|
import { InvestmentTrendChart } from '@/components/InvestmentTrendChart'
|
|
import { RetaliationGauge } from '@/components/RetaliationGauge'
|
|
import { useSituationStore } from '@/store/situationStore'
|
|
import { startWebSocketMock, stopWebSocketMock } from '@/store/situationStore'
|
|
|
|
export function Dashboard() {
|
|
const situation = useSituationStore((s) => s.situation)
|
|
|
|
useEffect(() => {
|
|
startWebSocketMock()
|
|
return () => stopWebSocketMock()
|
|
}, [])
|
|
|
|
return (
|
|
<div className="flex h-screen w-full min-h-0 flex-col overflow-hidden bg-military-dark font-orbitron">
|
|
<HeaderPanel />
|
|
|
|
<div className="flex min-h-0 flex-1 flex-col overflow-auto lg:flex-row lg:overflow-hidden">
|
|
<aside className="flex min-h-0 min-w-0 shrink-0 flex-col gap-2 overflow-y-auto overflow-x-visible border-b border-military-border p-3 lg:min-w-[320px] lg:max-w-[340px] lg:border-b-0 lg:border-r lg:p-4">
|
|
<div className="flex h-44 shrink-0 flex-col gap-0 rounded-lg border border-military-us/30 bg-military-panel/80 p-1 lg:h-48">
|
|
<div className="h-[55%] min-h-0 shrink-0">
|
|
<PowerChart
|
|
usPower={situation.usForces.powerIndex}
|
|
iranPower={situation.iranForces.powerIndex}
|
|
className="h-full w-full"
|
|
/>
|
|
</div>
|
|
<div className="h-[45%] min-h-0 shrink-0">
|
|
<InvestmentTrendChart
|
|
history={situation.usForces.wallStreetInvestmentTrend}
|
|
className="h-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ForcePanel
|
|
side="us"
|
|
summary={situation.usForces.summary}
|
|
powerIndex={situation.usForces.powerIndex}
|
|
assets={situation.usForces.assets}
|
|
/>
|
|
</aside>
|
|
|
|
<main className="flex min-h-[200px] min-w-0 flex-1 flex-col overflow-hidden">
|
|
<div className="min-h-0 flex-1">
|
|
<WarMap />
|
|
</div>
|
|
<CombatLossesPanel
|
|
usLosses={situation.usForces.combatLosses}
|
|
iranLosses={situation.iranForces.combatLosses}
|
|
/>
|
|
</main>
|
|
|
|
<aside className="flex min-h-0 min-w-0 shrink-0 flex-col gap-2 overflow-y-auto overflow-x-visible border-t border-military-border p-3 lg:min-w-[320px] lg:max-w-[340px] lg:border-t-0 lg:border-l lg:p-4">
|
|
<div className="h-44 shrink-0 rounded-lg border border-military-iran/30 bg-military-panel/80 p-1 lg:h-48">
|
|
<RetaliationGauge
|
|
value={situation.iranForces.retaliationSentiment}
|
|
history={situation.iranForces.retaliationSentimentHistory}
|
|
className="h-full"
|
|
/>
|
|
</div>
|
|
<ForcePanel
|
|
side="iran"
|
|
summary={situation.iranForces.summary}
|
|
powerIndex={situation.iranForces.powerIndex}
|
|
assets={situation.iranForces.assets}
|
|
/>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|