thzxx
adb22f0558
家族模拟器首版：修仙/经营/战斗/外交/叙事全套系统 - Electron + React + TS + MetonaSqlark(aria+OPFS) - 水墨中国风 UI - 引擎种子随机、确定性可回放 - 19 项单元测试、端到端冒烟验证
62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { useGameStore } from '../store'
|
|
import { Character } from '../../game/types/domain'
|
|
import { describeRealm } from '../../game/data/realms'
|
|
import { describeRoots } from '../../game/data/elements'
|
|
|
|
const STATE_LABEL: Record<string, { label: string; cls: string }> = {
|
|
idle: { label: '无事', cls: '' },
|
|
meditation: { label: '闭关', cls: 'good' },
|
|
expedition: { label: '出探', cls: 'warn' },
|
|
wounded: { label: '养伤', cls: 'bad' }
|
|
}
|
|
|
|
export function MemberCard({ c }: { c: Character }) {
|
|
const world = useGameStore((s) => s.world)
|
|
const setSelected = useGameStore((s) => s.setSelected)
|
|
if (!world) return null
|
|
const dead = !c.alive
|
|
const isHead = world.state.family.headId === c.id
|
|
const state = STATE_LABEL[c.state]
|
|
return (
|
|
<div className={`member-card ${dead ? 'dead' : ''}`} onClick={() => setSelected(c.id)}>
|
|
<div className="mc-head">
|
|
<div className="m-avatar">{world.state.family.surname}</div>
|
|
<div style={{ flex: 1 }}>
|
|
<div className="member-name">
|
|
<span>{c.name}</span>
|
|
{isHead && <span className="tag head-t">家主</span>}
|
|
{c.spouseHouse && <span className="tag">外亲</span>}
|
|
</div>
|
|
<div className="member-realm">
|
|
{dead
|
|
? `殁于${c.deathYear}年 · ${c.deathCause ?? '寿终'}`
|
|
: `${describeRealm(c.realm)} · ${world.ageOf(c)}岁 · 修为${Math.floor(c.realmProgress)}%`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="member-tags">
|
|
<span className="tag">{describeRoots(c.roots)}</span>
|
|
{!dead && c.realmProgress >= 100 && <span className="tag gold-t">瓶颈 · 可冲击</span>}
|
|
{C_STATE[dead ? 'dead' : c.state] && (
|
|
<span className={`tag ${C_STATE[dead ? 'dead' : c.state]}`}>{STATE_LABEL[c.state]?.label ?? ''}</span>
|
|
)}
|
|
</div>
|
|
{!dead && (
|
|
<div className="mc-foot">
|
|
<div className="bar" title="灵气修为" style={{ height: 6 }}>
|
|
<div style={{ width: `${c.realmProgress}%` }} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const C_STATE: Record<string, string> = {
|
|
idle: '',
|
|
meditation: 'good',
|
|
expedition: 'warn',
|
|
wounded: 'bad',
|
|
dead: 'bad'
|
|
}
|