saving udates, not missing much i guess

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

@@ -0,0 +1,38 @@
+/*
+ * 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 entity.Player;
+import entity.UrlBanners;
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ *
+ * @author install1
+ */
+public class BadgesDTO {
+
+    private List<String> badgesUrls = new ArrayList();
+
+    public BadgesDTO(Player player) {
+        List<UrlBanners> urlBanners = player.getUrlBanners();
+        for (UrlBanners urlbanner : urlBanners) {
+            badgesUrls.add(urlbanner.getBadgeUrl());
+        }
+    }
+
+    public List<String> getBadgesUrls() {
+        return badgesUrls;
+    }
+
+    public void setBadgesUrls(List<String> badgesUrls) {
+        this.badgesUrls = badgesUrls;
+    }
+
+    public BadgesDTO() {
+    }
+}

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

@@ -6,6 +6,10 @@
 package DTO;
 
 import entity.MapValues;
+import entity.Player;
+import entity.UrlBanners;
+import java.util.ArrayList;
+import java.util.List;
 
 /**
  *
@@ -20,6 +24,7 @@ public class MapBoardDTO {
     private int mapTimeMinutes;
     private float mapTimeSeconds;
     private int position;
+    private List<String> badgesUrls = new ArrayList();
 
     public MapBoardDTO() {
     }
@@ -32,6 +37,14 @@ public class MapBoardDTO {
         this.mapTimeMinutes = (int) Math.floor(mapvalue.getTime());
         this.mapTimeSeconds = (float) (mapvalue.getTime() - Math.floor(mapvalue.getTime())) * 100;
         this.position = mapvalue.getPosition();
+
+    }
+
+    public void setBadgesUrls(Player player) {
+        List<UrlBanners> urlBanners = player.getUrlBanners();
+        for (UrlBanners urlbanner : urlBanners) {
+            badgesUrls.add(urlbanner.getBadgeUrl());
+        }
     }
 
     public String getSteamID() {

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

@@ -1,5 +1,6 @@
 package facade;
 
+import DTO.BadgesDTO;
 import DTO.MapBoardDTO;
 import DTO.MapBoardDTO2;
 import DTO.PlayerMapBoardDTO;
@@ -52,6 +53,52 @@ public class Facade {
         initSetup = 1;
     }
 
+    private boolean getMap(String map, String Identifier) {
+        boolean identified = Pattern.compile(Pattern.quote(Identifier), Pattern.CASE_INSENSITIVE).matcher(map).find();
+        return identified;
+    }
+
+    private boolean getPlayer(Player player, String Identifier) {
+        boolean identified = Pattern.compile(Pattern.quote(Identifier), Pattern.CASE_INSENSITIVE).matcher(player.getName()).find();
+        if (!identified) {
+            identified = Pattern.compile(Pattern.quote(Identifier), Pattern.CASE_INSENSITIVE).matcher(player.getSteamID()).find();
+        }
+        return identified;
+    }
+
+    public List<MapBoardDTO2> getSearchMapsResults(String identifier) {
+        List<String> arrnames = new ArrayList(mapBoardCache.keySet());
+        Collections.sort(arrnames, String.CASE_INSENSITIVE_ORDER);
+        List<MapBoardDTO2> arrMaps = new ArrayList();
+        for (String str : arrnames) {
+            if (getMap(str, identifier)) {
+                Map.Entry<String, Integer> getMapnameAndStage = GetMapnameAndStage(str);
+                String mapName = getMapnameAndStage.getKey();
+                arrMaps.add(new MapBoardDTO2(mapName, getMapnameAndStage.getValue()));
+            }
+        }
+        return arrMaps;
+    }
+
+    public List<PlayerDTO> getSearchPlayerResults(String Identifier) {
+        List<Player> players = new ArrayList(playerCache.values());
+        List<PlayerDTO> playersDTO = new ArrayList();
+        Collection<Player> playerAvatarsCaching = new ArrayList();
+        for (Player player : players) {
+            if (getPlayer(player, Identifier)) {
+                playerAvatarsCaching.add(player);
+            }
+        }
+        updateAvatarsToCache(playerAvatarsCaching);
+        players = new ArrayList(playerCache.values());
+        for (Player player : players) {
+            if (getPlayer(player, Identifier)) {
+                playersDTO.add(new PlayerDTO(player));
+            }
+        }
+        return playersDTO;
+    }
+
     public int getSpecificFetchMap(String mapname, int stage) {
         MapBoard specificMapBoardCache = mapBoardCache.getOrDefault(mapname + "S" + stage, null);
         if (specificMapBoardCache == null) {
@@ -62,11 +109,11 @@ public class Facade {
 
     public List<MapBoardDTO2> getAllMaps() {
         List<String> arrnames = new ArrayList(mapBoardCache.keySet());
-        Collections.sort(arrnames);
+        Collections.sort(arrnames, String.CASE_INSENSITIVE_ORDER);
         List<MapBoardDTO2> arrMaps = new ArrayList();
-        System.out.println("arrnames size: " + arrnames.size() + "\n");
+        // System.out.println("arrnames size: " + arrnames.size() + "\n");
         for (String str : arrnames) {
-            System.out.println("getAllMaps str: " + str + "\n");
+            //System.out.println("getAllMaps str: " + str + "\n");
             Map.Entry<String, Integer> getMapnameAndStage = GetMapnameAndStage(str);
             String mapName = getMapnameAndStage.getKey();
             arrMaps.add(new MapBoardDTO2(mapName, getMapnameAndStage.getValue()));
@@ -102,17 +149,26 @@ public class Facade {
         int counter = 0;
         Collection<Player> playerAvatarsCaching = new ArrayList();
         for (MapValues mapvalue : mapvalues) {
-            Player getPlayer = playerCache.get(mapvalue.getPlayerSteamID());
+            if (counter >= iterator && counter <= iterator + mapPlayerAddiditionCap) {
-            String avatar = getPlayer.getAvatar();
+                Player getPlayer = playerCache.get(mapvalue.getPlayerSteamID());
-            if (avatar == null) {
+                String avatar = getPlayer.getAvatar();
-                playerAvatarsCaching.add(getPlayer);
+                if (avatar == null) {
+                    playerAvatarsCaching.add(getPlayer);
+                }
             }
+            if (counter > iterator + mapPlayerAddiditionCap) {
+                break;
+            }
+            counter++;
         }
+        counter = 0;
         updateAvatarsToCache(playerAvatarsCaching);
         for (MapValues mapvalue : mapvalues) {
             if (counter >= iterator && counter <= iterator + mapPlayerAddiditionCap) {
                 String avatar = playerCache.get(mapvalue.getPlayerSteamID()).getAvatar();
-                returnlist.add(new MapBoardDTO(mapvalue, playerCache.get(mapvalue.getPlayerSteamID()).getName(), avatar));
+                MapBoardDTO mapBoardDTO = new MapBoardDTO(mapvalue, playerCache.get(mapvalue.getPlayerSteamID()).getName(), avatar);
+                mapBoardDTO.setBadgesUrls(playerCache.get(mapvalue.getPlayerSteamID()));
+                returnlist.add(mapBoardDTO);
             }
             if (counter > iterator + mapPlayerAddiditionCap) {
                 break;
@@ -128,14 +184,16 @@ public class Facade {
             ConcurrentMap<String, MapValues> playerMaps = playerRelatedMapValuesCache.get(steamid);
             List<PlayerMapBoardDTO> playerMapBoardDtos = new ArrayList();
             int counter = 0;
-            for (Entry<String, MapValues> entries : playerMaps.entrySet()) {
+            List<String> arrnames = new ArrayList(playerMaps.keySet());
+            Collections.sort(arrnames, String.CASE_INSENSITIVE_ORDER);
+            for (String mapnames : arrnames) {
                 if (counter >= iterator && counter <= iterator + playerMapsCapAddition) {
                     PlayerMapBoardDTO mapBoardDto = new PlayerMapBoardDTO(steamid);
-                    Map.Entry<String, Integer> getMapnameAndStage = GetMapnameAndStage(entries.getKey());
+                    Map.Entry<String, Integer> getMapnameAndStage = GetMapnameAndStage(mapnames);
                     String mapName = getMapnameAndStage.getKey();
                     int stage = (getMapnameAndStage.getValue());
-                    //System.out.println("getPlayerMaps: " + mapName + " stage: " + stage + "\n");
+                    MapValues mapvalues = playerMaps.get(mapnames);
-                    mapBoardDto.addMapValues(entries.getValue(), mapName, stage);
+                    mapBoardDto.addMapValues(mapvalues, mapName, stage);
                     playerMapBoardDtos.add(mapBoardDto);
                 }
                 if (counter > iterator + playerMapsCapAddition) {
@@ -145,10 +203,15 @@ public class Facade {
             }
             return playerMapBoardDtos;
         } catch (Exception ex) {
+            System.out.println("ex: " + ex);
             return null;
         }
     }
 
+    public BadgesDTO getPlayerBadges(String steamID) {
+        return new BadgesDTO(playerCache.get(steamID));
+    }
+
     public PlayerDTO getPlayer(String steamid) {
         if (playerCache.get(steamid).getAvatar() == null) {
             Collection<Player> playerAvatarsCaching = new ArrayList();
@@ -197,62 +260,46 @@ public class Facade {
             Collection<Integer> banners = playerUrlBanners.getOrDefault(player.getSteamID(), null);
             if (banners != null) {
                 List<UrlBanners> urlBanners = new ArrayList();
-                for (Integer bannerID : banners) {
+                //switch statement did not want to respond
+                for (int bannerID : banners) {
                     String bannerName = "";
                     String bannerURL = "";
-                    switch (bannerID) {
+                    if (bannerID == 2) {
-                        case 2: {
+                        bannerName = "User";
-                            bannerName = "User";
+                        bannerURL = "https://unloze.com/images/badges/User.png";
-                            bannerURL = "https://unloze.com/images/badges/User.png";
+                    } else if (bannerID == 6) {
-                        }
+                        bannerName = "Mapper";
-                        case 6: {
+                        bannerURL = "https://unloze.com/images/badges/Mapper.png";
-                            bannerName = "Mapper";
+                    } else if (bannerID == 7) {
-                            bannerURL = "https://unloze.com/images/badges/Mapper.png";
+                        bannerName = "Admin";
-                        }
+                        bannerURL = "https://unloze.com/images/badges/Admin.png";
-                        case 7: {
+                    } else if (bannerID == 8) {
-                            bannerName = "Admin";
+                        bannerName = "Technical Staff";
-                            bannerURL = "https://unloze.com/images/badges/Admin.png";
+                        bannerURL = "https://unloze.com/images/badges/Tech-Staff.png";
-                        }
+                    } else if (bannerID == 10) {
-                        case 8: {
+                        bannerName = "Leader";
-                            bannerName = "Technical Staff";
+                        bannerURL = "https://unloze.com/images/badges/Leader.png";
-                            bannerURL = "https://unloze.com/images/badges/Tech-Staff.png";
+                    } else if (bannerID == 11) {
-                        }
+                        bannerName = "Global Admin";
-                        case 10: {
+                        bannerURL = "https://unloze.com/images/badges/Global-Admin.png";
-                            bannerName = "Leader";
+                    } else if (bannerID == 12) {
-                            bannerURL = "https://unloze.com/images/badges/Leader.png";
+                        bannerName = "VIP";
-                        }
+                        bannerURL = "https://unloze.com/images/badges/VIP.png";
-                        case 11: {
+                    } else if (bannerID == 13) {
-                            bannerName = "Global Admin";
+                        bannerName = "Trial Admin";
-                            bannerURL = "https://unloze.com/images/badges/Global-Admin.png";
+                        bannerURL = "https://unloze.com/images/badges/Trial_Admin.png";
-                        }
+                    } else if (bannerID == 15) {
-                        case 12: {
+                        bannerName = "Event Winner";
-                            bannerName = "VIP";
+                        bannerURL = "https://unloze.com/images/badges/Event-Winner.png";
-                            bannerURL = "https://unloze.com/images/badges/VIP.png";
+                    } else if (bannerID == 19) {
-                        }
+                        bannerName = "Discord Manager";
-                        case 13: {
+                        bannerURL = "https://unloze.com/images/badges/Discord-Manager.png";
-                            bannerName = "Trial Admin";
+                    } else if (bannerID == 21) {
-                            bannerURL = "https://unloze.com/images/badges/Trial_Admin.png";
+                        bannerName = "Retired Admin";
-                        }
+                        bannerURL = "https://unloze.com/images/badges/Retired-Admin.png";
-                        case 15: {
+                    } else if (bannerID == 25) {
-                            bannerName = "Event Winner";
+                        bannerName = "Event Manager";
-                            bannerURL = "https://unloze.com/images/badges/Event-Winner.png";
+                        bannerURL = "https://unloze.com/images/badges/Event-Manager.png";
-                        }
-                        case 19: {
-                            bannerName = "Discord Manager";
-                            bannerURL = "https://unloze.com/images/badges/Discord-Manager.png";
-                        }
-                        case 21: {
-                            bannerName = "Retired Admin";
-                            bannerURL = "https://unloze.com/images/badges/Retired-Admin.png";
-                        }
-                        case 25: {
-                            bannerName = "Event Manager";
-                            bannerURL = "https://unloze.com/images/badges/Event-Manager.png";
-                        }
-                        default: {
-                            bannerName = "";
-                            bannerURL = "";
-                        }
                     }
                     if (!bannerName.isEmpty() && !bannerURL.isEmpty()) {
                         urlBanners.add(new UrlBanners(bannerName, bannerURL));
@@ -260,7 +307,6 @@ public class Facade {
                 }
                 player.setUrlBanners(urlBanners);
             }
-            //System.out.println("playername: " + player.getName() + "\n");
             playerCache.put(player.getSteamID(), player);
         }
     }
@@ -285,7 +331,7 @@ public class Facade {
                     String avatar = jsonArray.getJSONObject(incrementer).getString("avatarfull");
                     String steamID = convertCommunityIdToSteamId(Long.valueOf(steamID64));
                     playerCache.get(steamID).setAvatar(avatar);
-                    System.out.println("avatar: " + avatar + "\nname: " + playerCache.get(steamID).getName() + "\n");
+                    //System.out.println("avatar: " + avatar + "\nname: " + playerCache.get(steamID).getName() + "\n");
                 } catch (NumberFormatException | JSONException ex) {
                     System.out.println("ex: " + ex.getLocalizedMessage() + "\n Nosteamer");
                 }
@@ -351,6 +397,7 @@ public class Facade {
     private void orderingMapBoardValuesByTime() {
         Collection<MapBoard> mapboards = mapBoardCache.values();
         for (MapBoard mapboard : mapboards) {
+            //System.out.println("mapName: " + mapboard.getMapName());
             List<MapValues> mapvalues = new ArrayList(mapboard.getMapvalues());
             mapvalues.sort(Comparator.comparing(MapValues::getTime));
             mapBoardCache.get(mapboard.getMapName()).setMapvalues(mapvalues);
@@ -364,9 +411,8 @@ public class Facade {
             int position = 1;
             for (MapValues mapvalue : mapvalues) {
                 mapvalue.setPosition(position);
-                float percentageSpreader = 0;
+                float percentageSpreader = playerCount - position;
-                percentageSpreader = playerCount - position;
+                mapvalue.setMapPoints((int) Math.floor((percentageSpreader / playerCount) * playerCount /* 100 */));
-                mapvalue.setMapPoints((int) Math.floor((percentageSpreader / playerCount) * 100));
                 position++;
             }
         }
