From b632aa7dc35c11408d1151e053b1d90417202773 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Thu, 9 Nov 2023 18:19:31 +0100
Subject: [PATCH] GameSelector

- single component for GameProposals, ActiveGames and Archive

- clickabple and scrollable
---
 webapp/src/components/Checkers.jsx            | 10 +---
 .../src/container/games/view/ActiveGames.jsx  |  7 ---
 .../container/games/view/GameProposals.jsx    |  7 ---
 .../src/container/games/view/GameSelector.css | 48 +++++++++++++++++
 .../src/container/games/view/GameSelector.jsx | 52 +++++++++++++++++++
 .../src/container/games/view/GamesArchive.jsx |  7 ---
 6 files changed, 102 insertions(+), 29 deletions(-)
 delete mode 100644 webapp/src/container/games/view/ActiveGames.jsx
 delete mode 100644 webapp/src/container/games/view/GameProposals.jsx
 create mode 100644 webapp/src/container/games/view/GameSelector.css
 create mode 100644 webapp/src/container/games/view/GameSelector.jsx
 delete mode 100644 webapp/src/container/games/view/GamesArchive.jsx

diff --git a/webapp/src/components/Checkers.jsx b/webapp/src/components/Checkers.jsx
index 7f7f220..7d0817c 100644
--- a/webapp/src/components/Checkers.jsx
+++ b/webapp/src/components/Checkers.jsx
@@ -110,11 +110,9 @@ export function Board() {
 }
 
 function WhiteTile({ id, stone }) {
-
     return (
-        <div
-            className='Tile white'
-            onClick={() => handleClick(id)}
+        <div className='Tile white'
+            onClick={() => console.log('click', id)}
         >
             {stone}
         </div>
@@ -123,8 +121,4 @@ function WhiteTile({ id, stone }) {
 
 function BlackTile() {
     return <div className='Tile black' />
-}
-
-function handleClick(i) {
-    console.log("click", i)
 }
\ No newline at end of file
diff --git a/webapp/src/container/games/view/ActiveGames.jsx b/webapp/src/container/games/view/ActiveGames.jsx
deleted file mode 100644
index c91ff68..0000000
--- a/webapp/src/container/games/view/ActiveGames.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function ActiveGames() {
-    return (
-        <div>View: ActiveGame</div>
-    )
-}
\ No newline at end of file
diff --git a/webapp/src/container/games/view/GameProposals.jsx b/webapp/src/container/games/view/GameProposals.jsx
deleted file mode 100644
index f487eb1..0000000
--- a/webapp/src/container/games/view/GameProposals.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function GameProposals() {
-    return (
-        <div>View: GameProposals</div>
-    )
-}
\ No newline at end of file
diff --git a/webapp/src/container/games/view/GameSelector.css b/webapp/src/container/games/view/GameSelector.css
new file mode 100644
index 0000000..1722aa6
--- /dev/null
+++ b/webapp/src/container/games/view/GameSelector.css
@@ -0,0 +1,48 @@
+.GameSelector {
+    flex: 1 1 auto;
+    overflow-y: scroll;
+}
+
+.Selectable {
+    border: 1px solid black;
+    margin-bottom: 5px;
+}
+
+.Selectable q {
+    color: gray;
+}
+
+.Selectable i {
+    font-size: 70%;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.Selectable:hover {
+    background-color: #d3d3d360;
+}
+
+/* .Games .li button.action {
+    display: none;
+}
+
+.Games .li:hover button.action {
+    display: initial;
+} */
+
+.Separator {
+    /* width: 20%;  */
+    /* height: 20px;  */
+    border-bottom: 1px dotted black; 
+    text-align: center;
+    font-size: 50%;
+    padding-left: 50%;
+    margin-bottom: 7px;
+}
+
+.Selectable .Title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/webapp/src/container/games/view/GameSelector.jsx b/webapp/src/container/games/view/GameSelector.jsx
new file mode 100644
index 0000000..5578e7c
--- /dev/null
+++ b/webapp/src/container/games/view/GameSelector.jsx
@@ -0,0 +1,52 @@
+import './GameSelector.css';
+import React, { useContext } from 'react';
+import { GamesContext } from '../../../context/games';
+
+import { Color, Player } from '../../../components/Checkers';
+import Loading from '../../../components/Loading';
+
+export default function GameSelector({ yours, opponents, onClick }) {
+
+    const games = useContext(GamesContext);
+    if (games.list === null)
+        return <Loading />
+
+    const yoursList = games.list.filter(game => game.status === yours)
+        .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
+
+    const opponentsList = games.list.filter(game => game.status === opponents)
+        .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
+
+    return (
+        <div className="GameSelector">
+            {yoursList}
+            {opponentsList.length > 0 && <Separator counter={opponentsList.length} />}
+            {opponentsList}
+        </div>
+    )
+}
+
+function Selectable({ game, onClick }) {
+    const myColor = game.myColor;
+    const opponentColor = Color.opposite(myColor);
+    const opponentName = game.opponentName;
+
+    return (
+        <div className='Selectable' onClick={() => onClick(game.uuid)}>
+            <div className='Title'>
+                <Player color={myColor} />
+                <i>vs</i>
+                <Player color={opponentColor} name={opponentName} />
+            </div>
+            <q>{game.message}</q>
+        </div>
+    )
+};
+
+function Separator({ counter }) {
+    return (
+        <div className="Separator">
+            waiting for opponent ({counter})
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/webapp/src/container/games/view/GamesArchive.jsx b/webapp/src/container/games/view/GamesArchive.jsx
deleted file mode 100644
index 302ae09..0000000
--- a/webapp/src/container/games/view/GamesArchive.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function GamesArchive() {
-    return (
-        <div>View: GameArchive</div>
-    )
-}
\ No newline at end of file