diff --git a/webapp/src/App.js b/webapp/src/App.js index 7b2264e..9fac52a 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -2,7 +2,7 @@ import './App.css'; import React, { useState, useEffect, useCallback } from 'react'; import { BrowserRouter, - Routes, //replaces "Switch" used till v5 + Routes, Route, } from "react-router-dom"; @@ -14,19 +14,14 @@ function App() { const [games, setGames] = useState(null); const [polling, setPolling] = useState(false); - const pollGames = useCallback(() => { - console.log('start polling..'); - - if (polling) { - console.log(' ..already in progress'); + const pollGames = useCallback(() => { + if (polling) return; - } setPolling(true); fetch('/api/gamestate') .then(response => response.json()) .then(data => { - console.log('poooled'); setGames(data); setPolling(false); }) @@ -34,24 +29,21 @@ function App() { }, [polling]); useEffect(() => { - const timer = setInterval(pollGames(), 35 * 1000); + const timer = setInterval(pollGames(), 35 * 1000); // <<-- poll new gamestates every 35 sec return clearInterval(timer); }, [pollGames]) - return ( -
- -
-
- - } /> - } /> - -
- - + return
+ +
+
+ + } /> + } /> + +
+
- ); } export default App; diff --git a/webapp/src/GameProposal.js b/webapp/src/GameProposal.js index 35a22f4..0c1bf40 100644 --- a/webapp/src/GameProposal.js +++ b/webapp/src/GameProposal.js @@ -16,39 +16,37 @@ const GameProposal = ({games}) => { const waitForYou = games .filter(game => game.status === State.WaitForYou) - .map(game => { return ( -
+ .map(game => { + return

from {game.opponentName}, opponentColor {game.opponentColor}
{game.message}

-
- )}); +
+ }); const WaitForOpponent = games .filter(game => game.status === State.WaitForOpponent) - .map(game => { return ( -
+ .map(game => { + return

to {game.opponentName}, opponentColor ⛀ ⛂{game.opponentColor}
{game.message}

-
- )}); - - return ( -

- {waitForYou} - {WaitForOpponent.length > 0 && -

- waiting for opponent ({WaitForOpponent.length})
- } - {WaitForOpponent} -

- ); + }); + + return
+ {waitForYou} + {WaitForOpponent.length > 0 && +
+ waiting for opponent ({WaitForOpponent.length}) +
+ } + {WaitForOpponent} +
}; export default GameProposal; diff --git a/webapp/src/Leaderboard.js b/webapp/src/Leaderboard.js index f215451..f10c1a1 100644 --- a/webapp/src/Leaderboard.js +++ b/webapp/src/Leaderboard.js @@ -24,40 +24,36 @@ const Leaderboard = () => { // // return
  • // {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw} -//
  • +// // }); // return
      {listItems}
    ; const tableRows = Object.keys(data).map(playerName => { var rank = data[playerName]; - return ( - - {playerName} - {rank.gamesPlayed} - {rank.gamesWon} - {rank.gamesDraw} + return + {playerName} + {rank.gamesPlayed} + {rank.gamesWon} + {rank.gamesDraw} - ); }); - return ( -
    - - - - - - - - - - - { tableRows } - -
    PlayedWonDraw
    + return
    + + + + + + + + + + + { tableRows } + +
    PlayedWonDraw
    - ); }; export default Leaderboard;