Oliver/Gravwell-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Emit events when the user hovers over the card.

Browse source
This commit is contained in:
Oliver Akins 2022-07-25 23:54:11 -06:00
parent 8ffffd8834
commit b44417084c
No known key found for this signature in database
GPG key ID: 3C2014AF9457AF99
1 changed files with 5 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web-svelte/src/components/Card.svelte
View file

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