finished ui for pubg

.gitignore

@@ -7,3 +7,4 @@ bot
 sounds
 debug
 youtube
+go-discord-bot

client/.eslintrc.js

@@ -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
-    }
-
-};

client/.jsbeautifyrc

@@ -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
-    }
-}

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;
+        }
+    }
+}

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<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[] {
+    // get stat list
-        return _.map(_.values(data), (data: any) => {
+    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')
+            stats = _.find(_.get(this.state, `players[${i}].Stats`), (s: any) => s.Match === this.state.selectedMatch.toLowerCase());
-            /*
+            i++;
-            .mapValues((val: any) => {
+        }
-                return  _.groupBy(val, 'Match');
-            })
-            */
-            .value();
 
-
+        if (stats) {
-            _.forIn(regions, (val: any, key: string) => {
+            this.setState({
-                regions[key] = _.groupBy(val, 'Match');
+                statList: _.sortBy(_.map(stats.Stats, 'field')) as any,
-
-                _.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]);
-
-                });
             });
-
+        }
-            //console.log(regions);
-
-            return {
-                ...{ PlayerName: data.PlayerName },
-                ...regions,
-            };
-        });
     }
 
-    insertTableData() {
+    insertRows(): any {
-
+        return this.state.statList.map((val: any, index: any) => {
-        return this.state.players.map((stat: any, index: number) => {
             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>