105 lines
3.1 KiB
JavaScript
105 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import { GamesContext } from '../context/games';
|
|
import { NavLink, Routes, Route } from 'react-router-dom';
|
|
|
|
import NewGame from './games/view/NewGame';
|
|
import GameSelector from './games/view/GameSelector';
|
|
|
|
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';
|
|
import Message2Opponent from './games/Message2Opponent';
|
|
|
|
import './Games.css';
|
|
|
|
export default function Games({ context: { gamesReducer, gamesApi }, players }) {
|
|
const [games, dispatchGames] = gamesReducer;
|
|
|
|
return (
|
|
<GamesContext.Provider value={games} >
|
|
<div className='Games'>
|
|
<div className='left-side'>
|
|
<ViewSelector />
|
|
<ViewProvider gamesReducer={gamesReducer} players={players} />
|
|
</div>
|
|
<div className='right-side'>
|
|
<ActionPanel gamesApi={gamesApi} players={players} />
|
|
<GameBoard />
|
|
<Message2Opponent dispatchGames={dispatchGames} />
|
|
{/*
|
|
<GameMessage />
|
|
*/}
|
|
</div>
|
|
</div >
|
|
</GamesContext.Provider>
|
|
)
|
|
};
|
|
|
|
function ViewSelector() {
|
|
// TODO: counter Wating for YOU
|
|
|
|
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({ gamesReducer, players }) {
|
|
const [/*games*/, dispatchGames] = gamesReducer;
|
|
|
|
return (
|
|
<div className='ViewProvider'>
|
|
<Routes>
|
|
|
|
<Route path='new' element={
|
|
<NewGame
|
|
onSelectPlayer={(whitePlayer, blackPlayer) => {
|
|
dispatchGames({ type: 'nextNewGame', whitePlayer, blackPlayer })
|
|
}}
|
|
players={players}
|
|
/>
|
|
} />
|
|
|
|
<Route path='proposal' element={
|
|
<GameSelector
|
|
yours='GAME_PROPOSAL_WAIT_FOR_YOU'
|
|
opponents='GAME_PROPOSAL_WAIT_FOR_OPPONENT'
|
|
onClick={(uuid) => console.log("GameProposal", uuid)}
|
|
/>
|
|
} />
|
|
|
|
<Route path='active' element={<GameSelector />} />
|
|
<Route path='archive' element={<GameSelector />} />
|
|
</Routes>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ActionPanel({ players, gamesApi }) {
|
|
return (
|
|
<div className='ActionPanel'>
|
|
<Routes>
|
|
<Route path='new' element={
|
|
<Create isCurrentUser={players.isCurrentUser}
|
|
pushNewGame={(reqParams) => gamesApi.pushNewGame(reqParams)}
|
|
/>
|
|
} />
|
|
<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>
|
|
)
|
|
} |