mirror of
https://github.com/VickScarlet/lifeRestart.git
synced 2026-08-29 01:36:47 +08:00
update: hooks, web
This commit is contained in:
Vick Scarlet
神戸小鳥
@@ -0,0 +1,112 @@
|
||||
.screen.point-allocation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
.allocation-input {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border: 0.0625rem solid var(--base-text-color);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
.points-detail {
|
||||
min-width: 100%;
|
||||
color: var(--color-primary);
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
background: var(--base-background-color);
|
||||
border: 0.0625rem solid var(--color-primary);
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateY(-100%);
|
||||
margin: 0;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 2rem;
|
||||
padding: 0 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
li:not(:first-child) {
|
||||
border-top: 0.0625rem solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
> ul.alloc {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
> li {
|
||||
flex: 1 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
> span {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
border: 0.0625rem solid var(--base-text-color);
|
||||
border-bottom: none;
|
||||
text-align: center;
|
||||
line-height: 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
> li.left {
|
||||
> span {
|
||||
background: var(--color-primary);
|
||||
color: var(--base-background-color);
|
||||
border: 0.0625rem solid var(--color-primary);
|
||||
border-bottom: none;
|
||||
}
|
||||
> button {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
width: 6rem;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 0.5rem;
|
||||
button { flex: 1 0; }
|
||||
}
|
||||
> ul.talent-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
li { width: 100%; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { useState } from 'react'
|
||||
import { useAllocator, usePointRandomizer, useLeftPoints } from '@remake/hooks'
|
||||
import { usePicked, useReplaced } from '@remake/hooks'
|
||||
import type { AdditionalPoint } from '@remake/hooks'
|
||||
import { properties } from '@/display'
|
||||
import { keys } from '@remake/vitex'
|
||||
import { BasePoints } from '@/config'
|
||||
import { talents } from '@remake/data'
|
||||
import Replaced from '@/components/Replaced'
|
||||
import './Alloc.css'
|
||||
|
||||
interface AllocInputProps {
|
||||
point: number
|
||||
onChange: (point: number) => void
|
||||
}
|
||||
|
||||
function AllocInput(props: AllocInputProps) {
|
||||
return (
|
||||
<div className="allocation-input">
|
||||
<button onClick={() => props.onChange(props.point - 1)}>−</button>
|
||||
<input
|
||||
className="font-mono"
|
||||
type="number"
|
||||
value={props.point}
|
||||
onChange={e => props.onChange(Number(e.target.value))}
|
||||
/>
|
||||
<button onClick={() => props.onChange(props.point + 1)}>+</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface PointsDetailProps {
|
||||
source: AdditionalPoint[]
|
||||
}
|
||||
|
||||
function PointsDetail({ source }: PointsDetailProps) {
|
||||
return (
|
||||
<ul className="points-detail">
|
||||
<li>
|
||||
<span>基础</span>
|
||||
<span className="font-mono">{BasePoints}</span>
|
||||
</li>
|
||||
{source.map(({ talent, points }) => (
|
||||
<li key={talent}>
|
||||
<span>{talents.get(talent)?.name ?? talent}</span>
|
||||
<span className="font-mono">{points}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export function Alloc() {
|
||||
const picked = usePicked()
|
||||
const {
|
||||
talents: { chains },
|
||||
additionalPoints: { source },
|
||||
} = useReplaced()
|
||||
const left = useLeftPoints()
|
||||
const [allocation, allocator] = useAllocator()
|
||||
const random = usePointRandomizer()
|
||||
const [showDetail, setShowDetail] = useState(false)
|
||||
const handleNext = () => {
|
||||
// navigate('/life')
|
||||
}
|
||||
return (
|
||||
<div className="screen point-allocation">
|
||||
<ul className="talent-list">
|
||||
{Array.from(picked, id => (
|
||||
<li key={id}>
|
||||
<Replaced id={id} chains={chains.get(id)} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul className="alloc">
|
||||
<li className="left">
|
||||
<span>剩余点数</span>
|
||||
<button
|
||||
className="primary font-mono"
|
||||
onClick={() => setShowDetail(!showDetail)}
|
||||
>
|
||||
{left}
|
||||
</button>
|
||||
{showDetail && <PointsDetail source={source} />}
|
||||
</li>
|
||||
{keys(allocation).map(key => (
|
||||
<li key={key}>
|
||||
<span>{properties[key]}</span>
|
||||
<AllocInput
|
||||
point={allocation[key]}
|
||||
onChange={value => allocator(key, value)}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div>
|
||||
<button className="info" onClick={() => random()}>
|
||||
随机分配
|
||||
</button>
|
||||
<button className="primary" onClick={() => {}}>
|
||||
开始新人生
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Alloc
|
||||
@@ -0,0 +1,17 @@
|
||||
.screen.home {
|
||||
gap: 5rem;
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useRemake } from '@remake/hooks'
|
||||
import './Home.css'
|
||||
|
||||
export default function Home() {
|
||||
const remake = useRemake()
|
||||
return (
|
||||
<div className="screen home">
|
||||
<div className="title">
|
||||
<h1>人生重开模拟器</h1>
|
||||
<h2>这垃圾人生一秒也不想待了</h2>
|
||||
</div>
|
||||
<button className="primary" onClick={remake}>
|
||||
立即重开
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export function Loading() {
|
||||
return (
|
||||
<div className="screen loading">
|
||||
<h2>载入中...</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Loading
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function Life() {
|
||||
return <></>
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
export default function Summary() {
|
||||
return (
|
||||
<div className="screen summary">
|
||||
<h2>人生总结</h2>
|
||||
<p>最终人生评分: {}</p>
|
||||
{/* 展现解锁的成就等 */}
|
||||
<button onClick={() => {}}>并入存档，重回首页</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.screen.talent-pick {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
ul.talent-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
.talent {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
// import { useEffect } from 'react'
|
||||
import { useTalentPuller, useTalentPicker } from '@remake/hooks'
|
||||
import { useTalentSubmit, useSubmitIsEnable } from '@remake/hooks'
|
||||
import TalentComponent from '@/components/Talent'
|
||||
import './TalentPick.css'
|
||||
|
||||
export default function TalentPick() {
|
||||
const [pulled, puller] = useTalentPuller()
|
||||
const [talents, picker] = useTalentPicker()
|
||||
const [enabled, limit] = useSubmitIsEnable()
|
||||
const submit = useTalentSubmit()
|
||||
// useEffect(puller, [])
|
||||
if (!pulled)
|
||||
return (
|
||||
<div className="screen talent-pick">
|
||||
<button className="primary" onClick={() => puller()}>
|
||||
十连抽！
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="screen talent-pick">
|
||||
<ul className="talent-list">
|
||||
{pulled.map(id => (
|
||||
<li key={id} onClick={() => picker(id)}>
|
||||
<TalentComponent id={id} selected={talents.has(id)} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{enabled ? (
|
||||
<button className="primary" onClick={() => submit()}>
|
||||
下一步
|
||||
</button>
|
||||
) : (
|
||||
<button className="error">请选取 {limit} 个天赋</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user