fix: change page animation bug

Game-as-a-Service · Oct 26, 2024 · f9bea0f · f9bea0f
1 parent 73f812c
commit f9bea0f
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 64 deletions.
diff --git a/components/lobby/CreateRoomModal/CreateRoomModal.tsx b/components/lobby/CreateRoomModal/CreateRoomModal.tsx
@@ -18,7 +18,7 @@ const initialRoomFormState = {
   maxPlayers: 0,
 };
 
-export default function CreateRoomModal() {
+export default function CreateRoomModal({ tabIndex }: { tabIndex: number }) {
   const [showThisModal, setshowThisModal] = useState(false);
   const [showGameListModal, setShowGameListModal] = useState(false);
   const [gameList, setGameList] = useState<GameType[]>([]);
@@ -102,6 +102,7 @@ export default function CreateRoomModal() {
       <button
         type="button"
         className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
+        tabIndex={tabIndex}
         onClick={() => setshowThisModal(true)}
       >
         開設新房間

diff --git a/components/shared/Carousel/v2/Carousel.type.ts b/components/shared/Carousel/v2/Carousel.type.ts
@@ -5,6 +5,7 @@ export type TItem = Record<string, unknown> & { id: Key };
 
 export type CarouselItemProps<Item extends TItem> = Item & {
   showIndex: number;
+  index: number;
 };
 
 export interface ICarouselContext<Item extends TItem = TItem> {

diff --git a/components/shared/Carousel/v2/CarouselMain.tsx b/components/shared/Carousel/v2/CarouselMain.tsx
@@ -1,7 +1,7 @@
 import {
   CSSProperties,
   PropsWithChildren,
-  useLayoutEffect,
+  useCallback,
   useRef,
   useState,
 } from "react";
@@ -14,17 +14,21 @@ export default function CarouselMain({ children }: PropsWithChildren) {
   const { showIndex, items, Component, renderKey } = useCarousel();
   const [carouselItemWidth, setCarouselItemWidth] = useState(0);
   const carouselRef = useRef<HTMLDivElement>(null);
-  const [isAnimating, setIsAnimating] = useAutoReset(false, 150);
+  const [isAnimating, setIsAnimating] = useAutoReset(true, 150);
+
+  const handleResize = useCallback(
+    (rect: ResizeObserverEntry) => {
+      setIsAnimating(false);
+      setCarouselItemWidth(rect.contentRect.width);
+    },
+    [setIsAnimating]
+  );
 
   useResizeObserver({
     elementRef: carouselRef,
-    callback: (rect) => setCarouselItemWidth(rect.contentRect.width),
+    callback: handleResize,
   });
 
-  useLayoutEffect(() => {
-    setIsAnimating(true);
-  }, [showIndex]);
-
   return (
     <div ref={carouselRef} className="overflow-hidden w-full">
       <ul
@@ -39,7 +43,7 @@ export default function CarouselMain({ children }: PropsWithChildren) {
         }
       >
         {Array.isArray(items) &&
-          items.map((item) => (
+          items.map((item, index) => (
             <li
               key={renderKey(item)}
               className="shrink-0 w-[var(--carousel-item-width)]"
@@ -49,7 +53,7 @@ export default function CarouselMain({ children }: PropsWithChildren) {
                 } as CSSProperties
               }
             >
-              <Component showIndex={showIndex} {...item} />
+              <Component showIndex={showIndex} index={index} {...item} />
             </li>
           ))}
       </ul>

diff --git a/hooks/useAutoReset.ts b/hooks/useAutoReset.ts
@@ -8,14 +8,17 @@ function useAutoReset<T>(initialValue: T, resetDelayMs = 1000) {
     clearTimeout(timerRef.current);
   }, []);
 
-  const setValue = (newValue: T) => {
-    setInternalValue(newValue);
-    clearTimer();
-    timerRef.current = setTimeout(
-      () => setInternalValue(initialValue),
-      resetDelayMs
-    );
-  };
+  const setValue = useCallback(
+    (newValue: T) => {
+      setInternalValue(newValue);
+      clearTimer();
+      timerRef.current = setTimeout(
+        () => setInternalValue(initialValue),
+        resetDelayMs
+      );
+    },
+    [clearTimer, initialValue, resetDelayMs]
+  );
 
   useEffect(() => {
     return () => clearTimer();

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -9,7 +9,6 @@ import { AxiosError } from "axios";
 import Button from "@/components/shared/Button/v2";
 import CreateRoomModal from "@/components/lobby/CreateRoomModal";
 import CarouselV2 from "@/components/shared/Carousel/v2";
-import FastJoinButton from "@/components/lobby/FastJoinButton";
 import SearchBar from "@/components/shared/SearchBar";
 import Tabs, { TabItemType } from "@/components/shared/Tabs";
 import { fastJoinGameEndpoint } from "@/requests/rooms";
@@ -20,6 +19,7 @@ import { useToast } from "@/components/shared/Toast";
 import Icon from "@/components/shared/Icon";
 import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
 import { CarouselItemProps } from "@/components/shared/Carousel/v2/Carousel.type";
+import { cn } from "@/lib/utils";
 
 const onImageError: ReactEventHandler<HTMLImageElement> = (e) => {
   if (e.target instanceof HTMLImageElement) {
@@ -28,6 +28,8 @@ const onImageError: ReactEventHandler<HTMLImageElement> = (e) => {
 };
 
 function CarouselCard({
+  showIndex,
+  index,
   id,
   img,
   name,
@@ -42,6 +44,7 @@ function CarouselCard({
   const toast = useToast();
   const { updateRoomId } = useUser();
   const [open, setOpen] = useState(false);
+  const tabIndex = index === showIndex ? 0 : -1;
 
   const handleFastJoin = async () => {
     try {
@@ -70,7 +73,6 @@ function CarouselCard({
     <div
       className="flex text-white px-12 gap-4"
       onMouseLeave={() => setOpen(false)}
-      role="menuitem"
     >
       <div className="relative flex items-end justify-end flex-[60%]">
         <Image
@@ -87,6 +89,7 @@ function CarouselCard({
             variant="primaryTransparent"
             className="flex"
             disabled={isLoading}
+            tabIndex={tabIndex}
             onClick={handleFastJoin}
           >
             <Icon name="Gamepad" className="w-6 h-6" />
@@ -96,43 +99,43 @@ function CarouselCard({
             <Button
               variant="primaryTransparent"
               className="w-11 h-11 p-0"
+              tabIndex={tabIndex}
               onClick={() => setOpen((pre) => !pre)}
             >
               <Icon name="Menu" className="w-6 h-6 rotate-90" />
             </Button>
-            {open && (
-              <div
-                className="absolute bottom-full right-0 mb-2"
-                onMouseLeave={() => setOpen(false)}
-                role="menuitem"
-              >
-                <ul className="py-4 effect-new-2 text-primary-800 bg-primary-200/60 whitespace-nowrap rounded-lg">
-                  <li>
-                    <Link
-                      href="/rooms"
-                      className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
-                    >
-                      加入現有房間
-                    </Link>
-                  </li>
-                  <li>
-                    <CreateRoomModal />
-                  </li>
-                  <li>
-                    <button
-                      type="button"
-                      className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
-                      onClick={() => alert("遊戲詳細介紹頁尚未實作，敬請期待")}
-                      onKeyDown={() =>
-                        alert("遊戲詳細介紹頁尚未實作，敬請期待")
-                      }
-                    >
-                      遊戲詳情
-                    </button>
-                  </li>
-                </ul>
-              </div>
-            )}
+            <div
+              className={cn(
+                "absolute bottom-full right-0 mb-2 transition-transform origin-[calc(100%-22px)_bottom] z-20",
+                !open && "scale-0"
+              )}
+            >
+              <ul className="py-4 effect-new-2 text-primary-800 bg-primary-200/60 whitespace-nowrap rounded-lg">
+                <li>
+                  <Link
+                    href="/rooms"
+                    className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
+                    tabIndex={open ? tabIndex : -1}
+                  >
+                    加入現有房間
+                  </Link>
+                </li>
+                <li>
+                  <CreateRoomModal tabIndex={open ? tabIndex : -1} />
+                </li>
+                <li>
+                  <button
+                    type="button"
+                    className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
+                    onClick={() => alert("遊戲詳細介紹頁尚未實作，敬請期待")}
+                    onKeyDown={() => alert("遊戲詳細介紹頁尚未實作，敬請期待")}
+                    tabIndex={open ? tabIndex : -1}
+                  >
+                    遊戲詳情
+                  </button>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -8,10 +8,11 @@ import {
 import { useRouter } from "next/router";
 import { GetStaticProps } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import Link from "next/link";
 
 import ButtonV2, { ButtonVariant } from "@/components/shared/Button/v2";
 import Cover from "@/components/shared/Cover";
-import IconV2, { IconName } from "@/components/shared/Icon";
+import Icon, { IconName } from "@/components/shared/Icon";
 
 import useAuth from "@/hooks/context/useAuth";
 import useUser from "@/hooks/useUser";
@@ -20,9 +21,7 @@ import { LoginType } from "@/requests/auth";
 
 import { NextPageWithProps } from "./_app";
 import { BoxFancy } from "@/components/shared/BoxFancy";
-import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { cn } from "@/lib/utils";
 
 const LoginMethods: { text: string; type: LoginType; icon: IconName }[] = [
   { text: "Google 帳號登入", type: LoginType.GOOGLE, icon: "Google" },
@@ -67,16 +66,11 @@ const Login: NextPageWithProps = () => {
     return LoginMethods.map(({ text, type, icon }) => (
       <Link key={type} href={`${internalEndpoint}/login?type=${type}`}>
         <ButtonV2
-          className={
-            "w-full min-w-[300px] max-w-[50%] xl:max-w-[318px] text-primary-50"
-          }
-          iconClassName={cn("stroke-none", {
-            "fill-current": type === LoginType.GITHUB,
-          })}
-          iconName={icon}
+          className="w-full min-w-[300px] max-w-[50%] xl:max-w-[318px] text-primary-50"
           variant={ButtonVariant.SECONDARY}
           onClick={(e: SyntheticEvent) => onLoginClick(e, type)}
         >
+          <Icon name={icon} className="w-6 h-6 stroke-none" />
           {text}
         </ButtonV2>
       </Link>
@@ -102,7 +96,7 @@ const Login: NextPageWithProps = () => {
           </p>
         ) : null}
         <h2 className="relative flex items-center text-[22px] font-normal text-primary-100 mb-12">
-          <IconV2 name="Logo" className="w-12 h-12" />
+          <Icon name="Logo" className="w-12 h-12" />
           遊戲微服務大平台
         </h2>
         {!bye ? (