Bubble or stop hover events depending on if the card button is visible.
This commit is contained in:
parent
b44417084c
commit
dd3662560d
1 changed files with 14 additions and 0 deletions
|
|
@ -1,13 +1,27 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
import Card from "./Card.svelte";
|
import Card from "./Card.svelte";
|
||||||
import { hand } from "../stores";
|
import { hand } from "../stores";
|
||||||
|
|
||||||
|
const emit = createEventDispatcher();
|
||||||
|
let canChooseFuel = true;
|
||||||
|
|
||||||
|
// Prevent rendering of a board preview when the player isn't allowed to select
|
||||||
|
// a card.
|
||||||
|
function filterHoverEvents(e: any) {
|
||||||
|
if (canChooseFuel) {
|
||||||
|
emit(`hover`, e.detail);
|
||||||
|
};
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<div id="hand">
|
<div id="hand">
|
||||||
{#each $hand as card (card.symbol)}
|
{#each $hand as card (card.symbol)}
|
||||||
<Card
|
<Card
|
||||||
|
on:hover="{filterHoverEvents}"
|
||||||
hidden="{false}"
|
hidden="{false}"
|
||||||
|
button="{canChooseFuel}"
|
||||||
{card}
|
{card}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue