From 16b8315e057d2ab12d1339c1c5be5da6225a025a Mon Sep 17 00:00:00 2001 From: Enrique Delgado Date: Sat, 10 May 2025 23:55:01 +0900 Subject: [PATCH] See The Future implemented + some UI corrections for Remaining Screen --- src/App.svelte | 38 +++++----- src/assets/Blank.png | Bin 0 -> 29836 bytes src/lib/Deck.svelte | 28 ++++++-- src/lib/HiLo.svelte | 167 +++++++++++++++++++++++++++++++++---------- 4 files changed, 168 insertions(+), 65 deletions(-) create mode 100644 src/assets/Blank.png diff --git a/src/App.svelte b/src/App.svelte index 52cc167..ade1adb 100644 --- a/src/App.svelte +++ b/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(); - 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 visibleDeckImages = gameLogic.seeRemainingCardsImages(); + visibleDeckImages.forEach((cardImage, index) => { + 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; - if(doubleUsed) { - animationMultiplier += 2; - } + let animationMultiplier = 2 * gameLogic.getMultiplier(); 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); + }) + };
@@ -126,9 +123,10 @@
+ on:doublePressed={doubleDownEffect} + on:suitPressed={revealSuitEffect} + on:remainingPressed={seeRemainingEffect} + on:futurePressed={seeTheFutureEffect}>
diff --git a/src/assets/Blank.png b/src/assets/Blank.png new file mode 100644 index 0000000000000000000000000000000000000000..91abd500f9bf694ce6c3a9a18c0d5e9fed5d13ec GIT binary patch literal 29836 zcmeI5KWGzC9LIn6r|F|4@lqXvs2qyW%}i1XEfU5Vbl|scy z2ayaxohqG#PKV;&t%FjFg9I$7pa_cS)p+FI8=QrFw(z*T-{s}*zTe;X_x-)Qb7pF? zFtmS2L<;p&wP_KjBQo$t<&u%L2klEDzSL{gvkTVF=2{`Hc6 zt4?|b-9WzIXbrCTc4h^V11cLgv_)~1>*l}2rJ4~Ww_enLR}_ZPq0y$&gT%q6K0k|> z{HrV;S01-5&pZGFzyNKbDmq1i=ZOVLCc_}ZAUz|uMHnyy4^)*zFG5v8l0wfz4An(m zlw@RhWO!;A6o9CnQF??V_j%n`!sbZo1xR3#0yypgtQYuJ@U39_(KSUJQ;8Q0yBS_R zy%3F853e3BQQO60i$582H|B1f@w64tlR-m^-l#)25DhJ~QbCew;-dqS4oKQZ>Agis zMoIqPl;rbwkKRnZ0NHax+e6z!+e6z!+e6z!+e6z!+heC6t*M3rI0bMv=wf#>b~pRy z)^O3YpJR_Lk)Ztk?bpjYPo3$7-i~qGt=9&(Dyz}X;;;!d#r1+=&W*ywi4k*aJf>sq zxKOw&G_KAQ#pdw|R)DjRifnUB1cQPuLKmTn&_(EC78tDlrHkjTKiU%6cWn0^0e|!c zK+*>!0ZBj-kOU+F$)1J)FanGeYN$$4g3Ee_l}E9mf3rt2#_qj9#z@9U#z@B4FBzkE Y|5pC_?2~&hlDCXX{p3__^+coj8@VERQvd(} literal 0 HcmV?d00001 diff --git a/src/lib/Deck.svelte b/src/lib/Deck.svelte index 92b82fc..539a5d6 100644 --- a/src/lib/Deck.svelte +++ b/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); } diff --git a/src/lib/HiLo.svelte b/src/lib/HiLo.svelte index 76b8aec..2ad9a2d 100644 --- a/src/lib/HiLo.svelte +++ b/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() { - return deck.seeRemainingCards(); + export function getMultiplier() + { + return multiplier; + } + + export function seeRemainingCardsImages() { + return deck.seeRemainingCardsImages(); + } + + export function getFutureCards() + { + return deck.getFutureCards(); }
+
Next guess will be worth double.
+
See the top card's suit.
+
Get overview of the remaining cards of the deck.
+ +
See three cards from the deck that come after the top card.
@@ -197,12 +259,12 @@ flex-direction: row; justify-content: center; align-items: center; - padding: 6px 0px; - gap: 10px; + /* padding: 6px 0px; + gap: 10px; */ position: relative; - width: 8em; /*105;*/ - height: 4em; /*54*/ + width: 9em; /*105;*/ + 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; } \ No newline at end of file