jeff/pvpokemon
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

tweak type indicators

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-02 12:29:42 -05:00
parent ce7649f862
commit bd7ddca470
6 changed files with 139 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
dist/app.css vendored
View File

@ -346,24 +346,39 @@
.TypeEffectiveDisplay__multiplierWrapper__14os7 {
position: relative;
width: 6.75rem; }
padding-top: 6px;
padding-right: 6px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 > * {
position: absolute; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(1) {
position: inherit;
z-index: 3; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(2) {
position: absolute;
top: -6px;
top: 0;
left: 6px;
z-index: 2; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(3) {
position: absolute;
top: -12px;
left: 12px;
z-index: 1; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(4) {
position: absolute;
top: -12px;
left: 12px;
left: 18px;
z-index: 0; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 {
padding-top: 12px;
padding-right: 12px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 :nth-child(3) {
top: 0; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 :nth-child(2) {
top: 6px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa {
padding-top: 18px;
padding-right: 18px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(4) {
top: 0; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(3) {
top: 6px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(2) {
top: 12px; }
.TypeEffectiveDisplay__wrapper__1FFIj {
margin: 0 1em; }
@ -371,16 +386,22 @@
margin-top: 1em; }
.TypeEffectiveDisplay__wrapper__1FFIj h4 p {
font-size: 0.7em;
color: #b6b6b6; }
color: #b6b6b6;
margin: 0; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY {
display: flex;
flex-flow: row wrap; }
flex-flow: row wrap;
align-items: end; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > * {
margin-right: 14px;
height: 0%; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7 {
margin-right: 21px;
margin-top: 3px; }
width: auto;
margin-right: 2px; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 {
margin-right: -4px; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa {
margin-right: -10px; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > *,
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7 > * {
flex-basis: unset;

43
dist/main-bundle.js vendored
View File

@ -29619,7 +29619,7 @@ function pathToRegexp (path, keys, options) {
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js because of ./node_modules/react-redux/es/index.js */
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/extends.js because of ./node_modules/react-redux/es/index.js */
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js because of ./node_modules/react-redux/es/index.js */
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js because of ./node_modules/react-measure/dist/index.esm.js */
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js because of ./node_modules/react-redux/es/index.js */
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/react/index.js (<- Module is not an ECMAScript module) */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
@ -38416,7 +38416,9 @@ function (_react_1$default$Comp) {
var effectiveness = this.props.effectiveness;
var wrapperCss = classnames_1.default('nes-container', styles.wrapper);
var indicatorWrapperCss = classnames_1.default(styles.indicatorWrapper);
var multiplierWrapperCss = classnames_1.default(styles.multiplierWrapper);
var multiplierWrapperX2Css = classnames_1.default(styles.multiplierWrapper);
var multiplierWrapperX3Css = classnames_1.default(styles.multiplierWrapper, styles.multiplierWrapperX3);
var multiplierWrapperX4Css = classnames_1.default(styles.multiplierWrapper, styles.multiplierWrapperX4);
var superEffectiveX2 = [];
var superEffective = [];
var notVeryEffective = [];
@ -38424,12 +38426,19 @@ function (_react_1$default$Comp) {
var notVeryEffectiveX3 = [];
var notVeryEffectiveX4 = [];
effectiveness.forEach(function (value, key) {
var typeIndicator = value === Pokemon_1.TypeEffectiveness.SUPER_EFFECTIVE || value === Pokemon_1.TypeEffectiveness.NOT_VERY_EFFECTIVE ? react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
key: key,
type: key
}) : react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
type: key
});
var typeIndicator;
if (value === Pokemon_1.TypeEffectiveness.SUPER_EFFECTIVE || value === Pokemon_1.TypeEffectiveness.NOT_VERY_EFFECTIVE) {
typeIndicator = react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
key: key,
className: "test",
type: key
});
} else {
typeIndicator = react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
type: key
});
}
switch (value) {
case Pokemon_1.TypeEffectiveness.SUPER_EFFECTIVE_X2:
@ -38467,29 +38476,29 @@ function (_react_1$default$Comp) {
});
return react_1.default.createElement("div", {
className: wrapperCss
}, (notVeryEffective.length > 0 || notVeryEffectiveX2.length > 0 || notVeryEffectiveX3.length > 0 || notVeryEffectiveX4.length > 0) && react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("h4", null, "Strengths", react_1.default.createElement("p", null, "It's Not Very Effective...")), react_1.default.createElement("div", {
}, (notVeryEffective.length > 0 || notVeryEffectiveX2.length > 0 || notVeryEffectiveX3.length > 0 || notVeryEffectiveX4.length > 0) && react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("h4", null, "Resistances", react_1.default.createElement("p", null, "It's Not Very Effective...")), react_1.default.createElement("div", {
className: indicatorWrapperCss
}, notVeryEffectiveX4.length > 0 && notVeryEffectiveX4.map(function (element, index) {
return react_1.default.createElement("div", {
key: "-4x".concat(index),
className: multiplierWrapperCss
className: multiplierWrapperX4Css
}, element, element, element, element);
}), notVeryEffectiveX3.length > 0 && notVeryEffectiveX3.map(function (element, index) {
return react_1.default.createElement("div", {
key: "-3x".concat(index),
className: multiplierWrapperCss
className: multiplierWrapperX3Css
}, element, element, element);
}), notVeryEffectiveX2.length > 0 && notVeryEffectiveX2.map(function (element, index) {
return react_1.default.createElement("div", {
key: "-2x".concat(index),
className: multiplierWrapperCss
className: multiplierWrapperX2Css
}, element, element);
}), notVeryEffective.length > 0 && notVeryEffective)), (superEffective.length > 0 || superEffectiveX2.length > 0) && react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("h4", null, "Weaknesses", react_1.default.createElement("p", null, "It's Super Effective!")), react_1.default.createElement("div", {
className: indicatorWrapperCss
}, superEffectiveX2.length > 0 && superEffectiveX2.map(function (element, index) {
return react_1.default.createElement("div", {
key: "+2x".concat(index),
className: multiplierWrapperCss
className: multiplierWrapperX2Css
}, element, element);
}), superEffective.length > 0 && superEffective)));
}
@ -38573,10 +38582,12 @@ function (_react_1$default$Comp) {
_createClass(TypeIndicator, [{
key: "render",
value: function render() {
var type = this.props.type;
var _this$props = this.props,
className = _this$props.className,
type = _this$props.type;
var containerCss = classnames_1.default('nes-container', 'with-title');
var containerRoundCss = classnames_1.default(containerCss, 'is-rounded');
var pokemonTypeCss = classnames_1.default(containerRoundCss, styles.pokemonType);
var pokemonTypeCss = classnames_1.default(className, containerRoundCss, styles.pokemonType);
return react_1.default.createElement("div", {
className: "".concat(pokemonTypeCss, " ").concat(formatter_1.formatType(type))
}, formatter_1.formatType(type));
@ -38964,7 +38975,7 @@ module.exports = {"baseStatRow":"StatDisplay__baseStatRow__1B60A"};
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
module.exports = {"multiplierWrapper":"TypeEffectiveDisplay__multiplierWrapper__14os7","wrapper":"TypeEffectiveDisplay__wrapper__1FFIj","indicatorWrapper":"TypeEffectiveDisplay__indicatorWrapper__2F3AY"};
module.exports = {"multiplierWrapper":"TypeEffectiveDisplay__multiplierWrapper__14os7","multiplierWrapperX3":"TypeEffectiveDisplay__multiplierWrapperX3__1SBG1","multiplierWrapperX4":"TypeEffectiveDisplay__multiplierWrapperX4__2KqYa","wrapper":"TypeEffectiveDisplay__wrapper__1FFIj","indicatorWrapper":"TypeEffectiveDisplay__indicatorWrapper__2F3AY"};
/***/ }),

30
src/ts/app/components/PokemonExplorer/TypeEffectiveDisplay.tsx
View File

@ -24,9 +24,17 @@ export class TypeEffectiveDisplay extends React.Component<ITypeEffectiveDisplayP
const indicatorWrapperCss = classNames(
styles.indicatorWrapper,
);
const multiplierWrapperCss = classNames(
const multiplierWrapperX2Css = classNames(
styles.multiplierWrapper,
);
const multiplierWrapperX3Css = classNames(
styles.multiplierWrapper,
styles.multiplierWrapperX3,
);
const multiplierWrapperX4Css = classNames(
styles.multiplierWrapper,
styles.multiplierWrapperX4,
);
const superEffectiveX2 : Array<JSX.Element> = [];
const superEffective : Array<JSX.Element> = [];
@ -35,7 +43,15 @@ export class TypeEffectiveDisplay extends React.Component<ITypeEffectiveDisplayP
const notVeryEffectiveX3 : Array<JSX.Element> = [];
const notVeryEffectiveX4 : Array<JSX.Element> = [];
effectiveness.forEach((value, key) => {
const typeIndicator = value === TypeEffectiveness.SUPER_EFFECTIVE || value === TypeEffectiveness.NOT_VERY_EFFECTIVE ? <TypeIndicator key={ key } type={ key } /> : <TypeIndicator type={ key } />;
let typeIndicator : JSX.Element;
if (value === TypeEffectiveness.SUPER_EFFECTIVE ||
value === TypeEffectiveness.NOT_VERY_EFFECTIVE
) {
typeIndicator = <TypeIndicator key={ key } className="test" type={ key } />;
} else {
typeIndicator = <TypeIndicator type={ key } />;
}
switch (value) {
case TypeEffectiveness.SUPER_EFFECTIVE_X2:
superEffectiveX2.push(typeIndicator);
@ -68,16 +84,16 @@ export class TypeEffectiveDisplay extends React.Component<ITypeEffectiveDisplayP
<div className={ wrapperCss }>
{ (notVeryEffective.length > 0 || notVeryEffectiveX2.length > 0 || notVeryEffectiveX3.length > 0 || notVeryEffectiveX4.length > 0) &&
<React.Fragment>
<h4>Strengths<p>It's Not Very Effective...</p></h4>
<h4>Resistances<p>It's Not Very Effective...</p></h4>
<div className={ indicatorWrapperCss }>
{ notVeryEffectiveX4.length > 0 &&
notVeryEffectiveX4.map((element, index) => <div key={ `-4x${index}` } className={ multiplierWrapperCss }>{ element }{ element }{ element }{ element }</div>)
notVeryEffectiveX4.map((element, index) => <div key={ `-4x${index}` } className={ multiplierWrapperX4Css }>{ element }{ element }{ element }{ element }</div>)
}
{ notVeryEffectiveX3.length > 0 &&
notVeryEffectiveX3.map((element, index) => <div key={ `-3x${index}` } className={ multiplierWrapperCss }>{ element }{ element }{ element }</div>)
notVeryEffectiveX3.map((element, index) => <div key={ `-3x${index}` } className={ multiplierWrapperX3Css }>{ element }{ element }{ element }</div>)
}
{ notVeryEffectiveX2.length > 0 &&
notVeryEffectiveX2.map((element, index) => <div key={ `-2x${index}` } className={ multiplierWrapperCss }>{ element }{ element }</div>)
notVeryEffectiveX2.map((element, index) => <div key={ `-2x${index}` } className={ multiplierWrapperX2Css }>{ element }{ element }</div>)
}
{ notVeryEffective.length > 0 &&
notVeryEffective
@ -90,7 +106,7 @@ export class TypeEffectiveDisplay extends React.Component<ITypeEffectiveDisplayP
<h4>Weaknesses<p>It's Super Effective!</p></h4>
<div className={ indicatorWrapperCss }>
{ superEffectiveX2.length > 0 &&
superEffectiveX2.map((element, index) => <div key={ `+2x${index}` } className={ multiplierWrapperCss }>{ element }{ element }</div>)
superEffectiveX2.map((element, index) => <div key={ `+2x${index}` } className={ multiplierWrapperX2Css }>{ element }{ element }</div>)
}
{ superEffective.length > 0 &&
superEffective

4
src/ts/app/components/PokemonExplorer/TypeIndicator.tsx
View File

@ -9,12 +9,13 @@ import { formatType } from 'app/utils/formatter';
import * as styles from './styles/TypeIndicator.scss';
export interface ITypeEffectiveDisplayProps {
className? : string;
type : POGOProtos.Enums.PokemonType;
}
export class TypeIndicator extends React.Component<ITypeEffectiveDisplayProps> {
public render() {
const { type } = this.props;
const { className, type } = this.props;
const containerCss = classNames(
'nes-container',
@ -25,6 +26,7 @@ export class TypeIndicator extends React.Component<ITypeEffectiveDisplayProps> {
'is-rounded',
);
const pokemonTypeCss = classNames(
className,
containerRoundCss,
styles.pokemonType,
);

61
src/ts/app/components/PokemonExplorer/styles/TypeEffectiveDisplay.scss
View File

@ -2,32 +2,63 @@
.multiplierWrapper {
position: relative;
width: 6.75rem;
padding-top: 6px;
padding-right: 6px;
& > * {
position: absolute;
}
:nth-child(1) {
position: inherit;
z-index: 3;
}
:nth-child(2) {
position: absolute;
top: -6px;
top: 0;
left: 6px;
z-index: 2;
}
:nth-child(3) {
position: absolute;
top: -12px;
left: 12px;
z-index: 1;
}
:nth-child(4) {
position: absolute;
top: -12px;
left: 12px;
left: 18px;
z-index: 0;
}
&.multiplierWrapperX3 {
padding-top: 12px;
padding-right: 12px;
:nth-child(3) {
top: 0;
}
:nth-child(2) {
top: 6px;
}
}
&.multiplierWrapperX4 {
padding-top: 18px;
padding-right: 18px;
:nth-child(4) {
top: 0;
}
:nth-child(3) {
top: 6px;
}
:nth-child(2) {
top: 12px;
}
}
}
.wrapper {
@ -40,11 +71,13 @@
h4 p {
font-size: 0.7em;
color: $main-font-secondary-color;
margin: 0;
}
.indicatorWrapper {
display: flex;
flex-flow: row wrap;
align-items: end;
& > * {
margin-right: 14px;
@ -52,8 +85,16 @@
}
.multiplierWrapper {
margin-right: 21px;
margin-top: 3px;
width: auto;
margin-right: 2px;
&.multiplierWrapperX3 {
margin-right: -4px;
}
&.multiplierWrapperX4 {
margin-right: -10px;
}
}
& > *,

2
src/ts/app/components/PokemonExplorer/styles/TypeEffectiveDisplay.scss.d.ts vendored
View File

@ -2,4 +2,6 @@
// Please do not change this file!
export const indicatorWrapper: string;
export const multiplierWrapper: string;
export const multiplierWrapperX3: string;
export const multiplierWrapperX4: string;
export const wrapper: string;