More change to UI + gameLogic beginning

src/App.svelte

@@ -1,8 +1,7 @@
-<Deck bind:this={deckComponent}></Deck>
-
 <script>
     import P5 from 'p5-svelte';
-    import Deck from './lib/Deck.svelte';
+    import HiLo from './lib/HiLo.svelte';
+
     const windowRatio = 0.9;
     const width = window.innerWidth * windowRatio;
     const height = window.innerHeight * windowRatio;
@@ -11,23 +10,26 @@
     const canvasXMargin = height * 0.03;
     const canvasYMargin = height * 0.07;
 
-    let deckComponent;
-    let card;
+    let gameLogic;
+    let currentCard;
 
     const sketch = (p5) => {
         p5.preload = function() {
-            deckComponent.loadDeckImages(p5);
+            gameLogic.initiateGame(p5);
         }
         p5.setup = function(){
             p5.createCanvas(width, height);
             p5.background(100);
-            deckComponent.createDeck();
-            deckComponent.shuffleDeck();
-            card = deckComponent.drawCard();
-            p5.image(card.getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
+            
+            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");
+            //console.log("mouse dragged");
         }
     }
 </script>
@@ -35,9 +37,7 @@
 <main>
     <div class="main_screen">
         <div class="sub_screen">
-            <button>wahoo</button>
-            <button>1</button>
-            <button>2</button>
+            <HiLo bind:this={gameLogic}></HiLo>
         </div>
         <P5 sketch={sketch}></P5>
     </div>
@@ -47,19 +47,4 @@
     .main_screen {
         display: inline-flex;
     }
-
-    .sub_screen 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>

src/lib/Deck.svelte

@@ -125,13 +125,22 @@
   export function shuffleDeck()
   {
     deck.sort((a, b) => Math.random() - 0.5);
-    console.log(deck);
   }
 
   export function drawCard()
   {
     return deck.pop();
   }
+
+  export function getRemaining()
+  {
+    return deck.length;
+  }
+
+  export function getBackCardImage()
+  {
+    return images["Back"];
+  }
 </script>
 
 

src/lib/HiLo.svelte

@@ -0,0 +1,71 @@
+<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>