refactor: Game Lobby Display and Quick Join Feature (#409)

* refactor: layout and component style * refactor: home page and add game default cover
Game-as-a-Service · Oct 13, 2024 · ce8f7c9 · ce8f7c9
1 parent bf0e9e3
commit ce8f7c9
Show file tree

Hide file tree

Showing 18 changed files with 230 additions and 169 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/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx
@@ -7,6 +7,7 @@ import { PolymorphicRef } from "@/lib/types";
 
 export enum ButtonVariant {
   PRIMARY = "primary",
+  PRIMARY_TRANSPARENT = "primaryTransparent",
   SECONDARY = "secondary",
   HIGHLIGHT = "highlight",
 }
@@ -22,6 +23,8 @@ const commonDisabledClasses =
 const buttonTypeClasses: Record<ButtonVariant, string> = {
   primary:
     "text-primary-700 bg-primary-200 hover:text-primary-50 hover:bg-primary-300 active:text-primary-50 active:bg-primary-400",
+  primaryTransparent:
+    "text-primary-800 bg-primary-200/60 hover:text-primary-800 hover:bg-primary-300/50 active:text-primary-800 active:bg-primary-300/50",
   secondary:
     "text-primary-200 bg-transparent hover:bg-primary-300/40 active:bg-primary-200/20 disabled:bg-transparent disabled:border",
   highlight:
@@ -51,6 +54,8 @@ type InnerButtonComponent = (
 const iconTypeClasses: Record<ButtonVariant, string> = {
   primary:
     "stroke-primary-700 hover:stroke-primary-50 active:stroke-primary-50",
+  primaryTransparent:
+    "stroke-primary-700 hover:stroke-primary-700 active:stroke-primary-700",
   secondary: "stroke-primary-200 disabled:stroke-grey-500",
   highlight: "stroke-primary-50",
 };

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/components/shared/Chat/v2/Chat.tsx b/components/shared/Chat/v2/Chat.tsx
@@ -1,19 +1,20 @@
-import { CSSProperties, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import ChatHeader, { ChatTab } from "./ChatHeader";
 import ChatMessages from "./ChatMessages";
 import ChatFriendList, { FriendType, getTargetUser } from "./ChatFriendList";
 import ChatInput from "./ChatInput";
 import type { MessageType } from "./ChatMessages";
 import { createMockFriendMessages } from "./__mocks__/mock";
 import Icon from "../../Icon";
+import { cn } from "@/lib/utils";
 
 export type ChatProps = {
   userId: string;
   roomId?: string;
   lobbyMessages: MessageType[];
   friendList: FriendType[];
   roomMessages: MessageType[];
-  maxHeight?: string;
+  className?: string;
   onSubmit: (message: Pick<MessageType, "content" | "target">) => void;
 };
 
@@ -23,7 +24,7 @@ export default function Chat({
   lobbyMessages,
   friendList,
   roomMessages,
-  maxHeight = "calc(100vh - 168px)",
+  className,
   onSubmit,
 }: Readonly<ChatProps>) {
   const [messages, setMessages] = useState(lobbyMessages);
@@ -74,17 +75,14 @@ export default function Chat({
   };
 
   return (
-    <div
-      className="w-[308px] h-[var(--chat-height))] gradient-purple rounded-lg"
-      style={{ "--chat-height": maxHeight } as CSSProperties}
-    >
+    <div className={cn("w-80 gradient-purple rounded-lg", className)}>
       <div className="h-full body-bg border border-transparent bg-clip-padding rounded-lg overflow-hidden">
         <ChatHeader
           tabs={chatTabs}
           activeTab={activeTab}
           onToggle={handleToggleTab}
         />
-        <div className="relative h-[calc(var(--chat-height)-120px)] bg-primary-50/4">
+        <div className="relative h-[calc(100%-182px)] bg-primary-50/4">
           {isFriendList ? (
             <ChatFriendList
               userId={userId}

diff --git a/components/shared/Chat/v2/ChatMessages.tsx b/components/shared/Chat/v2/ChatMessages.tsx
@@ -37,7 +37,7 @@ export default function ChatMessages({
   }, [messages]);
 
   return (
-    <div className="flex flex-col justify-end min-h-full max-h-[calc(var(--chat-height)-120px)]">
+    <div className="flex flex-col justify-end min-h-full max-h-[calc(100%-182px)]">
       <div ref={messagesRef} className="overflow-y-scroll scrollbar">
         <div className="p-4 pr-0">
           {messages.map(({ from, content }, index) => {

diff --git a/components/shared/Header.tsx b/components/shared/Header.tsx
@@ -21,10 +21,14 @@ interface ButtonProps {
 }
 
 interface HeaderProps {
+  className?: string;
   onClickChatButton: () => void;
 }
 
-export default function Header({ onClickChatButton }: Readonly<HeaderProps>) {
+export default function Header({
+  className,
+  onClickChatButton,
+}: Readonly<HeaderProps>) {
   const [openProfile, setOpenProfile] = useState(false);
 
   const buttons: ButtonProps[] = [
@@ -51,7 +55,12 @@ export default function Header({ onClickChatButton }: Readonly<HeaderProps>) {
   ];
 
   return (
-    <header className="flex flex-row items-center justify-between px-8 py-2 bg-white/8 glass-shadow">
+    <header
+      className={cn(
+        "flex items-center justify-between px-8 py-2 bg-white/8 glass-shadow backdrop-blur-3xl",
+        className
+      )}
+    >
       <div className="flex items-center gap-3">
         <Icon name="logo" className="bg-transparent" />
         <h2 className="text-primary-100 text-2xl">遊戲微服務大平台</h2>

diff --git a/components/shared/Sidebar.tsx b/components/shared/Sidebar.tsx
@@ -20,7 +20,11 @@ interface RouteProps {
   isShow: boolean;
 }
 
-export default function Sidebar() {
+interface SidebarProps {
+  className?: string;
+}
+
+export default function Sidebar({ className }: SidebarProps) {
   const { pathname } = useRouter();
   const { currentUser } = useAuth();
   const { logout, getRoomId } = useUser();
@@ -52,7 +56,12 @@ export default function Sidebar() {
   };
 
   return (
-    <nav className="flex flex-col justify-start bg-white/8 glass-shadow py-6 rounded-2xl w-18 h-full gap-5">
+    <nav
+      className={cn(
+        "flex flex-col justify-start bg-white/8 glass-shadow py-6 rounded-2xl w-18 gap-5",
+        className
+      )}
+    >
       {routes
         .filter((route) => route.isShow)
         .map((routeProps) => (

diff --git a/containers/layout/AppLayout.tsx b/containers/layout/AppLayout.tsx
@@ -14,16 +14,20 @@ export default function Layout({ children }: PropsWithChildren) {
   } = useChat();
 
   return (
-    <div className="inset-0 flex flex-col w-full h-full">
-      <Header onClickChatButton={toggleChatVisibility} />
-      <div className="ml-2 mr-4 my-6 flex grow max-w-[100vw]">
+    <>
+      <Header
+        className="sticky top-0 z-40"
+        onClickChatButton={toggleChatVisibility}
+      />
+      <div className="ml-2 mr-4 my-6 flex grow">
         <div className="shrink-0">
-          <Sidebar />
+          <Sidebar className="sticky top-20 z-30 h-main-height" />
         </div>
         <main className="grow overflow-x-hidden">{children}</main>
         {isChatVisible && (
           <div className="shrink-0">
             <Chat
+              className="sticky top-20 z-30 h-main-height"
               userId=""
               roomId={roomId}
               friendList={[]}
@@ -34,6 +38,6 @@ export default function Layout({ children }: PropsWithChildren) {
           </div>
         )}
       </div>
-    </div>
+    </>
   );
 }
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",
   },
 ];
 

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -12,7 +12,7 @@ export default function Document() {
         <meta name="og:title" content={siteTitle} />
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
-      <body className="body-bg text-primary-200 overflow-hidden">
+      <body className="body-bg text-primary-200">
         <Main />
         <NextScript />
       </body>