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

add move title to dropdown

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-09 20:24:01 -05:00
parent 0d5aa0541c
commit 6e908ab43c
7 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dist/app.css vendored
View File

@ -355,6 +355,9 @@
.MovesExplorer__wrapper__iV8WK { .MovesExplorer__wrapper__iV8WK {
font-size: 1em; } font-size: 1em; }
.MovesExplorer__wrapper__iV8WK .title {
color: #fff;
margin-top: -2em; }
.MovesExplorer__legacy__ixKar { .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-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
@ -367,11 +370,11 @@
width: 425px; width: 425px;
max-height: 450px; max-height: 450px;
position: fixed; position: fixed;
z-index: 2;
top: 25%; top: 25%;
left: 50%; left: 50%;
margin-left: -160px; margin-left: -160px;
padding-left: 0; padding: 0; }
z-index: 2; }
.MovesDropdown__menu__2yxRm .list-item.active::before, .MovesDropdown__menu__2yxRm .list-item.active::before,
.MovesDropdown__menu__2yxRm .list-item:hover::before { .MovesDropdown__menu__2yxRm .list-item:hover::before {
top: 8px; } top: 8px; }
@ -379,6 +382,7 @@
.MovesDropdown__listItem__3fTKH { .MovesDropdown__listItem__3fTKH {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-right: 2rem;
padding-left: 2rem; padding-left: 2rem;
white-space: nowrap; white-space: nowrap;
text-transform: capitalize; } text-transform: capitalize; }
@ -391,6 +395,9 @@
.MovesExplorer__wrapper__iV8WK { .MovesExplorer__wrapper__iV8WK {
font-size: 1em; } font-size: 1em; }
.MovesExplorer__wrapper__iV8WK .title {
color: #fff;
margin-top: -2em; }
.MovesExplorer__legacy__ixKar { .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-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);

8
dist/main-bundle.js vendored
View File

