wip: update

src/components/core/Image/Image.module.scss

@@ -6,7 +6,7 @@
     height: var(--image-height);
     border-radius: var(--image-radius);
     overflow: hidden;
-    background-color: light-dark(#0000001d, #ffffff0d);
+    background-color: light-dark(#cbcbcb, #2a3539);
     transition: all 0.2s ease-in-out;
     user-select: none;
     display: flex;
@@ -15,9 +15,14 @@
 }
 
 .img {
+    object-fit: cover;
+    display: block;
     width: 100%;
     height: 100%;
-    object-fit: cover;
+
+    &[data-error="true"] {
+        display: none;
+    }
 }
 
 .loading {
@@ -26,7 +31,17 @@
     left: 0;
     width: 100%;
     height: 100%;
+    border: none;
     backdrop-filter: blur(5px);
+
+    &.exit {
+        opacity: 1;
+    }
+
+    &.exit-active {
+        opacity: 0;
+        transition: opacity 150ms ease-out;
+    }
 }
 
 .loading-icon {

src/components/core/Image/Image.tsx

@@ -4,6 +4,7 @@ import Loading from "~icons/svg-spinners/180-ring-with-bg";
 import { Box } from "../Box";
 import clsx from "clsx";
 import Flag2BoldDuotone from "~icons/solar/flag-2-bold-duotone";
+import { CSSTransition } from "react-transition-group";
 
 export interface ImageProps extends ComponentProps<"img"> {
     src?: string;
@@ -36,6 +37,8 @@ export function Image(props: ImageProps) {
     const [loading, setLoading] = useState<boolean>(true);
     const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);
 
+    const nodeRef = React.useRef(null);
+
     useEffect(() => {
         setErr(false);
         setLoading(true);
@@ -57,29 +60,37 @@ export function Image(props: ImageProps) {
             }}
         >
             {err && fallback}
-            {!err && (
-                <>
-                    <img
-                        className={styles["img"]}
-                        src={currentSrc}
-                        alt={""}
-                        onLoad={() => setLoading(false)}
-                        onError={() => setErr(true)}
-                        draggable={false}
-                    />
-                    {loading && (
-                        <Box className={styles["loading"]}>
-                            <Box className={styles["loading-icon"]}>
-                                <Loading
-                                    color={
-                                        "light-dark(var(--color-primary), white)"
-                                    }
-                                />
-                            </Box>
+            <>
+                <img
+                    className={styles["img"]}
+                    src={currentSrc}
+                    onLoad={() => {
+                        setTimeout(() => {
+                            setLoading(false);
+                        }, 500);
+                    }}
+                    onError={() => setErr(true)}
+                    draggable={false}
+                    data-error={err}
+                    loading={"lazy"}
+                />
+                <CSSTransition
+                    in={!err && loading}
+                    timeout={500}
+                    unmountOnExit
+                    classNames={{
+                        exit: styles["exit"],
+                        exitActive: styles["exit-active"],
+                    }}
+                    nodeRef={nodeRef}
+                >
+                    <Box className={styles["loading"]} ref={nodeRef}>
+                        <Box className={styles["loading-icon"]}>
+                            <Loading color={"white"} />
                         </Box>
-                    )}
-                </>
-            )}
+                    </Box>
+                </CSSTransition>
+            </>
         </Box>
     );
 }

src/components/widgets/Navbar/Navbar.tsx

@@ -5,9 +5,7 @@ import UsersGroupTwoRoundedBoldDuotone from "~icons/solar/users-group-two-rounde
 import SolarSettingsBoldDuotone from "~icons/solar/settings-bold-duotone";
 import SolarRoundArrowLeftBoldDuotone from "~icons/solar/round-arrow-left-bold-duotone";
 import styles from "./Navbar.module.scss";
-import useThemeColor from "@/hooks/useThemeColor";
-import { CSSProperties, useMemo, useRef, useState } from "react";
-import chroma from "chroma-js";
+import { useMemo, useRef, useState } from "react";
 import { Link, useLocation } from "react-router";
 import { Avatar, Button, Popover, Tooltip } from "@/components/core";
 import { Box } from "@/components/core/Box";

src/pages/Challenges/Challenges.tsx → src/pages/challenges/index.tsx

@@ -20,7 +20,7 @@ import { LoadingOverlay } from "@/components/core/LoadingOverlay/LoadingOverlay"
 import { Box } from "@/components/core/Box";
 import { useSharedStore } from "@/stores/shared";
 
-export function Challenges() {
+export function Index() {
     const authStore = useAuthStore();
     const sharedStore = useSharedStore();
 

src/pages/games/[id]/index.tsx

@@ -0,0 +1,3 @@
+export function Index() {
+    return <>1122</>;
+}

src/pages/games/_blocks/All/All.module.scss

@@ -0,0 +1,7 @@
+.root {
+    min-height: 100%;
+    scroll-snap-align: center;
+    flex: 1;
+
+    padding: 3vh 10rem;
+}

src/pages/games/_blocks/All/All.tsx

@@ -0,0 +1,77 @@
+import { Button, Flex, Pagination, Stack, TextInput } from "@/components/core";
+import styles from "./All.module.scss";
+import { useEffect, useState } from "react";
+import MinimalisticMagniferBoldDuotone from "~icons/solar/minimalistic-magnifer-bold-duotone";
+import { Game } from "@/models/game";
+import { get } from "@/api/game";
+import { GameCard } from "./GameCard";
+
+export function All() {
+    const [search, setSearch] = useState("");
+    const [searchInput, setSearchInput] = useState("");
+    const [games, setGames] = useState<Array<Game>>();
+
+    const [size, _] = useState(4);
+    const [page, setPage] = useState(1);
+    const [total, setTotal] = useState(0);
+
+    function fetchGames() {
+        get({
+            title: search,
+            sorts: "-id",
+            size: size,
+            page: page,
+        }).then((res) => {
+            setGames(res.data);
+            setTotal(res.total || 0);
+        });
+    }
+
+    useEffect(() => {
+        fetchGames();
+    }, [search, page]);
+
+    return (
+        <Stack
+            className={styles["root"]}
+            align={"center"}
+            width={"100%"}
+            gap={25}
+        >
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    setSearch(searchInput);
+                }}
+                style={{
+                    width: "80%",
+                }}
+            >
+                <Flex align={"center"} gap={15}>
+                    <TextInput
+                        icon={<MinimalisticMagniferBoldDuotone />}
+                        placeholder={"搜索"}
+                        value={searchInput}
+                        onChange={setSearchInput}
+                        clearable
+                        variant={"outlined"}
+                        style={{
+                            flex: "1",
+                        }}
+                    />
+                    <Button type={"submit"}>搜索</Button>
+                </Flex>
+            </form>
+            <Stack width={"100%"} align={"center"} style={{ flex: 1 }} gap={15}>
+                {games?.map((game) => <GameCard key={game.id} game={game} />)}
+            </Stack>
+            <Stack width={"100%"} align={"center"}>
+                <Pagination
+                    total={Math.ceil(total / size)}
+                    value={page}
+                    onChange={setPage}
+                />
+            </Stack>
+        </Stack>
+    );
+}

src/pages/games/_blocks/All/GameCard/GameCard.module.scss

@@ -0,0 +1,38 @@
+.root {
+    position: relative;
+    box-shadow: var(--shadow-md);
+    background-color: var(--bg-2nd-color);
+    min-height: calc(25% - 15px);
+    max-height: calc(25% - 15px);
+    width: 80%;
+
+    border-radius: 20px;
+
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    user-select: none;
+
+    &:hover {
+        filter: brightness(1.2);
+    }
+
+    &:active {
+        box-shadow: none;
+        transform: translateY(4px);
+    }
+}
+
+.icon {
+    position: absolute;
+    left: -50%;
+}
+
+.trapezoid {
+    position: absolute;
+    right: -2px;
+    top: -2px;
+    width: 85px;
+    height: 85px;
+    background-color: var(--color-primary);
+    clip-path: polygon(100% 100%, 100% 50%, 50% 0, 0% 0);
+}

src/pages/games/_blocks/All/GameCard/GameCard.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex, Image, Stack } from "@/components/core";
+import styles from "./GameCard.module.scss";
+import { Game } from "@/models/game";
+
+export interface GameCardProps {
+    game: Game;
+}
+
+export function GameCard(props: GameCardProps) {
+    const { game } = props;
+
+    return (
+        <Flex className={styles["root"]} gap={30} align={"flex-start"}>
+            <Image
+                src={`/api/games/${game?.id}/poster`}
+                width={"25%"}
+                radius={"20px 0 0 20px"}
+            />
+            <Stack
+                gap={10}
+                width={"50%"}
+                style={{
+                    margin: "2rem 0",
+                }}
+            >
+                <h2
+                    style={{
+                        fontSize: "1.25rem",
+                        fontWeight: 600,
+                    }}
+                >
+                    {game?.title}
+                </h2>
+                <p
+                    style={{
+                        fontSize: "0.875rem",
+                        fontWeight: 500,
+                    }}
+                >
+                    {game?.sketch}
+                </p>
+            </Stack>
+            <Box className={styles["trapezoid"]} />
+        </Flex>
+    );
+}

src/pages/games/_blocks/All/GameCard/index.ts

@@ -0,0 +1 @@
+export { GameCard } from "./GameCard";

src/pages/games/_blocks/All/index.ts

@@ -0,0 +1 @@
+export { All } from "./All";