first commit

components/draughts/DraughtsGameInfo.jsx

@@ -0,0 +1,59 @@
+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>
+  );
+}