Added score + some more UI changes

README.md

@@ -13,7 +13,12 @@ p5 docs
 https://www.geeksforgeeks.org/how-to-shuffle-an-array-using-javascript/
 https://stackoverflow.com/questions/4550013/html-element-display-in-horizontal-line
 figma
+https://stackoverflow.com/questions/66886318/how-do-i-create-a-custom-event-in-svelte
 
+TODO:
+- add the powers
+- add the visual flair
+- add remaining text
 
 <style>
     .centered {

src/App.svelte

@@ -3,12 +3,14 @@
     import HiLo from './lib/HiLo.svelte';
 
     const windowRatio = 0.9;
-    const width = window.innerWidth * windowRatio;
+    const width = window.innerWidth * windowRatio * 0.8;
     const height = window.innerHeight * windowRatio;
     const imageRatio = 3 / 2;
     const cardImageWidth = height * 0.6;
     const canvasXMargin = height * 0.03;
     const canvasYMargin = height * 0.07;
+    const textXMargin = width * 0.01;
+    const textSize = width * 0.03;
 
     let gameLogic;
     let currentCard;
@@ -19,17 +21,24 @@
         }
         p5.setup = function(){
             p5.createCanvas(width, height);
-            p5.background(100);
-            
-            currentCard = gameLogic.getCurrentCard();
+            p5.background(60);
         };
         p5.draw = function() {
-            //console.log(currentCard);
-            p5.image(currentCard.getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
+            if(gameLogic.getRecentScore() > 0) {
+                p5.background(10, 150, 10);
+            }
+            else if(gameLogic.getRecentScore() < 0){
+                p5.background(150, 10, 10);
+            }
+            p5.image(gameLogic.getCurrentCard().getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
             p5.image(gameLogic.getBackCardImage(), (canvasXMargin * 2) + cardImageWidth, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
-        }
-        p5.mouseDragged = function(){
-            //console.log("mouse dragged");
+
+            p5.fill(255);
+            p5.textSize(textSize)
+            p5.textAlign(p5.TOP, p5.TOP);
+            p5.text("Score: " + gameLogic.getScore(), (canvasXMargin * 2) + (cardImageWidth * 2) + textXMargin, canvasYMargin);
+            p5.fill(220);
+            p5.text(gameLogic.getScoreMessage(), (canvasXMargin * 8) + (cardImageWidth * 2) + textXMargin, (canvasYMargin) + textSize)
         }
     }
 </script>

src/lib/Deck.svelte

@@ -4,6 +4,14 @@
   let images = {};
   export let deck = [];
 
+  export const NUMBER = "Number";
+  export const FACE = "Face";
+  export const ACE = "Ace";
+  export const HEARTS = "Hearts";
+  export const DIAMONDS = "Diamonds";
+  export const SPADES = "Spades";
+  export const CLUBS = "Clubs";
+
   class Card {
     value;
     suit;
@@ -55,22 +63,22 @@
 
   export function createDeck()
   {
-      let indexSuit = "Hearts"
+      let indexSuit = HEARTS
       let indexVal = 1;
       function switchSuit()
       {
           switch(indexSuit) {
-              case "Hearts":
-                  indexSuit = "Diamonds";
+              case HEARTS:
+                  indexSuit = DIAMONDS;
                   break;
-              case "Diamonds":
-                  indexSuit = "Clubs";
+              case DIAMONDS:
+                  indexSuit = CLUBS;
                   break;
-              case "Clubs":
-                  indexSuit = "Spades";
+              case CLUBS:
+                  indexSuit = SPADES;
                   break;
-              case "Spades":
-                  indexSuit = "Hearts";
+              case SPADES:
+                  indexSuit = HEARTS;
                   break;
           }
       }
@@ -84,16 +92,16 @@
 
           let type;
           if(indexVal == 1){
-            type = "Ace";
+            type = ACE;
             nameString += type;
           }
           else if(indexVal <= 10)
           {
-            type = "Number";
+            type = NUMBER;
             nameString += indexVal
           }
           else {
-            type = "Face";
+            type = FACE;
             switch(indexVal) {
               default:
                 nameString += "Back";

src/lib/HiLo.svelte

@@ -6,12 +6,15 @@
     let currentCard;
     let deck;
     let score = 0;
+    let recentScore = 0;
+    let gameEnd = false;
 
     export function initiateGame(p5)
     {
         deck.loadDeckImages(p5);
         deck.createDeck();
         deck.shuffleDeck();
+        gameEnd = false;
         currentCard = deck.drawCard();
         console.log(currentCard);
         score = currentCard.getValue();
@@ -19,29 +22,83 @@
 
     export function nextRound(highChosen)
     {
-        const topCard = deck.drawCard();
-        const topHigherThanCurrent = currentCard.getValue() < topCard.getValue();
+        if(gameEnd) return null;
 
-        if((highChosen && topHigherThanCurrent) || (!highChosen && !topHigherThanCurrent))
+        const topCard = deck.drawCard();
+
+        const currentValue = currentCard.getValue();
+        const topValue = topCard.getValue();
+
+
+        const currentHigherThanTop = evaluateIfCardHigherThanCard(currentCard, topCard);
+        const equalToCurrent = currentValue == topValue;
+        
+        if(topValue == 1)
         {
-            score += topCard.getValue();
+            if(highChosen) recentScore = 15;
+            else recentScore = 1;
+        }
+        else if((highChosen && !currentHigherThanTop) || (!highChosen && currentHigherThanTop) || equalToCurrent)
+        {
+            recentScore = topValue;
         }
         else
         {
-            score -= 15 - topCard.getValue();
+            recentScore = -(15 - topValue);
         }
 
+        score += recentScore
+
         currentCard = topCard;
+        console.log(score);
+
+        if(deck.getRemaining() == 0) {
+            gameEnd = true;
+        }
         return currentCard;
     }
     const pickHigh = () => nextRound(true);
     const pickLow = () => nextRound(false);
 
+    function evaluateIfCardHigherThanCard(firstCard, secondCard)
+    {
+        if(firstCard.getType() == deck.ACE)
+        {
+            const secondType = secondCard.getType();
+            if(secondType == deck.NUMBER) return false;
+            return true;
+        }
+        else
+        {
+            return firstCard.getValue() > secondCard.getValue();
+        }
+    }
+
     export function getCurrentCard()
     {
         return currentCard;
     }
 
+    export function getScore() {
+        return score;
+    }
+
+    export function getScoreMessage() {
+        let message = ""
+        if(recentScore > 0) {
+            message = "+"
+        }
+        else if(recentScore == 0)
+        {
+            return "";
+        }
+        return message + recentScore;
+    }
+
+    export function getRecentScore() {
+        return recentScore;
+    }
+
     export function getBackCardImage()
     {
         return deck.getBackCardImage();