See The Future implemented + some UI corrections for Remaining Screen

src/App.svelte

@@ -21,7 +21,6 @@
     let backImage;
 
     let gameLogic;
-    let doubleUsed = false;
 
     const sketch = (p5) => {
         p5.preload = function() {
@@ -48,9 +47,6 @@
                     break;
             }
 
-            // p5.image(gameLogic.getCurrentCard().getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageHeight);
-            // p5.image(backImage, (canvasXMargin * 2) + cardImageWidth, canvasYMargin, cardImageWidth, cardImageHeight);
-
             p5.text("Score: " + gameLogic.getScore(), canvasXMargin, (canvasYMargin *2) + cardImageHeight);
             p5.fill(220);
             p5.textSize(textSize * 0.8);
@@ -69,9 +65,9 @@
     function drawRemainingScreen(p5)
     {
         p5.background(blackBackground);
-        const visibleDeck = gameLogic.seeRemainingCards();
+        const visibleDeckImages = gameLogic.seeRemainingCardsImages();
-        visibleDeck.forEach((cardInDeck, index) => {
+        visibleDeckImages.forEach((cardImage, index) => {
-            p5.image(cardInDeck.getImage(), (canvasXMargin * 0.3) + (smallCardImageWidth * (index % 13) * 1.1), (canvasYMargin) + (smallCardImageHeight * Math.floor(index / 13) * 1.1), smallCardImageWidth, smallCardImageHeight);
+            p5.image(cardImage, (canvasXMargin * 0.3) + (smallCardImageWidth * (index % 13) * 1.1), (canvasYMargin) + (smallCardImageHeight * Math.floor(index / 13) * 1.1), smallCardImageWidth, smallCardImageHeight);
         });
     }
 
@@ -93,32 +89,33 @@
 
         outP5.background(background);
 
-        let animationMultiplier = 2;
+        let animationMultiplier = 2 * gameLogic.getMultiplier();
-        if(doubleUsed) {
-            animationMultiplier += 2;
-        }
 
         for(let i = 1; i > 0; i -= 0.1) {
             setTimeout(function() {
                 outP5.background(background.map((n) => n * i))
             }, animationInterval * (1 - i) * animationMultiplier)
         }
-
-        doubleUsed = false;
     };
 
-    const doubleDown = (event) => {
+    const doubleDownEffect = (event) => {
         outP5.background(0);
-        doubleUsed = true;
     };
 
-    const revealSuit = (event) => {
+    const revealSuitEffect = (event) => {
         backImage = event.detail.backImage;
     }
 
-    const seeRemaining = (event) => {
+    const seeRemainingEffect = (event) => {
         outP5.background(blackBackground);
     };
+
+    const seeTheFutureEffect = (event) => {
+        gameLogic.getFutureCards().reverse().forEach((card, i) => {
+            const scalingFactor = 1.5;
+            outP5.image(card.getImage(), (canvasXMargin * 3) + (cardImageWidth * 2), canvasYMargin + (smallCardImageHeight * i * scalingFactor * 1.1), smallCardImageWidth * scalingFactor, smallCardImageHeight * scalingFactor);
+        })
+    };
 </script>
 
 <main>
@@ -126,9 +123,10 @@
         <div class="sub_screen">
             <HiLo bind:this={gameLogic}
                 on:scoredPoints={backgroundAnimation}
-                on:doublePressed={doubleDown} 
+                on:doublePressed={doubleDownEffect} 
-                on:suitPressed={revealSuit} 
+                on:suitPressed={revealSuitEffect}
-                on:remainingPressed={seeRemaining}>
+                on:remainingPressed={seeRemainingEffect}
+                on:futurePressed={seeTheFutureEffect}>
             </HiLo>
         </div>
         <P5 sketch={sketch}></P5>

src/lib/Deck.svelte

@@ -2,7 +2,8 @@
   // import P5 from 'p5-svelte';
 
   let images = {};
-  export let deck = [];
+  let deck = [];
+  let fullDeck = [];
 
   export const NUMBER = "Number";
   export const FACE = "Face";
@@ -66,6 +67,7 @@
       }
 
       images["Back"] = p5.loadImage("./src/assets/Back.png");
+      images["Blank"] = p5.loadImage("./src/assets/Blank.png");
   }
 
   export function createDeck()
@@ -91,7 +93,7 @@
       }
 
       const placeholder = new Array(52).fill(0);
-      deck = placeholder.map((obj) => {
+      fullDeck = placeholder.map((obj) => {
           const val = (indexVal % 13) + 1;
           const suit = indexSuit;
 
@@ -133,12 +135,13 @@
           return new Card(val, suit, type, images[nameString], indexVal);
       });
 
-      return deck;
+      deck = [...fullDeck];
+      //return deck;
   }
 
   export function shuffleDeck()
   {
-    deck.sort((a, b) => Math.random() - 0.5);
+    return deck.sort((a, b) => Math.random() - 0.5);
   }
 
   export function drawCard()
@@ -166,9 +169,22 @@
     return deck[deck.length - 1].getSuit();
   }
 
-  export function seeRemainingCards()
+  export function seeRemainingCardsImages()
   {
-    return deck.sort((a, b) => a.getId() - b.getId());
+    const boolDeck = new Array(52).fill(false);
+    deck.forEach((card) => {
+      boolDeck[card.getId()] = true
+    });
+    return fullDeck.map((card, i) => {
+      //console.log(card.getImage());
+      if(boolDeck[i]) return card.getImage();
+      else return images["Blank"];
+    });
+  }
+
+  export function getFutureCards()
+  {
+    return deck.slice(-4, -1);
   }
 </script>
 

src/lib/HiLo.svelte

@@ -11,14 +11,17 @@
     let doubleButton;
     let suitButton;
     let remainingButton;
+    let futureButton;
 
     // Powers
     const doubleUsesMax = 3;
     const suitUsesMax = 10;
     const remainingUsesMax = 3;
+    const futureUsesMax = 2;
     let doubleUses = doubleUsesMax;
     let suitUses = suitUsesMax;
     let remainingUses = remainingUsesMax;
+    let futureUses = futureUsesMax;
 
     let currentCard;
     let deck;
@@ -43,14 +46,21 @@
         doubleUses = doubleUsesMax;
         suitUses = suitUsesMax;
         remainingUses = remainingUsesMax;
+        futureUses = futureUsesMax;
         doubleButton.innerHTML = "Double Down x" + doubleUses;
         suitButton.innerHTML = "Reveal Suit x" + suitUses;
         remainingButton.innerHTML = "See Remaining x" + remainingUses;
+        futureButton.innerHTML = "See The Future x" + futureUses;
     }
 
     export function nextRound(highChosen)
     {
-        if(gameEnd) return null;
+        if(gameEnd) return;
+        if(screenMode == REMAINING_SCREEN)
+        {
+            changeScreenMode(MAIN_SCREEN);
+            return;
+        }
 
         const topCard = deck.drawCard();
 
@@ -85,41 +95,10 @@
         if(deck.getRemaining() == 0) {
             gameEnd = true;
         }
-        return currentCard;
+        return;
     }
     const pickHigh = () => nextRound(true);
     const pickLow = () => nextRound(false);
-    const doubleDown = () => {
-        if(doubleUses > 0) {
-            doubleUses -= 1;
-            multiplier = 2;
-            doubleButton.innerHTML = "Double Down x" + doubleUses;
-            dispatch("doublePressed");
-        }
-    }
-    const revealSuit = () => {
-        if(suitUses > 0) {
-            suitUses -= 1;
-            const suit = deck.getTopCardSuit();
-            const backImage = deck.getSpecificImage(suit + "Back");
-            dispatch("suitPressed", { backImage });
-        }
-    }
-    const seeRemaining = () => {
-        if(screenMode == MAIN_SCREEN)
-        {
-            if(remainingUses > 0) {
-                remainingUses -= 1;
-                screenMode = REMAINING_SCREEN;
-            }
-        }
-        else
-        {
-            screenMode = MAIN_SCREEN;
-        }
-        //console.log("bruh");
-        dispatch("remainingPressed", { screenMode });
-    }
 
     function evaluateIfCardHigherThanCard(firstCard, secondCard)
     {
@@ -135,6 +114,59 @@
         }
     }
 
