JetLag Hide N Seek Map

Ein kleines Spring-Boot/Maven-System für JetLag-The-Game-ähnliche Hide-&-Seek-Kartenfragen mit OpenStreetMap/Leaflet.

Features

• Leaflet-Karte mit OpenStreetMap-Tiles
• Radius: Kreis um einen Punkt
• Nearest: zwei Punkte plus Distanzanzeige
• Antwortvorschau mit zwei auswählbaren Zuständen: Rot und Grün
• Punkt-Menü mit einem Eintrag pro Punkt
• Button „an Nutzerposition“ kopiert die aktuelle Nutzerposition in den Punkt
• Kein Tracking-Lock: Wenn sich der Nutzer bewegt, bleibt der Punkt unverändert
• Fragenverwaltung: anzeigen, bearbeiten, löschen, Antwort setzen/zurücksetzen
• Mobile-freundliches Layout
• Persistenz in data.json
• Konfiguration über config.json, inklusive Startzone als [[lat,lng], ...]

Starten

./mvnw spring-boot:run

Dann öffnen:

http://localhost:8081

Dateien

Beim ersten Start werden im Arbeitsverzeichnis automatisch erzeugt:

• data.json — gespeicherte Fragen
• config.json — Webserver-Port, Startzone und Kartenstart

Beispiel config.json:

{
  "startZone" : [
    [47.3831, 8.5324],
    [47.3831, 8.5524],
    [47.3701, 8.5524],
    [47.3701, 8.5324]
  ],
  "initialCenter" : { "lat" : 47.3769, "lng" : 8.5417 },
  "initialZoom" : 13,
  "serverPort" : 8081,
  "options" : { "usUnits" : false }
}

REST API

• GET /api/config — lädt config.json
• GET /api/state — lädt data.json
• PUT /api/state — ersetzt den vollständigen Zustand in data.json

Hinweise

Browser-Geolocation funktioniert in modernen Browsern nur auf https:// oder lokal auf localhost. Für den Einsatz im lokalen WLAN empfiehlt sich ein Reverse Proxy mit HTTPS oder ein Tunnel mit HTTPS.

Version v3

• Fix für kaputte/versetzte Leaflet-Kacheln: lokaler Leaflet-CSS-Fallback und keine Überschreibung der internen Pane-Positionierung.
• Zusätzliche invalidateSize()-Aufrufe nach Laden, Resize und Orientation-Change.
• UI läuft standardmäßig auf Port 8081; der Port kann in config.json über serverPort geändert werden.

Version v4

• Der globale Button „Punkt auf Kartenmitte“ wurde entfernt; Punkte werden nur noch direkt in ihrer jeweiligen Punktkarte gesetzt.
• Die Spielzone wird als invertierte schwarze Maske dargestellt: alles außerhalb der konfigurierten Zone ist abgedunkelt.
• Radius-Fragen zeigen jetzt feste Bedeutungen: Grün = innerhalb des Radius, Rot = außerhalb des Radius. Nach Auswahl wird die nicht eingetretene Seite schwarz abgedunkelt.
• config.json unterstützt "options": { "usUnits": true } für Fuß/Meilen in der Oberfläche. Intern werden Distanzen weiter in Metern gespeichert.

Beispiel mit US-Einheiten:

{
  "startZone" : [
    [47.3831, 8.5324],
    [47.3831, 8.5524],
    [47.3701, 8.5524],
    [47.3701, 8.5324]
  ],
  "initialCenter" : { "lat" : 47.3769, "lng" : 8.5417 },
  "initialZoom" : 13,
  "serverPort" : 8081,
  "options" : { "usUnits" : true }
}

Version v5

• Die Buttons „Aktiv“ und „Auswählen“ in den Punktkarten wurden entfernt. Eine Punktkarte wird jetzt durch Antippen/Anklicken aktiviert.
• Nearest hat jetzt die gleiche Vorschau-Logik wie Radius:
  • Grün = Gebiet näher an Punkt 1
  • Rot = Gebiet näher an Punkt 2
  • Die Teilung liegt auf der Mittelsenkrechten der Verbindungslinie zwischen den beiden Punkten.
  • Nach Auswahl wird die nicht eingetretene Seite schwarz abgedunkelt.

Version v6

• Fragen sind jetzt in drei Tabs organisiert:
  • Erstellen: aktuelle Frage bauen und speichern.
  • Gespeichert: unbeantwortete Fragen mit Rot, Grün, Anschauen und Löschen.
  • Antworten: beantwortete Fragen mit Bearbeiten, Anzeigen und Löschen.
• Eine Frage wandert erst nach Auswahl von Rot oder Grün von Gespeichert nach Antworten.
• Bearbeiten bei beantworteten Fragen setzt die Antwort zurück und verschiebt die Frage zurück nach Gespeichert.
• Auf der Karte wird immer nur eine Frage gleichzeitig angezeigt: im Erstellen-Tab die aktuelle Frage, in den anderen Tabs die zuletzt angezeigte Frage.

Update v7

