154 lines
6.2 KiB
Text
154 lines
6.2 KiB
Text
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.
|