+    // Powers
+    function doubleDown()
+    {
+        changeScreenMode(MAIN_SCREEN);
+        if(doubleUses > 0) {
+            doubleUses -= 1;
+            multiplier = 2;
+            doubleButton.innerHTML = "Double Down x" + doubleUses;
+            dispatch("doublePressed");
+        }
+    }
+
+    function revealSuit()
+    {
+        changeScreenMode(MAIN_SCREEN);
+        if(suitUses > 0) {
+            suitUses -= 1;
+            const suit = deck.getTopCardSuit();
+            const backImage = deck.getSpecificImage(suit + "Back");
+
+            suitButton.innerHTML = "Reveal Suit x" + suitUses;
+            dispatch("suitPressed", { backImage });
+        }
+    }
+
+    function seeRemaining()
+    {
+        if(screenMode == MAIN_SCREEN)
+        {
+            if(remainingUses > 0) {
+                remainingUses -= 1;
+                changeScreenMode(REMAINING_SCREEN);
+            }
+        }
+        else
+        {
+            changeScreenMode(MAIN_SCREEN);
+        }
+        dispatch("remainingPressed");
+    }
+
+    function seeTheFuture()
+    {
+        changeScreenMode(MAIN_SCREEN);
+        if(futureUses > 0) {
+            futureUses -= 1;
+            futureButton.innerHTML = "See The Future x" + futureUses;
+            dispatch("futurePressed");
+        }
+    }
+
+
+    // Getters
     export function getCurrentCard()
     {
         return currentCard;
@@ -170,19 +202,49 @@
         return screenMode;
     }
 
