Match vision tab overhaul

.eslintrc.json

@@ -12,6 +12,9 @@
   "settings": {
     "import/resolver": "webpack"
   },
+  "globals": {
+    "API_HOST": true
+  },
   "extends": "airbnb",
   "rules": {
     "max-len": ["error", 150],

index.html

@@ -43,5 +43,4 @@
     </script>
     <script src="/build/bundle.js"></script>
   </body>
-
 </html>

package.json

@@ -29,6 +29,7 @@
     "flexboxgrid": "6.3.1",
     "heatmap.js": "2.0.5",
     "isomorphic-fetch": "2.2.1",
+    "lodash": "^4.16.4",
     "material-ui": "0.16.1",
     "node-uuid": "1.4.7",
     "postcss-browser-reporter": "0.5.0",
@@ -38,8 +39,10 @@
     "postcss-loader": "1.1.1",
     "postcss-reporter": "2.0.0",
     "react": "15.3.2",
+    "react-addons-css-transition-group": "^15.3.2",
     "react-dom": "15.3.2",
     "react-flexbox-grid": "0.10.2",
+    "react-measure": "^1.3.1",
     "react-redux": "4.4.5",
     "react-router": "3.0.0",
     "react-router-redux": "4.0.7",
@@ -50,6 +53,7 @@
     "redux-responsive": "3.1.5",
     "redux-thunk": "2.1.0",
     "reselect": "2.5.4",
+    "seamless-immutable": "^6.3.0",
     "webpack": "2.1.0-beta.22",
     "webpack-dashboard": "0.2.0",
     "webpack-dev-server": "1.16.2",
@@ -71,6 +75,8 @@
     "eslint-plugin-react": "6.6.0",
     "file-loader": "0.9.0",
     "json-loader": "0.5.4",
+    "react-addons-perf": "^15.3.2",
+    "react-perf-tool": "^0.1.7",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7"
   },

src/components/App/App.jsx

@@ -20,6 +20,8 @@ const muiTheme = {
   palette: {
     textColor: palette.textColorPrimary,
     primary1Color: palette.blue,
+    canvasColor: palette.primarySurfaceColor,
+    borderColor: palette.dividerColor,
   },
   button: { height: 38 },
 };

src/components/Match/Match.css

@@ -1,5 +1,14 @@
 @import "../palette.css";
 
+:root {
+  --ward-log-height: 50px;
+}
+
+:export {
+  wardLogRowOddSurfaceColor: var(--tableRowOddSurfaceColor);
+  wardLogRowEvenSurfaceColor: var(--tableRowEvenSurfaceColor);
+}
+
 .Header {
   text-align: center;
   display: block;
@@ -148,6 +157,117 @@
   vertical-align: middle;
 }
 
