feat: not finish

src/pages/game/index.tsx

@@ -0,0 +1,32 @@
+import GameContainer from './lib/GameContainer';
+import { useState } from 'react';
+import GameScene from './lib/Scene';
+
+const GameLogic = () => {
+    const [page, setPage] = useState<string>('Game01');
+    <GameContainer
+        scene={{
+            id: page,
+            bg: GameScene[page].bg,
+            choices: GameScene[page].choices,
+            message: GameScene[page].message,
+            goto: GameScene[page].goto,
+        }}
+        setPage={setPage}
+    />;
+    return (
+        <div>
+            <GameContainer
+                scene={{
+                    id: page,
+                    bg: GameScene[page].bg,
+                    message: GameScene[page].message,
+                    choices: GameScene[page].choices,
+                    goto: GameScene[page].goto,
+                }}
+                setPage={setPage}
+            />
+        </div>
+    );
+};
+export default GameLogic;

src/pages/game/lib/GameBackground.tsx

@@ -0,0 +1,31 @@
+import type { NextPage } from 'next';
+import Image from 'next/image';
+import scene4 from '@/public/images/gameBG/scene4.svg';
+import scene7 from '@/public/images/gameBG/scene17.svg';
+export default function GameBackground(bg: any) {
+    switch (bg.bg) {
+        case '1':
+            return <></>;
+        case '2':
+            return (
+                <div className="pointer-events-none fixed left-0 top-0 -z-40 h-full w-full select-none bg-white object-cover object-top" />
+            );
+        case '3':
+            return (
+                <div className="pointer-events-none fixed left-0 top-0 -z-40 h-full w-full select-none bg-black object-cover object-top" />
+            );
+        case '4':
+            return (
+                <Image
+                    src={scene4}
+                    alt=""
+                    sizes="(min-width: 1024px) 0, 100vw"
+                    className="pointer-events-none fixed left-0 top-0 -z-40 block h-full w-full select-none object-cover"
+                />
+            );
+        default:
+            return (
+                <div className="pointer-events-none fixed left-0 top-0 -z-40 h-full w-full select-none bg-black object-cover object-top" />
+            );
+    }
+}

src/pages/game/lib/GameContainer.tsx

@@ -0,0 +1,102 @@
+import type { NextPage } from 'next';
+import Button from '@/components/Button';
+import { Question } from './Scene';
+import type { Dispatch, SetStateAction } from 'react';
+import GameBackground from './GameBackground';
+import { AnimatePresence, motion } from 'framer-motion';
+
+function ChoicesButton({
+    choices,
+    goto,
+    setPage,
+}: {
+    choices: Question[];
+    goto: string;
+    setPage: Dispatch<SetStateAction<string>>;
+}) {
+    if (choices.length === 1) {
+        return (
+            <div className="mx-auto my-10 flex content-center text-sm">
+                <Button
+                    content={choices[0].message}
+                    onClick={() => {
+                        console.log(goto);
+                        setPage(goto);
+                    }}
+                    additionalStyle=" bg-pink-400 w-fit px-8 shadow-md border-pink-600 border-4 rounded-xl"
+                />
+            </div>
+        );
+    } else if (choices.length === 2) {
+        return (
+            <div className="mx-auto my-10 flex content-center text-sm ">
+                <Button
+                    content={choices[0].message}
+                    onClick={() => {
+                        console.log(goto);
+                        setPage(goto);
+                    }}
+                    additionalStyle="mx-4 bg-pink-400 w-fit px-2 shadow-md border-pink-600 border-4 rounded-xl"
+                />
+                <Button
+                    content={choices[1].message}
+                    onClick={() => {
+                        console.log(goto);
+                        setPage(goto);
+                    }}
+                    additionalStyle="mx-4 bg-pink-400 w-fit px-2 shadow-md border-pink-600 border-4 rounded-xl"
+                />
+            </div>
+        );
+    } else {
+        return (
+            <div
+                className="fixed left-0 top-0 h-full w-full items-center justify-center"
+                onClick={() => {
+                    console.log(goto);
+                    setPage(goto);
+                }}
+            />
+        );
+    }
+}
+export default function GameContainer({
+    scene,
+    setPage,
+}: {
+    scene: {
+        bg: string;
+        id: string;
+        message: any;
+        choices: Question[];
+        goto: string;
+    };
+    setPage: Dispatch<SetStateAction<string>>;
+}) {
+    return (
+        <AnimatePresence>
+            <motion.div
+                key={scene.id}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{
+                    duration: 0.5,
+                }}
+                className="relative flex min-h-screen w-full cursor-pointer place-content-center items-center overflow-x-hidden font-ibm font-bold text-white"
+            >
+                <GameBackground bg={scene.bg} />
+                <div className="mb-40 block">
+                    <h1 className="mx-auto text-center text-lg">
+                        {scene.message}
+                    </h1>
+                    {ChoicesButton({
+                        choices: scene.choices,
+                        goto: scene.goto,
+                        setPage: setPage,
+                    })}
+                </div>
+            </motion.div>
+        </AnimatePresence>
+    );
+}

