webapp/src/App.js

@@ -2,7 +2,7 @@ import './App.css';
 import React, { useState, useEffect, useCallback } from 'react';
 import {
   BrowserRouter,
-  Routes,
+  Routes, //replaces "Switch" used till v5
   Route,
 } from "react-router-dom";
 
@@ -14,14 +14,19 @@ function App() {
   const [games, setGames] = useState(null);
   const [polling, setPolling] = useState(false);
 
-  const pollGames = useCallback(() => {     
-    if (polling)
+  const pollGames = useCallback(() => { 
+    console.log('start polling..');
+    
+    if (polling) {
+      console.log(' ..already in progress');
       return;
+    }
 
     setPolling(true);
     fetch('/api/gamestate')
       .then(response => response.json())
       .then(data => {
+        console.log('poooled');
         setGames(data);
         setPolling(false);
       })
@@ -29,21 +34,24 @@ function App() {
   }, [polling]);
 
   useEffect(() => {
-    const timer = setInterval(pollGames(), 35 * 1000); // <<-- poll new gamestates every 35 sec
+    const timer = setInterval(pollGames(), 35 * 1000);
     return clearInterval(timer);
   }, [pollGames])
 
-  return <div className="App">
-    <BrowserRouter>
-      <Header/>
-      <div className="Container">
-        <Routes>
-          <Route path="/leaderboard" element={<Leaderboard/>} />
-          <Route path="/gameproposal" element={<GameProposal games={games}/>} />
-        </Routes>
-      </div>
-    </BrowserRouter>
+  return (
+    <div className="App">
+      <BrowserRouter>
+        <Header/>
+        <div className="Container">
+          <Routes>
+            <Route path="/leaderboard" element={<Leaderboard/>} />
+            <Route path="/gameproposal" element={<GameProposal games={games}/>} />
+          </Routes>
+        </div>
+
+      </BrowserRouter>
     </div>
+  );
 }
 
 export default App;

webapp/src/GameProposal.css

@@ -15,18 +15,6 @@
     margin: 5px;
 }
 
-.GameProposal .li p q {
-    color: gray;
-}
-
-.GameProposal .li button.action {
-    display: none;
-}
-
-.GameProposal .li:hover button.action {
-    display: initial;
-}
-
 .separator {
     width: 20%; 
     /* height: 20px;  */

webapp/src/GameProposal.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import {Accept, Reject, Cancel} from './GameProposalAction';
 import './GameProposal.css';
 
 const State = {
@@ -17,42 +16,37 @@ const GameProposal = ({games}) => {
    
   const waitForYou = games
     .filter(game => game.status === State.WaitForYou)
-    .map(game => { 
-      return <div class="li" key={game.uuid}>
+    .map(game => { return (
+      <div class="li" key={game.uuid}>
         <p>
-          from {game.opponentName}, opponentColor {game.opponentColor}
-          <br/>
-          <q>{game.message}</q>
-          <br/>
-          <Accept uuid={game.uuid}/>
-          <Reject uuid={game.uuid}/>
+          from {game.opponentName}, opponentColor {game.opponentColor}<br/>
+          <q color="grey">{game.message}</q>
         </p>
-        </div>
-    });
+      </div>
+    )});
 
   const WaitForOpponent = games
     .filter(game => game.status === State.WaitForOpponent)
-    .map(game => { 
-      return <div class="li" key={game.uuid}>
+    .map(game => { return (
+      <div class="li" key={game.uuid}>
         <p> 
-          to {game.opponentName}, opponentColor ⛀ ⛂{game.opponentColor}
-          <br/>
-          <q>{game.message}</q>
-          <br/>
-          <Cancel uuid={game.uuid}/>
+          to {game.opponentName}, opponentColor ⛀ ⛂{game.opponentColor}<br/>
+          <q color="grey">{game.message}</q>
         </p>
-        </div>
-    });
-
-  return <div className="GameProposal">
-    {waitForYou}
-    {WaitForOpponent.length > 0 && 
-      <div class="separator">
-        waiting for opponent ({WaitForOpponent.length})
       </div>
-    }
-    {WaitForOpponent}
-    </div>
+    )});
+
+  return (
+    <p className="GameProposal">
+      {waitForYou}
+      {WaitForOpponent.length > 0 && 
+        <div class="separator">
+          waiting for opponent ({WaitForOpponent.length})
+        </div>
+      }
+      {WaitForOpponent}
+    </p>
+  );
 };
 
 export default GameProposal;

webapp/src/GameProposalAction.js

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export function Accept({uuid}) {
-    return <button className="action" id={uuid} type="submit">
-        Accept
-        </button>
-}
-
-export function Reject({uuid}) {
-    return <button className="action" id={uuid} type="submit">
-        Reject
-        </button>
-}
-
-export function Cancel({uuid}) {
-    return <button className="action" id={uuid} type="submit">
-        Cancel
-        </button>
-}

webapp/src/Leaderboard.js

@@ -24,36 +24,40 @@ const Leaderboard = () => {
 //
 //    return <li key={playerName}>
 //      {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
-//      </li>
+//    </li>
 //  });
 //  return <ul>{listItems}</ul>;
 
   const tableRows = Object.keys(data).map(playerName => {
     var rank = data[playerName];
 
-    return <tr key={playerName}>
-      <td>{playerName}</td>
-      <td>{rank.gamesPlayed}</td>
-      <td>{rank.gamesWon}</td>
-      <td>{rank.gamesDraw}</td>
+    return (
+      <tr key={playerName}>
+        <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>
+  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>
+  );
 };
 
 export default Leaderboard;