front: GameSelector: store selected game in AppCtx

webapp/src/components/Game/GameSelector.jsx

@@ -3,24 +3,40 @@ import React from 'react';
 import { useLocation, matchPath } from "react-router";
 
 import { AppData } from "../../context/data"
+import { AppContext } from "../../context/app"
 import Proposal from './GameSelector/GameProposal';
 
-export default function Game() {
+export default function GameSelector() {
   const [data] = React.useContext(AppData)
+  const [ctx, dispatchCtx] = React.useContext(AppContext)
 
   const { pathname } = useLocation();
   const isProposalPath = matchPath("/game/proposal/*", pathname);
-  const isActivelPath = matchPath("/game/active/*", pathname);
-  const isArchivePath = matchPath("/game/archive/*", pathname);
+  const isActivelPath  = matchPath("/game/active/*", pathname);
+  const isArchivePath  = matchPath("/game/archive/*", pathname);
+
+  console.log("GameSelector appCtx", ctx)
+
+  const onClick_proposal = (selectedGame) => {
+    dispatchCtx({ component: "game-selector", selectedGameProposal: selectedGame })
+  }
+
+  const onClick_active = (selectedGame) => {
+    dispatchCtx({ component: "game-selector", selectedActiveGame: selectedGame })
+  }
+  
+  const onClick_archive = (selectedGame) => {
+    dispatchCtx({ component: "game-selector", selectedArchiveGame: selectedGame })
+  }
 
   if (!data.games)
     return <div>Loading..</div>
 
   return (
     <div className='game-selector'>
-      {isProposalPath && <Proposal games={data.games} />}
-      {isActivelPath  && <div>TBD #1</div>}
-      {isArchivePath  && <div>TBD #2</div>}
+      {isProposalPath && <Proposal games={data.games} onClick={onClick_proposal} />}
+      {isActivelPath && <div>TBD #1</div>}
+      {isArchivePath && <div>TBD #2</div>}
     </div>
   )
 }

webapp/src/components/Game/GameSelector/GameProposal.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import Selectable from './Selectable';
 
-export default function ProposalSelector({ games }) {
+export default function ProposalSelector({ games, onClick }) {
 
   const waitForYou = games
     .filter(game => game.status === Status.WaitForYou)
-    .map(game => <Selectable game={game} key={game.uuid} />)
+    .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
 
   const WaitForOpponent = games
     .filter(game => game.status === Status.WaitForOpponent)
-    .map(game => <Selectable game={game} key={game.uuid} />)
+    .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
 
   return (
     <div className="Games">

webapp/src/components/Game/GameSelector/Selectable.css

@@ -13,6 +13,10 @@
     margin-right: 5px;
 }
 
+.selectable:hover {
+    background-color: #d3d3d360;
+}
+
 /* .Games .li button.action {
     display: none;
 }

webapp/src/components/Game/GameSelector/Selectable.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { oppositeColor } from '../Stone';
 import Player from '../Player';
 
-export default function Selectable({ game }) {
+export default function Selectable({ game, onClick }) {
 
   const myColor = game.myColor
 
@@ -12,7 +12,7 @@ export default function Selectable({ game }) {
 
   return (
     <div className='selectable'>
-      <div className='title'>
+      <div className='title' onClick={() => onClick(game)}>
         <Player color={myColor} />
         <i>vs</i>
         <Player color={opponentColor} name={opponentName} />

webapp/src/context/app/reducer.js

@@ -1,25 +1,51 @@
 export const reducer = (state, action) => {
-  switch (action.set) {
 
-    case "header":
-      if (action.selected)
-        return {
-          ...state,
-          header: {
-            ...state.header,
-            selected: action.selected
-          }
-        }
-        break;
+  switch (action.component) {
+
+    case "game-selector":
+      return GameSelector_update(state, action)
 
     default:
-      console.warn("Unknown action.type", action)
+      console.warn("Unknown action.component", action.component)
       return state
   }
 }
 
 export const initialState = {
-  header: {
-    selected: null
+  gameSelector: {
+    selectedGameProposal: null,
+    selectedActiveGame: null,
+    selectedArchiveGame: null
   }
 }
+
+function GameSelector_update(state, action) {
+  if (Object.hasOwn(action, 'selectedGameProposal'))
+    return {
+      ...state,
+      gameSelector: {
+        ...state.gameSelector,
+        selectedGameProposal: action.selectedGameProposal
+      }
+    }
+
+  if (Object.hasOwn(action, 'selectedActiveGame'))
+    return {
+      ...state,
+      gameSelector: {
+        ...state.gameSelector,
+        selectedActiveGame: action.selectedActiveGame
+      }
+    }
+
+  if (Object.hasOwn(action, 'selectedArchiveGame'))
+    return {
+      ...state,
+      gameSelector: {
+        ...state.gameSelector,
+        selectedArchiveGame: action.selectedArchiveGame
+      }
+    }
+
+    console.warn(action.component, "- bad property")
+}