mirror of
https://github.com/mgerb/go-discord-bot
synced 2026-01-11 09:32:50 +00:00
finished ui for pubg
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -7,3 +7,4 @@ bot
|
||||
sounds
|
||||
debug
|
||||
youtube
|
||||
go-discord-bot
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
module.exports = {
|
||||
"env": {
|
||||
"browser": true,
|
||||
"commonjs": true,
|
||||
"es6": true,
|
||||
"node": true
|
||||
},
|
||||
"extends": "eslint:recommended",
|
||||
"installedESLint": true,
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"experimentalObjectRestSpread": true,
|
||||
"jsx": true
|
||||
},
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"react"
|
||||
],
|
||||
"rules": {
|
||||
"indent": [
|
||||
"error",
|
||||
4
|
||||
],
|
||||
"semi": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
|
||||
"react/display-name": 0, // Prevent missing displayName in a React component definition
|
||||
"react/jsx-no-undef": 2, // Disallow undeclared variables in JSX
|
||||
"react/jsx-sort-props": 0, // Enforce props alphabetical sorting
|
||||
"react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused
|
||||
"react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused
|
||||
"react/no-did-mount-set-state": 2, // Prevent usage of setState in componentDidMount
|
||||
"react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate
|
||||
"react/no-multi-comp": 0, // Prevent multiple component definition per file
|
||||
"react/no-unknown-property": 2, // Prevent usage of unknown DOM property
|
||||
"react/prop-types": 2, // Prevent missing props validation in a React component definition
|
||||
"react/react-in-jsx-scope": 2, // Prevent missing React when using JSX
|
||||
"react/self-closing-comp": 2, // Prevent extra closing tags for components without children
|
||||
"react/wrap-multilines": 2 // Prevent missing parentheses around multilines JSX
|
||||
}
|
||||
|
||||
};
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"indent_size": 4,
|
||||
"beautify.language": {
|
||||
"js": {
|
||||
"type": ["javascript", "json", "jsx"],
|
||||
"filename": [".jshintrc", ".jsbeautify"],
|
||||
"e4x": true
|
||||
// "ext": ["js", "json"]
|
||||
// ^^ to set extensions to be beautified using the javascript beautifier
|
||||
},
|
||||
"css": ["css", "scss"],
|
||||
"html": ["htm", "html"]
|
||||
// ^^ providing just an array sets the VS Code file type
|
||||
}
|
||||
}
|
||||
@@ -8,8 +8,9 @@
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
|
||||
tr {
|
||||
tr + tr {
|
||||
border-top: 1px solid $gray3;
|
||||
}
|
||||
|
||||
@@ -17,3 +18,15 @@
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.pubg__button-row {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.button {
|
||||
min-width: 100px;
|
||||
|
||||
& + .button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,9 @@ interface Props {
|
||||
|
||||
interface State {
|
||||
players: Player[];
|
||||
selectedRegion: string;
|
||||
selectedMatch: string;
|
||||
statList: string[];
|
||||
}
|
||||
|
||||
interface Player {
|
||||
@@ -25,79 +28,113 @@ export class Pubg extends React.Component<Props, State> {
|
||||
super();
|
||||
this.state = {
|
||||
players: [],
|
||||
selectedRegion: 'agg',
|
||||
selectedMatch: 'squad',
|
||||
statList: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
axios.get("/stats/pubg").then((res) => {
|
||||
|
||||
console.log(res.data);
|
||||
this.setState({
|
||||
players: this.filterData(res.data),
|
||||
players: _.map(res.data) as any,
|
||||
});
|
||||
|
||||
console.log(this.state.players);
|
||||
this.setStatList();
|
||||
});
|
||||
}
|
||||
|
||||
filterData(data: any): Player[] {
|
||||
return _.map(_.values(data), (data: any) => {
|
||||
// get stat list
|
||||
setStatList() {
|
||||
|
||||
// hacky way to find existing content -- to tired to make it pretty
|
||||
let i = 0;
|
||||
let stats;
|
||||
while (!stats) {
|
||||
if (i > this.state.players.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let regions: any = _.chain(data.Stats).groupBy('Region')
|
||||
/*
|
||||
.mapValues((val: any) => {
|
||||
return _.groupBy(val, 'Match');
|
||||
})
|
||||
*/
|
||||
.value();
|
||||
stats = _.find(_.get(this.state, `players[${i}].Stats`), (s: any) => s.Match === this.state.selectedMatch.toLowerCase());
|
||||
i++;
|
||||
}
|
||||
|
||||
|
||||
_.forIn(regions, (val: any, key: string) => {
|
||||
regions[key] = _.groupBy(val, 'Match');
|
||||
|
||||
_.forIn(regions[key], (val2: any, key2: string) => {
|
||||
//regions[key][key2] = _.groupBy(regions[key][key2][0].Stats, 'field');
|
||||
regions[key][key2] = _.groupBy(_.flatten(regions[key][key2][0].Stats), 'field');
|
||||
_.each(regions[key][key2], s => s = _.flatten(s));
|
||||
|
||||
//console.log(regions[key][key2][0]);
|
||||
|
||||
});
|
||||
if (stats) {
|
||||
this.setState({
|
||||
statList: _.sortBy(_.map(stats.Stats, 'field')) as any,
|
||||
});
|
||||
|
||||
//console.log(regions);
|
||||
|
||||
return {
|
||||
...{ PlayerName: data.PlayerName },
|
||||
...regions,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
insertTableData() {
|
||||
|
||||
return this.state.players.map((stat: any, index: number) => {
|
||||
insertRows(): any {
|
||||
return this.state.statList.map((val: any, index: any) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{stat.PlayerName}</td>
|
||||
<td>{val}</td>
|
||||
{this.state.players.map((player: any, i: number) => {
|
||||
// find player stats for field
|
||||
let playerStat = _.find(player.Stats, (p: any) => {
|
||||
return p.Match === this.state.selectedMatch.toLowerCase() && p.Region === this.state.selectedRegion.toLowerCase();
|
||||
});
|
||||
|
||||
return <td key={i}>{_.get(_.find(_.get(playerStat, 'Stats'), (p: any) => p.field === val), 'displayValue')}</td>
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
buttonRegion(title: string) {
|
||||
let lowerTitle = title === 'All' ? 'agg' : title.toLowerCase()
|
||||
return (
|
||||
<button className={`button ${lowerTitle === this.state.selectedRegion ? 'button--primary' : ''}`}
|
||||
onClick={() => {
|
||||
this.setState({selectedRegion: lowerTitle});
|
||||
this.setStatList();
|
||||
}}>{title}</button>
|
||||
);
|
||||
}
|
||||
|
||||
buttonMatch(title: string) {
|
||||
let lowerTitle = title.toLowerCase()
|
||||
return (
|
||||
<button className={`button ${lowerTitle === this.state.selectedMatch ? 'button--primary' : ''}`}
|
||||
onClick={() => {
|
||||
this.setState({selectedMatch: lowerTitle});
|
||||
this.setStatList();
|
||||
}}>{title}</button>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="pubg__container">
|
||||
<div className="card">
|
||||
<div className="card" style={{maxWidth:'initial'}}>
|
||||
<div className="card__header">PUBG Stats</div>
|
||||
|
||||
<div className="pubg__button-row">
|
||||
{this.buttonMatch('Solo')}
|
||||
{this.buttonMatch('Duo')}
|
||||
{this.buttonMatch('Squad')}
|
||||
</div>
|
||||
|
||||
<div className="pubg__button-row">
|
||||
{this.buttonRegion('All')}
|
||||
{this.buttonRegion('Na')}
|
||||
{this.buttonRegion('As')}
|
||||
{this.buttonRegion('Au')}
|
||||
</div>
|
||||
|
||||
<table className="pubg__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.insertTableData()}
|
||||
<tr>
|
||||
<th></th>
|
||||
{this.state.players.map((val: any, index: number) => {
|
||||
return <th key={index}>{val.PlayerName}</th>;
|
||||
})}
|
||||
</tr>
|
||||
{this.insertRows()}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user