Ein WBS2-Projekt von Fatlinda Islami, Mia Balzer, Ramon Biehl und Robin Hahn.
- Die Game-Ansicht kann während des laufenden Spiels verlassen werden, ohne den Spielfortschritt zu verlieren.
- Ein Status-Indikator in der Navbar hält den Nutzer darüber informiert, ob er sich derzeit in der Queue befindet (gelb), ob er spielt und, am Zug ist (grün) oder nicht am Zug ist (rot).
- Der Server kann beendet werden oder die Client-Verbindung kann unterbrochen werden, ohne dass laufende Spiele verloren gehen.
- Die Queue wird bei Disconnects nicht verlassen; stattdessen gibt es eine Acknowledge-Abfrage, die die Erreichbarkeit des Clients sicherstellt.
- Das Spiel kann aufgegeben werden.
- Es gibt einen Chat.
- Admins können laufenden Spielen zusehen.
- Profilbilder werden als separate API-Anfrage gestreamt.
- Queue und laufende Spiele werden im Admindashboard bei Änderungen aktualisiert.
Das User-Modul verwaltet Nutzer und alle wichtigen Nutzerinformationen. Der Controller verwaltet alle nutzerbezogenen Endpunkte. @me-Routen beziehen sich auf den angemeldeten Nutzer.
Das Queue-Modul umfasst die gesamte Logik der Matchmaking-Queue. Die Queue selbst wird als Runtime-Objekt im Queue-Service gehalten. Neben einem Controller besitzt dieses Modul ein Gateway, das die Events der Socket-Kommunikation bearbeitet. Wird ein potenzielles Match gefunden, wird ein separater Acknowledge-Prozess gestartet, der sicherstellt, dass beide Clients noch erreichbar sind. Die Spielteilnehmer werden in einen Socket-Raum gesteckt, der über die Game-ID angesprochen werden kann. Darüber läuft die Game-bezogene Kommunikation. Admins können diesen Raum betreten, um zuzuschauen.
Das Game-Modul beinhaltet die Spiel-Logik sowie die Socket-Kommunikation, die das Ausführen von Zügen, das Aufgeben und das Zuschauen verwaltet. Hier wird auch die Chat-Kommunikation verwaltet, ebenso wie das Zuschauen von Admins.
Das Auth-Modul verwaltet das An- und Abmelden von Nutzern.
Der Service kümmert sich um das Speichern und Abrufen von Profilbildern.
Der Service generiert Demodaten in der Datenbank.
Dieser Service berechnet die gewonnenen oder verlorenen Elo-Punkte.
Dieser Filter wandelt HTTP-Fehler in WebSocket-Fehler um, was es ermöglicht, denselben Code sowohl für API- als auch für Socket-Kommunikation zu verwenden.
Es kommen zwei Guards zum Einsatz, wobei jeder Guard eine eigene Socket-Ausführung besitzt, da die Logik leicht unterschiedlich ist. Der is-logged-in- und der is-socket-logged-in-Guard erlauben den Zugriff auf Endpunkte nur für angemeldete Nutzer. Der roles- und der is-socket-admin-Guard beschränken den Zugriff auf Endpunkte auf Nutzer mit Admin-Status.
Der SessionIO-Adapter erweitert die Standardausführung des Socket.IO-Adapters um Zugriff auf die Session-Middleware.
In events.ts werden alle vom Server gesendeten und empfangenen Events festgelegt.
Dies ist die Wurzelkomponente der Anwendung. Sie interagiert direkt mit den zwei Komponenten ToastContainerComponent und RouterOutlet.
Verwaltet Toast-Benachrichtigungen.
Das Outlet dient als Platzhalter, den Angular basierend auf dem aktuellen Router-Status dynamisch füllt.
Diese Komponente repräsentiert die Startseite der Anwendung.
Diese Komponente verwaltet die Benutzeranmeldung und Authentifizierung.
Stellt die Methode navMatchMaking bereit und fügt den User in die Queue hinzu.
Dort werden die Toast drin gespeichert.
Matched 2 Spieler miteinander und leitet sie weiter zur TicTacToeComponent.
Zeigt den Status des Spielers an. Beim nicht spielen wird sie verdeckt. Befindet sich der User in der Queue leuchtet das Icon gelb auf, ist der User am Zug leuchtet es grün, ist der Gegner an der Reihe leuchtet es rot. Befindet sich auf der Navbar.
Befindet sich auf der Home-, Profil- und Gameseite, ist für die Navigation auf andere Seiten zuständig und zeigt Userinformationen an.
Dies ist die zentrale Komponente, die für das Tic-Tac-Toe-Spiel verantwortlich ist. Hier wird das Gameboard angezeigt worauf der Spieler die Züge machen kann. Ebenfalls hat man die Möglickeit über den GiveUp-Button das Spiel aufzugeben.
Eine Angular-Direktive, die verwendet wird, um dynamisch CSS-Klassen zu binden.
Diese Komponente stellt eine Chatfunktion bereit, die mit dem Tic-Tac-Toe-Spiel verbunden ist, um Spielern die Kommunikation während des Spiels zu ermöglichen.
Der DefaultValueAccessor ist eine interne Angular-Klasse, die es ermöglicht, Eingabefelder im Formular mit dem Modell zu synchronisieren. Dies wird in der ChatComponent verwendet, um Benutzereingaben korrekt zu handhaben.
Diese Komponente wird über den RouterOutlet geladen und zeigt das Spielerprofil an. Sie besteht aus den Subkomponeneten PlayerContentComponent, OptionsComponent, StatsComponent, Game-InfoComponent, PlayerPasswordChangeComponent.
Ist eine Subkomponente der PlayerProfileComponent. Hier werden die Informationen des Spielers angezeigt.
Verlinkt die Subkomponenten miteinander.
Zeigt die Statistik des Users.
Dort kann der User sein Passwort ändern.
Zeigt die Match Historie des Users indem sie die Boards aus der TicTacToeBoardComponent erhält.
Diese Komponente wird über den RouterOutlet geladen und stellt das Haupt-Dashboard für Administratoren dar. Sie integriert die Subkomponenten CurrentGamesComponent, UserListComponent, und WaitingPlayersComponent.
Zeigt aktuelle Spiele an und nutzt die Angular-Direktive NgClass für dynamisches Styling.
Stellt eine Liste der Nutzer dar.
Zeigt die Spieler an, die sich in der Queue befinden.