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>
<article class="cards cards1"><img src="./BlackJackCards/J-B.png" class="card" alt=""></article>
<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>
<button onclick="hit()">Hit</button>
<button>Stand</button>

40
main.js
View File

@@ -71,8 +71,17 @@ const emptyDeck = {
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(){
return [
currentDeck.Clubs.length,
@@ -88,7 +97,7 @@ function addScore(num){
score = 0;
playerCards.forEach(e => {
if(e === 'A'){
score += (score < 11) ? 10 : 1;
score += (score < 11) ? 11 : 1;
}else{
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){
// Filter available suits that still have cards left
const availableCards = ['Clubs', 'Diamonds', 'Hearts', 'Spades'].filter((suit, idx) => num[idx] > 0);
// Check if there are any available cards
if(availableCards.length === 0){
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)];
// Ensure that currentDeck[randomCard] exists and has cards
if(!currentDeck[randomCard] || currentDeck[randomCard].length === 0){
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);
@@ -120,7 +140,11 @@ function cardAvail(num){
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);
@@ -134,7 +158,7 @@ function isDeckEmpty() {
function addCard(){
if(isDeckEmpty()){
currentDeck = {...Deck}; // Reset to the original deck if empty
reshuffle();
}
cardAvail(cardsleft());
}

View File

@@ -17,13 +17,21 @@ body{
align-items: center;
}
img.card{
img.card{ /* 726 : 500 */
aspect-ratio: 1/1;
object-fit: contain;
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{
margin-top: .5rem;
}
@@ -36,4 +44,5 @@ button{
margin: .5rem;
color: #fff;
background: #6b6b6b;
cursor: pointer;
}