refactor: home page and add game default cover

Game-as-a-Service · Oct 13, 2024 · 7df9d6d · 7df9d6d
1 parent 627cd67
commit 7df9d6d
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 109 deletions.
diff --git a/components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx b/components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
@@ -14,7 +14,7 @@ type GroupedGamesType = {
 
 function GameList({ gameList, onGameChange, activeGameId }: GameListProp) {
   const groupedGames = gameList.reduce((result: GroupedGamesType, game) => {
-    const category = game.category || "其他";
+    const category = "其他";
     if (!result[category]) {
       result[category] = [];
     }

diff --git a/components/shared/Carousel/v2/Carousel.stories.tsx b/components/shared/Carousel/v2/Carousel.stories.tsx
@@ -21,7 +21,7 @@ const meta: Meta<typeof Carousel> = {
     },
   ],
   args: {
-    uniqueKey: "name",
+    renderKey: (props: any) => props.name,
     items: [{ name: "TEST 1" }, { name: "TEST 2" }, { name: "TEST 3" }],
     Component: Card,
   },

diff --git a/components/shared/Carousel/v2/Carousel.tsx b/components/shared/Carousel/v2/Carousel.tsx
@@ -1,18 +1,15 @@
-import { CSSProperties, FC, useEffect, useRef, useState } from "react";
+import { CSSProperties, FC, Key, useEffect, useRef, useState } from "react";
 import Icon from "../../Icon/v2/Icon";
 
-interface CarouselProps<
-  Item extends Record<string, unknown>,
-  Key extends keyof Item = keyof Item,
-> {
-  items: (Item & Record<Key, string>)[];
-  uniqueKey: Key;
+interface CarouselProps<Item extends Record<string, unknown>> {
+  items: Item[];
+  renderKey: (item: Item) => Key;
   Component: FC<Item>;
 }
 
 export default function Carousel<Item extends Record<string, unknown>>({
   items,
-  uniqueKey,
+  renderKey,
   Component,
 }: Readonly<CarouselProps<Item>>) {
   const [showIndex, setShowIndex] = useState(0);
@@ -68,7 +65,7 @@ export default function Carousel<Item extends Record<string, unknown>>({
           {Array.isArray(items) &&
             items.map((item) => (
               <li
-                key={item[uniqueKey]}
+                key={renderKey(item)}
                 className="shrink-0 w-[var(--max-width)]"
                 style={
                   {

diff --git a/hooks/useRequest.ts b/hooks/useRequest.ts
@@ -34,7 +34,7 @@ const useRequest = () => {
         requestWrapper: IRequestWrapper<T>,
         options: FetchOptions = {
           toast: {
-            show: true,
+            show: false,
             options: {
               position: "bottom-right",
             },

diff --git a/mocks/games.ts b/mocks/games.ts
@@ -6,21 +6,23 @@ const mock_gameList: GameType[] = [
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 3,
     maxPlayers: 10,
-    category: "心機",
+    createdOn: "2024-01-01T00:00:00",
   },
   {
     id: "133456",
     name: "璀璨寶石",
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 2,
     maxPlayers: 4,
+    createdOn: "2024-01-01T00:00:00",
   },
   {
     id: "133416",
     name: "富饒之城",
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 3,
     maxPlayers: 8,
+    createdOn: "2024-01-01T00:00:00",
   },
 
   {
@@ -29,14 +31,15 @@ const mock_gameList: GameType[] = [
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 3,
     maxPlayers: 6,
+    createdOn: "2024-01-01T00:00:00",
   },
   {
     id: "184456",
     name: "農家樂",
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 1,
     maxPlayers: 5,
-    category: "策略",
+    createdOn: "2024-01-01T00:00:00",
   },
 ];