From 2777718cdafb02f3c1325963ac42895c99556389 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Sat, 28 Oct 2023 13:01:54 +0200
Subject: [PATCH] front: NewGame: radiobutton

player name can be used either for black or white side
---
 webapp/src/components/Game/NewGame.jsx | 30 +++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/Game/NewGame.jsx b/webapp/src/components/Game/NewGame.jsx
index fcf5f89..0856c40 100644
--- a/webapp/src/components/Game/NewGame.jsx
+++ b/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>
   )
-}
\ No newline at end of file
+}