add: mode & character page

apps/web/src/Game.tsx

@@ -1,7 +1,9 @@
 import { useEffect } from 'react'
 import { useInit, useSaver } from '@/hooks/storage'
-import { useStep, Step } from '@remake/hooks'
+import { useStep } from '@remake/hooks'
 import Home from '@/containers/Home'
+import Mode from '@/containers/Mode'
+import Chara from '@/containers/Chara'
 import Pick from '@/containers/TalentPick'
 import Alloc from '@/containers/Alloc'
 import Play from '@/containers/Play'
@@ -12,7 +14,7 @@ import './Game.css'
 export function Game() {
     const [inited, init] = useInit()
     const saver = useSaver()
-    const step = useStep()
+    const [step, Step] = useStep()
     useEffect(() => {
         if (!inited) init()
     }, [inited])
@@ -24,6 +26,9 @@ export function Game() {
         case Step.Idle:
             return <Home />
         case Step.Mode:
+            return <Mode />
+        case Step.Chara:
+            return <Chara />
         case Step.Pick:
             return <Pick />
         case Step.Alloc:

apps/web/src/containers/Chara.css

@@ -0,0 +1 @@
+.screen.chara {}

apps/web/src/containers/Chara.tsx

@@ -0,0 +1,7 @@
+import './Chara.css'
+
+export function Chara() {
+    return <div className="screen chara"></div>
+}
+
+export default Chara

apps/web/src/containers/Mode.css

@@ -0,0 +1,23 @@
+.screen.mode {
+    gap: 1rem;
+    button {
+        display: flex;
+        flex-direction: column;
+        height: 10rem;
+        gap: 0.5rem;
+        .name {
+            font-size: 3.5rem;
+            font-weight: bold;
+        }
+        .description {
+            display: flex;
+            flex-direction: row;
+            gap: 1rem;
+            span {
+                font-size: 1rem;
+                &::before { content: '['; }
+                &::after { content: ']'; }
+            }
+        }
+    }
+}

apps/web/src/containers/Mode.tsx

@@ -0,0 +1,26 @@
+import { PullCount } from '@/config'
+import { useModeChoose } from '@remake/hooks'
+import './Mode.css'
+
+export function Mode() {
+    const [Mode, choose] = useModeChoose()
+    return (
+        <div className="screen mode">
+            <button onClick={() => choose(Mode.Classic)}>
+                <div className="name">经典模式</div>
+                <div className="description">
+                    <span>{PullCount} 连抽天赋</span>
+                    <span>自由分配属性</span>
+                </div>
+            </button>
+            <button onClick={() => choose(Mode.Celebrity)}>
+                <div className="name">名人模式</div>
+                <div className="description">
+                    <span>前世古代名人，重开到了现代</span>
+                </div>
+            </button>
+        </div>
+    )
+}
+
+export default Mode