make moves selectable

dist/app.css

@@ -53,9 +53,11 @@
 
 .PokemonApp__displayWrapper__2PiN5 {
   margin: 0 auto;
-  width: 30rem;
   display: flex;
-  flex-flow: column nowrap; }
+  flex-flow: column wrap;
+  align-content: center; }
+  .PokemonApp__displayWrapper__2PiN5 > * {
+    width: 425px; }
 
 .PokemonApp__container__MsUHy {
   display: flex;
@@ -64,9 +66,9 @@
   .PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
     display: flex;
     flex-flow: column nowrap;
-    flex-basis: 45%;
     align-items: center; }
   .PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L {
+    width: 45%;
     text-align: center; }
   .PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
     flex-grow: 1;
@@ -183,9 +185,11 @@
 
 .PokemonApp__displayWrapper__2PiN5 {
   margin: 0 auto;
-  width: 30rem;
   display: flex;
-  flex-flow: column nowrap; }
+  flex-flow: column wrap;
+  align-content: center; }
+  .PokemonApp__displayWrapper__2PiN5 > * {
+    width: 425px; }
 
 .PokemonApp__container__MsUHy {
   display: flex;
@@ -194,14 +198,18 @@
   .PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
     display: flex;
     flex-flow: column nowrap;
-    flex-basis: 45%;
     align-items: center; }
   .PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L {
+    width: 45%;
     text-align: center; }
   .PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
     flex-grow: 1;
     align-items: start; }
 
+.LeagueIvExplorer__wrapper__3Utm- {
+  display: flex;
+  flex-flow: column nowrap; }
+
 .LeagueIvExplorer__container__23wLQ {
   margin-bottom: 1rem; }
 
