AIreadme.txt
=================

Ziel
----
Dieser Ordner ist eine fertige, statische Mini-Webapp mit 2 Spielmodi rund um Fortnite:
1) Guess the Collab (Ja/Nein + Enzyklopädie)
2) Guess the Price (Skin-Preisraten)

Die App ist dafür vorbereitet, als abgegrenzte Unterseite auf einem Server zu laufen.


Wichtige Laufzeitdateien (MUSS bleiben)
---------------------------------------
- index.html
- collab_game.html
- price_game.html
- app.js
- style.css
- skins.js
- images/  (kompletter Ordner mit Collab-Bildern)

Launcher / Einstiegs-GIF (gehoert jetzt AUCH in diesen Ordner)
--------------------------------------------------------------
- fortnitegif.gif      -> das anklickbare Vorschau-GIF (Einstieg)
- launch.css           -> eigenstaendiges CSS fuer den schwebenden Einstiegs-Button
- launch-snippet.html  -> fertiger HTML-Block zum Einfuegen in eine Host-Seite
- launcher-demo.html   -> Test-/Demo-Seite; zeigt den Button ordner-lokal

Damit ist der gesamte Fortnite-Einstieg (GIF + Button + Spiele) in DIESEM
Ordner gebuendelt und kann als Ganzes auf einen anderen Server gezogen werden.

Ohne diese Dateien funktioniert die App nicht vollstaendig.


Startpunkte / Routing
---------------------
- Hauptmenü: index.html
- Direkt ins Collab-Spiel: collab_game.html#game
- Direkt in die Enzyklopädie: collab_game.html#encyclopedia
- Direkt ins Preis-Spiel: price_game.html

Hinweis:
`collab_game.html` hat KEINEN alten Startscreen mehr. Es startet direkt per Hash-Route.


Wie die Spiele funktionieren
----------------------------
A) Guess the Collab (collab_game.html + app.js + style.css + images/)
- Frageformat: "Ist das in Fortnite?" mit Realbild.
- Antwort-Flow: Ja/Nein -> Feedback mit Fortnite-Bild und Infos.
- Ergebnisseite mit Statistik.
- Enzyklopädie-Ansicht mit Kategorien/Filter und Detail-Modal.
- Enzyklopädie-Header hat keinen zusätzlichen Zurück-Button (bewusst entfernt).

B) Guess the Price (price_game.html + skins.js)
- Zeigt zufällige Skins aus SKINS (in skins.js).
- Antwortbuttons für 500 / 800 / 1200 / 1500 / 2000 V-Bucks.
- Nach Antwort: Auflösung inkl. Europreis (1000 VB = 8,99 €).
- Zufall mit Gewichtung:
  - 500 VB: 16%
  - 800/1200/1500/2000 VB: jeweils 21%
- No-repeat Fenster: Ein bereits gezeigter Skin darf erst nach 50 weiteren wieder auftauchen.
- "Nächster Skin" ist als fixer Top-Button erreichbar (ohne Scrollen).


Deployment-Hinweis für die "rote Button Unterseite"
---------------------------------------------------
Falls diese App in eine bestehende Website eingebaut wird:
- Lege diesen Ordner als eigenen Unterpfad ab, z. B.:
  /fortnite-experience/
- Der rote Button der Hauptwebsite soll auf diesen Einstieg zeigen:
  /fortnite-experience/index.html

WICHTIG (Relative Pfade):
- Alle internen Links sind relativ (z. B. collab_game.html, price_game.html, images/...).
- Deshalb muss die App als kompletter zusammenhängender Ordner deployed werden.
- Nicht einzelne Dateien aus dem Kontext reißen.


RAUS- / REINKOPIEREN DES ORDNERS (Portabilitaet)
------------------------------------------------
Ziel: Diesen Ordner 1:1 auf einen anderen Server ziehen und sofort
weiterarbeiten koennen - inklusive dem anklickbaren Einstiegs-GIF.

