From 09868b42d527a20a994b2cdfe3b06394d15104a5 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 11 Jun 2019 17:52:33 +1000
Subject: [PATCH] tripping with triangles

---
 client/assets/styles/game.css                 |  6 ++---
 client/src/components/game.construct.jsx      |  4 +++-
 .../src/components/svgs/trippy.triangle.jsx   | 22 ++++++++++++++-----
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index ba11a3a6..88c9688a 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -30,7 +30,7 @@
 
 .opponent .combat-text {
     left: 40%;
-    top: 75%;
+    top: 65%;
 }
 
 .opponent .game-construct {
@@ -204,8 +204,8 @@
     font-size: 2em;
     font-family: 'Jura';
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 40%;
+    left: 40%;
 }
 
 .game-construct.active-skill {
diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index 3e7d035b..6f5942d8 100644
--- a/client/src/components/game.construct.jsx
+++ b/client/src/components/game.construct.jsx
@@ -8,6 +8,8 @@ const { ConstructAvatar } = require('./construct');
 const { animationDivs } = require('../animations');
 const shapes = require('./shapes');
 
+const TrippyTriangle = require('./svgs/trippy.triangle');
+
 const SkillBtn = require('./skill.btn');
 
 const addState = connect(
@@ -77,7 +79,7 @@ function GameConstruct(props) {
     const combatTextClass = `combat-text ${combatClass}`;
     const combatTextEl = combatText
         ? <div class={combatTextClass}>{combatText}</div>
-        : null;
+        : <div class={combatTextClass}> <TrippyTriangle /></div>;
 
     const effects = construct.effects.length
         ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
diff --git a/client/src/components/svgs/trippy.triangle.jsx b/client/src/components/svgs/trippy.triangle.jsx
index 194cb4a3..7e00d6c1 100644
--- a/client/src/components/svgs/trippy.triangle.jsx
+++ b/client/src/components/svgs/trippy.triangle.jsx
@@ -13,14 +13,16 @@ class TrippyTriangle extends Component {
 
         return (
             <svg
-                style={ { transform: `rotate3d(0, 1, 0, ${pct * delta / 10}deg)` }}
+                style={{
+                    transform: `rotate3d(0, 1, 0, ${delta * 0.2}rad) translate(0px, ${-7.5 * delta}px)`,
+                }}
                 class='skill-animation'
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 200 200">
+                viewBox="0 0 300 300">
                 <g>
-                    <polygon class='blue' points={`10,190    100,${pct}   190,190`}/>
+                    <polygon class='blue' points={`0,190    100,${pct}   190,190`}/>
                     <polygon class='blue' points={`40,170    100,${pct}   160,170`}/>
                     <polygon class='blue' points={`70,150    100,${pct}   130,150`}/>
                 </g>
@@ -29,13 +31,21 @@ class TrippyTriangle extends Component {
     }
 
     progress() {
-        const delta = this.state.delta + 0.1;
-        const pct = 50 - 50 * Math.sin(delta);
-        this.setState({ pct, delta });
         requestAnimationFrame(this.progress);
+        this.now = window.performance.now();
+        const elapsed = this.now - this.then;
+        if (elapsed > this.fpsInterval) {
+            this.then = this.now - (elapsed % this.fpsInterval);
+            const delta = this.state.delta + Math.PI * 0.04;
+            const pct = 75 + 15 * Math.sin(delta);
+            this.setState({ pct, delta });
+        }
     }
 
     componentDidMount() {
+        const fps = 30;
+        this.fpsInterval = 1000 / fps;
+        this.then = window.performance.now();
         requestAnimationFrame(this.progress);
     }