From 5cb766c1521276745d8d70e440292d17b3b69e38 Mon Sep 17 00:00:00 2001
From: Vincent Taverna <vinnymac@gmail.com>
Date: Mon, 16 Jan 2017 23:15:25 -0500
Subject: [PATCH] deliver #101 add extra pokemon needed span and style

---
 app/app.global.css                      |  7 +++++++
 app/screens/Table/components/Species.js | 22 ++++++++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/app.global.css b/app/app.global.css
index d28e7a3..14ca30d 100644
--- 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
index df97b76..58056fc 100644
--- 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}