Lernspiel mit Mathe-Fachbegriffen aus den Modulen der ersten paar Semester. Ursprünglich als eine bloße [Liste von Wörtern](https://gitlab.informatik.hu-berlin.de/eltschib/mathe-skribbl/-/blob/cbc662b826650842fa3f4bc29c48cad95c5716fb/Skribbl.md) zur Verwendung in [skribbl.io](https://skribbl.io) entstanden hat sich das ganze inzwischen zu einem eigenen Programm entwickelt, unter anderem um die Limitationen hinsichtlich der Länge und Anzahl von Wörtern des Originals zu umgehen.
Die aktuelle Liste mit allen Begriffen und deren Definitionen/Beschreibungen kann im JSON-Format [hier](./client/Skribbl.json) eingesehen werden, oder hübsch formatiert unter `/docs/Begriffe.html` wenn bereits ein lokaler Server läuft.
## Setup & lokale Server
Zum Ausführen des Projekts werden zwei Dinge benötigt: ein beliebiger, simpler Http-Server zum Hosten der Dateien im [client](./client)-Ordner, z.B. via php oder Python, und der Signaling-Server `signalingServer.jar`. Unter Windows können diese mit den Dateien `httpServer.bat` und `signalingServer.bat` direkt gestartet werden, anschließend sollte das Spiel unter `localhost:8080` erreichbar sein.
Auf Rechnern mit [Windows Terminal](https://www.microsoft.com/de-de/p/windows-terminal/9n0dx20hk701) kann alternativ auch einfach `terminal.bat` ausgeführt werden; diese öffnet beide Server zusammen mit Git Bash in einem Fenster.
Zum Entwickeln empfiehlt es sich, VS Code mit dem hier enthaltenen Workspace `vs-workspace.code-workspace` zu benutzen; Grund dafür sind die hervorragenden Type-Checking-Funktionen von VS Code, die allerdings standardmäßig nicht alle aktiviert sind (z.B. werden mit den Standardeinstellungen nur gerade geöffnete Dateien überprüft, nicht das gesamte Projekt). Der Workspace `vs-workspace.code-workspace` ist daher entsprechend konfiguriert und enthält zudem Einstellungen für zwei ebenfalls zu empfehlende Erweiterungen, [Todo-Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) und [innerHTML syntax highlighting](https://marketplace.visualstudio.com/items?itemName=nicolasparada.innerhtml). Beide werden beim ersten Öffnen des Workspaces auch automatisch zur Installation vorgeschlagen, müssen also nicht manuell heruntergeladen werden.
## Aufbau & Netzwerkkrams
Das Projekt gliedert sich zunächst in zwei ungleich große Teile: einen in Javascript, HTML und CSS geschriebenen Client und einen in Java geschriebenen Signaling-Server.
Letzterer dient lediglich dazu, die Spiel-IDs zu verwalten sowie die ursprüngliche Verbindung zwischen dem Host und den Spielern herzustellen; sämtliche weitere Kommunikation läuft dann via [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) direkt zwischen den beteiligten Browsern ab, um den Server so wenig wie möglich zu belasten.
Gehostet wird das Spiel daher tatsächlich im Browser des Spielers, der die jeweilige Lobby erstellt hat; dazu wird bei ihm eine Instanz der [SkribblServer](./client/logic/SkribblServer.js)-Klasse erstellt, die mit dem Signaling-Server über die gesamte Dauer des Spiels per WebSocket verbunden bleibt. Möchte ein anderer Spieler dem Spiel beitreten kann er so mit dem Signaling-Server als Mittelmann alle notwendigen Informationen zum Erstellen einer WebRTC-Verbindung zwischen den beiden Browsern austauschen, welche daraufhin bei ihm von der [SkribblClient](./client/logic/SkribblClient.js)-Klasse genutzt werden kann um mit dem Host des Spiels zu kommunizieren. Im Browser des Hosts wird ebenfalls eine Instanz der SkribblClient-Klasse erstellt, die allerdings direkt über Javascript statt über eine Netzwerkverbindung mit dem Server verbunden ist.
Geschrieben ist das ganze bis auf den Signaling-Server in modernem Javascript mit JSDoc-Kommentaren, und im Fall der Benutzeroberfläche in Form von Web Components wie `<skribbl-menu>`, `<skribbl-lobby>` und `<skribbl-canvas>`. Für Leute mit bisher wenig Erfahrung im Umgang mit diesen Sprachen/APIs empfehlen sich zur Einführung die folgenden Artikel:
*[JSDoc Type-Checking](https://medium.com/@trukrs/type-safe-javascript-with-jsdoc-7a2a63209b76)(die Abschnitte zur Einrichtung und Konfiguration sind hier nicht weiter wichtig; das eigentliche Type-Checking an sich ist dort aber glaube ich ganz gut erklärt)
Der gesamte Quelltext sowie alle in diesem Repository enthaltenen Grafiken sind unter der [MIT License](./LICENSE) lizensiert - sowohl unserer eigener Code, als auch die beiden von uns genutzten Bibliotheken, [KaTeX](https://github.com/KaTeX/KaTeX) und [Java-Websocket](https://github.com/TooTallNate/Java-WebSocket).