webapp/src/App.js

@@ -26,19 +26,14 @@ export default function App() {
   const gamesApi = useGamesApi(dispatchGames);
   gamesApi.list(pollingReducer);
 
-  const players = {
-    leaderboard,
-    isCurrentUser: (playerName) => user?.isCurrentUser(playerName) === true ? true : null
-  };
-
   return (
     <BrowserRouter>
       <Header pollingReducer={pollingReducer} />
       <Routes>
         <Route path='/' element={<About />} />
         <Route path='/about' element={<About />} />
-        <Route path='/games/*' element={<Games context={{ games, dispatchGames, gamesApi }} players={players} />} />
+        <Route path='/games/*' element={<Games games={games} dispatchGames={dispatchGames} gamesApi={gamesApi} />} />
-        <Route path='/leaderboard' element={<Leaderboard players={players} />} />
+        <Route path='/leaderboard' element={<Leaderboard leaderboard={leaderboard} user={user} />} />
       </Routes>
     </BrowserRouter>
   )

webapp/src/components/Checkers.jsx

@@ -110,9 +110,11 @@ export function Board() {
 }
 
 function WhiteTile({ id, stone }) {
+
     return (
-        <div className='Tile white'
+        <div
-            onClick={() => console.log('click', id)}
+            className='Tile white'
+            onClick={() => handleClick(id)}
         >
             {stone}
         </div>
@@ -121,4 +123,8 @@ function WhiteTile({ id, stone }) {
 
 function BlackTile() {
     return <div className='Tile black' />
+}
+
+function handleClick(i) {
+    console.log("click", i)
 }

webapp/src/container/Games.jsx

@@ -21,13 +21,13 @@ import GameBoard from './games/GameBoard';
 
 import { GamesContext, GamesDispatchContext, GamesApiContext } from '../context/games';
 
-export default function Games({ context }) {
+export default function Games({ games, dispatchGames, gamesApi }) {
 
   return (
-    <GamesContext.Provider value={context.games} >
+    <div className="Games">
-      <GamesDispatchContext.Provider value={context.dispatchGames} >
+      <GamesContext.Provider value={games} >
-        <GamesApiContext.Provider value={context.gamesApi} >
+        <GamesDispatchContext.Provider value={dispatchGames} >
-          <div className="Games">
+          <GamesApiContext.Provider value={gamesApi} >
             <div className='left-side'>
               <ViewSelector />
               <ViewProvider />
@@ -39,10 +39,10 @@ export default function Games({ context }) {
           <GameMessage />
           <Message2Opponent /> */}
             </div>
-          </div >
+          </GamesApiContext.Provider>
-        </GamesApiContext.Provider>
+        </GamesDispatchContext.Provider>
-      </GamesDispatchContext.Provider>
+      </GamesContext.Provider>
-    </GamesContext.Provider>
+    </div >
   )
 };
 

webapp/src/container/Leaderboard.jsx

@@ -2,17 +2,18 @@ import './Leaderboard.css';
 import React from "react"
 import Loading from '../components/Loading';
 
-export default function Leaderboard({ players }) {
+export default function Leaderboard({ leaderboard, user }) {
-
-  const leaderboard = players.leaderboard;
 
   if (leaderboard == null)
     return <Loading />
 
+  const isCurrentUser = (playerName) =>
+    user?.isCurrentUser(playerName) === true ? true : null;
+
   const tableRows = Object.keys(leaderboard).map(playerName => {
     var rank = leaderboard[playerName];
 
-    return <tr key={playerName} className={players.isCurrentUser(playerName) && 'currentuser'}>
+    return <tr key={playerName} className={isCurrentUser(playerName) && 'currentuser'}>
       <td>{playerName}</td>
       <td>{rank.gamesPlayed}</td>
       <td>{rank.gamesWon}</td>

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

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

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

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

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

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

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

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