mirror of
https://github.com/LHY0125/Gobang-Game.git
synced 2026-06-28 16:35:55 +08:00
feat(frontend): App 路由集成 + 木纹风格 CSS
App.tsx 添加 menu/game/replay 三页面路由切换,MainMenu 新增 onReplayStart 属性区分对局与回放入口。App.css 实现经典木纹 视觉风格(深棕底色、米黄文字、皮革纹理按钮),index.css 基础 重置。修复 tsconfig 中 erasableSyntaxOnly 无效选项并安装 @types/node。
This commit is contained in:
+21
-3
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user