update: thanks

apps/web/src/Game.tsx

@@ -9,6 +9,7 @@ import Alloc from '@/containers/Alloc'
 import Play from '@/containers/Play'
 import Summary from '@/containers/Summary'
 import Achv from '@/containers/Achv'
+import Thanks from '@/containers/Thanks'
 import './Game.css'
 
 export function Container() {
@@ -22,6 +23,7 @@ export function Container() {
         case Step.Play: return <Play />
         case Step.Summary: return <Summary />
         case Step.Achv: return <Achv />
+        case Step.Thanks: return <Thanks />
         default: return null
     }
 }

apps/web/src/config.ts

@@ -8,7 +8,8 @@ if (import.meta.env.MODE === 'development') {
             dev[key] = value.split(',').map(v => Number(v))
         })
 }
-
+//
+export const Features = dev.features ?? 1
 // 自动模式自动点击间隔
 export const AutoInterval = dev.interval ?? 500
 // 可锁定的天赋数量
@@ -119,6 +120,7 @@ export const UniquePropWeight = wg(0, 10)
 export const UniqueTalentWeight = wg(1, 5)
 
 export const config: Config = {
+    features: Features,
     lock: LockLimit,
     mode: ModeLimit,
     max: PickMax,

apps/web/src/containers/Achv.css

@@ -63,7 +63,6 @@
         > ul {
             flex: 1 0;
             display: grid;
-            flex-direction: column;
             grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
             gap: 0.5rem;
             box-sizing: border-box;

apps/web/src/containers/Home.tsx

@@ -1,11 +1,13 @@
-import { useRemake, useGoAchv } from '@remake/hooks'
+import { useRemake, useFeatures, useGoAchv, useGoThanks } from '@remake/hooks'
 import { TextSvg } from '@/components/TextSvg'
 import { ThemeToggle } from '@/components/ThemeToggle'
 import './Home.css'
 
 export default function Home() {
     const remake = useRemake()
+    const features = useFeatures()
     const goAchv = useGoAchv()
+    const goThanks = useGoThanks()
     return (
         <div className="screen home">
             <div className="title">
@@ -18,14 +20,16 @@ export default function Home() {
                         立即重开
                     </button>
                 </div>
-                <div>
+                {features && (
-                    <button className="secondary" onClick={goAchv}>
+                    <div>
-                        成就
+                        <button className="secondary" onClick={goAchv}>
-                    </button>
+                            成就
-                    <button className="secondary" onClick={goAchv}>
+                        </button>
-                        感谢
+                        <button className="secondary" onClick={goThanks}>
-                    </button>
+                            感谢
-                </div>
+                        </button>
+                    </div>
+                )}
             </div>
             <ThemeToggle />
         </div>

apps/web/src/containers/Thanks.css

@@ -0,0 +1,94 @@
+.screen.thanks {
+    height: calc(100dvh - 2rem);
+    gap: 1rem;
+    .person {
+        --style-color: var(--custom-color, var(--base-text-color));
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.5rem;
+        color: var(--style-color);
+        background: var(--base-background-color);
+        transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+        > .name {
+            display: flex;
+            text-wrap: wrap;
+            word-break: break-all;
+            min-height: 2.5rem;
+            width: 12rem;
+            font-weight: bold;
+            font-size: 1.2rem;
+            align-items: center;
+            text-shadow:
+                -0.0625rem -0.0625rem 0.0625rem var(--base-shadow),
+                 0.0625rem -0.0625rem 0.0625rem var(--base-shadow),
+                -0.0625rem  0.0625rem 0.0625rem var(--base-shadow),
+                 0.0625rem  0.0625rem 0.0625rem var(--base-shadow),
+                 0         -0.0625rem 0.0625rem var(--base-shadow),
+                 0          0.0625rem 0.0625rem var(--base-shadow),
+                -0.0625rem  0         0.0625rem var(--base-shadow),
+                 0.0625rem  0         0.0625rem var(--base-shadow);
+        }
+        > .comment {
+            word-break: break-all;
+            white-space: pre-wrap;
+            min-height: 2.5rem;
+            flex: 1 0;
+            display: flex;
+            align-items: center;
+            text-shadow:
+                -0.0625rem -0.0625rem 0.0625rem var(--base-shadow),
+                 0.0625rem -0.0625rem 0.0625rem var(--base-shadow),
+                -0.0625rem  0.0625rem 0.0625rem var(--base-shadow),
+                 0.0625rem  0.0625rem 0.0625rem var(--base-shadow),
+                 0         -0.0625rem 0.0625rem var(--base-shadow),
+                 0          0.0625rem 0.0625rem var(--base-shadow),
+                -0.0625rem  0         0.0625rem var(--base-shadow),
+                 0.0625rem  0         0.0625rem var(--base-shadow);
+        }
+    }
+    > .group { flex: 1 0; }
+    > .group-1 {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        border: 0.0625rem solid var(--base-text-color);
+        box-sizing: border-box;
+        padding: 0.5rem 0;
+
+        > .person {
+            margin: 0 0.5rem;
+            padding: 0 0.5rem;
+            display: flex;
+            border: 0.0625rem solid var(--style-color);
+            box-sizing: border-box;
+            > .comment {
+                word-break: break-all;
+                white-space: pre-wrap;
+                min-height: 2.5rem;
+                flex: 1 0;
+                padding: 0 0.5rem;
+                display: flex;
+                align-items: center;
+            }
+
+        }
+    }
+    > .group-2 {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+        gap: 0.5rem;
+        border: 0.0625rem solid var(--base-text-color);
+        > .person {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-wrap: wrap;
+            word-break: break-all;
+            text-align: center;
+            margin-right: 0.0625rem;
+            > .name { justify-content: center; }
+            > .comment {display: none;}
+        }
+    }
+}

apps/web/src/containers/Thanks.tsx

@@ -0,0 +1,47 @@
+import { useGoHome } from '@remake/hooks'
+import { specialThanks, SpecialThanksGroup as Group } from '@remake/data'
+import type { SpecialThanks } from '@remake/data'
+import { shuffle } from '@remake/vitex'
+import './Thanks.css'
+
+const groups = Map.groupBy(specialThanks, item => item.group)
+
+export function Person({ item }: { item: SpecialThanks }) {
+    return (
+        <li
+            className="person"
+            style={
+                {
+                    '--custom-color': item.color,
+                } as React.CSSProperties
+            }
+        >
+            <span className="name">{item.name}</span>
+            {item.comment && <span className="comment">{item.comment}</span>}
+        </li>
+    )
+}
+
+export function Thanks() {
+    const goHome = useGoHome()
+    const group1 = shuffle(groups.get(Group.G1) ?? [])
+    const group2 = shuffle(groups.get(Group.G2) ?? [])
+    return (
+        <div className="screen thanks">
+            <button className="primary" onClick={goHome}>
+                返回
+            </button>
+            <ul className="group group-1 hide-scrollbar">
+                {group1.map((item, index) => (
+                    <Person key={index} item={item} />
+                ))}
+            </ul>
+            <ul className="group group-2 hide-scrollbar">
+                {group2.map((item, index) => (
+                    <Person key={index} item={item} />
+                ))}
+            </ul>
+        </div>
+    )
+}
+export default Thanks

apps/web/src/styles/colors.css

@@ -2,6 +2,7 @@
     color-scheme: light dark;
     --base-text-color: light-dark(#121314, #f9fafb);
     --base-background-color: light-dark(#f7f7f7, #121314);
+    --base-shadow: light-dark(#00000010, #23456710);
 
     --color-grade-0: light-dark(#4e5052, #f9fafb);
     --color-grade-1: light-dark(#4aa8da, #afe3ff);

packages/data/src/specialthanks.types.ts

@@ -1,5 +1,8 @@
 /** 特别鸣谢分组 */
-export type SpecialThanksGroup = 1 | 2
+export enum SpecialThanksGroup {
+    G1 = 1,
+    G2 = 2,
+}
 
 /** 特别鸣谢 */
 export type SpecialThanks = {

packages/hooks/src/config.ts

@@ -2,6 +2,8 @@ import { useCallback } from 'react'
 import { atom, useSetAtom, useAtomValue } from 'jotai'
 import type { PullOptions, PullCharaOpt, UniqueGenCfg } from '@remake/core'
 export interface Config {
+    /** 功能锁 */
+    features: number
     /** 游戏锁定天赋数量 */
     lock: number
     /** 游戏可选天赋数量 */

packages/hooks/src/play.ts

@@ -15,6 +15,7 @@ export enum Step {
     Play = 'play',
     Summary = 'summary',
     Achv = 'achv',
+    Thanks = 'thanks',
 }
 
 export enum Mode {
@@ -192,3 +193,14 @@ export const useGoHome = () => {
     const setStep = useSetAtom(stepAtom)
     return useCallback(() => setStep(Step.Idle), [setStep])
 }
+
+export const useGoThanks = () => {
+    const setStep = useSetAtom(stepAtom)
+    return useCallback(() => setStep(Step.Thanks), [setStep])
+}
+
+export const useFeatures = () => {
+    const { features } = useConfig()
+    const [{ times }] = useProfile()
+    return times >= features
+}