spacetaxi/spacetaxi.js

document.addEventListener('DOMContentLoaded', init);

// Trackt die Planete, wenn 1 = ausgewählt, 0 = nicht ausgewählt (von links nach rechts)
list_id = [0, 0, 0, 0, 0];

function init() {

    // Erstelle zu Beginn ein Sternenfeld mit entsprechenden Z-Index im Background
    create_star_field(100);

    // Bei der Auswahl von Raumschiffen, ändert sich der Score
    document.querySelectorAll('input[name="spaceship"]').forEach(radio => {
        radio.addEventListener('change', update_score);
    });

    // Form Listener
    form = document.querySelector("form")
    form.username.addEventListener('change', check_username);
    form.password.addEventListener('change', check_password);
    form.addEventListener('submit', check_after_submitting)

    // Event Listener für alle Planeten
    document.querySelectorAll('svg').forEach(function (svg) { svg.addEventListener('click', printClicked) });
    
}

// Methode die n-Mal die Funktion, um ein Stern erstellen, aufruft
function create_star_field(n)
{
    for (let i = 0; i < n; i++)
    {
        create_star();
    }
}

// Methode um einen Stern zu erstellen
function create_star()
{

    // Krieg eine zufällige Position, die im Fenster definiert ist
    const x = Math.floor(Math.random() * window.innerWidth);
    const y = Math.floor(Math.random() * window.innerHeight);

    // Eigentliches Stern Element als Partikel (siehe auch CSS)
    const star = document.createElement('particle');

    // Füge diesen Stern in den Body ein
    document.body.appendChild(star);

    // Mache den Stern sichtbar, in der hintersten Ebene
    star.style.position = 'absolute';
    star.style.opacity = '1';
    star.style.zIndex = '-1';

    // Definiere die Sterngröße, die zwischen 0
    const size = Math.round(Math.random() * 5);

    star.style.height = `${size}px`;
    star.style.width = `${size}px`;

    star.style.background = '#ffffff';

    star.style.left = `${x}px`;
    star.style.top = `${y}px`;
}

function check_password(e) {
    password = e.target.value;
    
    if (password.length > 12)
    {
        alert("Passwort darf höchstens 12 Zeichen lang sein!");
        document.querySelector("form").password.value = "";
    }
}

function check_username(e) {
    username = e.target.value;
    
    if (username.length > 8)
    {
        alert("Username darf höchstens 8 Zeichen lang sein!");
        document.querySelector("form").username.value = "";
    }
}

function check_after_submitting(e)
{
    form = e.target;

    
    username = form.username.value;
    password = form.password.value;
    planeten_score = document.getElementById("planete").value;

    // Username ob vorhanden prüfen
    if (username.length < 1 || username.length > 8)
    {
        alert("Gültigen Usernamen eintragen!");
        e.preventDefault();
    }
    
    // Passwort ob vorhanden prüfen
    else if (password.length < 1)
    {
        alert("Passwort eintragen!");
        e.preventDefault();
    }

    // Ob Rakete ausgewählt worden ist
    else if (form.spaceship.value == "")
    {
        alert("Wähle eine Rakete aus!");
        e.preventDefault();
    }

    // Ob mind. ein Planet ausgewählt worden ist
    else if (planeten_score == 0)
    {
        alert("Wähle mindestens einen Planeten aus!");
        e.preventDefault();
    }
    // e.preventDefault();

}

function printClicked(e) {
    const planet_id = e.currentTarget.id;
    const svg_element = e.currentTarget;

    planet_index = planet_id[planet_id.length - 1] - 1
    if (list_id[planet_index] == 1) {
        svg_element.querySelectorAll("path")[0].setAttribute("stroke", "#ffffff");
        svg_element.querySelectorAll("path")[0].setAttribute("stroke-width", "2");
        list_id[planet_index] = 0;

    }
    else {
        svg_element.querySelectorAll("path")[0].setAttribute("stroke", "#ff0000f0");
        svg_element.querySelectorAll("path")[0].setAttribute("stroke-width", "0.4vw");
        list_id[planet_index] = 1;
    }

    update_score()
}

function update_score() {
    planet_sum = document.getElementById("planetensum");
    dauer_sum = document.getElementById("dauersum");
    kosten_sum = document.getElementById("kostensum");

    current_sum = 0;
    id_sum = 0;


    for (let a = 0; a < 5; a++) {
        if (list_id[a] == 1) {
            current_sum += 1;
            id_sum += a + 1;
        }
    }



    dauer_sum.textContent = Math.round(id_sum / 2) + "y";
    //dauer_sum.textContent += "d";

    planet_sum.textContent = current_sum;
    let rocket_factor = 1.0;
    let rocket_selected = document.querySelectorAll("form")[0].spaceship.value;
    switch (rocket_selected) {
        case "rocket1": rocket_factor = 1.5; break;
        case "rocket2": rocket_factor = 0.75; break;
        case "rocket3": rocket_factor = 2.5; break;
        default: rocket_factor = 0; break;
    }

    kosten_sum.textContent = Math.round(id_sum * rocket_factor) + "M$";

    document.getElementById("planete").value = planet_sum.textContent;
    document.getElementById("dauer").value = dauer_sum.textContent;
    document.getElementById("kosten").value = kosten_sum.textContent;
}