seeRemaining power implemented
This commit is contained in:
parent
7e78fe5b0d
commit
737a0a95d9
|
|
@ -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,20 +38,43 @@
|
|||
p5.textSize(textSize)
|
||||
p5.textAlign(p5.TOP, p5.TOP);
|
||||
|
||||
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);
|
||||
switch(gameLogic.getScreenMode())
|
||||
{
|
||||
default:
|
||||
drawMainScreen(p5)
|
||||
break;
|
||||
case gameLogic.REMAINING_SCREEN:
|
||||
drawRemainingScreen(p5);
|
||||
break;
|
||||
}
|
||||
|
||||
p5.text("Score: " + gameLogic.getScore(), canvasXMargin, (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.9);
|
||||
p5.text(gameLogic.getScoreMessage(), canvasXMargin * 7, (canvasYMargin *2) + cardImageWidth*imageRatio + (textSize * 0.5));
|
||||
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) + cardImageWidth*imageRatio);
|
||||
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) => {
|
||||
const recentScore = event.detail.recentScore;
|
||||
backImage = gameLogic.getBackCardImage();
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
indexVal = 1;
|
||||
switchSuit();
|
||||
if(indexVal % 13 == 0){
|
||||
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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user