deliver #101 add extra pokemon needed span and style

vinnymac · Jan 17, 2017 · 5cb766c · 5cb766c
1 parent 47255f9
commit 5cb766c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/app/app.global.css b/app/app.global.css
@@ -230,6 +230,13 @@ tbody > tr > td a {
   cursor: pointer;
 }
 
+tbody > tr > td .additional-info {
+  font-size: 12px;
+  font-weight: bold;
+  color: green;
+  vertical-align: middle;
+}
+
 .favorite-yellow {
   color: #F3BC0A;
 }

diff --git a/app/screens/Table/components/Species.js b/app/screens/Table/components/Species.js
@@ -143,16 +143,29 @@ class Species extends React.Component {
       } = speciesState[specie.pokemon_id]
 
       let extraCandyNeededSpan
+      let extraPokemonNeededSpan
 
       if (specie.evolves > 0) {
         const totalCandyNeeded = specie.candyToEvolve * specie.count
         const extraCandyNeeded = totalCandyNeeded - specie.candy
         if (extraCandyNeeded > 0) {
           extraCandyNeededSpan = (
-            <span>
+            <span
+              className="additional-info"
+              alt="Extra candy required to evolve all pokemon"
+            >
               {` +${extraCandyNeeded}`}
             </span>
           )
+        } else if (extraCandyNeeded < 0) {
+          extraPokemonNeededSpan = (
+            <span
+              className="additional-info"
+              alt="Extra pokemon required to use all candy"
+            >
+              {` +${Math.floor((extraCandyNeeded * -1) / specie.candyToEvolve)}`}
+            </span>
+          )
         }
       }
 
@@ -174,7 +187,12 @@ class Species extends React.Component {
             />
           </td>
           <td>{specie.name}</td>
-          <td>{specie.count}</td>
+          <td>
+            <span>
+              {specie.count}
+            </span>
+            {extraPokemonNeededSpan}
+          </td>
           <td>
             <span>
               {specie.candy}