Achtung dies ist eine Gruppenaufgabe.

Zweite Gruppenaufgabe Webtech SoSe 2022

Bitte lesen Sie erst den gesamten Text, bevor Sie mit der Aufgabe anfangen.

Dieses Repository enthält einen Startpunkt (Boilerplate) auf dem aufbauend die Aufgabe umgesetzt werden kann.

Momentan wird ein Button und eine <p>-Element angezeigt. Das <p>-Element enthält den Text zu einem Zähler, der mit 0 initialisiert ist.

Mit jedem Click auf den Button wird der Zähler um 1 erhöht.

Codeorganisation

Es gibt die folgenden Ordner

• node_module - darin befinden sich benötigte Bibliotheken. Diesen Ordner müssen Sie sonst nicht weiter beachten
• public - darin befinden sich die html-Dokumente und die Bundle-Dateien, wenn sie erzeugt werden. Sie müssen nur die index.html anpassen. Nach dem Bundeln sind hier auch .js und .css Dateien, diese sollten Sie nicht ändern, da diese automatisch erzeugt werden
• src - darin befinden sich die JavaScript und CSS Dateien, die Sie bearbeiten können. Sie können neue Module zufügen, müssen diese aber dann importieren. Sehen Sie sich die main.js als Beispiel an, dass ist der Einstiegspunkt.

Es gibt auf oberster Ebene noch die weitere Dateien:

• .gitignore - darin wird festgelegt, welche Dateien nicht eingecheckt werden sollen, z.B. weil Sie automatisch erzeugt werden.
• package.json - die Konfigurationsdatei für npm
• package-lock.json - eine weiter Date von npm, in der die genauen Versionen der Abhängigkeiten festgehalten werden
• LICENSE - diese Datei können Sie ignorieren
• README.md - die Datei die Sie gerade lesen

Nutzung von npm

Wie immer müssen sie am Anfang einmal die Abhängigkeiten installieren:

npm install

In der package.json sehen Sie die definierten Skripte:

• npm run build
• npm run start
• npm run watch

Mit build können Sie das Projekt so bauen, dass alles im public Ordner auf einen Webserver geladen werden kann; das nennt man deploy. Mit watch können Sie das Projekt automatisch neu bauen lassen, wenn Sie die Dateien ändern. Dazu brauchen Sie einen separaten Webserver - z.B. können Sie das VSCode-Plugin "Live Server" installieren.

Am einfachsten ist es, Sie starten beim Entwickeln den Server von esbuild mit npm run start. Dann können Sie die Seite unter http://127.0.0.1:8000/ erreichen und wenn Sie die Seite neu laden, werden die Änderungen an den Dateien übernommen.

Tests

Es gibt diesmal keine Tests, das Projekt wird manuell bewertet.

Aufgabe

Sie müssen mit "vanilla"-JavaScript arbeiten, d.h. keine Frameworks oder Bibliotheken.

Teil 1

Fügen Sie dem vorhanden "counter", als separate "Sicht", Ihre Lösung für den Währungsumrechner zu und entwickeln Sie einen Router um ohne Laden von Seiten vom Server zwischen den beiden Sichten, counter und Währungsumrechner, hin und her zu wechseln.

Auf den Folien der Vorlesung von dieser Woche finden Sie Hinweise zur Funktion und groben Architektur eines Routers. Beachten Sie, dass in diesem Fall initial immer die index.html, also der Pfad / geladen wird (da wir ohne richtigen Server arbeiten). Sie können aussuchen welche Sicht dann angezeigt wird.

Ich hab das Wort Sicht verwendet, da es eigentlich ein Seite ist, deren DOM entsprechend so verändert wird, dass sie mal das Eine und mal das Andere anzeigt.

Bei jeder Sicht soll ein Navigationsbereich angezeigt werden, um auf die anderen Sichten zu kommen (Das kann im HTML der gemeinsam index.html sein oder z.B. in einem extra Modul, so dass der Codeteil nicht in jeder Sicht wiederholt wird). Die aktuelle Sicht soll in der Navigation markiert sein (sie könnten window.location nutzen um an den Pfad zu kommen und ggf. die URL API und URL Pattern API).

Die Vor- und Zurück-Knöpfe des Browsers sollen normal arbeiten, dass heißt z.B. auf die letzte Sicht wechseln, wenn Zurück geklickt wird und schon eine Sicht vorher aufgerufen wurde.

Der Router soll die Routen nicht fest einprogrammiert haben, sondern eine Möglichkeit bieten Routen (Pfade) zu registrieren. Er kann z.B. als Klasse umgesetzt werden; muss aber nicht, solange die Umsetzung den Code sinnvoll kapselt.

Teil 2

Fügen Sie eine weitere Sicht zu, mit einem Tic Tac Toe Spiel (https://de.wikipedia.org/wiki/Tic-Tac-Toe), dass zwei Spieler zusammen am gleichen Rechner spielen können. Dazu soll jeweils angezeigt werden, ob der X-Spieler oder der O-Spieler dran ist.

Der Sieger soll automatisch erkannt werden, ein Unentschieden ebenso.

Es bietet Sich an ein CSS-Grid-Layout zu verwenden.

Teil 3

Für Gruppen mit mehr als 3 Teilnehmern Pflicht, sonst optional:

Nutzen Sie die Web Storage API um die letzten 10 Spielergebnisse zu speichern und anzuzeigen, auch auch wenn der Browser neu gestartet wird.

Bewertungskriterien

Für die folgenden Punkte gibt es jeweils zwei Punkte:

1. Der Router ist grundsätzlich funktionsfähig
2. Das Tic Tac Toe Spiel ist grundsätzlich funktionsfähig

Einen Punkt gibt es für für diese drei Kriterien zusammen:

3. Der Code ist sauber mit Modulen organisiert
4. Der Code ist konsistent formatiert
5. Es werden passende HTML-Elemente genutzt und mit CSS grundlegend gestylt und sinnvoll platziert.
6. Für Gruppen mit mehr als 3 Teilnehmern: der Teil 3 ist erfüllt