UNLOZE/projects-jenz
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

saving udates, not missing much i guess

Browse Source
This commit is contained in:
jenzur
2019-07-14 02:28:16 +02:00
parent 9232830451
commit 3730230925
14 changed files with 537 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RaceTimer/racetimer_react/src/App.js
+4
View File
@@ -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
+60 -1
View File
@@ -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
+88 -33
View File
@@ -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) {
return array[array.length - 2];
findLateIndex(array) {
return array[array.length - 5];
}
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();
if (this.state.breakload) {
const player = this.findLateIndex(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.setState({ breakload: false })
this.loadPlayers();
}
}
};
@@ -69,42 +86,80 @@ class Leaderboard extends React.Component {
render() {
return (
<React.Fragment>
<div className="alert alert-primary" >
<div id='containerMaps'>
<div>
<NavLink to={'/mapboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
</NavLink>
<section className="hero_single version_2 start_bg_zoom">
<div className="wrapper">
<div className="container">
<h3>UNLOZE Zombie Escape LeaderBoard</h3>
<p>
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>
<div className="container mm" style={{ marginTop: "85px" }}>
<div style={{
position: 'absolute', left: '50%', top: '30%'
}}>
<br />
<br />
{this.state.players.map(e => (
<li key={e.steamID} id={"leaderboard/" + e.steamID}>
{this.state.searchBool ? ("") : (<PlayersSearch keyword={this.state.keyword} />)}
<div className="container mm">
<div className="row">
{this.state.players.map(e => (
<div className="item" key={e.steamID} id={"leaderboard/" + e.steamID}>
<div className="box_grid">
<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>
))}
{!this.state.breakload ? <h1>
Loading Players <br /> <br /> <br /> <LoadingIndicator />
</h1> : ""}
</div>
</div>
</ul>
</div> </div>
))}
</div> </div>
{!this.state.breakload ? <h1>
Loading Players <br /> <br /> <br /> <LoadingIndicator />
</h1> : ""}
</React.Fragment>
);
}
RaceTimer/racetimer_react/src/MapBoard/MapBoard.js
+55 -10
View File
@@ -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" >
<div id='containerMaps'>
<div>
<NavLink to={'/leaderboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> Leaderboard<br /> </h3>
</NavLink>
<section className="hero_single version_2 start_bg_zoom">
<div className="wrapper">
<div className="container">
<h3>UNLOZE Zombie Escape Mapboard</h3>
<p>
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 />
<br />
{this.state.searchBool ? ("") : (<MapsSearch keyword={this.state.keyword} />)}
<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
+6 -4
View File
@@ -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
+45
View File
@@ -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
+13 -3
View File
@@ -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
+8 -2
View File
@@ -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;
@@ -7636,4 +7636,10 @@ a.social_bt.google:before {
max-width: 1000px;
display: flex;
flex-wrap: wrap;
}
#test{
position: static;
left: 1000.5px;
}
RaceTimer/racetimer_react/src/playerSearch/playersSearch.js
+57
View File
@@ -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;