feat(dexes): use shiny sprites for shiny dexes

pokedextracker · Nov 27, 2016 · e5329cb · e5329cb
1 parent b8174c3
commit e5329cb
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git a/app/components/evolution-family.jsx b/app/components/evolution-family.jsx
@@ -4,15 +4,15 @@ import { EvolutionsComponent } from './evolutions';
 import { iconClass }           from '../utils/pokemon';
 import { setCurrentPokemon }   from '../actions/pokemon';
 
-export function EvolutionFamily ({ family, setCurrentPokemon }) {
+export function EvolutionFamily ({ dex, family, setCurrentPokemon }) {
   let column1 = null;
   let column2 = null;
 
   if (family.pokemon.length > 1) {
     column1 = (
       <div className="evolution-pokemon-column">
         {family.pokemon[1].map((pokemon, i) => <a key={i} onClick={() => setCurrentPokemon(pokemon.national_id)}>
-          <i className={iconClass(pokemon.national_id)} />
+          <i className={iconClass(pokemon.national_id, dex.shiny)} />
         </a>)}
       </div>
     );
@@ -22,7 +22,7 @@ export function EvolutionFamily ({ family, setCurrentPokemon }) {
     column2 = (
       <div className="evolution-pokemon-column">
         {family.pokemon[2].map((pokemon, i) => <a key={i} onClick={() => setCurrentPokemon(pokemon.national_id)}>
-          <i className={iconClass(pokemon.national_id)} />
+          <i className={iconClass(pokemon.national_id, dex.shiny)} />
         </a>)}
       </div>
     );
@@ -32,7 +32,7 @@ export function EvolutionFamily ({ family, setCurrentPokemon }) {
     <div className="info-evolutions">
       <div className="evolution-pokemon-column">
         <a onClick={() => setCurrentPokemon(family.pokemon[0][0].national_id)}>
-          <i className={iconClass(family.pokemon[0][0].national_id)} />
+          <i className={iconClass(family.pokemon[0][0].national_id, dex.shiny)} />
         </a>
         {family.evolutions.length === 0 ? <div>Does not evolve</div> : null}
       </div>
@@ -44,10 +44,14 @@ export function EvolutionFamily ({ family, setCurrentPokemon }) {
   );
 }
 
+function mapStateToProps ({ currentDex, currentUser, users }) {
+  return { dex: users[currentUser].dexesBySlug[currentDex] };
+}
+
 function mapDispatchToProps (dispatch) {
   return {
     setCurrentPokemon: (id) => dispatch(setCurrentPokemon(id))
   };
 }
 
-export const EvolutionFamilyComponent = connect(null, mapDispatchToProps)(EvolutionFamily);
+export const EvolutionFamilyComponent = connect(mapStateToProps, mapDispatchToProps)(EvolutionFamily);
diff --git a/app/components/info.jsx b/app/components/info.jsx
@@ -35,7 +35,7 @@ export class Info extends Component {
   }
 
   render () {
-    const { pokemon, showInfo } = this.props;
+    const { dex, pokemon, showInfo } = this.props;
 
     if (!pokemon) {
       return (
@@ -57,7 +57,7 @@ export class Info extends Component {
 
         <div className="info-main">
           <div className="info-header">
-            <i className={iconClass(pokemon.national_id)} />
+            <i className={iconClass(pokemon.national_id, dex.shiny)} />
             <h1 dangerouslySetInnerHTML={htmlName(pokemon.name)}></h1>
             <h2>#{padding(pokemon.national_id, 3)}</h2>
           </div>
@@ -94,8 +94,8 @@ export class Info extends Component {
 
 }
 
-function mapStateToProps ({ currentPokemon, pokemon, showInfo }) {
-  return { currentPokemon, pokemon: pokemon[currentPokemon], showInfo };
+function mapStateToProps ({ currentDex, currentUser, currentPokemon, pokemon, showInfo, users }) {
+  return { currentPokemon, dex: users[currentUser].dexesBySlug[currentDex], pokemon: pokemon[currentPokemon], showInfo };
 }
 
 function mapDispatchToProps (dispatch) {

diff --git a/app/components/pokemon.jsx b/app/components/pokemon.jsx
@@ -51,7 +51,7 @@ export class Pokemon extends Component {
   }
 
   render () {
-    const { capture, region, session, user } = this.props;
+    const { capture, dex, region, session, user } = this.props;
 
     if (!capture) {
       return (
@@ -73,11 +73,11 @@ export class Pokemon extends Component {
       <div className={classNames(classes)}>
         <div className="set-captured" onClick={this.toggleCaptured}>
           <h4 dangerouslySetInnerHTML={htmlName(capture.pokemon.name)} />
-          <i className={iconClass(capture.pokemon.national_id)} />
+          <i className={iconClass(capture.pokemon.national_id, dex.shiny)} />
           <p>#{padding(capture.pokemon.national_id, 3)}</p>
         </div>
         <div className="set-captured-mobile" onClick={this.toggleCaptured}>
-          <i className={iconClass(capture.pokemon.national_id)} />
+          <i className={iconClass(capture.pokemon.national_id, dex.shiny)} />
           <h4 dangerouslySetInnerHTML={htmlName(capture.pokemon.name)} />
           <p>#{padding(capture.pokemon.national_id, 3)}</p>
         </div>

diff --git a/app/components/register.jsx b/app/components/register.jsx
@@ -91,7 +91,8 @@ export class Register extends Component {
               </h2>
               <div className="form-group">
                 <label htmlFor="dex_name">Name</label>
-                <input className="form-control" ref={(c) => this._title = c} name="dex_name" id="dex_name" type="text" placeholder="Living Dex" />
+                <input className="form-control" ref={(c) => this._title = c} name="dex_name" id="dex_name" type="text" required placeholder="Living Dex" />
+                <i className="fa fa-asterisk" />
               </div>
               <div className="form-group">
                 <label htmlFor="type">Type</label>

diff --git a/app/utils/pokemon.js b/app/utils/pokemon.js
@@ -4,8 +4,13 @@ export function htmlName (name) {
   return { __html: name.replace('♀', '<i class="fa fa-venus"></i>').replace('♂', '<i class="fa fa-mars"></i>') };
 }
 
-export function iconClass (id) {
-  return `pkicon pkicon-${padding(id, 3)}`;
+export function iconClass (id, shiny) {
+  const idPadded = padding(id, 3);
+
+  if (shiny) {
+    return `pkicon pkicon-${idPadded} color-shiny`;
+  }
+  return `pkicon pkicon-${idPadded} test`;
 }
 
 export function regionCheck (pokemon, region) {