just making sure to have a backup online

RaceTimer/racetimer_endpoints/src/main/java/DTO/MapBoardDTO.java

@@ -15,6 +15,7 @@ public class MapBoardDTO {
 
     private String steamID;
     private String name;
+    private String avatar;
     private int mapPoint;
     private int mapTimeMinutes;
     private float mapTimeSeconds;
@@ -23,9 +24,10 @@ public class MapBoardDTO {
     public MapBoardDTO() {
     }
 
-    public MapBoardDTO(MapValues mapvalue, String name) {
+    public MapBoardDTO(MapValues mapvalue, String name, String avatar) {
         this.steamID = mapvalue.getPlayerSteamID();
         this.name = name;
+        this.avatar = avatar;
         this.mapPoint = mapvalue.getMapPoints();
         this.mapTimeMinutes = (int) Math.floor(mapvalue.getTime());
         this.mapTimeSeconds = (float) (mapvalue.getTime() - Math.floor(mapvalue.getTime())) * 100;

RaceTimer/racetimer_endpoints/src/main/java/DTO/MapBoardDTO2.java

@@ -0,0 +1,43 @@
+/*
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+package DTO;
+
+import facade.Facade;
+
+/**
+ *
+ * @author install1
+ */
+public class MapBoardDTO2 {
+
+    private String mapname;
+    private int mapstage;
+
+    public String getMapname() {
+        return mapname;
+    }
+
+    public void setMapname(String mapname) {
+        this.mapname = mapname;
+    }
+
+    public int getMapstage() {
+        return mapstage;
+    }
+
+    public void setMapstage(int mapstage) {
+        this.mapstage = mapstage;
+    }
+
+    public MapBoardDTO2() {
+    }
+
+    public MapBoardDTO2(String mapname, int mapstage) {
+        this.mapname = mapname;
+        this.mapstage = mapstage;
+    }
+
+}

RaceTimer/racetimer_endpoints/src/main/java/DTO/PlayerMapBoardDTO.java

@@ -7,8 +7,10 @@ package DTO;
 
 import entity.MapBoard;
 import entity.MapValues;
+import facade.Facade;
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Map;
 import java.util.regex.Matcher;
 import java.util.regex.Pattern;
 
@@ -33,24 +35,13 @@ public class PlayerMapBoardDTO {
         this.steamID = steamID;
     }
 
-    public void addMapValues(MapValues mapvalue, String mapName) {
+    public void addMapValues(MapValues mapvalue, String mapName, int stage) {
-        Pattern pattern = Pattern.compile("S(\\d+)");
-        Matcher matcher = pattern.matcher(mapName);
-        String map = "";
-        int stage = 1; //0
-        if (matcher.find()) {
-            String group = matcher.group();
-            map = mapName.substring(0, mapName.indexOf(group));
-            stage = Integer.valueOf(group.substring(1));
-        } else {
-            map = mapName;
-        }
         this.steamID = mapvalue.getPlayerSteamID();
         this.mapPoint = mapvalue.getMapPoints();
         this.mapTimeMinutes = (int) Math.floor(mapvalue.getTime());
         this.mapTimeSeconds = (float) (mapvalue.getTime() - Math.floor(mapvalue.getTime())) * 100;
         this.position = mapvalue.getPosition();
-        this.mapname = map;
+        this.mapname = mapName;
         this.mapstage = stage;
     }
 

RaceTimer/racetimer_endpoints/src/main/java/DataMapper/DataMapperCalls.java

@@ -27,7 +27,8 @@ public class DataMapperCalls {
 
     public static Map.Entry<Collection<Player>, Collection<MapBoard>> getAllValues() {
         Collection<Player> allPlayers = new ArrayList();
-        //add mapvalues
+        //remove limitfetch eventually
+
         ConcurrentMap<String, MapBoard> allMapBoards = new MapMaker().concurrencyLevel(4).makeMap();
         String sqlQuery = "SELECT * FROM `zetimer_table`";
         int limitfetch = 0;
@@ -35,7 +36,7 @@ public class DataMapperCalls {
             try (PreparedStatement ps = con.prepareStatement(sqlQuery)) {
                 try (ResultSet result = ps.executeQuery()) {
                     int fetchSize = result.getMetaData().getColumnCount();
-                    while (result.next() && limitfetch < 25) {
+                    while (result.next() /*&& limitfetch < 25*/) {
                         int timesCounter = 0;
                         Player player = new Player(result.getString(1), result.getString(2));
                         int i = 3;
@@ -48,7 +49,7 @@ public class DataMapperCalls {
                             if (specificDouble > 0.000) {
                                 timesCounter++;
                                 MapValues mapValue = new MapValues();
-                                mapValue.setPlayerSteamID(player);
+                                mapValue.setPlayerSteamID(player.getSteamID());
                                 mapValue.setTime((float) specificDouble);
                                 allMapBoards.get(columnLabel).getMapvalues().add(mapValue);
                             }

RaceTimer/racetimer_endpoints/src/main/java/entity/MapValues.java

@@ -71,8 +71,8 @@ public class MapValues implements Serializable {
         return playerSteamID;
     }
 
-    public void setPlayerSteamID(Player player) {
+    public void setPlayerSteamID(String steamID) {
-        this.playerSteamID = player.getSteamID();
+        this.playerSteamID = steamID;
     }
 
     public float getTime() {

RaceTimer/racetimer_endpoints/src/main/java/facade/Facade.java

@@ -1,6 +1,7 @@
 package facade;
 
 import DTO.MapBoardDTO;
+import DTO.MapBoardDTO2;
 import DTO.PlayerMapBoardDTO;
 import DTO.PlayerDTO;
 import DataMapper.DataMapperCalls;
@@ -13,15 +14,20 @@ import java.net.MalformedURLException;
 import java.net.URL;
 import java.time.Duration;
 import java.time.Instant;
+import java.util.AbstractMap;
 import java.util.ArrayList;
 import java.util.Collection;
+import java.util.Collections;
 import java.util.Comparator;
 import java.util.List;
+import java.util.Map;
 import java.util.Map.Entry;
 import java.util.concurrent.ConcurrentMap;
 import java.util.concurrent.TimeUnit;
 import java.util.logging.Level;
 import java.util.logging.Logger;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
 import javax.persistence.EntityManager;
 import javax.persistence.Query;
 import org.json.JSONArray;
@@ -43,17 +49,44 @@ public class Facade {
         initSetup = 1;
     }
 
+    public List<MapBoardDTO2> getAllMaps() {
+        List<String> arrnames = new ArrayList(mapBoardCache.keySet());
+        Collections.sort(arrnames);
+        List<MapBoardDTO2> arrMaps = new ArrayList();
+        for (String str : arrnames) {
+            Map.Entry<String, Integer> getMapnameAndStage = GetMapnameAndStage(str);
+            arrMaps.add(new MapBoardDTO2(getMapnameAndStage.getKey(), getMapnameAndStage.getValue()));
+        }
+        return arrMaps;
+    }
+
+    public Entry<String, Integer> GetMapnameAndStage(String mapName) {
+        Pattern pattern = Pattern.compile("S(\\d+)");
+        Matcher matcher = pattern.matcher(mapName);
+        String map = "";
+        int stage = 1; //0
+        if (matcher.find()) {
+            String group = matcher.group();
+            map = mapName.substring(0, mapName.indexOf(group));
+            stage = Integer.valueOf(group.substring(1));
+        } else {
+            map = mapName;
+        }
+        return new AbstractMap.SimpleEntry(map, stage);
+    }
+
     public List<MapBoardDTO> getSpecificMap(String mapname, int stage) {
         List<MapBoardDTO> returnlist = new ArrayList();
         String mapRetrieved = mapname + "S" + stage;
         MapBoard mapBoard = mapBoardCache.getOrDefault(mapRetrieved, null);
-        if (mapBoard == null){
+        if (mapBoard == null) {
             mapRetrieved = mapname;
             mapBoard = mapBoardCache.get(mapRetrieved);
         }
         List<MapValues> mapvalues = mapBoard.getMapvalues();
         for (MapValues mapvalue : mapvalues) {
-            returnlist.add(new MapBoardDTO(mapvalue, playerCache.get(mapvalue.getPlayerSteamID()).getName()));
+            String avatar = playerCache.get(mapvalue.getPlayerSteamID()).getAvatar();
+            returnlist.add(new MapBoardDTO(mapvalue, playerCache.get(mapvalue.getPlayerSteamID()).getName(), avatar));
         }
         return returnlist;
     }
@@ -64,7 +97,8 @@ public class Facade {
             List<PlayerMapBoardDTO> playerMapBoardDtos = new ArrayList();
             for (Entry<String, MapValues> entries : playerMaps.entrySet()) {
                 PlayerMapBoardDTO mapBoardDto = new PlayerMapBoardDTO(steamid);
-                mapBoardDto.addMapValues(entries.getValue(), entries.getKey());
+                Map.Entry<String, Integer> getMapnameAndStage = GetMapnameAndStage(entries.getKey());
+                mapBoardDto.addMapValues(entries.getValue(), getMapnameAndStage.getKey(), getMapnameAndStage.getValue());
                 playerMapBoardDtos.add(mapBoardDto);
             }
             return playerMapBoardDtos;
@@ -74,30 +108,25 @@ public class Facade {
     }
 
     public PlayerDTO getPlayer(String steamid) {
-        EntityManager em = PuSelector.getEntityManagerFactory("pu").createEntityManager();
+        return new PlayerDTO(playerCache.get(steamid));
-        try {
-            Query query = em.createQuery("SELECT a FROM Player AS a WHERE a.steamID LIKE :steamID")
-                    .setParameter("steamID", steamid);
-            Player player = (Player) query.getSingleResult();
-            return new PlayerDTO(player);
-        } finally {
-            em.close();
-        }
     }
 
-    public Collection<PlayerDTO> getleaderBoard() {
+    public Collection<PlayerDTO> getleaderBoard(int iterator) {
-        EntityManager em = PuSelector.getEntityManagerFactory("pu").createEntityManager();
+        int playerAddiditionCap = 150;
-        try {
+        List<Player> players = new ArrayList(playerCache.values());
-            Query query = em.createQuery("SELECT a FROM Player AS a ORDER BY A.rank ASC ");
-            List<Player> players = (List<Player>) query.getResultList();
         Collection<PlayerDTO> playersDTO = new ArrayList();
+        players.sort(Comparator.comparing(Player::getRank));
+        int counter = 0;
         for (Player player : players) {
+            if (counter >= iterator && counter <= iterator + playerAddiditionCap) {
                 playersDTO.add(new PlayerDTO(player));
             }
-            return playersDTO;
+            if (counter > iterator + playerAddiditionCap) {
-        } finally {
+                break;
-            em.close();
             }
+            counter++;
+        }
+        return playersDTO;
     }
 
     private void addNewPlayerValuesToCache(Collection<Player> keyCollection) {
@@ -274,9 +303,30 @@ public class Facade {
             setPlayerPoints();
             updatePlayerRanks();
             setTimesAsociatedToPeople();
+            updateEntitiesPersistence();
         }
     }
 
+    public void updateEntitiesPersistence() {
+        EntityManager em = PuSelector.getEntityManagerFactory("pu").createEntityManager();
+        em.getTransaction().begin();
+        em.createQuery("delete from MapBoard").executeUpdate();
+        em.createQuery("delete from MapValues").executeUpdate();
+        em.createQuery("delete from Player").executeUpdate();
+        em.createQuery("delete from UrlBanners").executeUpdate();
+        Collection<Player> players = playerCache.values();
+        Collection<MapBoard> mapBoards = mapBoardCache.values();
+        for (Player player : players) {
+            System.out.println("player: " + player.getName());
+            em.persist(player);
+        }
+        for (MapBoard mapboard : mapBoards) {
+            System.out.println("mapboard: " + mapboard.getMapName());
+            em.persist(mapboard);
+        }
+        em.getTransaction().commit();
+    }
+
     public List<Player> getAllPlayersFromCache() {
         checkTimeElapse();
         return new ArrayList(playerCache.values());

RaceTimer/racetimer_endpoints/src/main/java/rest/TimerResource.java

@@ -26,15 +26,17 @@ public class TimerResource {
 
     @GET
     @Produces(MediaType.APPLICATION_JSON)
-    @Path("leaderboard")
+    @Path("leaderboard/{iterator}")
-    public String retrieveLeaderBoard() {
+    public String retrieveLeaderBoard(@PathParam("iterator") int iterator) {
-        return gson.toJson(facade.getleaderBoard());
+        facade.checkTimeElapse();
+        return gson.toJson(facade.getleaderBoard(iterator));
     }
 
     @GET
     @Produces(MediaType.APPLICATION_JSON)
     @Path("player/{steamid}")
     public String retrievePlayer(@PathParam("steamid") String steamid) {
+        facade.checkTimeElapse();
         return gson.toJson(facade.getPlayer(steamid));
     }
 
@@ -53,4 +55,12 @@ public class TimerResource {
         facade.checkTimeElapse();
         return gson.toJson(facade.getSpecificMap(mapname, stage));
     }
+    
+    @GET
+    @Produces(MediaType.APPLICATION_JSON)
+    @Path("allmaps")
+    public String getAllMaps() {
+        facade.checkTimeElapse();
+        return gson.toJson(facade.getAllMaps());
+    }
 }

RaceTimer/racetimer_react/src/App.js

@@ -4,6 +4,7 @@ import { HashRouter as Router, Route } from "react-router-dom";
 import Leaderboard from "./Leaderboard/Leaderboard";
 import Player from "./Player/Player";
 import Maps from "./Maps/Maps";
+import MapBoard from "./MapBoard/MapBoard";
 
 class App extends Component {
     constructor(props) {
@@ -30,6 +31,9 @@ class App extends Component {
                     <Route path={`/map/:mapname/:stage`} render={(props) => {
                         return (<Maps {...props} />)
                     }} />
+                    <Route path={`/mapboard`} render={(props) => {
+                        return (<MapBoard {...props} />)
+                    }} />
                 </Router>
             </React.Fragment>
         )

RaceTimer/racetimer_react/src/Datafacade/datafacade.js

@@ -1,19 +1,9 @@
+import React from 'react';
 const URLleaderboard = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/leaderboard";
 const URLPlayer = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/player/";
 const URLPlayerMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/player/maps/";
 const URLMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/map/";
-function makeOptions(method, body) {
+const URLAllMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/allmaps";
-  var opts = {
-    method: method,
-    headers: {
-      "Content-type": "application/json"
-    }
-  };
-  if (body) {
-    opts.body = JSON.stringify(body);
-  }
-  return opts;
-}
 
 function handleHttpErrors(res) {
   if (!res.ok) {
@@ -22,22 +12,123 @@ function handleHttpErrors(res) {
   return res.json();
 }
 
-class DataFacade {
+class DataFacade extends React.Component {
-  getLeaderBoard = () => {
+  constructor(props) {
-    return fetch(URLleaderboard).then(handleHttpErrors);
+    super(props);
+    this.state = {
+
+    };
+  }
+
+  
+
+  getLeaderBoardFromCache = async (incrementer) => {
+    const CachedTime = JSON.parse(localStorage.getItem("leaderboardTimer"));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("leaderboardTimer", JSON.stringify(Date.now()));
+      localStorage.removeItem("leaderboard");
+      incrementer = 0;
+    }
+    var leaderBoardData = localStorage.getItem("leaderboard");
+    if (incrementer === 0 && leaderBoardData) {
+      const cachedLeaderBoard = JSON.parse(leaderBoardData);
+      return cachedLeaderBoard;
+    } else {
+      const players = await fetch(URLleaderboard + "/" + incrementer).then(handleHttpErrors);
+      if (leaderBoardData !== null) {
+        const cachedLeaderBoard = JSON.parse(leaderBoardData);
+        players.map(e => (
+          cachedLeaderBoard.push(e)
+        ))
+        localStorage.setItem("leaderboard", JSON.stringify(cachedLeaderBoard));
+        return cachedLeaderBoard;
+      } else {
+        localStorage.setItem("leaderboard", JSON.stringify(players));
+        return players;
+      }
+    }
   };
 
-  getPlayer = steamID => {
+  getAllMapsFromCache = async () => {
-    return fetch(URLPlayer + steamID).then(handleHttpErrors);
+    const CachedTime = JSON.parse(localStorage.getItem("allmapsTimer"));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("allmapsTimer", JSON.stringify(Date.now()));
+      localStorage.removeItem("allmaps");
+    }
+    var allMapsData = localStorage.getItem("allmaps");
+    if (allMapsData) {
+      const cachedAllMaps = JSON.parse(allMapsData);
+      return cachedAllMaps;
+    } else {
+      const allMaps = await fetch(URLAllMaps).then(handleHttpErrors);
+      localStorage.setItem("allmaps", JSON.stringify(allMaps));
+      return allMaps;
+    }
+  };
+
+  getPlayerFromCache = async (steamID) => {
+    const CachedTime = JSON.parse(localStorage.getItem("initialCachedplayers" + steamID));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("initialCachedplayers" + steamID, JSON.stringify(Date.now()));
+      localStorage.removeItem("player/" + steamID)
+    }
+    var storageString = "player/" + steamID;
+    const playerData = localStorage.getItem(storageString);
+    if (playerData) {
+      const player = JSON.parse(playerData);
+      return player;
+    } else {
+      const player = await fetch(URLPlayer + steamID).then(handleHttpErrors);
+      localStorage.setItem(storageString, JSON.stringify(player));
+      return player;
+    }
   }
 
-  getPlayerTimes = steamID => {
+  getPlayerTimesFromCache = async (steamID) => {
-    return fetch(URLPlayerMaps + steamID).then(handleHttpErrors);
+    const CachedTime = JSON.parse(localStorage.getItem("initialCachedplayersTimes" + steamID));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("initialCachedplayersTimes" + steamID, JSON.stringify(Date.now()));
+      localStorage.removeItem("playertimes/" + steamID)
+    }
+    var storageString = "playertimes/" + steamID;
+    var playerTimesData = localStorage.getItem(storageString);
+    if (playerTimesData) {
+      const cachedPlayerTimes = JSON.parse(playerTimesData)
+      return cachedPlayerTimes;
+    } else {
+      const playertimes = await fetch(URLPlayerMaps + steamID).then(handleHttpErrors);
+      localStorage.setItem(storageString, JSON.stringify(playertimes));
+      return playertimes;
+    }
   }
 
-  getMapTimes = (mapname, stage) => {
+  getMapTimesFromCache = async (mapname, stage) => {
-    return fetch(URLMaps + mapname + "/" + stage).then(handleHttpErrors);
+    const CachedTime = JSON.parse(localStorage.getItem("maptimescached" + mapname + stage));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("maptimescached" + mapname + stage, JSON.stringify(Date.now()));
+      localStorage.removeItem("map/" + mapname + stage);
     }
+    var mapTimesData = localStorage.getItem("map/" + mapname + stage);
+    if (mapTimesData) {
+      const cachedMapTimes = JSON.parse(mapTimesData);
+      return cachedMapTimes;
+    } else {
+      const mapTimes = await fetch(URLMaps + mapname + "/" + stage).then(handleHttpErrors);
+      localStorage.setItem("map/" + mapname + stage, JSON.stringify(mapTimes));
+      return mapTimes;
+    }
+  }
+
 }
 
 export default new DataFacade();

RaceTimer/racetimer_react/src/Leaderboard/Leaderboard.js

@@ -1,48 +1,87 @@
 import React from 'react';
 import Facade from '../Datafacade/datafacade';
-import { NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router-dom';
 
 class Leaderboard extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            players: []
+            players: [],
+            breakload: true,
         };
     }
+
+    componentWillMount() {
+        this.scrollListener = window.addEventListener("scroll", e => {
+            this.handleScroll(e);
+        });
+    }
+
     componentDidMount = async () => {
-        const players = await Facade.getLeaderBoard();
+        this.setState({ breakload: false })
+        const players = await Facade.getLeaderBoardFromCache(0);
+        this.setState({ breakload: true })
         this.setState({ players });
-        this.props.setLeaderboard(players);
     };
 
+    findSecondLast(array) {
+        return array[array.length - 2];
+    }
+
+    handleScroll = () => {
+        const player = this.findSecondLast(this.state.players);
+        var lastLi = document.getElementById('leaderboard/' + player.steamID);
+        var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
+        var pageOffset = window.pageYOffset + window.innerHeight;
+        if (pageOffset > lastLiOffset && this.state.breakload) {
+            this.setState({ breakload: false })
+            this.loadPlayers();
+        }
+    };
+
+    loadPlayers = async () => {
+        const players = await Facade.getLeaderBoardFromCache(this.state.players.length + 1);
+        this.setState({ players });
+        this.setState({ breakload: true })
+    }
+
 
     render() {
         return (
             <React.Fragment>
+                <ul>
                     <div className="container mm" style={{ marginTop: "85px" }}>
                         <div style={{
                             position: 'absolute', left: '50%', top: '30%'
                         }}>
+                            <NavLink to={'/mapboard/'}>
+                                <h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
+                            </NavLink>
+                            <br />
+                            <br />
                             {this.state.players.map(e => (
-                            <div>
+                                <li key={e.steamID} id={"leaderboard/" + e.steamID}>
                                     <NavLink to={'/player/' + e.steamID}>
-                                    <strong class="col-lg-1 col-centered" /> {e.steamID}<br />
+                                        <strong className="col-lg-1 col-centered" /> {e.steamID}<br />
-                                    <strong class="col-lg-1 col-centered" />{e.name}<br />
+                                        <strong className="col-lg-1 col-centered" />{e.name}<br />
-                                    <img src={e.Avatar} /> <br />
+                                        <img src={e.Avatar} alt="" /> <br />
-                                    <strong class="col-lg-1 col-centered" />Rank: {e.Rank}<br />
+                                        <strong className="col-lg-1 col-centered" />Rank: {e.Rank}<br />
-                                    <strong class="col-lg-1 col-centered" />Points: {e.PlayerPoints}<br />
+                                        <strong className="col-lg-1 col-centered" />Points: {e.PlayerPoints}<br />
-                                    <strong class="col-lg-1 col-centered" />Times: {e.Times}<br />
+                                        <strong className="col-lg-1 col-centered" />Times: {e.Times}<br />
                                         <br />
                                         <br />
                                     </NavLink>
-                            </div>
+                                </li>
                             ))}
+                            {!this.state.breakload ? <h1> <br /> <br /><p className="loading"> 
+                            Loading More Players...
+                            </p> </h1> : ""}
                         </div>
                     </div>
+                </ul>
             </React.Fragment>
         );
     }
 }
 
-
 export default Leaderboard;

RaceTimer/racetimer_react/src/MapBoard/MapBoard.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Facade from '../Datafacade/datafacade';
+import { NavLink } from 'react-router-dom';
+
+class MapBoards extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            maps: []
+        };
+    }
+
+    componentWillMount = async () => {
+        const maps = await Facade.getAllMapsFromCache();
+        this.setState({ maps });
+    };
+
+    render() {
+        return (
+            <React.Fragment>
+                <div className="container mm" style={{ marginTop: "85px" }}>
+                    <div style={{
+                        position: 'absolute', left: '50%', top: '30%'
+                    }}>
+                        <NavLink to={'/leaderboard/'}>
+                          <h3> <strong class="col-lg-1 col-centered" /> leaderboard<br /> </h3> 
+                        </NavLink>
+                        <br />
+                        <br />
+                        {this.state.maps.map(e => (
+                            <div>
+                                <NavLink to={'/map/' + e.mapname + "/" + e.mapstage}>
+                                    <strong class="col-lg-1 col-centered" /> Map: {e.mapname}<br />
+                                    <strong class="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
+                                    <br />
+                                    <br />
+                                </NavLink>
+                            </div>
+                        ))}
+                        /</div>
+                </div>
+            </React.Fragment>
+        );
+    }
+
+}
+export default MapBoards;

RaceTimer/racetimer_react/src/Maps/Maps.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Facade from '../Datafacade/datafacade';
+import { NavLink } from 'react-router-dom';
 
 class Maps extends React.Component {
 
@@ -14,7 +15,7 @@ class Maps extends React.Component {
     componentWillMount = async () => {
         const mapname = this.props.match.params.mapname;
         const stage = this.props.match.params.stage;
-        const mapTimes = await Facade.getMapTimes(mapname, stage);
+        const mapTimes = await Facade.getMapTimesFromCache(mapname, stage);
         this.setState({ mapTimes });
         this.setState({ mapName: mapname })
     };
@@ -22,25 +23,40 @@ class Maps extends React.Component {
     render() {
         return (
             <React.Fragment>
+                <div className="alert alert-primary" >
+                    <NavLink to={'/leaderboard/'}>
+                        <h3> <strong className="col-lg-1 col-centered" /> leaderboard<br /> </h3>
+                    </NavLink>
+                    <NavLink to={'/mapboard/'}>
+                        <h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
+                    </NavLink>
+                </div>
                 <div className="container mm" style={{ marginTop: "85px" }}>
                     <div style={{
                         position: 'absolute', left: '50%', top: '30%'
                     }}>
 
+                        <br />
+                        <br />
                         <div>
-                            <strong class="col-lg-1 col-centered" />{this.state.mapName}<br />
+                            <strong className="col-lg-1 col-centered" />{this.state.mapName}<br />
                             <br />
                             <br />
                             {this.state.mapTimes.map(e => (
-                                <div>
+                                <div className="item" key={e.steamID}>
-                                    <strong class="col-lg-1 col-centered" /> Position: {e.position}<br />
+                                    <div className="box_grid">
-                                    <strong class="col-lg-1 col-centered" /> SteamID: {e.steamID}<br />
+                                        <NavLink to={'/player/' + e.steamID}>
-                                    <strong class="col-lg-1 col-centered" /> Name: {e.name}<br />
+                                            <strong className="col-lg-1 col-centered" /> SteamID: {e.steamID}<br />
-                                    <strong class="col-lg-1 col-centered" /> Mappoints: {e.mapPoint}<br />
+                                            <strong className="col-lg-1 col-centered" /> Name: {e.name}<br />
-                                    <strong class="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
+                                            <img src={e.avatar} alt=""/> <br />
+                                        </NavLink>
+                                        <strong className="col-lg-1 col-centered" /> Position: {e.position}<br />
+                                        <strong className="col-lg-1 col-centered" /> Mappoints: {e.mapPoint}<br />
+                                        <strong className="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
                                         <br />
                                         <br />
                                     </div>
+                                </div>
                             ))}
 
                         </div>

RaceTimer/racetimer_react/src/Player/Player.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import Facade from '../Datafacade/datafacade';
-import { NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router-dom';
 
 class Player extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
             player: {},
-            mapTimes: []
+            mapTimes: [],
+            breakload: true,
         };
     }
 
     componentWillMount = async () => {
         const steamid = this.props.match.params.steamid;
-        const player = await Facade.getPlayer(steamid);
+        const player = await Facade.getPlayerFromCache(steamid);
-        const mapTimes = await Facade.getPlayerTimes(steamid);
+        const mapTimes = await Facade.getPlayerTimesFromCache(steamid);
         this.setState({ player });
         this.setState({ mapTimes });
     };
@@ -28,23 +29,23 @@ class Player extends React.Component {
                     }}>
                         <div>
                             <a href={"http://steamcommunity.com/profiles/" + this.state.player.steamID64}>
-                                <strong class="col-lg-1 col-centered" /> {this.state.player.steamID}<br />
+                                <strong className="col-lg-1 col-centered" /> {this.state.player.steamID}<br />
-                                <strong class="col-lg-1 col-centered" />{this.state.player.name}<br />
+                                <strong className="col-lg-1 col-centered" />{this.state.player.name}<br />
-                                <img src={this.state.player.Avatar} /> <br />
+                                <img src={this.state.player.Avatar} alt="" /> <br />
-                                <strong class="col-lg-1 col-centered" />Rank: {this.state.player.Rank}<br />
+                                <strong className="col-lg-1 col-centered" />Rank: {this.state.player.Rank}<br />
-                                <strong class="col-lg-1 col-centered" />Points: {this.state.player.PlayerPoints}<br />
+                                <strong className="col-lg-1 col-centered" />Points: {this.state.player.PlayerPoints}<br />
-                                <strong class="col-lg-1 col-centered" />Times: {this.state.player.Times}<br />
+                                <strong className="col-lg-1 col-centered" />Times: {this.state.player.Times}<br />
                                 <br />
                                 <br />
                             </a>
                             {this.state.mapTimes.map(e => (
-                                <div>
+                                <div key={"mapkey/" + e.mapname + "/" + e.mapstage}>
                                     <NavLink to={'/map/' + e.mapname + "/" + e.mapstage}>
-                                    <strong class="col-lg-1 col-centered" /> Map: {e.mapname}<br />
+                                        <strong className="col-lg-1 col-centered" /> Map: {e.mapname}<br />
-                                    <strong class="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
+                                        <strong className="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
-                                    <strong class="col-lg-1 col-centered" /> Position: {e.position}<br />
+                                        <strong className="col-lg-1 col-centered" /> Position: {e.position}<br />
-                                    <strong class="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
+                                        <strong className="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
-                                    <strong class="col-lg-1 col-centered" /> MapPoints: {e.mapPoint}<br />
+                                        <strong className="col-lg-1 col-centered" /> MapPoints: {e.mapPoint}<br />
                                         <br />
                                         <br />
                                     </NavLink>