<Deck bind:this={deck}></Deck>

<script>
    import Deck from './Deck.svelte';

    let currentCard;
    let deck;
    let score = 0;

    export function initiateGame(p5)
    {
        deck.loadDeckImages(p5);
        deck.createDeck();
        deck.shuffleDeck();
        currentCard = deck.drawCard();
        console.log(currentCard);
        score = currentCard.getValue();
    }

    export function nextRound(highChosen)
    {
        const topCard = deck.drawCard();
        const topHigherThanCurrent = currentCard.getValue() < topCard.getValue();

        if((highChosen && topHigherThanCurrent) || (!highChosen && !topHigherThanCurrent))
        {
            score += topCard.getValue();
        }
        else
        {
            score -= 15 - topCard.getValue();
        }

        currentCard = topCard;
        return currentCard;
    }
    const pickHigh = () => nextRound(true);
    const pickLow = () => nextRound(false);

    export function getCurrentCard()
    {
        return currentCard;
    }

    export function getBackCardImage()
    {
        return deck.getBackCardImage();
    }
</script>

<main>
    <button on:click={pickHigh}>High!</button>
    <button on:click={pickLow}>Low!</button>
</main>

<style>
    button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 6px 0px;
        gap: 10px;

        position: relative;
        width: 68px;
        height: 36px;

        background: #D9D9D9;
    }
</style>