front: GameBoard to reflect selected player fron NewGame

webapp/src/components/Game/GameBoard.jsx

@@ -1,19 +1,20 @@
 import './GameBoard.css'
-import React, { useState } from 'react'
+import React from 'react'
 import Board from './GameBoard/Board'
 import { WHITE, BLACK } from './Stone'
 import { Player } from './Player'
 
+import { AppContext } from '../../context/app'
+
 export default function GameBoard() {
 
-  const [whiteName] = useState('');
+  const [ctx] = React.useContext(AppContext)
-  const [blackName] = useState('');
 
   return (
     <div className='game-board'>
-      <Player color={WHITE()} name={whiteName} />
+      <Player color={WHITE()} name={ctx.newGame.whitePlayer} />
       <Board />
-      <Player color={BLACK()} name={blackName} />
+      <Player color={BLACK()} name={ctx.newGame.blackPlayer} />
     </div>
   )
 }

webapp/src/components/Game/NewGame.css

@@ -1,14 +1,14 @@
 .new-game {
-    margin-top: 70px;
+    margin-top: 60px;
 }
 
 .new-game * {
     width: 230px;
 }
 
-.new-game .container {
+.new-game div {
-    margin-top: 40px;
+    margin-top: 25px;
-    margin-bottom: 40px;
+    margin-bottom: 25px;
 }
 
 .new-game .stone {

webapp/src/components/Game/NewGame.jsx

@@ -1,18 +1,15 @@
 import './NewGame.css';
 import React from 'react';
 import { AppData } from '../../context/data'
+import { AppContext } from '../../context/app'
 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 [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);
 
@@ -32,15 +29,24 @@ export default function NewGame() {
   const blackOptions = Array(nameOptions)
   blackOptions.push(<option key='default' value=''>{'select …'}</option>)
 
+  const setWhitePlayer = (name) => {
+    dispatchCtx({ component: "new-game", whitePlayer: name })
+  }
+
+  const setBlackPlayer = (name) => {
+    dispatchCtx({ component: "new-game", blackPlayer: name })
+  }
+
   return (
     <div className='new-game'>
-      <div className='container'>
+      <div>
-        <WhiteStone/> player
+        <WhiteStone/>
-        <SelectPlayer name={whiteName} setName={setWhiteName} nameOptions={whiteOptions} />
+        <SelectPlayer name={ctx.newGame.whitePlayer} setName={setWhitePlayer} nameOptions={whiteOptions} />
       </div>
-      <div className='container'>
+      <div>- vs -</div>
-        <SelectPlayer name={blackName} setName={setBlackName} nameOptions={blackOptions} />
+      <div>
-        <BlackStone/> player
+        <SelectPlayer name={ctx.newGame.blackPlayer} setName={setBlackPlayer} nameOptions={blackOptions} />
+        <BlackStone/>
       </div>
     </div>
   )

webapp/src/context/app/reducer.js

@@ -5,6 +5,9 @@ export const reducer = (state, action) => {
     case "game-selector":
       return GameSelector_update(state, action)
 
+    case "new-game":
+      return NewGame_update(state, action)
+
     default:
       console.warn("Unknown action.component", action.component)
       return state
@@ -15,12 +18,18 @@ export const initialState = {
   gameSelector: {
     selectedGameProposal: null,
     selectedActiveGame: null,
-    selectedArchiveGame: null
+    selectedArchiveGame: null,
-  }
+  },
+
+  newGame: {
+    whitePlayer: '',
+    blackPlayer: '',
+  },
+
 }
 
 function GameSelector_update(state, action) {
-  if (Object.hasOwn(action, 'selectedGameProposal'))
+  if (Object.hasOwn(action, 'selectedGameProposal')) {
     return {
       ...state,
       gameSelector: {
@@ -28,8 +37,9 @@ function GameSelector_update(state, action) {
         selectedGameProposal: action.selectedGameProposal
       }
     }
+  }
 
-  if (Object.hasOwn(action, 'selectedActiveGame'))
+  if (Object.hasOwn(action, 'selectedActiveGame')) {
     return {
       ...state,
       gameSelector: {
@@ -37,8 +47,9 @@ function GameSelector_update(state, action) {
         selectedActiveGame: action.selectedActiveGame
       }
     }
+  }
 
-  if (Object.hasOwn(action, 'selectedArchiveGame'))
+  if (Object.hasOwn(action, 'selectedArchiveGame')) {
     return {
       ...state,
       gameSelector: {
@@ -46,6 +57,31 @@ function GameSelector_update(state, action) {
         selectedArchiveGame: action.selectedArchiveGame
       }
     }
+  }
 
-    console.warn(action.component, "- bad property")
+  console.warn(action.component, "- bad property")
 }
+
+function NewGame_update(state, action) {
+  if (Object.hasOwn(action, 'whitePlayer')) {
+    return {
+      ...state,
+      newGame: {
+        ...state.newGame,
+        whitePlayer: action.whitePlayer
+      }
+    }
+  }
+
+  if (Object.hasOwn(action, 'blackPlayer')) {
+    return {
+      ...state,
+      newGame: {
+        ...state.newGame,
+        blackPlayer: action.blackPlayer
+      }
+    }
+  }
+
+  console.warn(action.component, "- bad property")
+}