make the code i ahve to add or replace as simple and short as you can. make sure the code is compatible with other modules and that it wont say undefined and should display the right number or symbol when the number is beyond 10why are the numbers beyong 10 in my card game not displaying as letters. my card game has one javascript called kayttoliittyma.js that is connected to other modules(kasi.js, kortti.js, maa.js, pakka.js). kayttoliittyma.js://pelaajien kädet, pakka ja DOM-elementit
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”);

//funktiot korttien päivittämiseen ja tuloksen näyttämiseen
function paivitaKortit(elementit, kortit) {
for (let i = 0; i < elementit.length; i++) {
if (kortit[i]) {
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};
}

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

//lisätään kortteja jakajalle kunnes summa >= 17
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;
}

//kuunnellaan klikkauksia
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;
jakajaVuoro();
});

//aloitetaan uusi peli uudestaan
uusiPeliButton.addEventListener(“click”, () => {
window.location.reload();
});

aloitaPeli();
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’})
};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};
}
}
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(', ');
}
};