upload

frontend/src/pages/OverlayScoreboardPage.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Center, Spinner, useColorModeValue } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { getPublicScoreboard, ScoreboardState } from '@/services/scoreboard';
+import ScoreboardDisplay from '@/components/scoreboard/ScoreboardDisplay';
+
+// Public overlay page intended for OBS/browser source.
+// Minimal chrome, transparent-friendly background.
+const OverlayScoreboardPage: React.FC = () => {
+  const bg = useColorModeValue('transparent', 'transparent');
+  const { data, isLoading } = useQuery<ScoreboardState>({
+    queryKey: ['public-scoreboard'],
+    queryFn: getPublicScoreboard,
+    refetchInterval: 5000,
+    staleTime: 3000,
+  });
+
+  return (
+    <Box minH="100vh" bg={bg} display="flex" alignItems="center" justifyContent="center" p={4}>
+      {isLoading || !data ? (
+        <Center><Spinner /></Center>
+      ) : (
+        <ScoreboardDisplay state={data} />
+      )}
+    </Box>
+  );
+};
+
+export default OverlayScoreboardPage;