src/pages/game/lib/Scene.tsx

@@ -0,0 +1,127 @@
+import type { NextPage } from 'next';
+export interface Question {
+    message: string;
+}
+export type Scene = Record<
+    string,
+    { bg: string; message: any; choices: Question[]; goto: string }
+>;
+const GameScene: Scene = {
+    Game01: {
+        bg: '1',
+        message: (
+            <p className="text-white">Youniverse through universe mission</p>
+        ),
+        choices: [
+            {
+                message: 'Ready?',
+            },
+        ],
+        goto: 'Game02',
+    },
+    Game02: {
+        bg: '2',
+        message: (
+            <p className="text-black">เบื้องหน้าคุณคือจอโฮโลแกรมสว่างวาบ</p>
+        ),
+        choices: [],
+        goto: 'Game03',
+    },
+    Game03: {
+        bg: '3',
+        message: <p className="text-white">กำลังเชื่อมต่อระบบ</p>,
+        choices: [],
+        goto: 'Game04',
+    },
+    Game04: {
+        bg: '4',
+        message: <></>,
+        choices: [],
+        goto: 'Game05',
+    },
+    Game05: {
+        bg: '4',
+        message: (
+            <p className="text-black">
+                อีกไม่กี่อึดใจข้างหน้า
+                <br />
+                ยานบินลำนี้จะพาคุณท่องเอกภพอันไร้พรมแดน
+            </p>
+        ),
+        choices: [],
+        goto: 'Game06',
+    },
+    Game06: {
+        bg: '4',
+        message: <p className="text-black">คุณพ่นลมหายใจเบาๆ รู้สึก</p>,
+        choices: [
+            {
+                message: 'ตื่นเต้นกับภารกิจ',
+            },
+            {
+                message: 'สงบนิ่งอย่างบอกไม่ถูก',
+            },
+        ],
+        goto: 'Game07',
+    },
+    Game07: {
+        bg: '4',
+        message: (
+            <p className="text-black">
+                ต้องเป็นอย่างนั้นอยู่แล้ว
+                <br />
+                คุณทุ่มแรงกับภารกิจนี้ไปไม่น้อย
+            </p>
+        ),
+        choices: [],
+        goto: 'Game08',
+    },
+    Game08: {
+        bg: '4',
+        message: (
+            <p className="text-black">
+                คุณวางนิ้วบนแผงควบคุม
+                <br />
+                มั่นใจว่ายานจะพาคุณไปถึงเป้าหมายแน่นอน
+                <br />
+                เพราะ ...
+            </p>
+        ),
+        choices: [
+            {
+                message: 'จากข้อมูลแล้วยานลำนี้มีสมรรถนะดีที่สุดจากทั้งหมด',
+            },
+            {
+                message: 'ทุกคนรวมถึงตัวคุณเองลงความเห็นแล้วว่าเหมาะสมที่สุด',
+            },
+        ],
+        goto: 'Game09',
+    },
+    Game09: {
+        bg: '4',
+        message: <p className="text-black">เอาล่ะ ใกล้ได้เวลาออกเดินทางแล้ว</p>,
+        choices: [],
+        goto: 'Game10',
+    },
+    Game10: {
+        bg: '4',
+        message: <p className="text-black">จริงสิ คุณพกไอนั่นมาด้วย</p>,
+        choices: [],
+        goto: 'Game11',
+    },
+    Game11: {
+        bg: '4',
+        message: <p className="text-black">คุณเอื้อมมือคว้า</p>,
+        choices: [
+            {
+                message:
+                    'คู่มือความปลอดภัย เพื่ออ่านทบทวนอีกครั้ง เผื่อเกิดเหตุฉุกเฉิน',
+            },
+            {
+                message: 'พระ',
+            },
+        ],
+        goto: 'Game12',
+    },
+};
+export default GameScene;