bgg-ottawa-sell-club/src/routes/Game.svelte

<div
    transition:slide={{ delay: 250, duration: 300 }}
    class:hidden={is_hidden}
    class="game">
    <div class="grid top-align">
        <div class="s12 m2">
            <a
                target="_blank"
                href={`https://boardgamegeek.com/boardgame/${bgg_id}`}>
                <img alt="" loading="lazy" src={thumbnail} height="80" /></a>
        </div>
        <div class="grid s12 m10">
            <div class="s8 left-align">
                <div class="max">
                    {#if is_in_cart}
                        <i class="star">star</i>
                    {/if}
                    <strong>
                        <a
                            name={id}
                            class="game-desc"
                            target="_blank"
                            href={`https://boardgamegeek.com/boardgame/${bgg_id}`}>
                            {name}</a>
                    </strong>
                    &nbsp; &nbsp; &nbsp;
                    <a href={`https://bgg.babyl.ca/#${id}`}><i>link</i></a>
                </div>
            </div>
            <div class="s3">
                <div>
                    <a
                        target="_blank"
                        href={`https://boardgamegeek.com/collection/user/${username}?trade=1&subtype=boardgame&ff=1`}
                        >{username}</a>
                    &nbsp;
                    <a
                        target="_blank"
                        href={`https://boardgamegeek.com/geekmail/compose?touser=${username}`}>
                        <i>email</i></a>
                </div>
                <div class="neighbourhood">
                    {seller?.neighbourhood ?? ''}
                </div>
            </div>
            <div class="s1 right-align">
                {price ? '$' + price : ''}
            </div>
            <div class="notes s8">
                {notes}
            </div>
            <div class="s4 updated-at">
                {#if updated_at}
                    {pretty_date(updated_at)}
                {/if}
            </div>
            <div class="s1"></div>
            <div class="s11 actions">
                <button on:click={toggle_cart}
                    ><i>
                        {#if is_in_cart}
                            remove_shopping_cart{:else}
                            add_shopping_cart
                        {/if}
                    </i></button>
                <button title="hide game" on:click={toggle_game_visibility}
                    >{#if is_hidden}<i>visibility_off</i>{:else}
                        <i>visibility</i>
                    {/if}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // TODO show cart icon with badge
    // show cart page
    // cart store

    import { createEventDispatcher } from 'svelte';
    import { slide, fade } from 'svelte/transition';

    export let username = '';
    export let name = '';
    export let is_hidden = false;
    export let bgg_id = '';
    export let thumbnail = '';
    export let seller = {};
    export let price = null;
    export let notes = '';
    export let updated_at = null;
    export let is_in_cart = false;
    export let id = '';

    function pretty_date(date) {
        if (!date) return '';

        return date.replace(/T.*/, '');
    }

    const dispatch = createEventDispatcher();
    const toggle_game_visibility = () => dispatch('toggle_visibility');
    const toggle_cart = () => dispatch('toggle_cart');
</script>

<style>
    a {
        color: var(--primary);
        text-decoration: underline;
    }
    .grid {
        margin-right: 2em;
        font-size: var(--font-size-10);
    }
    .notes {
        margin-top: 1em;
        margin-left: 1em;
    }
    .updated-at {
        font-size: smaller;
        text-align: left;
    }
    .updated-at::before {
        content: 'last update: ';
    }
    .neighbourhood {
        font-size: smaller;
    }
    .hidden {
        opacity: 60%;
    }
    .actions {
        margin-top: 1em;
        display: flex;
        justify-content: end;
    }
    .actions button {
        margin: 0.5em 2em 0em 1em;
    }
    .star {
        color: darkorange;
        font-size: var(--font-size-12);
    }
</style>