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

finish desktop layout

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-16 14:23:05 -04:00
parent 008e249908
commit b3f02787bc
7 changed files with 195 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
dist/app.css vendored
View File

@ -14,28 +14,42 @@
display: flex;
flex-flow: row nowrap;
align-items: stretch;
position: relative; }
position: relative;
padding-bottom: 60px; }
.PokemonApp__header__2s_s2 {
display: flex;
flex: 0 0 auto;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
margin: 0.1em; }
position: sticky;
top: 0; }
.PokemonApp__header__2s_s2 a {
display: inline-block; }
.PokemonApp__footer__3q19Q {
height: 60px; }
height: 60px;
position: fixed;
right: 0;
bottom: 0;
left: 0; }
.PokemonApp__leftNavigation__1rBU9 {
padding: 1em;
position: relative;
.PokemonApp__header__2s_s2,
.PokemonApp__footer__3q19Q {
display: flex;
flex-flow: column nowrap; }
margin: 0.1em;
z-index: 10; }
.PokemonApp__navigation__26Mp5 {
padding: 1em;
position: sticky;
top: 90px;
display: inline-flex;
flex-flow: column nowrap;
align-self: flex-start; }
.PokemonApp__header__2s_s2 button,
.PokemonApp__leftNavigation__1rBU9 button {
.PokemonApp__navigation__26Mp5 button {
padding: 0;
margin-bottom: 1em;
outline: none;
@ -50,12 +64,15 @@
left: 0;
background-color: #000;
opacity: 0.7; }
.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s {
z-index: 1; }
.PokemonApp__navigationWrapper__3oyCI {
display: flex;
margin: 0 auto; }
.PokemonApp__displayWrapper__2PiN5 {
margin: 0 auto;
display: flex;
flex-flow: column wrap;
align-content: center; }
margin: 0 auto; }
.PokemonApp__displayWrapper__2PiN5 > * {
width: 425px;
margin: 0 1em; }
@ -147,28 +164,42 @@
display: flex;
flex-flow: row nowrap;
align-items: stretch;
position: relative; }
position: relative;
padding-bottom: 60px; }
.PokemonApp__header__2s_s2 {
display: flex;
flex: 0 0 auto;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
margin: 0.1em; }
position: sticky;
top: 0; }
.PokemonApp__header__2s_s2 a {
display: inline-block; }
.PokemonApp__footer__3q19Q {
height: 60px; }
height: 60px;
position: fixed;
right: 0;
bottom: 0;
left: 0; }
.PokemonApp__leftNavigation__1rBU9 {
padding: 1em;
position: relative;
.PokemonApp__header__2s_s2,
.PokemonApp__footer__3q19Q {
display: flex;
flex-flow: column nowrap; }
margin: 0.1em;
z-index: 10; }
.PokemonApp__navigation__26Mp5 {
padding: 1em;
position: sticky;
top: 90px;
display: inline-flex;
flex-flow: column nowrap;
align-self: flex-start; }
.PokemonApp__header__2s_s2 button,
.PokemonApp__leftNavigation__1rBU9 button {
.PokemonApp__navigation__26Mp5 button {
padding: 0;
margin-bottom: 1em;
outline: none;
@ -183,12 +214,15 @@
left: 0;
background-color: #000;
opacity: 0.7; }
.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s {
z-index: 1; }
.PokemonApp__navigationWrapper__3oyCI {
display: flex;
margin: 0 auto; }
.PokemonApp__displayWrapper__2PiN5 {
margin: 0 auto;
display: flex;
flex-flow: column wrap;
align-content: center; }
margin: 0 auto; }
.PokemonApp__displayWrapper__2PiN5 > * {
width: 425px;
margin: 0 1em; }
@ -231,6 +265,7 @@
display: inline; }
.LeagueIvExplorer__ivsContainer__31sfb {
max-height: 350px;
font-size: 0.95em;
flex: 0 999 auto;
display: flex;

42
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__) {
@ -37226,6 +37226,8 @@ Object.defineProperty(exports, "__esModule", {
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 styles = __importStar(__webpack_require__(/*! app/styles/PokemonApp.scss */ "./src/ts/app/styles/PokemonApp.scss"));
var Footer =
@ -37242,8 +37244,9 @@ function (_react_1$default$Comp) {
_createClass(Footer, [{
key: "render",
value: function render() {
var footerCss = classnames_1.default('nes-container', styles.footer);
return react_1.default.createElement("footer", {
className: styles.footer
className: footerCss
}, react_1.default.createElement("div", null));
}
}]);
@ -39003,8 +39006,10 @@ function (_react_1$default$Comp) {
selectedCombatMoves = _this$props$pokemonEx.selectedCombatMoves,
combatMoveSelectorsOpen = _this$props$pokemonEx.combatMoveSelectorsOpen;
var widgets = this.state.widgets;
var isOverlayShown = this.props.isOverlaid || combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
var leftNavCss = classnames_1.default(styles.leftNavigation);
var isSelectingMove = combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
var isOverlayShown = this.props.isOverlaid || isSelectingMove;
var navWrapperCss = classnames_1.default(styles.navigationWrapper);
var navCss = classnames_1.default(styles.navigation);
var displayWrapperCss = classnames_1.default(styles.displayWrapper);
var iconCss = classnames_1.default('icon', 'pixel', 'sprite');
var pvpCss = classnames_1.default(iconCss, 'pvp', {
@ -39018,13 +39023,16 @@ function (_react_1$default$Comp) {
var tmCss = classnames_1.default(iconCss, 'tm', {
active: widgets.moves
});
var tmButtonCss = classnames_1.default(); // weaknesses are indicated by types that cause super effective damage on defense
var tmButtonCss = classnames_1.default();
var overLayCss = classnames_1.default(styles.overlay, _defineProperty({}, styles.complete, isSelectingMove)); // weaknesses are indicated by types that cause super effective damage on defense
var pokemonTypeWeaknesses = leaguePokemon !== null ? this.getSuperEffectiveTypes(leaguePokemon.effectiveness) : []; // strengths are indicuated by types that do super effective damage on offense
var moveTypeStrengths = this.getSuperEffectiveTypes(types_1.calculateTypeCoverage(selectedCombatMoves, combatMoves, attackTypeEffectiveness));
return react_1.default.createElement("div", {
className: styles.body
}, react_1.default.createElement("div", {
className: navWrapperCss
}, react_1.default.createElement("div", {
className: displayWrapperCss
}, leaguePokemon !== null && react_1.default.createElement(PokemonDisplay_1.PokemonDisplay, {
@ -39038,14 +39046,7 @@ function (_react_1$default$Comp) {
mode: TypeEffectiveDisplay_1.EffectivenessMode.DEFENSE,
effectiveness: leaguePokemon.effectiveness,
coverage: moveTypeStrengths
})), widgets.pvp && leaguePokemon !== null && react_1.default.createElement(LeagueIvExplorer_1.LeagueIvExplorer, {
activeLeague: league,
leaguePokemon: leaguePokemon,
individualValues: individualValues,
handleChangeIndividualValue: this.handleChangeIndividualValue,
handleMaximizeLevel: this.handleMaximizeLevel,
handleChangeLeague: this.handleChangeLeague
}), widgets.moves && leaguePokemon !== null && react_1.default.createElement(MovesExplorer_1.MovesExplorer, {
})), widgets.moves && leaguePokemon !== null && react_1.default.createElement(MovesExplorer_1.MovesExplorer, {
movesById: combatMoves,
quickMoves: leaguePokemon.moves.quick,
chargeMoves: leaguePokemon.moves.cinematic,
@ -39055,8 +39056,15 @@ function (_react_1$default$Comp) {
combatMoveSelectorsOpen: combatMoveSelectorsOpen,
handleToggleDropdownOpen: this.handleToggleDropdownOpen,
handleChangeSelectedMove: this.handleChangeSelectedMove
}), widgets.pvp && leaguePokemon !== null && react_1.default.createElement(LeagueIvExplorer_1.LeagueIvExplorer, {
activeLeague: league,
leaguePokemon: leaguePokemon,
individualValues: individualValues,
handleChangeIndividualValue: this.handleChangeIndividualValue,
handleMaximizeLevel: this.handleMaximizeLevel,
handleChangeLeague: this.handleChangeLeague
})), react_1.default.createElement("div", {
className: leftNavCss
className: navCss
}, react_1.default.createElement("button", {
className: pvpButtonCss,
onClick: this.handlePvpClick
@ -39072,8 +39080,8 @@ function (_react_1$default$Comp) {
onClick: this.handleMovesClick
}, react_1.default.createElement("i", {
className: tmCss
}))), isOverlayShown && react_1.default.createElement("div", {
className: styles.overlay,
})))), isOverlayShown && react_1.default.createElement("div", {
className: overLayCss,
onClick: this.handleOverlayClick
}));
}
@ -40875,7 +40883,7 @@ exports.PokemonAppReducers = function () {
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
module.exports = {"wrapper":"PokemonApp__wrapper__3ZEoC","overlaid":"PokemonApp__overlaid__3B_Ol","highlight":"PokemonApp__highlight__1zywH","body":"PokemonApp__body__23cv_","header":"PokemonApp__header__2s_s2","footer":"PokemonApp__footer__3q19Q","leftNavigation":"PokemonApp__leftNavigation__1rBU9","overlay":"PokemonApp__overlay__2vc-r","displayWrapper":"PokemonApp__displayWrapper__2PiN5","container":"PokemonApp__container__MsUHy","leftColumn":"PokemonApp__leftColumn__3Lv_L","rightColumn":"PokemonApp__rightColumn__1xE25"};
module.exports = {"wrapper":"PokemonApp__wrapper__3ZEoC","overlaid":"PokemonApp__overlaid__3B_Ol","highlight":"PokemonApp__highlight__1zywH","body":"PokemonApp__body__23cv_","header":"PokemonApp__header__2s_s2","footer":"PokemonApp__footer__3q19Q","navigation":"PokemonApp__navigation__26Mp5","overlay":"PokemonApp__overlay__2vc-r","complete":"PokemonApp__complete__h3L_s","navigationWrapper":"PokemonApp__navigationWrapper__3oyCI","displayWrapper":"PokemonApp__displayWrapper__2PiN5","container":"PokemonApp__container__MsUHy","leftColumn":"PokemonApp__leftColumn__3Lv_L","rightColumn":"PokemonApp__rightColumn__1xE25"};
/***/ }),

9
src/ts/app/components/Footer.tsx
View File

@ -1,5 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import * as styles from 'app/styles/PokemonApp.scss';
interface IFooterProps {}
@ -7,8 +9,13 @@ interface IFooterProps {}
export class Footer extends React.Component<IFooterProps> {
public render() {
const footerCss = classNames(
'nes-container',
styles.footer
);
return (
<footer className={ styles.footer }><div/></footer>
<footer className={ footerCss }><div/></footer>
);
}
}

109
src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
View File

@ -75,10 +75,14 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
widgets,
} = this.state;
const isOverlayShown = this.props.isOverlaid || combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
const isSelectingMove = combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
const isOverlayShown = this.props.isOverlaid || isSelectingMove;
const leftNavCss = classNames(
styles.leftNavigation,
const navWrapperCss = classNames(
styles.navigationWrapper,
);
const navCss = classNames(
styles.navigation,
);
const displayWrapperCss = classNames(
@ -128,6 +132,13 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
// }
);
const overLayCss = classNames(
styles.overlay,
{
[styles.complete]: isSelectingMove
}
);
// weaknesses are indicated by types that cause super effective damage on defense
const pokemonTypeWeaknesses = leaguePokemon !== null ? this.getSuperEffectiveTypes(leaguePokemon.effectiveness) : [];
// strengths are indicuated by types that do super effective damage on offense
@ -135,54 +146,56 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
return (
<div className={ styles.body }>
<div className={ displayWrapperCss }>
{ leaguePokemon !== null &&
<PokemonDisplay
leaguePokemon={ leaguePokemon }
isHighlighted={ isOverlayShown }
/>
}
{ widgets.types && leaguePokemon !== null &&
<div className="nes-container with-title">
<h3 className="title">Type Effectivess</h3>
<TypeEffectiveDisplay
mode={ EffectivenessMode.DEFENSE }
effectiveness={ leaguePokemon.effectiveness }
coverage={ moveTypeStrengths }
<div className={ navWrapperCss }>
<div className={ displayWrapperCss }>
{ leaguePokemon !== null &&
<PokemonDisplay
leaguePokemon={ leaguePokemon }
isHighlighted={ isOverlayShown }
/>
</div>
}
{ widgets.pvp && leaguePokemon !== null &&
<LeagueIvExplorer
activeLeague={ league }
leaguePokemon={ leaguePokemon }
individualValues={ individualValues }
handleChangeIndividualValue={ this.handleChangeIndividualValue }
handleMaximizeLevel={ this.handleMaximizeLevel }
handleChangeLeague={ this.handleChangeLeague }
/>
}
{ widgets.moves && leaguePokemon !== null &&
<MovesExplorer
movesById={ combatMoves }
quickMoves={ leaguePokemon.moves.quick }
chargeMoves={ leaguePokemon.moves.cinematic }
selectedMoves={ selectedCombatMoves }
pokemonTypeWeaknesses={ pokemonTypeWeaknesses }
attackTypeEffectiveness={ attackTypeEffectiveness }
combatMoveSelectorsOpen={ combatMoveSelectorsOpen }
handleToggleDropdownOpen={ this.handleToggleDropdownOpen }
handleChangeSelectedMove={ this.handleChangeSelectedMove }
/>
}
</div>
<div className={ leftNavCss }>
<button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
<button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
<button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
}
{ widgets.types && leaguePokemon !== null &&
<div className="nes-container with-title">
<h3 className="title">Type Effectivess</h3>
<TypeEffectiveDisplay
mode={ EffectivenessMode.DEFENSE }
effectiveness={ leaguePokemon.effectiveness }
coverage={ moveTypeStrengths }
/>
</div>
}
{ widgets.moves && leaguePokemon !== null &&
<MovesExplorer
movesById={ combatMoves }
quickMoves={ leaguePokemon.moves.quick }
chargeMoves={ leaguePokemon.moves.cinematic }
selectedMoves={ selectedCombatMoves }
pokemonTypeWeaknesses={ pokemonTypeWeaknesses }
attackTypeEffectiveness={ attackTypeEffectiveness }
combatMoveSelectorsOpen={ combatMoveSelectorsOpen }
handleToggleDropdownOpen={ this.handleToggleDropdownOpen }
handleChangeSelectedMove={ this.handleChangeSelectedMove }
/>
}
{ widgets.pvp && leaguePokemon !== null &&
<LeagueIvExplorer
activeLeague={ league }
leaguePokemon={ leaguePokemon }
individualValues={ individualValues }
handleChangeIndividualValue={ this.handleChangeIndividualValue }
handleMaximizeLevel={ this.handleMaximizeLevel }
handleChangeLeague={ this.handleChangeLeague }
/>
}
</div>
<div className={ navCss }>
<button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
<button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
<button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
</div>
</div>
{ isOverlayShown &&
<div className={ styles.overlay } onClick={ this.handleOverlayClick } />
<div className={ overLayCss } onClick={ this.handleOverlayClick } />
}
</div>
);

1
src/ts/app/components/PokemonExplorer/styles/LeagueIvExplorer.scss
View File

@ -37,6 +37,7 @@
}
.ivsContainer {
max-height: 350px;
font-size: 0.95em;
flex: 0 999 auto;
display: flex;

57
src/ts/app/styles/PokemonApp.scss
View File

@ -1,6 +1,7 @@
@import '~styles/Variables.scss';
$overlay-opacity: 0.7;
$footer-height: 60px;
.wrapper {
display: flex;
@ -22,20 +23,17 @@ $overlay-opacity: 0.7;
flex-flow: row nowrap;
align-items: stretch;
position: relative;
padding-bottom: $footer-height;
}
// & > * {
// flex-grow: 0;
// flex-shrink: 0;
// }
}
.header {
display: flex;
flex: 0 0 auto;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
margin: 0.1em;
position: sticky;
top: 0;
a {
display: inline-block;
@ -43,18 +41,31 @@ $overlay-opacity: 0.7;
}
.footer {
height: 60px;
}
.leftNavigation {
padding: 1em;
position: relative;
display: flex;
flex-flow: column nowrap;
height: $footer-height;
position: fixed;
right: 0;
bottom: 0;
left: 0;
}
.header,
.leftNavigation {
.footer {
display: flex;
margin: 0.1em;
z-index: 10;
}
.navigation {
padding: 1em;
position: sticky;
top: 90px;
display: inline-flex;
flex-flow: column nowrap;
align-self: flex-start;
}
.header,
.navigation {
button {
padding: 0;
margin-bottom: 1em;
@ -72,15 +83,19 @@ $overlay-opacity: 0.7;
left: 0;
background-color: $main-overlay-color;
opacity: $overlay-opacity;
&.complete {
z-index: 1;
}
}
.navigationWrapper {
display: flex;
margin: 0 auto;
}
.displayWrapper {
margin: 0 auto;
// flex-basis: 30rem;
// width: 30rem;
display: flex;
flex-flow: column wrap;
align-content: center;
& > * {
width: map-get($container-width, 'desktop');

4
src/ts/app/styles/PokemonApp.scss.d.ts vendored
View File

@ -1,13 +1,15 @@
// This file is automatically generated.
// Please do not change this file!
export const body: string;
export const complete: string;
export const container: string;
export const displayWrapper: string;
export const footer: string;
export const header: string;
export const highlight: string;
export const leftColumn: string;
export const leftNavigation: string;
export const navigation: string;
export const navigationWrapper: string;
export const overlaid: string;
export const overlay: string;
export const rightColumn: string;