Spaces:
Sleeping
Sleeping
File size: 2,313 Bytes
100a6dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
import * as React from 'react';
import { useState, useEffect } from 'react';
interface ChessTimerProps {
isWhiteTurn: boolean;
gameActive: boolean;
}
const ChessTimer: React.FC<ChessTimerProps> = ({ isWhiteTurn, gameActive }) => {
const [whiteTime, setWhiteTime] = useState<number>(600); // 10 minutes in seconds
const [blackTime, setBlackTime] = useState<number>(600); // 10 minutes in seconds
useEffect(() => {
let interval: NodeJS.Timeout | null = null;
if (gameActive) {
interval = setInterval(() => {
if (isWhiteTurn) {
setWhiteTime(prev => Math.max(0, prev - 1));
} else {
setBlackTime(prev => Math.max(0, prev - 1));
}
}, 1000);
}
return () => {
if (interval) clearInterval(interval);
};
}, [isWhiteTurn, gameActive]);
// Format time as mm:ss
const formatTime = (seconds: number): string => {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
return (
<div className="mb-4">
<h3 className="text-lg font-medium mb-2">Time Control</h3>
<div className="flex justify-between">
<div className={`p-2 rounded ${isWhiteTurn && gameActive ? 'bg-blue-100 border-l-4 border-blue-500' : ''}`}>
<div className="flex items-center">
<div className="w-4 h-4 bg-white border border-gray-300 rounded-full mr-2"></div>
<span className="font-medium">White:</span>
<span className={`ml-2 ${whiteTime < 60 ? 'text-red-600' : ''}`}>
{formatTime(whiteTime)}
</span>
</div>
</div>
<div className={`p-2 rounded ${!isWhiteTurn && gameActive ? 'bg-blue-100 border-l-4 border-blue-500' : ''}`}>
<div className="flex items-center">
<div className="w-4 h-4 bg-black rounded-full mr-2"></div>
<span className="font-medium">Black:</span>
<span className={`ml-2 ${blackTime < 60 ? 'text-red-600' : ''}`}>
{formatTime(blackTime)}
</span>
</div>
</div>
</div>
</div>
);
};
export default ChessTimer; |