Adding cards to player's hands

This commit is contained in:
2024-10-04 09:07:01 +02:00
parent 1381706440
commit a485b5f1ab
3 changed files with 48 additions and 15 deletions

View File

@@ -12,7 +12,7 @@
<body> <body>
<article class="cards cards1"><img src="./BlackJackCards/J-B.png" class="card" alt=""></article> <article class="cards cards1"><img src="./BlackJackCards/J-B.png" class="card" alt=""></article>
<h2 id="playerScore">69</h2> <h2 id="playerScore">69</h2>
<article class="cards cards2"><img src="./BlackJackCards/J-R.png" class="card" alt="" id="card"></article> <article id="playerHand" class="cards cards2"></article>
<section> <section>
<button onclick="hit()">Hit</button> <button onclick="hit()">Hit</button>
<button>Stand</button> <button>Stand</button>

46
main.js
View File

@@ -71,8 +71,17 @@ const emptyDeck = {
Spades: [] Spades: []
} }
let currentDeck = Deck; let currentDeck = deepCopyDeck(Deck); // Initialize with a deep copy
// Function to deeply copy the deck
function deepCopyDeck(deck){
return {
Clubs: [...deck.Clubs],
Diamonds: [...deck.Diamonds],
Hearts: [...deck.Hearts],
Spades: [...deck.Spades]
};
}
function cardsleft(){ function cardsleft(){
return [ return [
currentDeck.Clubs.length, currentDeck.Clubs.length,
@@ -88,7 +97,7 @@ function addScore(num){
score = 0; score = 0;
playerCards.forEach(e => { playerCards.forEach(e => {
if(e === 'A'){ if(e === 'A'){
score += (score < 11) ? 10 : 1; score += (score < 11) ? 11 : 1;
}else{ }else{
score += isNaN(e) ? 10 : parseInt(e); score += isNaN(e) ? 10 : parseInt(e);
} }
@@ -96,23 +105,34 @@ function addScore(num){
} }
function reshuffle(){
alert('Reshuffling ...')
currentDeck = deepCopyDeck(Deck);
setTimeout(200);
}
function createCard(imgSource){
let newCard = document.createElement('img');
newCard.src = imgSource;
newCard.classList.add('card');
document.querySelector('.cards2').append(newCard);
}
function cardAvail(num){ function cardAvail(num){
// Filter available suits that still have cards left
const availableCards = ['Clubs', 'Diamonds', 'Hearts', 'Spades'].filter((suit, idx) => num[idx] > 0); const availableCards = ['Clubs', 'Diamonds', 'Hearts', 'Spades'].filter((suit, idx) => num[idx] > 0);
// Check if there are any available cards // Check if there are any available cards
if(availableCards.length === 0){ if(availableCards.length === 0){
console.log('No cards available. Deck is empty.'); console.log('No cards available. Deck is empty.');
return; // Prevent further execution if no cards are left return;
} }
// Select a random suit from available suits
const randomCard = availableCards[Math.floor(Math.random() * availableCards.length)]; const randomCard = availableCards[Math.floor(Math.random() * availableCards.length)];
// Ensure that currentDeck[randomCard] exists and has cards // Ensure that currentDeck[randomCard] exists and has cards
if(!currentDeck[randomCard] || currentDeck[randomCard].length === 0){ if(!currentDeck[randomCard] || currentDeck[randomCard].length === 0){
console.log(`Error: ${randomCard} has no cards left.`); console.log(`Error: ${randomCard} has no cards left.`);
return; // Exit if there's an issue with the selected suit return;
} }
const cardIndex = Math.floor(Math.random() * currentDeck[randomCard].length); const cardIndex = Math.floor(Math.random() * currentDeck[randomCard].length);
@@ -120,12 +140,16 @@ function cardAvail(num){
addScore(card); addScore(card);
document.getElementById('card').src = `./${randomCard}/${card}.png`; createCard(`./${randomCard}/${card}.png`);
/*document.querySelectorAll('.card').forEach(e => {
e.src = `./${randomCard}/${card}.png`;
});*/
currentDeck[randomCard].splice(cardIndex, 1); currentDeck[randomCard].splice(cardIndex, 1);
console.log(`Card removed from ${randomCard}: ${card}`); console.log(`Card removed from ${randomCard}: ${card}`);
console.log(currentDeck); console.log(currentDeck);
} }
function isDeckEmpty() { function isDeckEmpty() {
@@ -133,8 +157,8 @@ function isDeckEmpty() {
} }
function addCard(){ function addCard(){
if (isDeckEmpty()) { if(isDeckEmpty()){
currentDeck = {...Deck}; // Reset to the original deck if empty reshuffle();
} }
cardAvail(cardsleft()); cardAvail(cardsleft());
} }

View File

@@ -17,13 +17,21 @@ body{
align-items: center; align-items: center;
} }
img.card{ img.card{ /* 726 : 500 */
aspect-ratio: 1/1; aspect-ratio: 1/1;
object-fit: contain; object-fit: contain;
height: 200px; height: 200px;
margin: .2rem; width: 135px;
margin: 0 2rem 0 0;
cursor: context-menu;
}
img.card:last-child{
margin: 0;
}
.cards{
height: 200px;
margin: .5rem 0;
} }
h2{ h2{
margin-top: .5rem; margin-top: .5rem;
} }
@@ -36,4 +44,5 @@ button{
margin: .5rem; margin: .5rem;
color: #fff; color: #fff;
background: #6b6b6b; background: #6b6b6b;
cursor: pointer;
} }