GameSekector: isSelected, onSelect

webapp/src/container/Games.jsx

@@ -58,7 +58,7 @@ function ViewSelector({ games }) {
 }
 
 function ViewProvider({ gamesReducer, players }) {
-  const [/*games*/, dispatchGames] = gamesReducer;
+  const [games, dispatchGames] = gamesReducer;
 
   return (
     <div className='ViewProvider'>
@@ -66,9 +66,7 @@ function ViewProvider({ gamesReducer, players }) {
 
         <Route path='new' element={
           <NewGame
-            onSelectPlayer={(whitePlayer, blackPlayer) => {
-              dispatchGames({ type: 'nextNewGame', whitePlayer, blackPlayer })
-            }}
+            onSelectPlayer={(whitePlayer, blackPlayer) => dispatchGames({ type: 'nextNewGame', whitePlayer, blackPlayer })}
             players={players}
           />
         } />
@@ -77,7 +75,8 @@ function ViewProvider({ gamesReducer, players }) {
           <GameSelector
             yours='GAME_PROPOSAL_WAIT_FOR_YOU'
             opponents='GAME_PROPOSAL_WAIT_FOR_OPPONENT'
-            onClick={(uuid) => console.log("GameProposal", uuid)}
+            isSelected={(uuid) => uuid === games.proposal.selectedUUID}
+            onSelect={(selectedUUID) => dispatchGames({ type: 'nextProposal', selectedUUID })}
           />
         } />
 

webapp/src/container/games/view/GameSelector.css

@@ -13,6 +13,13 @@ hr {
     margin-top: 3px;
 }
 
+.Selectable .Title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
 .Selectable q {
     color: gray;
     font-size: 70%;
@@ -33,9 +40,14 @@ hr {
 .Selectable:hover {
     background-color: #d3d3d360;
     border-radius: 2px;
-
 }
 
+.Selectable.selected {
+    background-color: #d3d3d3f0;
+    border-radius: 2px;
+}
+
+
 .Separator {
     /* width: 20%;  */
     /* height: 20px;  */
@@ -48,11 +60,4 @@ hr {
 
 .Separator .Counter {
     background-color: darkgray;
-}
-
-.Selectable .Title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
 }

webapp/src/container/games/view/GameSelector.jsx

@@ -6,20 +6,28 @@ import { Color, Player } from '../../../components/Checkers';
 import Loading from '../../../components/Loading';
 import Counter from '../../../components/Counter';
 
-export default function GameSelector({ yours, opponents, onClick }) {
+export default function GameSelector({ yours, opponents, isSelected, onSelect }) {
+    const games = useContext(GamesContext);
 
     const gamesList = useContext(GamesContext).gamesList;
     if (gamesList === null)
         return <Loading />
 
+    const onClick = (uuid) => {
+        if (isSelected(uuid))
+            onSelect(null); // deselect previously selected game
+        else
+            onSelect(uuid);
+    }
+
     const yoursList = gamesList.filter(game => game.status === yours)
-        .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
+        .map(game => <Selectable game={game} key={game.uuid} selected={isSelected(game.uuid)} onClick={onClick} />)
 
     const opponentsList = gamesList.filter(game => game.status === opponents)
-        .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
+        .map(game => <Selectable game={game} key={game.uuid} selected={isSelected(game.uuid)} onClick={onClick} />)
 
     return (
-        <div className="GameSelector">
+        <div className='GameSelector'>
             {yoursList}
             {opponentsList.length > 0 && <Separator counter={opponentsList.length} />}
             {opponentsList}
@@ -27,14 +35,15 @@ export default function GameSelector({ yours, opponents, onClick }) {
     )
 }
 
-function Selectable({ game, onClick }) {
+function Selectable({ game, selected, onClick }) {
     const myColor = game.myColor;
     const opponentColor = Color.opposite(myColor);
     const opponentName = game.opponentName;
 
     return (
         <div >
-            <div className='Selectable' onClick={() => onClick(game.uuid)}>
+            <div className={'Selectable' + (selected ? ' selected' : '')}
+                onClick={() => onClick(game.uuid)}>
                 <div className='Title'>
                     <Player color={myColor} />
                     <i>vs</i>
@@ -49,7 +58,7 @@ function Selectable({ game, onClick }) {
 
 function Separator({ counter }) {
     return (
-        <div className="Separator">
+        <div className='Separator'>
             waiting for opponent
             <Counter number={counter} />
         </div>

webapp/src/reducer/games.js

@@ -10,6 +10,10 @@ const initialState = {
     message2opponent: '',
   },
 
+  proposal: {
+    selectedUUID: null,
+  },
+
   // Network
   isPollingGamesList: false,
   isPushingNewGame: false,
@@ -27,6 +31,12 @@ function reducer(state, action) {
         newGame: nextState(state.newGame, action)
       };
 
+    case 'nextProposal':
+      return {
+        ...state,
+        proposal: nextState(state.proposal, action)
+      };
+
     default:
       throw Error('GamesReducer: unknown action.type', action.type);
   }