56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
import './NewGame.css'
|
|
import React, { useContext } from 'react';
|
|
import { GamesContext } from '../../../context/games';
|
|
|
|
import DropdownList from '../../../components/DropdownList';
|
|
import { Color, WhiteStone, BlackStone } from '../../../components/Checkers';
|
|
|
|
export default function NewGame({ players, setPlayers }) {
|
|
const games = useContext(GamesContext);
|
|
|
|
const [whitePlayer, blackPlayer] = (() => {
|
|
if (games.newGame.myColor === Color.white)
|
|
return [players.currentUser, games.newGame.opponentName];
|
|
|
|
if (games.newGame.myColor === Color.black)
|
|
return [games.newGame.opponentName, players.currentUser];
|
|
|
|
return ['', ''];
|
|
})(); // <<-- Execute!
|
|
|
|
/*
|
|
* Name options
|
|
*/
|
|
const nameOptions = !players.leaderboard.table
|
|
? [<option key='loading' value='…'>…loading</option>]
|
|
: Object.keys(players.leaderboard.table).map(playerName =>
|
|
<option key={playerName} value={playerName}>
|
|
{players.isCurrentUser(playerName) ? 'You' : playerName}
|
|
</option>)
|
|
|
|
const whiteOptions = Array(nameOptions)
|
|
whiteOptions.push(<option key='default' value=''>{'white player …'}</option>)
|
|
|
|
const blackOptions = Array(nameOptions)
|
|
blackOptions.push(<option key='default' value=''>{'black player …'}</option>)
|
|
|
|
/*
|
|
* The Component
|
|
*/
|
|
const onSelect = (name, myColor) => {
|
|
if (players.isCurrentUser(name))
|
|
setPlayers(games.newGame.opponentName, myColor);
|
|
else
|
|
setPlayers(name, Color.opposite(myColor));
|
|
}
|
|
|
|
return (
|
|
<div className='NewGame'>
|
|
<BlackStone />
|
|
<DropdownList selected={blackPlayer} onSelect={(name) => onSelect(name, Color.black)} optionsList={blackOptions} />
|
|
<i>- vs -</i>
|
|
<DropdownList selected={whitePlayer} onSelect={(name) => onSelect(name, Color.white)} optionsList={whiteOptions} />
|
|
<WhiteStone />
|
|
</div>
|
|
)
|
|
} |