diff --git a/spacetaxi.js b/spacetaxi.js index 51e6efc..8b8ff3c 100644 --- a/spacetaxi.js +++ b/spacetaxi.js @@ -1,18 +1,30 @@ 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); }); - //myForm.password.addEventListener('change', check_password); - //myForm.spaceship.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++) @@ -21,20 +33,26 @@ function create_star_field(n) } } +// 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`; @@ -47,11 +65,51 @@ function create_star() } function check_password(e) { - return + // To-Do? } function check_username(e) { - return + // To-Do? +} + +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) + { + alert("Username 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) {