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

packages/hooks/src/play.ts

@@ -11,12 +11,18 @@ import type { Talent } from '@remake/data/talent'
 export enum Step {
     Idle = 'idle',
     Mode = 'mode',
+    Chara = 'chara',
     Pick = 'pick',
     Alloc = 'alloc',
     Play = 'play',
     Summary = 'summary',
 }
 
+export enum Mode {
+    Classic = 'classic',
+    Celebrity = 'celebrity',
+}
+
 export type Log = Omit<NextResult, 'state'> & {
     props: Omit<Properties, 'age'>
 }
@@ -47,8 +53,8 @@ export const useGameReset = () => {
     }, [resetTalent, resetAlloc, resetState, resetLogs])
 }
 
-export const useStep = () => useAtomValue(stepAtom)
+export const useStep = () => [useAtomValue(stepAtom), Step] as const
-export const useSetStep = () => useSetAtom(stepAtom)
+export const useSetStep = () => [useSetAtom(stepAtom), Step] as const
 export const useGameState = () => useAtomValue(gameStateAtom)
 export const useSummary = () => useAtomValue(summaryAtom)
 export const useLogs = () => useAtomValue(logsAtom)
@@ -64,6 +70,24 @@ export const useRemake = () => {
     }, [mode, times, setStep, reset])
 }
 
+export const useModeChoose = () => {
+    const setStep = useSetAtom(stepAtom)
+    const choose = useCallback(
+        (mode: Mode) => {
+            switch (mode) {
+                case Mode.Classic:
+                    setStep(Step.Pick)
+                    break
+                case Mode.Celebrity:
+                    setStep(Step.Chara)
+                    break
+            }
+        },
+        [setStep],
+    )
+    return [Mode, choose] as const
+}
+
 export const useStart = () => {
     const { spirit } = useConfig()
     const [profile] = useProfile()

packages/hooks/src/talent.ts

@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react'
 import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { useConfig } from './config'
 import { useProfile } from './profile'
-import { useSetStep, Step } from './play'
+import { useSetStep } from './play'
 import { pull, exclude, talentsPicked } from '@remake/core'
 import type { TalentsPickedResult, RNG } from '@remake/core'
 import type { Talent } from '@remake/data/talent'
@@ -93,13 +93,13 @@ export const useTalentSubmit = () => {
     const picked = useAtomValue(pickedAtom)
     const setReplaced = useSetAtom(replacedAtom)
     const { enabled } = useSubmitIsEnable()
-    const next = useSetStep()
+    const [setStep, Step] = useSetStep()
     return useCallback(
         (rng?: RNG) => {
             if (!enabled) throw new Error('Not enough talents picked')
             setReplaced(talentsPicked(picked, rng))
-            next(Step.Alloc)
+            setStep(Step.Alloc)
         },
-        [enabled, picked, setReplaced, next],
+        [enabled, picked, setReplaced, setStep],
     )
 }