@@ -345,6 +353,49 @@
     .TypeIndicator__pokemonType__1rrg9.fairy::after {
       box-shadow: 0 -4px #ee99ac, 0 -8px, 4px 0 #ee99ac, 4px -4px, 8px 0, 0 4px #ee99ac, 0 8px, -4px 0 #ee99ac, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
 
+.MovesExplorer__wrapper__iV8WK {
+  font-size: 1em; }
+
+.MovesExplorer__legacy__ixKar {
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
+  background-size: 14px 14px; }
+
+.MovesDropdown__wrapper__lbjH6 {
+  text-transform: capitalize; }
+
+.MovesDropdown__menu__2yxRm {
+  width: 425px;
+  max-height: 450px;
+  position: fixed;
+  top: 25%;
+  left: 50%;
+  margin-left: -160px;
+  padding-left: 0;
+  z-index: 2; }
+  .MovesDropdown__menu__2yxRm .list-item.active::before,
+  .MovesDropdown__menu__2yxRm .list-item:hover::before {
+    top: 8px; }
+
+.MovesDropdown__listItem__3fTKH {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 2rem;
+  white-space: nowrap;
+  text-transform: capitalize; }
+  .MovesDropdown__listItem__3fTKH > * {
+    flex: 0 1 auto; }
+  .MovesDropdown__listItem__3fTKH > .nes-container {
+    flex-basis: 9em; }
+
+.MovesDropdown__legacy__1WRv9 { }
+
+.MovesExplorer__wrapper__iV8WK {
+  font-size: 1em; }
+
+.MovesExplorer__legacy__ixKar {
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
+  background-size: 14px 14px; }
+
 .PokemonDisplay__highlight__2zbxz {
   color: #fff;
   pointer-events: none; }

dist/global.css

@@ -6512,6 +6512,22 @@ a.list-item {
   .nes-textarea::placeholder {
     color: #b6b6b6; }
 
+.nes-select.dropdown {
+  border-image-slice: 2;
+  border-image-width: 2;
+  border-image-repeat: stretch;
+  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
+  border-image-outset: 2;
+  width: 100%;
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  border-radius: 0;
+  outline-color: #e7e7e7;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-style: solid;
+  border-width: 4px; }
+
 @media screen and (max-width: 768px) {
   .nes-field.is-inline {
     display: inherit; } }

dist/main-bundle.js

@@ -25638,7 +25638,7 @@ if (false) {} else {
   !*** ./node_modules/react-measure/dist/index.esm.js ***!
   \******************************************************/
 /*! exports provided: default, withContentRect */
-/*! ModuleConcatenation bailout: Module is referenced from these modules with unsupported syntax: ./src/ts/app/components/LeagueStatsList.tsx (referenced with cjs require), ./src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx (referenced with cjs require) */
+/*! ModuleConcatenation bailout: Module is referenced from these modules with unsupported syntax: ./src/ts/app/components/LeagueStatsList.tsx (referenced with cjs require), ./src/ts/app/components/MovesDropdown.tsx (referenced with cjs require), ./src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx (referenced with cjs require) */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -36676,7 +36676,9 @@ function () {
 
               case 3:
                 response = _context.sent;
-                return _context.abrupt("return", response);
+                return _context.abrupt("return", Object.assign({}, response, {
+                  combatMoves: new Map(response.combatMoves)
+                }));
 
               case 5:
               case "end":
@@ -36859,6 +36861,8 @@ var Header_1 = __webpack_require__(/*! app/components/Header */ "./src/ts/app/co
 
 var LeagueIvExplorer_1 = __webpack_require__(/*! app/components/LeagueIvExplorer */ "./src/ts/app/components/LeagueIvExplorer.tsx");
 
+var MovesExplorer_1 = __webpack_require__(/*! app/components/MovesExplorer */ "./src/ts/app/components/MovesExplorer.tsx");
+
 var PokemonDisplay_1 = __webpack_require__(/*! app/components/PokemonDisplay */ "./src/ts/app/components/PokemonDisplay.tsx");
 
 var PokemonSelectList_1 = __webpack_require__(/*! app/components/PokemonSelectList/PokemonSelectList */ "./src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx");
@@ -36881,6 +36885,12 @@ function (_react_1$default$Comp) {
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(PokemonApp).call(this, props));
 
+    _this.handleToggleInterruption = function (isInterruption) {
+      _this.setState({
+        isInterruption: isInterruption
+      });
+    };
+
     _this.handleOverlayClick = function () {
       _this.setState({
         activeNavigation: null
@@ -36978,6 +36988,10 @@ function (_react_1$default$Comp) {
       _this.props.dispatch(ActionsPokemonExplorer.maximizeLevel());
     };
 
+    _this.handleChangeTypeCoverage = function (coverage) {
+      _this.props.dispatch(ActionsPokemonExplorer.setTypeCoverage(coverage));
+    };
+
     _this.handleChangeLeagueNavigation = function (league) {
       var _this$props = _this.props,
           history = _this$props.history,
@@ -36996,6 +37010,7 @@ function (_react_1$default$Comp) {
     };
 
     _this.state = {
+      isInterruption: false,
       activeNavigation: null,
       widgets: {
         pvp: true,
@@ -37058,11 +37073,13 @@ function (_react_1$default$Comp) {
       var _this$props$pokemonEx = this.props.pokemonExplorerState,
           league = _this$props$pokemonEx.league,
           individualValues = _this$props$pokemonEx.individualValues,
-          leaguePokemon = _this$props$pokemonEx.leaguePokemon;
+          leaguePokemon = _this$props$pokemonEx.leaguePokemon,
+          combatMoves = _this$props$pokemonEx.combatMoves;
       var _this$state = this.state,
+          isInterruption = _this$state.isInterruption,
           activeNavigation = _this$state.activeNavigation,
           widgets = _this$state.widgets;
-      var isOverlayShown = activeNavigation === 'pokedex';
+      var isOverlayShown = isInterruption || activeNavigation === 'pokedex';
       var wrapperCss = classnames_1.default(styles.wrapper, _defineProperty({}, styles.overlaid, isOverlayShown));
       var leftNavCss = classnames_1.default(styles.leftNavigation);
       var displayWrapperCss = classnames_1.default(styles.displayWrapper);
@@ -37106,6 +37123,9 @@ function (_react_1$default$Comp) {
       }, leaguePokemon !== null && react_1.default.createElement(PokemonDisplay_1.PokemonDisplay, {
         leaguePokemon: leaguePokemon,
         isHighlighted: isOverlayShown
+      }), widgets.types && leaguePokemon !== null && react_1.default.createElement(TypeEffectiveDisplay_1.TypeEffectiveDisplay, {
+        effectiveness: leaguePokemon.effectiveness,
+        pokemonName: leaguePokemon.name
       }), widgets.pvp && leaguePokemon !== null && react_1.default.createElement(LeagueIvExplorer_1.LeagueIvExplorer, {
         activeLeague: league,
         leaguePokemon: leaguePokemon,
@@ -37113,10 +37133,13 @@ function (_react_1$default$Comp) {
         handleChangeIndividualValue: this.handleChangeIndividualValue,
         handleMaximizeLevel: this.handleMaximizeLevel,
         handleChangeLeague: this.handleChangeLeague
-      })), widgets.types && leaguePokemon !== null && react_1.default.createElement(TypeEffectiveDisplay_1.TypeEffectiveDisplay, {
-        effectiveness: leaguePokemon.effectiveness,
-        pokemonName: leaguePokemon.name
-      }), react_1.default.createElement("div", {
+      }), widgets.moves && leaguePokemon !== null && react_1.default.createElement(MovesExplorer_1.MovesExplorer, {
+        movesById: combatMoves,
+        quickMoves: leaguePokemon.moves.quick,
+        chargeMoves: leaguePokemon.moves.cinematic,
+        handleToggleDropdownOpen: this.handleToggleInterruption,
+        handleChangeTypeCoverage: this.handleChangeTypeCoverage
+      })), react_1.default.createElement("div", {
         className: leftNavCss
       }, react_1.default.createElement("button", {
         className: pvpButtonCss,
@@ -37230,6 +37253,12 @@ exports.setMaxPossibleStats = function (maxStats) {
   });
 };
 
+exports.setCombatMoveStats = function (combatMoves) {
+  return typesafe_actions_1.action(types_1.PokemonExplorerActionTypes.SET_COMBAT_MOVE_STATS, {
+    combatMoves: combatMoves
+  });
+};
+
 exports.setLeaguePokemon = function (leaguePokemon) {
   return typesafe_actions_1.action(types_1.PokemonExplorerActionTypes.SET_LEAGUE_POKEMON, {
     leaguePokemon: leaguePokemon
@@ -37266,6 +37295,12 @@ exports.setActiveLeague = function (league) {
   });
 };
 
+exports.setTypeCoverage = function (typeCoverage) {
+  return typesafe_actions_1.action(types_1.PokemonExplorerActionTypes.SET_TYPE_COVERAGE, {
+    typeCoverage: typeCoverage
+  });
+};
+
 exports.fetchConfig = function () {
   return function (dispatch, getState, extraArguments) {
     return __awaiter(_this, void 0, void 0,
@@ -37282,8 +37317,9 @@ exports.fetchConfig = function () {
             case 2:
               config = _context.sent;
               dispatch(exports.setMaxPossibleStats(config.maxPossibleStats));
+              dispatch(exports.setCombatMoveStats(config.combatMoves));
 
-            case 4:
+            case 5:
             case "end":
               return _context.stop();
           }
@@ -37918,7 +37954,9 @@ function (_react_1$default$Comp) {
       var leagueLeftColumnCss = classnames_1.default(styles.leftColumn);
       var leagueRightColumnCss = classnames_1.default(styles.rightColumn);
       var pokemonInfoWrapper = classnames_1.default(styles.container, styles.pokemonInfoWrapper);
-      return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(LeagueSelector_1.LeagueSelector, {
+      return react_1.default.createElement("div", {
+        className: styles.wrapper
+      }, react_1.default.createElement(LeagueSelector_1.LeagueSelector, {
         activeLeague: activeLeague,
         handleLeagueSelect: handleChangeLeague
       }), react_1.default.createElement("section", {
@@ -38272,8 +38310,8 @@ function (_react_1$default$Comp) {
     _this.state = {
       activePokemonId: pogo_protos_1.default.Enums.PokemonId.MISSINGNO,
       activePokemonForm: pogo_protos_1.default.Enums.Form.FORM_UNSET,
-      listRef: react_1.default.createRef(),
       hasSetActiveStats: false,
+      listRef: react_1.default.createRef(),
       activeIndex: -1,
       dimensions: {
         width: -1,
@@ -38369,6 +38407,405 @@ exports.LeagueStatsList = LeagueStatsList;
 
 /***/ }),
 
+/***/ "./src/ts/app/components/MovesDropdown.tsx":
+/*!*************************************************!*\
+  !*** ./src/ts/app/components/MovesDropdown.tsx ***!
+  \*************************************************/
+/*! no static exports found */
+/*! ModuleConcatenation bailout: Module is not an ECMAScript module */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) {
+    if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+  }
+  result["default"] = mod;
+  return result;
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __importDefault(__webpack_require__(/*! react */ "./node_modules/react/index.js"));
+
+var react_measure_1 = __importDefault(__webpack_require__(/*! react-measure */ "./node_modules/react-measure/dist/index.esm.js"));
+
+var react_window_1 = __webpack_require__(/*! react-window */ "./node_modules/react-window/dist/index.esm.js");
+
+var classnames_1 = __importDefault(__webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"));
+
+var TypeIndicator_1 = __webpack_require__(/*! ./TypeIndicator */ "./src/ts/app/components/TypeIndicator.tsx");
+
+var styles = __importStar(__webpack_require__(/*! app/styles/MovesDropdown.scss */ "./src/ts/app/styles/MovesDropdown.scss"));
+
+var MovesDropdown =
+/*#__PURE__*/
+function (_react_1$default$Comp) {
+  _inherits(MovesDropdown, _react_1$default$Comp);
+
+  function MovesDropdown(props) {
+    var _this;
+
+    _classCallCheck(this, MovesDropdown);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(MovesDropdown).call(this, props));
+
+    _this.toggleMenu = function () {
+      var isMenuOpen = !_this.state.isMenuOpen;
+
+      _this.setState({
+        isMenuOpen: isMenuOpen
+      });
+
+      _this.props.handleToggleOpen(isMenuOpen);
+    };
+
+    _this.state = {
+      isMenuOpen: false,
+      listRef: react_1.default.createRef(),
+      dimensions: {
+        width: -1,
+        height: -1
+      }
+    };
+    return _this;
+  }
+
+  _createClass(MovesDropdown, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          movesById = _this$props.movesById,
+          selectedMove = _this$props.selectedMove,
+          options = _this$props.options;
+      var isMenuOpen = this.state.isMenuOpen;
+      var _this$state$dimension = this.state.dimensions,
+          width = _this$state$dimension.width,
+          height = _this$state$dimension.height;
+
+      var onResize = function onResize(contentRect) {
+        if (typeof contentRect.bounds !== 'undefined') {
+          _this2.setState({
+            dimensions: contentRect.bounds
+          });
+        }
+      };
+
+      var wrapperCss = classnames_1.default('nes-select', 'dropdown', styles.wrapper);
+      var menuCss = classnames_1.default('nes-container', styles.menu);
+      var moveName = 'Select a move';
+
+      if (selectedMove !== null) {
+        var moveStats = movesById.get(selectedMove.id);
+
+        if (moveStats) {
+          moveName = moveStats.name;
+        } else {
+          moveName = 'UNKNOWN MOVE';
+        }
+      }
+
+      return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("div", {
+        className: wrapperCss,
+        onClick: this.toggleMenu
+      }, moveName), isMenuOpen && react_1.default.createElement("div", {
+        className: menuCss
+      }, react_1.default.createElement(react_measure_1.default, {
+        bounds: true,
+        onResize: onResize
+      }, function (_ref) {
+        var measureRef = _ref.measureRef;
+        return react_1.default.createElement("div", {
+          ref: measureRef
+        }, react_1.default.createElement(react_window_1.FixedSizeList, {
+          ref: _this2.state.listRef,
+          height: height,
+          itemCount: options.length,
+          itemSize: 35,
+          width: width
+        }, _this2.rowFactory.bind(_this2)));
+      })));
+    }
+  }, {
+    key: "rowFactory",
+    value: function rowFactory(_ref2) {
+      var _this3 = this;
+
+      var index = _ref2.index,
+          style = _ref2.style;
+      var _this$props2 = this.props,
+          movesById = _this$props2.movesById,
+          selectedMove = _this$props2.selectedMove,
+          options = _this$props2.options;
+      var move = options[index];
+      var moveStats = movesById.get(move.id);
+      var css = classnames_1.default('list-item', // global style
+      styles.listItem, {
+        active: selectedMove && selectedMove.id === move.id
+      });
+      var typeCss = classnames_1.default(_defineProperty({}, styles.legacy, move.isLegacy));
+
+      var onClick = function onClick() {
+        _this3.props.handleChangeSelectedOption(move);
+
+        _this3.toggleMenu();
+      };
+
+      return react_1.default.createElement(react_1.default.Fragment, null, moveStats && react_1.default.createElement("a", {
+        key: index,
+        style: style,
+        className: css,
+        onClick: onClick
+      }, react_1.default.createElement("span", null, moveStats.name), react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
+        className: typeCss,
+        type: moveStats.type
+      })));
+    }
+  }]);
+
+  return MovesDropdown;
+}(react_1.default.Component);
+
+exports.MovesDropdown = MovesDropdown;
+
+/***/ }),
+
+/***/ "./src/ts/app/components/MovesExplorer.tsx":
+/*!*************************************************!*\
+  !*** ./src/ts/app/components/MovesExplorer.tsx ***!
+  \*************************************************/
+/*! no static exports found */
+/*! ModuleConcatenation bailout: Module is not an ECMAScript module */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) {
+    if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+  }
+  result["default"] = mod;
+  return result;
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __importDefault(__webpack_require__(/*! react */ "./node_modules/react/index.js"));
+
+var classnames_1 = __importDefault(__webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"));
+
+var MovesDropdown_1 = __webpack_require__(/*! app/components/MovesDropdown */ "./src/ts/app/components/MovesDropdown.tsx");
+
+var TypeIndicator_1 = __webpack_require__(/*! ./TypeIndicator */ "./src/ts/app/components/TypeIndicator.tsx");
+
+var styles = __importStar(__webpack_require__(/*! app/styles/MovesExplorer.scss */ "./src/ts/app/styles/MovesExplorer.scss"));
+
+var MovesExplorer =
+/*#__PURE__*/
+function (_react_1$default$Comp) {
+  _inherits(MovesExplorer, _react_1$default$Comp);
+
+  function MovesExplorer(props) {
+    var _this;
+
+    _classCallCheck(this, MovesExplorer);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(MovesExplorer).call(this, props));
+
+    _this.getMoveType = function (move) {
+      var moveStats = null;
+
+      if (move !== null) {
+        moveStats = _this.props.movesById.get(move.id) || null;
+      }
+
+      if (moveStats !== null) {
+        return moveStats.type;
+      }
+
+      return null;
+    };
+
+    _this.handleChangeQuickMove = function (option) {
+      var _this$state = _this.state,
+          chargeMove1 = _this$state.chargeMove1,
+          chargeMove2 = _this$state.chargeMove2;
+
+      _this.setState({
+        quickMove: option
+      });
+
+      _this.props.handleChangeTypeCoverage({
+        type1: _this.getMoveType(option),
+        type2: _this.getMoveType(chargeMove1),
+        type3: _this.getMoveType(chargeMove2)
+      });
+    };
+
+    _this.handleChangeChargeMove1 = function (option) {
+      var _this$state2 = _this.state,
+          quickMove = _this$state2.quickMove,
+          chargeMove2 = _this$state2.chargeMove2;
+
+      _this.setState({
+        chargeMove1: option
+      });
+
+      _this.props.handleChangeTypeCoverage({
+        type1: _this.getMoveType(quickMove),
+        type2: _this.getMoveType(option),
+        type3: _this.getMoveType(chargeMove2)
+      });
+    };
+
+    _this.handleChangeChargeMove2 = function (option) {
+      var _this$state3 = _this.state,
+          quickMove = _this$state3.quickMove,
+          chargeMove1 = _this$state3.chargeMove1;
+
+      _this.setState({
+        chargeMove2: option
+      });
+
+      _this.props.handleChangeTypeCoverage({
+        type1: _this.getMoveType(quickMove),
+        type2: _this.getMoveType(chargeMove1),
+        type3: _this.getMoveType(option)
+      });
+    };
+
+    _this.state = {
+      quickMove: null,
+      chargeMove1: null,
+      chargeMove2: null
+    };
+    return _this;
+  }
+
+  _createClass(MovesExplorer, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          movesById = _this$props.movesById,
+          quickMoves = _this$props.quickMoves,
+          chargeMoves = _this$props.chargeMoves,
+          handleToggleDropdownOpen = _this$props.handleToggleDropdownOpen;
+      var _this$state4 = this.state,
+          quickMove = _this$state4.quickMove,
+          chargeMove1 = _this$state4.chargeMove1,
+          chargeMove2 = _this$state4.chargeMove2;
+      var wrapperCss = classnames_1.default('nes-container', styles.wrapper);
+      var quickMoveType = this.getMoveType(quickMove);
+      var quickMoveCss = classnames_1.default(_defineProperty({}, styles.legacy, quickMove ? quickMove.isLegacy : false));
+      var chargeMove1Type = this.getMoveType(chargeMove1);
+      var chargeMove1Css = classnames_1.default(_defineProperty({}, styles.legacy, chargeMove1 ? chargeMove1.isLegacy : false));
+      var chargeMove2Type = this.getMoveType(chargeMove2);
+      var chargeMove2Css = classnames_1.default(_defineProperty({}, styles.legacy, chargeMove2 ? chargeMove2.isLegacy : false));
+      return react_1.default.createElement("div", {
+        className: wrapperCss
+      }, react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
+        movesById: movesById,
+        selectedMove: quickMove,
+        options: quickMoves,
+        handleToggleOpen: handleToggleDropdownOpen,
+        handleChangeSelectedOption: this.handleChangeQuickMove
+      }), quickMove && quickMoveType && react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
+        className: quickMoveCss,
+        type: quickMoveType
+      }), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
+        movesById: movesById,
+        selectedMove: chargeMove1,
+        options: chargeMoves,
+        handleToggleOpen: handleToggleDropdownOpen,
+        handleChangeSelectedOption: this.handleChangeChargeMove1
+      }), chargeMove1 && chargeMove1Type && react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
+        className: chargeMove1Css,
+        type: chargeMove1Type
+      }), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
+        movesById: movesById,
+        selectedMove: chargeMove2,
+        options: chargeMoves,
+        handleToggleOpen: handleToggleDropdownOpen,
+        handleChangeSelectedOption: this.handleChangeChargeMove2
+      }), chargeMove2 && chargeMove2Type && react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
+        className: chargeMove2Css,
+        type: chargeMove2Type
+      }));
+    }
+  }]);
+
+  return MovesExplorer;
+}(react_1.default.Component);
+
+exports.MovesExplorer = MovesExplorer;
+
+/***/ }),
+
 /***/ "./src/ts/app/components/PokemonDisplay.tsx":
 /*!**************************************************!*\
   !*** ./src/ts/app/components/PokemonDisplay.tsx ***!
@@ -39747,7 +40184,13 @@ exports.initialState = {
     ivAtk: null,
     ivDef: null
   },
-  league: League_1.League.GREAT
+  league: League_1.League.GREAT,
+  combatMoves: new Map(),
+  typeCoverage: {
+    type1: null,
+    type2: null,
+    type3: null
+  }
 };
 
 var reduceSetIsLoading = function reduceSetIsLoading(state, action) {
@@ -39762,6 +40205,12 @@ var reduceSetMaxPossibleStats = function reduceSetMaxPossibleStats(state, action
   });
 };
 
+var reduceSetCombatMoveStats = function reduceSetCombatMoveStats(state, action) {
+  return Object.assign({}, state, {
+    combatMoves: action.payload.combatMoves
+  });
+};
+
 var reduceSetLeaguePokemon = function reduceSetLeaguePokemon(state, action) {
   return Object.assign({}, state, {
     leaguePokemon: action.payload.leaguePokemon
@@ -39806,6 +40255,12 @@ var reduceSetActiveLeague = function reduceSetActiveLeague(state, action) {
   });
 };
 
+var reduceSetTypeCoverage = function reduceSetTypeCoverage(state, action) {
+  return Object.assign({}, state, {
+    typeCoverage: Object.assign({}, action.payload.typeCoverage)
+  });
+};
+
 exports.PokemonExplorerReducers = function () {
   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : exports.initialState;
   var action = arguments.length > 1 ? arguments[1] : undefined;
@@ -39817,6 +40272,9 @@ exports.PokemonExplorerReducers = function () {
     case types_1.PokemonExplorerActionTypes.SET_MAX_STATS:
       return reduceSetMaxPossibleStats(state, action);
 
+    case types_1.PokemonExplorerActionTypes.SET_COMBAT_MOVE_STATS:
+      return reduceSetCombatMoveStats(state, action);
+
     case types_1.PokemonExplorerActionTypes.SET_LEAGUE_POKEMON:
       return reduceSetLeaguePokemon(state, action);
 
@@ -39835,6 +40293,9 @@ exports.PokemonExplorerReducers = function () {
     case types_1.PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE:
       return reduceSetActiveLeague(state, action);
 
+    case types_1.PokemonExplorerActionTypes.SET_TYPE_COVERAGE:
+      return reduceSetTypeCoverage(state, action);
+
     default:
       return state;
   }
@@ -39864,7 +40325,7 @@ module.exports = {"ivInput":"IvForm__ivInput__1KM34","levelInput":"IvForm__level
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"container":"LeagueIvExplorer__container__23wLQ PokemonApp__container__MsUHy","leftColumn":"LeagueIvExplorer__leftColumn__1HzQ- PokemonApp__leftColumn__3Lv_L","rightColumn":"LeagueIvExplorer__rightColumn__rwhPb PokemonApp__rightColumn__1xE25","leaguePokemonRank":"LeagueIvExplorer__leaguePokemonRank__25epF","pokemonInfoWrapper":"LeagueIvExplorer__pokemonInfoWrapper__3Zqjc","pokemonRankValue":"LeagueIvExplorer__pokemonRankValue__2bxg3","ivsContainer":"LeagueIvExplorer__ivsContainer__7fSaL","ivContainerTitle":"LeagueIvExplorer__ivContainerTitle__3P9q4","diplayingIvList":"LeagueIvExplorer__diplayingIvList__3vrin"};
+module.exports = {"wrapper":"LeagueIvExplorer__wrapper__3Utm-","container":"LeagueIvExplorer__container__23wLQ PokemonApp__container__MsUHy","leftColumn":"LeagueIvExplorer__leftColumn__1HzQ- PokemonApp__leftColumn__3Lv_L","rightColumn":"LeagueIvExplorer__rightColumn__rwhPb PokemonApp__rightColumn__1xE25","leaguePokemonRank":"LeagueIvExplorer__leaguePokemonRank__25epF","pokemonInfoWrapper":"LeagueIvExplorer__pokemonInfoWrapper__3Zqjc","pokemonRankValue":"LeagueIvExplorer__pokemonRankValue__2bxg3","ivsContainer":"LeagueIvExplorer__ivsContainer__7fSaL","ivContainerTitle":"LeagueIvExplorer__ivContainerTitle__3P9q4","diplayingIvList":"LeagueIvExplorer__diplayingIvList__3vrin"};
 
 /***/ }),
 
