From 400918c34967dab8c53481723f3a8042d29d7927 Mon Sep 17 00:00:00 2001
From: spiral <spiral@spiral.sh>
Date: Sun, 23 Jan 2022 03:46:54 -0500
Subject: [PATCH] feat: only show one shard's popup at a time

---
 src/lib/shard.svelte    | 6 +++---
 src/pages/status.svelte | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/shard.svelte b/src/lib/shard.svelte
index 831a0b4a..91a37cf3 100644
--- a/src/lib/shard.svelte
+++ b/src/lib/shard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	let isHovering = false;
+	export let hover;
 
 	export let shard = {
 		id: 1,
@@ -25,11 +25,11 @@
 
 <div class="wrapper">
 	<div
-		on:click={() => isHovering = !isHovering}
+		on:click={() => hover = (hover != shard.id) ? shard.id : null}
 		class="shard" id={shard.id.toString()}
 		style={color}
 	>{ shard.id }</div>
-	{#if isHovering}
+	{#if hover == shard.id}
 		<div class="more-info">
 			<h3>Shard { shard.id }</h3>
 			<br>
diff --git a/src/pages/status.svelte b/src/pages/status.svelte
index a44d9b0e..65259371 100644
--- a/src/pages/status.svelte
+++ b/src/pages/status.svelte
@@ -2,6 +2,8 @@
     import { Container } from 'sveltestrap';
     import ShardItem from '../lib/shard.svelte';
 
+    let hover = null;
+
     let message = "Loading...";
     let shards = [];
     let pingAverage = "";
@@ -115,6 +117,6 @@
     <span>{ message }</span>
 
     {#each shards as shard}
-        <ShardItem shard={shard} />
+        <ShardItem shard={shard} bind:hover={hover} />
     {/each}
 </Container>
\ No newline at end of file