q3stats/frontend/src/views/PlayerGameView.js

/**
 * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

import React from "react";
import underscore from "underscore";

import BaseView from "../lib/BaseView";
import ChartComponent from "../components/ChartComponent";
import ContainerComponent from "../components/ContainerComponent";
import ItemIconComponent from "../components/ItemIconComponent";
import LoaderComponent from "../components/LoaderComponent";
import PowerupIconComponent from "../components/PowerupIconComponent";
import WeaponIconComponent from "../components/WeaponIconComponent";

class PlayerGameView extends BaseView {
  constructor (props) {
    super(props);

    this.chartConfig = {
      "credits": {
        "enabled": false
      }
    };

    this.state = {
      ready: false,
      map: "",
      weaponStats: {},
      itemStats: {},
      powerupStats: {},
      scoreChartSeries: [],
      damageChartSeries: [],
      totalsChartSeries: []
    };
  }
  componentDidMount () {
    let url = (
      "/api/v1/players/" + this.props.params.player + "/game/" +
      this.props.params.game
    );

    this.fetch(url).then((data) => {
      this.setState({
        ready: true,
        map: data.map,
        weaponStats: data.weapons || {},
        itemStats: data.items || {},
        powerupStats: data.powerups || {}
      });

      this.loadChartsData();
    });
  }
  processSerieData (serie, name) {
    if (!serie) {
      return [];
    }

    return [
      {
        "type": "pie",
        "name": name,
        "data": serie
      }
    ];
  }
  loadChartsData () {
    let url = (
      "/api/v1/charts/player/" + this.props.params.player + "/game/" +
      this.props.params.game
    );

    this.fetch(url).then((data) => {
      this.setState({
        scoreChartSeries: this.processSerieData(data.score),
        damageChartSeries: this.processSerieData(data.damage),
        totalsChartSeries: this.processSerieData(data.totals)
      });
    });
  }
  render () {
    return (
      <ContainerComponent>
        <h2>{this.props.params.player} stats on {this.state.map}</h2>

        <div className="row">
          <div className="col-sm-4">
            <ChartComponent
              config={this.chartConfig}
              series={this.state.scoreChartSeries}
              title="Score breakdown" />
          </div>

          <div className="col-sm-4">
            <ChartComponent
              config={this.chartConfig}
              series={this.state.damageChartSeries}
              title="Damage breakdown" />
          </div>

          <div className="col-sm-4">
            <ChartComponent
              config={this.chartConfig}
              series={this.state.totalsChartSeries}
              title="Health & armor" />
          </div>
        </div>

        <h2>Weapons</h2>

        <table className="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th>Weapon</th>
              <th>Shots</th>
              <th>Hits</th>
              <th>Kills</th>
              <th>Accuracy</th>
            </tr>
          </thead>

          <tbody>
            {underscore.keys(this.state.weaponStats).length == 0 &&
              <tr>
                <td colSpan="5"><strong>No stats :(</strong></td>
              </tr>
            }

            {underscore.map(
              underscore.keys(this.state.weaponStats), (key, index) => {
                let stats = this.state.weaponStats[key];

                return (
                  <tr key={index}>
                    <td><WeaponIconComponent weapon={key} /></td>
                    <td className="text-right">{stats.shots}</td>
                    <td className="text-right">{stats.hits}</td>
                    <td className="text-right">{stats.kills}</td>
                    <td className="text-right">{stats.accuracy}</td>
                  </tr>
                );
              }
            )}
          </tbody>
        </table>

        <div className="row">
          <div className="col-sm-6">
            <h2>Items</h2>

            <table className="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <th>Item</th>
                  <th>Pickups</th>
                </tr>
              </thead>

              <tbody>
                {underscore.keys(this.state.itemStats).length == 0 &&
                  <tr>
                    <td colSpan="2"><strong>No stats :(</strong></td>
                  </tr>
                }

                {underscore.map(
                  underscore.keys(this.state.itemStats), (key, index) => {
                    let value = this.state.itemStats[key];

                    return (
                      <tr key={index}>
                        <td><ItemIconComponent item={key} /></td>
                        <td className="text-right">{value}</td>
                      </tr>
                    );
                  }
                )}
              </tbody>
            </table>
          </div>

          <div className="col-sm-6">
            <h2>Powerups</h2>

            <table className="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <th>Item</th>
                  <th>Pickups</th>
                  <th>Total time [s]</th>
                </tr>
              </thead>

              <tbody>
                {underscore.keys(this.state.powerupStats).length == 0 &&
                  <tr>
                    <td colSpan="3"><strong>No stats :(</strong></td>
                  </tr>
                }

                {underscore.map(
                  underscore.keys(this.state.powerupStats), (key, index) => {
                    let stats = this.state.powerupStats[key];

                    return (
                      <tr key={index}>
                        <td><PowerupIconComponent powerup={key} /></td>
                        <td className="text-right">{stats[0]}</td>
                        <td className="text-right">{stats[1]}</td>
                      </tr>
                    );
                  }
                )}
              </tbody>
            </table>
          </div>
        </div>

        <LoaderComponent visible={!this.state.ready} />
      </ContainerComponent>
    );
  }
}

export default PlayerGameView;