GameSelector

- single component for GameProposals, ActiveGames and Archive

- clickabple and scrollable

webapp/src/components/Checkers.jsx

@@ -110,11 +110,9 @@ export function Board() {
 }
 
 function WhiteTile({ id, stone }) {
-
     return (
-        <div
+        <div className='Tile white'
-            className='Tile white'
+            onClick={() => console.log('click', id)}
-            onClick={() => handleClick(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)
 }

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

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function ActiveGames() {
-    return (
-        <div>View: ActiveGame</div>
-    )
-}

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

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function GameProposals() {
-    return (
-        <div>View: GameProposals</div>
-    )
-}

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;
+}

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>
+    )
+}

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

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function GamesArchive() {
-    return (
-        <div>View: GameArchive</div>
-    )
-}