backend/src/main/java/djmil/cordacheckers/api/GameStateController.java

@@ -16,7 +16,7 @@ import djmil.cordacheckers.user.User;
 
 
 @RestController
-@RequestMapping("api/gamestate")
+@RequestMapping("api/games")
 public class GameStateController {
 
     @Autowired

webapp/src/App.css

@@ -1,7 +1,51 @@
-.App {
-  text-align: center;
+.Header .OnlineToggle {
+  transform: scale(.5); 
+  margin-left: -19px;
 }
 
-.Container {
-  margin-top: 25px;
+.Header {
+  display: flex;
+}
+
+.Header nav {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+
+  padding-top: 10px;
+}
+
+.Header a {
+  color: black; 
+  text-decoration: none;
+  transition: .25s ease;
+  width: fit-content;
+
+  margin-left: 5px;
+  margin-right: 5px; 
+  padding: 0.25rem 1rem;
+}
+
+.Header .active {
+  color: white;
+  border-radius: 2px;
+  background-color: cadetblue;
+  opacity: 80%;
+  padding: 0.25rem 1rem;
+}
+
+.Header a:hover:not(.active) {
+  color: cadetblue;
+
+  box-shadow: 0 1.5px 0 0 currentcolor;
+}
+
+[data-darkreader-scheme="dark"] .Header a {
+  color: darkslategrey;
+}
+
+[data-darkreader-scheme="dark"] .Header .active {
+  color: white;
+  box-shadow: 0 1.5px 0 0 currentcolor;
 }

webapp/src/App.js

@@ -1,30 +1,76 @@
 import './App.css';
-import React from 'react'
-import { BrowserRouter, Routes, Route } from "react-router-dom"
+import React from 'react';
+import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';
+
+import OnlineToggle from './components/OnlineToggle';
+import Wobler from './components/Wobler';
 
-import Header from "./components/Header"
-import Leaderboard from "./components/Leaderboard"
-import Game from "./components/Game"
 import About from "./components/About"
+import Games from './container/Games';
+import Leaderboard from './container/Leaderboard';
 
-function App() {
+import usePollingReducer from './reducer/polling';
+import useGamesReducer from './reducer/games';
 
-  return <div className="App">
+import useUserApi from './api/user';
+import useLeaderboardApi from './api/leaderboard';
+import useGamesApi from './api/games';
+
+export default function App() {
+  const pollingReducer = usePollingReducer();
+
+  const leaderboard = useLeaderboardApi().poll(pollingReducer);
+  const user = useUserApi().get();
+
+  const [games, dispatchGames] = useGamesReducer();
+  const gamesApi = useGamesApi(dispatchGames);
+  gamesApi.list(pollingReducer);
+
+  const players = {
+    leaderboard,
+    isCurrentUser: (playerName) => user?.isCurrentUser(playerName) === true ? true : null
+  };
+
+  return (
     <BrowserRouter>
-      <Header />
+      <Header pollingReducer={pollingReducer} />
       <Routes>
-        {/* https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router */}
-        <Route path="/game" element={<Game />} />
-        <Route path="/game/new" element={<Game />} />
-        <Route path="/game/proposal" element={<Game />} />
-        <Route path="/game/active" element={<Game />} />
-        <Route path="/game/archive" element={<Game />} />
-
-        <Route path="/leaderboard" element={<Leaderboard />} />
-        <Route path="/about" element={<About />} />
+        <Route path='/' element={<About />} />
+        <Route path='/about' element={<About />} />
+        <Route path='/games/*' element={<Games context={{ games, dispatchGames, gamesApi }} players={players} />} />
+        <Route path='/leaderboard' element={<Leaderboard players={players} />} />
       </Routes>
     </BrowserRouter>
-  </div>
+  )
 }
 
-export default App;
+function Header({ pollingReducer }) {
+  const [polling, dispatchPolling] = pollingReducer;
+
+  return (
+    <div className='Header'>
+      <h1>
+        CordaCheckers
+      </h1>
+
+      <OnlineToggle
+        isOnline={polling.enabled}
+        onClick={() => dispatchPolling({ type: 'toggleOnOff' })}
+      />
+
+      <nav>
+        <NavLink to='/about'>
+          About
+        </NavLink>
+
+        <NavLink to='/games'>
+          <Wobler text="Games" dance={polling.games} />
+        </NavLink>
+
+        <NavLink to='/leaderboard'>
+          <Wobler text='Leaderboard' dance={polling.leaderboard} />
+        </NavLink>
+      </nav>
+    </div>
+  )
+}

webapp/src/api/games.js

@@ -0,0 +1,26 @@
+import usePolling from '../util/Polling';
+
+export default function useGamesApi(dispatchGames) {
+
+    const useList = (pollingReducer) => {
+        const [polling, dispatchPolling] = pollingReducer;
+
+        const onResponce = (json) => {
+            dispatchGames({ type: 'next', list: json });
+        }
+
+        const mode = (polling.enabled === true)
+            ? { interval_sec: 30 }      // fetch gamesList every half a minue
+            : { interval_stop: true }   // user has fliped OfflineToggel
+
+        const isPolling = usePolling('/api/games', onResponce, mode);
+
+        if (isPolling !== polling.games) {
+            dispatchPolling({ type: 'next', games: isPolling });
+        }
+    }
+
+    return {
+        list: useList
+    }
+}

webapp/src/api/leaderboard.js

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import usePolling from "../util/Polling";
+
+export default function useLeaderboardApi() {
+    const [leaderboard, setLeaderboard] = useState(null);
+
+    const usePoll = (pollingReducer) => {
+        const [polling, dispatchPolling] = pollingReducer;
+
+        const mode = (polling.enabled === true)
+            ? { interval_sec: 300 }     // update leaderbord stats every 5 min
+            : { interval_stop: true }   // user has fliped OfflineToggel
+
+        const isPolling = usePolling('/api/leaderboard', setLeaderboard, mode);
+
+        if (isPolling !== polling.leaderboard) {
+            dispatchPolling({ type: 'next', leaderboard: isPolling });
+        }
+
+        return leaderboard;
+    }
+
+    return {
+        poll: usePoll
+    }
+}

webapp/src/api/user.js

@@ -0,0 +1,20 @@
+import usePolling from "../util/Polling";
+import useUserReducer from "../reducer/user";
+
+export default function useUserApi() {
+    const [user, dispatchUser] = useUserReducer();
+
+    const useGet = () => {
+        const onResponce = (json) => {
+            dispatchUser({ type: "parse", json });
+        }
+
+        usePolling('/api/user', onResponce); // <<-- fetch once
+
+        return user;
+    }
+
+    return {
+        get: useGet
+    }
+}

webapp/src/components/Checkers.css

@@ -1,4 +1,15 @@
-.board {
+.Stone {
+    cursor: default; /* disable 'I beam' cursor change */
+}
+
+.Player {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.Board {
     display: flex;
     flex-direction: column;
     justify-content: center; 
@@ -6,7 +17,7 @@
     /* scale: 15%; */
 }
 
-.tile {
+.Tile {
     border: 1px solid #e4e4e4;
     float: left;
     font-size: 200%;
@@ -20,14 +31,14 @@
     text-align: center;
 }
 
-.tile.black {
+.Tile.black {
     background: lightgray;
 }
 
-.tile.white:hover {
+.Tile.white:hover {
     background-color:azure;
 }
 
-.stone {
+.Tile .Stone {
     font-size: 120%;
 } 

webapp/src/components/Checkers.jsx

@@ -0,0 +1,124 @@
+import './Checkers.css'
+import React from 'react'
+
+export const Color = {
+    white: "WHITE",
+    black: "BLACK",
+
+    opposite: (color) => {
+        if (color === Color.white)
+            return Color.black;
+        if (color === Color.black)
+            return Color.white;
+
+        return color;
+    }
+};
+
+/*
+ * Stone
+ */
+export function Stone({ color }) {
+    switch (color) {
+        case Color.white:
+            return WhiteStone();
+
+        case Color.black:
+            return BlackStone();
+
+        default:
+            console.warn("Unknown color: ", color)
+    }
+}
+
+export function WhiteStone() {
+    return <span className="Stone white">⛀</span>
+}
+
+export function BlackStone() {
+    return <span className="Stone black">⛂</span>
+}
+
+/*
+ * Player
+ */
+export function Player({ color, name }) {
+    return (
+        <div className='Player'>
+            <Stone color={color} />
+            {name}
+        </div>
+    )
+}
+
+/*
+ * Board
+ */
+export function Board() {
+
+    return <div className='Board'>
+        <div className='row'>
+            <BlackTile /> <WhiteTile id={0} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={1} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={2} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={4} stone={WhiteStone()} />
+        </div>
+        <div className='row'>
+            <WhiteTile id={5} stone={WhiteStone()} /> <BlackTile />
+            <WhiteTile id={6} stone={WhiteStone()} /> <BlackTile />
+            <WhiteTile id={7} stone={WhiteStone()} /> <BlackTile />
+            <WhiteTile id={8} stone={WhiteStone()} /> <BlackTile />
+        </div>
+        <div className='row'>
+            <BlackTile /> <WhiteTile id={9} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={10} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={11} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={12} stone={WhiteStone()} />
+        </div>
+        <div className='row'>
+            <WhiteTile id={13} stone={null} /> <BlackTile />
+            <WhiteTile id={14} stone={null} /> <BlackTile />
+            <WhiteTile id={15} stone={null} /> <BlackTile />
+            <WhiteTile id={16} stone={null} /> <BlackTile />
+        </div>
+
+        <div className='row'>
+            <BlackTile /> <WhiteTile id={17} stone={null} />
+            <BlackTile /> <WhiteTile id={18} stone={null} />
+            <BlackTile /> <WhiteTile id={19} stone={null} />
+            <BlackTile /> <WhiteTile id={20} stone={null} />
+        </div>
+        <div className='row'>
+            <WhiteTile id={21} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={22} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={23} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={24} stone={BlackStone()} /> <BlackTile />
+        </div>
+        <div className='row'>
+            <BlackTile /> <WhiteTile id={25} stone={BlackStone()} />
+            <BlackTile /> <WhiteTile id={26} stone={BlackStone()} />
+            <BlackTile /> <WhiteTile id={27} stone={BlackStone()} />
+            <BlackTile /> <WhiteTile id={28} stone={BlackStone()} />
+        </div>
+        <div className='row'>
+            <WhiteTile id={29} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={30} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={31} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={32} stone={BlackStone()} /> <BlackTile />
+        </div>
+    </div>
+}
+
+function WhiteTile({ id, stone }) {
+    return (
+        <div className='Tile white'
+            onClick={() => console.log('click', id)}
+        >
+            {stone}
+        </div>
+    );
+}
+
+function BlackTile() {
+    return <div className='Tile black' />
+}

webapp/src/components/DropdownList.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function DropdownList({ selected, onSelect, optionsList }) {
+    const handleSelect = (event) => {
+        onSelect(event.target.value)
+    }
+
+    return (
+        <form className='SelectPlayer'>
+            <select value={selected} onChange={handleSelect}>
+                {optionsList}
+            </select>
+        </form>
+    )
+}

webapp/src/components/Game.css

@@ -1,26 +0,0 @@
-.game {
-    width: 100%;
-    float: left;
-}
-
-.game .left-side {
-    float: left;
-    width: 45%;
-    /* max-width: 400px; */
-
-  /* height: 100px; */
-    display: flex;
-    flex-direction: column;
-    justify-content: center; 
-    align-items: center;
-}
-
-.game .right-side {
-    float: left;
-    width: 55%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center; 
-    align-items: center;
-}

webapp/src/components/Game.jsx

@@ -1,29 +0,0 @@
-import './Game.css';
-import React from 'react';
-import GameView from './Game/GameView'
-import GameSelector from './Game/GameSelector'
-import GameAction from './Game/GameAction'
-import GameBoard from './Game/GameBoard'
-import NewGame from './Game/NewGame'
-import GameMessage from './Game/GameMessage'
-import Message2Opponent from './Game/Message2Opponent'
-
-export default function Game() {
-
-  return (
-    <div className="game">
-      <div className='left-side'>
-        <GameView />
-        <GameSelector />
-        <NewGame />
-      </div>
-      <div className='right-side'>
-        <GameAction />
-        <GameMessage />
-        <GameBoard />
-        <Message2Opponent />
-      </div>
-    </div>
-  )
-
-}

webapp/src/components/Game/GameAction.css

@@ -1,55 +0,0 @@
-.action-panel {
-    margin-bottom: 10px;
-    /* background-color: lightgrey; */
-    width: 100%;
-    /* padding-top: 8px;
-    padding-bottom: 8px; */
-    color: black;
-    padding-left: -10px;
-    /* */
-
-    margin-left: 10px;
-    border: 0.5px dotted lightslategray; 
-}
-
-.game-action {
-    width:fit-content;
-    padding: 8px;
-    padding-left: 15px;
-    padding-right: 15px;
-    border-radius: 5px;
-    border: 0.5px solid darkgrey; 
-    margin: 2px;
-}
-
-.game-action.create:hover,  /* OR */
-.game-action.busy 
-{
-    background-color:#00b0ff60;  
-}
-
-.game-action.create.enabled:active {
-    background-color:#00b0ffa0;  
-}
-
-.game-action.cancel:hover,
-.game-action.reject:hover {
-    background-color:#ff000030
-}
-
-.game-action.cancel:active,
-.game-action.reject:active {
-    background-color:#ff000080
-}
-
-.game-action.accept:hover {
-    background-color: #00af0030;  
-}
-
-.game-action.accept:active {
-    background-color:#00af0080;  
-}
-
-.game-action.disabled {
-    color: gray;
-}

webapp/src/components/Game/GameAction.jsx

@@ -1,45 +0,0 @@
-import './GameAction.css';
-import React from 'react';
-import { useLocation, matchPath } from "react-router";
-
-import Create from './GameAction/Create';
-
-import Reject from './GameAction/Reject';
-import Cancel from './GameAction/Cancel';
-import Accept from './GameAction/Accept';
-
-import DrawReq from './GameAction/DrawReq';
-import DrawAcq from './GameAction/DrawAcq';
-import Surrender from './GameAction/Surrender';
-
-import Backward from './GameAction/Backward';
-import Forward from './GameAction/Forward';
-
-// import { AppContext } from '../../context/app'
-
-export default function GameAction() {
-  // const [ctx, dispatchCtx] = React.useContext(AppContext)
-
-  const { pathname } = useLocation();
-  const isNewGamePath = matchPath("/game/new", pathname);
-  const isProposalPath = matchPath("/game/proposal/*", pathname);
-  const isActivelPath = matchPath("/game/active/*", pathname);
-  const isArchivePath = matchPath("/game/archive/*", pathname);
-
-  return (
-    <div className='action-panel'>
-      {isNewGamePath && <Create />}
-
-      {isProposalPath && <Reject />}
-      {isProposalPath && <Cancel />}
-      {isProposalPath && <Accept />}
-
-      {isActivelPath && <DrawReq />}      
-      {isActivelPath && <DrawAcq />}      
-      {isActivelPath && <Surrender />}
-
-      {isArchivePath && <Backward />}      
-      {isArchivePath && <Forward />}      
-    </div>
-  )
-}

webapp/src/components/Game/GameAction/Backward.jsx

@@ -1,6 +0,0 @@
-import React from 'react';
-
-export default function Backward() {
-
-    return <button className='game-action backward'>Backward</button>
-}

webapp/src/components/Game/GameAction/DrawAcq.jsx

@@ -1,6 +0,0 @@
-import React from 'react';
-
-export default function DrawAcq() {
-
-    return <button className='game-action draw-acq'>Draw acquire</button>
-}

webapp/src/components/Game/GameAction/DrawReq.jsx

@@ -1,6 +0,0 @@
-import React from 'react';
-
-export default function DrawReq() {
-
-    return <button className='game-action drawreq'>Draw request</button>
-}

webapp/src/components/Game/GameAction/Forward.jsx

@@ -1,6 +0,0 @@
-import React from 'react';
-
-export default function Forward() {
-
-    return <button className='game-action forward'>Forward</button>
-}

webapp/src/components/Game/GameAction/Surrender.jsx

@@ -1,6 +0,0 @@
-import React from 'react';
-
-export default function Surrender() {
-
-    return <button className='game-action surrender'>Surrender</button>
-}

webapp/src/components/Game/GameBoard.css

@@ -1,3 +0,0 @@
-.game-board .board {
-    padding: 5px;
-}

webapp/src/components/Game/GameBoard.jsx

@@ -1,20 +0,0 @@
-import './GameBoard.css'
-import React from 'react'
-import Board from './GameBoard/Board'
-import { WHITE, BLACK } from './Stone'
-import { Player } from './Player'
-
-import { AppContext } from '../../context/app'
-
-export default function GameBoard() {
-
-  const [ctx] = React.useContext(AppContext)
-
-  return (
-    <div className='game-board'>
-      <Player color={WHITE()} name={ctx.newGame.whitePlayer} />
-      <Board />
-      <Player color={BLACK()} name={ctx.newGame.blackPlayer} />
-    </div>
-  )
-}

webapp/src/components/Game/GameBoard/Board.jsx

@@ -1,79 +0,0 @@
-import './Board.css';
-import React from 'react';
-
-import { WhiteStone, BlackStone } from '../Stone' 
-
-export default function Board() {
-
-  return <div className='board'>
-    <div className='row'>
-      <BlackTile/> <WhiteTile id={0} stone={WhiteStone()} /> 
-      <BlackTile/> <WhiteTile id={1} stone={WhiteStone()} />
-      <BlackTile/> <WhiteTile id={2} stone={WhiteStone()} />
-      <BlackTile/> <WhiteTile id={4} stone={WhiteStone()} />
-    </div>
-    <div className='row'>
-      <WhiteTile id={5} stone={WhiteStone()} /> <BlackTile/>
-      <WhiteTile id={6} stone={WhiteStone()} /> <BlackTile/>
-      <WhiteTile id={7} stone={WhiteStone()} /> <BlackTile/>
-      <WhiteTile id={8} stone={WhiteStone()} /> <BlackTile/>
-    </div>
-    <div className='row'>
-      <BlackTile/> <WhiteTile id={ 9} stone={WhiteStone()} /> 
-      <BlackTile/> <WhiteTile id={10} stone={WhiteStone()} />
-      <BlackTile/> <WhiteTile id={11} stone={WhiteStone()} />
-      <BlackTile/> <WhiteTile id={12} stone={WhiteStone()} />
-    </div>
-    <div className='row'>
-      <WhiteTile id={13} stone={null} /> <BlackTile/>
-      <WhiteTile id={14} stone={null} /> <BlackTile/>
-      <WhiteTile id={15} stone={null} /> <BlackTile/>
-      <WhiteTile id={16} stone={null} /> <BlackTile/>
-    </div>
-
-    <div className='row'>
-      <BlackTile/> <WhiteTile id={17} stone={null} /> 
-      <BlackTile/> <WhiteTile id={18} stone={null} />
-      <BlackTile/> <WhiteTile id={19} stone={null} />
-      <BlackTile/> <WhiteTile id={20} stone={null} />
-    </div>
-    <div className='row'>
-      <WhiteTile id={21} stone={BlackStone()} /> <BlackTile/>
-      <WhiteTile id={22} stone={BlackStone()} /> <BlackTile/>
-      <WhiteTile id={23} stone={BlackStone()} /> <BlackTile/>
-      <WhiteTile id={24} stone={BlackStone()} /> <BlackTile/>
-    </div>
-    <div className='row'>
-      <BlackTile/> <WhiteTile id={25} stone={BlackStone()} /> 
-      <BlackTile/> <WhiteTile id={26} stone={BlackStone()} />
-      <BlackTile/> <WhiteTile id={27} stone={BlackStone()} />
-      <BlackTile/> <WhiteTile id={28} stone={BlackStone()} />
-    </div>
-    <div className='row'>
-      <WhiteTile id={29} stone={BlackStone()} /> <BlackTile/>
-      <WhiteTile id={30} stone={BlackStone()} /> <BlackTile/>
-      <WhiteTile id={31} stone={BlackStone()} /> <BlackTile/>
-      <WhiteTile id={32} stone={BlackStone()} /> <BlackTile/>
-    </div>
-  </div>
-}
-
-function WhiteTile({ id, stone }) {
-
-  return (
-    <div 
-      className='tile white'
-      onClick={() => handleClick(id)}
-    >
-      {stone}
-    </div>
-  );
-}
-
-function BlackTile() {
-  return <div className='tile black'/>
-}
-
-function handleClick(i) {
-  console.log("click", i)
-}

webapp/src/components/Game/GameMessage.css

@@ -1,6 +0,0 @@
-.game-message {
-    border-radius: 3px;
-    border-color: lightgray;
-    background-color:violet;
-    width: 70%;
-}

webapp/src/components/Game/GameMessage.jsx

@@ -1,15 +0,0 @@
-import './GameMessage.css'
-import React from 'react'
-
-// import { AppContext } from '../../context/app'
-
-export default function GameMessage() {
-
-  // const [ctx] = React.useContext(AppContext)
-
-  return (
-    <div className='game-message'>
-      TBD: Game Message
-    </div>
-  )
-}

webapp/src/components/Game/GameSelector.css

@@ -1,42 +0,0 @@
-.Games {
-    display: flex;
-    flex-direction: column;
-    justify-content: center; 
-    align-items: center;
-    
-}
-
-.Games .li {
-    border: 1px solid black;
-    margin-bottom: 5px;
-}
-
-.Games .li p {
-    margin: 5px;
-}
-
-.Games .li p q {
-    color: gray;
-}
-
-.Games .li p i {
-    font-size: 70%;
-}
-
-.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;
-}

webapp/src/components/Game/GameSelector.jsx

@@ -1,42 +0,0 @@
-import './GameSelector.css';
-import React from 'react';
-import { useLocation, matchPath } from "react-router";
-
-import { AppData } from "../../context/data"
-import { AppContext } from "../../context/app"
-import Proposal from './GameSelector/GameProposal';
-
-export default function GameSelector() {
-  const [data] = React.useContext(AppData)
-  const [/*ctx*/, dispatchCtx] = React.useContext(AppContext)
-
-  const { pathname } = useLocation();
-  const isProposalPath = matchPath("/game/proposal/*", pathname);
-  const isActivelPath  = matchPath("/game/active/*", pathname);
-  const isArchivePath  = matchPath("/game/archive/*", pathname);
-
-  // console.log("GameSelector appCtx", ctx)
-
-  const onClick_proposal = (selectedGame) => {
-    dispatchCtx({ component: "game-selector", selectedGameProposal: selectedGame })
-  }
-
-  // const onClick_active = (selectedGame) => {
-  //   dispatchCtx({ component: "game-selector", selectedActiveGame: selectedGame })
-  // }
-  
-  // const onClick_archive = (selectedGame) => {
-  //   dispatchCtx({ component: "game-selector", selectedArchiveGame: selectedGame })
-  // }
-
-  if (!data.games)
-    return <div>Loading..</div>
-
-  return (
-    <div className='game-selector'>
-      {isProposalPath && <Proposal games={data.games} onClick={onClick_proposal} />}
-      {isActivelPath && <div>TBD #1</div>}
-      {isArchivePath && <div>TBD #2</div>}
-    </div>
-  )
-}

webapp/src/components/Game/GameSelector/ActiveGames.jsx

@@ -1,32 +0,0 @@
-import './ProposalSelector.css'
-import React from 'react';
-import Selectable from './Selectable';
-
-export default function ProposalSelector({ games }) {
-
-  const waitForYou = games
-    .filter(game => game.status === Status.WaitForYou)
-    .map(game => <Selectable game={game} />)
-
-  const WaitForOpponent = games
-    .filter(game => game.status === Status.WaitForOpponent)
-    .map(game => <Selectable game={game} />)
-
-  return <div className="Container">
-    <div className="Games">
-      {waitForYou}
-      {WaitForOpponent.length > 0 &&
-        <div className="separator">
-          waiting for opponent ({WaitForOpponent.length})
-        </div>
-      }
-      {WaitForOpponent}
-    </div>
-  </div>
-};
-
-
-const Status = {
-  WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
-  WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU",
-}

webapp/src/components/Game/GameSelector/GameArchive.jsx

@@ -1,32 +0,0 @@
-import './ProposalSelector.css'
-import React from 'react';
-import Selectable from './Selectable';
-
-export default function ProposalSelector({ games }) {
-
-  const waitForYou = games
-    .filter(game => game.status === Status.WaitForYou)
-    .map(game => <Selectable game={game} />)
-
-  const WaitForOpponent = games
-    .filter(game => game.status === Status.WaitForOpponent)
-    .map(game => <Selectable game={game} />)
-
-  return <div className="Container">
-    <div className="Games">
-      {waitForYou}
-      {WaitForOpponent.length > 0 &&
-        <div className="separator">
-          waiting for opponent ({WaitForOpponent.length})
-        </div>
-      }
-      {WaitForOpponent}
-    </div>
-  </div>
-};
-
-
-const Status = {
-  WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
-  WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU",
-}

webapp/src/components/Game/GameSelector/GameProposal.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import Selectable from './Selectable';
-
-export default function ProposalSelector({ games, onClick }) {
-
-  const waitForYou = games
-    .filter(game => game.status === Status.WaitForYou)
-    .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
-
-  const WaitForOpponent = games
-    .filter(game => game.status === Status.WaitForOpponent)
-    .map(game => <Selectable game={game} key={game.uuid} onClick={onClick} />)
-
-  return (
-    <div className="Games">
-      {waitForYou}
-      {WaitForOpponent.length > 0 &&
-        <div className="separator">
-          waiting for opponent ({WaitForOpponent.length})
-        </div>
-      }
-      {WaitForOpponent}
-    </div>
-  )
-}
-
-const Status = {
-  WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
-  WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU",
-}

webapp/src/components/Game/GameSelector/Selectable.jsx

@@ -1,24 +0,0 @@
-import './Selectable.css'
-import React from 'react';
-import { oppositeColor } from '../Stone';
-import { Player } from '../Player';
-
-export default function Selectable({ game, onClick }) {
-
-  const myColor = game.myColor
-
-  const opponentColor = oppositeColor(myColor)
-  const opponentName = game.opponentName
-
-  return (
-    <div className='selectable'>
-      <div className='title' onClick={() => onClick(game)}>
-        <Player color={myColor} />
-        <i>vs</i>
-        <Player color={opponentColor} name={opponentName} />
-      </div>
-      <q>{game.message}</q>
-    </div>
-  )
-};
-

webapp/src/components/Game/GameView.css

@@ -1,30 +0,0 @@
-.game-view {
-    margin-bottom: 10px;
-    background-color: lightgrey;
-    width: 100%;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    color: black;
-}
-
-.game-view a {
-    color:darkgrey;
-    text-decoration: none;
-    transition: .25s ease;
-    margin-left: 5px;
-    margin-right: 5px;
-}
-
-.game-view .active {
-    color: white;
-    border-radius: 2px;
-    background-color: cadetblue;
-    opacity: 80%;
-    padding-top: 8px;
-    padding-bottom: 8px;
-}
-
-.game-view a:hover:not(.active) {
-    color: cadetblue; 
-    box-shadow: 0 1.5px 0 0 currentColor;
-}

webapp/src/components/Game/GameView.jsx

@@ -1,15 +0,0 @@
-import './GameView.css';
-import React from 'react';
-import { NavLink } from "react-router-dom";
-
-export default function GameView() {
-
-  return (
-    <nav className='game-view'>
-      <NavLink to="/game/new">New</NavLink>
-      <NavLink to="/game/proposal">Proposal</NavLink>
-      <NavLink to="/game/active">Active</NavLink>
-      <NavLink to="/game/archive">Archive</NavLink>
-    </nav>
-  )
-}

webapp/src/components/Game/NewGame.css

@@ -1,17 +0,0 @@
-.new-game {
-    margin-top: 60px;
-}
-
-.new-game * {
-    width: 230px;
-}
-
-.new-game>div { /* first level childs only*/
-    margin-top: 25px;
-    margin-bottom: 25px;
-}
-
-.new-game .stone {
-    font-size: 150%;
-    vertical-align: -3px;
-}

webapp/src/components/Game/NewGame.jsx

@@ -1,72 +0,0 @@
-import './NewGame.css';
-import React from 'react';
-import { AppData } from '../../context/data'
-import { AppContext } from '../../context/app'
-import { useLocation, matchPath } from "react-router";
-import { SelectPlayer } from './Player';
-import { WhiteStone, BlackStone } from './Stone';
-
-
-export default function NewGame() {
-  const [ctx, dispatchCtx] = React.useContext(AppContext)
-  const [data] = React.useContext(AppData)
-  const { pathname } = useLocation();
-  const isMyPath = matchPath("/game/new", pathname);
-
-  if (!isMyPath)
-    return
-
-  /*
-   * Name options
-   */
-  const nameOptions = data.leaderboard ? Object.keys(data.leaderboard).map(playerName =>
-      <option key={playerName} value={playerName}>
-        {data.isCurrentUser(playerName) ? 'You' : playerName}
-      </option>)
-    : [<option key='loading' value='…'>…loading</option>]
-
-  const whiteOptions = Array(nameOptions)
-  whiteOptions.push(<option key='default' value=''>{'white player …'}</option>)
-
-  const blackOptions = Array(nameOptions)
-  blackOptions.push(<option key='default' value=''>{'black player …'}</option>)
-
-  /*
-   * Radiobutton
-   */
-  const radioButton = (whitePlayer, blackPlayer) => {
-    if (whitePlayer !== '' && whitePlayer === ctx.newGame.blackPlayer) {
-      blackPlayer = ''
-    }
-    if (blackPlayer !== '' && blackPlayer === ctx.newGame.whitePlayer) {
-      whitePlayer = ''
-    }
-
-    dispatchCtx({ update: "newGame", whitePlayer, blackPlayer })
-  }
-
-  const setWhitePlayer = (name) => {
-    radioButton(name, ctx.newGame.blackPlayer)
-  }
-
-  const setBlackPlayer = (name) => {
-    radioButton(ctx.newGame.whitePlayer, name)
-  }
-
-  /*
-   * Component
-   */
-  return (
-    <div className='new-game'>
-      <div>
-        <WhiteStone />
-        <SelectPlayer name={ctx.newGame.whitePlayer} setName={setWhitePlayer} nameOptions={whiteOptions} />
-      </div>
-      <div>- vs -</div>
-      <div>
-        <SelectPlayer name={ctx.newGame.blackPlayer} setName={setBlackPlayer} nameOptions={blackOptions} />
-        <BlackStone />
-      </div>
-    </div>
-  )
-}

webapp/src/components/Game/Player.css

@@ -1,15 +0,0 @@
-.player {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
-.player select {
-    border-radius: 5px;
-    border: 0.5px solid darkgrey;
-}
-
-.player select:hover {
-    background: lightgray;
-}

webapp/src/components/Game/Player.jsx

@@ -1,29 +0,0 @@
-import './Player.css'
-import React from 'react'
-import { Stone } from './Stone'
-
-export function Player({ color, name }) {
-
-    return (
-        <div className='player'>
-            <Stone color={color} />
-            {name}
-        </div>
-    )
-}
-
-export function SelectPlayer({ name, setName, nameOptions }) {
-    const handleSelectChange = (event) => {
-        setName(event.target.value)
-    }
-
-    return (
-        <div className='select player'>
-            <form>
-                <select value={name} onChange={handleSelectChange}>
-                    {nameOptions}
-                </select>
-            </form>
-        </div>
-    )
-}

webapp/src/components/Game/Stone.css

@@ -1,3 +0,0 @@
-.stone {
-    cursor: default; /* disable 'I beam' cursor change */
-}

webapp/src/components/Game/Stone.jsx

@@ -1,41 +0,0 @@
-import './Stone.css'
-import React from 'react'
-
-export function Stone({ color }) {
-    switch (color) {
-        case WHITE():
-            return WhiteStone()
-
-        case BLACK():
-            return BlackStone()
-
-        default:
-            console.warn("Unknown color: ", color)
-    }
-}
-
-export function WhiteStone() {
-    return <span className="stone white">⛀</span>
-}
-
-export function BlackStone() {
-    return <span className="stone black">⛂</span>
-}
-
-export function oppositeColor(color) {
-    if (color === WHITE())
-        return BLACK()
-
-    if (color === BLACK())
-        return WHITE()
-
-    return color
-}
-
-export function WHITE() {
-    return "WHITE"
-}
-
-export function BLACK() {
-    return "BLACK"
-}

webapp/src/components/Header.css

@@ -1,51 +0,0 @@
-.OnlineTgl {
-    transform: scale(.5); 
-    margin-left: -19px;
-}
-
-.app-header {
-    display: flex;
-}
-
-.app-header nav {
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    flex-wrap: wrap;
-
-    padding-top: 10px;
-}
-
-.app-header a {
-    color: lightgray;
-    text-decoration: none;
-    transition: .25s ease;
-    width: fit-content;
-
-    margin-left: 5px;
-    margin-right: 5px; 
-    padding: 0.25rem 1rem;
-}
-
-.app-header .active {
-    color: white;
-    border-radius: 2px;
-    background-color: cadetblue;
-    opacity: 80%;
-    padding: 0.25rem 1rem;
-}
-
-.app-header a:hover:not(.active) {
-    color: cadetblue;
-
-    box-shadow: 0 1.5px 0 0 currentcolor;
-}
-
-[data-darkreader-scheme="dark"] .app-header a {
-    color: darkslategrey;
-}
-
-[data-darkreader-scheme="dark"] .app-header .active {
-    color: white;
-    box-shadow: 0 1.5px 0 0 currentcolor;
-}

webapp/src/components/Header.jsx

@@ -1,30 +0,0 @@
-import './Header.css';
-import React from "react"
-import { NavLink } from "react-router-dom";
-import OnlineToggle from './OnlineTgl';
-import { AppData } from "../context/data"
-import Wobler from './Wobler';
-
-export default function Header() {
-  const [data] = React.useContext(AppData)
-
-  return (
-    <div className='app-header'>
-      <h1 >
-        CordaCheckers
-      </h1>
-      <OnlineToggle />
-      <nav>
-        <NavLink to="/about">
-          About
-        </NavLink>
-        <NavLink to="/game">
-          <Wobler text="Game" dance={data.gamesFetching} />
-        </NavLink>
-        <NavLink to="/leaderboard">
-          <Wobler text="Leaderboard" dance={data.leaderboardFetching} />
-        </NavLink>
-      </nav>
-    </div>
-  )
-}

webapp/src/components/Leaderboard/index.jsx

@@ -1,46 +0,0 @@
-import React from "react"
-import './index.css';
-import { AppData } from "../../context/data"
-
-export default function Leaderboard() {
-  const [data] = React.useContext(AppData)
-
-  if (data.leaderboard == null) 
-    return <p>Loading...</p>
-
-//  var listItems = Object.keys(data).map(playerName => {
-//    var rank = data[playerName];
-//
-//    return <li key={playerName}>
-//      {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
-//      </li>
-//  });
-//  return <ul>{listItems}</ul>;
-
-  const tableRows = Object.keys(data.leaderboard).map(playerName => {
-    var rank = data.leaderboard[playerName];
-
-    return <tr key={playerName} className={data.isCurrentUser(playerName) && 'username'}>
-      <td>{playerName}</td>
-      <td>{rank.gamesPlayed}</td>
-      <td>{rank.gamesWon}</td>
-      <td>{rank.gamesDraw}</td>
-      </tr>
-  });
-
-  return <div className="Leaderboard">
-    <table>
-      <thead>
-        <tr>
-          <th></th>
-          <th>Played</th>
-          <th>Won</th>
-          <th>Draw</th>
-        </tr>
-      </thead>
-      <tbody>
-        { tableRows }
-      </tbody>
-    </table>
-    </div>
-};

webapp/src/components/Loading.jsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export default function Loading() {
+    return <div className="Loading">Loading...</div>
+}

webapp/src/components/OnlineTgl/index.jsx

@@ -1,12 +0,0 @@
-import "./index.css"
-import React from "react"
-import { AppData } from "../../context/data"
-
-export default function OnlineTgl() {
-    const [/*appData*/, dispatchData] = React.useContext(AppData)
-
-    return <div className="OnlineTgl">
-            <input className="tgl tgl-flip" id="cb5" type="checkbox" defaultChecked onClick={() => dispatchData({type: "toggleOfflineMode"})}/>
-            <label className="tgl-btn" data-tg-off="offline" data-tg-on="online" htmlFor="cb5"/>
-        </div>
-}

webapp/src/components/OnlineToggle.jsx

@@ -0,0 +1,11 @@
+import "./OnlineToggle.css"
+import React from "react"
+
+export default function OnlineToggle({ isOnline, onClick }) {
+    return (
+        <div className="OnlineToggle">
+            <input className="tgl tgl-flip" id="cb5" type="checkbox" checked={isOnline} onChange={onClick} />
+            <label className="tgl-btn" data-tg-off="offline" data-tg-on="online" htmlFor="cb5" />
+        </div>
+    )
+}

webapp/src/container/Games.css

@@ -0,0 +1,126 @@
+.Games {
+    width: 100%;
+    float: left;
+}
+
+.Games .left-side {
+    float: left;
+    width: 45%;
+    /* max-width: 400px; */
+
+  /* height: 100px; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center; 
+    align-items: center;
+}
+
+.Games .right-side {
+    float: left;
+    width: 55%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center; 
+    align-items: center;
+}
+
+
+
+.ViewSelector {
+    text-align: center;
+    margin-bottom: 10px;
+    background-color: lightgrey;
+    width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: black;
+}
+
+.ViewSelector a {
+    color: black;
+    text-decoration: none;
+    transition: .25s ease;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.ViewSelector .active {
+    color: white;
+    border-radius: 2px;
+    background-color: cadetblue;
+    opacity: 80%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.ViewSelector a:hover:not(.active) {
+    color: cadetblue; 
+    box-shadow: 0 1.5px 0 0 currentColor;
+}
+
+
+
+.ViewProvider {
+    display: flex;
+    flex-flow: column;
+    height: 340px;
+    justify-content: center; 
+    align-items: center;
+}
+
+
+.ActionPanel {
+    text-align: center;
+    margin-bottom: 10px;
+    height: 34.5px;
+
+    /* background-color: lightgrey; */
+    width: 100%;
+    /* padding-top: 8px;
+    padding-bottom: 8px; */
+    color: black;
+    padding-left: -10px;
+    /* */
+
+    margin-left: 10px;
+    border: 0.5px dotted lightslategray; 
+}
+
+.ActionPanel button {
+    width:fit-content;
+    padding: 6px;
+    padding-left: 15px;
+    padding-right: 15px;
+    border-radius: 5px;
+    border: 0.5px solid darkgrey; 
+    margin: 2px;
+}
+
+.ActionPanel .Create:hover,  /* OR */
+.game-action.busy 
+{
+    background-color:#00b0ff60;  
+}
+
+.ActionPanel .Create.enabled:active {
+    background-color:#00b0ffa0;  
+}
+
+.ActionPanel .Cancel:hover,
+.ActionPanel .Reject:hover {
+    background-color:#ff000030
+}
+
+.ActionPanel .Cancel:active,
+.ActionPanel .Reject:active {
+    background-color:#ff000080
+}
+
+.ActionPanel .Accept:hover {
+    background-color: #00af0030;  
+}
+
+.ActionPanel .Accept:active {
+    background-color:#00af0080;  
+}

webapp/src/container/Games.jsx

@@ -0,0 +1,94 @@
+import './Games.css';
+import React from 'react';
+import { NavLink, Routes, Route } from 'react-router-dom';
+
+import NewGame from './games/view/NewGame';
+import GameSelector from './games/view/GameSelector';
+
+import Create from './games/action/Create';
+import Reject from './games/action/Reject';
+import Cancel from './games/action/Cancel';
+import Accept from './games/action/Accept';
+import DrawReq from './games/action/DrawReq';
+import DrawAcq from './games/action/DrawAcq';
+import Surrender from './games/action/Surrender';
+import Backward from './games/action/Backward';
+import Forward from './games/action/Forward';
+
+import GameBoard from './games/GameBoard';
+
+import { GamesContext } from '../context/games';
+
+export default function Games({ context, players }) {
+
+  return (
+    <GamesContext.Provider value={context.games} >
+      <div className='Games'>
+        <div className='left-side'>
+          <ViewSelector />
+          <ViewProvider players={players} dispatchGames={context.dispatchGames} />
+        </div>
+        <div className='right-side'>
+          <ActionPanel />
+          <GameBoard />
+          {/*
+          <GameMessage />
+          <Message2Opponent /> */}
+        </div>
+      </div >
+    </GamesContext.Provider>
+  )
+};
+
+function ViewSelector() {
+  // TODO: counter Wating for YOU
+
+  return (
+    <nav className='ViewSelector'>
+      <NavLink to='new'>New</NavLink>
+      <NavLink to='proposal'>Proposal</NavLink>
+      <NavLink to='active'>Active</NavLink>
+      <NavLink to='archive'>Archive</NavLink>
+    </nav>
+  )
+}
+
+function ViewProvider({ players, dispatchGames }) {
+  return (
+    <div className='ViewProvider'>
+      <Routes>
+
+        <Route path='new' element={
+          <NewGame
+            players={players}
+            onSelectPlayer={(whitePlayer, blackPlayer) => dispatchGames({ type: "next", newGame: { whitePlayer, blackPlayer } })}
+          />
+        } />
+
+        <Route path='proposal' element={
+          <GameSelector
+            yours='GAME_PROPOSAL_WAIT_FOR_YOU'
+            opponents='GAME_PROPOSAL_WAIT_FOR_OPPONENT'
+            onClick={(uuid) => console.log("GameProposal", uuid)}
+          />
+        } />
+
+        <Route path='active' element={<GameSelector />} />
+        <Route path='archive' element={<GameSelector />} />
+      </Routes>
+    </div>
+  )
+}
+
+function ActionPanel() {
+  return (
+    <div className='ActionPanel'>
+      <Routes>
+        <Route path='new' element={<Create />} />
+        <Route path='proposal' element={[<Accept key={1} />, <Reject key={2} />, <Cancel key={3} />]} />
+        <Route path='active' element={[<DrawReq key={1} />, <DrawAcq key={2} />, <Surrender key={3} />]} />
+        <Route path='archive' element={[<Backward key={1} />, <Forward key={2} />]} />
+      </Routes>
+    </div>
+  )
+}

webapp/src/container/Leaderboard.css

@@ -4,6 +4,6 @@
   align-items: center;
 }
 
-tr.username {
+tr.currentuser {
   background-color:aliceblue;
 }

webapp/src/container/Leaderboard.jsx

@@ -0,0 +1,40 @@
+import './Leaderboard.css';
+import React from "react"
+import Loading from '../components/Loading';
+
+export default function Leaderboard({ players }) {
+
+  const leaderboard = players.leaderboard;
+
+  if (leaderboard == null)
+    return <Loading />
+
+  const tableRows = Object.keys(leaderboard).map(playerName => {
+    var rank = leaderboard[playerName];
+
+    return <tr key={playerName} className={players.isCurrentUser(playerName) && 'currentuser'}>
+      <td>{playerName}</td>
+      <td>{rank.gamesPlayed}</td>
+      <td>{rank.gamesWon}</td>
+      <td>{rank.gamesDraw}</td>
+    </tr>
+  });
+
+  return (
+    <div className="Leaderboard">
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>Played</th>
+            <th>Won</th>
+            <th>Draw</th>
+          </tr>
+        </thead>
+        <tbody>
+          {tableRows}
+        </tbody>
+      </table>
+    </div>
+  )
+};

webapp/src/container/games/GameBoard.css

@@ -0,0 +1,3 @@
+.GameBoard .Board {
+    padding: 5px;
+}

webapp/src/container/games/GameBoard.jsx

@@ -0,0 +1,20 @@
+import './GameBoard.css'
+import React from 'react'
+
+import { Color, Player, Board } from '../../components/Checkers';
+
+//import { AppContext } from '../../context/app'
+
+export default function GameBoard() {
+
+
+  //const [ctx] = React.useContext(AppContext)
+
+  return (
+    <div className='GameBoard'>
+      <Player color={Color.white} name={/*ctx.newGame.whitePlayer*/"White player name"} />
+      <Board />
+      <Player color={Color.black} name={/*ctx.newGame.blackPlayer*/"Black player name"} />
+    </div>
+  )
+}

webapp/src/container/games/action/Accept.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function Accept() {
 
-    return <button className='game-action accept'>Accept</button>
+    return <button className='Accept'>Accept</button>
 }

webapp/src/container/games/action/Backward.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Backward() {
+
+    return <button className='Backward' disabled>Backward</button>
+}

webapp/src/container/games/action/Cancel.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function Cancel() {
 
-    return <button className='game-action cancel'>Cancel</button>
+    return <button className='Cancel'>Cancel</button>
 }

webapp/src/container/games/action/Create.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Create() {
+
+    return <button className='Create'>Create</button>
+}

webapp/src/container/games/action/DrawAcq.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function DrawAcq() {
+
+    return <button className='DrawAcq'>Draw accept</button>
+}

webapp/src/container/games/action/DrawReq.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function DrawReq() {
+
+    return <button className='DrawReq'>Draw request</button>
+}

webapp/src/container/games/action/Forward.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Forward() {
+
+    return <button className='Forward' disabled>Forward</button>
+}

webapp/src/container/games/action/Reject.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function Reject() {
 
-    return <button className='game-action reject'>Reject</button>
+    return <button className='Reject'>Reject</button>
 }

webapp/src/container/games/action/Surrender.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Surrender() {
+
+    return <button className='Surrender'>Surrender</button>
+}

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

@@ -1,19 +1,24 @@
-.selectable {
+.GameSelector {
+    flex: 1 1 auto;
+    overflow-y: scroll;
+}
+
+.Selectable {
     border: 1px solid black;
     margin-bottom: 5px;
 }
 
-.selectable q {
+.Selectable q {
     color: gray;
 }
 
-.selectable i {
+.Selectable i {
     font-size: 70%;
     margin-left: 5px;
     margin-right: 5px;
 }
 
-.selectable:hover {
+.Selectable:hover {
     background-color: #d3d3d360;
 }
 
@@ -25,7 +30,7 @@
     display: initial;
 } */
 
-.separator {
+.Separator {
     /* width: 20%;  */
     /* height: 20px;  */
     border-bottom: 1px dotted black; 
@@ -35,7 +40,7 @@
     margin-bottom: 7px;
 }
 
-.selectable .title {
+.Selectable .Title {
     display: flex;
     flex-direction: row;
     align-items: 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/NewGame.css

@@ -0,0 +1,13 @@
+.NewGame * {
+    /* all childs */
+    width: 200px;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+}
+
+.NewGame>i {
+    /* first level childs only*/
+    margin-top: 25px;
+    margin-bottom: 25px;
+}

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

@@ -0,0 +1,62 @@
+import './NewGame.css'
+import React, { useContext } from 'react';
+import { GamesContext } from '../../../context/games';
+
+import DropdownList from '../../../components/DropdownList';
+import { WhiteStone, BlackStone } from '../../../components/Checkers';
+
+export default function NewGame({ players, onSelectPlayer }) {
+    const games = useContext(GamesContext);
+
+    /*
+     * Name options
+     */
+    const nameOptions = !players.leaderboard
+        ? [<option key='loading' value='…'>…loading</option>]
+        : Object.keys(players.leaderboard).map(playerName =>
+            <option key={playerName} value={playerName}>
+                {players.isCurrentUser(playerName) ? 'You' : playerName}
+            </option>)
+
+    const whiteOptions = Array(nameOptions)
+    whiteOptions.push(<option key='default' value=''>{'white player …'}</option>)
+
+    const blackOptions = Array(nameOptions)
+    blackOptions.push(<option key='default' value=''>{'black player …'}</option>)
+
+    /*
+     * Radiobutton
+     */
+    const radioButton = (whitePlayer, blackPlayer) => {
+        if (whitePlayer !== '' && whitePlayer === games.newGame.blackPlayer) {
+            blackPlayer = '';
+        }
+        if (blackPlayer !== '' && blackPlayer === games.newGame.whitePlayer) {
+            whitePlayer = '';
+        }
+
+        console.log("WhitePlayer", whitePlayer, "BlackPlayer", blackPlayer);
+        onSelectPlayer(whitePlayer, blackPlayer);
+    }
+
+    const setWhitePlayer = (name) => {
+        radioButton(name, games.newGame.blackPlayer);
+    }
+
+    const setBlackPlayer = (name) => {
+        radioButton(games.newGame.whitePlayer, name);
+    }
+
+    /*
+     * The Component
+     */
+    return (
+        <div className='NewGame'>
+            <WhiteStone />
+            <DropdownList selected={games.newGame.whitePlayer} onSelect={setWhitePlayer} optionsList={whiteOptions} />
+            <i>- vs -</i>
+            <DropdownList selected={games.newGame.blackPlayer} onSelect={setBlackPlayer} optionsList={blackOptions} />
+            <BlackStone />
+        </div>
+    )
+}

webapp/src/context/app/index.jsx

@@ -1,17 +0,0 @@
-import React from "react"
-import { reducer, initialState } from "./reducer"
-
-export const AppContext = React.createContext({
-  state: initialState,
-  dispatch: () => null
-})
-
-export const AppContextProvider = ({ children }) => {
-  const [state, dispatch] = React.useReducer(reducer, initialState)
-
-  return (
-    <AppContext.Provider value={[ state, dispatch ]}>
-    	{ children }
-    </AppContext.Provider>
-  )
-}

webapp/src/context/app/reducer.js

@@ -1,84 +0,0 @@
-export const reducer = (state, action) => {
-
-  switch (action.update) {
-
-    case "game-selector":
-      return GameSelector_update(state, action)
-
-    case "newGame":
-      return updateNewGame(state, action)
-
-    default:
-      console.warn("Unknown action.component", action.component)
-      return state
-  }
-}
-
-export const initialState = {
-  gameSelector: {
-    selectedGameProposal: null,
-    selectedActiveGame: null,
-    selectedArchiveGame: null,
-  },
-
-  newGame: {
-    whitePlayer: '',
-    blackPlayer: '',
-    message: '',
-    fetching: false,
-  },
-
-}
-
-function GameSelector_update(state, action) {
-  if (Object.hasOwn(action, 'selectedGameProposal')) {
-    return {
-      ...state,
-      gameSelector: {
-        ...state.gameSelector,
-        selectedGameProposal: action.selectedGameProposal
-      }
-    }
-  }
-
-  if (Object.hasOwn(action, 'selectedActiveGame')) {
-    return {
-      ...state,
-      gameSelector: {
-        ...state.gameSelector,
-        selectedActiveGame: action.selectedActiveGame
-      }
-    }
-  }
-
-  if (Object.hasOwn(action, 'selectedArchiveGame')) {
-    return {
-      ...state,
-      gameSelector: {
-        ...state.gameSelector,
-        selectedArchiveGame: action.selectedArchiveGame
-      }
-    }
-  }
-
-  console.warn(action.component, "- bad property")
-}
-
-function updateNewGame(state, action) {
-  const newGame = {...state.newGame}
-
-  Object.keys(action)
-  .slice(1) // skip 'update' property
-  .forEach(actionKey => {
-    if (Object.hasOwn(newGame, actionKey)) {
-      newGame[actionKey] = action[actionKey]
-    } else {
-      console.warn("NewGame update: bad action property\n", actionKey + ":", action[actionKey])
-    }
-  })
-
-  return {
-    ...state,
-    newGame
-  }
-}

webapp/src/context/data/Poll.js

@@ -1,46 +0,0 @@
-import { useState, useCallback, useEffect,  } from "react"
-
-/*
-  TODO: Poll(uri, flavour)
-  - uri: string
-  - execution_flvour:
-    - once (i.e. now)
-    - interval (sec)
-    - stop
-*/
-
-export default function Poll(url, interval_sec, offlineMode) {
-    const [dataCache, setDataCache] = useState(null)
-    const [fetching , setFetching ] = useState(false)
-    const [timeoutID, setTimeoutID] = useState(null)
-
-    const fecthData = useCallback(() => {
-        setTimeoutID(null)
-        setFetching(true)
-
-        fetch(url)
-            .then((response) => {
-                setFetching(false)
-                return response.json()
-            })
-            .then((freshData) => setDataCache(freshData))
-            .catch((err) => console.log(err.message))
-    }, [url])
-
-    useEffect(() => {
-        if (dataCache == null) {
-            fecthData()  // <<-- run immediatly on startup
-        }
-        else if (offlineMode === true) {
-            clearTimeout(timeoutID) // cancel already scheduled fetch
-            setTimeoutID(null)      // & stop interval fetching
-        }
-        else if (timeoutID === null && typeof interval_sec === 'number') {
-            const timeoutID = setTimeout(fecthData, interval_sec * 1000)
-            setTimeoutID(timeoutID)
-            console.log("Fetch '" +url +"' scheduled in " +interval_sec +" sec")
-        }
-    }, [url, dataCache, fecthData, timeoutID, offlineMode, interval_sec]);
-
-    return [ dataCache, fetching ]
-}

webapp/src/context/data/index.jsx

@@ -1,40 +0,0 @@
-import React from "react"
-import { reducer, initialState } from "./reducer"
-
-import Poll from "./Poll"
-
-export const AppData = React.createContext({
-  state: initialState,
-  dispatch: () => null
-})
-
-export const AppDataProvider = ({ children }) => {
-
-  const [data, dispatchData] = React.useReducer(reducer, initialState)
-
-  const [games,       gamesFetching       ] = Poll('/api/gamestate'  , 30, data.offlineMode)
-  const [leaderboard, leaderboardFetching ] = Poll('/api/leaderboard', 60, data.offlineMode)
-  const [user] = Poll('/api/user') // once
-
-  data.games         = games
-  data.gamesFetching = gamesFetching
-
-  data.leaderboard         = leaderboard
-  data.leaderboardFetching = leaderboardFetching
-
-  data.isCurrentUser = (otherUsername) => {
-    return user?.username && ciEquals(user.username, otherUsername) ? true : null
-  }
-  
-  return (
-    <AppData.Provider value={[data, dispatchData]}>
-      {children}
-    </AppData.Provider>
-  )
-}
-
-function ciEquals(a, b) {
-  return typeof a === 'string' && typeof b === 'string'
-      ? a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0
-      : a === b;
-}

webapp/src/context/data/reducer.js

@@ -1,25 +0,0 @@
-export const reducer = (state, action) => {
-  switch (action.type) {
-
-    case "toggleOfflineMode":
-      return { ...state,
-        offlineMode: !state.offlineMode // on/off
-      }
-
-    default:
-      console.warn("Unknown action.type", action)
-      return state
-  }
-}
-  
-export const initialState = { 
-  games: null,
-  gamesFetching: false,
-
-  leaderboard: null,
-  leaderboardFetching: false,
-  
-  isCurrentUser: () => null,
-
-  offlineMode: false
-}

webapp/src/context/games.jsx

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+export const GamesContext = createContext(null);
+
+// export const Games = React.createContext({
+//   state: initialState,
+//   dispatch: () => null
+// })
+
+// export const GamesProvider = ({ children }) => {
+//   const [state, dispatch] = React.useReducer(reducer, initialState)
+
+//   return (
+//     <Games.Provider value={[ state, dispatch ]}>
+//     	{ children }
+//     </Games.Provider>
+//   )
+// }

webapp/src/index.js

@@ -3,18 +3,11 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
 import App from './App';
-import { AppDataProvider } from "./context/data"
-import { AppContextProvider } from "./context/app"
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-
   <React.StrictMode>
-    <AppContextProvider>
-      <AppDataProvider>
-        <App />
-      </AppDataProvider>
-    </AppContextProvider>
+    <App />
   </React.StrictMode>
 );
 

webapp/src/reducer/games.js

@@ -0,0 +1,26 @@
+import { useReducer } from 'react';
+import { nextState } from '../util/StateHelper';
+
+export const gamesInitialState = {
+  list: null,
+
+  newGame: {
+    whitePlayer: '',
+    blackPlayer: ''
+  }
+};
+
+export function gamesReducer(state, action) {
+  switch (action.type) {
+
+    case 'next': 
+      return nextState(state, action);
+
+    default:
+      throw Error('GamesReducer: unknown action.type', action.type);
+  }
+}
+
+export default function useGamesReducer() {
+  return useReducer(gamesReducer, gamesInitialState);
+}

webapp/src/reducer/polling.js

@@ -0,0 +1,39 @@
+import { useReducer } from 'react';
+import { useLocalStorage } from '../util/PersistentStorage';
+import { nextState } from '../util/StateHelper';
+
+const Persistent = (() => {
+  const [getEnabled, setEnabled] = useLocalStorage('polling.enabled', true);
+
+  return {
+    getEnabled,
+    setEnabled
+  }
+})(); // <<--- Execute
+
+export const pollingInitialState = {
+  enabled: Persistent.getEnabled() === 'true',
+
+  games: false,
+  leaderboard: false
+};
+
+export function pollingReducer(curntState, action) {
+  switch (action.type) {
+
+    case 'toggleOnOff': return {
+      ...curntState,
+      enabled: Persistent.setEnabled(!curntState.enabled)
+    };
+
+    case 'next':
+      return nextState(curntState, action);
+
+    default:
+      throw Error('Unknown action.type:' + action.type);
+  }
+}
+
+export default function usePollingReducer() {
+  return useReducer(pollingReducer, pollingInitialState);
+}

webapp/src/reducer/user.js

@@ -0,0 +1,28 @@
+import { useReducer } from 'react';
+import { localeCompare } from '../util/Locale';
+
+export const userInitialState = {
+  username: '',
+
+  isCurrentUser: function (otherUsername) {
+    return localeCompare(this.username, otherUsername)
+  }
+};
+
+export function userReducer(state, action) {
+  switch (action.type) {
+
+    case 'parse':
+      return {
+        ...state,
+        username: action.json.username
+      };
+
+    default:
+      throw Error('UserReducer: unknown action.type', action.type);
+  }
+}
+
+export default function useUserReducer() {
+  return useReducer(userReducer, userInitialState);
+}

webapp/src/util/Locale.js

@@ -0,0 +1,6 @@
+export function localeCompare(a, b) {
+    // console.log(localeCompare, a, b);
+    return typeof a === 'string' && typeof b === 'string'
+        ? a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0
+        : a === b;
+}

webapp/src/util/PersistentStorage.js

@@ -0,0 +1,31 @@
+export function useLocalStorage(name, initialValue) {
+
+    const get = () => localStorage.getItem(name);
+    const del = () => localStorage.removeItem(name);
+    const set = (value) => { 
+        localStorage.setItem(name, value); 
+        return value;
+    }
+
+    if (get() === null) {
+        set(initialValue);
+    }
+
+    return [get, set, del]
+}
+
+export function useSessionStorage(name, initialValue) {
+
+    const get = () => sessionStorage.getItem(name);
+    const del = () => sessionStorage.removeItem(name);
+    const set = (value) => { 
+        sessionStorage.setItem(name, value); 
+        return value;
+    }
+
+    if (get() === null) {
+        set(initialValue);
+    }
+
+    return [get, set, del]
+}

webapp/src/util/Polling.js

@@ -0,0 +1,55 @@
+import { useState, useCallback, useEffect, } from "react"
+
+/*
+  - uri: string
+  - mode:
+    - null  - default, fetch data ONCE
+    - interval_sec
+    - interval_stop
+*/
+
+export default function usePolling(uri, onResponce, mode = null) {
+    const [initialPoll, setInitialPoll] = useState(true);
+    const [isPolling, setPolling] = useState(false);
+    const [intervalTimer, setIntervalTimer] = useState(null);
+
+    const pollData = useCallback(() => {
+        setPolling(true);
+        setInitialPoll(false);
+
+        fetch(uri)
+            .then((responce) => {
+                setPolling(false);
+
+                if (typeof mode?.interval_sec === 'number') {
+                    console.log("Schedule", uri, "fetch in", mode.interval_sec, "sec");
+                    const intervalTimer = setTimeout(pollData, mode.interval_sec * 1000);
+                    setIntervalTimer(intervalTimer);
+                }
+
+                return responce.json();
+            })
+            .then((json) => {
+                onResponce(json);
+            })
+            .catch((err) => {
+                console.warn(err.message);
+            })
+    }, [uri, mode, onResponce]);
+
+    useEffect(() => {
+        if ((initialPoll || (typeof mode?.interval_sec === 'number' && intervalTimer === null)) && !isPolling) {
+            pollData();
+        }
+    }, [initialPoll, mode, intervalTimer, isPolling, pollData]);
+
+    if (mode?.interval_stop && intervalTimer) {
+        console.log("Cancel scheduled fetch for", uri);
+        clearTimeout(intervalTimer);
+        setIntervalTimer(null);
+        setInitialPoll(true);
+    }
+
+
+    return isPolling;
+}

webapp/src/util/StateHelper.js

@@ -0,0 +1,22 @@
+export function nextState(state, action) {
+    const nextState = { ...state };
+
+    Object.keys(action)
+        .slice(1) // skip first property i.e. 'next'
+        .forEach(key => {
+            if (Object.hasOwn(nextState, key)) {
+                console.log("next [", key, "] = ", action[key]);
+                nextState[key] = action[key];
+            } else {
+                console.warn("nextState: bad action property\n", key + ":", action[key]);
+            }
+        })
+
+    return nextState;
+}
+
+const StateHelper = {
+    next: nextState
+};
+
+export default StateHelper;