@ -38509,6 +38509,7 @@ function (_react_1$default$Comp) {
var _this2 = this; var _this2 = this;
var _this$props = this.props, var _this$props = this.props,
menuLabel = _this$props.menuLabel,
movesById = _this$props.movesById, movesById = _this$props.movesById,
selectedMove = _this$props.selectedMove, selectedMove = _this$props.selectedMove,
options = _this$props.options; options = _this$props.options;
@ -38544,7 +38545,9 @@ function (_react_1$default$Comp) {
onClick: this.toggleMenu onClick: this.toggleMenu
}, moveName), isMenuOpen && react_1.default.createElement("div", { }, moveName), isMenuOpen && react_1.default.createElement("div", {
className: menuCss className: menuCss
}, react_1.default.createElement(react_measure_1.default, { }, react_1.default.createElement("h3", {
className: "title"
}, menuLabel), react_1.default.createElement(react_measure_1.default, {
bounds: true, bounds: true,
onResize: onResize onResize: onResize
}, function (_ref) { }, function (_ref) {
@ -38769,6 +38772,7 @@ function (_react_1$default$Comp) {
return react_1.default.createElement("div", { return react_1.default.createElement("div", {
className: wrapperCss className: wrapperCss
}, react_1.default.createElement(MovesDropdown_1.MovesDropdown, { }, react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
menuLabel: "Quick Move",
movesById: movesById, movesById: movesById,
selectedMove: quickMove, selectedMove: quickMove,
options: quickMoves, options: quickMoves,
@ -38778,6 +38782,7 @@ function (_react_1$default$Comp) {
className: quickMoveCss, className: quickMoveCss,
type: quickMoveType type: quickMoveType
}), react_1.default.createElement(MovesDropdown_1.MovesDropdown, { }), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
menuLabel: "Charge Move 1",
movesById: movesById, movesById: movesById,
selectedMove: chargeMove1, selectedMove: chargeMove1,
options: chargeMoves, options: chargeMoves,
@ -38787,6 +38792,7 @@ function (_react_1$default$Comp) {
className: chargeMove1Css, className: chargeMove1Css,
type: chargeMove1Type type: chargeMove1Type
}), react_1.default.createElement(MovesDropdown_1.MovesDropdown, { }), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
menuLabel: "Charge Move 2",
movesById: movesById, movesById: movesById,
selectedMove: chargeMove2, selectedMove: chargeMove2,
options: chargeMoves, options: chargeMoves,

2
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>PVP, ok? E-Mon.</title> <title>PVP Pokemon Explorer</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

3
src/ts/app/components/MovesDropdown.tsx
View File

@ -11,6 +11,7 @@ import { TypeIndicator } from './TypeIndicator';
import * as styles from 'app/styles/MovesDropdown.scss'; import * as styles from 'app/styles/MovesDropdown.scss';
export interface IMovesDropdownProps { export interface IMovesDropdownProps {
menuLabel : string;
movesById : CombatMoveStats; movesById : CombatMoveStats;
selectedMove : IPokemonMove | null; selectedMove : IPokemonMove | null;
options : Array<IPokemonMove>; options : Array<IPokemonMove>;
@ -49,6 +50,7 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
public render() { public render() {
const { const {
menuLabel,
movesById, movesById,
selectedMove, selectedMove,
options, options,
@ -93,6 +95,7 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
</div> </div>
{ isMenuOpen && { isMenuOpen &&
<div className={ menuCss }> <div className={ menuCss }>
<h3 className="title">{ menuLabel }</h3>
<Measure <Measure
bounds={ true } bounds={ true }
onResize={ onResize } onResize={ onResize }

3
src/ts/app/components/MovesExplorer.tsx
View File

@ -71,6 +71,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
return ( return (
<div className={ wrapperCss }> <div className={ wrapperCss }>
<MovesDropdown <MovesDropdown
menuLabel="Quick Move"
movesById={ movesById } movesById={ movesById }
selectedMove={ quickMove } selectedMove={ quickMove }
options={ quickMoves } options={ quickMoves }
@ -81,6 +82,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
<TypeIndicator className={ quickMoveCss } type={ quickMoveType } /> <TypeIndicator className={ quickMoveCss } type={ quickMoveType } />
} }
<MovesDropdown <MovesDropdown
menuLabel="Charge Move 1"
movesById={ movesById } movesById={ movesById }
selectedMove={ chargeMove1 } selectedMove={ chargeMove1 }
options={ chargeMoves } options={ chargeMoves }
@ -91,6 +93,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
<TypeIndicator className={ chargeMove1Css } type={ chargeMove1Type } /> <TypeIndicator className={ chargeMove1Css } type={ chargeMove1Type } />
} }
<MovesDropdown <MovesDropdown
menuLabel="Charge Move 2"
movesById={ movesById } movesById={ movesById }
selectedMove={ chargeMove2 } selectedMove={ chargeMove2 }
options={ chargeMoves } options={ chargeMoves }

5
src/ts/app/styles/MovesDropdown.scss
View File

@ -8,11 +8,11 @@
width: map-get($container-width, 'desktop'); width: map-get($container-width, 'desktop');
max-height: 450px; max-height: 450px;
position: fixed; position: fixed;
z-index: 2;
top: 25%; top: 25%;
left: 50%; left: 50%;
margin-left: -160px; margin-left: -160px;
padding-left: 0; padding: 0;
z-index: 2;
:global(.list-item):global(.active)::before, :global(.list-item):global(.active)::before,
:global(.list-item):hover::before { :global(.list-item):hover::before {
@ -23,6 +23,7 @@
.listItem { .listItem {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-right: 2rem;
padding-left: 2rem; padding-left: 2rem;
white-space: nowrap; white-space: nowrap;
text-transform: capitalize; text-transform: capitalize;

7
src/ts/app/styles/MovesExplorer.scss
View File

@ -1,5 +1,12 @@
@import 'styles/Variables.scss';
.wrapper { .wrapper {
font-size: 1em; font-size: 1em;
:global(.title) {
color: $main-active-font-color;
margin-top: -2em;
}
} }
.legacy { .legacy {