+.wardLog {
+  width: 100%;
+  font-size: var(--fontSizeSmall);
+
+  & .wardLogHeader {
+    background-color: var(--tableHeaderSurfaceColor);
+    border-bottom: 1px solid var(--dividerLightColor);
+    text-transform: uppercase;
+    height: 58px;
+  }
+
+  & .wardLogList {
+    padding: 0;
+    margin: 0;
+  }
+
+  & .timespan {
+    text-align: right;
+  }
+}
+
+.wardLogItem {
+  height: var(--ward-log-height);
+  background: rgb(31, 33, 45);
+  border-bottom: 1px solid var(--dividerColor);
+}
+
+.trans-table-row-enter {
+  height: 0;
+  opacity: 0;
+
+  &.trans-table-row-enter-active {
+    height: var(--ward-log-height);
+    opacity: 1;
+    transition: height 300ms ease, opacity 300ms ease;
+  }
+}
+
+.trans-table-row-leave {
+  height:  var(--ward-log-height);
+  opacity: 1;
+
+  &.trans-table-row-leave-active {
+    height: 0px;
+    opacity: 0;
+    transition: height 300ms ease, opacity 300ms ease;
+  }
+}
+
+.ward-pin-enter {
+  opacity: 0;
+
+  &.ward-pin-enter-active {
+    opacity: 1;
+    transition: opacity 150ms ease;
+  }
+}
+
+.ward-pin-leave {
+  opacity: 1;
+
+  &.ward-pin-leave-active {
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+}
+
+.sliderTicks {
+  position: relative;
+  height: 30px;
+  margin-top: 33px;
+  margin-bottom: -33px;
+  font-size: var(--fontSizeTiny);
+  border-color: var(--sliderTicksColor);
+  color: var(--sliderTicksColor);
+
+  & .sliderTick {
+    position: absolute;
+    display: inline-block;
+    height: 100%;
+    padding: 0 0.4em;
+    border-width: 0px;
+    border-color: inherit;
+    border-style: solid;
+    border-left-width: 1px;
+    cursor: pointer;
+
+    transition: color 150ms ease, border-color 150ms ease;
+
+    &.active {
+      border-color: var(--sliderTicksColorActive);
+      color: var(--sliderTicksColorActive);
+    }
+  }
+}
+
+.wardLogPlayerFilter {
+  padding: 0 .5rem;
+  font-size: var(--fontSizeSmall);
+
+  & .filterHeader {
+    padding: .5rem;
+    border-bottom: 1px solid var(--dividerLightColor);
+  }
+
+  & .filterRow {
+    padding: .5em;
+    margin: 0 0;
+  }
+}
+
 .cosmetics {
   display: inline-block;
   margin: 5px;
@@ -222,3 +342,4 @@
     }
   }
 }
+

src/components/Match/Vision/PlayerFilter.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  Row,
+  Col,
+} from 'react-flexbox-grid';
+import Avatar from 'material-ui/Avatar';
+import Button from 'material-ui/RaisedButton';
+import {
+  grey800 as filterOff,
+  blueGrey700 as filterOn,
+} from 'material-ui/styles/colors';
+import styles from '../Match.css'; // extract filters from there
+
+import { heroTd } from '../matchColumns';
+
+
+export default class PlayerFilter extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.getObserverCount = () => this.props.player.obs_log.length;
+    this.getSentryCount = () => this.props.player.sen_log.length;
+    this.getMuiThemeProps = () => ({
+      fullWidth: true,
+      disabledBackgroundColor: filterOff,
+    });
+  }
+
+  generateFilterKey(type) {
+    return `${this.props.player.player_slot}-${type}`;
+  }
+
+  render() {
+    const {
+      player,
+      onFilterClick,
+    } = this.props;
+    const obsCount = this.getObserverCount();
+    const senCount = this.getSentryCount();
+    const [opacityOn, opacityOff] = [1, 0.4];
+    return (
+      <Row
+        className={styles.filterRow}
+        middle="xs"
+        between="xs"
+      >
+        <Col xs={12} sm={7}>
+          <Row xs>
+            <Col>{heroTd(player)}</Col>
+          </Row>
+        </Col>
+        <Col xs={12} sm={5}>
+          <Row>
+            <Col xs>
+              <Button
+                {...this.getMuiThemeProps()}
+                label={obsCount}
+                disabled={!obsCount}
+                backgroundColor={this.generateFilterKey('observer') in this.props.activeFilters ? filterOff : filterOn}
+                style={{ opacity: obsCount > 0 ? opacityOn : opacityOff }}
+                onClick={() => onFilterClick(this.generateFilterKey('observer'), player.player_slot, 'observer')}
+                icon={<Avatar size={24} src={`${API_HOST}/apps/dota2/images/items/ward_observer_lg.png`} />}
+              />
+            </Col>
+            <Col xs>
+              <Button
+                {...this.getMuiThemeProps()}
+                label={senCount}
+                disabled={!senCount}
+                backgroundColor={this.generateFilterKey('sentry') in this.props.activeFilters ? filterOff : filterOn}
+                style={{ opacity: senCount > 0 ? opacityOn : opacityOff }}
+                onClick={() => onFilterClick(this.generateFilterKey('sentry'), player.player_slot, 'sentry')}
+                icon={<Avatar size={24} src={`${API_HOST}/apps/dota2/images/items/ward_sentry_lg.png`} />}
+              />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}