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 der Host-Seite einbinden: b) Den Block aus launch-snippet.html direkt nach einfuegen. c) Falls der Ordner NICHT eine Ebene unter der Host-Seite liegt: im Snippet den Pfad-Prefix "fortnite-experience/" anpassen (bei href des UND bei src des ). 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.