webapp/src/components/Game/NewGame.css

@@ -6,7 +6,7 @@
     width: 230px;
 }
 
-.new-game>div { /* first level childs only*/
+.new-game div {
     margin-top: 25px;
     margin-bottom: 25px;
 }

webapp/src/components/Game/NewGame.jsx

@@ -24,17 +24,17 @@ export default function NewGame() {
     : []
 
   const whiteOptions = Array(nameOptions)
-  whiteOptions.push(<option key='default' value=''>{'white player …'}</option>)
+  whiteOptions.push(<option key='default' value=''>{'select …'}</option>)
 
   const blackOptions = Array(nameOptions)
-  blackOptions.push(<option key='default' value=''>{'black player …'}</option>)
+  blackOptions.push(<option key='default' value=''>{'select …'}</option>)
 
   const setWhitePlayer = (name) => {
-    dispatchCtx({ update: "newGame", whitePlayer: name })
+    dispatchCtx({ component: "new-game", whitePlayer: name })
   }
 
   const setBlackPlayer = (name) => {
-    dispatchCtx({ update: "newGame", blackPlayer: name })
+    dispatchCtx({ component: "new-game", blackPlayer: name })
   }
 
   return (

webapp/src/context/app/reducer.js

@@ -1,12 +1,12 @@
 export const reducer = (state, action) => {
 
-  switch (action.update) {
+  switch (action.component) {
 
     case "game-selector":
       return GameSelector_update(state, action)
 
-    case "newGame":
+    case "new-game":
-      return updateNewGame(state, action)
+      return NewGame_update(state, action)
 
     default:
       console.warn("Unknown action.component", action.component)
@@ -62,21 +62,26 @@ function GameSelector_update(state, action) {
   console.warn(action.component, "- bad property")
 }
 
-function updateNewGame(state, action) {
+function NewGame_update(state, action) {
-  const newGame = {...state.newGame}
+  if (Object.hasOwn(action, 'whitePlayer')) {
-
+    return {
-  Object.keys(action)
+      ...state,
-  .slice(1) // skip 'update' property
+      newGame: {
-  .forEach(actionKey => {
+        ...state.newGame,
-    if (Object.hasOwn(newGame, actionKey)) {
+        whitePlayer: action.whitePlayer
-      newGame[actionKey] = action[actionKey]
+      }
-    } else {
-      console.warn("NewGame update: bad action property\n", actionKey + ":", action[actionKey])
     }
-  })
-
-  return {
-    ...state,
-    newGame
   }
-}
+
+  if (Object.hasOwn(action, 'blackPlayer')) {
+    return {
+      ...state,
+      newGame: {
+        ...state.newGame,
+        blackPlayer: action.blackPlayer
+      }
+    }
+  }
+
+  console.warn(action.component, "- bad property")
+}