From d8d3406fe1ceaab39b0a380d6da3ae50571cf5a1 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Tue, 14 Nov 2023 18:44:06 +0100
Subject: [PATCH] Counter - for watong for you games

---
 webapp/src/components/Counter.css             | 13 ++++++
 webapp/src/components/Counter.jsx             |  7 +++
 webapp/src/container/Games.css                |  7 ++-
 webapp/src/container/Games.jsx                | 44 +++++++++++++++----
 .../src/container/games/view/GameSelector.css |  4 ++
 .../src/container/games/view/GameSelector.jsx |  4 +-
 6 files changed, 69 insertions(+), 10 deletions(-)
 create mode 100644 webapp/src/components/Counter.css
 create mode 100644 webapp/src/components/Counter.jsx

diff --git a/webapp/src/components/Counter.css b/webapp/src/components/Counter.css
new file mode 100644
index 0000000..5479f2f
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/webapp/src/components/Counter.jsx b/webapp/src/components/Counter.jsx
new file mode 100644
index 0000000..9d64e5c
--- /dev/null
+++ b/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>
+}
\ No newline at end of file
diff --git a/webapp/src/container/Games.css b/webapp/src/container/Games.css
index 2508acd..c794442 100644
--- a/webapp/src/container/Games.css
+++ b/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;
diff --git a/webapp/src/container/Games.jsx b/webapp/src/container/Games.jsx
index d9da38c..66d93b8 100644
--- a/webapp/src/container/Games.jsx
+++ b/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() {
-  // TODO: counter Wating for YOU
+function ViewSelector({ games }) {
+  const awaiting = countGames(games.gamesList);
 
   return (
-    <nav className='ViewSelector'>
+    <nav className='ViewSelector' >
       <NavLink to='new'>New</NavLink>
-      <NavLink to='proposal'>Proposal</NavLink>
-      <NavLink to='active'>Active</NavLink>
-      <NavLink to='archive'>Archive</NavLink>
+      <NavLink to='proposal'>Proposal<Counter number={awaiting.proposals} /></NavLink>
+      <NavLink to='active'  >Active<Counter number={awaiting.active} /></NavLink>
+      <NavLink to='archive' >Archive</NavLink>
     </nav>
   )
 }
@@ -102,4 +103,31 @@ function ActionPanel({ players, gamesApi }) {
       </Routes>
     </div>
   )
-}
\ No newline at end of file
+}
+
+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;
+}
diff --git a/webapp/src/container/games/view/GameSelector.css b/webapp/src/container/games/view/GameSelector.css
index c6e46d9..592ed6b 100644
--- a/webapp/src/container/games/view/GameSelector.css
+++ b/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;
diff --git a/webapp/src/container/games/view/GameSelector.jsx b/webapp/src/container/games/view/GameSelector.jsx
index 932991c..11a33f4 100644
--- a/webapp/src/container/games/view/GameSelector.jsx
+++ b/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>
     )
 }
\ No newline at end of file