@@ -39894,6 +40355,32 @@ module.exports = {"selectList":"LeagueStatsList__selectList__S5RTA","listItem":"
 
 /***/ }),
 
+/***/ "./src/ts/app/styles/MovesDropdown.scss":
+/*!**********************************************!*\
+  !*** ./src/ts/app/styles/MovesDropdown.scss ***!
+  \**********************************************/
+/*! no static exports found */
+/*! ModuleConcatenation bailout: Module is not an ECMAScript module */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"wrapper":"MovesDropdown__wrapper__lbjH6","menu":"MovesDropdown__menu__2yxRm","listItem":"MovesDropdown__listItem__3fTKH","legacy":"MovesDropdown__legacy__1WRv9 MovesExplorer__legacy__ixKar"};
+
+/***/ }),
+
+/***/ "./src/ts/app/styles/MovesExplorer.scss":
+/*!**********************************************!*\
+  !*** ./src/ts/app/styles/MovesExplorer.scss ***!
+  \**********************************************/
+/*! no static exports found */
+/*! ModuleConcatenation bailout: Module is not an ECMAScript module */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"wrapper":"MovesExplorer__wrapper__iV8WK","legacy":"MovesExplorer__legacy__ixKar"};
+
+/***/ }),
+
 /***/ "./src/ts/app/styles/PokemonApp.scss":
 /*!*******************************************!*\
   !*** ./src/ts/app/styles/PokemonApp.scss ***!
@@ -39976,12 +40463,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.PokemonExplorerActionTypes = {
   SET_IS_LOADING: 'POKEMON_EXPLORER/SET_IS_LOADING',
   SET_MAX_STATS: 'POKEMON_EXPLORER/SET_MAX_STATS',
+  SET_COMBAT_MOVE_STATS: 'POKEMON_EXPLORER/SET_COMBAT_MOVE_STATS',
   SET_LEAGUE_POKEMON: 'POKEMON_EXPLORER/SET_LEAGUE_POKEMON',
   SET_IV_LEVEL: 'POKEMON_EXPLORER/SET_IV_LEVEL',
   SET_IV_HP: 'POKEMON_EXPLORER/SET_IV_HP',
   SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
   SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
-  SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE'
+  SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
+  SET_TYPE_COVERAGE: 'POKEMON_EXPLORER/SET_TYPE_COVERAGE'
 };
 
 /***/ }),