+    function changeScreenMode(mode)
+    {
+        screenMode = mode;
+        switch(mode)
+        {
+            case MAIN_SCREEN:
+                remainingButton.innerHTML = "See Remaining x" + remainingUses;
+                break;
+            case REMAINING_SCREEN:
+                remainingButton.innerHTML = "Go Back";
+                break;
+        }
+
+    }
+
     export function getRemaining() {
         return deck.getRemaining();
     }
 
-    export function seeRemainingCards() {
+    export function getMultiplier()
-        return deck.seeRemainingCards();
+    {
+        return multiplier;
+    }
+
+    export function seeRemainingCardsImages() {
+        return deck.seeRemainingCardsImages();
+    }
+
+    export function getFutureCards()
+    {
+        return deck.getFutureCards();
     }
 </script>
 
 <main>
     <button class="Powers" bind:this={doubleButton} on:click={doubleDown}>Double Down x3</button>
+    <div class="labelText">Next guess will be worth double.</div>
     <button class="Powers" bind:this={suitButton} on:click={revealSuit}>Reveal Suit x10</button>
+    <div class="labelText">See the top card's suit.</div>
     <button class="Powers" bind:this={remainingButton} on:click={seeRemaining}>See Remaining x3</button>
+    <div class="labelText">Get overview of the remaining cards of the deck.</div>
+    <button class="Powers" bind:this={futureButton} on:click={seeTheFuture}>See The Future x2</button>
+    <div class="labelText">See three cards from the deck that come after the top card.</div>
     <button class="MainButtons" on:click={pickHigh}>High</button>
     <button class="MainButtons" on:click={pickLow}>Low</button>
 </main>
@@ -197,12 +259,12 @@
         flex-direction: row;
         justify-content: center;
         align-items: center;
-        padding: 6px 0px;
+        /* padding: 6px 0px;
-        gap: 10px;
+        gap: 10px; */
 
         position: relative;
-        width: 8em; /*105;*/
+        width: 9em; /*105;*/
-        height: 4em; /*54*/
+        height: 5em; /*54*/
 
         background: #55109A;
         border: 2px solid #000000;
@@ -229,6 +291,33 @@
         margin-bottom: 5px;
         margin-left: 5px;
         margin-right: 5px;
+    }
 
+    .Powers {
+        height: 3em; /*54*/
+        font-size: 14px;
+    }
+
+    .labelText {
+
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 0px 0px;
+        gap: 10px;
+
+        position: relative;
+        width: 8em; /*105;*/
+
+        font-family: 'Inter';
+        font-style: italic;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 17px;
+        /* identical to box height */
+        text-align: center;
+
+        margin-bottom: 10px;
     }
 </style>