front: NewGame: radiobutton

player name can be used either for black or white side

webapp/src/components/Game/NewGame.jsx

@@ -16,6 +16,9 @@ export default function NewGame() {
   if (!isMyPath)
     return
 
+  /*
+   * Name options
+   */
   const nameOptions = data.leaderboard
     ? Object.keys(data.leaderboard).map(playerName => {
       const displayName = data.isCurrentUser(playerName) ? 'You' : playerName
@@ -29,25 +32,42 @@ export default function NewGame() {
   const blackOptions = Array(nameOptions)
   blackOptions.push(<option key='default' value=''>{'black player …'}</option>)
 
+  /*
+   * Radiobutton
+   */
+  const radioButton = (whitePlayer, blackPlayer) => {
+    if (whitePlayer !== '' && whitePlayer === ctx.newGame.blackPlayer) {
+      blackPlayer = ''
+    }
+    if (blackPlayer !== '' && blackPlayer === ctx.newGame.whitePlayer) {
+      whitePlayer = ''
+    }
+
+    dispatchCtx({ update: "newGame", whitePlayer, blackPlayer })
+  }
+
   const setWhitePlayer = (name) => {
-    dispatchCtx({ update: "newGame", whitePlayer: name })
+    radioButton(name, ctx.newGame.blackPlayer)
   }
 
   const setBlackPlayer = (name) => {
-    dispatchCtx({ update: "newGame", blackPlayer: name })
+    radioButton(ctx.newGame.whitePlayer, name)
   }
 
+  /*
+   * Component
+   */
   return (
     <div className='new-game'>
       <div>
-        <WhiteStone/>
+        <WhiteStone />
         <SelectPlayer name={ctx.newGame.whitePlayer} setName={setWhitePlayer} nameOptions={whiteOptions} />
       </div>
       <div>- vs -</div>
       <div>
         <SelectPlayer name={ctx.newGame.blackPlayer} setName={setBlackPlayer} nameOptions={blackOptions} />
-        <BlackStone/>
+        <BlackStone />
       </div>
     </div>
   )
-}
+}