webapp/src/components/Counter.css

@@ -1,13 +0,0 @@
-.Counter {
-    display: inline-block;
-    line-height: 0px;
-    border-radius: 50%;
-}
-
-.Counter span {
-    display: inline-block;
-    padding-top: 50%;
-    padding-bottom: 50%;
-    margin-left: 2px;
-    margin-right: 2px;
-}

webapp/src/components/Counter.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-import './Counter.css';
-
-export default function Counter({ number }) {
-    if (number !== 0)
-        return <span className="Counter"><span>{number}</span></span>
-}

webapp/src/container/Games.css

@@ -59,12 +59,7 @@
     box-shadow: 0 1.5px 0 0 currentColor;
 }
 
-.ViewSelector .Counter {
+
-    background-color:palevioletred;
-    margin-right: 1px;
-    font-size: 60%;
-    vertical-align: 7px;
-}
 
 .ViewProvider {
     display: flex;

webapp/src/container/Games.jsx

@@ -17,7 +17,6 @@ import Forward from './games/action/Forward';
 
 import GameBoard from './games/GameBoard';
 import Message2Opponent from './games/Message2Opponent';
-import Counter from '../components/Counter';
 
 import './Games.css';
 
@@ -28,7 +27,7 @@ export default function Games({ context: { gamesReducer, gamesApi }, players })
     <GamesContext.Provider value={games} >
       <div className='Games'>
         <div className='left-side'>
-          <ViewSelector games={games} />
+          <ViewSelector />
           <ViewProvider gamesReducer={gamesReducer} players={players} />
         </div>
         <div className='right-side'>
@@ -44,21 +43,21 @@ export default function Games({ context: { gamesReducer, gamesApi }, players })
   )
 };
 
-function ViewSelector({ games }) {
+function ViewSelector() {
-  const awaiting = countGames(games.gamesList);
+  // TODO: counter Wating for YOU
 
   return (
-    <nav className='ViewSelector' >
+    <nav className='ViewSelector'>
       <NavLink to='new'>New</NavLink>
-      <NavLink to='proposal'>Proposal<Counter number={awaiting.proposals} /></NavLink>
+      <NavLink to='proposal'>Proposal</NavLink>
-      <NavLink to='active'  >Active<Counter number={awaiting.active} /></NavLink>
+      <NavLink to='active'>Active</NavLink>
-      <NavLink to='archive' >Archive</NavLink>
+      <NavLink to='archive'>Archive</NavLink>
     </nav>
   )
 }
 
 function ViewProvider({ gamesReducer, players }) {
-  const [games, dispatchGames] = gamesReducer;
+  const [/*games*/, dispatchGames] = gamesReducer;
 
   return (
     <div className='ViewProvider'>
@@ -66,7 +65,9 @@ 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}
           />
         } />
@@ -75,8 +76,7 @@ function ViewProvider({ gamesReducer, players }) {
           <GameSelector
             yours='GAME_PROPOSAL_WAIT_FOR_YOU'
             opponents='GAME_PROPOSAL_WAIT_FOR_OPPONENT'
-            isSelected={(uuid) => uuid === games.proposal.selectedUUID}
+            onClick={(uuid) => console.log("GameProposal", uuid)}
-            onSelect={(selectedUUID) => dispatchGames({ type: 'nextProposal', selectedUUID })}
           />
         } />
 
@@ -102,31 +102,4 @@ function ActionPanel({ players, gamesApi }) {
       </Routes>
     </div>
   )
-}
+}
-
-function countGames(gamesList) {
-
-  var awaiting = {
-    proposals: 0,
-    active: 0
-  };
-
-  if (!gamesList)
-    return awaiting;
-
-  for (const game of gamesList) {
-    switch (game.status) {
-      case 'GAME_PROPOSAL_WAIT_FOR_YOU':
-        awaiting.proposals++;
-        break;
-      case 'GAME_BOARD_WAIT_FOR_YOU':
-      case 'DRAW_REQUEST_WAIT_FOR_YO':
-        awaiting.active++;
-        break;
-      default:
-        break;
-    }
-  }
-
-  return awaiting;
-}

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

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

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

@@ -4,30 +4,21 @@ import { GamesContext } from '../../../context/games';
 
 import { Color, Player } from '../../../components/Checkers';
 import Loading from '../../../components/Loading';
-import Counter from '../../../components/Counter';
 
-export default function GameSelector({ yours, opponents, isSelected, onSelect }) {
+export default function GameSelector({ yours, opponents, onClick }) {
-    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} selected={isSelected(game.uuid)} onClick={onClick} />)
+        .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
 
     const opponentsList = gamesList.filter(game => game.status === opponents)
-        .map(game => <Selectable game={game} key={game.uuid} selected={isSelected(game.uuid)} onClick={onClick} />)
+        .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
 
     return (
-        <div className='GameSelector'>
+        <div className="GameSelector">
             {yoursList}
             {opponentsList.length > 0 && <Separator counter={opponentsList.length} />}
             {opponentsList}
@@ -35,15 +26,14 @@ export default function GameSelector({ yours, opponents, isSelected, onSelect })
     )
 }
 
-function Selectable({ game, selected, onClick }) {
+function Selectable({ game, onClick }) {
     const myColor = game.myColor;
     const opponentColor = Color.opposite(myColor);
     const opponentName = game.opponentName;
 
     return (
         <div >
-            <div className={'Selectable' + (selected ? ' selected' : '')}
+            <div className='Selectable' onClick={() => onClick(game.uuid)}>
-                onClick={() => onClick(game.uuid)}>
                 <div className='Title'>
                     <Player color={myColor} />
                     <i>vs</i>
@@ -58,9 +48,8 @@ function Selectable({ game, selected, onClick }) {
 
 function Separator({ counter }) {
     return (
-        <div className='Separator'>
+        <div className="Separator">
-            waiting for opponent
+            waiting for opponent ({counter})
-            <Counter number={counter} />
         </div>
     )
 }

webapp/src/reducer/games.js

@@ -10,10 +10,6 @@ const initialState = {
     message2opponent: '',
   },
 
-  proposal: {
-    selectedUUID: null,
-  },
-
   // Network
   isPollingGamesList: false,
   isPushingNewGame: false,
@@ -31,12 +27,6 @@ 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);
   }