From 4da209fdc1d0d1fddcece577e9ad6afa4d39821d Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 30 Sep 2019 16:38:36 +1000
Subject: [PATCH] combat phase components

---
 WORKLOG.md                                 | 2 --
 client/assets/styles/game.less             | 5 +++++
 client/src/components/targeting.arrows.jsx | 8 ++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/WORKLOG.md b/WORKLOG.md
index 32c8ffd9..8f93a003 100644
--- a/WORKLOG.md
+++ b/WORKLOG.md
@@ -10,8 +10,6 @@
 
 * can't reset password without knowing password =\
 
-* Display skill colours during combat
-
 ## SOON (Before or After PAX)
 
 * bot game grind
diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less
index a8765ba5..5e9586de 100644
--- a/client/assets/styles/game.less
+++ b/client/assets/styles/game.less
@@ -187,6 +187,11 @@
     align-self: center;
     text-align: center;
     height: auto;
+    svg {
+        display: inline;
+        height: 1em;
+        margin-right: 0.1em
+    }
 }
 
 /* some stupid bug in chrome makes it fill the entire screen */
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index ae7e4001..7d401887 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -38,14 +38,14 @@ class TargetSvg extends Component {
             if (!animTarget) return false;
             const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animTarget.skill));
             const itemSourceInfo = itemSource.length
-                ? `${itemSource[0].components[0]} ${itemSource[0].components[1]}`
+                ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
                 : false;
             const itemRegEx = /(Red|Blue|Green)/;
             const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
             return (
-                <div>
-                    <h1 class="resolving-skill">{animTarget.skill}</h1>
-                    <div class="resolving-skill"> {itemSourceDescription} </div>
+                <div class="resolving-skill">
+                    <h1>{animTarget.skill}</h1>
+                    <div> {itemSourceDescription} </div>
                 </div>
             );
         }