Was mitgenommen wird (alles bereits in diesem Ordner):
- Die komplette Mini-Webapp (index.html, Spiele, app.js, style.css, skins.js, images/)
- Das Einstiegs-GIF               -> fortnitegif.gif
- Das Launcher-CSS                -> launch.css
- Das Einfuege-Snippet            -> launch-snippet.html
- Eine Demo-/Testseite            -> launcher-demo.html

RAUSKOPIEREN (aus diesem Projekt heraus):
1) Den GESAMTEN Ordner /fortnite-experience/ kopieren - nichts einzeln.
2) Fertig. Es gibt keine Abhaengigkeiten mehr nach ausserhalb des Ordners
   (das GIF liegt jetzt lokal hier, nicht mehr nur im Projekt-Root).

REINKOPIEREN (auf einem neuen Server / neuen Projekt):
1) Ordner z. B. unter  /fortnite-experience/  ablegen.
2) Schnelltest ohne Host-Seite:  launcher-demo.html  im Browser oeffnen
   -> links muss das schwebende GIF erscheinen und in die Experience fuehren.
3) In eine bestehende Host-Seite einbauen:
   a) Im <head> der Host-Seite einbinden:
        <link rel="stylesheet" href="fortnite-experience/launch.css">
   b) Den Block aus  launch-snippet.html  direkt nach <body> einfuegen.
   c) Falls der Ordner NICHT eine Ebene unter der Host-Seite liegt:
      im Snippet den Pfad-Prefix "fortnite-experience/" anpassen
      (bei href des <a> UND bei src des <img>).

HINWEIS zum alten Einbau im Ur-Projekt (nur zur Info):
- Frueher lag das GIF im Projekt-Root (../fortnitegif.gif) und die
  Launcher-Styles steckten in der grossen css/style.css der Hauptseite.
- Beides ist jetzt zusaetzlich HIER im Ordner vorhanden, damit der Ordner
  eigenstaendig ist. Beim Rauskopieren muss man daher NICHTS mehr aus dem
  Root oder aus css/style.css mitnehmen.


Schnelle Server-Checks nach Upload
----------------------------------
Mindestens diese URLs auf HTTP 200 prüfen:
- /fortnite-experience/index.html
- /fortnite-experience/collab_game.html#game
- /fortnite-experience/collab_game.html#encyclopedia
- /fortnite-experience/price_game.html
- /fortnite-experience/fortnitegif.gif   (Einstiegs-GIF)
- /fortnite-experience/launch.css        (Launcher-Styles)
- /fortnite-experience/launcher-demo.html (Launcher-Vorschau)

Manuelle Smoke-Checks:
1) launcher-demo.html oeffnen -> schwebendes GIF links sichtbar, fuehrt zu index.html
2) Von index -> Guess the Collab klickbar
3) Von index -> Guess the Price klickbar
4) Enzyklopädie öffnet direkt über #encyclopedia
5) Bilder in collab_game laden (images/*)
6) skins.js lädt in price_game
7) Top-Button "Nächster Skin" erscheint nach jeder Antwort


Nicht anfassen / typische Fehler
--------------------------------
- Dateinamen nicht ändern, sonst brechen relative Links.
- images/ nicht teilweise löschen.
- skins.js nicht umbenennen.
- fortnitegif.gif / launch.css nicht umbenennen (sonst bricht der Einstieg).
- Keine Basis-URL erzwingen, wenn die App im Unterpfad läuft.


Kurzfazit
---------
Wenn dieser Ordner 1:1 auf den Server kopiert wird, ist ALLES dabei:
die beiden Spiele UND der anklickbare GIF-Einstieg. Zum Testen
launcher-demo.html oeffnen; zum Einbauen launch.css + launch-snippet.html
in die Host-Seite uebernehmen. Nichts muss mehr aus dem Ur-Projekt-Root
oder aus dessen css/style.css mitgenommen werden.
