40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import './GameBoard.css'
|
|
import React, { useState } from 'react'
|
|
import { AppData } from '../../context/data'
|
|
import Board from './GameBoard/Board'
|
|
import { SelectPlayer } from './Player'
|
|
// import { WHITE, BLACK, WhiteStone, BlackStone } from './Stone'
|
|
|
|
export default function GameBoard() {
|
|
|
|
const [data] = React.useContext(AppData)
|
|
|
|
const [whiteName, setWhiteName] = useState('');
|
|
const [blackName, setBlackName] = useState('');
|
|
|
|
|
|
const nameOptions = data.leaderboard
|
|
? Object.keys(data.leaderboard).map(playerName => {
|
|
const displayName = data.isCurrentUser(playerName) ? 'You' : playerName
|
|
return <option key={playerName} value={playerName}>{displayName}</option>
|
|
})
|
|
: []
|
|
|
|
const whiteOptions = Array(nameOptions)
|
|
whiteOptions.push(<option key='default' value=''>{'⛀ …'}</option>)
|
|
|
|
const blackOptions = Array(nameOptions)
|
|
blackOptions.push(<option key='default' value=''>{'⛂ …'}</option>)
|
|
|
|
|
|
return (
|
|
<div className='game-board'>
|
|
<SelectPlayer name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} />
|
|
{/* <Player color={WHITE()} name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} /> */}
|
|
<Board />
|
|
{/* <Player color={BLACK()} name={blackName} setName={setBlackName} nameOptions={blackOptions} /> */}
|
|
<SelectPlayer name={blackName} setName={setBlackName} nameOptions={blackOptions} />
|
|
</div>
|
|
)
|
|
}
|