Simple-Game-Solutions WebGUI

[AmigaMaster]

Ich führe seit einigen Jahren eine Art "Spieletagebuch" in der Form von Lösungen, die ich in einem Github Repository unter https://github.com/AmigaMaster/Simple-Game-Solutions pflege. Warum ich das mache, wird ganz gut in dortigem Readme dargestellt.

Ich habe Anfang der Woche angefangen an einem GUI für das Repo zu arbeiten. Das ist jetzt kein Projekt speziell auf Maniac Mansion Mania bezogen aber ein guter Anteil der Lösungen im Repo sind für die MMM Episoden inklusive aller Spinoffs.

Nach kurzem Alphatest möchte ich exklusiv hier im Forum die erste Betaversion präsentieren:

https://amigamaster.github.io/Simple-Game-Solutions

Rückmeldungen gerne hier in den Thread.

Die Grundfunktionen:

• Schnelle und einfache Anzeige aller Lösungen aus Simple-Game-Solutions, ohne über die Github Seite zu gehen und sich dort durchzuklicken
• Echtzeit-Suchfunktion nach Dateinamen
• Dateibrowser
• Hoffentlich vernünftige Anzeige und Bedienung auf dem Smartphone (da kämpfe ich noch mit) und dnymisches Umschalten zwischen Desktop- und Smartphone-Darstellung
• Direktlinks zu jeder Lösung und Kapitelmarke möglich, Beispiel meine Lieblingsepisode
• Fortschrittsanzeige in der Leseansicht, damit man weiß, ob man besser zu Bett gehen sollte oder kurz vor dem Ende ist
• Lösungsverzeichnis und Kapitelansicht getrennt voneinander zu- und abschaltbar

Desktopansicht:
Sie dürfen diesen Dateianhang nicht ansehen.

Smartphone:
Sie dürfen diesen Dateianhang nicht ansehen.

Wer sich für die Technik dahinter interessiert:
Der gesamte Quelltext ist im Github Repo einsehbar. Im Großen und Ganzen ist das eine statische HTML-Seite, die nur einen Markdown-Reader und die Markdown-Textdateien nachlädt und darstellt. Bei mir funktioniert das sogar lokal im Browser, wenn ich mir den Quelltext des Repos runterlade und die index.html über file:/// öffne. Dann braucht man den Internetzugriff nur noch für den Markdown-Reader. Den Rest übernimmt Github Actions, die über die Github Server ein Python-Script ausführen, um eine für das GUI notwendige Metadaten-Datei und die Webseitedateien zu erstellen - alles komplett kostenlos.

[AmigaMaster]

Neue Betaversion mit neuen Funktionen:

1. Filterung der Lösung nach Stichworten
So als echter Adventurespieler möchte man ja eigentlich gar nicht in die Lösung schauen, vielleicht liest man dann etwas, was man gar nicht wissen wollte. Daher kann man jetzt nach dem Aufruf einer Lösung nach Wörtern in der Lösung suchen und es werden nur Absätze und Aktionen angezeigt, in denen das/die Suchbegriffe vorkommen.

Sie dürfen diesen Dateianhang nicht ansehen.

Das Beispielbild hier zeigt den Auszug aus dem Spiel The Abbey mit der Suche nach "Krypta UND Schlüssel" und die 4 Aktionen, in denen beide Begriffe vorkommen. Ich fand es schon immer blöd, wenn man in einer ganzen Lösung danach sucht und dann natürlich auch ganz andere Aktionen findet, die man auch noch nicht gemacht hat, um dessen Rätsel man sich dann selbst betrogen hat, nur weil man eine andere Sache suchen wollte.

Die jeweiligen gefilterten Absätze und Aktionen können dann angeklickt werden um dann an die entsprechende Stelle in der Gesamtlösung zu springen.

2. Hervorhebung von Datei und Kapiteln
Die gerade geöffnete Datei und alle auf der Seite sichtbaren Kapitel werden in den Sidebars zur besseren Orientierung jetzt hervorgehoben.

3. Das Kopieren von Links beinhaltet jetzt auch die Ansichtsoptionen, also welche Filter und welche Suche gerade aktiv war. Beispiellink, der genau die Seite aus dem Screenshot aufruft https://amigamaster.github.io/Simple-Game-Solutions/index.html?file=T%2FThe%20Abbey-DE.md&filter=Krypta%20UND%20schl%C3%BCssel&search=the%20ab#heading-111

Bekannte Fehler:
Beim Einsatz des Lösungsfilters stimmen die Hervorhebungen in der Kapitel Sidebar nicht. Muss noch schauen, was hier Sinn macht. Ich vermute, ich werde die Hervorhebung dann deaktivieren.

[AmigaMaster]

Noch ein paar meiner Ideen umgesetzt:

Generelles:

Da sämtliche Daten nur lokal in Eurem Browser gespeichert werden, sind die Komfort-Features nicht einfach auf andere Geräte übertragbar. Wenn ihr also auf einem Gerät alle News als gelesen markiert habt, dann sind die auf einem zweiten Gerät wieder ungelesen. Ich kann und möchte aber keinerlei Eurer Daten auf dem Server speichern, das wird bei Github Pages auch gar nicht funktionieren.

Neue Funktionen:

• Das GUI merkt sich, welche Datei zuletzt geöffnet war und öffnet diese beim nächsten Aufruf der Seite automatisch.
• Wenn man eine Lösung öffnet, springt diese jetzt exakt an die Position, an der man sie verlassen hat. Man weiß also genau wo man zuletzt war.
• Beim Öffnen einer Lösung wird der entsprechende Verzeichnisbaum ausgeklappt und zur Datei gesprungen.
  
• Die 20 zuletzt geöffneten Lösungen werden auf der Startseite unter "Zuletzt benutzt" angezeigt.
• Badge zur Anzeige der Anzahl ungelesener neuer / aktualisierter Lösungen.
• Die Schriftgröße kann angepasst werden. Insbesondere für Smartphone-Ansicht hilfreich.
• Eingestellte Sprache und Schriftgröße werden gespeichert.

Optimierungen / Fehlerbehebungen:

• Autofokus für Such- und Filterfeld in der Smartphone-Ansicht deaktiviert.
• Kapitel werden nun nicht mehr hervorgehoben, wenn man die Lösung nach Begriffen gefiltert hat.
• Copy-Link Button in der Kapitelansicht ist in der Desktopansicht wieder sichtbar
• Icon für die Startseite wird jetzt auch in der Smartphoneansicht angezeigt

Neue Startseite mit ungelesenen Nachrichten und zuletzt geöffneten Dateien:
Sie dürfen diesen Dateianhang nicht ansehen.

Schriftgröße im Lesepanel anpassen:
Sie dürfen diesen Dateianhang nicht ansehen.