The red cards are not appearing in the game since most of the cards ar esuall black. explain this and fix it. write short and simple code to fix these issues. since its black most of the time. The other modules (kasi.js, pakka.js, kortti.js, maa.js) are connected to one javascript called kayttoliittyma.js
import { Pakka } from “./moduulit/pakka.js”;
import { Kasi } from “./moduulit/kasi.js”;
import { Maa } from “./moduulit/maa.js”;

const pelaajankasi = Kasi.luoKasi();
const jakajankasi = Kasi.luoKasi();
const pakka = Pakka.luoPakka();

const pelaajaElementit = document.querySelectorAll(“#pelaajan-kortit > .kortti”);
const jakajaElementit = document.querySelectorAll(“#jakajan-kortit > .kortti”);
const tulos = document.getElementById(“tulos”);
const otaKorttiButton = document.getElementById(“ota-kortti”);
const jaaButton = document.getElementById(“jaa”);
const uusiPeliButton = document.getElementById(“uusi-peli”);

function paivitaKortit(elementit, kortit) {
for (let i = 0; i < elementit.length; i++) {
if (kortit[i]) {
// Delay card display for jakaja
if (elementit === jakajaElementit) {
setTimeout(() => {
elementit[i].innerHTML = kortit[i].toString();
if (kortit[i].maa.vari === “punainen”) {
elementit[i].classList.add(“punainen”);
elementit[i].classList.remove(“musta”);
} else {
elementit[i].classList.add(“musta”);
elementit[i].classList.remove(“punainen”);
}
}, 500 * (i + 1));
} else {
elementit[i].innerHTML = kortit[i].toString();
if (kortit[i].maa.vari === “punainen”) {
elementit[i].classList.add(“punainen”);
elementit[i].classList.remove(“musta”);
} else {
elementit[i].classList.add(“musta”);
elementit[i].classList.remove(“punainen”);
}
}
} else {
elementit[i].innerHTML = “”;
elementit[i].classList.remove(“musta”);
elementit[i].classList.remove(“punainen”);
}
}
}

function paivitaTulos() {
tulos.innerHTML = Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
}

function aloitaPeli() {
pakka.sekoita();
pelaajankasi.lisaaKortti(pakka.otaKortti());
jakajankasi.lisaaKortti(pakka.otaKortti());
paivitaKortit(pelaajaElementit, pelaajankasi.kortit);
paivitaKortit(jakajaElementit, [jakajankasi.kortit[0], null]);
paivitaTulos();
}

function jakajaVuoro() {
while (jakajankasi.summa < 17) {
jakajankasi.lisaaKortti(pakka.otaKortti());
}
paivitaKortit(jakajaElementit, jakajankasi.kortit);
paivitaTulos();
if (jakajankasi.summa > 21 || pelaajankasi.summa > jakajankasi.summa) {
tulos.innerHTML = Pelaaja voitti! Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
} else if (pelaajankasi.summa < jakajankasi.summa) {
tulos.innerHTML = Jakaja voitti! Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
} else {
tulos.innerHTML = Tasapeli! Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
}
otaKorttiButton.disabled = true;
jaaButton.disabled = true;
uusiPeliButton.disabled = false;
}

otaKorttiButton.addEventListener(“click”, () => {
pelaajankasi.lisaaKortti(pakka.otaKortti());
paivitaKortit(pelaajaElementit, pelaajankasi.kortit);
paivitaTulos();
if (pelaajankasi.summa > 21) {
tulos.innerHTML = Hävisit! Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
otaKorttiButton.disabled = true;
jaaButton.disabled = true;
uusiPeliButton.disabled = false;
}
});

jaaButton.addEventListener(“click”, () => {
paivitaKortit(jakajaElementit, jakajankasi.kortit);
jaaButton.disabled = true; // Disable the jaa button
jakajaVuoro();
});

uusiPeliButton.addEventListener(“click”, () => {
window.location.reload();
});

aloitaPeli();

the other modules:kasi.js/* Kasi (käsi) -luokka edustaa pelaajan tai jakajan kättä. Pakka-luokan aliluokkana se saa kaikki Pakka-luokan metodit. /
/ Lisäksi se osaa laskea kädessä olevien korttien summan ja kertoa niiden määrän. /

import {Kortti} from “./kortti.js”;
import {Pakka} from “./pakka.js”;

export class Kasi extends Pakka {
constructor() {
super();
}

/ Staattinen metodi eli sitä kutsutaan luokan kautta: Kasi.luoKasi(); /
/ Palauttaa uuden Kasi-olion eli tyhjän käden. Ei voi kutsua olioissa. /
static luoKasi() {
let apukasi = new Kasi();
return apukasi;
}

/ Palauttaa kädessä olevien korttien määrän. /
/ Tämä on ns. getteri eli sitä käytetään olion ominaisuutena, ei funktiona (eli ilman sulkuja). Esim. let maara = omaPakka.kortteja; /
get kortteja() {
return this.kortit.length;
}

/ Palauttaa kädessä olevien korttien summan. /
get summa() {
return this.kortit.reduce((summa,kortti)=>summa+kortti.arvo,0);
}

};kortti.js/ Tämä moduuli määrittelee yhden pelikortin. /

export class Kortti {

/ Konstruktori uusien korttien luomiseen. maa-parametri on Maa-tyypin vakio, arvo numero. /
/ Vain Pakka-luokan käyttöön. Ei tarkoitettu käytettäväksi suoraan käyttöliittymästä. /
constructor(maa, arvo) {
this.maa = maa;
this.arvo = arvo;
}

/ Palauttaa kortissa näytettävän arvosymbolin (A, J, Q, K tai numero). /
/ Tämä on ns. getteri eli sitä käytetään olion ominaisuutena, ei funktiona (eli ilman sulkuja). Esim. console.log(omaKortti.arvosymboli); /
get arvosymboli() {
switch(this.arvo) {
case 1:
return “A”;
case 11:
return “J”;
case 12:
return “Q”;
case 13:
return “K”;
default:
return this.arvo;
}
}

/ Palauttaa kortin tiedot merkkijonona. Ei hyödyllinen graafista käyttöliittymää tehdessä. /
toString() {
return {this.maa.symboli}{this.arvo};
}
};maa.js:/ Tämä moduuli sisältää maiden (pata, risti, hertta, ruutu) määrittelyt. /
/ Ominaisuuksiin viitataan pistenotaatiolla, eli esim. jos muuttujan nimi on maa, niin maa.nimi, maa.symboli tai maa.vari. /

export const Maa={
PATA:Object.freeze({nimi:‘pata’, symboli:‘\u2660’, vari:‘musta’}),
RISTI:Object.freeze({nimi:‘risti’, symboli:‘\u2663’, vari:‘musta’}),
HERTTA:Object.freeze({nimi:‘hertta’, symboli:‘\u2665’, vari:‘punainen’}),
RUUTU:Object.freeze({nimi:‘ruutu’, symboli:‘\u2666’, vari:‘punainen’})
};pakka.js:/ Pakka-luokka edustaa yhtä korttipakkaa eli 52 korttia. /

import {Maa} from “./maa.js”;
import {Kortti} from “./kortti.js”;

export class Pakka{

/ Konstruktori. Kun Pakka-luokasta luodaan olio, se saa tyhjän taulukon korteille. /
/ Tätä ei ole tarkoitus kutsua ulkopuolelta, vain luoPakka-metodin kautta. /
constructor() {
this.kortit=[];
}

/ Lisää kortin (Kortti-olion) tähän pakkaan. Tästä metodista on enemmän hyötyä aliluokassa Kasi. /
lisaaKortti(uusiKortti){
this.kortit.push(uusiKortti);
}

/ Poistaa kortin tästä pakasta ja palauttaa sen. /
otaKortti() {
return this.kortit.pop();
}

/ Sekoittaa pakan eli laittaa kortit satunnaiseen järjestykseen. */
sekoita() {
if(this.kortit.length<2) {
return;
}
else {
for(let i=0; i<this.kortit.length; i++){
let indA=Math.floor(Math.random()*this.kortit.length);
let indB=Math.floor(Math.random()this.kortit.length);
[this.kortit[indA], this.kortit[indB]]=[this.kortit[indB],this.kortit[indA]];
}
}
}

/ Staattinen metodi eli sitä kutsutaan luokan kautta: Pakka.luoPakka(); /
/ Palauttaa uuden Pakka-olion, jossa on 52 korttia. Ei voi kutsua olioissa. /
static luoPakka() {
let apupakka=new Pakka();
for(let i=1; i<=13; i++) {
apupakka.lisaaKortti(new Kortti(Maa.HERTTA, i));
apupakka.lisaaKortti(new Kortti(Maa.RUUTU, i));
apupakka.lisaaKortti(new Kortti(Maa.PATA, i));
apupakka.lisaaKortti(new Kortti(Maa.RISTI,i));
}
return apupakka;
}

/ Palauttaa pakan tiedot merkkijonona. Ei hyödyllinen graafista käyttöliittymää tehdessä. */
toString() {
return this.kortit.map(Kortti=>Kortti.toString()).join(', ');
}
};css:#pelipoyta {
background-color: rgba(21, 133, 21, 0.575);
padding: 30px;
border: 3px solid #000000;
display: inline-block;
}

#napit {
margin-bottom: 20px;
}

#uusi-peli {
float: right;
}

#pelaajan-kortit,
#jakajan-kortit {
display: flex;
}

#tulos {
text-align: center;
padding: 20px;
font-size: 20px;
font-weight: bold;
height: 60px;
}

.kortti {
display: inline-block;
border: 1px solid black;
padding: 5px;
margin: 5px;
width: 130px;
height: 180px;
text-align: center;
line-height: 80px;
font-size: 40px;
font-family: Arial, sans-serif;
border-radius: 10px;
}

.musta,
.punainen {
background-color: #ffffff;
}

.kortti span {
display: block;
}

.kortti .symboli {
text-align: center;
font-size: 30px;
}

.musta .symboli {
color: #000000;
}

.punainen .symboli {
color: #ff0000;
}

.kortti .tokanumero {
-moz-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);
-o-transform: scale(-1, -1);
-ms-transform: scale(-1, -1);
transform: scale(-1, -1);
}