From b44417084c505b82abb6083a69a048618d575f7f Mon Sep 17 00:00:00 2001
From: Oliver Akins <oliver.akins1999@gmail.com>
Date: Mon, 25 Jul 2022 23:54:11 -0600
Subject: [PATCH] Emit events when the user hovers over the card.

---
 web-svelte/src/components/Card.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web-svelte/src/components/Card.svelte b/web-svelte/src/components/Card.svelte
index 26b6529..f86a4ba 100644
--- a/web-svelte/src/components/Card.svelte
+++ b/web-svelte/src/components/Card.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import SciFiButton from "./SciFi-Button.svelte";
+import { createEventDispatcher } from "svelte";
 import type { FuelCard } from "common";
 
 export let hidden: boolean = false;
@@ -7,6 +8,8 @@ export let button: boolean = true;
 export let buttonText: string = "Use Fuel Card";
 export let card: FuelCard;
 
+const emit = createEventDispatcher();
+
 let colour: string;
 let magnitudeShape = "";
 if (card.type == "stationary") {
@@ -26,6 +29,8 @@ if (card.type == "stationary") {
 <div
 	class="card {hidden ? 'hidden' : ''}"
 	style="--colour: {colour};"
+	on:mouseenter="{() => emit(`hover`, { card, visible: true })}"
+	on:mouseleave="{() => emit(`hover`, { card, visible: false })}"
 >
 	{#if !hidden}
 	<div class="magnitude {magnitudeShape}">