update: character allocation

apps/web/src/containers/Alloc.css

@@ -80,8 +80,8 @@
             > span {
                 width: 100%;
                 height: calc(2rem * var(--ratio));
-                color: var(--base-background-color);
-                background: var(--grade-color);
+                color: var(--grade-color);
+                background: var(--base-background-color);
                 border: 0.0625rem solid var(--grade-color);
                 border-bottom: none;
                 display: flex;
@@ -91,6 +91,10 @@
                 font-weight: bold;
                 transition: all 0.2s ease-in-out;
             }
+            > span.name {
+                color: var(--base-background-color);
+                background: var(--grade-color);
+            }
         }
         > li.left {
             --left-color: var(--color-error);

apps/web/src/containers/Alloc.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import { useAllocator, usePointRandomizer, useLeftPoints } from '@remake/hooks'
-import { usePicked, useReplaced, useStart } from '@remake/hooks'
+import { usePicked, useReplaced, useStart, useIsClassic } from '@remake/hooks'
 import type { AdditionalPoint } from '@remake/hooks'
 import { properties } from '@/display'
 import { keys } from '@remake/vitex'
-import { BasePoints, judgeGradeByValue } from '@/config'
+import { judgeGradeByValue } from '@/config'
 import { talents } from '@remake/data'
 import Replaced from '@/components/Replaced'
 import './Alloc.css'
@@ -30,15 +30,17 @@ function AllocInput(props: AllocInputProps) {
 }
 
 interface PointsDetailProps {
+    base: number
     source: AdditionalPoint[]
+    fixed?: boolean
 }
 
-function PointsDetail({ source }: PointsDetailProps) {
+function PointsDetail({ base, source, fixed }: PointsDetailProps) {
     return (
         <ul className="points-detail">
             <li>
-                <span>基础</span>
-                <span className="font-mono">{BasePoints}</span>
+                <span>{fixed ? '固定' : '基础'}</span>
+                <span className="font-mono">{base}</span>
             </li>
             {source.map(({ talent, points }) => (
                 <li key={talent}>
@@ -51,18 +53,19 @@ function PointsDetail({ source }: PointsDetailProps) {
 }
 
 export function Alloc() {
+    const isClassic = useIsClassic()
     const picked = usePicked()
     const {
         talents: { chains },
         additionalPoints: { source },
     } = useReplaced()
-    const left = useLeftPoints()
-    const [allocation, allocator] = useAllocator()
+    const { base, left } = useLeftPoints()
+    const [{ alloc, final, base: ba }, allocator] = useAllocator()
     const random = usePointRandomizer()
     const start = useStart()
     const [showDetail, setShowDetail] = useState(false)
     const handleNext = () => {
-        if (left) {
+        if (left != 0) {
             // TODO: Show a warning that there are still points left
             return
         }
@@ -79,25 +82,39 @@ export function Alloc() {
                     </li>
                 ))}
             </ul>
-            <ul className="alloc">
+            <ul className={`alloc ${isClassic ? 'classic' : 'modify'}`}>
                 <li className={`left left-${left}`}>
-                    <span>剩余点数</span>
+                    <span className="name">剩余点数</span>
                     <button
                         className="font-mono"
                         onClick={() => setShowDetail(!showDetail)}
                     >
                         {left}
                     </button>
-                    {showDetail && <PointsDetail source={source} />}
+                    {showDetail && (
+                        <PointsDetail
+                            base={base}
+                            source={source}
+                            fixed={!isClassic}
+                        />
+                    )}
                 </li>
-                {keys(allocation).map(key => (
+                {keys(alloc).map(key => (
                     <li
                         key={key}
-                        className={`property grade-${judgeGradeByValue(key, allocation[key])}`}
+                        className={`property grade-${judgeGradeByValue(key, final[key])}`}
                     >
-                        <span>{properties[key]}</span>
+                        <span className="name">
+                            {properties[key]}
+                            {!isClassic && (
+                                <span className="font-mono">[{ba[key]}]</span>
+                            )}
+                        </span>
+                        {!isClassic && (
+                            <span className="font-mono">{final[key]}</span>
+                        )}
                         <AllocInput
-                            point={allocation[key]}
+                            point={alloc[key]}
                             onChange={value => allocator(key, value)}
                         />
                     </li>

apps/web/src/containers/Chara.tsx

@@ -1,5 +1,5 @@
-import { useCharaPuller, useCharaPicker, convertProps } from '@remake/hooks'
-import { useUnique, useUniqueGenerator, useCharaStart } from '@remake/hooks'
+import { useCharaPuller, useCharaPicker, useCharaSubmit } from '@remake/hooks'
+import { useUnique, useUniqueGenerator, convertProps } from '@remake/hooks'
 import type { BaseChara } from '@remake/hooks'
 import { TalentComponent } from '@/components/Talent'
 import { judgeGradeByValue } from '@/config'
@@ -88,7 +88,7 @@ export function Chara() {
     const u = useUnique()
     const [{ unique, characters }, puller] = useCharaPuller()
     const [picked, picker] = useCharaPicker()
-    const start = useCharaStart()
+    const submit = useCharaSubmit()
     const ready = picked && (picked.type === 'unique' ? !!u : true)
     return (
         <div className="screen chara">
@@ -114,7 +114,7 @@ export function Chara() {
                 </button>
                 <button
                     className={ready ? 'primary' : 'error'}
-                    onClick={ready ? () => start(picked!) : undefined}
+                    onClick={ready ? () => submit(picked!) : undefined}
                 >
                     开始新人生
                 </button>

apps/web/src/containers/Summary.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { usePicked, useEnd, useProfile } from '@remake/hooks'
+import { usePicked, useEnd, useProfile, useIsClassic } from '@remake/hooks'
 import { useEndJudge } from '@/hooks/judge'
 import { properties, judgeDisplay } from '@/display'
 import TalentComponent from '@/components/Talent'
@@ -52,6 +52,7 @@ function TalentList({ picked, picker }: TalentListProps) {
 }
 
 export default function Summary() {
+    const isClassic = useIsClassic()
     const [locked, picker, end] = useEnd()
     const handleEnd = () => {
         const achievements = end()
@@ -62,7 +63,11 @@ export default function Summary() {
         <div className="screen summary">
             <Judges />
             <div className="section">
-                <div className="title">你可以锁定一个天赋，下辈子还能抽到</div>
+                <div className="title">
+                    {isClassic
+                        ? '你可以锁定一个天赋，下辈子还能抽到'
+                        : '名人天赋不可锁定'}
+                </div>
                 <TalentList picked={locked} picker={picker} />
             </div>
             <button className="primary" onClick={handleEnd}>

apps/web/src/styles/common.css

@@ -68,14 +68,12 @@ button {
     outline: none;
     @media (hover: hover) {
         &:hover {
-            border: var(--style-background) 0.0625rem solid;
             background: var(--style-color);
             color: var(--style-background);
         }
     }
 
     &:active {
-        border: var(--style-background) 0.0625rem solid;
         background: var(--style-color);
         color: var(--style-background);
         transition: none;

packages/core/src/character.ts

@@ -82,24 +82,17 @@ export function charaPropToBaseAlloc(props: CharacterProperty): BaseAlloc {
     }
 }
 
-function charaPropToAlloc(
-    props: CharacterProperty,
-    spirit: number,
-): Allocation {
-    return { ...charaPropToBaseAlloc(props), spirit }
-}
-
-function convert(chara: BaseChara, spirit: number) {
+function convert(chara: BaseChara) {
     return {
-        allocation: charaPropToAlloc(chara.property, spirit),
+        allocation: charaPropToBaseAlloc(chara.property),
         talents: chara.talent,
     }
 }
 
-export function startChara(id: Character['id'], spirit: number) {
-    return convert(characters.get(id)!, spirit)
+export function startChara(id: Character['id']) {
+    return convert(characters.get(id)!)
 }
 
-export function startUnique(chara: BaseChara, spirit: number) {
-    return convert(chara, spirit)
+export function startUnique(chara: BaseChara) {
+    return convert(chara)
 }

packages/hooks/src/alloc.ts

@@ -1,8 +1,9 @@
 import { useCallback } from 'react'
-import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
-import { useConfig, useReplaced } from '.'
+import { atom, useAtomValue, useSetAtom } from 'jotai'
+import { useConfig, useReplaced, useIsClassic } from '.'
 import type { Allocation } from '@remake/core'
-import { keys, shuffle, random as frandom, type RNG } from '@remake/vitex'
+import { keys, shuffle, zoneFit, random } from '@remake/vitex'
+import type { RNG } from '@remake/vitex'
 
 export type UserAllocation = Omit<Allocation, 'spirit'>
 const init: UserAllocation = {
@@ -11,50 +12,86 @@ const init: UserAllocation = {
     strength: 0,
     money: 0,
 }
+export const baseAllocAtom = atom<UserAllocation>({ ...init })
 export const allocAtom = atom<UserAllocation>({ ...init })
 
 const alloced = (alloc: UserAllocation) =>
     Object.values(alloc).reduce((a, b) => a + b, 0)
 
 export const useAllocReset = () => {
+    const setBaseAlloc = useSetAtom(baseAllocAtom)
     const setAlloc = useSetAtom(allocAtom)
-    return useCallback(() => setAlloc({ ...init }), [setAlloc])
+    return useCallback(() => {
+        setBaseAlloc({ ...init })
+        setAlloc({ ...init })
+    }, [setBaseAlloc, setAlloc])
+}
+export const useBaseAlloc = () => useAtomValue(baseAllocAtom)
+export const useAlloc = () => {
+    const base = useAtomValue(baseAllocAtom)
+    const alloc = useAtomValue(allocAtom)
+    const final = {
+        charm: base.charm + alloc.charm,
+        intelligence: base.intelligence + alloc.intelligence,
+        strength: base.strength + alloc.strength,
+        money: base.money + alloc.money,
+    }
+    return { base, alloc, final }
 }
-export const useAlloc = () => useAtomValue(allocAtom)
 export const usePoints = () => {
-    const { points } = useConfig()
+    const isClassic = useIsClassic()
     const { additionalPoints } = useReplaced()
-    return Math.max(points + additionalPoints.points, 0)
+    const additional = additionalPoints.points
+    if (!isClassic) {
+        const base = useAtomValue(baseAllocAtom)
+        return { base: alloced(base), total: additional, additional }
+    }
+    const { points } = useConfig()
+    return { base: points, total: points + additional, additional }
 }
 
 export const useLeftPoints = () => {
     const points = usePoints()
     const alloc = useAtomValue(allocAtom)
-    return points - alloced(alloc)
+    const ca = alloced(alloc)
+    const left = points.total - ca
+    return { ...points, left, alloced: ca }
+}
+
+export const useAllocBefore = () => {
+    const { allocate } = useConfig()
+    const { total } = usePoints()
+    const isClassic = useIsClassic()
+    const isPositive = total >= 0
+    const limit = isClassic
+        ? allocate
+        : Math.min(Math.ceil(Math.abs(total) / 2), allocate) *
+          (isPositive ? 1 : -1)
+    return { total, limit, isPositive, isClassic }
 }
 
 export const useAllocator = () => {
-    const { allocate } = useConfig()
-    const total = usePoints()
-    const [alloc, setAlloc] = useAtom(allocAtom)
+    const { total, limit } = useAllocBefore()
+    const alloc = useAlloc()
+    const setAlloc = useSetAtom(allocAtom)
     const allocator = useCallback(
         (key: keyof UserAllocation, value: number) => {
             setAlloc(prev => {
-                const left = total - alloced(prev) + prev[key]
-                const max = Math.min(left, allocate)
-                const final = Math.max(Math.min(max, value), 0)
-                if (prev[key] === final) return prev
+                const last = prev[key]
+                const left = total - alloced(prev) + last
+                const max = zoneFit(left, [0, limit])
+                const final = zoneFit(value, [0, max])
+                if (last === final) return prev
                 return { ...prev, [key]: final }
             })
         },
-        [allocate, total, setAlloc],
+        [limit, total, setAlloc],
     )
     return [alloc, allocator] as const
 }
 
 export const usePointRandomizer = () => {
-    const { allocate } = useConfig()
-    const total = usePoints()
+    const { total, limit } = useAllocBefore()
     const setAlloc = useSetAtom(allocAtom)
     return useCallback(
         (rng?: RNG) => {
@@ -63,15 +100,16 @@ export const usePointRandomizer = () => {
             const alloc = { ...init }
             while (suffled.length) {
                 const key = suffled.pop()!
-                const max = Math.min(allocate, left)
-                const min = Math.max(0, left - suffled.length * allocate)
-                const value = frandom(max, min, rng)
+                const n = suffled.length
+                const max = zoneFit(limit, [0, left])
+                const min = zoneFit(left - n * limit, [0, limit])
+                const value = random(max, min, rng)
                 alloc[key] = value
                 left -= value
             }
             setAlloc(alloc)
         },
-        [allocate, total, setAlloc],
+        [total, limit, setAlloc],
     )
 }
 

packages/hooks/src/character.ts

@@ -1,8 +1,9 @@
 import { useCallback, useState } from 'react'
 import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
-import { useConfig, useProfile, useSetStep, useSetGameState, Step } from '.'
+import { pickedAtom, replacedAtom, baseAllocAtom } from '.'
+import { useConfig, useProfile, useSetStep, Step } from '.'
 import { uniqueGenerate, startUnique, startChara } from '@remake/core'
-import { pullChara, start, pick } from '@remake/core'
+import { pullChara, pick } from '@remake/core'
 import type { BaseChara, PullCharaTms } from '@remake/core'
 import type { Character } from '@remake/data'
 import type { RNG } from '@remake/vitex'
@@ -70,34 +71,29 @@ export const useCharaPicker = () => {
     return [picked, { chara, unique: uni }] as const
 }
 
-export const useCharaStart = () => {
-    const { spirit } = useConfig()
+export const useCharaSubmit = () => {
     const [profile] = useProfile()
     const unique = useAtomValue(uniqueAtom)
     const setStep = useSetStep()
-    const setState = useSetGameState()
+    const setPicked = useSetAtom(pickedAtom)
+    const setReplaced = useSetAtom(replacedAtom)
+    const setBaseAlloc = useSetAtom(baseAllocAtom)
     return useCallback(
         (picked: CharaPick, rng?: RNG) => {
             let result
             if (picked.type === 'unique') {
                 if (!unique)
                     throw new Error('Unique character not generated yet')
-                result = startUnique(unique, spirit)
+                result = startUnique(unique)
             } else {
-                result = startChara(picked.id, spirit)
+                result = startChara(picked.id)
             }
-            const { talents, additionalPoints } = pick(result.talents, rng)
-            // TODO: additionalPoints
-            const { state, achievements } = start(
-                profile,
-                result.allocation,
-                talents.talents,
-            )
-            setState(state)
-            setStep(Step.Play)
-            return achievements
+            setPicked(new Set(result.talents))
+            setReplaced(pick(result.talents, rng))
+            setBaseAlloc(result.allocation)
+            setStep(Step.Alloc)
         },
-        [spirit, profile, unique, setStep, setState],
+        [profile, unique, setPicked, setReplaced, setStep],
     )
 }
 

packages/hooks/src/play.ts

@@ -52,6 +52,8 @@ export const useGameReset = () => {
     }, [resetTalent, resetAlloc, resetState, resetLogs])
 }
 
+export const useMode = () => useAtomValue(modeAtom)
+export const useIsClassic = () => useAtomValue(modeAtom) === Mode.Classic
 export const useStep = () => useAtomValue(stepAtom)
 export const useSetStep = () => useSetAtom(stepAtom)
 export const useGameState = () => useAtomValue(gameStateAtom)
@@ -82,7 +84,7 @@ export const useModeChoose = () => {
                 case Mode.Celebrity: return setStep(Step.Chara)
             }
         },
-        [setStep],
+        [setMode, setStep],
     )
     return [Mode, choose] as const
 }
@@ -92,7 +94,7 @@ export const useStart = () => {
     const [profile] = useProfile()
     const setStep = useSetAtom(stepAtom)
     const setState = useSetAtom(gameStateAtom)
-    const allocate = useAlloc()
+    const { final: allocate } = useAlloc()
     const { talents: tr } = useReplaced()
     return useCallback(() => {
         const alloc = { ...allocate, spirit }
@@ -148,10 +150,12 @@ export const useEnd = () => {
     const setStep = useSetAtom(stepAtom)
     const state = useAtomValue(gameStateAtom)
     const reset = useGameReset()
+    const isClassic = useIsClassic()
     const [locked, setLocked] = useState<Set<Talent['id']>>(new Set())
     const picker = useCallback(
         (talent: Talent['id']) => {
             setLocked(prev => {
+                if (!isClassic) return prev
                 if (prev.has(talent)) {
                     const next = new Set(prev)
                     next.delete(talent)
@@ -169,7 +173,11 @@ export const useEnd = () => {
     const ender = useCallback(() => {
         if (!state)
             throw new Error('Game state is not available or already ended.')
-        const l = locked.size > 0 ? Array.from(locked) : undefined
+        const l = isClassic
+            ? locked.size > 0
+                ? Array.from(locked)
+                : undefined
+            : profile.locked
         const result = end(state, profile, l)
         setStep(Step.Idle)
         setProfile(result.profile)

packages/vitex/index.ts

@@ -1,6 +1,7 @@
 export type RNG = (max?: number, min?: number) => number
 export function random(max: number = 1, min: number = 0, rng?: RNG): number {
     if (rng) return rng(max, min)
+    if (max < min) [max, min] = [min, max]
     return Math.floor(Math.random() * (max - min + 1)) + min
 }
 export function pick<T>(items: T[], rng?: RNG) {
@@ -58,3 +59,11 @@ export function format(str: string, getValueFn: GetValueFn): string {
         },
     )
 }
+
+export function zoneFit(value: number, zone: [number, number]) {
+    const max = Math.max(zone[0], zone[1])
+    if (value > max) return max
+    const min = Math.min(zone[0], zone[1])
+    if (value < min) return min
+    return value
+}