<script lang="typescript">
    import { fly } from "svelte/transition";
    import { requestActionsMenuStore, requestVisitCardsStore } from '../../Stores/GameStore';

    // export parameters here to show more menu options

    function onKeyDown(e: KeyboardEvent) {
        if (e.key === "Escape") {
            closeActionsMenu();
        }
    }

    function closeActionsMenu() {
        requestActionsMenuStore.set(false);
    }

    function showVisitingCard() {
        // requestVisitCardsStore.set(true);
    }

</script>

<svelte:window on:keydown={onKeyDown} />

<div class="actions-menu nes-container is-rounded">
    <button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
    <h2>Actions</h2>
    <nav>
        <button
            type="button"
            class="nes-btn"
            on:click|preventDefault={() => { console.log('clicked on button'); }}
        >
            Visiting Card
        </button>
    </nav>
</div>

<style lang="scss">
    .actions-menu {        
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        width: 230px !important;
        height: 300px !important;
        margin-top: 200px;

        pointer-events: auto;
        font-family: "Press Start 2P";
        background-color: #333333;
        color: whitesmoke;

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        nav button {
            width: 100%;
            margin-bottom: 10px;
        }

        .nes-btn.is-error.close {
            position: absolute;
            top: -20px;
            right: -20px;
        }
    }
</style>