seeRemaining power implemented

src/App.svelte

@@ -3,13 +3,15 @@
     import HiLo from './lib/HiLo.svelte';
 
     const windowRatio = 0.9;
-    const width = window.innerWidth * windowRatio * 0.7;
-    const height = window.innerHeight * windowRatio;
     const imageRatio = 3 / 2;
+    const width = window.innerWidth * windowRatio * 0.85;
+    const height = window.innerHeight * windowRatio;
     const cardImageWidth = height * 0.6;
+    const cardImageHeight = cardImageWidth * imageRatio;
+    const smallCardImageWidth = cardImageWidth * 0.2;
+    const smallCardImageHeight = smallCardImageWidth * imageRatio;
     const canvasXMargin = height * 0.03;
     const canvasYMargin = height * 0.02;
-    const textXMargin = width * 0.01;
     const textSize = width * 0.025;
     const blackBackground = [0, 0, 0];
     const greenBackground = [10, 150, 10];
@@ -36,18 +38,41 @@
             p5.textSize(textSize)
             p5.textAlign(p5.TOP, p5.TOP);
 
-            p5.image(gameLogic.getCurrentCard().getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
+            switch(gameLogic.getScreenMode())
-            p5.image(backImage, (canvasXMargin * 2) + cardImageWidth, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
+            {
-            // p5.text("Current:", canvasXMargin, canvasYMargin * 0.5)
+                default:
-            // p5.text("Deck:", (canvasXMargin * 2) + cardImageWidth, canvasYMargin * 0.5);
+                    drawMainScreen(p5)
-
+                    break;
-            p5.text("Score: " + gameLogic.getScore(), canvasXMargin, (canvasYMargin *2) + cardImageWidth*imageRatio);
+                case gameLogic.REMAINING_SCREEN:
-            p5.fill(220);
+                    drawRemainingScreen(p5);
-            p5.textSize(textSize * 0.9);
+                    break;
-            p5.text(gameLogic.getScoreMessage(), canvasXMargin * 7, (canvasYMargin *2) + cardImageWidth*imageRatio + (textSize * 0.5));
-
-            p5.text("Remaining: " + gameLogic.getRemaining() + "/52", (canvasXMargin * 2) + cardImageWidth, (canvasYMargin *2) + cardImageWidth*imageRatio);
             }
+
+            // 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);
+            p5.text(gameLogic.getScoreMessage(), canvasXMargin * 8.6, (canvasYMargin *2) + cardImageHeight);
+
+            p5.text("Remaining: " + gameLogic.getRemaining() + "/52", (canvasXMargin * 2) + cardImageWidth, (canvasYMargin *2) + cardImageHeight);
+        }
+    }
+
+    function drawMainScreen(p5)
+    {
+        p5.image(gameLogic.getCurrentCard().getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageHeight);
+        p5.image(backImage, (canvasXMargin * 2) + cardImageWidth, canvasYMargin, cardImageWidth, cardImageHeight);
+    }
+
+    function drawRemainingScreen(p5)
+    {
+        p5.background(blackBackground);
+        const visibleDeck = gameLogic.seeRemainingCards();
+        visibleDeck.forEach((cardInDeck, index) => {
+            p5.image(cardInDeck.getImage(), (canvasXMargin * 0.3) + (smallCardImageWidth * (index % 13) * 1.1), (canvasYMargin) + (smallCardImageHeight * Math.floor(index / 13) * 1.1), smallCardImageWidth, smallCardImageHeight);
+        });
     }
 
     const backgroundAnimation = (event) => {
@@ -82,20 +107,29 @@
         doubleUsed = false;
     };
 
