wip(frontend): remove challenge card transition

ElaBosak233 · Jun 9, 2024 · 64f9f51 · 64f9f51
1 parent 49816e3
commit 64f9f51
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 25 deletions.
diff --git a/web/src/components/widgets/ChallengeCard.module.css b/web/src/components/widgets/ChallengeCard.module.css
@@ -3,10 +3,6 @@
 		alpha(var(--color), 0.15),
 		alpha(var(--color), 0.3)
 	);
-	transition: 0.3s ease-out;
-	position: relative;
-	height: 150px;
-	width: 275px;
 
 	&:hover {
 		background-color: light-dark(
@@ -21,10 +17,6 @@
 		alpha(var(--color), 1),
 		alpha(var(--color), 0.75)
 	);
-	transition: 0.3s ease-out;
-	position: relative;
-	height: 150px;
-	width: 275px;
 
 	&:hover {
 		background-color: light-dark(

diff --git a/web/src/components/widgets/ChallengeCard.tsx b/web/src/components/widgets/ChallengeCard.tsx
@@ -28,7 +28,7 @@ export default function ChallengeCard({
 }) {
 	const theme = useMantineTheme();
 
-	const [color, setColor] = useState<string>(theme.colors.brand[6]);
+	const [color, setColor] = useState<string>("transparent");
 
 	const bloodMap = [
 		{
@@ -52,7 +52,7 @@ export default function ChallengeCard({
 	}
 
 	useEffect(() => {
-		setColor(challenge?.category?.color || theme.colors.brand[6]);
+		setColor(challenge?.category?.color || theme.colors.brand[5]);
 	}, []);
 
 	return (

diff --git a/web/src/pages/games/[id]/index.tsx b/web/src/pages/games/[id]/index.tsx
@@ -36,6 +36,7 @@ export default function Page() {
 
 	const [game, setGame] = useState<Game>();
 	const [gameTeams, setGameTeams] = useState<Array<GameTeam>>([]);
+	const [gameTeam, setGameTeam] = useState<GameTeam>();
 	const [canEnter, setCanEnter] = useState(false);
 
 	const startedAt = dayjs(Number(game?.started_at) * 1000).format(
@@ -95,12 +96,13 @@ export default function Page() {
 	useEffect(() => {
 		if (gameTeams) {
 			for (const gameTeam of gameTeams) {
-				if (gameTeam?.is_allowed) {
-					for (const user of gameTeam?.team?.users || []) {
-						if (user?.id === authStore?.user?.id) {
+				for (const user of gameTeam?.team?.users || []) {
+					if (user?.id === authStore?.user?.id) {
+						setGameTeam(gameTeam);
+						if (gameTeam?.is_allowed) {
 							setCanEnter(true);
-							return;
 						}
+						return;
 					}
 				}
 			}
@@ -150,16 +152,20 @@ export default function Page() {
 									>
 										查看榜单
 									</Button>
-									{!canEnter && (
-										<Button onClick={() => applyOpen()}>
-											报名参赛
-										</Button>
-									)}
-									{canEnter && (
-										<Button onClick={() => enter()}>
-											进入比赛
-										</Button>
-									)}
+									<Button
+										onClick={() => applyOpen()}
+										disabled={gameTeam !== undefined}
+									>
+										{!gameTeam
+											? "报名参赛"
+											: `已报名：${gameTeam?.team?.name}`}
+									</Button>
+									<Button
+										onClick={() => enter()}
+										disabled={!canEnter}
+									>
+										进入比赛
+									</Button>
 								</Group>
 							</Stack>
 						</Stack>

diff --git a/web/src/pages/games/[id]/scoreboard.tsx b/web/src/pages/games/[id]/scoreboard.tsx
@@ -15,7 +15,6 @@ import {
 	Tooltip,
 	ThemeIcon,
 	alpha,
-	lighten,
 } from "@mantine/core";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";