Schach im Browser genießen

Vor knapp zwei Jahren stelle ich eine freie Implementierung des Schachspiels für den Browser vor. Neben dieser 2D-Variante existieren auch wunderschöne 3D-Varianten. Eine Implementation dieser Varianten hört auf den Namen Chess3D. Die Darstellung der 3D-Szene erfolgt dort per WebGL. Neben einigen hilfreichen Funktionen wie einer Undo-Funktionalität können Spiele im PGN-Format gespeichert und wieder geladen werden.

Chess3D im Browser

Mit Chess3D können Schachspiele gegen den Computer bestritten werden. Für den Gegner wird auf Garbochess-JS von Gary Linscott zurückgegriffen. Der Quelltext von Chess3D ist auf GitHub zu finden. Er ist unter der GPL3 lizenziert und damit freie Software.

Markdown-Editor für Integration in eigene Webprojekte

Für ein kleines Webprojekt war ich auf der Suche nach einem Markdown-Editor. Fündig geworden bin ich bei SimpleMDE. Technisch gesehen setzt SimpleMDE auf dem bestehenden Editor CodeMirror auf und erweitert diesen um Markdown-Funktionalitäten, Geschrieben ist der Editor in JavaScript und bietet eine Reihe von Features. Dies fängt an bei der Unterstützung der gewöhnlichen Formatierungen (z.B. Fett und Kursiv) an und geht weiter über Listen und Bildunterstützung. Daneben beherrscht SimpleMDE Autosaving, so das Änderungen auf Wunsch automatisch gesichert werden.

SimpleMDE in Aktion

Leider scheint die Entwicklung in den letzten Monaten etwas eingeschlafen sein. So sind derzeit 17 Pull Request offen, welche auf ihren Merge warten. Der letzte Commit, im development-Branch des Projektes, ist vom Mai 2017. Der Quelltext der Editors ist auf GitHub zu finden. Lizenziert ist der Quelltext unter der MIT-Lizenz und damit freie Software. Die offizielle Projektseite ist simplemde.com.

Freies HTML5 Soundboard

Für einen Pen & Paper-Abend war ich auf der Suche nach einem freien und technisch simplem Soundboard. Idealerweise sollte dieses auf HTML5-Techniken basieren. Ein Soundboard welches diese Kriterien erfüllte, wollte sich allerdings nichts finden lassen, sodass ich selber tätig wurde. Herausgekommen ist ein simples und einfach zu konfigurierendes Soundboard.

Das Soundboard in Aktion

Zur Nutzung des Soundboard müssen die Soundclips in den assets-Ordner kopiert werden und dazu eine passende boards.json-Datei geschrieben werden. Ein Beispiel dieser Datei befindet sich im Repository. Anschließend kann das Soundboard im Browser genutzt werden. Soundclips können einzeln oder in einer Schleife abgespielt werden. Für jeden Clip lässt sich daneben die Lautstärke einzeln regeln. Auch das Abspielen von mehreren Clips parallel ist kein Problem. Zu finden ist das Soundboard auf GitHub. Lizenziert ist es unter der AGPL in der Version 3 und somit freie Software.

Unterschiedliche Views in einer Single Page Application

Für ein kleineres Projekt habe ich vor einiger Zeit eine HTML5-Single-Page-Application entwickelt und stand dann vor dem Problem wie ich unterschiedliche Views innerhalb dieser Seite realisiere. Da ich möglichst ohne schwerfälliges Framework auskommen wollte, habe ich mich für eine Lösung mittels jQuery entschieden. Im HTML habe ich dazu mehrere Views definiert:

<div id="options" class="widget" style="display: none">
</div>

<div id="game" class="widget">
</div>

Der Inhalt des div-Elements mit der Id options ist dabei standardmäßig ausgeblendet. Nun kann die Ansicht der beiden Views mittels der Funktion switchView gewechselt werden:

switchView() {
	  
    if(this.activeView==this.Views.Game) {
        $("#game").css({"display": "none"});
        $("#options").css({"display": "block"});
        this.activeView = this.Views.Options;
    }
    else if (this.activeView==this.Views.Options) {
        $("#options").css({"display": "none"});
        $("#game").css({"display": "block"});
        this.activeView = this.Views.Game;
    }
}

In der Funktion wird das CSS der jeweiligen div-Elemente manipuliert. Dadurch wird die Sichtbarkeit der Blöcke gewechselt und man hat eine einfache View Umschaltung realisiert.

Enums unter JavaScript

Enums gibt es unter JavaScript nicht. Damit könnte der Artikel an dieser Stelle vorbei sein. Allerdings gibt es viele Wege um in JavaScript ein Verhalten oder die Strukturen zu simulieren, die am Ende gewünscht sind. Bei einem Enum würde dies so aussehen:

var DayOfTheWeek = {
  Monday: 1,
  Tuesday: 2,
  Wednesday: 3,
  Thursday: 4,
  Friday: 5,
  Saturday: 6,
  Sunday: 7
};

Genutzt wird das ganze dann so:

var dayOfTheWeek = DayOfTheWeek.Thursday;

Wer mehr über die Hintergründe rund um Enums unter JavaScript erfahren möchte dem sei der ausgezeichnete Blogbeitrag Enums in Javascript empfohlen.