docs/user/Games/Game-UI-Component.md

+Der Spielzustand wird in der UI bzw. dem Frontend durch die Game UI Components visualisiert. Diese werden durch die Web Component APIs vom Browser eingebunden.
+
+Die Game UI Component erhält vom Frontend am Anfang den Startzustand, und beim ansehen des Matches jeweils den aktuellen Spielzug. Dieser Spielzug wird dann entweder in der Komponente gezeichnet oder einen Spielzug rückgängig zu machen, je nachdem ob die Person, die das Match anschaut, nach vorne oder zurück geht.
+
+Das FH-Münster GitLab stellt Beispielimplementierungen in [Svelte (kompiliert als WebComponent)](https://git.fh-muenster.de/swa1/coding-challenge/games/cc-dummy) und als [native (vanilla) JS Web Component](https://git.fh-muenster.de/swa1/coding-challenge/games/cc-dummy-vanilla). Die Svelte Implementierung bietet einfacheren Code der jedoch Kompiliert werden muss, während die native JS Web Component Implementierung keine Kompilierung benötigt, aber nicht die gängigen Features (wie z.B. Data Binding oder einfache Template Logik mit Bedingungen und Listen Rendering) aus modernen UI Komponenten Frameworks wie React, Vue oder Angular bietet.
+
+Im folgenden wird die Schnittstelle der Komponenten beschrieben:
+
+Die Komponenten erhalten durch zwei verschiedenen Properties (Props) Daten über das Match und dem aktuellen Spielzustand zu geben, während ein Event dazu genutzt wird um Daten zurück an das Frontend zu versenden.
+
+
+**Props (Inputs)**
+
+- `initialization` enthält den initialen Spielzustand und wird Beispielsweise von TicTacToe genutzt, um das initiale Gameboard-Array zu übertragen.
+
+- `drawMove` enthält ein Spielzug verpackt in einem Objekt mit dem flag-Parameter, die angibt, ob der Zug hinzugefügt (bzw. gezeichnet) oder rückgängig gemacht (bzw. radiert) werden soll. Dieses wird von der Elternkomponente immer aktualisiert, wenn der Nutzer vor- oder zurückspult.
+
+**Event (Output)**
+
+- Ein CustomEvent mit dem TypeArg `drawn` wird gefeuert, wenn ein Zug auf dem Spielfeld gezeichnet wurde. Das kann genutzt werden um Informationen zu einem Spielzug in der History neben der Spielkomponente anzuzeigen.
\ No newline at end of file