feat(frontend): App 路由集成 + 木纹风格 CSS

App.tsx 添加 menu/game/replay 三页面路由切换,MainMenu 新增
onReplayStart 属性区分对局与回放入口。App.css 实现经典木纹
视觉风格(深棕底色、米黄文字、皮革纹理按钮),index.css 基础
重置。修复 tsconfig 中 erasableSyntaxOnly 无效选项并安装
@types/node。
This commit is contained in:
2026-05-31 00:27:34 +08:00
parent 0138d80f2a
commit e395ea424b
6 changed files with 232 additions and 12 deletions
+21 -3
View File
@@ -1,8 +1,26 @@
import { useState } from 'react';
import MainMenu from './components/menu/MainMenu';
import GameView from './components/game/GameView';
import ReplayView from './components/replay/ReplayView';
import './App.css';
type Page = 'menu' | 'game' | 'replay';
function App() {
const [page, setPage] = useState<Page>('menu');
const handleGameStart = () => setPage('game');
const handleReplayStart = () => setPage('replay');
const handleBackToMenu = () => setPage('menu');
if (page === 'game') return <GameView onBackToMenu={handleBackToMenu} />;
if (page === 'replay') return <ReplayView onBackToMenu={handleBackToMenu} />;
return (
<div className="app">
<h1> v2.0</h1>
</div>
<MainMenu
onGameStart={handleGameStart}
onReplayStart={handleReplayStart}
/>
);
}