UNLOZE/projects-jenz
10
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/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>
);
}