diff --git a/craco.config.js b/craco.config.js new file mode 100644 index 0000000..4acfdf8 --- /dev/null +++ b/craco.config.js @@ -0,0 +1,10 @@ +module.exports = { + style: { + postcss: { + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ], + }, + }, + } \ No newline at end of file diff --git a/package.json b/package.json index 184a9d2..f6baf0d 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index b34fb5c..6baef5b 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,7 @@ import { GameUI } from "./scene/ui"; import React from "react"; function App() { return ( -
+
); diff --git a/src/index.css b/src/index.css index ec2585e..018095e 100644 --- a/src/index.css +++ b/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; diff --git a/src/scene/lottery.tsx b/src/scene/lottery.tsx index ac8ec37..9302d98 100644 --- a/src/scene/lottery.tsx +++ b/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 (

你穿越到了异世界,可以对你的老婆进行私人定制!

{step === 1 &&

第一阶段:你将抽取10个随机属性,并选取其中三个。

当前阶段你还可以选取{count}个属性。

- - - {activeTokens.map((token, index) => ( - - ))} + > + 十连抽! + +
+ { + activeTokens.length > 0 && + + } +
+ {activeTokens.map((token, index) => ( + + ))} +
- +
+ +
} {step === 2 &&

第二阶段:请分配天赋点,不同的词条需要不同数量的天赋点数,请仔细选择。

当前阶段你剩余{point}个天赋点。

- +
发色:{SinglePointSelector('hairColor', HAIR_COLOR)} - +
发型:{SinglePointSelector('hairStyle', HAIR_STYLE)} - +
胸部:{SinglePointSelector('bodyBreasts', BODY_BREASTS)} - +
表情:{SinglePointSelector('facialExpression', FACIAL_EXPRESSION)} - +
服饰:{SinglePointSelector('bodyClothing', BODY_CLOTHING)} - +
腿部:{SinglePointSelector('bodyShoes', BODY_SHOES)} - +