<script>
    import P5 from 'p5-svelte';
    import HiLo from './lib/HiLo.svelte';

    const windowRatio = 0.9;
    const width = window.innerWidth * windowRatio;
    const height = window.innerHeight * windowRatio;
    const imageRatio = 3 / 2;
    const cardImageWidth = height * 0.6;
    const canvasXMargin = height * 0.03;
    const canvasYMargin = height * 0.07;

    let gameLogic;
    let currentCard;

    const sketch = (p5) => {
        p5.preload = function() {
            gameLogic.initiateGame(p5);
        }
        p5.setup = function(){
            p5.createCanvas(width, height);
            p5.background(100);
            
            currentCard = gameLogic.getCurrentCard();
        };
        p5.draw = function() {
            //console.log(currentCard);
            p5.image(currentCard.getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
            p5.image(gameLogic.getBackCardImage(), (canvasXMargin * 2) + cardImageWidth, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
        }
        p5.mouseDragged = function(){
            //console.log("mouse dragged");
        }
    }
</script>

<main>
    <div class="main_screen">
        <div class="sub_screen">
            <HiLo bind:this={gameLogic}></HiLo>
        </div>
        <P5 sketch={sketch}></P5>
    </div>
</main>

<style>
    .main_screen {
        display: inline-flex;
    }
</style>
