77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
import './Games.css';
|
|
import React from "react"
|
|
import { NavLink, Routes, Route } from "react-router-dom";
|
|
|
|
import NewGame from './games/view/NewGame';
|
|
import GameProposals from './games/view/GameProposals';
|
|
import ActiveGames from './games/view/ActiveGames';
|
|
import GamesArchive from './games/view/GamesArchive';
|
|
|
|
import Create from './games/action/Create';
|
|
import Reject from './games/action/Reject';
|
|
import Cancel from './games/action/Cancel';
|
|
import Accept from './games/action/Accept';
|
|
import DrawReq from './games/action/DrawReq';
|
|
import DrawAcq from './games/action/DrawAcq';
|
|
import Surrender from './games/action/Surrender';
|
|
import Backward from './games/action/Backward';
|
|
import Forward from './games/action/Forward';
|
|
|
|
import GameBoard from './games/GameBoard';
|
|
|
|
export default function Games({ gamesReducer, user }) {
|
|
|
|
return (
|
|
<div className="Games">
|
|
<div className='left-side'>
|
|
<ViewSelector />
|
|
<ViewProvider />
|
|
</div>
|
|
<div className='right-side'>
|
|
<ActionPanel />
|
|
<GameBoard />
|
|
{/*
|
|
<GameMessage />
|
|
<GameBoard />
|
|
<Message2Opponent /> */}
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
function ViewSelector() {
|
|
return (
|
|
<nav className='ViewSelector'>
|
|
<NavLink to="new">New</NavLink>
|
|
<NavLink to="proposal">Proposal</NavLink>
|
|
<NavLink to="active">Active</NavLink>
|
|
<NavLink to="archive">Archive</NavLink>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
function ViewProvider() {
|
|
return (
|
|
<div className='ViewProvider'>
|
|
<Routes>
|
|
<Route path="new" element={<NewGame />} />
|
|
<Route path="proposal" element={<GameProposals />} />
|
|
<Route path="active" element={<ActiveGames />} />
|
|
<Route path="archive" element={<GamesArchive />} />
|
|
</Routes>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ActionPanel() {
|
|
return (
|
|
<div className='ActionPanel'>
|
|
<Routes>
|
|
<Route path="new" element={<Create />} />
|
|
<Route path="proposal" element={[<Accept key={1} />, <Reject key={2} />, <Cancel key={3} />]} />
|
|
<Route path="active" element={[<DrawReq key={1} />, <DrawAcq key={2} />, <Surrender key={3} />]} />
|
|
<Route path="archive" element={[<Backward key={1} />, <Forward key={2} />]} />
|
|
</Routes>
|
|
</div>
|
|
)
|
|
} |