front: NewGame component

webapp/src/components/Game/GameBoard.jsx

@@ -1,39 +1,19 @@
 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'
+import { WHITE, BLACK } from './Stone'
+import { Player } from './Player'
 
 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>)
-
+  const [whiteName] = useState('');
+  const [blackName] = useState('');
 
   return (
     <div className='game-board'>
-      <SelectPlayer name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} />
-      {/* <Player color={WHITE()} name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} /> */}
+      <Player color={WHITE()} name={whiteName} />
       <Board />
-      {/* <Player color={BLACK()} name={blackName} setName={setBlackName} nameOptions={blackOptions} /> */}
-      <SelectPlayer name={blackName} setName={setBlackName} nameOptions={blackOptions} />
+      <Player color={BLACK()} name={blackName} />
     </div>
   )
 }

webapp/src/components/Game/GameSelector/Selectable.jsx

@@ -1,7 +1,7 @@
 import './Selectable.css'
 import React from 'react';
 import { oppositeColor } from '../Stone';
-import Player from '../Player';
+import { Player } from '../Player';
 
 export default function Selectable({ game, onClick }) {
 

webapp/src/components/Game/NewGame.css

@@ -0,0 +1,17 @@
+.new-game {
+    margin-top: 70px;
+}
+
+.new-game * {
+    width: 230px;
+}
+
+.new-game .container {
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+
+.new-game .stone {
+    font-size: 150%;
+    vertical-align: -3px;
+}

webapp/src/components/Game/NewGame.jsx

@@ -1,11 +1,17 @@
 import './NewGame.css';
 import React from 'react';
+import { AppData } from '../../context/data'
 import { useLocation, matchPath } from "react-router";
+import { SelectPlayer } from './Player';
+import { WhiteStone, BlackStone } from './Stone';
 
 // import { AppContext } from '../../context/app'
 
 export default function NewGame() {
   // const [ctx, dispatchCtx] = React.useContext(AppContext)
+  const [data] = React.useContext(AppData)
+  const [whiteName, setWhiteName] = React.useState('');
+  const [blackName, setBlackName] = React.useState('');
 
   const { pathname } = useLocation();
   const isMyPath = matchPath("/game/new", pathname);
@@ -13,9 +19,29 @@ export default function NewGame() {
   if (!isMyPath)
     return
 
+  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=''>{'select …'}</option>)
+
+  const blackOptions = Array(nameOptions)
+  blackOptions.push(<option key='default' value=''>{'select …'}</option>)
+
   return (
     <div className='new-game'>
-      <div>New game TBD</div>
+      <div className='container'>
+        <WhiteStone/> player
+        <SelectPlayer name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} />
+      </div>
+      <div className='container'>
+        <SelectPlayer name={blackName} setName={setBlackName} nameOptions={blackOptions} />
+        <BlackStone/> player
+      </div>
     </div>
   )
 }

webapp/src/components/Game/Player.jsx

@@ -2,7 +2,7 @@ import './Player.css'
 import React from 'react'
 import { Stone } from './Stone'
 
-export default function Player({ color, name }) {
+export function Player({ color, name }) {
 
     return (
         <div className='player'>