front: AppCtx: better update function

webapp/src/components/Game/NewGame.css

@@ -6,7 +6,7 @@
     width: 230px;
 }
 
-.new-game div {
+.new-game>div { /* first level childs only*/
     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=''>{'select …'}</option>)
+  whiteOptions.push(<option key='default' value=''>{'white player …'}</option>)
 
   const blackOptions = Array(nameOptions)
-  blackOptions.push(<option key='default' value=''>{'select …'}</option>)
+  blackOptions.push(<option key='default' value=''>{'black player …'}</option>)
 
   const setWhitePlayer = (name) => {
-    dispatchCtx({ component: "new-game", whitePlayer: name })
+    dispatchCtx({ update: "newGame", whitePlayer: name })
   }
 
   const setBlackPlayer = (name) => {
-    dispatchCtx({ component: "new-game", blackPlayer: name })
+    dispatchCtx({ update: "newGame", blackPlayer: name })
   }
 
   return (

webapp/src/context/app/reducer.js

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