Double Down and Reveal Suit powers implemented

src/App.svelte

@@ -3,50 +3,99 @@
     import HiLo from './lib/HiLo.svelte';
 
     const windowRatio = 0.9;
-    const width = window.innerWidth * windowRatio * 0.8;
+    const width = window.innerWidth * windowRatio * 0.7;
     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 canvasYMargin = height * 0.02;
     const textXMargin = width * 0.01;
-    const textSize = width * 0.03;
+    const textSize = width * 0.025;
+    const blackBackground = [0, 0, 0];
+    const greenBackground = [10, 150, 10];
+    const redBackground = [150, 10, 10];
+    const animationInterval = 300;
+    let outP5;
+    let backImage;
 
     let gameLogic;
-    let currentCard;
+    let doubleUsed = false;
 
     const sketch = (p5) => {
         p5.preload = function() {
+            outP5 = p5;
             gameLogic.initiateGame(p5);
         }
         p5.setup = function(){
             p5.createCanvas(width, height);
-            p5.background(60);
+            p5.background(blackBackground);
+            backImage = gameLogic.getBackCardImage();
         };
         p5.draw = function() {
-            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.fill(255);
             p5.textSize(textSize)
             p5.textAlign(p5.TOP, p5.TOP);
-            p5.text("Score: " + gameLogic.getScore(), (canvasXMargin * 2) + (cardImageWidth * 2) + textXMargin, canvasYMargin);
+
+            p5.image(gameLogic.getCurrentCard().getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
+            p5.image(backImage, (canvasXMargin * 2) + cardImageWidth, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
+            // p5.text("Current:", canvasXMargin, canvasYMargin * 0.5)
+            // p5.text("Deck:", (canvasXMargin * 2) + cardImageWidth, canvasYMargin * 0.5);
+
+            p5.text("Score: " + gameLogic.getScore(), canvasXMargin, (canvasYMargin *2) + cardImageWidth*imageRatio);
             p5.fill(220);
-            p5.text(gameLogic.getScoreMessage(), (canvasXMargin * 8) + (cardImageWidth * 2) + textXMargin, (canvasYMargin) + textSize)
+            p5.textSize(textSize * 0.9);
+            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);
         }
     }
+
+    const backgroundAnimation = (event) => {
+        const recentScore = event.detail.recentScore;
+        backImage = gameLogic.getBackCardImage();
+
+        let background;
+
+        if(recentScore > 0) {
+            background = greenBackground;
+        }
+        else if(recentScore < 0){
+            background = redBackground;
+        }
+        else {
+            background = blackBackground;
+        }
+
+        outP5.background(background);
+
+        let animationMultiplier = 2;
+        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 doubleDownEffect = (event) => {
+        outP5.background(0);
+        doubleUsed = true;
+    };
+
+    const revealSuit = (event) => {
+        backImage = event.detail.backImage
+    }
 </script>
 
 <main>
     <div class="main_screen">
         <div class="sub_screen">
-            <HiLo bind:this={gameLogic}></HiLo>
+            <HiLo bind:this={gameLogic} on:scoredPoints={backgroundAnimation} on:doublePressed={doubleDownEffect} on:suitPressed={revealSuit}></HiLo>
         </div>
         <P5 sketch={sketch}></P5>
     </div>

src/lib/Deck.svelte

@@ -149,6 +149,16 @@
   {
     return images["Back"];
   }
+
+  export function getSpecificImage(imageName)
+  {
+    return images[imageName];
+  }
+
+  export function getTopCardSuit()
+  {
+    return deck[deck.length - 1].getSuit();
+  }
 </script>
 
 

src/lib/HiLo.svelte

@@ -2,12 +2,24 @@
 
 <script>
     import Deck from './Deck.svelte';
+    import { createEventDispatcher } from "svelte";
+
+    let doubleButton;
+    let suitButton;
+
+    // Powers
+    const doubleUsesMax = 3;
+    const suitUsesMax = 10;
 
     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();
 
     export function initiateGame(p5)
     {
@@ -16,8 +28,14 @@
         deck.shuffleDeck();
         gameEnd = false;
         currentCard = deck.drawCard();
-        console.log(currentCard);
         score = currentCard.getValue();
+        multiplier = 1;
+        recentScore = 0;
+
+        doubleUses = doubleUsesMax;
+        suitUses = suitUsesMax;
+        doubleButton.innerHTML = "Double Down x" + doubleUses;
+        suitButton.innerHTML = "Reveal Suit x" + suitUses;
     }
 
     export function nextRound(highChosen)
@@ -46,12 +64,14 @@
         {
             recentScore = -(15 - topValue);
         }
+        recentScore *= multiplier;
 
         score += recentScore
 
         currentCard = topCard;
-        console.log(score);
+        multiplier = 1;
 
+        dispatch("scoredPoints", { recentScore })
         if(deck.getRemaining() == 0) {
             gameEnd = true;
         }
@@ -59,6 +79,22 @@
     }
     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 });
+        }
+    }
 
     function evaluateIfCardHigherThanCard(firstCard, secondCard)
     {
@@ -103,15 +139,25 @@
     {
         return deck.getBackCardImage();
     }
+
+    export function getRemaining() {
+        return deck.getRemaining();
+    }
 </script>
 
 <main>
-    <button on:click={pickHigh}>High!</button>
+    <button class="Powers" bind:this={doubleButton} on:click={doubleDown}>Double Down x3</button>
-    <button on:click={pickLow}>Low!</button>
+    <button class="Powers" bind:this={suitButton} on:click={revealSuit}>Reveal Suit x10</button>
+    <button class="MainButtons" on:click={pickHigh}>High</button>
+    <button class="MainButtons" on:click={pickLow}>Low</button>
 </main>
 
 <style>
     button {
+        /* Frame 1 */
+        box-sizing: border-box;
+
+        /* Auto layout */
         display: flex;
         flex-direction: row;
         justify-content: center;
@@ -120,9 +166,34 @@
         gap: 10px;
 
         position: relative;
-        width: 68px;
+        width: 8em; /*105;*/
-        height: 36px;
+        height: 4em; /*54*/
+
+        background: #55109A;
+        border: 2px solid #000000;
+
+
+        /* button 1 */
+        /* width: 68px;
+        height: 17px; */
+
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 17px;
+        /* identical to box height */
+        text-align: center;
+        color: #FFFFFF;
+
+
+        /* Inside auto layout */
+        flex: none;
+        order: 0;
+        flex-grow: 0;
+        margin-bottom: 5px;
+        margin-left: 5px;
+        margin-right: 5px;
 
-        background: #D9D9D9;
     }
 </style>