60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
import { HStack, VStack, Text, keyframes } from '@chakra-ui/react';
|
|
import { useDraughtsPlayerToMove } from './board/hooks/use-draughts-player-to-move';
|
|
import { useDraughtsGame } from './game/DraughtsGameContext';
|
|
import { useDraughtsSettings } from './settings/DraughtsSettingsContext';
|
|
import { Players } from '@draughts/core';
|
|
|
|
const glowKeyframe = keyframes`
|
|
from {
|
|
background-color: rgba(144, 238, 144, 0.3)
|
|
}
|
|
to {
|
|
background-color: rgba(144, 238, 144, 0.6)
|
|
}
|
|
`;
|
|
|
|
const glowAnimation = `${glowKeyframe} 1s ease 0s infinite alternate`;
|
|
|
|
function formatTimer({ seconds, minutes }) {
|
|
const formatSeconds = String(seconds).padStart(2, '0');
|
|
return `${minutes}:${formatSeconds}`;
|
|
}
|
|
|
|
export function DraughtsGameInfoView() {
|
|
const { userPlayer } = useDraughtsSettings();
|
|
const { whiteTimer, blackTimer } = useDraughtsGame();
|
|
const whiteToMove = useDraughtsPlayerToMove(Players.WHITE);
|
|
const blackToMove = useDraughtsPlayerToMove(Players.BLACK);
|
|
|
|
return (
|
|
<VStack justify="space-between">
|
|
<HStack
|
|
align="center"
|
|
justify="space-between"
|
|
gap={3}
|
|
px={2}
|
|
borderRadius="0.2em"
|
|
animation={whiteToMove ? glowAnimation : undefined}
|
|
>
|
|
<Text fontSize="sm">
|
|
putih {userPlayer === Players.WHITE ? '(Anda)' : '(AI)'}
|
|
</Text>
|
|
<time>{formatTimer(whiteTimer)}</time>
|
|
</HStack>
|
|
<HStack
|
|
align="center"
|
|
justify="space-between"
|
|
gap={3}
|
|
px={2}
|
|
borderRadius="0.2em"
|
|
animation={blackToMove ? glowAnimation : undefined}
|
|
>
|
|
<Text fontSize="sm">
|
|
hitam {userPlayer === Players.BLACK ? '(Anda)' : '(AI)'}
|
|
</Text>
|
|
<time>{formatTimer(blackTimer)}</time>
|
|
</HStack>
|
|
</VStack>
|
|
);
|
|
}
|