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,14 +32,31 @@ 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>