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 {connect} from "react-redux";
import underscore from "underscore";

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";
import {cleanup, loadData} from "../actions/playerGame";

class PlayerGameView extends React.PureComponent {
  constructor (props) {
    super(props);

    this.chartConfig = {
      "credits": {
        "enabled": false
      }
    };
  }
  componentDidMount () {
    this.props.dispatch(loadData(
      this.props.dispatch, this.props.params.player, this.props.params.game
    ));
  }
  componentWillUnmount () {
    this.props.dispatch(cleanup());
  }
  render () {
    return (
      <ContainerComponent>
        <h2>{this.props.params.player} stats on {this.props.map}</h2>

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

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

          <div className="col-sm-4">
            <ChartComponent
              config={this.chartConfig}
              series={this.props.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.props.weaponStats).length == 0 &&
              <tr>
                <td colSpan="5"><strong>No stats :(</strong></td>
              </tr>
            }

            {underscore.map(
              underscore.keys(this.props.weaponStats), (key, index) => {
                let stats = this.props.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.props.itemStats).length == 0 &&
                  <tr>
                    <td colSpan="2"><strong>No stats :(</strong></td>
                  </tr>
                }

                {underscore.map(
                  underscore.keys(this.props.itemStats), (key, index) => {
                    let value = this.props.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.props.powerupStats).length == 0 &&
                  <tr>
                    <td colSpan="3"><strong>No stats :(</strong></td>
                  </tr>
                }

                {underscore.map(
                  underscore.keys(this.props.powerupStats), (key, index) => {
                    let stats = this.props.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.props.loading} />
      </ContainerComponent>
    );
  }
}

PlayerGameView.propTypes = {
  loading: React.PropTypes.bool.isRequired,
  map: React.PropTypes.string.isRequired,
  weaponStats: React.PropTypes.object.isRequired,
  itemStats: React.PropTypes.object.isRequired,
  powerupStats: React.PropTypes.object.isRequired,
  scoreChartSeries: React.PropTypes.array.isRequired,
  damageChartSeries: React.PropTypes.array.isRequired,
  totalsChartSeries: React.PropTypes.array.isRequired,
  params: React.PropTypes.object.isRequired
};

const mapStateToProps = (state, props) => {
  return {
    loading: state.playerGame.loading,
    map: state.playerGame.map,
    weaponStats: state.playerGame.weaponStats,
    itemStats: state.playerGame.itemStats,
    powerupStats: state.playerGame.powerupStats,
    scoreChartSeries: state.playerGame.scoreChartSeries,
    damageChartSeries: state.playerGame.damageChartSeries,
    totalsChartSeries: state.playerGame.totalsChartSeries,
    params: props.params
  };
};

const reduxContainer = connect(mapStateToProps)(PlayerGameView);

export default reduxContainer;