• Die aktuelle Spielzone wird jetzt in allen Tabs dauerhaft angezeigt, auch beim Erstellen neuer Fragen.
• Beantwortete Fragen schränken die Spielzone global ein: Die ausgeschlossene Seite wird schwarz maskiert.
• Die aktive Vorschau zeigt nur noch die aktuell ausgewählte/erstellte Frage; alte rote/grüne Flächen werden beim Rendern vollständig entfernt.
• Bei beantworteten Fragen wird nur die gewählte Antwort farbig angezeigt, die falsche Seite kommt aus der schwarzen Spielzonen-Maske.

Änderungen v8

• Ausgeschlossene Flächen werden jetzt deckend schwarz gezeichnet, damit sich überlappende Einschränkungen nicht mehr immer weiter abdunkeln.
• Auf kleinen Bildschirmen ist das Bedienpanel ein Bottom-Sheet über der Karte. Es kann nach oben gezogen werden und scrollt erst, wenn es oben angekommen ist.
• Das Zentrieren von Radius-Fragen nutzt jetzt direkt die Kreis-Bounds und berücksichtigt das überlagernde Mobile-Panel.

Änderung v9

• Der Button oben heißt jetzt „Spielzone zentrieren“ und springt nicht mehr zur Nutzerposition.
• US-Einheiten verwenden jetzt Meilen statt Fuß.
• Ausgeschlossene Bereiche sind wieder halbtransparent, werden bei Überlappung aber nicht dunkler.
• Das mobile Bottom-Sheet startet fast ganz unten, sodass nur der Griff sichtbar ist.

Änderung v10

• Im Tab Gespeichert bleibt keine Vorschau aus Antworten mehr hängen; beim Tabwechsel wird die aktive Anzeige auf Fragen des jeweiligen Tabs begrenzt.
• Neuer Fragetyp Polygon:
  • beliebig viele Ecken, mindestens drei
  • Grün = innerhalb des Polygons
  • Rot = außerhalb des Polygons
  • nach der Antwort wird die jeweils falsche Seite wie bei Radius aus der Spielzone ausgeschlossen.

Spiel zurücksetzen

Im Tab Antworten gibt es unten den Button Spiel zurücksetzen. Er entfernt alle Antworten und verschiebt die Fragen zurück in Gespeichert; die Fragen selbst bleiben erhalten.

Änderung v12

• „Spiel zurücksetzen“ leert jetzt die Fragenliste komplett, als wäre data.json leer.
• Cache-Busting auf v=12.

Version v13

• Der Webserver-Port wird jetzt aus config.json gelesen.
• Neue Option auf oberster Ebene: "serverPort" : 8081.
• application.properties enthält keinen festen server.port mehr.

Beispiel:

{
  "serverPort" : 8081,
  "startZone" : [
    [47.3831, 8.5324],
    [47.3831, 8.5524],
    [47.3701, 8.5524],
    [47.3701, 8.5324]
  ],
  "initialCenter" : { "lat" : 47.3769, "lng" : 8.5417 },
  "initialZoom" : 13,
  "options" : { "usUnits" : false }
}

Version v14

• Mehrere Clients synchronisieren sich jetzt automatisch per WebSocket.
• Neuer WebSocket-Endpunkt: /ws/state.
• Jede Änderung über PUT /api/state wird nach dem Speichern an alle verbundenen Browser übertragen.
• Clients laden beim WebSocket-Reconnect den aktuellen Stand erneut, damit verpasste Änderungen nachgeholt werden.
• Cache-Busting auf v=14.

Version v15

• Das Projekt verwendet Maven als Build-System.
• Das mobile Bottom-Sheet besitzt einen eigenen Chromium-kompatiblen Ziehbereich sowie Bedienung per Tippen und Tastatur.
• Cache-Busting auf v=15.

Version v16

• Zusätzlicher Abstand verhindert, dass der Button „Frage speichern“ die Punktkarte überlappt.
• Aktionsbuttons können auf schmalen Chromium-Ansichten korrekt schrumpfen, ohne aus ihren Karten herauszuragen.
• Cache-Busting für die Styles auf v=16.

Version v17

• „Spielzone zentrieren“ berücksichtigt jetzt alle beantworteten Radius-, Nearest- und Polygon-Fragen.
• Der Kartenausschnitt wird auf die tatsächlich verbleibende Spielzone angepasst.
• Cache-Busting für das App-Skript auf v=17.

Version v18

• Das mobile Bottom-Sheet rastet nach einer Wischbewegung vollständig oben oder unten ein.
• Der Wechsel zwischen beiden Positionen wird weich animiert.
• Cache-Busting auf v=18.

Version v19

• Die Kopfleiste ist kompakter; der Untertitel wurde entfernt.
• Manifest, App-Symbol und Service Worker machen die Anwendung als PWA installierbar.
• Der Service Worker speichert die lokale Anwendungshülle für schnellere Folgestarts zwischen.
• Cache-Busting auf v=19.

Version v20

• Installierte Chromium-PWAs starten im echten Vollbildmodus.
• display_override behält standalone als Rückfalloption für Browser ohne Vollbildunterstützung bei.
• Der PWA-Cache wurde auf v20 aktualisiert.