Alvi Challenges

Website für Alvis Fortnite-Challenges: konstruieren, auswürfeln, abstimmen und tracken. Gespielt wird in Fortnite. Die Seite wird per Screen-Share im Stream oder Video gezeigt.

Seite	Funktion
/	Lobby im Fortnite-Stil: Alvi und die Top-3 der Creator-Liga als Party (Skin-Bilder unter /admin?tab=liga, sonst Profilbild), Aufträge & Stats, Kanäle, Support-a-Creator, Live-Hinweis und der ausgewählte Modus mit SPIELEN-Button (Auswahl wird im Browser gemerkt)
/entdecken	Entdecken: alle Modi als Karten wie die Map-Auswahl in Fortnite (Feature-Banner, Reihen, Info-Fenster mit „Spielen“ und „In Lobby auswählen“). Eigene Vorschaubilder je Modus unter /admin?tab=seite, sonst gezeichnete
/rad	Challenge-Glücksrad: alle Regeln gleich wahrscheinlich, mehrfach drehen stapelt die Regeln
/loadout	Loadout-Würfel: 5 Slots aus dem Loot-Pool der aktuellen Season, mit Item-Bildern. Slots sperren oder einzeln neu würfeln, Raritäts-Filter, Heilung garantiert, jedes Item nur einmal. Solo oder Mehrspieler (jeder würfelt sein eigenes Loadout)
/drop	Drop-Spot-Roulette: zufälliger Landebereich (Kreis um einen der gesetzten Spots, Größe per Regler) plus Zusatzregel. Mit mehreren Spielern (Namen eintippen) bekommt jeder seinen eigenen, farbigen Kreis, ohne Überschneidung
/bingo	Bingo: Mehrspieler auf einer gemeinsamen 3×3-Karte – jeder hakt für sich ab. Karten mit eigenen Aufgaben erstellt jeder mit Twitch-Login (/bingo/karten), getrennt in die Ordner Admin-Karten und Zuschauer-Karten. Punkte: 1 pro Feld, +3 pro Bingo; höchste Punktzahl gewinnt. Zwei OBS-Overlays (Karte, Rangliste)
/auktion	Loot-Auktion: 4 Creator mit je 500 Gold bieten verdeckt am eigenen Gerät auf zufällige Items. Der Höchstbieter gewinnt, bei Gleichstand entscheidet das Los. Haben alle geskippt, wird das Item verworfen. Gespielt wird, bis jeder 5 Items hat. Am Ende gibt es eine Loadout-Übersicht als Bild
/eskalation	Regel-Eskalation: Grundregel per Glücksrad, danach kommt alle 4 Minuten (einstellbar) eine neue Zufallsregel dazu, mit Alarm-Ton. Die Regelkachel gibt es als OBS-Overlay
/winchallenge	Winchallenge: Spiele mit je einer Zahl benötigter Siege, gemeinsamer Countdown (oder ohne Zeitlimit). Siege per +1/−1 zählen, Timer starten/pausieren, Spiele unterwegs ergänzen. Schlichtes OBS-Overlay unter /overlay/winchallenge (immer die neueste Winchallenge). Geschafft = alle Ziele erreicht
/olympiade	Olympiade: Spiele per Textfeld eintragen, sie landen auf einem Glücksrad (gleiche Chancen, jedes Spiel nur einmal). Lobby mit Twitch-Login (mind. 2 Spieler), der Host dreht, gespielt wird extern, dann markiert der Host genau einen Sieger. Punkte steigen: 1. Spiel 1 Punkt, 2. Spiel 2 Punkte usw. Kleine Punkteanzeige als OBS-Overlay (/overlay/olympiade)
/liga	Creator-Liga: Challenges, die die Creator außerhalb der Website spielen. Admins tragen sie unter Admin → Creator-Liga ein (Titel, YouTube-Link Pflicht, Kategorie, Datum, Sieger und optional Plätze, Teilnehmer aus der Creator-Liste – auch ohne Login; jeder Creator mit verlinktem YouTube-Kanal, Profilbild wird automatisch vom Kanal übernommen). Eine ewige Tabelle nach Ligapunkten = geschlagene Gegner (1 Punkt für jeden, der hinter einem landet: bei 8 Teilnehmern Sieger 7 … Letzter 0, im Duell Sieger 1; gleiche Plätze teilen sich den Platz), Kuchendiagramm „Anteil an allen Siegen“, Verlauf der Ligapunkte, Kopf-an-Kopf-Vergleich
/stats	Challenge-Stats (über das Menü) mit zwei Tabs: 👥 Spieler – oben Alvis Kurzbilanz, darunter die Tabelle mit allen, die bei Challenges dabei waren (Teilnahmen, Siege, Siegquote, bei Bingo Punkte gesamt und Ø; Alvis Solo-Challenges zählen mit, geschafft = Sieg; Filter je Spiel, Spalten sortierbar) – und 🎮 Alvi – Erfolgsquote, Serien, Aufschlüsselung je Tool, Liste aller Challenges
/admin	Glücksrad, Loot-Pool (inkl. neue Season), Drop-Spots/Map, Bingo-Aufgaben, Drop-Regeln, Ergebnisse eintragen, Nutzer (Twitch-Accounts sperren/entsperren)

