src/components/card_thumb.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<script lang="js">

    import { setLeftPanelCard } from '../left_panel';
    import { cardImageUrl } from '../utils';

    let {id, area, idx} = $props();

    function onhover() {
        setLeftPanelCard(id); 
    }

    function onDragStart(e) {
        e.dataTransfer.setData('text', JSON.stringify({id, area, idx}))
    }

</script>

{#if id}
    <img
        style="margin:2px;"
        draggable="true"
        onmouseover={onhover}
        onfocus={onhover}
        ondragstart={onDragStart}
        height="100%"
        src={cardImageUrl(id)}
        alt="yugioh card {id}"
    />
{/if}

<style>

</style>