feat: only show one shard's popup at a time

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>

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>