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

just making sure to have a backup online

Browse Source
This commit is contained in:
jenzur
2019-07-05 23:35:05 +02:00
parent a8e5349e31
commit f126440c11
17 changed files with 47854 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RaceTimer/racetimer_react/src/Leaderboard/Leaderboard.js
+63 -24
View File
@@ -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>
<div className="container mm" style={{ marginTop: "85px" }}>
<div style={{
position: 'absolute', left: '50%', top: '30%'
}}>
{this.state.players.map(e => (
<div>
<NavLink to={'/player/' + e.steamID}>
<strong class="col-lg-1 col-centered" /> {e.steamID}<br />
<strong class="col-lg-1 col-centered" />{e.name}<br />
<img src={e.Avatar} /> <br />
<strong class="col-lg-1 col-centered" />Rank: {e.Rank}<br />
<strong class="col-lg-1 col-centered" />Points: {e.PlayerPoints}<br />
<strong class="col-lg-1 col-centered" />Times: {e.Times}<br />
<br />
<br />
</NavLink>
</div>
))}
<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 => (
<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 />
<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 />
<br />
<br />
</NavLink>
</li>
))}
{!this.state.breakload ? <h1> <br /> <br /><p className="loading">
Loading More Players...
</p> </h1> : ""}
</div>
</div>
</div>
</ul>
</React.Fragment>
);
}
}
export default Leaderboard;