71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { RefreshCw, Play, Info } from 'lucide-react';
|
|
|
|
interface GameControlsProps {
|
|
onNewGame: () => void;
|
|
onReset: () => void;
|
|
moves: number;
|
|
gridSize: number;
|
|
setGridSize: (size: number) => void;
|
|
}
|
|
|
|
const GameControls: React.FC<GameControlsProps> = ({
|
|
onNewGame,
|
|
onReset,
|
|
moves,
|
|
gridSize,
|
|
setGridSize
|
|
}) => {
|
|
return (
|
|
<div className="flex flex-col gap-6 w-full max-w-md mx-auto mb-6 p-4 bg-white rounded-xl shadow-sm border border-slate-100">
|
|
|
|
{/* Stats Row */}
|
|
<div className="flex justify-between items-center pb-4 border-b border-slate-100">
|
|
<div>
|
|
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Moves</span>
|
|
<div className="text-2xl font-bold text-slate-800">{moves}</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Size</span>
|
|
<select
|
|
value={gridSize}
|
|
onChange={(e) => setGridSize(Number(e.target.value))}
|
|
className="bg-slate-50 border border-slate-200 text-slate-700 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2"
|
|
>
|
|
<option value={3}>3x3 (Easy)</option>
|
|
<option value={5}>5x5 (Medium)</option>
|
|
<option value={10}>10x10 (Hard)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buttons Row */}
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={onNewGame}
|
|
className="flex-1 flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white py-2.5 px-4 rounded-lg font-medium transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
|
>
|
|
<Play size={18} />
|
|
New Game
|
|
</button>
|
|
<button
|
|
onClick={onReset}
|
|
className="flex items-center justify-center gap-2 bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 py-2.5 px-4 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-200"
|
|
title="Reset current board"
|
|
>
|
|
<RefreshCw size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="text-xs text-slate-500 bg-slate-50 p-3 rounded-lg flex gap-2 items-start">
|
|
<Info size={16} className="shrink-0 mt-0.5 text-indigo-500" />
|
|
<p>Click a cell to flip it and its 4 neighbors. Make the entire board the same color to win.</p>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GameControls;
|