From 23083dc0f526b103a338b647680a22bc47f23a55 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 12 Jun 2019 23:51:52 +1000
Subject: [PATCH] skill text in targetting area during resos

---
 client/assets/styles/game.css              | 4 ++--
 client/src/components/anims/attack.jsx     | 2 ++
 client/src/components/targeting.arrows.jsx | 9 +++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index 88c9688a..36d5b128 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -89,11 +89,11 @@
         max-height: 10em;
     }
 }
-
+/*
 .resolving #targeting {
     opacity: 0;
 }
-
+*/
 .game-construct .name {
     width: 100%;
     margin-bottom: 0.25em;
diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx
index 352f9fa3..e58b5214 100644
--- a/client/src/components/anims/attack.jsx
+++ b/client/src/components/anims/attack.jsx
@@ -36,6 +36,7 @@ class Attack extends Component {
             || (this.props.team && this.props.stage === 'END_SKILL')) {
             anime.set('.attack-anim', {
                 translateY: -250,
+                rotateX: 180,
             });
             value = '+=250px';
         }
@@ -43,6 +44,7 @@ class Attack extends Component {
             || (this.props.team && this.props.stage === 'START_SKILL')) {
             anime.set('.attack-anim', {
                 translateY: 0,
+                rotateX: 0,
             });
             value = '-=250px';
         }
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index 63b7a2da..a8710a5f 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -84,9 +84,18 @@ class TargetSvg extends Component {
             ? null
             : outgoing.map(getPath);
 
+        let skill = '';
+        if (resolution) {
+            if (resolution.event[1]) ([, { skill }] = resolution.event);
+        }
+        const resolutionText = resolution
+            ? <text x={`${width / 2.3}`} y={`${height / 2.3}`} font-family="Jura" font-size="2em"> {skill} </text>
+            : null;
+
         return (
             <svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows">
                 {arrows}
+                {resolutionText}
             </svg>
         );
     }