54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
|
import { Navbar } from '../components/Navbar'
|
|
import { useEffect, useState } from 'react'
|
|
import { api } from '../store/api'
|
|
|
|
export function Home() {
|
|
const navigate = useNavigate()
|
|
const [scripts, setScripts] = useState<any[]>([])
|
|
|
|
useEffect(() => {
|
|
api.scripts.list().then(setScripts).catch(() => {})
|
|
}, [])
|
|
|
|
return (
|
|
<div>
|
|
<Navbar />
|
|
<div className="hero">
|
|
<h1>AI 剧本杀</h1>
|
|
<p>随时开局，人人都是主角。1 人即可开局，AI 队友补位。</p>
|
|
<div className="actions">
|
|
<button className="btn-primary" onClick={() => navigate('/scripts')}>
|
|
开始游戏
|
|
</button>
|
|
<button className="btn-secondary" onClick={() => navigate('/login')}>
|
|
登录 / 注册
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="page">
|
|
<h2 style={{ marginBottom: 16 }}>推荐剧本</h2>
|
|
<div className="script-grid">
|
|
{scripts.map((s) => (
|
|
<div
|
|
key={s.id}
|
|
className="card script-card"
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={() => navigate(`/scripts/${s.id}`)}
|
|
>
|
|
<h3>{s.title}</h3>
|
|
<div className="tags">
|
|
<span className="tag">{s.type}</span>
|
|
<span className="tag difficulty">{'⭐'.repeat(s.difficulty)}</span>
|
|
<span className="tag">{s.duration}</span>
|
|
<span className="tag">{s.min_players}-{s.max_players}人</span>
|
|
</div>
|
|
<p style={{ color: '#aaa', fontSize: 14, lineHeight: 1.6 }}>{s.background}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|