fix: 多语言弹窗

messages/br.json

@@ -10,5 +10,9 @@
     "login": "Login",
     "register": "Cadastre-se",
     "locale": "Preferência de Localização"
+  },
+  "Game": {
+    "demo":"Demo",
+    "join":"JUGUE"
   }
 }

src/api/home.ts

@@ -4,35 +4,35 @@ export interface EntityGameListRep {
     /**
      * 游戏ICON
      */
-    game_icon?: string;
+    game_icon: string;
     /**
      * 游戏ID
      */
-    game_id?: string;
+    game_id: string;
     /**
      * 游戏名称
      */
-    game_name?: string;
+    game_name: string;
     /**
      * 游戏名称中文
      */
-    game_name_cn?: string;
+    game_name_cn: string;
     /**
      * 游戏类型
      */
-    game_type?: string;
+    game_type: string;
     /**
      * id
      */
-    id?: number;
+    id: number;
     /**
      * 厂商名字 besoft 等等
      */
-    provider?: string;
+    provider: string;
     /**
      * 时间
      */
-    release_date?: string;
+    release_date: string;
 }
 
 export interface GroupType {

src/app/[locale]/_home/HomeGames.tsx

@@ -1,30 +1,16 @@
 "use client";
 import { getGamesApi, GroupType } from "@/api/home";
-import { getUserApi } from "@/api/test";
 import { SwiperGroup } from "@/components/Card";
 import { FC, PropsWithChildren, useEffect, useState } from "react";
 import "swiper/css";
 interface Props {}
-const urls = [
-    "https://images.hibigwin.com/9f/202405/mqletkfLwGeZkSH.jpg",
-    "https://images.hibigwin.com/9f/202402/jLkCmSkItvcqlid.jpg",
-    "https://images.hibigwin.com/9f/202404/DDnZEhXKutDVIYn.jpg",
-    "https://images.hibigwin.com/9f/202406/wOBQjusbGUZkBMA.jpg",
-    "https://images.hibigwin.com/9f/202402/jLkCmSkItvcqlid.jpg",
-    "https://images.hibigwin.com/9f/202405/mqletkfLwGeZkSH.jpg",
-    "https://images.hibigwin.com/9f/202407/LPpEiiltiXwcdYz.jpg",
-    "https://images.hibigwin.com/9f/202406/veFfaahiTGAyDpy.jpg",
-];
+
 const HomeSwiper: FC<PropsWithChildren<Props>> = (props) => {
     const [groupGames, setGroupGames] = useState<GroupType[]>([]);
     useEffect(() => {
         getGamesApi().then((res) => {
             setGroupGames(res.data);
         });
-
-        getUserApi().then((res) => {
-            console.log(`🎯🎯🎯🎯🎯-> in HomeGames.tsx on 25`, res);
-        });
     }, []);
     return (
         <div>

src/app/[locale]/_home/HomeSwiper.tsx

@@ -1,9 +1,6 @@
 "use client";
 import { FC, PropsWithChildren } from "react";
-import "swiper/css";
-import "swiper/css/autoplay";
-import "swiper/css/pagination";
-import "swiper/css/virtual";
+
 import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 interface Props {}

src/app/[locale]/page.tsx

@@ -11,13 +11,13 @@ const App: FC<LocalPropsWithChildren> = (props) => {
     const t = useTranslations("global");
     return (
         <Layout>
-            <>
+            <div>
                 <Box>
                     <HomeSwiper></HomeSwiper>
                     <HomeCard></HomeCard>
                 </Box>
                 <HomeGames />
-            </>
+            </div>
         </Layout>
     );
 };

src/app/globals.css

@@ -3,6 +3,13 @@
 @tailwind utilities;
 @import "@/styles/iconfont/iconfont.css";
 
+/* swiper */
+@import "swiper/css";
+@import "swiper/css/autoplay";
+@import "swiper/css/pagination";
+@import "swiper/css/virtual";
+
+
 :root{
   --swiper-pagination-bullet-width: 0.23rem;
   --swiper-pagination-bullet-height: 0.05rem;
@@ -31,4 +38,5 @@ html {
     height: auto;
     margin: 0 auto;
     font-size: 0.14rem;
+    position: relative;
 }

src/components/Card/Card.tsx

@@ -1,17 +1,84 @@
+"use client";
+import { EntityGameListRep } from "@/api/home";
+import { Button, Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react";
+import { useTranslations } from "next-intl";
 import { FC, PropsWithChildren, ReactNode } from "react";
 import styles from "./style.module.scss";
 export interface CardProps {
-    url?: string;
-    alt?: string;
-    render?: () => ReactNode;
+    item?: EntityGameListRep;
+    render?: (value: EntityGameListRep) => ReactNode;
 }
-
 const Card: FC<PropsWithChildren<CardProps>> = (props) => {
-    const { render, url, alt } = props;
+    const { render, item } = props;
+    const { isOpen, onOpen, onOpenChange } = useDisclosure();
+    const app: HTMLElement = document.querySelector("#app")!;
+    const t = useTranslations("Game");
+    const handler = (game: EntityGameListRep) => {
+        onOpen();
+    };
     return (
-        <div className={styles.cardWrap}>
-            {render ? render() : <img src={url} alt={alt} className={"h-1/1"} />}
-        </div>
+        <>
+            <div className={styles.cardWrap} onClick={() => handler(item!)}>
+                {render ? (
+                    render(item!)
+                ) : (
+                    <img src={item?.game_icon} alt={item?.game_name_cn} className={"h-1/1"} />
+                )}
+            </div>
+            <Modal
+                isOpen={isOpen}
+                portalContainer={app}
+                placement={"bottom"}
+                onOpenChange={onOpenChange}
+                classNames={{
+                    header: "px-0 pb-0 ",
+                    wrapper: "w-[100vw]  m-auto",
+                    closeButton: "text-[20px] top-[0rem] right-0 text-[#fff] ",
+                    backdrop: "absolute top-0 left-0 sm:my-0 ",
+                    base: "my-0 my-0 sm:mx-[0] mx-0 sm:my-0 max-w-[4.02rem]  ",
+                    body: "py-[12px]",
+                }}
+            >
+                <ModalContent>
+                    {(onClose) => (
+                        <>
+                            <ModalBody className={"w-[4rem] text-[0.1111rem]"}>
+                                <div className={"w-1/1 flex flex-1"}>
+                                    <div className={styles.cardWrap}>
+                                        <img src={item?.game_icon} alt={item?.game_name_cn} />
+                                    </div>
+                                    <div className={styles.cardWrapGmeInfo}>
+                                        <p className={"h-[0.6rem]"}>{item?.game_name_cn}</p>
+
+                                        <div className={"flex w-[2.2rem] justify-around"}>
+                                            <Button
+                                                className={
+                                                    "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +
+                                                    " bg-[#3a3a3a]" +
+                                                    " font-bold"
+                                                }
+                                            >
+                                                {t("demo")}
+                                            </Button>
+                                            <Button
+                                                className={
+                                                    "h-[0.39rem] w-[0.89rem] text-[0.15rem]" +
+                                                    " rounded-[0.05rem]" +
+                                                    " bg-[#009d80]" +
+                                                    " font-bold"
+                                                }
+                                            >
+                                                {t("join")}
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </ModalBody>
+                        </>
+                    )}
+                </ModalContent>
+            </Modal>
+        </>
     );
 };
 

src/components/Card/GroupCard.tsx

@@ -19,7 +19,7 @@ const GroupCard: FC<GroupProps> = (props) => {
     );
     return (
         <div className={"flex flex-wrap justify-between gap-y-4"}>
-            {data?.map((item, index) => <Card key={index} url={item.game_icon} {...other} />)}
+            {data?.map((item, index) => <Card key={index} item={item} {...other} />)}
         </div>
     );
 };

src/components/Card/SwiperGroup.tsx

@@ -1,10 +1,7 @@
 "use client";
 import Box from "@/components/Box";
 import { FC, PropsWithChildren, useRef } from "react";
-import "swiper/css";
-import "swiper/css/autoplay";
-import "swiper/css/pagination";
-import "swiper/css/virtual";
+
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 
 import { GroupType } from "@/api/home";

src/components/Card/style.module.scss

@@ -8,7 +8,11 @@
   background: #212a36;
   border-radius: .1rem;
 }
-
+.cardWrapGmeInfo{
+  color: #fff;
+  font-size: .2rem;
+  margin: .2rem 0 0 .17rem;
+}
 
 .mainTitle{
     height: .34rem;

src/components/Layout/index.tsx

@@ -4,7 +4,7 @@ import { FC, PropsWithChildren } from "react";
 import styles from "./style.module.scss";
 type Props = FooterProps & HeaderProps;
 const Layout: FC<PropsWithChildren<Props>> = (props) => {
-    const { children, headerRender, footerRender } = props;
+    const { children } = props;
     return (
         <div className="relative h-[100vh]">
             <Header {...props}></Header>