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;