45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { useGameStore } from '../../store/gameState';
|
|
|
|
export const Dashboard: React.FC = () => {
|
|
const { week, day, anomaly, political, trust, entropy } = useGameStore();
|
|
|
|
return (
|
|
<div className="w-full bg-gray-800 border-b border-gray-600 p-3 flex flex-col gap-2 shrink-0">
|
|
<div className="flex justify-between items-center text-sm font-bold border-b border-gray-700 pb-1">
|
|
<span>Week {week}</span>
|
|
<span>Day {day} / 5</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 mt-1">
|
|
<div className="bg-gray-700 p-2 rounded flex flex-col items-center">
|
|
<span className="text-xs text-gray-400">Data (Anomaly)</span>
|
|
<span className="text-lg font-mono text-blue-300">{anomaly}</span>
|
|
</div>
|
|
<div className="bg-gray-700 p-2 rounded flex flex-col items-center">
|
|
<span className="text-xs text-gray-400">Pol. Capital</span>
|
|
<span className="text-lg font-mono text-yellow-400">{political}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1 mt-1">
|
|
<div className="flex justify-between items-center text-xs">
|
|
<span className="text-gray-400">Trust</span>
|
|
<span>{trust}%</span>
|
|
</div>
|
|
<div className="w-full h-2 bg-gray-900 rounded overflow-hidden">
|
|
<div className="h-full bg-green-500" style={{ width: `${trust}%` }}></div>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center text-xs mt-1">
|
|
<span className="text-gray-400">Entropy</span>
|
|
<span>{entropy}%</span>
|
|
</div>
|
|
<div className="w-full h-2 bg-gray-900 rounded overflow-hidden">
|
|
<div className="h-full bg-red-500" style={{ width: `${entropy}%` }}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|