Counter - for watong for you games

webapp/src/components/Counter.css

@@ -0,0 +1,13 @@
+.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

@@ -0,0 +1,7 @@
+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,7 +59,12 @@
     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,6 +17,7 @@ import Forward from './games/action/Forward';
 
 import GameBoard from './games/GameBoard';
 import Message2Opponent from './games/Message2Opponent';
+import Counter from '../components/Counter';
 
 import './Games.css';
 
@@ -27,7 +28,7 @@ export default function Games({ context: { gamesReducer, gamesApi }, players })
     <GamesContext.Provider value={games} >
       <div className='Games'>
         <div className='left-side'>
-          <ViewSelector />
+          <ViewSelector games={games} />
           <ViewProvider gamesReducer={gamesReducer} players={players} />
         </div>
         <div className='right-side'>
@@ -43,15 +44,15 @@ export default function Games({ context: { gamesReducer, gamesApi }, players })
   )
 };
 
-function ViewSelector() {
+function ViewSelector({ games }) {
-  // TODO: counter Wating for YOU
+  const awaiting = countGames(games.gamesList);
 
   return (
-    <nav className='ViewSelector'>
+    <nav className='ViewSelector' >
       <NavLink to='new'>New</NavLink>
-      <NavLink to='proposal'>Proposal</NavLink>
+      <NavLink to='proposal'>Proposal<Counter number={awaiting.proposals} /></NavLink>
-      <NavLink to='active'>Active</NavLink>
+      <NavLink to='active'  >Active<Counter number={awaiting.active} /></NavLink>
-      <NavLink to='archive'>Archive</NavLink>
+      <NavLink to='archive' >Archive</NavLink>
     </nav>
   )
 }
@@ -102,4 +103,31 @@ 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

@@ -46,6 +46,10 @@ hr {
     margin-bottom: 7px;
 }
 
+.Separator .Counter {
+    background-color: darkgray;
+}
+
 .Selectable .Title {
     display: flex;
     flex-direction: row;

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

@@ -4,6 +4,7 @@ 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, onClick }) {
 
@@ -49,7 +50,8 @@ function Selectable({ game, onClick }) {
 function Separator({ counter }) {
     return (
         <div className="Separator">
-            waiting for opponent ({counter})
+            waiting for opponent
+            <Counter number={counter} />
         </div>
     )
 }