Mathe-Skribbl

Lernspiel mit Mathe-Fachbegriffen aus den Modulen der ersten paar Semester. Ursprünglich als eine bloße Liste von Wörtern zur Verwendung in 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 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-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 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 und innerHTML syntax highlighting. 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 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-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-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 (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)
• Javascript-Module
• Javascript-Klassen
• Custom Elements
• Shadow DOM

Bibliotheken & Copyright

Der gesamte Quelltext sowie alle in diesem Repository enthaltenen Grafiken sind unter der MIT License lizensiert - sowohl unserer eigener Code, als auch die beiden von uns genutzten Bibliotheken, KaTeX und Java-Websocket.