修改一下样式

craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    style: {
+      postcss: {
+        plugins: [
+          require('tailwindcss'),
+          require('autoprefixer'),
+        ],
+      },
+    },
+  }

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "^7.16.0",
+    "@craco/craco": "^7.1.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.15",

src/App.js

@@ -3,7 +3,7 @@ import { GameUI } from "./scene/ui";
 import React from "react";
 function App() {
   return (
-    <div className="App">
+    <div className="App w-screen h-screen">
       <GameUI></GameUI>
     </div>
   );

src/index.css

@@ -1,4 +1,4 @@
-body {
+/* body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -10,4 +10,8 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+} */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/scene/lottery.tsx

@@ -140,73 +140,84 @@ export const LotteryScene = ({ setScene, setPrompts }: LotterySceneProps) => {
     console.log(prompts);
     if (prompts) setPrompts(prompts);
   }, [setPrompts, activeTokens, pointPrompts]);
+
+  
   return (
     <div>
       <p>你穿越到了异世界，可以对你的老婆进行私人定制！</p>
       {step === 1 && <div>
         <p>第一阶段：你将抽取10个随机属性，并选取其中三个。</p>
         <p>当前阶段你还可以选取{count}个属性。</p>
-        <Button
+        <div className=" my-2">
-          variant="outlined"
+            <Button
-          onClick={() => {
+            variant="outlined"
-            setCount(3);
-            setActiveTokens(
-              randomSelectNoRepeat(LOTTERY_POOL, 10, (obj) => {
-                return {
-                  ...obj,
-                  active: false,
-                };
-              })
-            );
-          }}
-        >
-          十连抽！
-        </Button>
-        <Divider />
-        {activeTokens.map((token, index) => (
-          <Button
-            size="small"
-            variant={token.active ? "contained" : "outlined"}
-            style={{
-              color: RARITY_PROPS[token.rarity].color
-            }}
-            key={index}
-            disabled={!activeTokens[index].active && count <= 0}
             onClick={() => {
-              const tokens = [...activeTokens];
+                setCount(3);
-              if (activeTokens[index].active) setCount(count + 1);
+                setActiveTokens(
-              else setCount(count - 1);
+                randomSelectNoRepeat(LOTTERY_POOL, 10, (obj) => {
-              tokens[index].active = !activeTokens[index].active;
+                    return {
-              setActiveTokens(tokens);
+                    ...obj,
+                    active: false,
+                    };
+                })
+                );
             }}
-          >
+            >
-            {token.label}
+            十连抽！
-          </Button>
+            </Button>
-        ))}
+        </div>
+        {
+            activeTokens.length > 0 &&
+            <Divider />
+        }
+        <div className=" my-2">
+            {activeTokens.map((token, index) => (
+            <Button
+                size="small"
+                variant={token.active ? "contained" : "outlined"}
+                style={{
+                color: RARITY_PROPS[token.rarity].color
+                }}
+                key={index}
+                disabled={!activeTokens[index].active && count <= 0}
+                onClick={() => {
+                const tokens = [...activeTokens];
+                if (activeTokens[index].active) setCount(count + 1);
+                else setCount(count - 1);
+                tokens[index].active = !activeTokens[index].active;
+                setActiveTokens(tokens);
+                }}
+            >
+                {token.label}
+            </Button>
+            ))}
+        </div>
         <Divider />
-        <Button
+        <div className=" mt-2">
-          variant={"outlined"}
+            <Button
-          onClick={() => {
+            variant={"outlined"}
-            setStep(2);
+            onClick={() => {
-          }}>进入下一阶段</Button>
+                setStep(2);
+            }}>进入下一阶段</Button>
+        </div>
       </div>
       }
       {step === 2 && <div>
         <p>第二阶段：请分配天赋点，不同的词条需要不同数量的天赋点数，请仔细选择。</p>
         <p>当前阶段你剩余{point}个天赋点。</p>
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>发色：</span>{SinglePointSelector('hairColor', HAIR_COLOR)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>发型：</span>{SinglePointSelector('hairStyle', HAIR_STYLE)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>胸部：</span>{SinglePointSelector('bodyBreasts', BODY_BREASTS)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>表情：</span>{SinglePointSelector('facialExpression', FACIAL_EXPRESSION)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>服饰：</span>{SinglePointSelector('bodyClothing', BODY_CLOTHING)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>腿部：</span>{SinglePointSelector('bodyShoes', BODY_SHOES)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <Button
           variant={"outlined"}
           onClick={() => {

src/scene/ui.css

@@ -0,0 +1,18 @@
+.arrow {
+    position: relative; /* 确保箭头相对于其父元素进行定位 */
+    animation-name: down-fade; /* 指定动画名称 */
+    animation-duration: 3s; /* 动画持续时间（秒）*/
+    animation-timing-function: ease-in-out; /* 指定动画变化速度 */
+    animation-iteration-count: infinite; /* 让动画无限循环 */
+  }
+  
+  @keyframes down-fade {
+    0% {
+      opacity: 1; /* 开始时完全不透明 */
+      transform: translateY(0); /* 初始位置 */
+    }
+    100% {
+      opacity: 0.8;  /* 最后完全消失 */
+      transform: translateY(30px);/* 继续向下移动一段距离 */
+    }
+  }

src/scene/ui.tsx

@@ -4,7 +4,7 @@ import { MenuScene } from "./menu";
 import { LotteryScene } from "./lottery";
 import { GenerateScene } from "./generate";
 import { Alert, Snackbar } from "@mui/material";
-
+import './ui.css'
 type SnackSetterFunction = (snack: {
   open: boolean;
   message: string;
@@ -45,6 +45,10 @@ export const Message = {
 };
 
 export const GameUI = () => {
+  const [bgList, setBgList] = useState<string[]>([
+    'https://telegraph.cwy666.com/file/3139727dc463e5f54fe58.jpg',
+    'https://telegraph.cwy666.com/file/1f2dd4066229c242eb38e.png'
+]);
   const [scene, setScene] = useState<GAME_SCENES>(GAME_SCENES.MENU);
   const [prompts, setPrompts] = useState<string[]>([]);
   const [snack, setSnack] = useState({
@@ -61,15 +65,30 @@ export const GameUI = () => {
   useEffect(() => {
     Snacker.setSnack = setSnack;
   }, []);
+  const handleScrollClick = () => {
+//   向下滚动一个屏幕的距离
+   const t = window.innerHeight 
+   debugger
+   window.scrollTo(0, t) 
+
+}
   return (
-    <div>
+    <div className=" w-full h-full overflow-x-hidden">
-      {scene === GAME_SCENES.MENU && <MenuScene setScene={setScene} />}
+      <div className="bg-no-repeat bg-cover bg-center relative flex justify-center w-full h-full p-0 m-0"  style={{backgroundImage: `url(${bgList[1]}`}}>
-      {scene === GAME_SCENES.LOTTERY && (
+        <div  className=" text-white font-bold text-4xl  absolute bottom-10 flex flex-col items-center justify-center ">
-        <LotteryScene setScene={setScene} setPrompts={setPrompts} />
+            快来挑选你的老婆！
-      )}
+            <svg onClick={handleScrollClick} className="icon arrow pt-2 cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="100" height="50"><path d="M512 777.536l348.416-319.36L960 549.504 512 960 64 549.44 163.584 458.24 512 777.536z m0-394.24L860.416 64 960 155.264 512 565.76 64 155.264 163.584 64 512 383.36z" fill="white" p-id="2606"></path></svg>
-      {scene === GAME_SCENES.GENERATE && (
+        </div>
-        <GenerateScene setScene={setScene} prompts={prompts} />
+      </div>
-      )}
+      <div className=" flex flex-col justify-center items-center w-full h-full">
+        {scene === GAME_SCENES.MENU && <MenuScene setScene={setScene} />}
+        {scene === GAME_SCENES.LOTTERY && (
+            <LotteryScene setScene={setScene} setPrompts={setPrompts} />
+        )}
+        {scene === GAME_SCENES.GENERATE && (
+            <GenerateScene setScene={setScene} prompts={prompts} />
+        )}
+      </div>
       <Snackbar
         anchorOrigin={{ vertical: "top", horizontal: "center" }}
         open={snack.open}

tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}