wip(frontend): progress in game page

ElaBosak233 · Jun 9, 2024 · bd03d54 · bd03d54
1 parent aaba51c
commit bd03d54
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 62 deletions.
diff --git a/web/src/components/layouts/withGame.tsx b/web/src/components/layouts/withGame.tsx
@@ -1,9 +1,10 @@
-import { Box, Button, Flex, Group, Stack, Text } from "@mantine/core";
+import { Box, Button, Flex, Group, Progress, Stack, Text } from "@mantine/core";
 import MDIcon from "@/components/ui/MDIcon";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useGameApi } from "@/api/game";
 import { Game } from "@/types/game";
 import { useEffect, useState } from "react";
+import { useInterval } from "@mantine/hooks";
 
 export default function withGame(WrappedComponent: React.ComponentType<any>) {
 	return function withGame(props: any) {
@@ -15,6 +16,10 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 
 		const [game, setGame] = useState<Game>();
 
+		const [progress, setProgress] = useState<number>(0);
+		const [seconds, setSeconds] = useState(0);
+		const interval = useInterval(() => setSeconds((s) => s + 1), 1000);
+
 		function getGame() {
 			gameApi
 				.getGames({
@@ -26,6 +31,19 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 				});
 		}
 
+		useEffect(() => {
+			setProgress(
+				((Math.floor(Date.now() / 1000) - Number(game?.started_at)) /
+					(Number(game?.ended_at) - Number(game?.started_at))) *
+					100
+			);
+		}, [seconds]);
+
+		useEffect(() => {
+			interval.start();
+			return interval.stop;
+		}, []);
+
 		useEffect(() => {
 			getGame();
 		}, []);
@@ -34,20 +52,27 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 			<>
 				<Stack m={36}>
 					<Flex justify={"space-between"} align={"center"}>
-						<Box w={"50%"}>
-							<Text fw={700}>距离结束还剩</Text>
-						</Box>
-						<Box
+						<Box w={"50%"}></Box>
+						<Stack
+							align={"center"}
 							sx={{
 								flexShrink: 0,
 							}}
 						>
 							<Text fw={700} size="2rem">
 								{game?.title}
 							</Text>
-						</Box>
+							<Progress
+								w={"25vw"}
+								radius={"xl"}
+								size={"md"}
+								value={progress}
+								animated
+								transitionDuration={200}
+							/>
+						</Stack>
 						<Flex w={"50%"} justify={"end"}>
-							<Group>
+							<Group wrap={"nowrap"}>
 								<Button
 									size="md"
 									leftSection={

diff --git a/web/src/components/modals/ChallengeModal.tsx b/web/src/components/modals/ChallengeModal.tsx
@@ -255,25 +255,14 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 					}}
 				>
 					<Box>
-						<Box
-							sx={{
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "space-between",
-							}}
-						>
+						<Group justify={"space-between"}>
 							<Group gap={6}>
 								<MDIcon color={challenge?.category?.color}>
 									{challenge?.category?.icon}
 								</MDIcon>
 								<Text fw={700}>{challenge?.title}</Text>
 							</Group>
-							<Box
-								sx={{
-									display: "flex",
-									alignItems: "center",
-								}}
-							>
+							<Group gap={0}>
 								{(challenge?.submissions?.length as number) >
 									0 && (
 									<Tooltip
@@ -321,18 +310,18 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 										</Box>
 									</Tooltip>
 								)}
-							</Box>
-						</Box>
+							</Group>
+						</Group>
 						<Divider my={10} />
 						<Flex justify={"space-between"}>
 							<MarkdownRender
 								src={challenge?.description || ""}
 							/>
 							{challenge?.attachment?.name && (
 								<Tooltip
-									label="下载附件"
+									label={`下载附件 ${challenge?.attachment?.name}`}
 									withArrow
-									position={"bottom"}
+									position={"top"}
 								>
 									<ActionIcon
 										onClick={() => {

diff --git a/web/src/components/navigations/Navbar.tsx b/web/src/components/navigations/Navbar.tsx
@@ -133,6 +133,7 @@ export default function Navbar(props: NavbarProps) {
 							sx={{
 								color: "white",
 							}}
+							visibleFrom={"xs"}
 						>
 							{configStore?.pltCfg?.site?.title}
 						</Title>

diff --git a/web/src/components/widgets/ChallengeCard.tsx b/web/src/components/widgets/ChallengeCard.tsx
@@ -11,12 +11,14 @@ import {
 	Tooltip,
 	ThemeIcon,
 	useMantineTheme,
+	Stack,
 } from "@mantine/core";
 import MDIcon from "@/components/ui/MDIcon";
 import FirstBloodIcon from "@/components/icons/hexagons/FirstBloodIcon";
 import SecondBloodIcon from "@/components/icons/hexagons/SecondBloodIcon";
 import ThirdBloodIcon from "@/components/icons/hexagons/ThirdBloodIcon";
 import { useEffect, useState } from "react";
+import dayjs from "dayjs";
 
 export default function ChallengeCard({
 	challenge,
@@ -34,6 +36,21 @@ export default function ChallengeCard({
 	const [cardHoverBgColor, setCardHoverBgColor] = useState<string>();
 	const [cardTextColor, setCardTextColor] = useState<string>();
 
+	const bloodMap = [
+		{
+			name: "一血",
+			icon: <FirstBloodIcon size={24} />,
+		},
+		{
+			name: "二血",
+			icon: <SecondBloodIcon size={24} />,
+		},
+		{
+			name: "三血",
+			icon: <ThirdBloodIcon size={24} />,
+		},
+	];
+
 	useEffect(() => {
 		setColor(challenge?.category?.color || theme.colors.brand[6]);
 	}, []);
@@ -142,43 +159,30 @@ export default function ChallengeCard({
 					{pts || challenge?.practice_pts || "?"} pts
 				</Text>
 				<Flex align={"center"}>
-					{challenge?.submissions && (
-						<>
-							{challenge?.submissions?.length > 0 && (
-								<Tooltip
-									label={`一血 ${challenge?.submissions?.[0]?.team?.name || challenge?.submissions?.[0]?.user?.nickname}`}
-									withArrow
-									position="bottom"
-								>
-									<ThemeIcon variant="transparent">
-										<FirstBloodIcon size={24} />
-									</ThemeIcon>
-								</Tooltip>
-							)}
-							{challenge?.submissions?.length > 1 && (
-								<Tooltip
-									label={`二血 ${challenge?.submissions?.[1]?.team?.name || challenge?.submissions?.[1]?.user?.nickname}`}
-									withArrow
-									position="bottom"
-								>
-									<ThemeIcon variant="transparent">
-										<SecondBloodIcon size={24} />
-									</ThemeIcon>
-								</Tooltip>
-							)}
-							{challenge?.submissions?.length > 2 && (
-								<Tooltip
-									label={`三血 ${challenge?.submissions?.[2]?.team?.name || challenge?.submissions?.[2]?.user?.nickname}`}
-									withArrow
-									position="bottom"
-								>
-									<ThemeIcon variant="transparent">
-										<ThirdBloodIcon size={24} />
-									</ThemeIcon>
-								</Tooltip>
-							)}
-						</>
-					)}
+					{challenge?.submissions?.map((submission, index) => (
+						<Tooltip
+							multiline
+							label={
+								<Stack gap={0}>
+									<Text size={"sm"} fw={600}>
+										{submission?.team?.name ||
+											submission?.user?.nickname}
+									</Text>
+									<Text size={"xs"}>
+										{dayjs(submission?.created_at).format(
+											"YYYY/MM/DD HH:mm:ss"
+										)}
+									</Text>
+								</Stack>
+							}
+							withArrow
+							position="bottom"
+						>
+							<ThemeIcon variant="transparent">
+								{bloodMap[index]?.icon}
+							</ThemeIcon>
+						</Tooltip>
+					))}
 				</Flex>
 			</Flex>
 		</Card>

diff --git a/web/src/pages/challenges/index.tsx b/web/src/pages/challenges/index.tsx
@@ -89,7 +89,7 @@ export default function Page() {
 		<>
 			<Stack m={56}>
 				<Flex align={"start"}>
-					<Flex w={360} mx={36}>
+					<Flex w={360} mx={36} visibleFrom={"md"}>
 						<Box
 							sx={{
 								flexGrow: 1,

diff --git a/web/src/utils/theme.ts b/web/src/utils/theme.ts
@@ -59,6 +59,9 @@ export function useTheme() {
 					transitionProps: {
 						exitDuration: 250,
 					},
+					overlayProps: {
+						backgroundOpacity: 0,
+					},
 				},
 			},
 			ActionIcon: {