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

saving some updates

Browse Source
This commit is contained in:
jenzur
2019-07-10 00:47:24 +02:00
parent f126440c11
commit 9232830451
14 changed files with 682 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RaceTimer/racetimer_react/src/Maps/Maps.js
+93 -29
View File
@@ -1,6 +1,25 @@
import React from 'react';
import Facade from '../Datafacade/datafacade';
import { NavLink } from 'react-router-dom';
import Loader from 'react-loader-spinner';
import { usePromiseTracker } from "react-promise-tracker";
import '../css/style.css';
const LoadingIndicator = props => {
const { promiseInProgress } = usePromiseTracker();
return promiseInProgress &&
<div
style={{
width: "100%",
height: "100",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<Loader type="TailSpin" color="#2BAD60" height="100" width="100" />
</div>
};
class Maps extends React.Component {
@@ -9,57 +28,102 @@ class Maps extends React.Component {
this.state = {
mapTimes: [],
mapName: '',
breakload: true,
scrollListener: {},
fetchsize: 0,
};
this.scrollListener = this.handleScroll.bind(this);
}
componentWillMount = async () => {
window.addEventListener('scroll', this.scrollListener);
this.setState({ breakload: false })
const mapname = this.props.match.params.mapname;
const stage = this.props.match.params.stage;
const mapTimes = await Facade.getMapTimesFromCache(mapname, stage);
const mapTimes = await Facade.getMapTimesFromCache(mapname, stage, 0);
const fetchsize = await Facade.getMapTimesFromCacheSize(mapname, stage);
this.setState({ mapTimes });
this.setState({ mapName: mapname })
this.setState({ breakload: true })
this.setState({ fetchsize });
};
componentWillUnmount() {
window.removeEventListener("scroll", this.scrollListener);
}
findSecondLast(array) {
return array[array.length - 2];
}
handleScroll = () => {
if (this.state.breakload && this.state.fetchsize > this.state.mapTimes.length) {
const player = this.findSecondLast(this.state.mapTimes);
var lastLi = document.getElementById('maps/' + player.steamID);
var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
var pageOffset = window.pageYOffset + window.innerHeight;
if (pageOffset > lastLiOffset) {
this.setState({ breakload: false })
this.loadPlayers();
}
}
};
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);
this.setState({ mapTimes });
this.setState({ breakload: true })
}
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 id='containerMaps'>
<div>
<NavLink to={'/leaderboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> leaderboard<br /> </h3>
</NavLink>
</div>
<div>
<NavLink to={'/mapboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
</NavLink>
</div>
</div>
</div>
<div className="container mm" style={{ marginTop: "85px" }}>
<div className="container mm">
<div style={{
position: 'absolute', left: '50%', top: '30%'
}}>
<br />
<br />
<div>
<strong className="col-lg-1 col-centered" />{this.state.mapName}<br />
<br />
<br />
{this.state.mapTimes.map(e => (
<div className="item" key={e.steamID}>
<div className="box_grid">
<NavLink to={'/player/' + e.steamID}>
<strong className="col-lg-1 col-centered" /> SteamID: {e.steamID}<br />
<strong className="col-lg-1 col-centered" /> Name: {e.name}<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>
<h2> <strong className="col-lg-1 col-centered" />{this.state.mapName}<br /> </h2>
<br />
<br />
{this.state.mapTimes.map(e => (
<li key={e.steamID} id={"maps/" + e.steamID}>
<div className="box_grid">
<NavLink to={'/player/' + e.steamID}>
<strong className="col-lg-1 col-centered" /> SteamID: {e.steamID}<br />
<strong className="col-lg-1 col-centered" /> Name: {e.name}<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>
))}
</li>
))}
{!this.state.breakload ? <h1>
Loading Players <br /> <br /> <LoadingIndicator />
</h1> : ""}
</div>
</div>
</div>
</React.Fragment>