import './NewGame.css' import React, { useContext } from 'react'; import { GamesContext } from '../../../context/games'; import DropdownList from '../../../components/DropdownList'; import { WhiteStone, BlackStone } from '../../../components/Checkers'; export default function NewGame({ players, onSelectPlayer }) { const games = useContext(GamesContext); /* * Name options */ const nameOptions = !players.leaderboard.table ? [] : Object.keys(players.leaderboard.table).map(playerName => ) const whiteOptions = Array(nameOptions) whiteOptions.push() const blackOptions = Array(nameOptions) blackOptions.push() /* * Radiobutton */ const radioButton = (whitePlayer, blackPlayer) => { if (whitePlayer !== '' && whitePlayer === games.newGame.blackPlayer) { blackPlayer = ''; } if (blackPlayer !== '' && blackPlayer === games.newGame.whitePlayer) { whitePlayer = ''; } onSelectPlayer(whitePlayer, blackPlayer); } const setWhitePlayer = (name) => { radioButton(name, games.newGame.blackPlayer); } const setBlackPlayer = (name) => { radioButton(games.newGame.whitePlayer, name); } /* * The Component */ return (
- vs -
) }