From 4bfb76bde897fe45339fc98732aa7b4779090b71 Mon Sep 17 00:00:00 2001 From: Jeff Colombo Date: Mon, 4 Mar 2019 22:16:26 -0500 Subject: [PATCH] refactor pokemon info into component --- dist/app.css | 114 +++++-- dist/main-bundle.js | 316 ++++++++++++------ .../PokemonExplorer/PokemonDisplay.tsx | 142 ++++++++ .../PokemonExplorer/PokemonExplorer.tsx | 131 ++------ .../styles/PokemonDisplay.scss | 46 +++ .../styles/PokemonDisplay.scss.d.ts | 11 + .../styles/PokemonExplorer.scss | 49 +-- .../styles/PokemonExplorer.scss.d.ts | 11 +- 8 files changed, 528 insertions(+), 292 deletions(-) create mode 100644 src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx create mode 100644 src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss create mode 100644 src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss.d.ts diff --git a/dist/app.css b/dist/app.css index ac4a414..028473c 100644 --- a/dist/app.css +++ b/dist/app.css @@ -264,45 +264,25 @@ display: flex; flex-flow: column nowrap; } -.PokemonExplorer__pokemonName__2Jl9u { - margin-bottom: 0; } - -.PokemonExplorer__pokemonInfoWrapper__1oqey { - margin-bottom: 1rem; } - -.PokemonExplorer__pokemonInfoWrapper__1oqey, -.PokemonExplorer__leaguePokemonRank__2Oq1D { +.PokemonExplorer__container__3LR-_ { display: flex; justify-content: space-evenly; } - .PokemonExplorer__pokemonInfoWrapper__1oqey .PokemonExplorer__pokemonInfoLeftColumn__2k9b7, - .PokemonExplorer__pokemonInfoWrapper__1oqey .PokemonExplorer__pokemonInfoRightColumn__t82k7, - .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoLeftColumn__2k9b7, - .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoRightColumn__t82k7 { + .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1, + .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 { display: flex; flex-flow: column nowrap; flex-basis: 45%; align-items: center; } - .PokemonExplorer__pokemonInfoWrapper__1oqey .PokemonExplorer__pokemonInfoLeftColumn__2k9b7, - .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoLeftColumn__2k9b7 { + .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1 { text-align: center; } - .PokemonExplorer__pokemonInfoWrapper__1oqey .PokemonExplorer__pokemonInfoRightColumn__t82k7, - .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoRightColumn__t82k7 { + .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 { flex-grow: 1; align-items: start; } -.PokemonExplorer__highlight__2x1kW { - color: #fff; - pointer-events: none; } - -.PokemonExplorer__pokemonTypeWrapper__ssJiJ { - display: flex; - justify-content: center; - align-self: stretch; } - .PokemonExplorer__leaguePokemonRank__2Oq1D { justify-content: flex-start; flex-wrap: wrap; } - .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoWraper__1NNut { + .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoWrapper__1oqey { flex: 1 0 100%; display: flex; } .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoLeftColumn__2k9b7 { @@ -310,19 +290,95 @@ .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonRankValue__11Y0L { display: inline; } -.PokemonExplorer__dexHeader__3OvHB { +.PokemonExplorer__ivsContainer__Jh0Sr { + flex: 0 999 auto; + display: flex; + flex-flow: column nowrap; + /* for Firefox */ } + .PokemonExplorer__ivsContainer__Jh0Sr .title.PokemonExplorer__ivContainerTitle__3cq4P { + display: flex; + justify-content: flex-end; + background-color: transparent; + padding: 0; } + .PokemonExplorer__ivsContainer__Jh0Sr .title.PokemonExplorer__ivContainerTitle__3cq4P > * { + background-color: #fff; } + .PokemonExplorer__ivsContainer__Jh0Sr .title.PokemonExplorer__ivContainerTitle__3cq4P > *:first-child { + margin-right: auto; + padding: 0 0.5em; } + .PokemonExplorer__ivsContainer__Jh0Sr .title.PokemonExplorer__ivContainerTitle__3cq4P > *:last-child { + padding-right: 0.5em; } + .PokemonExplorer__ivsContainer__Jh0Sr.PokemonExplorer__diplayingIvList__3Ii7D { + padding: 1.5rem 0 0; } + .PokemonExplorer__ivsContainer__Jh0Sr.PokemonExplorer__diplayingIvList__3Ii7D .title.PokemonExplorer__ivContainerTitle__3cq4P { + margin-bottom: 0; + margin-right: -8px; + margin-left: -8px; + padding: 0 2.5rem; } + +.PokemonDisplay__highlight__h50BA { + color: #fff; + pointer-events: none; } + +.PokemonDisplay__pokemonInfoWrapper__3AW3e { + margin-bottom: 1rem; } + +.PokemonDisplay__pokemonInfoLeftColumn__1vugM { } + +.PokemonDisplay__pokemonInfoRightColumn__27Q49 { } + +.PokemonDisplay__pokemonName__WBKbk { + margin-bottom: 0; } + +.PokemonDisplay__dexHeader__2HVfr { margin-bottom: 0.25rem; } -.PokemonExplorer__formHeader__1vejY { +.PokemonDisplay__pokemonTypeWrapper__1rJIA { + display: flex; + justify-content: center; + align-self: stretch; } + +.PokemonDisplay__formHeader__1pr6M { text-transform: uppercase; margin-bottom: 0; } -.PokemonExplorer__pokemonBaseStats__IOi6Q { +.PokemonDisplay__pokemonBaseStats__3UJvn { display: flex; flex-flow: column nowrap; align-items: start; align-self: stretch; } +.PokemonExplorer__wrapper__3U9Pu { + margin: 0 auto; + width: 30rem; + display: flex; + flex-flow: column nowrap; } + +.PokemonExplorer__container__3LR-_ { + display: flex; + justify-content: space-evenly; } + .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1, + .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 { + display: flex; + flex-flow: column nowrap; + flex-basis: 45%; + align-items: center; } + .PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1 { + text-align: center; } + .PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 { + flex-grow: 1; + align-items: start; } + +.PokemonExplorer__leaguePokemonRank__2Oq1D { + justify-content: flex-start; + flex-wrap: wrap; } + .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoWrapper__1oqey { + flex: 1 0 100%; + display: flex; } + .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonInfoLeftColumn__2k9b7 { + align-items: flex-start; } + .PokemonExplorer__leaguePokemonRank__2Oq1D .PokemonExplorer__pokemonRankValue__11Y0L { + display: inline; } + .PokemonExplorer__ivsContainer__Jh0Sr { flex: 0 999 auto; display: flex; diff --git a/dist/main-bundle.js b/dist/main-bundle.js index 738c392..702f6d0 100644 --- a/dist/main-bundle.js +++ b/dist/main-bundle.js @@ -37880,10 +37880,10 @@ exports.LeagueStatsList = LeagueStatsList; /***/ }), -/***/ "./src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx": -/*!*******************************************************************!*\ - !*** ./src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx ***! - \*******************************************************************/ +/***/ "./src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx": +/*!******************************************************************!*\ + !*** ./src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx ***! + \******************************************************************/ /*! no static exports found */ /*! ModuleConcatenation bailout: Module is not an ECMAScript module */ /***/ (function(module, exports, __webpack_require__) { @@ -37937,23 +37937,202 @@ var react_1 = __importDefault(__webpack_require__(/*! react */ "./node_modules/r var classnames_1 = __importDefault(__webpack_require__(/*! classnames */ "./node_modules/classnames/index.js")); +var formatter_1 = __webpack_require__(/*! app/utils/formatter */ "./src/ts/app/utils/formatter.ts"); + +var StatDisplay_1 = __webpack_require__(/*! ./StatDisplay */ "./src/ts/app/components/PokemonExplorer/StatDisplay.tsx"); + +var TypeIndicator_1 = __webpack_require__(/*! ./TypeIndicator */ "./src/ts/app/components/PokemonExplorer/TypeIndicator.tsx"); + +var styles = __importStar(__webpack_require__(/*! ./styles/PokemonDisplay.scss */ "./src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss")); + +var PokemonDisplay = +/*#__PURE__*/ +function (_react_1$default$Comp) { + _inherits(PokemonDisplay, _react_1$default$Comp); + + function PokemonDisplay() { + _classCallCheck(this, PokemonDisplay); + + return _possibleConstructorReturn(this, _getPrototypeOf(PokemonDisplay).apply(this, arguments)); + } + + _createClass(PokemonDisplay, [{ + key: "render", + value: function render() { + var _this$props = this.props, + leaguePokemon = _this$props.leaguePokemon, + temporaryNavigationIsActive = _this$props.temporaryNavigationIsActive; + var dex = formatter_1.formatDexNumber(leaguePokemon.dex); + var pokemonInfoLeftColumnCss = classnames_1.default(styles.pokemonInfoLeftColumn, _defineProperty({}, styles.highlight, temporaryNavigationIsActive)); + var containerCss = classnames_1.default('nes-container', 'with-title'); + var containerTitleCss = classnames_1.default('title'); + var baseStatsCss = classnames_1.default(styles.pokemonBaseStats, containerCss); + var pokemonIconCss = classnames_1.default('icon', 'pixel', 'sprite', "pokemon-".concat(dex), { + normal: formatter_1.Forms.normal.indexOf(leaguePokemon.form) > -1, + alola: formatter_1.Forms.alola.indexOf(leaguePokemon.form) > -1, + plant: formatter_1.Forms.plant.indexOf(leaguePokemon.form) > -1, + sandy: formatter_1.Forms.sandy.indexOf(leaguePokemon.form) > -1, + trash: formatter_1.Forms.trash.indexOf(leaguePokemon.form) > -1, + 'west-sea': formatter_1.Forms.westSea.indexOf(leaguePokemon.form) > -1, + 'east-sea': formatter_1.Forms.eastSea.indexOf(leaguePokemon.form) > -1, + frost: formatter_1.Forms.frost.indexOf(leaguePokemon.form) > -1, + fan: formatter_1.Forms.fan.indexOf(leaguePokemon.form) > -1, + mow: formatter_1.Forms.mow.indexOf(leaguePokemon.form) > -1, + wash: formatter_1.Forms.wash.indexOf(leaguePokemon.form) > -1, + heat: formatter_1.Forms.heat.indexOf(leaguePokemon.form) > -1, + sky: formatter_1.Forms.sky.indexOf(leaguePokemon.form) > -1, + land: formatter_1.Forms.land.indexOf(leaguePokemon.form) > -1, + overcast: formatter_1.Forms.overcast.indexOf(leaguePokemon.form) > -1, + sunny: formatter_1.Forms.sunny.indexOf(leaguePokemon.form) > -1, + rainy: formatter_1.Forms.rainy.indexOf(leaguePokemon.form) > -1, + snowy: formatter_1.Forms.snowy.indexOf(leaguePokemon.form) > -1, + attack: formatter_1.Forms.attack.indexOf(leaguePokemon.form) > -1, + defense: formatter_1.Forms.defense.indexOf(leaguePokemon.form) > -1, + speed: formatter_1.Forms.speed.indexOf(leaguePokemon.form) > -1, + altered: formatter_1.Forms.altered.indexOf(leaguePokemon.form) > -1, + origin: formatter_1.Forms.origin.indexOf(leaguePokemon.form) > -1, + fighting: formatter_1.Forms.fighting.indexOf(leaguePokemon.form) > -1, + flying: formatter_1.Forms.flying.indexOf(leaguePokemon.form) > -1, + poison: formatter_1.Forms.poison.indexOf(leaguePokemon.form) > -1, + ground: formatter_1.Forms.ground.indexOf(leaguePokemon.form) > -1, + rock: formatter_1.Forms.rock.indexOf(leaguePokemon.form) > -1, + bug: formatter_1.Forms.bug.indexOf(leaguePokemon.form) > -1, + ghost: formatter_1.Forms.ghost.indexOf(leaguePokemon.form) > -1, + steel: formatter_1.Forms.steel.indexOf(leaguePokemon.form) > -1, + fire: formatter_1.Forms.fire.indexOf(leaguePokemon.form) > -1, + water: formatter_1.Forms.water.indexOf(leaguePokemon.form) > -1, + grass: formatter_1.Forms.grass.indexOf(leaguePokemon.form) > -1, + electric: formatter_1.Forms.electric.indexOf(leaguePokemon.form) > -1, + psychic: formatter_1.Forms.psychic.indexOf(leaguePokemon.form) > -1, + ice: formatter_1.Forms.ice.indexOf(leaguePokemon.form) > -1, + dragon: formatter_1.Forms.dragon.indexOf(leaguePokemon.form) > -1, + dark: formatter_1.Forms.dark.indexOf(leaguePokemon.form) > -1, + fairy: formatter_1.Forms.fairy.indexOf(leaguePokemon.form) > -1 + }); + var type1 = react_1.default.createElement(TypeIndicator_1.TypeIndicator, { + type: leaguePokemon.types.type1 + }); + var type2 = null; + + if (leaguePokemon.types.type2) { + type2 = react_1.default.createElement(TypeIndicator_1.TypeIndicator, { + type: leaguePokemon.types.type2 + }); + } + + return react_1.default.createElement("div", { + className: styles.pokemonInfoWrapper + }, react_1.default.createElement("div", { + className: pokemonInfoLeftColumnCss + }, react_1.default.createElement("i", { + className: pokemonIconCss + }), react_1.default.createElement("h4", { + className: styles.dexHeader + }, "No.", dex), react_1.default.createElement("div", { + className: styles.pokemonTypeWrapper + }, type1, type2), leaguePokemon.form !== pogo_protos_1.default.Enums.Form.FORM_UNSET && react_1.default.createElement("h6", { + className: styles.formHeader + }, formatter_1.formatForm(leaguePokemon.form), " Form")), react_1.default.createElement("div", { + className: styles.pokemonInfoRightColumn + }, react_1.default.createElement("h2", { + className: styles.pokemonName + }, leaguePokemon.name), react_1.default.createElement("h5", null, leaguePokemon.genus), react_1.default.createElement("section", { + className: baseStatsCss + }, react_1.default.createElement("h3", { + className: containerTitleCss + }, "Base Stats"), react_1.default.createElement(StatDisplay_1.StatDisplay, { + statLabel: "HP".concat(String.fromCharCode(160)), + statValue: leaguePokemon.stats.baseStamina, + statRank: leaguePokemon.statsRank.staminaRank + }), react_1.default.createElement(StatDisplay_1.StatDisplay, { + statLabel: "ATK", + statValue: leaguePokemon.stats.baseAttack, + statRank: leaguePokemon.statsRank.attackRank + }), react_1.default.createElement(StatDisplay_1.StatDisplay, { + statLabel: "DEF", + statValue: leaguePokemon.stats.baseDefense, + statRank: leaguePokemon.statsRank.defenseRank + })))); + } + }]); + + return PokemonDisplay; +}(react_1.default.Component); + +exports.PokemonDisplay = PokemonDisplay; + +/***/ }), + +/***/ "./src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx": +/*!*******************************************************************!*\ + !*** ./src/ts/app/components/PokemonExplorer/PokemonExplorer.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 League_1 = __webpack_require__(/*! app/models/League */ "./src/ts/app/models/League.ts"); var Pokemon_1 = __webpack_require__(/*! app/models/Pokemon */ "./src/ts/app/models/Pokemon.ts"); var calculator_1 = __webpack_require__(/*! app/utils/calculator */ "./src/ts/app/utils/calculator.ts"); -var formatter_1 = __webpack_require__(/*! app/utils/formatter */ "./src/ts/app/utils/formatter.ts"); - var IvForm_1 = __webpack_require__(/*! ./IvForm */ "./src/ts/app/components/PokemonExplorer/IvForm.tsx"); var LeagueSelector_1 = __webpack_require__(/*! ./LeagueSelector */ "./src/ts/app/components/PokemonExplorer/LeagueSelector.tsx"); var LeagueStatsList_1 = __webpack_require__(/*! ./LeagueStatsList */ "./src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx"); -var StatDisplay_1 = __webpack_require__(/*! ./StatDisplay */ "./src/ts/app/components/PokemonExplorer/StatDisplay.tsx"); +var PokemonDisplay_1 = __webpack_require__(/*! ./PokemonDisplay */ "./src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx"); -var TypeIndicator_1 = __webpack_require__(/*! ./TypeIndicator */ "./src/ts/app/components/PokemonExplorer/TypeIndicator.tsx"); +var StatDisplay_1 = __webpack_require__(/*! ./StatDisplay */ "./src/ts/app/components/PokemonExplorer/StatDisplay.tsx"); var styles = __importStar(__webpack_require__(/*! ./styles/PokemonExplorer.scss */ "./src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss")); @@ -38018,8 +38197,7 @@ function (_react_1$default$Comp) { handleChangeIndividualValue = _this$props.handleChangeIndividualValue, handleMaximizeLevel = _this$props.handleMaximizeLevel; var ivDisplayMode = this.state.ivDisplayMode; - var rankedPokemon = null; - var dex = formatter_1.formatDexNumber(leaguePokemon.dex); // default to first pokemon (should be S tier) + var rankedPokemon = null; // default to first pokemon (should be S tier) if (individualValues.level === null && individualValues.ivHp === null && individualValues.ivAtk === null && individualValues.ivDef === null) { rankedPokemon = leaguePokemon.pvp[activeLeague][0]; // a full spec'd pokemon has been entered @@ -38063,103 +38241,22 @@ function (_react_1$default$Comp) { defenseStatRank = _PokemonExplorer$calc.defenseStatRank; var wrapperCss = classnames_1.default(styles.wrapper, className); - var pokemonInfoLeftColumnCss = classnames_1.default(styles.pokemonInfoLeftColumn, _defineProperty({}, styles.highlight, temporaryNavigationIsActive)); var containerCss = classnames_1.default('nes-container', 'with-title'); var containerTitleCss = classnames_1.default('title'); var ivContainerTitleCss = classnames_1.default(containerTitleCss, styles.ivContainerTitle); - var baseStatsCss = classnames_1.default(styles.pokemonBaseStats, containerCss); var formContainerCss = classnames_1.default(containerCss, styles.ivsContainer, 'form', _defineProperty({}, styles.diplayingIvList, ivDisplayMode === IvDisplayMode.LIST)); - var leaugeRankCss = classnames_1.default(styles.leaguePokemonRank, containerCss, { + var leaugeRankCss = classnames_1.default(styles.container, styles.leaguePokemonRank, containerCss, { 'with-title': false }); - var pokemonIconCss = classnames_1.default('icon', 'pixel', 'sprite', "pokemon-".concat(dex), { - normal: formatter_1.Forms.normal.indexOf(leaguePokemon.form) > -1, - alola: formatter_1.Forms.alola.indexOf(leaguePokemon.form) > -1, - plant: formatter_1.Forms.plant.indexOf(leaguePokemon.form) > -1, - sandy: formatter_1.Forms.sandy.indexOf(leaguePokemon.form) > -1, - trash: formatter_1.Forms.trash.indexOf(leaguePokemon.form) > -1, - 'west-sea': formatter_1.Forms.westSea.indexOf(leaguePokemon.form) > -1, - 'east-sea': formatter_1.Forms.eastSea.indexOf(leaguePokemon.form) > -1, - frost: formatter_1.Forms.frost.indexOf(leaguePokemon.form) > -1, - fan: formatter_1.Forms.fan.indexOf(leaguePokemon.form) > -1, - mow: formatter_1.Forms.mow.indexOf(leaguePokemon.form) > -1, - wash: formatter_1.Forms.wash.indexOf(leaguePokemon.form) > -1, - heat: formatter_1.Forms.heat.indexOf(leaguePokemon.form) > -1, - sky: formatter_1.Forms.sky.indexOf(leaguePokemon.form) > -1, - land: formatter_1.Forms.land.indexOf(leaguePokemon.form) > -1, - overcast: formatter_1.Forms.overcast.indexOf(leaguePokemon.form) > -1, - sunny: formatter_1.Forms.sunny.indexOf(leaguePokemon.form) > -1, - rainy: formatter_1.Forms.rainy.indexOf(leaguePokemon.form) > -1, - snowy: formatter_1.Forms.snowy.indexOf(leaguePokemon.form) > -1, - attack: formatter_1.Forms.attack.indexOf(leaguePokemon.form) > -1, - defense: formatter_1.Forms.defense.indexOf(leaguePokemon.form) > -1, - speed: formatter_1.Forms.speed.indexOf(leaguePokemon.form) > -1, - altered: formatter_1.Forms.altered.indexOf(leaguePokemon.form) > -1, - origin: formatter_1.Forms.origin.indexOf(leaguePokemon.form) > -1, - fighting: formatter_1.Forms.fighting.indexOf(leaguePokemon.form) > -1, - flying: formatter_1.Forms.flying.indexOf(leaguePokemon.form) > -1, - poison: formatter_1.Forms.poison.indexOf(leaguePokemon.form) > -1, - ground: formatter_1.Forms.ground.indexOf(leaguePokemon.form) > -1, - rock: formatter_1.Forms.rock.indexOf(leaguePokemon.form) > -1, - bug: formatter_1.Forms.bug.indexOf(leaguePokemon.form) > -1, - ghost: formatter_1.Forms.ghost.indexOf(leaguePokemon.form) > -1, - steel: formatter_1.Forms.steel.indexOf(leaguePokemon.form) > -1, - fire: formatter_1.Forms.fire.indexOf(leaguePokemon.form) > -1, - water: formatter_1.Forms.water.indexOf(leaguePokemon.form) > -1, - grass: formatter_1.Forms.grass.indexOf(leaguePokemon.form) > -1, - electric: formatter_1.Forms.electric.indexOf(leaguePokemon.form) > -1, - psychic: formatter_1.Forms.psychic.indexOf(leaguePokemon.form) > -1, - ice: formatter_1.Forms.ice.indexOf(leaguePokemon.form) > -1, - dragon: formatter_1.Forms.dragon.indexOf(leaguePokemon.form) > -1, - dark: formatter_1.Forms.dark.indexOf(leaguePokemon.form) > -1, - fairy: formatter_1.Forms.fairy.indexOf(leaguePokemon.form) > -1 - }); - var type1 = react_1.default.createElement(TypeIndicator_1.TypeIndicator, { - type: leaguePokemon.types.type1 - }); - var type2 = null; - - if (leaguePokemon.types.type2) { - type2 = react_1.default.createElement(TypeIndicator_1.TypeIndicator, { - type: leaguePokemon.types.type2 - }); - } - + var leagueLeftColumnCss = classnames_1.default(styles.leftColumn, styles.pokemonInfoLeftColumn); + 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("div", { className: wrapperCss - }, react_1.default.createElement("div", { - className: styles.pokemonInfoWrapper - }, react_1.default.createElement("div", { - className: pokemonInfoLeftColumnCss - }, react_1.default.createElement("i", { - className: pokemonIconCss - }), react_1.default.createElement("h4", { - className: styles.dexHeader - }, "No.", dex), react_1.default.createElement("div", { - className: styles.pokemonTypeWrapper - }, type1, type2), leaguePokemon.form !== pogo_protos_1.default.Enums.Form.FORM_UNSET && react_1.default.createElement("h6", { - className: styles.formHeader - }, formatter_1.formatForm(leaguePokemon.form), " Form")), react_1.default.createElement("div", { - className: styles.pokemonInfoRightColumn - }, react_1.default.createElement("h2", { - className: styles.pokemonName - }, leaguePokemon.name), react_1.default.createElement("h5", null, leaguePokemon.genus), react_1.default.createElement("section", { - className: baseStatsCss - }, react_1.default.createElement("h3", { - className: containerTitleCss - }, "Base Stats"), react_1.default.createElement(StatDisplay_1.StatDisplay, { - statLabel: "HP".concat(String.fromCharCode(160)), - statValue: leaguePokemon.stats.baseStamina, - statRank: leaguePokemon.statsRank.staminaRank - }), react_1.default.createElement(StatDisplay_1.StatDisplay, { - statLabel: "ATK", - statValue: leaguePokemon.stats.baseAttack, - statRank: leaguePokemon.statsRank.attackRank - }), react_1.default.createElement(StatDisplay_1.StatDisplay, { - statLabel: "DEF", - statValue: leaguePokemon.stats.baseDefense, - statRank: leaguePokemon.statsRank.defenseRank - })))), react_1.default.createElement(LeagueSelector_1.LeagueSelector, { + }, react_1.default.createElement(PokemonDisplay_1.PokemonDisplay, { + leaguePokemon: leaguePokemon, + temporaryNavigationIsActive: temporaryNavigationIsActive + }), react_1.default.createElement(LeagueSelector_1.LeagueSelector, { activeLeague: activeLeague, handleLeagueSelect: this.handleLeagueSelect }), react_1.default.createElement("section", { @@ -38194,9 +38291,9 @@ function (_react_1$default$Comp) { }, react_1.default.createElement("h5", { className: containerTitleCss }, "Rank"), react_1.default.createElement("div", { - className: styles.pokemonInfoWraper + className: pokemonInfoWrapper }, react_1.default.createElement("div", { - className: styles.pokemonInfoLeftColumn + className: leagueLeftColumnCss }, rankedPokemon === null || rankedPokemon.cp > League_1.MaxCpByLeague[activeLeague] && react_1.default.createElement("div", null, react_1.default.createElement("h1", { className: styles.pokemonRankValue }, "N/A")), rankedPokemon !== null && rankedPokemon.cp <= League_1.MaxCpByLeague[activeLeague] && react_1.default.createElement("div", null, react_1.default.createElement("h1", { @@ -38204,7 +38301,7 @@ function (_react_1$default$Comp) { }, rankedGrade), " Rank"), react_1.default.createElement("div", null, "CP ", react_1.default.createElement("h1", { className: styles.pokemonRankValue }, rankedCp))), react_1.default.createElement("div", { - className: styles.pokemonInfoRightColumn + className: leagueRightColumnCss }, react_1.default.createElement(StatDisplay_1.StatDisplay, { statLabel: "HP".concat(String.fromCharCode(160)), statValue: rankedHp, @@ -38961,6 +39058,19 @@ module.exports = {"selectList":"LeagueStatsList__selectList__1FBIL","listItem":" /***/ }), +/***/ "./src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss": +/*!**************************************************************************!*\ + !*** ./src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.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 = {"highlight":"PokemonDisplay__highlight__h50BA PokemonApp__highlight__1zywH","pokemonInfoWrapper":"PokemonDisplay__pokemonInfoWrapper__3AW3e PokemonExplorer__container__3LR-_","pokemonInfoLeftColumn":"PokemonDisplay__pokemonInfoLeftColumn__1vugM PokemonExplorer__leftColumn__1qHS1","pokemonInfoRightColumn":"PokemonDisplay__pokemonInfoRightColumn__27Q49 PokemonExplorer__rightColumn__KvY23","pokemonName":"PokemonDisplay__pokemonName__WBKbk","dexHeader":"PokemonDisplay__dexHeader__2HVfr","pokemonTypeWrapper":"PokemonDisplay__pokemonTypeWrapper__1rJIA","formHeader":"PokemonDisplay__formHeader__1pr6M","pokemonBaseStats":"PokemonDisplay__pokemonBaseStats__3UJvn"}; + +/***/ }), + /***/ "./src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss": /*!***************************************************************************!*\ !*** ./src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss ***! @@ -38970,7 +39080,7 @@ module.exports = {"selectList":"LeagueStatsList__selectList__1FBIL","listItem":" /***/ (function(module, exports, __webpack_require__) { // extracted by mini-css-extract-plugin -module.exports = {"wrapper":"PokemonExplorer__wrapper__3U9Pu","pokemonName":"PokemonExplorer__pokemonName__2Jl9u","pokemonInfoWrapper":"PokemonExplorer__pokemonInfoWrapper__1oqey","leaguePokemonRank":"PokemonExplorer__leaguePokemonRank__2Oq1D","pokemonInfoLeftColumn":"PokemonExplorer__pokemonInfoLeftColumn__2k9b7","pokemonInfoRightColumn":"PokemonExplorer__pokemonInfoRightColumn__t82k7","highlight":"PokemonExplorer__highlight__2x1kW PokemonApp__highlight__1zywH","pokemonTypeWrapper":"PokemonExplorer__pokemonTypeWrapper__ssJiJ","pokemonInfoWraper":"PokemonExplorer__pokemonInfoWraper__1NNut","pokemonRankValue":"PokemonExplorer__pokemonRankValue__11Y0L","dexHeader":"PokemonExplorer__dexHeader__3OvHB","formHeader":"PokemonExplorer__formHeader__1vejY","pokemonBaseStats":"PokemonExplorer__pokemonBaseStats__IOi6Q","ivsContainer":"PokemonExplorer__ivsContainer__Jh0Sr","ivContainerTitle":"PokemonExplorer__ivContainerTitle__3cq4P","diplayingIvList":"PokemonExplorer__diplayingIvList__3Ii7D"}; +module.exports = {"wrapper":"PokemonExplorer__wrapper__3U9Pu","container":"PokemonExplorer__container__3LR-_","leftColumn":"PokemonExplorer__leftColumn__1qHS1","rightColumn":"PokemonExplorer__rightColumn__KvY23","leaguePokemonRank":"PokemonExplorer__leaguePokemonRank__2Oq1D","pokemonInfoWrapper":"PokemonExplorer__pokemonInfoWrapper__1oqey","pokemonInfoLeftColumn":"PokemonExplorer__pokemonInfoLeftColumn__2k9b7","pokemonRankValue":"PokemonExplorer__pokemonRankValue__11Y0L","ivsContainer":"PokemonExplorer__ivsContainer__Jh0Sr","ivContainerTitle":"PokemonExplorer__ivContainerTitle__3cq4P","diplayingIvList":"PokemonExplorer__diplayingIvList__3Ii7D"}; /***/ }), diff --git a/src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx b/src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx new file mode 100644 index 0000000..a94de9d --- /dev/null +++ b/src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx @@ -0,0 +1,142 @@ +import POGOProtos from 'pogo-protos'; + +import React from 'react'; + +import classNames from 'classnames'; + +import { IPokemon } from 'app/models/Pokemon'; + +import { formatDexNumber, formatForm, Forms } from 'app/utils/formatter'; + +import { StatDisplay } from './StatDisplay'; +import { TypeIndicator } from './TypeIndicator'; + +import * as styles from './styles/PokemonDisplay.scss'; + +export interface IPokemonDisplay { + leaguePokemon : IPokemon; + temporaryNavigationIsActive : boolean; +} + +export class PokemonDisplay extends React.Component { + public render() { + const { + leaguePokemon, + temporaryNavigationIsActive + } = this.props; + + const dex = formatDexNumber(leaguePokemon.dex); + + const pokemonInfoLeftColumnCss = classNames( + styles.pokemonInfoLeftColumn, + { + [styles.highlight]: temporaryNavigationIsActive + } + ); + + const containerCss = classNames( + 'nes-container', + 'with-title', + ); + const containerTitleCss = classNames( + 'title', + ); + const baseStatsCss = classNames( + styles.pokemonBaseStats, + containerCss, + ); + + const pokemonIconCss = classNames( + 'icon', + 'pixel', + 'sprite', + `pokemon-${dex}`, + { + normal: Forms.normal.indexOf(leaguePokemon.form) > -1, + alola: Forms.alola.indexOf(leaguePokemon.form) > -1, + plant: Forms.plant.indexOf(leaguePokemon.form) > -1, + sandy: Forms.sandy.indexOf(leaguePokemon.form) > -1, + trash: Forms.trash.indexOf(leaguePokemon.form) > -1, + 'west-sea': Forms.westSea.indexOf(leaguePokemon.form) > -1, + 'east-sea': Forms.eastSea.indexOf(leaguePokemon.form) > -1, + frost: Forms.frost.indexOf(leaguePokemon.form) > -1, + fan: Forms.fan.indexOf(leaguePokemon.form) > -1, + mow: Forms.mow.indexOf(leaguePokemon.form) > -1, + wash: Forms.wash.indexOf(leaguePokemon.form) > -1, + heat: Forms.heat.indexOf(leaguePokemon.form) > -1, + sky: Forms.sky.indexOf(leaguePokemon.form) > -1, + land: Forms.land.indexOf(leaguePokemon.form) > -1, + overcast: Forms.overcast.indexOf(leaguePokemon.form) > -1, + sunny: Forms.sunny.indexOf(leaguePokemon.form) > -1, + rainy: Forms.rainy.indexOf(leaguePokemon.form) > -1, + snowy: Forms.snowy.indexOf(leaguePokemon.form) > -1, + attack: Forms.attack.indexOf(leaguePokemon.form) > -1, + defense: Forms.defense.indexOf(leaguePokemon.form) > -1, + speed: Forms.speed.indexOf(leaguePokemon.form) > -1, + altered: Forms.altered.indexOf(leaguePokemon.form) > -1, + origin: Forms.origin.indexOf(leaguePokemon.form) > -1, + fighting: Forms.fighting.indexOf(leaguePokemon.form) > -1, + flying: Forms.flying.indexOf(leaguePokemon.form) > -1, + poison: Forms.poison.indexOf(leaguePokemon.form) > -1, + ground: Forms.ground.indexOf(leaguePokemon.form) > -1, + rock: Forms.rock.indexOf(leaguePokemon.form) > -1, + bug: Forms.bug.indexOf(leaguePokemon.form) > -1, + ghost: Forms.ghost.indexOf(leaguePokemon.form) > -1, + steel: Forms.steel.indexOf(leaguePokemon.form) > -1, + fire: Forms.fire.indexOf(leaguePokemon.form) > -1, + water: Forms.water.indexOf(leaguePokemon.form) > -1, + grass: Forms.grass.indexOf(leaguePokemon.form) > -1, + electric: Forms.electric.indexOf(leaguePokemon.form) > -1, + psychic: Forms.psychic.indexOf(leaguePokemon.form) > -1, + ice: Forms.ice.indexOf(leaguePokemon.form) > -1, + dragon: Forms.dragon.indexOf(leaguePokemon.form) > -1, + dark: Forms.dark.indexOf(leaguePokemon.form) > -1, + fairy: Forms.fairy.indexOf(leaguePokemon.form) > -1, + }, + ); + + const type1 = ; + let type2 : JSX.Element | null = null; + if (leaguePokemon.types.type2) { + type2 = ; + } + + return ( +
+
+ +

No.{ dex }

+
+ { type1 } + { type2 } +
+ { leaguePokemon.form !== POGOProtos.Enums.Form.FORM_UNSET && +
{ formatForm(leaguePokemon.form) } Form
+ } +
+
+

{ leaguePokemon.name }

+
{ leaguePokemon.genus }
+
+

Base Stats

+ + + +
+
+
+ ); + } +} diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx index 83dc25c..86e6168 100644 --- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx +++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx @@ -1,21 +1,18 @@ -import POGOProtos from 'pogo-protos'; - import React from 'react'; import classNames from 'classnames'; import { IBestWorstStats, ILeaguePokemon, League, MaxCpByLeague } from 'app/models/League'; -import { Grade, IStats, } from 'app/models/Pokemon'; +import { Grade, IStats } from 'app/models/Pokemon'; import { calculateCp, calculateStatAtLevel } from 'app/utils/calculator'; -import { formatDexNumber, formatForm, Forms } from 'app/utils/formatter'; import { IIndividualValues, IndividualValueKey } from './types'; import { IvForm } from './IvForm'; import { LeagueSelector } from './LeagueSelector'; import { LeagueStatsList } from './LeagueStatsList'; +import { PokemonDisplay } from './PokemonDisplay'; import { StatDisplay } from './StatDisplay'; -import { TypeIndicator } from './TypeIndicator'; import * as styles from './styles/PokemonExplorer.scss'; @@ -89,8 +86,6 @@ export class PokemonExplorer extends React.Component -1, - alola: Forms.alola.indexOf(leaguePokemon.form) > -1, - plant: Forms.plant.indexOf(leaguePokemon.form) > -1, - sandy: Forms.sandy.indexOf(leaguePokemon.form) > -1, - trash: Forms.trash.indexOf(leaguePokemon.form) > -1, - 'west-sea': Forms.westSea.indexOf(leaguePokemon.form) > -1, - 'east-sea': Forms.eastSea.indexOf(leaguePokemon.form) > -1, - frost: Forms.frost.indexOf(leaguePokemon.form) > -1, - fan: Forms.fan.indexOf(leaguePokemon.form) > -1, - mow: Forms.mow.indexOf(leaguePokemon.form) > -1, - wash: Forms.wash.indexOf(leaguePokemon.form) > -1, - heat: Forms.heat.indexOf(leaguePokemon.form) > -1, - sky: Forms.sky.indexOf(leaguePokemon.form) > -1, - land: Forms.land.indexOf(leaguePokemon.form) > -1, - overcast: Forms.overcast.indexOf(leaguePokemon.form) > -1, - sunny: Forms.sunny.indexOf(leaguePokemon.form) > -1, - rainy: Forms.rainy.indexOf(leaguePokemon.form) > -1, - snowy: Forms.snowy.indexOf(leaguePokemon.form) > -1, - attack: Forms.attack.indexOf(leaguePokemon.form) > -1, - defense: Forms.defense.indexOf(leaguePokemon.form) > -1, - speed: Forms.speed.indexOf(leaguePokemon.form) > -1, - altered: Forms.altered.indexOf(leaguePokemon.form) > -1, - origin: Forms.origin.indexOf(leaguePokemon.form) > -1, - fighting: Forms.fighting.indexOf(leaguePokemon.form) > -1, - flying: Forms.flying.indexOf(leaguePokemon.form) > -1, - poison: Forms.poison.indexOf(leaguePokemon.form) > -1, - ground: Forms.ground.indexOf(leaguePokemon.form) > -1, - rock: Forms.rock.indexOf(leaguePokemon.form) > -1, - bug: Forms.bug.indexOf(leaguePokemon.form) > -1, - ghost: Forms.ghost.indexOf(leaguePokemon.form) > -1, - steel: Forms.steel.indexOf(leaguePokemon.form) > -1, - fire: Forms.fire.indexOf(leaguePokemon.form) > -1, - water: Forms.water.indexOf(leaguePokemon.form) > -1, - grass: Forms.grass.indexOf(leaguePokemon.form) > -1, - electric: Forms.electric.indexOf(leaguePokemon.form) > -1, - psychic: Forms.psychic.indexOf(leaguePokemon.form) > -1, - ice: Forms.ice.indexOf(leaguePokemon.form) > -1, - dragon: Forms.dragon.indexOf(leaguePokemon.form) > -1, - dark: Forms.dark.indexOf(leaguePokemon.form) > -1, - fairy: Forms.fairy.indexOf(leaguePokemon.form) > -1, - }, + const leagueLeftColumnCss = classNames( + styles.leftColumn, + styles.pokemonInfoLeftColumn + ); + const leagueRightColumnCss = classNames( + styles.rightColumn, + ); + const pokemonInfoWrapper = classNames( + styles.container, + styles.pokemonInfoWrapper ); - - const type1 = ; - let type2 : JSX.Element | null = null; - if (leaguePokemon.types.type2) { - type2 = ; - } return (
-
-
- -

No.{ dex }

-
- { type1 } - { type2 } -
- { leaguePokemon.form !== POGOProtos.Enums.Form.FORM_UNSET && -
{ formatForm(leaguePokemon.form) } Form
- } -
-
-

{ leaguePokemon.name }

-
{ leaguePokemon.genus }
-
-

Base Stats

- - - -
-
-
+
Rank
-
-
+
+
{ rankedPokemon === null || rankedPokemon.cp > MaxCpByLeague[activeLeague] &&

N/A

} @@ -337,7 +250,7 @@ export class PokemonExplorer extends React.ComponentCP

{ rankedCp }

-
+