2023-08-02 17:12:15 +00:00
|
|
|
'use strict';
|
|
|
|
document.getElementById('kumoa').addEventListener('click', () => {
|
|
|
|
kumoa();
|
|
|
|
piirräKaikki();
|
|
|
|
});
|
|
|
|
document.getElementById('tee-uudelleen').addEventListener('click', () => {
|
|
|
|
teeUudelleen();
|
|
|
|
piirräKaikki();
|
|
|
|
});
|
|
|
|
|
|
|
|
document.getElementById('lisää-luokka-aste').addEventListener('click', () => {
|
|
|
|
suorita(tapahtumaTyypit.lisääAste);
|
|
|
|
piirräLuokat();
|
|
|
|
});
|
|
|
|
|
|
|
|
function piirräKaikki() {
|
|
|
|
piirräLuokat();
|
|
|
|
}
|
|
|
|
|
|
|
|
function piirräLuokat() {
|
|
|
|
let vanhaLuokkaAsteLista = document.getElementById('luokka-asteet');
|
|
|
|
let luokkaAsteLista = luoLuokkaAsteLista();
|
|
|
|
vanhaLuokkaAsteLista.parentNode.replaceChild(
|
|
|
|
luokkaAsteLista,
|
|
|
|
vanhaLuokkaAsteLista
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function luoLuokkaAsteLista() {
|
|
|
|
let luokkaAsteLista = document.createElement('ul');
|
|
|
|
luokkaAsteLista.id = 'luokka-asteet';
|
|
|
|
|
|
|
|
for (let aste = 0; aste < luokkaAsteet.asteet.length; aste++) {
|
|
|
|
if (luokkaAsteet.asteet[aste] !== undefined) {
|
|
|
|
let luokkaAsteListassa = luoLuokkaAsteListassa(aste);
|
|
|
|
luokkaAsteLista.appendChild(luokkaAsteListassa);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return luokkaAsteLista;
|
|
|
|
}
|
|
|
|
|
|
|
|
function luoLuokkaAsteListassa(aste) {
|
|
|
|
let luokkaAsteListassa = document.createElement('li');
|
|
|
|
luokkaAsteListassa.classList.add('luokka-aste');
|
|
|
|
|
|
|
|
luokkaAsteListassa.appendChild(luoPainike('+', () => {
|
|
|
|
suorita(tapahtumaTyypit.lisääLuokka, aste);
|
|
|
|
piirräLuokat();
|
|
|
|
}));
|
|
|
|
luokkaAsteListassa.appendChild(luoPainike('-', () => {
|
|
|
|
if (luokkaAsteet.asteet[aste].luokat().length > 1) {
|
|
|
|
suorita(tapahtumaTyypit.poistaLuokka, aste);
|
|
|
|
} else {
|
|
|
|
suorita(tapahtumaTyypit.poistaAste, aste);
|
|
|
|
}
|
|
|
|
piirräLuokat();
|
|
|
|
}));
|
|
|
|
|
|
|
|
luokkaAsteListassa.appendChild(luoLuokkaLista(aste));
|
|
|
|
|
|
|
|
luokkaAsteListassa.appendChild(luoPainike('✎', () => {
|
|
|
|
// TODO: Älä käytä prompt():ia ja alert():ia
|
|
|
|
let vastaus = prompt('Uusi luokka-aste');
|
|
|
|
if (vastaus === null) {
|
|
|
|
// Käytääjä painoi 'Peruuta'
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
vastaus = parseInt(vastaus, 10);
|
2023-08-03 14:28:19 +00:00
|
|
|
if (Number.isNaN(vastaus)) {
|
2023-08-02 17:12:15 +00:00
|
|
|
// Ei numero
|
|
|
|
alert('Luokka-asteen pitää olla numero');
|
|
|
|
return;
|
2023-08-03 14:28:19 +00:00
|
|
|
} else if (vastaus < 1) {
|
2023-08-02 17:12:15 +00:00
|
|
|
// Luokka-aste alkaa 1:stä
|
|
|
|
alert('Luokka-asteeen pitää olla vähintään 1');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
suorita(tapahtumaTyypit.muutaAste, aste, vastaus);
|
|
|
|
piirräLuokat();
|
|
|
|
}));
|
|
|
|
|
|
|
|
return luokkaAsteListassa;
|
|
|
|
}
|
|
|
|
|
|
|
|
function luoLuokkaLista(aste) {
|
|
|
|
let luokkaLista = document.createElement('ul');
|
|
|
|
luokkaLista.classList.add('luokat');
|
|
|
|
|
|
|
|
for (let luokka of luokkaAsteet.asteet[aste].luokat()) {
|
|
|
|
let luokkaListassa = document.createElement('li');
|
|
|
|
luokkaListassa.appendChild(document.createTextNode(`${aste}${luokka}`));
|
|
|
|
luokkaLista.appendChild(luokkaListassa);
|
|
|
|
}
|
|
|
|
|
|
|
|
return luokkaLista;
|
|
|
|
}
|
|
|
|
|
|
|
|
function luoPainike(teksti, funktio) {
|
|
|
|
let painike = document.createElement('input');
|
|
|
|
painike.type = 'button';
|
|
|
|
painike.value = teksti;
|
|
|
|
painike.addEventListener('click', funktio);
|
|
|
|
return painike;
|
|
|
|
}
|
|
|
|
|
|
|
|
// TOOD: Käyttöliittymätestit
|