Stack: Next.js 15 (App Router), TypeScript, Tailwind CSS 4, framer-motion, Supabase (Postgres + RLS, Auth mit Twitch, Realtime, Storage).

Lokale Entwicklung

npm install
cp .env.example .env.local   # Supabase-URL + Publishable Key
npm run dev                  # http://localhost:3000

Checks: npm run lint, npm run typecheck, npm test (Vitest), npm run build.

Einrichtung (einmalig)

1. Supabase

Das Projekt Alvi (bvkpbqsmwmaczqfxvvgn, eu-central-1) ist schon angelegt. Migrationen und Startdaten sind eingespielt. Für ein neues Projekt spielst du supabase/migrations/*.sql in dieser Reihenfolge ein und danach supabase/seed.sql.

Datenbank-Änderungen gehen automatisch live: Die GitHub Action .github/workflows/supabase-migrations.yml spielt bei jedem Push auf claude/alvi-challenge-website, der supabase/migrations/ ändert, die neuen Migrationen per supabase db push ein. Schon eingespielte werden übersprungen (Tabelle supabase_migrations.schema_migrations). Manuell starten: GitHub → Actions → „Supabase-Migrationen“ → Run workflow. Dafür muss das Repository-Secret SUPABASE_DB_URL gesetzt sein: Supabase-Dashboard → Connect → Session pooler → Verbindungs-URI kopieren und [YOUR-PASSWORD] durch das Datenbank-Passwort ersetzen (Sonderzeichen im Passwort URL-kodieren).

2. Twitch-Login

1. Unter https://dev.twitch.tv/console/apps eine Anwendung registrieren.
   • OAuth-Redirect-URL: https://bvkpbqsmwmaczqfxvvgn.supabase.co/auth/v1/callback
   • Kategorie: Website Integration
2. Im Supabase-Dashboard unter Authentication → Sign In / Providers → Twitch den Provider aktivieren und Client-ID und Client-Secret eintragen.
3. Unter Authentication → URL Configuration die Site-URL (z. B. https://alvi.vercel.app) eintragen. Dazu kommen als Redirect-URLs https://<deine-domain>/auth/callback und für lokal http://localhost:3000/auth/callback.

3. Admins festlegen

Admin-Rechte vergibt eine Liste von Twitch-Namen in der Tabelle admin_logins. Wer dort steht, wird beim ersten Twitch-Login automatisch Admin. Hat er sich schon eingeloggt, wird er sofort befördert. flobasstico und alvivb sind bereits eingetragen. Weitere Admins trägst du im Supabase SQL-Editor so nach (Twitch-Name kleingeschrieben):

insert into public.admin_logins (twitch_login) values ('twitch_name');

4. Deployment (Vercel)

Das Repo in Vercel importieren und die Umgebungsvariablen NEXT_PUBLIC_SUPABASE_URL und NEXT_PUBLIC_SUPABASE_ANON_KEY setzen (Werte wie in .env.example).

Ablauf im Stream

• Kleine OBS-Anzeigen für Loadout-Würfel und Drop-Spot: Jeder mit Twitch-Login hat einen eigenen festen Link (aufklappbar unter „📺 OBS-Overlay“ auf der Seite): /overlay/loadout/<twitch-name> zeigt das zuletzt gewürfelte Loadout als kleine Hotbar, /overlay/drop/<twitch-name> den Landespot (bei mehreren Spielern jeder mit Farbe) und die Zusatzregel. Beide aktualisieren sich bei jedem Wurf live; Hintergrund transparent.

• Nachspielen: Abgeschlossene Challenges lassen sich identisch nachspielen – Button „🔁 Nachspielen“ auf der Runden-Seite bzw. in den Stats (Tab Alvi). Regel-Eskalation: exakt gleiche Grundregel und Zusatzregeln in gleicher Reihenfolge und Taktung. Winchallenge: gleiche Spiele, Ziel-Siege und Timer. Glücksrad und Drop-Spot: zeigen Alvis Regeln bzw. Landekreise. Bingo: „Nochmal mit dieser Karte“. Loot-Auktion und Loadout-Würfel haben keine Nachspiel-Option. Wer nachspielt (Twitch-Login), ist Host seiner Kopie und lädt Freunde per Link ein. Nur Runden, bei denen mindestens ein Admin mitmacht, erscheinen in Übersichten und Stats; alle anderen werden beim Beenden gelöscht. Alvis fester OBS-Link der Winchallenge zeigt nie Nachspiel-Runden von Zuschauern.

• Spieleranzahl: Loot-Auktion, Regel-Eskalation und Loadout-Würfel (Mehrspieler) haben beim Eröffnen das Feld „Spieler (max.)“ (2–8, Standard 4). Sind alle Plätze belegt, kann niemand mehr beitreten.

• Rad, Loadout und Drop: Als Admin erscheinen nach dem Wurf die Buttons „Challenge starten“ und „Für später merken“. Das Ergebnis (geschafft/gescheitert, Video-Link) trägst du unter /admin ein.

• Bingo: Unter /bingo/karten erstellt jeder (Twitch-Login) eigene 3×3-Karten; sie heißen automatisch wie die Person (mehrere Karten werden durchnummeriert: „Kevin“, „Kevin 2“ …) – Karten von Admins im Ordner „Admin-Karten“, alle anderen unter „Zuschauer-Karten“. „Leere Felder zufällig füllen“ nutzt den Aufgaben-Pool aus /admin?tab=bingo. Eine Runde startet über „+ Neue Runde“: zuerst die Karte wählen oder neu erstellen, dann Lobby öffnen (Spieler max. 2–8), Mitspieler treten per Link bei, der Host startet. Alle spielen dieselbe Karte, jeder hakt seine eigenen Felder an. Punkte: 1 pro Feld, +3 pro Bingo (Reihe, Spalte, Diagonale), maximal 33. Der Host beendet die Runde, die höchste Punktzahl gewinnt (bei Gleichstand alle). Spielt Alvi mit, kommt die Runde in seine Quote: geschafft mit voller Karte. Runden ohne Admin werden nach dem Ende gelöscht. „🔁 Nochmal mit dieser Karte“ startet eine neue Lobby. OBS-Overlays (Links in der Runde, zeigen immer die neueste offizielle Runde): /overlay/bingo/karte (Alvis Karte, sonst die des Hosts) und .

Sicherheit

Löschen: Admins sehen auf jeder Runden-Seite (Eskalation, Loadout, Auktion, Bingo, Winchallenge, Olympiade) „🗑 Runde löschen“ und in den Stats (Tab Alvi) neben jeder Challenge 🗑 – gelöscht werden Runde und Stats-Eintrag zusammen.

Mehrspieler für alle: Regel-Eskalation, Loadout-Würfel, Loot-Auktion, Bingo und Olympiade kann jeder mit Twitch-Login eröffnen (Chat-Abstimmung der Eskalation nur Admins). Offiziell – also in Übersichten und Stats – sind nur Runden, die ein Admin eröffnet oder bei denen ein Admin mitspielt; alle anderen werden beim Abschluss gelöscht, nicht beendete nach 2 Tagen (Olympiade 4).

Join-Code: Jede Runde mit Mitspielern (Auktion, Eskalation, Loadout, Bingo, Olympiade) hat einen 4-stelligen Code (nach 5 falschen Versuchen ist die Runde für diese Person 10 Minuten gesperrt). Host und Admins sehen ihn (verdeckt, „anzeigen“) samt „Einladungslink kopieren“ (Link enthält den Code) und brauchen selbst keinen. Alle anderen müssen ihn eingeben – die Rundenseite allein (z. B. aus dem Stream) reicht nicht. Der Code ist per API nicht lesbar.

Moderation: Bingo-Karten von Zuschauern sind erst nach Freigabe durch einen Admin für alle sichtbar (Ordner „🕓 Zu prüfen“ unter /bingo/karten); der Ersteller kann sie sofort selbst spielen. Höchstens 5 neue Karten pro Person und Tag (Admins unbegrenzt). Gesperrte Accounts (Admin → Nutzer) dürfen nur noch lesen – das erzwingt eine zentrale Prüfung vor jeder schreibenden API-Anfrage (check_request). Profile (Twitch-Name, Anzeigename, Bild) kommen ausschließlich aus der Twitch-Anmeldung. Nicht beendete Runden ohne Admin werden automatisch gelöscht: Olympiade nach 4 Tagen, Bingo, Eskalation und Winchallenge nach 2 Tagen.

Schreibrechte erzwingt die Datenbank per Row Level Security. Stammdaten und Live-Tools darf nur role = 'admin' ändern. Zuschauer dürfen eigene Bingo-Karten anlegen und Runden mitspielen; abhaken kann jeder nur auf seiner eigenen Karte, Punkte und Sieger berechnet die Datenbank beim Beenden. Bei der Loot-Auktion laufen Item-Ziehung, Gebotsprüfung (Mindestgebot, 10er-Schritte, Gold-Limit, ein Gebot pro Runde), Losentscheid, Gold-Abzug und die Auslosung am Ende komplett in Datenbankfunktionen. Fremde Gebote sind per RLS bis zur Auswertung unsichtbar.

Layout zurücksetzen

Das klassische Layout vor dem Fortnite-Umbau liegt im Branch layout-klassisch. Die Commits des Umbaus beginnen mit Fortnite-Layout: und lassen sich gezielt rückgängig machen (git revert), ohne spätere Änderungen zu verlieren.

Liga-Videos aus den Kanälen (YouTube-API)

Unter /admin?tab=liga → „Videos aus den Kanälen“ gleicht „Kanäle jetzt abgleichen“ alle Creator-Kanäle (YouTube-Link beim Creator) ab. Shorts fallen raus, Challenge-Videos werden über Stichwörter im Titel erkannt (Standard „Challenge“, im Admin erweiterbar). Jedes Video zeigt, ob es schon in der Liga steckt; „Eintragen“ füllt das Formular vor, „Ausblenden“ entfernt unpassende Treffer dauerhaft.

Für alle (auch alte) Videos braucht es einen kostenlosen API-Schlüssel:

1. console.cloud.google.com → oben „Projekt auswählen“ → „Neues Projekt“ (z. B. „Alvi Website“).
2. „APIs & Dienste“ → „Bibliothek“ → „YouTube Data API v3“ → „Aktivieren“.
3. „APIs & Dienste“ → „Anmeldedaten“ → „Anmeldedaten erstellen“ → „API-Schlüssel“. Danach beim Schlüssel „API-Einschränkungen“ → nur „YouTube Data API v3“ erlauben.
4. In Vercel → Projekt → Settings → Environment Variables: YOUTUBE_API_KEY = Schlüssel, dann neu deployen.

Das Gratis-Kontingent (10.000 Einheiten/Tag) reicht locker: ein Abgleich kostet ca. 1 Einheit pro 50 Videos.