[WIP] live matches

src/actions/index.js

@@ -82,6 +82,7 @@ export const getAbilityIds = () => async (dispatch) => {
 };
 export * from './requestActions';
 export * from './formActions';
+export const getLive = () => action('live', process.env.REACT_APP_API_HOST, 'api/live');
 export const getScenariosItemTimings = params => action('scenariosItemTimings', process.env.REACT_APP_API_HOST, 'api/scenarios/itemTimings', params);
 export const getScenariosLaneRoles = params => action('scenariosLaneRoles', process.env.REACT_APP_API_HOST, 'api/scenarios/laneRoles', params);
 export const getScenariosMisc = params => action('scenariosMisc', process.env.REACT_APP_API_HOST, 'api/scenarios/misc', params);

src/components/App/App.jsx

@@ -24,6 +24,7 @@ import Records from '../Records';
 import Scenarios from '../Scenarios';
 // import Predictions from '../Predictions';
 import Meta from '../Meta';
+import Live from '../Live';
 import Api from '../Api';
 import Footer from '../Footer';
 import constants from '../constants';
@@ -137,6 +138,7 @@ class App extends React.Component {
               <Route exact path="/meta" component={Meta} />
               <Route exact path="/scenarios/:info?" component={Scenarios} />
               <Route exact path="/api-keys" component={Api} />
+              <Route exact path="/live" component={Live} />
               <Route component={FourOhFour} />
             </Switch>
           </StyledBodyDiv>

src/components/Header/Header.jsx

@@ -99,6 +99,7 @@ class Header extends React.Component {
       <Link key="header_heroes" to="/heroes">{strings.header_heroes}</Link>,
       <Link key="header_distributions" to="/distributions">{strings.header_distributions}</Link>,
       <Link key="header_records" to="/records">{strings.header_records}</Link>,
+      <Link key="header_live" to="/live">{strings.header_live}</Link>,
       <Link key="header_scenarios" to="/scenarios">{strings.header_scenarios}</Link>,
       <Link key="header_api" to="/api-keys">{strings.header_api}</Link>,
     // <Link key="header_predictions" to="/predictions">Predictions</Link>,

src/components/Live/index.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import heroes from 'dotaconstants/build/heroes.json';
+import Heading from '../Heading';
+import Spinner from '../Spinner';
+import strings from '../../lang';
+import { getLive } from '../../actions';
+import { TableHeroImage } from '../Visualizations';
+import { formatSeconds } from '../../utility';
+
+class Live extends React.Component {
+  componentDidMount() {
+    this.props.dispatchLive();
+  }
+  render() {
+    const { data, loading } = this.props;
+    data.sort((a, b) => b.sort_score - a.sort_score);
+    if (loading) {
+      return <Spinner />;
+    }
+    return (
+      <div>
+        <Heading title={strings.header_live} />
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+          {data.map(game => (
+            <div style={{ width: '25%' }}>
+              <a href={`steam://rungameid/570//watch_server ${game.server_steam_id}`}>Watch Game</a>
+              <div>{game.spectators} watching</div>
+              <div>{formatSeconds(game.game_time)}</div>
+              {game.average_mmr ? <div>{game.average_mmr} Average MMR</div> : null}
+              <div>{game.radiant_score} - {game.dire_score}</div>
+              <div>{game.radiant_lead} Radiant lead</div>
+              <div>
+                {game.players.filter((player, i) => i < 5).map(player => (
+                  <div>
+                    <TableHeroImage
+                      image={heroes[player.hero_id] && process.env.REACT_APP_API_HOST + heroes[player.hero_id].img}
+                      title={player.name}
+                      accountId={player.account_id}
+                      heroName={heroes[player.hero_id] ? heroes[player.hero_id].localized_name : strings.general_no_hero}
+                    />
+                  </div>))}
+              </div>
+              <div>
+                {game.players.filter((player, i) => i >= 5).map(player => (
+                  <div>
+                    <TableHeroImage
+                      image={heroes[player.hero_id] && process.env.REACT_APP_API_HOST + heroes[player.hero_id].img}
+                      title={player.name}
+                      accountId={player.account_id}
+                      heroName={heroes[player.hero_id] ? heroes[player.hero_id].localized_name : strings.general_no_hero}
+                    />
+                  </div>))}
+              </div>
+            </div>))}
+        </div>
+      </div>);
+  }
+}
+
+Live.propTypes = {
+  dispatchLive: PropTypes.func,
+  data: PropTypes.arrayOf(PropTypes.shape({})),
+  loading: PropTypes.bool,
+};
+
+const mapStateToProps = state => ({
+  data: state.app.live.data,
+  loading: state.app.live.loading,
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatchLive: info => dispatch(getLive(info)),
+});
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(Live);

src/lang/en-US.json

@@ -306,6 +306,7 @@
   "header_explorer": "Explorer",
   "header_teams": "Teams",
   "header_meta": "Meta",
+  "header_live": "Live",
   "header_scenarios": "Scenarios",
   "header_api": "API",
 

src/reducers/index.js

@@ -49,6 +49,7 @@ export default combineReducers({
   abilityIds: (state = {}, action) => ((action && action.type === 'abilityIds') ? action.payload : state),
   form,
   request,
+  live: reducer('live'),
   scenariosItemTimings: reducer('scenariosItemTimings'),
   scenariosLaneRoles: reducer('scenariosLaneRoles'),
   scenariosMisc: reducer('scenariosMisc'),