Die Minigolf Scoreboard App ist eine webbasierte Anwendung, die es Spielern ermöglicht, ihre Punktzahlen während eines Minigolf-Spiels zu verfolgen. Die App bietet eine benutzerfreundliche Oberfläche zum Hinzufügen von Spielern, Erfassen von Punktzahlen und Verfolgen des Spielfortschritts. Zusätzlich verfügt sie über Funktionen wie Sprachsteuerung, das Speichern und Laden von Spielen sowie die Möglichkeit, Spiele mit anderen zu teilen.
-
Hinzufügen und Verwalten von Spielern
-
Erfassen und Anzeigen von Punktzahlen für jede Bahn
-
Automatische Berechnung der Gesamtpunktzahl
-
Anzeige des führenden Spielers
-
Sprachsteuerung für einfache Bedienung
-
Speichern und Laden von Spielen
-
Teilen von Spielen mit anderen Spielern
-
Responsive Design für verschiedene Bildschirmgrößen
-
System reagiert mit "OK" als gesprochenes Wort und sichtbar auf dem Bildschirm, wenn das Schlüsselwort erkannt wird
Die App besteht aus drei Hauptdateien:
-
index.html: Die Hauptstruktur der App -
styles.css: Das Stylesheet für das Layout und Design -
script.js: Die JavaScript-Logik für die App-Funktionalität
Die HTML-Datei definiert die Struktur der App und enthält alle notwendigen Elemente für die Benutzeroberfläche. Sie bindet auch die CSS- und JavaScript-Dateien ein.
Wichtige Abschnitte:
-
<div id="app">: Der Hauptcontainer für die App -
<div id="gameControls">: Enthält Buttons für neue Spiele, Laden und Teilen -
<div id="playerSelection">: Bereich für die Spielerauswahl -
<div id="gameArea">: Bereich für die Punktetabelle und Spielinformationen -
<div id="speechRecognition">: Container für den Sprachbefehl-Button
Die CSS-Datei definiert das Layout und Design der App. Sie enthält Styles für alle HTML-Elemente und sorgt für ein responsives Design.
Wichtige Abschnitte:
-
Grundlegende Styles für Body und Container
-
Styles für Buttons, Inputs und Tabellen
-
Spezifische Styles für den Sprachbefehl-Button
-
Media Queries für die Anpassung an verschiedene Bildschirmgrößen
Die JavaScript-Datei enthält die gesamte Logik für die Funktionalität der App. Sie ist als Klasse MinigolfApp strukturiert.
Wichtige Methoden:
-
constructor(): Initialisiert die App -
addPlayer(): Fügt einen neuen Spieler hinzu -
updateScore(): Aktualisiert die Punktzahl eines Spielers -
completeHole(): Schließt eine Bahn ab -
renderScoreboard(): Aktualisiert die Anzeige der Punktetabelle -
startNewGame(): Startet ein neues Spiel -
loadSelectedGame(): Lädt ein gespeichertes Spiel -
shareGame(): Erstellt einen teilbaren Link für das aktuelle Spiel -
processVoiceCommand(): Verarbeitet Sprachbefehle
-
Laden Sie die drei Dateien (
index.html,styles.css,script.js) herunter. -
Speichern Sie alle drei Dateien im selben Verzeichnis.
-
Öffnen Sie die
index.htmlDatei in einem modernen Webbrowser (Chrome, Firefox, Safari, Edge).
-
Öffnen Sie die App in Ihrem Browser.
-
Fügen Sie Spieler hinzu, indem Sie ihre Namen eingeben und auf "Spieler hinzufügen" klicken.
-
Klicken Sie auf "Spielerauswahl abschließen", wenn alle Spieler hinzugefügt wurden.
-
Geben Sie die Punktzahlen für jede Bahn ein.
-
Klicken Sie auf "Bahn abschließen", um zur nächsten Bahn zu wechseln.
-
Nutzen Sie den "Sprachbefehl" Button für die Sprachsteuerung.
-
Verwenden Sie die Buttons "Neues Spiel", "Spiel laden" und "Spiel teilen" nach Bedarf.
Die App unterstützt folgende Sprachbefehle:
-
"Spieler [Name] hinzufügen": Fügt einen neuen Spieler hinzu
-
"Bahn abschließen": Schließt die aktuelle Bahn ab
-
"Punktzahl für [Spieler] [Zahl]": Aktualisiert die Punktzahl eines Spielers
-
"OK": System reagiert mit "OK" als gesprochenes Wort und sichtbar auf dem Bildschirm, wenn das Schlüsselwort erkannt wird
Die App verwendet:
-
HTML5 für die Struktur
-
CSS3 für das Styling
-
Vanilla JavaScript (ES6+) für die Funktionalität
-
Web Storage API für das Speichern von Spielständen
-
Web Speech API für die Spracherkennung
Die App wurde für moderne Webbrowser entwickelt und getestet. Für die volle Funktionalität, insbesondere die Spracherkennung, wird ein aktueller Chrome-Browser empfohlen.
-
Die Spracherkennung funktioniert möglicherweise nicht in allen Browsern.
-
Sehr lange Spielernamen können das Layout der Punktetabelle beeinträchtigen.
-
Implementierung einer Backend-Datenbank für persistente Speicherung
-
Hinzufügen von Mehrspieler-Funktionen in Echtzeit
-
Erweiterung der Sprachbefehle für mehr Funktionen
-
Hinzufügen von Statistiken und Analysen für Spieler
Beiträge zur Verbesserung der App sind willkommen. Bitte erstellen Sie einen Fork des Repositories und reichen Sie Pull Requests ein.