From cd19b9fc49965732a4dd1def35fd695587101165 Mon Sep 17 00:00:00 2001
From: Raphael Bernhart <mail@raphaelbernhart.at>
Date: Fri, 21 Jan 2022 17:13:38 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB=20Improve=20hearbeat=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeartbeatBar.vue | 47 +++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index be0b122e..7143e716 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="wrap" class="wrap" :style="wrapStyle">
-        <div class="hp-bar-big" :style="barStyle">
+        <div class="hp-bar-big d-flex" :style="barStyle">
             <div
                 v-for="(beat, index) in shortBeatList"
                 :key="index"
@@ -8,7 +8,11 @@
                 :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
                 :style="beatStyle"
                 :title="getBeatTitle(beat)"
-            />
+                @mouseenter="toggleActivateSibling"
+                @mouseleave="toggleActivateSibling"
+            >
+                <div class="beat-inner" />
+            </div>
         </div>
     </div>
 </template>
@@ -168,9 +172,30 @@ export default {
 
         getBeatTitle(beat) {
             return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : ``);
+        },
+        // Toggling the activeSibling class on hover over the current hover item
+        toggleActivateSibling(e) {
+            // Variable definition
+            const element = e.target;
+            const previous = element.previousSibling;
+            const next = element.nextSibling;
+
+            // Return if the hovered element has empty class
+            if (element.classList.contains("empty")) {
+                return;
+            }
+
+            // Check if Previous Sibling is heartbar element and doesn't have the empty class
+            if (previous.children && !previous.classList.contains("empty")) {
+                previous.classList.toggle("active-sibling");
+            }
+            // Check if Next Sibling is heartbar element and doesn't have the empty class
+            if (next.children && next.classList.contains("empty")) {
+                next.classList.toggle("active-sibling");
+            }
         }
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -184,9 +209,10 @@ export default {
 
 .hp-bar-big {
     .beat {
-        display: inline-block;
         background-color: $primary;
         border-radius: $border-radius;
+        display: inline-block;
+        transition: all ease 0.6s;
 
         &.empty {
             background-color: aliceblue;
@@ -200,11 +226,22 @@ export default {
             background-color: $warning;
         }
 
+        .beat-inner {
+            border-radius: $border-radius;
+            display: inline-block;
+            height: 100%;
+            width: 5px;
+        }
+
         &:not(.empty):hover {
-            transition: all ease-in-out 0.15s;
+            transition: all ease 0.15s;
             opacity: 0.8;
             transform: scale(var(--hover-scale));
         }
+        &.active-sibling {
+            transform: scale(1.3);
+            transition: all ease 0.15s;
+        }
     }
 }