-    const doubleDownEffect = (event) => {
+    const doubleDown = (event) => {
         outP5.background(0);
         doubleUsed = true;
     };
 
     const revealSuit = (event) => {
-        backImage = event.detail.backImage
+        backImage = event.detail.backImage;
     }
+
+    const seeRemaining = (event) => {
+        outP5.background(blackBackground);
+    };
 </script>
 
 <main>
     <div class="main_screen">
         <div class="sub_screen">
-            <HiLo bind:this={gameLogic} on:scoredPoints={backgroundAnimation} on:doublePressed={doubleDownEffect} on:suitPressed={revealSuit}></HiLo>
+            <HiLo bind:this={gameLogic}
+                on:scoredPoints={backgroundAnimation}
+                on:doublePressed={doubleDown} 
+                on:suitPressed={revealSuit} 
+                on:remainingPressed={seeRemaining}>
+            </HiLo>
         </div>
         <P5 sketch={sketch}></P5>
     </div>

src/lib/Deck.svelte

@@ -17,13 +17,15 @@
     suit;
     type;
     image;
+    id;
 
-    constructor(value, suit, type, image)
+    constructor(value, suit, type, image, id)
     {
       this.value = value;
       this.suit = suit;
       this.type = type;
       this.image = image;
+      this.id = id;
     }
 
     getValue() {
@@ -42,6 +44,11 @@
     {
       return this.image;
     }
+
+    getId()
+    {
+      return this.id;
+    }
   }
 
   export function loadDeckImages(p5)
@@ -64,7 +71,7 @@
   export function createDeck()
   {
       let indexSuit = HEARTS
-      let indexVal = 1;
+      let indexVal = 0;
       function switchSuit()
       {
           switch(indexSuit) {
@@ -85,46 +92,45 @@
 
       const placeholder = new Array(52).fill(0);
       deck = placeholder.map((obj) => {
-          const val = indexVal;
+          const val = (indexVal % 13) + 1;
           const suit = indexSuit;
 
           let nameString = suit;
 
           let type;
-          if(indexVal == 1){
+          if(indexVal % 13 == 0){
             type = ACE;
             nameString += type;
           }
-          else if(indexVal <= 10)
+          else if(indexVal % 13 < 10)
           {
             type = NUMBER;
-            nameString += indexVal
+            nameString += (indexVal % 13) + 1
           }
           else {
             type = FACE;
-            switch(indexVal) {
+            switch(indexVal % 13) {
               default:
                 nameString += "Back";
                 break;
-              case 11:
+              case 10:
                 nameString += "Jack";
                 break;
-              case 12:
+              case 11:
                 nameString += "Queen";
                 break;
-              case 13:
+              case 12:
                 nameString += "King";
                 break;
             }
           }
 
           indexVal += 1;
-          if(indexVal > 13){ 
+          if(indexVal % 13 == 0){
-              indexVal = 1;
             switchSuit();
           }
 
-          return new Card(val, suit, type, images[nameString])
+          return new Card(val, suit, type, images[nameString], indexVal);
       });
 
       return deck;
@@ -159,6 +165,11 @@
   {
     return deck[deck.length - 1].getSuit();
   }
+
+  export function seeRemainingCards()
+  {
+    return deck.sort((a, b) => a.getId() - b.getId());
+  }
 </script>
 
 

src/lib/HiLo.svelte

@@ -4,19 +4,26 @@
     import Deck from './Deck.svelte';
     import { createEventDispatcher } from "svelte";
 
+    export const MAIN_SCREEN = "MainScreen";
+    export const REMAINING_SCREEN = "RemainingScreen";
+    let screenMode = MAIN_SCREEN;
+
     let doubleButton;
     let suitButton;
+    let remainingButton;
 
     // Powers
     const doubleUsesMax = 3;
     const suitUsesMax = 10;
+    const remainingUsesMax = 3;
+    let doubleUses = doubleUsesMax;
+    let suitUses = suitUsesMax;
+    let remainingUses = remainingUsesMax;
 
     let currentCard;
     let deck;
     let score = 0;
     let multiplier = 1;
-    let doubleUses = doubleUsesMax;
-    let suitUses = suitUsesMax;
     let recentScore = 0;
     let gameEnd = false;
     const dispatch = createEventDispatcher();
@@ -32,10 +39,13 @@
         multiplier = 1;
         recentScore = 0;
 
+        screenMode = MAIN_SCREEN;
         doubleUses = doubleUsesMax;
         suitUses = suitUsesMax;
+        remainingUses = remainingUsesMax;
         doubleButton.innerHTML = "Double Down x" + doubleUses;
         suitButton.innerHTML = "Reveal Suit x" + suitUses;
+        remainingButton.innerHTML = "See Remaining x" + remainingUses;
     }
 
     export function nextRound(highChosen)
@@ -95,6 +105,21 @@
             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)
     {
@@ -140,14 +165,24 @@
         return deck.getBackCardImage();
     }
 
+    export function getScreenMode()
+    {
+        return screenMode;
+    }
+
     export function getRemaining() {
         return deck.getRemaining();
     }
+
+    export function seeRemainingCards() {
+        return deck.seeRemainingCards();
+    }
 </script>
 
 <main>
     <button class="Powers" bind:this={doubleButton} on:click={doubleDown}>Double Down x3</button>
     <button class="Powers" bind:this={suitButton} on:click={revealSuit}>Reveal Suit x10</button>
+    <button class="Powers" bind:this={remainingButton} on:click={seeRemaining}>See Remaining x3</button>
     <button class="MainButtons" on:click={pickHigh}>High</button>
     <button class="MainButtons" on:click={pickLow}>Low</button>
 </main>