From ac947ef2e7a7d544b6933fe7416d37929c3d1393 Mon Sep 17 00:00:00 2001
From: Nyby <nyby.dev@gmail.com>
Date: Tue, 21 May 2024 09:08:42 +0200
Subject: [PATCH] weird

---
 src/lib/components/Packet.svelte | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/lib/components/Packet.svelte b/src/lib/components/Packet.svelte
index 131b2c4..a400a01 100644
--- a/src/lib/components/Packet.svelte
+++ b/src/lib/components/Packet.svelte
@@ -7,10 +7,17 @@
   let transitionDuration: number;
   let animation: Animation | undefined;
   let packetElement: SVGElement | undefined;
+  let textX: number = 0;
+  let textY: number = 0;
 
   $: {
     if (animation) {
       requestAnimationFrame(() => {
+        if (packetElement) {
+          const matrix = new DOMMatrixReadOnly(getComputedStyle(packetElement).transform);
+          textX = matrix.m41;
+          textY = matrix.m42;
+        }
         if ($config.running) {
           animation?.play();
         } else {
@@ -77,13 +84,28 @@
 </script>
 
 <circle class:labeled={packet.label !== -1} bind:this={packetElement} r="5" />
+{#if packetElement}
+  <text x={textX - 50} y={textY - 15}>Label: {packet.label}</text>
+{/if}
 
 <style>
   circle {
+    cursor: default;
     fill: #da443f; /*weird red*/
   }
 
   .labeled {
     fill: #6495ed; /*light blue*/
   }
+
+  text {
+    font-size: 24px;
+    fill: white;
+    stroke: black;
+    display: none;
+  }
+
+  circle:hover + text {
+    display: block;
+  }
 </style>