src/scripts/generatePokemonData.ts

@@ -238,7 +238,6 @@ fs.mkdirSync(outPokemonPath, { recursive: true });
     }
 
     try {
-        // TODO: add moves
         const attackTypeEffectivenessJson = [ ...attackTypeEffectiveness ].map((tuple) => {
             return [ tuple[0], [ ...tuple[1] ] ];
         });

src/scripts/parseGameMaster.ts

@@ -84,7 +84,7 @@ export const parseGameMaster = async () => {
                     });
                 });
                 legacyMoves.cinematic_moves.forEach((id) => {
-                    mon.moves.quick.push({
+                    mon.moves.cinematic.push({
                         id,
                         isLegacy: true,
                     });
@@ -142,12 +142,22 @@ export const parseGameMaster = async () => {
         } else if (entry.template_id.indexOf('COMBAT_V') === 0 && entry.combat_move && entry.combat_move.unique_id) {
             const combatMoveId = entry.combat_move.unique_id || POGOProtos.Enums.PokemonMove.MOVE_UNSET;
             const formatMoveName = (moveId : string) => {
-                const fastMove = '_FAST';
-                const fastMoveIndex = moveId.lastIndexOf(fastMove);
                 let moveName = moveId;
-                if (fastMoveIndex + fastMove.length === moveId.length) {
+
+                // TODO: WEATHER_BALL_* moves are not assigned as of now, so not filtering them
+
+                const blastoiseMove = '_BLASTOISE';
+                const blastoiseMoveIndex = moveName.lastIndexOf(blastoiseMove);
+                if (blastoiseMoveIndex > -1 && blastoiseMoveIndex + blastoiseMove.length === moveName.length) {
+                    moveName = moveName.substr(0, blastoiseMoveIndex);
+                }
+
+                const fastMove = '_FAST';
+                const fastMoveIndex = moveName.lastIndexOf(fastMove);
+                if (fastMoveIndex > -1 && fastMoveIndex + fastMove.length === moveName.length) {
                     moveName = moveName.substr(0, fastMoveIndex);
                 }
+
                 return moveName.replace(/_/, ' ').toLowerCase();
             };
             combatMoves.set(combatMoveId, {

src/scss/Variables.scss

@@ -1,5 +1,11 @@
 @import '~nes.css/scss/base/color-palette';
 
+$container-width: (
+  desktop: 425px,
+  tablet: 425px,
+  mobile: 425px
+);
+
 $game-boy-1: #e3eec0;
 $game-boy-2: #aeba89;
 $game-boy-3: #5e6745;

src/scss/index.scss

@@ -145,6 +145,25 @@ a.list-item {
   }
 }
 
+// same as .nes-input
+.nes-select.dropdown {
+  border-image-slice: 2;
+  border-image-width: 2;
+  border-image-repeat: stretch;
+  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
+  border-image-outset: 2;
+  width: 100%;
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  // cursor: url(../assets/cursor-click.png) 14 0,pointer;
+  border-radius: 0;
+  outline-color: #e7e7e7;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-style: solid;
+  border-width: 4px;
+}
+
 @media screen and (max-width: 768px) {
   .nes-field.is-inline {
     display: inherit;

src/ts/app/components/MovesDropdown.tsx

@@ -1,5 +1,3 @@
-import POGOProtos from 'pogo-protos';
-
 import React from 'react';
 import { ContentRect, default as Measure } from 'react-measure';
 import { FixedSizeList } from 'react-window';
@@ -67,11 +65,14 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
         };
 
         const wrapperCss = classNames(
-            'nes-container',
-            'is-rounded',
             'nes-select',
+            'dropdown',
             styles.wrapper,
         );
+        const menuCss = classNames(
+            'nes-container',
+            styles.menu,
+        );
 
         let moveName = 'Select a move';
         if (selectedMove !== null) {
@@ -91,7 +92,7 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
                     { moveName }
                 </div>
                 { isMenuOpen &&
-                    <div>
+                    <div className={ menuCss }>
                         <Measure
                             bounds={ true }
                             onResize={ onResize }
@@ -141,6 +142,9 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
                 active: selectedMove && selectedMove.id === move.id,
             }
         );
+        const typeCss = classNames({
+            [styles.legacy]: move.isLegacy
+        });
         const onClick = () => {
             this.props.handleChangeSelectedOption(move);
             this.toggleMenu();
@@ -156,7 +160,7 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
                         onClick={ onClick }
                     >
                         <span>{ moveStats.name }</span>
-                        <TypeIndicator type={ moveStats.type } />
+                        <TypeIndicator className={ typeCss } type={ moveStats.type } />
                     </a>
                 }
             </React.Fragment>

src/ts/app/components/MovesExplorer.tsx

@@ -56,8 +56,17 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
         );
 
         const quickMoveType = this.getMoveType(quickMove);
+        const quickMoveCss = classNames({
+            [styles.legacy]: quickMove ? quickMove.isLegacy : false,
+        });
         const chargeMove1Type = this.getMoveType(chargeMove1);
+        const chargeMove1Css = classNames({
+            [styles.legacy]: chargeMove1 ? chargeMove1.isLegacy : false,
+        });
         const chargeMove2Type = this.getMoveType(chargeMove2);
+        const chargeMove2Css = classNames({
+            [styles.legacy]: chargeMove2 ? chargeMove2.isLegacy : false,
+        });
 
         return (
             <div className={ wrapperCss }>
@@ -69,7 +78,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
                     handleChangeSelectedOption={ this.handleChangeQuickMove }
                 />
                 { quickMove && quickMoveType &&
-                    <TypeIndicator type={ quickMoveType } />
+                    <TypeIndicator className={ quickMoveCss } type={ quickMoveType } />
                 }
                 <MovesDropdown
                     movesById={ movesById }
@@ -79,7 +88,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
                     handleChangeSelectedOption={ this.handleChangeChargeMove1 }
                 />
                 { chargeMove1 && chargeMove1Type &&
-                    <TypeIndicator type={ chargeMove1Type } />
+                    <TypeIndicator className={ chargeMove1Css } type={ chargeMove1Type } />
                 }
                 <MovesDropdown
                     movesById={ movesById }
@@ -89,7 +98,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
                     handleChangeSelectedOption={ this.handleChangeChargeMove2 }
                 />
                 { chargeMove2 && chargeMove2Type &&
-                    <TypeIndicator type={ chargeMove2Type } />
+                    <TypeIndicator className={ chargeMove2Css } type={ chargeMove2Type } />
                 }
             </div>
         );