@@ -446,7 +492,6 @@ public class Facade {
         Collection<Player> players = playerCache.values();
         Collection<MapBoard> mapBoards = mapBoardCache.values();
         for (Player player : players) {
-            System.out.println("player: " + player.getName());
             em.persist(player);
             List<UrlBanners> urlBanners = player.getUrlBanners();
             for (UrlBanners urlB : urlBanners) {
@@ -454,7 +499,6 @@ public class Facade {
             }
         }
         for (MapBoard mapboard : mapBoards) {
-            System.out.println("mapboard: " + mapboard.getMapName());
             em.persist(mapboard);
         }
         em.getTransaction().commit();

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

@@ -40,7 +40,7 @@ public class TimerResource {
         return gson.toJson(facade.getAllMaps());
     }
 
-     @GET
+    @GET
     @Produces(MediaType.APPLICATION_JSON)
     @Path("mapsizecache/{mapname}/{stage}")
     public String getSpecifcMapSize(@PathParam("mapname") String mapname, @PathParam("stage") int stage) {
@@ -56,6 +56,14 @@ public class TimerResource {
         return gson.toJson(facade.getPlayer(steamid));
     }
 
+    @GET
+    @Produces(MediaType.APPLICATION_JSON)
+    @Path("player/badges/{steamid}")
+    public String retrievePlayerBadges(@PathParam("steamid") String steamid) {
+        facade.checkTimeElapse();
+        return gson.toJson(facade.getPlayerBadges(steamid));
+    }
+
     @GET
     @Produces(MediaType.APPLICATION_JSON)
     @Path("player/maps/{steamid}/{iterator}")
@@ -73,5 +81,19 @@ public class TimerResource {
         return gson.toJson(facade.getSpecificMap(mapname, stage, iterator));
     }
 
+    @GET
+    @Produces(MediaType.APPLICATION_JSON)
+    @Path("searchplayers/{identifier}")
+    public String searchPlayers(@PathParam("identifier") String identifier){
+        facade.checkTimeElapse();
+        return gson.toJson(facade.getSearchPlayerResults(identifier));
+    }
     
+    @GET
+    @Produces(MediaType.APPLICATION_JSON)
+    @Path("searchmaps/{identifier}")
+    public String searchMaps(@PathParam("identifier") String identifier){
+        facade.checkTimeElapse();
+        return gson.toJson(facade.getSearchMapsResults(identifier));
+    }
 }

RaceTimer/racetimer_endpoints/src/main/java/utils/Initialization.java

@@ -26,11 +26,14 @@ public class Initialization {
 
     private static void setupDBTablesWithPresentValues() {
         Facade facade = new Facade();
+
+        facade.checkTimeElapse();
         List<Player> getAllPlayers = facade.getAllPlayersFromCache();
+        facade.getleaderBoard(0);
         Collection<MapBoard> getAllMapBoards = facade.getAllMapBoardsFromCache();
-        //facade.getPlayerMaps("STEAM_0:0:191740833", 0);
+        
-        //  facade.getPlayerMaps("STEAM_0:0:191740833", 25);
+        //facade.getPlayerMaps("STEAM_0:0:33155716", 0);
-        facade.getAllMaps();
+
         AdminEditor admin = new AdminEditor("jenz", "1234");
         EntityManager em = PuSelector.getEntityManagerFactory("pu").createEntityManager();
         //simply cant persist collections/list

RaceTimer/racetimer_react/src/App.js

@@ -6,6 +6,10 @@ import Player from "./Player/Player";
 import Maps from "./Maps/Maps";
 import MapBoard from "./MapBoard/MapBoard";
 
+import './css/custom.css';
+import './css/style.css';
+import './css/vendors.css';
+
 class App extends Component {
     constructor(props) {
         super(props);

RaceTimer/racetimer_react/src/Datafacade/datafacade.js

@@ -6,6 +6,8 @@ const URLPlayerMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/
 const URLMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/map/";
 const URLAllMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/allmaps";
 const URLMapsSize = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/mapsizecache";
+const URLSearchPlayers = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/searchplayers/";
+const URLSearchMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/searchmaps/";
 
 function handleHttpErrors(res) {
   if (!res.ok) {
@@ -75,7 +77,25 @@ class DataFacade extends React.Component {
     }
   }
 
-
+  getPlayerBadgesFromCache = async (steamID) => {
+    const CachedTime = JSON.parse(localStorage.getItem("initialBadgesCachedplayers" + steamID));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("initialBadgesCachedplayers" + steamID, JSON.stringify(Date.now()));
+      localStorage.removeItem("player/badges/" + steamID)
+    }
+    var storageString = "player/badges/" + steamID;
+    const badgesData = localStorage.getItem(storageString);
+    if (badgesData) {
+      const badges = JSON.parse(badgesData);
+      return badges;
+    } else {
+      const badges = await trackPromise(fetch(URLPlayer + "badges/" + steamID).then(handleHttpErrors));
+      localStorage.setItem(storageString, JSON.stringify(badges));
+      return badges;
+    }
+  }
 
 
   getPlayerFromCache = async (steamID) => {
@@ -173,5 +193,44 @@ class DataFacade extends React.Component {
       }
     }
   }
+
+  getPlayersBySearchCache = async (keyword) => {
+    const CachedTime = JSON.parse(localStorage.getItem("searchCache/time/" + keyword));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("searchCache/time/" + keyword, JSON.stringify(Date.now()));
+      localStorage.removeItem("searchCache/" + keyword)
+    }
+    var storageString = "searchCache/" + keyword;
+    var searchData = localStorage.getItem(storageString);
+    if (searchData) {
+      const cachedSearch = JSON.parse(searchData)
+      return cachedSearch;
+    } else {
+      const searchPlayers = await trackPromise(fetch(URLSearchPlayers + keyword).then(handleHttpErrors));
+      localStorage.setItem(storageString, JSON.stringify(searchPlayers));
+      return searchPlayers;
+    }
+  }
+  getMapsBySearchCache = async(keyword) => {
+    const CachedTime = JSON.parse(localStorage.getItem("searchCacheMaps/time/" + keyword));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("searchCacheMaps/time/" + keyword, JSON.stringify(Date.now()));
+      localStorage.removeItem("searchCacheMaps/" + keyword)
+    }
+    var storageString = "searchCache/" + keyword;
+    var searchData = localStorage.getItem(storageString);
+    if (searchData) {
+      const cachedSearch = JSON.parse(searchData)
+      return cachedSearch;
+    } else {
+      const searchMaps = await trackPromise(fetch(URLSearchMaps + keyword).then(handleHttpErrors));
+      localStorage.setItem(storageString, JSON.stringify(searchMaps));
+      return searchMaps;
+    }
+  }
 };
 export default new DataFacade();

RaceTimer/racetimer_react/src/Leaderboard/Leaderboard.js

@@ -3,6 +3,8 @@ import Facade from '../Datafacade/datafacade';
 import { NavLink } from 'react-router-dom';
 import Loader from 'react-loader-spinner';
 import { usePromiseTracker } from "react-promise-tracker";
+import { FormControl } from "react-bootstrap";
+import PlayersSearch from "../playerSearch/playersSearch";
 const LoadingIndicator = props => {
     const { promiseInProgress } = usePromiseTracker();
     return promiseInProgress &&
@@ -26,10 +28,23 @@ class Leaderboard extends React.Component {
             players: [],
             breakload: true,
             scrollListener: {},
+            keyword: "",
+            searchBool: true,
         };
         this.scrollListener = this.handleScroll.bind(this);
     }
 
+    handleKeywordInput = e => {
+        const searchTerm = e.target.value;
+        this.setState({ keyword: searchTerm });
+        this.setState({ searchBool: true });
+    };
+
+    handleSubmit = e => {
+        e.preventDefault();
+        this.setState({ searchBool: false });
+    };
+
     componentWillMount() {
         window.addEventListener('scroll', this.scrollListener);
     }
@@ -45,18 +60,20 @@ class Leaderboard extends React.Component {
         this.setState({ players });
     };
 
-    findSecondLast(array) {
+    findLateIndex(array) {
-        return array[array.length - 2];
+        return array[array.length - 5];
     }
 
     handleScroll = () => {
-        const player = this.findSecondLast(this.state.players);
+        if (this.state.breakload) {
-        var lastLi = document.getElementById('leaderboard/' + player.steamID);
+            const player = this.findLateIndex(this.state.players);
-        var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
+            var lastLi = document.getElementById('leaderboard/' + player.steamID);
-        var pageOffset = window.pageYOffset + window.innerHeight;
+            var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
-        if (pageOffset > lastLiOffset && this.state.breakload) {
+            var pageOffset = window.pageYOffset + window.innerHeight;
-            this.setState({ breakload: false })
+            if (pageOffset > lastLiOffset) {
-            this.loadPlayers();
+                this.setState({ breakload: false })
+                this.loadPlayers();
+            }
         }
     };
 
@@ -69,42 +86,80 @@ class Leaderboard extends React.Component {
     render() {
         return (
             <React.Fragment>
-                <div className="alert alert-primary" >
+                <section className="hero_single version_2 start_bg_zoom">
-                    <div id='containerMaps'>
+                    <div className="wrapper">
-                        <div>
+                        <div className="container">
-                            <NavLink to={'/mapboard/'}>
+                            <h3>UNLOZE Zombie Escape LeaderBoard</h3>
-                                <h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
+                            <p>
-                            </NavLink>
+                                Browse LeaderBoard Players
+              </p>
+                            <form>
+                                <div className="row no-gutters custom-search-input-2">
+                                    <div className="col-lg-8">
+                                        <div className="form-group">
+                                            <FormControl
+                                                type="text"
+                                                onChange={this.handleKeywordInput}
+                                                value={this.state.k}
+                                                placeholder="Search Players by name or SteamID"
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-2">
+                                        <input
+                                            type="submit"
+                                            onClick={this.handleSubmit}
+                                            className="btn_search"
+                                            value="Search"
+                                        />
+                                    </div>
+                                </div>
+                            </form>
                         </div>
                     </div>
+                </section>
+                <div className="tickets-block" style={{ background_color: "#393f47" }}>
+                    <div className="container-fluid">
+                        <p className="text-center ">
+                            <NavLink to={'/mapboard/'}>
+                                <b>MapBoard</b>
+                            </NavLink>
+                        </p>
+                    </div>
                 </div>
-                <ul>
+                {this.state.searchBool ? ("") : (<PlayersSearch keyword={this.state.keyword} />)}
-                    <div className="container mm" style={{ marginTop: "85px" }}>
+                <div className="container mm">
-                        <div style={{
+                    <div className="row">
-                            position: 'absolute', left: '50%', top: '30%'
+                        {this.state.players.map(e => (
-                        }}>
+                            <div className="item" key={e.steamID} id={"leaderboard/" + e.steamID}>
-                            <br />
+                                <div className="box_grid">
-                            <br />
-                            {this.state.players.map(e => (
-                                <li key={e.steamID} id={"leaderboard/" + e.steamID}>
                                     <NavLink to={'/player/' + e.steamID}>
                                         <strong className="col-lg-1 col-centered" /> {e.steamID}<br />
                                         <strong className="col-lg-1 col-centered" />{e.name}<br />
-                                        <img src={e.Avatar} alt="" /> <br />
+                                        <figure>
+                                            <img src={e.Avatar} className="img-fluid" alt={e.Avatar} /> <br />
+                                            <div className="read_more">
+                                                <span>Check Player</span>
+                                            </div>
+                                        </figure>
                                         <strong className="col-lg-1 col-centered" />Rank: {e.Rank}<br />
                                         <strong className="col-lg-1 col-centered" />Points: {e.PlayerPoints}<br />
                                         <strong className="col-lg-1 col-centered" />Times: {e.Times}<br />
+                                        <div id="test">
+                                            {e.UrlBanners.map(banners => (
+                                                <img src={banners} alt="" key={banners} />
+                                            ))}
+                                        </div>
                                         <br />
                                         <br />
                                     </NavLink>
-                                </li>
+
-                            ))}
+                                </div> </div>
-                            {!this.state.breakload ? <h1>
+                        ))}
-                                Loading Players <br /> <br /> <br /> <LoadingIndicator />
+                    </div> </div>
-                            </h1> : ""}
+                {!this.state.breakload ? <h1>
-                        </div>
+                    Loading Players <br /> <br /> <br /> <LoadingIndicator />
-                    </div>
+                </h1> : ""}
-                </ul>
             </React.Fragment>
         );
     }

RaceTimer/racetimer_react/src/MapBoard/MapBoard.js

@@ -3,6 +3,8 @@ import Facade from '../Datafacade/datafacade';
 import { NavLink } from 'react-router-dom';
 import Loader from 'react-loader-spinner';
 import { usePromiseTracker } from "react-promise-tracker";
+import { FormControl } from "react-bootstrap";
+import MapsSearch from "../MapsSearch/mapsSearch";
 import '../css/style.css';
 const LoadingIndicator = props => {
     const { promiseInProgress } = usePromiseTracker();
@@ -27,9 +29,21 @@ class MapBoards extends React.Component {
         this.state = {
             maps: [],
             breakload: false,
+            keyword: "",
+            searchBool: true,
         };
     }
 
+    handleKeywordInput = e => {
+        const searchTerm = e.target.value;
+        this.setState({ keyword: searchTerm });
+        this.setState({ searchBool: true });
+    };
+
+    handleSubmit = e => {
+        e.preventDefault();
+        this.setState({ searchBool: false });
+    };
 
     componentWillMount = async () => {
         this.setState({ breakload: false })
@@ -41,31 +55,62 @@ class MapBoards extends React.Component {
     render() {
         return (
             <React.Fragment>
-                <div className="alert alert-primary" >
+                <section className="hero_single version_2 start_bg_zoom">
-                    <div id='containerMaps'>
+                    <div className="wrapper">
-                        <div>
+                        <div className="container">
-                            <NavLink to={'/leaderboard/'}>
+                            <h3>UNLOZE Zombie Escape Mapboard</h3>
-                                <h3> <strong className="col-lg-1 col-centered" /> Leaderboard<br /> </h3>
+                            <p>
-                            </NavLink>
+                                Browse Maps
+                            </p>
+                            <form>
+                                <div className="row no-gutters custom-search-input-2">
+                                    <div className="col-lg-8">
+                                        <div className="form-group">
+                                            <FormControl
+                                                type="text"
+                                                onChange={this.handleKeywordInput}
+                                                value={this.state.k}
+                                                placeholder="Search maps by name"
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-2">
+                                        <input
+                                            type="submit"
+                                            onClick={this.handleSubmit}
+                                            className="btn_search"
+                                            value="Search"
+                                        />
+                                    </div>
+                                </div>
+                            </form>
                         </div>
                     </div>
+                </section>
+                <div className="tickets-block" style={{ background_color: "#393f47" }}>
+                    <div className="container-fluid">
+                        <p className="text-center ">
+                            <NavLink to={'/leaderboard/'}>
+                                <b>Leaderboard</b>
+                            </NavLink>
+                        </p>
+                    </div>
                 </div>
-                <br />
+                {this.state.searchBool ? ("") : (<MapsSearch keyword={this.state.keyword} />)}
-                <br />
                 <div className="container mm" style={{ marginTop: "85px" }}>
                     <div className="row">
                         {this.state.maps.map(e => (
                             <div className="item" key={"mapdivs/" + e.mapname + "/" + e.mapstage}>
                                 <div className="box_grid">
                                     <li key={e.mapname + "/" + e.mapstage} id={"maps/" + e.mapname + "/" + e.mapstage}>
-                                        <div className="alert alert-primary" >
+                                        
                                             <NavLink to={'/map/' + e.mapname + "/" + e.mapstage}>
                                                 <strong className="col-lg-1 col-centered" /> Map: {e.mapname}<br />
                                                 <strong className="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
                                                 <br />
                                                 <br />
                                             </NavLink>
-                                        </div>
+                                       
                                     </li>
                                 </div>
                             </div>

RaceTimer/racetimer_react/src/Maps/Maps.js

@@ -72,7 +72,7 @@ class Maps extends React.Component {
     loadPlayers = async () => {
         const mapname = this.props.match.params.mapname;
         const stage = this.props.match.params.stage;
-        const mapTimes = await Facade.getMapTimesFromCache(mapname, stage, this.state.mapTimes.length + 1);
+        const mapTimes = await Facade.getMapTimesFromCache(mapname, stage, this.state.mapTimes.length);
         this.setState({ mapTimes });
         this.setState({ breakload: true })
     }
@@ -80,7 +80,6 @@ class Maps extends React.Component {
     render() {
         return (
             <React.Fragment>
-                
                 <div className="alert alert-primary" >
                     <div id='containerMaps'>
                         <div>
@@ -99,8 +98,6 @@ class Maps extends React.Component {
                     <div style={{
                         position: 'absolute', left: '50%', top: '30%'
                     }}>
-                        <br />
-                        <br />
                         <h2>  <strong className="col-lg-1 col-centered" />{this.state.mapName}<br /> </h2>
                         <br />
                         <br />
@@ -115,6 +112,11 @@ class Maps extends React.Component {
                                     <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 />
+                                    {Object.keys(e.badgesUrls).map(badges => (
+                                        <div key={e.badgesUrls[badges]}>
+                                            <img src={e.badgesUrls[badges]} alt="" /> <br />
+                                        </div>
+                                    ))}
                                     <br />
                                     <br />
                                 </div>

RaceTimer/racetimer_react/src/MapsSearch/mapsSearch.js

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import Facade from "../Datafacade/datafacade";
+import { NavLink } from 'react-router-dom';
+
+class MapsSearch extends Component {
+    state = {
+        maps: []
+    };
+
+    componentDidMount = async () => {
+        const maps = await Facade.getMapsBySearchCache(this.props.keyword);
+        this.setState({ maps });
+    };
+
+    componentDidUpdate = async prevProps => {
+        if (this.props.keyword !== prevProps.keyword) {
+            const maps = await Facade.getMapsBySearchCache(this.props.keyword);
+            this.setState({ maps });
+        }
+    }
+    render() {
+        return (
+            <React.Fragment>
+                <div className="container mm">
+                    <div className="row">
+                        {this.state.maps.map(e => (
+                            <div className="item" key={"mapdivs/" + e.mapname + "/" + e.mapstage}>
+                                <div className="box_grid">
+                                    <NavLink to={'/map/' + e.mapname + "/" + e.mapstage}>
+                                        <strong className="col-lg-1 col-centered" /> Map: {e.mapname}<br />
+                                        <strong className="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
+                                        <br />
+                                        <br />
+                                    </NavLink>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </React.Fragment>
+        );
+    }
+}
+
+export default MapsSearch;

RaceTimer/racetimer_react/src/Player/Player.js

@@ -27,6 +27,7 @@ class Player extends React.Component {
             mapTimes: [],
             breakload: true,
             scrollListener: {},
+            badgesTransfer: [],
         };
         this.scrollListener = this.handleScroll.bind(this);
     }
@@ -36,8 +37,10 @@ class Player extends React.Component {
         this.setState({ breakload: false })
         const steamid = this.props.match.params.steamid;
         const player = await Facade.getPlayerFromCache(steamid);
+        const badgesTransfer = await Facade.getPlayerBadgesFromCache(steamid);
         const mapTimes = await Facade.getPlayerTimesFromCache(steamid, 0);
         this.setState({ player });
+        this.setState({ badgesTransfer });
         this.setState({ mapTimes });
         this.setState({ breakload: true })
     };
@@ -65,12 +68,20 @@ class Player extends React.Component {
 
     loadMaps = async () => {
         const steamid = this.props.match.params.steamid;
-        const mapTimes = await Facade.getPlayerTimesFromCache(steamid, this.state.mapTimes.length + 1);
+        const mapTimes = await Facade.getPlayerTimesFromCache(steamid, this.state.mapTimes.length);
         this.setState({ mapTimes });
         this.setState({ breakload: true })
     }
 
+
     render() {
+        const badges = Object.keys(this.state.badgesTransfer).map(badges => (
+            this.state.badgesTransfer[badges].map((badge) => {
+                return <div key={badge}>
+                    <img src={badge} alt="" /> <br />
+                </div>
+            })
+        ));
         return (
             <React.Fragment>
                 <div className="alert alert-primary" >
@@ -87,7 +98,6 @@ class Player extends React.Component {
                         </div>
                     </div>
                 </div>
-                
                 <div className="container mm" style={{ marginTop: "85px" }}>
                     <div style={{
                         position: 'absolute', left: '50%', top: '30%'
@@ -100,6 +110,7 @@ class Player extends React.Component {
                                 <strong className="col-lg-1 col-centered" />Rank: {this.state.player.Rank}<br />
                                 <strong className="col-lg-1 col-centered" />Points: {this.state.player.PlayerPoints}<br />
                                 <strong className="col-lg-1 col-centered" />Times: {this.state.player.Times}<br />
+                                {badges}
                                 <br />
                                 <br />
                             </a>
@@ -119,7 +130,6 @@ class Player extends React.Component {
                             {!this.state.breakload ? <h1>
                                 Loading Stats <br /> <br />  <LoadingIndicator />
                             </h1> : ""}
-
                         </div>
                     </div>
                 </div>

RaceTimer/racetimer_react/src/css/style.css

@@ -2825,7 +2825,7 @@ video {
 .custom-search-input-2 input {
     border: 0;
     height: 50px;
-    padding-left: 15px;
+    padding-left: 25px;
     border-right: 1px solid #d2d8dd;
     font-weight: 500
 }
@@ -2900,7 +2900,7 @@ video {
     font-size: 14px;
     font-size: .875rem;
     border: 0;
-    padding: 0 25px;
+    padding: 0 185px;
     height: 50px;
     cursor: pointer;
     outline: 0;
@@ -7637,3 +7637,9 @@ a.social_bt.google:before {
     display: flex;
     flex-wrap: wrap;
   }
+
+  #test{
+    position: static;
+   
+    left: 1000.5px;
+  }

RaceTimer/racetimer_react/src/playerSearch/playersSearch.js

@@ -0,0 +1,57 @@
+import React, { Component } from "react";
+import Facade from "../Datafacade/datafacade";
+import { NavLink } from 'react-router-dom';
+class playersSearch extends Component {
+    state = {
+        players: [],
+        searchBool: true,
+    };
+
+    componentDidMount = async () => {
+        const players = await Facade.getPlayersBySearchCache(this.props.keyword);
+        this.setState({ players });
+    };
+
+    componentDidUpdate = async prevProps => {
+        if (this.props.keyword !== prevProps.keyword) {
+            const players = await Facade.getPlayersBySearchCache(this.props.keyword);
+            this.setState({ players });
+        }
+    }
+    render() {
+        return (
+            <React.Fragment>
+                <div className="container mm">
+                    <div className="row">
+                        {this.state.players.map(e => (
+                            <div className="item" key={"item" + e.steamID}>
+                                <div className="box_grid" key={"grid" + e.steamID}>
+                                    <NavLink to={'/player/' + e.steamID}>
+                                        <strong className="col-lg-1 col-centered" /> {e.steamID}<br />
+                                        <strong className="col-lg-1 col-centered" />{e.name}<br />
+                                        <figure>
+                                            <img src={e.Avatar} className="img-fluid" alt={e.Avatar} /> <br />
+                                            <div className="read_more">
+                                                <span>Check Player</span>
+                                            </div>
+                                        </figure>
+                                        <strong className="col-lg-1 col-centered" />Rank: {e.Rank}<br />
+                                        <strong className="col-lg-1 col-centered" />Points: {e.PlayerPoints}<br />
+                                        <strong className="col-lg-1 col-centered" />Times: {e.Times}<br />
+                                        <div id="test">
+                                            {e.UrlBanners.map(banners => (
+                                                <img src={banners} alt="" key={banners} />
+                                            ))}
+                                        </div>
+                                    </NavLink>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </React.Fragment>
+        );
+    }
+}
+
+export default playersSearch;