See The Future implemented + some UI corrections for Remaining Screen
This commit is contained in:
parent
737a0a95d9
commit
16b8315e05
|
|
@ -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);
|
||||
})
|
||||
};
|
||||
</script>
|
||||
|
||||
<main>
|
||||
|
|
@ -126,9 +123,10 @@
|
|||
<div class="sub_screen">
|
||||
<HiLo bind:this={gameLogic}
|
||||
on:scoredPoints={backgroundAnimation}
|
||||
on:doublePressed={doubleDown}
|
||||
on:suitPressed={revealSuit}
|
||||
on:remainingPressed={seeRemaining}>
|
||||
on:doublePressed={doubleDownEffect}
|
||||
on:suitPressed={revealSuitEffect}
|
||||
on:remainingPressed={seeRemainingEffect}
|
||||
on:futurePressed={seeTheFutureEffect}>
|
||||
</HiLo>
|
||||
</div>
|
||||
<P5 sketch={sketch}></P5>
|
||||
|
|
|
|||
BIN
src/assets/Blank.png
Normal file
BIN
src/assets/Blank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
</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;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user