From 5112bac349e975a7c69a98994582e4dce515e690 Mon Sep 17 00:00:00 2001 From: Mitchell Gerber Date: Thu, 3 Aug 2017 22:49:31 -0500 Subject: [PATCH] finished ui for pubg --- .gitignore | 1 + client/.eslintrc.js | 45 ------------ client/.jsbeautifyrc | 15 ---- client/app/pages/Pubg/Pubg.scss | 15 +++- client/app/pages/Pubg/Pubg.tsx | 123 +++++++++++++++++++++----------- 5 files changed, 95 insertions(+), 104 deletions(-) delete mode 100644 client/.eslintrc.js delete mode 100644 client/.jsbeautifyrc diff --git a/.gitignore b/.gitignore index 1f1f18e..07f7dd0 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ bot sounds debug youtube +go-discord-bot diff --git a/client/.eslintrc.js b/client/.eslintrc.js deleted file mode 100644 index 15cd681..0000000 --- a/client/.eslintrc.js +++ /dev/null @@ -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 - } - -}; \ No newline at end of file diff --git a/client/.jsbeautifyrc b/client/.jsbeautifyrc deleted file mode 100644 index c35339e..0000000 --- a/client/.jsbeautifyrc +++ /dev/null @@ -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 - } -} \ No newline at end of file diff --git a/client/app/pages/Pubg/Pubg.scss b/client/app/pages/Pubg/Pubg.scss index c24d1b1..275c12b 100644 --- a/client/app/pages/Pubg/Pubg.scss +++ b/client/app/pages/Pubg/Pubg.scss @@ -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; + } + } +} diff --git a/client/app/pages/Pubg/Pubg.tsx b/client/app/pages/Pubg/Pubg.tsx index 3347966..1bfee08 100644 --- a/client/app/pages/Pubg/Pubg.tsx +++ b/client/app/pages/Pubg/Pubg.tsx @@ -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 { 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 ( - {stat.PlayerName} + {val} + {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 {_.get(_.find(_.get(playerStat, 'Stats'), (p: any) => p.field === val), 'displayValue')} + })} ); }); } + buttonRegion(title: string) { + let lowerTitle = title === 'All' ? 'agg' : title.toLowerCase() + return ( + + ); + } + + buttonMatch(title: string) { + let lowerTitle = title.toLowerCase() + return ( + + ); + } + render() { return (
-
+
PUBG Stats
+ +
+ {this.buttonMatch('Solo')} + {this.buttonMatch('Duo')} + {this.buttonMatch('Squad')} +
+ +
+ {this.buttonRegion('All')} + {this.buttonRegion('Na')} + {this.buttonRegion('As')} + {this.buttonRegion('Au')} +
+ - - - - - - {this.insertTableData()} + + + {this.state.players.map((val: any, index: number) => { + return ; + })} + + {this.insertRows()}
Name
{val.PlayerName}