Compare commits

...

100 Commits

Author SHA1 Message Date
Hördle Bot
e58e9156d6 Bump version to 0.1.6.38 2026-01-24 13:21:36 +01:00
Hördle Bot
8c16c72489 Fix: Verwende gameState.isSolved/isFailed direkt für Ergebnisanzeige
- Entferne Fallback auf hasWon/hasLost States
- isSolved/isFailed werden jetzt direkt aus gameState gelesen
- Boolean() Konvertierung für explizite Typ-Sicherheit
- Behebt Problem, dass Ergebnisanzeige bei zurückkehrenden Rätseln nicht angezeigt wurde
2026-01-24 13:15:43 +01:00
Hördle Bot
be7eda63e2 Bump version to 0.1.6.37 2026-01-24 13:03:38 +01:00
Hördle Bot
2a99f545ef Fix: Zeige Ergebnis statt Solve/Give Up Button bei bereits abgeschlossenen Rätseln
- Verwende gameState.isSolved/isFailed direkt für UI-Logik
- Behebt Problem, dass Solve/Give Up Button bei zurückkehrenden Rätseln angezeigt wurde
- isSolved/isFailed werden jetzt direkt aus gameState gelesen für sofortige Konsistenz
2026-01-24 13:00:51 +01:00
Hördle Bot
6be813fb00 Fix: AudioPlayer startet jetzt korrekt bei startTime + Deployment-Version
- deploy.sh übergibt jetzt explizit APP_VERSION als Build-Argument
- AudioPlayer setzt startTime korrekt beim ersten manuellen Play
- Verbesserte Position-Logik in togglePlay() mit Timeout-Bestätigung
- Behebt Problem, dass Specials beim ersten Segment statt bei startTime starteten
2026-01-24 12:51:50 +01:00
Hördle Bot
71c7f2aab5 Bump version to 0.1.6.36 2026-01-24 12:43:30 +01:00
Hördle Bot
096682929d Fix: Skip-Button startet jetzt beim nächsten Segment + Initialisierung für Specials
- autoPlay verwendet jetzt startPos statt startTime beim Skip
- hasPlayedOnce wird nur bei Song-Wechsel zurückgesetzt, nicht bei mehr Zeit
- processedSrc/processedUnlockedSeconds initial auf null für korrekte Initialisierung
- Sicherstellt, dass Specials weiterhin vom markierten Ausschnitt starten
2026-01-24 12:42:26 +01:00
Hördle Bot
cebdf7a5a2 Fix: Specials-Rätsel spielen jetzt korrekt vom markierten Ausschnitt
- AudioPlayer setzt currentTime jetzt korrekt auf startTime beim Start
- Behebt Bug, bei dem Specials-Rätsel immer vom Anfang des Titels starteten
- Berücksichtigt startTime in togglePlay(), play() und autoPlay
2026-01-24 12:29:03 +01:00
Hördle Bot
afbdb74516 Bump version to 0.1.6.35 2025-12-14 14:28:45 +01:00
Hördle Bot
9372264174 Fix: Nur erreichbare Git-Tags für Version verwenden 2025-12-14 14:28:39 +01:00
Hördle Bot
25680a19b6 Bump version to 0.1.6.34 2025-12-14 14:24:48 +01:00
Hördle Bot
fb3e4c10dd Version-Anzeige: Neuesten Git-Tag statt Commit-Hash verwenden 2025-12-14 14:24:42 +01:00
Hördle Bot
b7293a4614 Fix: Update API route for loading cover images
- Changed the method of loading cover images to use the API route instead of directly from the filesystem.
- This aligns with the existing approach for audio playback and improves consistency across the application.
2025-12-14 14:12:45 +01:00
Hördle Bot
830e91fdff Bump version to 0.1.6.33 2025-12-14 14:11:07 +01:00
Hördle Bot
bc95af8027 Cover-Bilder über API-Route laden statt direkt aus Dateisystem 2025-12-14 14:11:02 +01:00
Hördle Bot
56461fe0bb Bump version to 0.1.6.31 2025-12-07 13:17:03 +01:00
Hördle Bot
989654f62e Fix: Waveform-Editor verwendet jetzt API-Route statt statischen Pfad
- WaveformEditor verwendet /api/audio/... statt /uploads/...
- Gleicher Pfad wie beim Abspielen aus der Liste
- Behebt Problem, dass neu hochgeladene Dateien nicht im Waveform-Editor bearbeitbar waren
2025-12-07 13:16:32 +01:00
Hördle Bot
bf9fbe37c0 Bump version to 0.1.6.30 2025-12-07 13:04:23 +01:00
Hördle Bot
c83dc7a5e5 Fix: Cache-Control-Header für Waveform-Editor API-Route hinzugefügt
- API-Route sendet jetzt explizite No-Cache-Header
- Frontend-Fetch verwendet cache: 'no-store'
- Behebt Problem, dass neu hochgeladene Dateien erst nach Container-Neustart bearbeitbar waren
2025-12-07 13:03:43 +01:00
Hördle Bot
7999d63e6d Fix: Versteckte Specials werden nicht mehr in Navigationsleiste angezeigt 2025-12-07 12:40:50 +01:00
Hördle Bot
2bf21fd75f feat: improve Gotify variable extraction in backup script
- Enhanced the loading of Gotify variables from the .env file by adding checks for existing values.
- Ensured that only non-empty and non-comment lines are processed for GOTIFY_URL and GOTIFY_APP_TOKEN.
2025-12-07 10:30:37 +01:00
Hördle Bot
e48d823c92 feat: enhance Gotify notification handling in backup script
- Added loading of environment variables from a .env file.
- Extracted Gotify configuration from docker-compose.yml if not set.
- Improved notification sending with success and error messages based on curl exit codes.
- Ensured Gotify notifications are only sent if properly configured.
2025-12-07 10:29:09 +01:00
Hördle Bot
84822e79ca feat: add Gotify notifications for Restic backup status
- Implemented a function to send notifications via Gotify for backup success, warnings, and failures.
- Notifications include details such as date and commit information.
- Added checks for Gotify configuration and fallback for JSON encoding.
2025-12-07 10:23:19 +01:00
Hördle Bot
17856ef09b Bump version to 0.1.6.28 2025-12-07 10:11:06 +01:00
Hördle Bot
fb833a7976 Fix: Waveform Editor lädt nicht für Titel ohne vollständige Song-Daten
- Filtere Songs ohne vollständige Song-Daten (song, filename) in CurateSpecialEditor
- Füge defensive Prüfungen hinzu bevor WaveformEditor gerendert wird
- Filtere unvollständige Songs bereits auf API-Ebene in curator/specials/[id]
- Verhindert Fehler wenn Songs ohne filename oder song-Objekt geladen werden
2025-12-07 10:07:43 +01:00
Hördle Bot
a4e61de53f chore: bump version to 0.1.6.27 2025-12-06 21:58:29 +01:00
Hördle Bot
73c1c1cf89 fix: restore accidentally deleted admin specials editor page 2025-12-06 21:58:27 +01:00
Hördle Bot
83e1281079 fix: restore deleted curator implementation files 2025-12-06 21:50:59 +01:00
Hördle Bot
2e1f1e599b chore: bump version to 0.1.6.26 2025-12-06 15:39:15 +01:00
Hördle Bot
71c4e2509f feat(admin): add danger zone buttons for resetting ratings and activations
- Added reset all user ratings button to admin danger zone
- Added reset all activations button to admin danger zone
- Created API endpoints: /api/admin/reset-ratings and /api/admin/reset-activations
- Removed old non-localized routes: /app/admin, /app/curator
- Removed unused page.module.css
- All admin functionality now uses localized routes (/[locale]/admin)
2025-12-06 15:38:46 +01:00
Hördle Bot
9cef1c78d3 ... 2025-12-06 14:26:52 +01:00
Hördle Bot
6741eeb7fa feat: Album-Cover-Anzeige in Titelliste mit Tooltip hinzugefügt
- Neue Spalte 'Cover' in der Curator-Titelliste zeigt an, ob ein Album-Cover vorhanden ist
- Tooltip zeigt das Cover-Bild beim Hovern über die Cover-Spalte
- Übersetzungen für DE und EN hinzugefügt
2025-12-06 14:24:00 +01:00
Hördle Bot
71b8e98f23 feat: add hidden flag to specials 2025-12-06 01:35:01 +01:00
Hördle Bot
bc2c0bad59 Bump version to 0.1.6.24 2025-12-06 00:36:02 +01:00
Hördle Bot
812d6ff10d Add timeline display below waveform in waveform editor 2025-12-06 00:36:00 +01:00
Hördle Bot
aed300b1bb Bump version to 0.1.6.23 2025-12-05 23:55:24 +01:00
Hördle Bot
e93b3b9096 Keep playback cursor visible when pausing in waveform editor 2025-12-05 23:55:21 +01:00
Hördle Bot
cdd2ff15d5 Bump version to 0.1.6.22 2025-12-05 22:25:41 +01:00
Hördle Bot
adcfbfa811 Fix pause functionality for waveform editor playback buttons 2025-12-05 22:25:39 +01:00
Hördle Bot
0cdfe90476 Bump version to 0.1.6.21 2025-12-05 22:06:44 +01:00
Hördle Bot
1715ca02ed Remove duplicate back button from curator special editor 2025-12-05 22:06:42 +01:00
Hördle Bot
ece3991d37 Bump version to 0.1.6.20 2025-12-05 21:57:36 +01:00
Hördle Bot
fa3b64f490 Add 'Play Full Title' button to waveform editor 2025-12-05 21:57:34 +01:00
Hördle Bot
fa6f1097dd Bump version to 0.1.6.19 2025-12-05 21:48:00 +01:00
Hördle Bot
d2ec0119ce Fix waveform editor: show end marker for last segment and fix play full section stop functionality 2025-12-05 21:47:57 +01:00
Hördle Bot
8914c552cd Bump version to 0.1.6.18 2025-12-05 21:33:44 +01:00
Hördle Bot
d816422419 Update song list start time after saving changes in waveform editor 2025-12-05 21:33:41 +01:00
Hördle Bot
da777ffcf3 Bump version to 0.1.6.17 2025-12-05 20:56:29 +01:00
Hördle Bot
0d806daf66 Add JSON validation for unlock steps in admin specials management with tooltip error display 2025-12-05 20:56:27 +01:00
Hördle Bot
616cfec3e7 Bump version to 0.1.6.16 2025-12-05 20:41:40 +01:00
Hördle Bot
ac12e45393 Fix curator specials page: resolve redirect loop and add missing translations 2025-12-05 20:41:38 +01:00
Hördle Bot
223eb62973 Bump version to 0.1.6.15 2025-12-05 20:13:31 +01:00
Hördle Bot
dc4bdd36c7 Fix textarea alignment: add box-sizing border-box to prevent overflow 2025-12-05 20:13:27 +01:00
Hördle Bot
136f881252 Bump version to 0.1.6.14 2025-12-05 18:43:15 +01:00
Hördle Bot
fd11048f2c Fix daily puzzle selection: always select from songs with minimum activations 2025-12-05 18:43:09 +01:00
Hördle Bot
c1b448639e Add logo generation scripts and favicon base image 2025-12-05 12:26:54 +01:00
Hördle Bot
97021f016b Add logo files (SVG and PNG) with white background and hördle.de text 2025-12-05 12:26:15 +01:00
Hördle Bot
1991cbd93f Bump version to 0.1.6.13 2025-12-05 11:33:44 +01:00
Hördle Bot
c28c9fe8f0 Fix: Verbesserte Erkennung von umformulierten Nachrichten - nur inhaltliche Änderungen werden erkannt 2025-12-05 11:33:39 +01:00
Hördle Bot
803713dea7 Bump version to 0.1.6.12 2025-12-05 11:20:08 +01:00
Hördle Bot
0e6eba64d9 Security: Update Next.js to 16.0.7 to fix CVE-2025-55182 (React2Shell RCE vulnerability) 2025-12-05 11:18:33 +01:00
Hördle Bot
576b486caf Bump version to 0.1.6.11 2025-12-05 10:55:22 +01:00
Hördle Bot
d8f69631b5 Fix: AI-Nachrichtenverarbeitung - Nur bei geänderten Nachrichten anzeigen, Checkbox für Einverständnis hinzufügen 2025-12-05 10:55:18 +01:00
Hördle Bot
dbcdaf9278 Enhance deployment script: add cleanup for build cache alongside old images 2025-12-04 21:38:04 +01:00
Hördle Bot
2e93d09236 Bump version to 0.1.6.10 2025-12-04 21:26:20 +01:00
Hördle Bot
a1fe62f132 Fix: Verwende Punycode-Domain (xn--hrdle-jua.de) in Share-Nachricht für hördle.de-Benutzer 2025-12-04 21:26:16 +01:00
Hördle Bot
e49c6acc99 Bump version to 0.1.6.9 2025-12-04 20:39:49 +01:00
Hördle Bot
96cc9db7d6 Fix: hasLost/hasWon korrekt beim Reload initialisieren 2025-12-04 20:39:43 +01:00
Hördle Bot
ebc482dc87 Bump version to 0.1.6.8 2025-12-04 20:13:23 +01:00
Hördle Bot
88dd86c344 Fix: Nur wirklich problematische Nachrichten umschreiben 2025-12-04 20:13:20 +01:00
Hördle Bot
623e8b9b82 Update help tooltip for assigning specials in curator upload to improve clarity 2025-12-04 14:45:39 +01:00
Hördle Bot
286ac2d28a Add help tooltip for assigning specials in curator upload 2025-12-04 14:38:33 +01:00
Hördle Bot
c02d3df7ed Load Restic credentials from ~/.restic-env in backup/restore scripts 2025-12-04 13:49:55 +01:00
Hördle Bot
702f47b7e5 Bump version to v0.1.6.7 2025-12-04 13:40:38 +01:00
Hördle Bot
86f3349f80 Fix duplicate toggleUploadSpecial definition in curator client 2025-12-04 13:40:23 +01:00
Hördle Bot
bdb74fb462 Bump version to v0.1.6.6 2025-12-04 13:36:40 +01:00
Hördle Bot
66c0071257 Allow curators to assign specials on upload and update help text 2025-12-04 13:36:24 +01:00
Hördle Bot
76f14087fd Bump version to v0.1.6.5 2025-12-04 13:27:48 +01:00
Hördle Bot
b1ab5bd633 Fix build by redirecting /curator/specials to localized route 2025-12-04 13:27:36 +01:00
Hördle Bot
51c62e7763 Bump version to v0.1.6.4 2025-12-04 13:19:58 +01:00
Hördle Bot
de6eadfe62 Respect MP3 release year when fetching iTunes metadata 2025-12-04 13:19:06 +01:00
Hördle Bot
b033c3a1bc Document and explain curator special curation flow 2025-12-04 13:08:07 +01:00
Hördle Bot
4b7121271a Remove curated specials button from localized admin page 2025-12-04 13:02:11 +01:00
Hördle Bot
12cc81905e Tighten admin specials handling and remove obsolete curate button 2025-12-04 12:31:49 +01:00
Hördle Bot
b46e9e3882 Add curator special curation flow and shared editor 2025-12-04 12:27:08 +01:00
Hördle Bot
332688d693 feat: Enhance player comment features with AI rewriting and collapsible form 2025-12-04 09:42:01 +01:00
Hördle Bot
a725694519 chore: Version auf v0.1.6.3 erhöht 2025-12-04 08:59:53 +01:00
Hördle Bot
cdb9803b40 Merge branch 'feature/curator-message-improvements' 2025-12-04 08:56:05 +01:00
Hördle Bot
7db4e26b2c feat: Implement AI-powered comment rewriting and a collapsible comment form for user feedback. 2025-12-04 08:54:25 +01:00
Hördle Bot
b204a35628 chore: Version auf v0.1.6.2 erhöht 2025-12-04 01:17:10 +01:00
Hördle Bot
c62f8f91e5 Merge branch 'curator-help' 2025-12-04 01:16:10 +01:00
Hördle Bot
6fbb3f4718 feat: Fragezeichen durch Info-Icon (ℹ) ersetzt
- HelpTooltip-Komponente verwendet jetzt ℹ statt ?
- Help-Button im Header verwendet jetzt ℹ statt 
- Konsistenteres Design mit Informations-Icon
2025-12-04 01:15:31 +01:00
Hördle Bot
5136c3add1 fix: Button-Höhen angeglichen
- Help- und Logout-Button haben jetzt identische Styles
- Gleiche lineHeight, boxSizing und fontFamily für konsistente Höhe
- Beide Buttons verwenden inline-flex mit center alignment
2025-12-04 01:14:01 +01:00
Hördle Bot
c250b5fff9 fix: Locale-Prefix in Links entfernt
- Link-Komponente aus @/lib/navigation fügt Locale automatisch hinzu
- Links verwenden jetzt relative Pfade ohne Locale-Prefix
- Behebt 404-Fehler bei /en/en/curator/help
2025-12-04 01:11:56 +01:00
Hördle Bot
4074cdfe00 fix: Modal-Titel in HelpTooltip übersetzt
- Modal-Titel verwendet jetzt Übersetzung (Hilfe/Help)
- Browser-Tooltip entfernt (nur noch custom Tooltip)
- useTranslations in HelpTooltip-Komponente integriert
2025-12-04 01:09:48 +01:00
Hördle Bot
65425ac15c feat: Curator-Hilfe-System implementiert
- Hilfe-Seite /curator/help mit vollständiger Dokumentation (de/en)
- HelpTooltip-Komponente mit Hover- und Click-Modi
- Tooltips bei allen wichtigen Dashboard-Bereichen:
  * Dashboard-Übersicht
  * Upload-Bereich & Genre-Zuweisung
  * Track-Liste (Suche, Filter, Batch-Edit)
  * Kommentar-Verwaltung
- Prominenter Hilfe-Button im Header
- Umfassende Übersetzungen für alle Hilfe-Texte
- Fix: TypeScript-Fehler in batch route behoben
- Fix: Doppelter Browser-Tooltip entfernt (nur noch custom Tooltip)
2025-12-04 01:07:45 +01:00
Hördle Bot
7879b63498 fix: TypeScript-Fehler in batch route korrigiert
- Verwende lokale Variable curatorAssignments statt nullable assignments
- TypeScript erkennt jetzt korrekt, dass die Variable nicht null ist
2025-12-04 00:57:02 +01:00
Hördle Bot
91ebaa0e44 fix: TypeScript-Fehler in batch route behoben
- Non-Null-Assertion für assignments hinzugefügt
- assignments ist innerhalb des curator-Blocks garantiert nicht null
2025-12-04 00:52:16 +01:00
Hördle Bot
a61caa2d13 feat: README.md um Batch-Edit-Funktionalität für Kuratoren erweitert
- Beschreibung der neuen Batch-Edit-Optionen hinzugefügt, einschließlich der Möglichkeit, mehrere Titel gleichzeitig zu bearbeiten.
- Details zu Genre/Special Toggle, Artist-Änderung und Exclude Global Flag für globale Kuratoren ergänzt.
2025-12-04 00:45:08 +01:00
Hördle Bot
52a15b7504 chore: Version auf v0.1.6.1 erhöht 2025-12-04 00:43:27 +01:00
62 changed files with 4740 additions and 2826 deletions

1
.cursor/commands/bump.md Normal file
View File

@@ -0,0 +1 @@
teste den build (npm run build), anschließend commit, dann bump zum nächsten patchlevel, git tag und sync

1
.gitignore vendored
View File

@@ -54,3 +54,4 @@ next-env.d.ts
docker-compose.yml
scripts/scrape-bahn-expert-statements.js
docs/bahn-expert-statements.txt
/public/logos.zip

View File

@@ -24,10 +24,12 @@ COPY --from=deps /app/node_modules ./node_modules
COPY . .
# Extract version: use build arg if provided, otherwise get from git, fallback to package.json
# Only use tags that are reachable from the current commit to ensure version matches the code
RUN if [ -n "$APP_VERSION" ]; then \
echo "$APP_VERSION" > /tmp/version.txt; \
else \
(git describe --tags --always 2>/dev/null || \
(git describe --tags --exact-match 2>/dev/null || \
git describe --tags --abbrev=0 2>/dev/null || \
(grep -o '"version": "[^"]*"' package.json 2>/dev/null | cut -d'"' -f4 | sed 's/^/v/') || \
echo "dev") > /tmp/version.txt; \
fi && \

View File

@@ -57,9 +57,13 @@ Eine Web-App inspiriert von Heardle, bei der Nutzer täglich einen Song anhand k
- **Global-Kuratoren:** Optionale globale Kuratoren, die für alle Rätsel zuständig sind.
- **Kurator-Dashboard:** Eigene Dashboard-Seite (`/curator` oder `/de/curator`, `/en/curator`) für Kuratoren.
- **Song-Verwaltung:** Kuratoren können Songs hochladen, bearbeiten und Genres/Specials zuweisen.
- **Curate Specials:** Kuratoren können in einem eigenen Bereich („Curate Specials“) die Startzeiten der Songs in ihren zugewiesenen Specials über den Waveform-Editor einstellen streng begrenzt auf ihre eigenen Specials.
- **Batch-Edit:** Mehrere Titel gleichzeitig bearbeiten (Genre/Special Toggle, Artist ändern, Exclude Global Flag setzen).
- **Kommentar-Verwaltung:** Kuratoren können Spieler-Kommentare zu ihren Rätseln einsehen, als gelesen markieren und archivieren.
- **Spieler-Kommentare:**
- **Feedback an Kuratoren:** Spieler können nach Abschluss eines Rätsels optional eine Nachricht an die Kuratoren senden.
- **KI-gestützte Formulierungshilfe:** Nachrichten können vor dem Absenden auf Wunsch automatisch von einer KI umformuliert/verbessert werden.
- **Einklappbares Kommentar-Formular:** Das Nachrichtenformular ist dezent als einklappbarer Bereich eingebunden und stört den Spielfluss nicht.
- **Automatische Zuordnung:** Kommentare werden automatisch an relevante Kuratoren verteilt (Genre-Kuratoren, Special-Kuratoren, Global-Kuratoren).
- **Rate-Limiting:** Pro Spieler nur ein Kommentar pro Puzzle möglich.
- **Kontext-Informationen:** Kommentare enthalten vollständigen Rätsel-Kontext (Hördle #, Genre/Special, Titel/Artist).
@@ -179,6 +183,12 @@ Das Projekt ist für den Betrieb mit Docker optimiert.
- URL: `/de/curator` oder `/en/curator`
- Kurator-Accounts werden vom Admin erstellt und verwaltet.
- Kuratoren können Songs hochladen und verwalten, sowie Kommentare von Spielern einsehen.
- **Batch-Edit-Funktionalität:**
- Mehrere Titel über Checkboxen auswählen
- Genre/Special Toggle (hinzufügen/entfernen)
- Artist-Änderung für alle ausgewählten Titel
- Exclude Global Flag setzen/entfernen (nur für Global-Kuratoren)
- Toolbar erscheint automatisch bei Auswahl von Titeln
6. **Special Curation & Scheduling verwenden:**
- Erstelle ein Special im Admin-Dashboard:
@@ -186,8 +196,10 @@ Das Projekt ist für den Betrieb mit Docker optimiert.
- **Optional:** Setze ein Startdatum (Launch Date) und Enddatum.
- **Optional:** Trage einen Kurator ein.
- Weise Songs dem Special zu (über die Song-Bibliothek).
- Klicke auf "Curate" neben dem Special.
- Nutze den Waveform-Editor um den perfekten Ausschnitt zu wählen:
- Die eigentliche Kuratierung (Auswahl des Ausschnitts) findet im **Kuratoren-Dashboard** statt:
- Logge dich als Kurator ein und gehe zu `/de/curator` oder `/en/curator`.
- Klicke im Dashboard auf **„Curate Specials“**, um eine Liste deiner zugewiesenen Specials zu sehen.
- Öffne ein Special und nutze dort den Waveform-Editor, um den perfekten Ausschnitt zu wählen:
- **Klicken:** Positioniert die Selektion
- **Hovern:** Zeigt Vorschau der neuen Position
- **Zoom:** 🔍+ / 🔍− Buttons für detaillierte Ansicht

View File

@@ -73,7 +73,9 @@ export default async function GenrePage({ params }: PageProps) {
// Sort
genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
const specials = await prisma.special.findMany();
const specials = await prisma.special.findMany({
where: { hidden: false },
});
specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
const now = new Date();

View File

@@ -15,6 +15,7 @@ interface Special {
launchDate?: string;
endDate?: string;
curator?: string;
hidden?: boolean;
_count?: {
songs: number;
};
@@ -115,18 +116,22 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
const [newSpecialSubtitle, setNewSpecialSubtitle] = useState({ de: '', en: '' });
const [newSpecialMaxAttempts, setNewSpecialMaxAttempts] = useState(7);
const [newSpecialUnlockSteps, setNewSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
const [newSpecialUnlockStepsError, setNewSpecialUnlockStepsError] = useState<string | null>(null);
const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
const [newSpecialCurator, setNewSpecialCurator] = useState('');
const [newSpecialHidden, setNewSpecialHidden] = useState(false);
const [editingSpecialId, setEditingSpecialId] = useState<number | null>(null);
const [editSpecialName, setEditSpecialName] = useState({ de: '', en: '' });
const [editSpecialSubtitle, setEditSpecialSubtitle] = useState({ de: '', en: '' });
const [editSpecialMaxAttempts, setEditSpecialMaxAttempts] = useState(7);
const [editSpecialUnlockSteps, setEditSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
const [editSpecialUnlockStepsError, setEditSpecialUnlockStepsError] = useState<string | null>(null);
const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
const [editSpecialCurator, setEditSpecialCurator] = useState('');
const [editSpecialHidden, setEditSpecialHidden] = useState(false);
// News state
const [news, setNews] = useState<News[]>([]);
@@ -239,6 +244,25 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
}
};
// Validate JSON for unlock steps
const validateUnlockSteps = (value: string): string | null => {
if (!value.trim()) {
return t('unlockStepsRequired');
}
try {
const parsed = JSON.parse(value);
if (!Array.isArray(parsed)) {
return t('unlockStepsMustBeArray');
}
if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
return t('unlockStepsMustBePositiveNumbers');
}
return null;
} catch (e) {
return t('unlockStepsInvalidJson');
}
};
const handleLogout = () => {
localStorage.removeItem('hoerdle_admin_auth');
setIsAuthenticated(false);
@@ -352,6 +376,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
const handleCreateSpecial = async (e: React.FormEvent) => {
e.preventDefault();
if (!newSpecialName.de.trim() && !newSpecialName.en.trim()) return;
// Validate unlock steps
const unlockStepsError = validateUnlockSteps(newSpecialUnlockSteps);
if (unlockStepsError) {
setNewSpecialUnlockStepsError(unlockStepsError);
return;
}
setNewSpecialUnlockStepsError(null);
const res = await fetch('/api/specials', {
method: 'POST',
headers: getAuthHeaders(),
@@ -363,6 +396,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
launchDate: newSpecialLaunchDate || null,
endDate: newSpecialEndDate || null,
curator: newSpecialCurator || null,
hidden: newSpecialHidden,
}),
});
if (res.ok) {
@@ -370,12 +404,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
setNewSpecialSubtitle({ de: '', en: '' });
setNewSpecialMaxAttempts(7);
setNewSpecialUnlockSteps('[2,4,7,11,16,30,60]');
setNewSpecialUnlockStepsError(null);
setNewSpecialLaunchDate('');
setNewSpecialEndDate('');
setNewSpecialCurator('');
setNewSpecialHidden(false);
fetchSpecials();
} else {
alert('Failed to create special');
const errorData = await res.json().catch(() => ({}));
alert(errorData.error || 'Failed to create special');
}
};
@@ -455,13 +492,24 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
setEditSpecialSubtitle(special.subtitle ? (typeof special.subtitle === 'string' ? { de: special.subtitle, en: special.subtitle } : special.subtitle) : { de: '', en: '' });
setEditSpecialMaxAttempts(special.maxAttempts);
setEditSpecialUnlockSteps(special.unlockSteps);
setEditSpecialUnlockStepsError(null);
setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
setEditSpecialCurator(special.curator || '');
setEditSpecialHidden(special.hidden || false);
};
const saveEditedSpecial = async () => {
if (editingSpecialId === null) return;
// Validate unlock steps
const unlockStepsError = validateUnlockSteps(editSpecialUnlockSteps);
if (unlockStepsError) {
setEditSpecialUnlockStepsError(unlockStepsError);
return;
}
setEditSpecialUnlockStepsError(null);
const res = await fetch('/api/specials', {
method: 'PUT',
headers: getAuthHeaders(),
@@ -474,13 +522,16 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
launchDate: editSpecialLaunchDate || null,
endDate: editSpecialEndDate || null,
curator: editSpecialCurator || null,
hidden: editSpecialHidden,
}),
});
if (res.ok) {
setEditingSpecialId(null);
setEditSpecialUnlockStepsError(null);
fetchSpecials();
} else {
alert('Failed to update special');
const errorData = await res.json().catch(() => ({}));
alert(errorData.error || 'Failed to update special');
}
};
@@ -1300,8 +1351,38 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
<input type="number" placeholder={t('maxAttempts')} value={newSpecialMaxAttempts} onChange={e => setNewSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
<input type="text" placeholder={t('unlockSteps')} value={newSpecialUnlockSteps} onChange={e => setNewSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
<label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
{t('unlockSteps')}
{newSpecialUnlockStepsError && (
<span
title={newSpecialUnlockStepsError}
style={{
color: '#ef4444',
cursor: 'help',
fontSize: '0.875rem'
}}
>
</span>
)}
</label>
<input
type="text"
placeholder={t('unlockSteps')}
value={newSpecialUnlockSteps}
onChange={e => {
const value = e.target.value;
setNewSpecialUnlockSteps(value);
const error = validateUnlockSteps(value);
setNewSpecialUnlockStepsError(error);
}}
className="form-input"
title={newSpecialUnlockStepsError || undefined}
style={{
width: '200px',
borderColor: newSpecialUnlockStepsError ? '#ef4444' : undefined
}}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
@@ -1315,25 +1396,73 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
<input type="text" placeholder={t('curator')} value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
</div>
<button type="submit" className="btn-primary" style={{ height: '38px' }}>{t('addSpecial')}</button>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
<input
type="checkbox"
checked={newSpecialHidden}
onChange={e => setNewSpecialHidden(e.target.checked)}
style={{ width: '1rem', height: '1rem' }}
/>
Hidden
</label>
</div>
<button
type="submit"
className="btn-primary"
style={{
height: '38px',
opacity: newSpecialUnlockStepsError ? 0.5 : 1,
cursor: newSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
}}
disabled={!!newSpecialUnlockStepsError}
>
{t('addSpecial')}
</button>
</div>
</form>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
{specials.map(special => (
<div key={special.id} style={{
<div
key={special.id}
style={{
background: '#f3f4f6',
padding: '0.25rem 0.75rem',
borderRadius: '999px',
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
fontSize: '0.875rem'
}}>
<span>{getLocalizedValue(special.name, activeTab)} ({special._count?.songs || 0})</span>
{special.subtitle && <span style={{ fontSize: '0.75rem', color: '#666', marginLeft: '0.25rem' }}>- {getLocalizedValue(special.subtitle, activeTab)}</span>}
<Link href={`/admin/specials/${special.id}`} className="btn-primary" style={{ marginRight: '0.5rem', textDecoration: 'none' }}>{t('curate')}</Link>
<button onClick={() => startEditSpecial(special)} className="btn-secondary" style={{ marginRight: '0.5rem' }}>{t('edit')}</button>
<button onClick={() => handleDeleteSpecial(special.id)} className="btn-danger">{t('delete')}</button>
fontSize: '0.875rem',
}}
>
<span>
{special.hidden && <span title="Hidden from navigation">👁🗨</span>} {getLocalizedValue(special.name, activeTab)} ({special._count?.songs || 0})
</span>
{special.subtitle && (
<span
style={{
fontSize: '0.75rem',
color: '#666',
marginLeft: '0.25rem',
}}
>
- {getLocalizedValue(special.subtitle, activeTab)}
</span>
)}
<button
onClick={() => startEditSpecial(special)}
className="btn-secondary"
style={{ marginRight: '0.5rem' }}
>
{t('edit')}
</button>
<button
onClick={() => handleDeleteSpecial(special.id)}
className="btn-danger"
>
{t('delete')}
</button>
</div>
))}
</div>
@@ -1354,8 +1483,37 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
<input type="number" value={editSpecialMaxAttempts} onChange={e => setEditSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
<input type="text" value={editSpecialUnlockSteps} onChange={e => setEditSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
<label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
{t('unlockSteps')}
{editSpecialUnlockStepsError && (
<span
title={editSpecialUnlockStepsError}
style={{
color: '#ef4444',
cursor: 'help',
fontSize: '0.875rem'
}}
>
</span>
)}
</label>
<input
type="text"
value={editSpecialUnlockSteps}
onChange={e => {
const value = e.target.value;
setEditSpecialUnlockSteps(value);
const error = validateUnlockSteps(value);
setEditSpecialUnlockStepsError(error);
}}
className="form-input"
title={editSpecialUnlockStepsError || undefined}
style={{
width: '200px',
borderColor: editSpecialUnlockStepsError ? '#ef4444' : undefined
}}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
@@ -1369,7 +1527,30 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
<input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
</div>
<button onClick={saveEditedSpecial} className="btn-primary" style={{ height: '38px' }}>{t('save')}</button>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
<input
type="checkbox"
checked={editSpecialHidden}
onChange={e => setEditSpecialHidden(e.target.checked)}
style={{ width: '1rem', height: '1rem' }}
/>
Hidden
</label>
</div>
<button
onClick={saveEditedSpecial}
className="btn-primary"
style={{
height: '38px',
opacity: editSpecialUnlockStepsError ? 0.5 : 1,
cursor: editSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
}}
disabled={!!editSpecialUnlockStepsError}
>
{t('save')}
</button>
<button onClick={() => setEditingSpecialId(null)} className="btn-secondary" style={{ height: '38px' }}>{t('cancel')}</button>
</div>
</div>
@@ -2147,6 +2328,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
<p style={{ marginBottom: '1rem', color: '#666' }}>
These actions are destructive and cannot be undone.
</p>
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
<button
onClick={async () => {
if (window.confirm('⚠️ WARNING: This will delete ALL data from the database (Songs, Genres, Specials, Puzzles) and re-import songs from the uploads folder.\n\nExisting genres and specials will be LOST and must be recreated manually.\n\nAre you sure you want to proceed?')) {
@@ -2180,7 +2362,83 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
Rebuild Database
</button>
<button
onClick={async () => {
if (window.confirm('⚠️ WARNING: This will reset ALL user ratings for all songs to 0.\n\nThis action cannot be undone.\n\nAre you sure you want to proceed?')) {
try {
setMessage('Resetting all ratings...');
const res = await fetch('/api/admin/reset-ratings', {
method: 'POST',
headers: getAuthHeaders()
});
if (res.ok) {
const data = await res.json();
alert(data.message);
fetchSongs();
setMessage('');
} else {
alert('Failed to reset ratings. Check server logs.');
setMessage('Reset failed.');
}
} catch (e) {
console.error(e);
alert('Reset failed due to network error.');
setMessage('');
}
}
}}
style={{
padding: '0.75rem 1.5rem',
background: '#f59e0b',
color: 'white',
border: 'none',
borderRadius: '0.25rem',
cursor: 'pointer',
fontWeight: 'bold'
}}
>
🔄 Reset All User Ratings
</button>
<button
onClick={async () => {
if (window.confirm('⚠️ WARNING: This will delete ALL daily puzzles (activations) from the database.\n\nThis means all songs will show 0 activations.\n\nThis action cannot be undone.\n\nAre you sure you want to proceed?')) {
try {
setMessage('Resetting all activations...');
const res = await fetch('/api/admin/reset-activations', {
method: 'POST',
headers: getAuthHeaders()
});
if (res.ok) {
const data = await res.json();
alert(data.message);
fetchSongs();
fetchDailyPuzzles();
setMessage('');
} else {
alert('Failed to reset activations. Check server logs.');
setMessage('Reset failed.');
}
} catch (e) {
console.error(e);
alert('Reset failed due to network error.');
setMessage('');
}
}
}}
style={{
padding: '0.75rem 1.5rem',
background: '#f59e0b',
color: 'white',
border: 'none',
borderRadius: '0.25rem',
cursor: 'pointer',
fontWeight: 'bold'
}}
>
🔄 Reset All Activations
</button>
</div>
</div>
</div>
);

View File

@@ -0,0 +1,7 @@
'use client';
import SpecialEditorPage from '@/app/admin/specials/[id]/page';
export default SpecialEditorPage;

View File

@@ -0,0 +1,8 @@
'use client';
import CuratorHelpInner from '../../../curator/help/page';
export default function CuratorHelpPage() {
return <CuratorHelpInner />;
}

View File

@@ -0,0 +1,7 @@
'use client';
import CuratorSpecialEditorPage from '@/app/curator/specials/[id]/page';
export default CuratorSpecialEditorPage;

View File

@@ -0,0 +1,9 @@
'use client';
import CuratorSpecialsClient from '@/app/curator/specials/CuratorSpecialsClient';
export default function CuratorSpecialsPage() {
return <CuratorSpecialsClient />;
}

View File

@@ -43,7 +43,9 @@ export default async function Home({
const genres = await prisma.genre.findMany({
where: { active: true },
});
const specials = await prisma.special.findMany();
const specials = await prisma.special.findMany({
where: { hidden: false },
});
// Sort in memory
genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));

View File

@@ -86,6 +86,7 @@ export default async function SpecialPage({ params }: PageProps) {
specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
const activeSpecials = specials.filter(s => {
if (s.hidden) return false;
const sStarted = !s.launchDate || s.launchDate <= now;
const sEnded = s.endDate && s.endDate < now;
return sStarted && !sEnded;

View File

@@ -80,3 +80,30 @@ export async function submitRating(songId: number, rating: number, genre?: strin
return { success: false, error: 'Failed to submit rating' };
}
}
export async function sendCommentNotification(puzzleId: number, message: string, originalMessage?: string, genre?: string | null) {
try {
const title = `New Curator Comment (Puzzle #${puzzleId})`;
let body = message;
if (originalMessage && originalMessage !== message) {
body = `Original: ${originalMessage}\n\nRewritten: ${message}`;
}
if (genre) {
body = `[${genre}] ${body}`;
}
await fetch(`${GOTIFY_URL}/message?token=${GOTIFY_APP_TOKEN}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: title,
message: body,
priority: 5,
}),
});
} catch (error) {
console.error('Error sending comment notification:', error);
}
}

View File

@@ -1,14 +0,0 @@
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Hördle Admin Dashboard",
description: "Admin dashboard for managing songs and daily puzzles",
};
export default function AdminLayout({
children,
}: {
children: React.ReactNode;
}) {
return <>{children}</>;
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,102 +1,59 @@
'use client';
import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import WaveformEditor from '@/components/WaveformEditor';
interface Song {
id: number;
title: string;
artist: string;
filename: string;
}
interface SpecialSong {
id: number;
songId: number;
startTime: number;
order: number | null;
song: Song;
}
interface Special {
id: number;
name: string;
subtitle?: string;
maxAttempts: number;
unlockSteps: string;
songs: SpecialSong[];
}
import { useParams, useRouter, usePathname } from 'next/navigation';
import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
export default function SpecialEditorPage() {
const params = useParams();
const router = useRouter();
const pathname = usePathname();
const specialId = params.id as string;
const [special, setSpecial] = useState<Special | null>(null);
const [selectedSongId, setSelectedSongId] = useState<number | null>(null);
// Locale aus dem Pfad ableiten (/en/..., /de/...)
const localeFromPath = pathname?.split('/')[1] as 'de' | 'en' | undefined;
const locale: 'de' | 'en' = localeFromPath === 'de' || localeFromPath === 'en' ? localeFromPath : 'en';
const [special, setSpecial] = useState<CurateSpecial | null>(null);
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [pendingStartTime, setPendingStartTime] = useState<number | null>(null);
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
useEffect(() => {
fetchSpecial();
}, [specialId]);
const fetchSpecial = async () => {
const fetchSpecial = async (showLoading = true) => {
try {
if (showLoading) {
setLoading(true);
}
const res = await fetch(`/api/specials/${specialId}`);
if (res.ok) {
const data = await res.json();
setSpecial(data);
if (data.songs.length > 0) {
setSelectedSongId(data.songs[0].songId);
// Initialize pendingStartTime with the current startTime of the first song
setPendingStartTime(data.songs[0].startTime);
}
}
} catch (error) {
console.error('Error fetching special:', error);
} finally {
if (showLoading) {
setLoading(false);
}
}
};
const handleStartTimeChange = (newStartTime: number) => {
setPendingStartTime(newStartTime);
setHasUnsavedChanges(true);
};
useEffect(() => {
fetchSpecial(true);
}, [specialId]);
const handleSave = async () => {
if (!special || !selectedSongId || pendingStartTime === null) return;
setSaving(true);
try {
const handleSaveStartTime = async (songId: number, startTime: number) => {
const res = await fetch(`/api/specials/${specialId}/songs`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ songId: selectedSongId, startTime: pendingStartTime })
body: JSON.stringify({ songId, startTime }),
});
if (res.ok) {
// Update local state
setSpecial(prev => {
if (!prev) return prev;
return {
...prev,
songs: prev.songs.map(ss =>
ss.songId === selectedSongId ? { ...ss, startTime: pendingStartTime } : ss
)
};
});
setHasUnsavedChanges(false);
setPendingStartTime(null); // Reset pending state after saving
}
} catch (error) {
console.error('Error updating start time:', error);
} finally {
setSaving(false);
if (!res.ok) {
const errorText = await res.text().catch(() => res.statusText || 'Unknown error');
console.error('Error updating special song (admin):', res.status, errorText);
throw new Error(`Failed to save start time: ${errorText}`);
} else {
// Reload special data to update the start time in the song list
await fetchSpecial(false);
}
};
@@ -117,116 +74,16 @@ export default function SpecialEditorPage() {
);
}
const selectedSpecialSong = special.songs.find(ss => ss.songId === selectedSongId);
const unlockSteps = JSON.parse(special.unlockSteps);
const totalDuration = unlockSteps[unlockSteps.length - 1];
return (
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
<div style={{ marginBottom: '2rem' }}>
<button
onClick={() => router.push('/admin')}
style={{
padding: '0.5rem 1rem',
background: '#e5e7eb',
border: 'none',
borderRadius: '0.5rem',
cursor: 'pointer',
marginBottom: '1rem'
}}
>
Back to Admin
</button>
<h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
Edit Special: {special.name}
</h1>
{special.subtitle && (
<p style={{ fontSize: '1.125rem', color: '#4b5563', marginTop: '0.25rem' }}>
{special.subtitle}
</p>
)}
<p style={{ color: '#666', marginTop: '0.5rem' }}>
Max Attempts: {special.maxAttempts} | Puzzle Duration: {totalDuration}s
</p>
</div>
{special.songs.length === 0 ? (
<div style={{ padding: '2rem', background: '#f3f4f6', borderRadius: '0.5rem', textAlign: 'center' }}>
<p>No songs assigned to this special yet.</p>
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
Go back to the admin dashboard to add songs to this special.
</p>
</div>
) : (
<div>
<div style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
Select Song to Curate
</h2>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '1rem' }}>
{special.songs.map(ss => (
<div
key={ss.songId}
onClick={() => setSelectedSongId(ss.songId)}
style={{
padding: '1rem',
background: selectedSongId === ss.songId ? '#4f46e5' : '#f3f4f6',
color: selectedSongId === ss.songId ? 'white' : 'black',
borderRadius: '0.5rem',
cursor: 'pointer',
border: selectedSongId === ss.songId ? '2px solid #4f46e5' : '2px solid transparent'
}}
>
<div style={{ fontWeight: 'bold' }}>{ss.song.title}</div>
<div style={{ fontSize: '0.875rem', opacity: 0.8 }}>{ss.song.artist}</div>
<div style={{ fontSize: '0.75rem', marginTop: '0.5rem', opacity: 0.7 }}>
Start: {ss.startTime}s
</div>
</div>
))}
</div>
</div>
{selectedSpecialSong && (
<div>
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
Curate: {selectedSpecialSong.song.title}
</h2>
<div style={{ background: '#f9fafb', padding: '1.5rem', borderRadius: '0.5rem' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
<p style={{ fontSize: '0.875rem', color: '#666', margin: 0 }}>
Click on the waveform to select where the puzzle should start. The highlighted region shows what players will hear.
</p>
<button
onClick={handleSave}
disabled={!hasUnsavedChanges || saving}
style={{
padding: '0.5rem 1.5rem',
background: hasUnsavedChanges ? '#10b981' : '#e5e7eb',
color: hasUnsavedChanges ? 'white' : '#9ca3af',
border: 'none',
borderRadius: '0.5rem',
cursor: hasUnsavedChanges && !saving ? 'pointer' : 'not-allowed',
fontWeight: 'bold',
fontSize: '0.875rem',
whiteSpace: 'nowrap'
}}
>
{saving ? '💾 Saving...' : hasUnsavedChanges ? '💾 Save Changes' : '✓ Saved'}
</button>
</div>
<WaveformEditor
audioUrl={`/uploads/${selectedSpecialSong.song.filename}`}
startTime={pendingStartTime ?? selectedSpecialSong.startTime}
duration={totalDuration}
unlockSteps={unlockSteps}
onStartTimeChange={handleStartTimeChange}
<CurateSpecialEditor
special={special}
locale={locale}
onBack={() => router.push('/admin')}
onSaveStartTime={handleSaveStartTime}
backLabel="← Back to Admin"
headerPrefix="Edit Special:"
noSongsSubHint="Go back to the admin dashboard to add songs to this special."
/>
</div>
</div>
)}
</div>
)}
</div>
);
}

View File

@@ -0,0 +1,23 @@
import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function POST(req: NextRequest) {
try {
// Delete all daily puzzles (activations)
const result = await prisma.dailyPuzzle.deleteMany({});
return NextResponse.json({
success: true,
message: `Successfully deleted ${result.count} daily puzzles (activations)`,
count: result.count,
});
} catch (error) {
console.error('Error resetting activations:', error);
return NextResponse.json(
{ error: 'Failed to reset activations' },
{ status: 500 }
);
}
}

View File

@@ -0,0 +1,28 @@
import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function POST(req: NextRequest) {
try {
// Reset all song ratings to 0
const result = await prisma.song.updateMany({
data: {
averageRating: 0,
ratingCount: 0,
},
});
return NextResponse.json({
success: true,
message: `Successfully reset ratings for ${result.count} songs`,
count: result.count,
});
} catch (error) {
console.error('Error resetting ratings:', error);
return NextResponse.json(
{ error: 'Failed to reset ratings' },
{ status: 500 }
);
}
}

View File

@@ -0,0 +1,95 @@
import { NextRequest, NextResponse } from 'next/server';
import { stat } from 'fs/promises';
import { createReadStream } from 'fs';
import path from 'path';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ filename: string }> }
) {
try {
const { filename } = await params;
// Security: Prevent path traversal attacks
// Allow alphanumeric, hyphens, underscores, and dots for image filenames
// Support common image formats: jpg, jpeg, png, gif, webp
const safeFilenamePattern = /^[a-zA-Z0-9_\-\.]+\.(jpg|jpeg|png|gif|webp)$/i;
if (!safeFilenamePattern.test(filename)) {
return new NextResponse('Invalid filename', { status: 400 });
}
// Additional check: ensure no path separators
if (filename.includes('/') || filename.includes('\\') || filename.includes('..')) {
return new NextResponse('Invalid filename', { status: 400 });
}
const filePath = path.join(process.cwd(), 'public/uploads/covers', filename);
// Security: Verify the resolved path is still within covers directory
const coversDir = path.join(process.cwd(), 'public/uploads/covers');
const resolvedPath = path.resolve(filePath);
if (!resolvedPath.startsWith(coversDir)) {
return new NextResponse('Forbidden', { status: 403 });
}
const stats = await stat(filePath);
const fileSize = stats.size;
// Determine content type based on file extension
const ext = filename.toLowerCase().split('.').pop();
const contentTypeMap: Record<string, string> = {
'jpg': 'image/jpeg',
'jpeg': 'image/jpeg',
'png': 'image/png',
'gif': 'image/gif',
'webp': 'image/webp',
};
const contentType = contentTypeMap[ext || ''] || 'image/jpeg';
const stream = createReadStream(filePath);
// Convert Node stream to Web stream
const readable = new ReadableStream({
start(controller) {
let isClosed = false;
stream.on('data', (chunk: any) => {
if (isClosed) return;
try {
controller.enqueue(chunk);
} catch (e) {
isClosed = true;
stream.destroy();
}
});
stream.on('end', () => {
if (isClosed) return;
isClosed = true;
controller.close();
});
stream.on('error', (err: any) => {
if (isClosed) return;
isClosed = true;
controller.error(err);
});
},
cancel() {
stream.destroy();
}
});
return new NextResponse(readable, {
status: 200,
headers: {
'Content-Length': fileSize.toString(),
'Content-Type': contentType,
'Cache-Control': 'public, max-age=3600, must-revalidate',
},
});
} catch (error) {
console.error('Error serving cover image:', error);
return new NextResponse('Internal Server Error', { status: 500 });
}
}

View File

@@ -10,7 +10,7 @@ export async function POST(request: NextRequest) {
if (rateLimitError) return rateLimitError;
try {
const { puzzleId, genreId, message, playerIdentifier } = await request.json();
const { puzzleId, genreId, message, playerIdentifier, originalMessage } = await request.json();
// Validate required fields
if (!puzzleId || !message || !playerIdentifier) {
@@ -28,9 +28,9 @@ export async function POST(request: NextRequest) {
{ status: 400 }
);
}
if (trimmedMessage.length > 2000) {
if (trimmedMessage.length > 300) {
return NextResponse.json(
{ error: 'Message too long. Maximum 2000 characters allowed.' },
{ error: 'Message too long. Maximum 300 characters allowed.' },
{ status: 400 }
);
}
@@ -170,6 +170,19 @@ export async function POST(request: NextRequest) {
return comment;
});
// Send Gotify notification (fire and forget)
const { sendCommentNotification } = await import('@/app/actions');
// originalMessage is already available from the initial request.json() call
// Determine genre name for notification
let genreName: string | null = null;
if (finalGenreId) {
const genreObj = await prisma.genre.findUnique({ where: { id: finalGenreId } });
if (genreObj) genreName = genreObj.name as string;
}
sendCommentNotification(Number(puzzleId), trimmedMessage, originalMessage, genreName || null);
return NextResponse.json({
success: true,
commentId: result.id

View File

@@ -0,0 +1,97 @@
import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
import { requireStaffAuth } from '@/lib/auth';
import { access } from 'fs/promises';
import path from 'path';
const prisma = new PrismaClient();
// Mark route as dynamic to prevent caching
export const dynamic = 'force-dynamic';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
const { error, context } = await requireStaffAuth(request);
if (error || !context) return error!;
if (context.role !== 'curator') {
return NextResponse.json(
{ error: 'Only curators can access this endpoint' },
{ status: 403 }
);
}
const { id } = await params;
const specialId = Number(id);
if (!specialId || Number.isNaN(specialId)) {
return NextResponse.json({ error: 'Invalid special id' }, { status: 400 });
}
// Prüfen, ob dieses Special dem Kurator zugeordnet ist
const assignment = await prisma.curatorSpecial.findFirst({
where: { curatorId: context.curator.id, specialId },
});
if (!assignment) {
return NextResponse.json(
{ error: 'Forbidden: You are not allowed to access this special' },
{ status: 403 }
);
}
const special = await prisma.special.findUnique({
where: { id: specialId },
include: {
songs: {
include: {
song: true,
},
orderBy: { order: 'asc' },
},
},
});
if (!special) {
return NextResponse.json({ error: 'Special not found' }, { status: 404 });
}
// Filtere Songs ohne vollständige Song-Daten und prüfe Datei-Existenz
// Dies verhindert Fehler im Frontend, wenn Songs gelöscht wurden, Daten fehlen
// oder Dateien noch nicht im Container verfügbar sind (Volume Mount Delay)
const uploadsDir = path.join(process.cwd(), 'public/uploads');
const filteredSongs = await Promise.all(
special.songs
.filter(ss => ss.song && ss.song.filename)
.map(async (ss) => {
const filePath = path.join(uploadsDir, ss.song.filename);
try {
// Prüfe ob Datei existiert und zugänglich ist
await access(filePath);
return ss;
} catch (error) {
// Datei existiert nicht oder ist nicht zugänglich
console.warn(`[API] Song file not available: ${ss.song.filename} (may be syncing)`);
return null;
}
})
);
// Entferne null-Werte (Songs ohne verfügbare Dateien)
const availableSongs = filteredSongs.filter((ss): ss is typeof special.songs[0] => ss !== null);
return NextResponse.json({
...special,
songs: availableSongs,
}, {
headers: {
'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
'Pragma': 'no-cache',
'Expires': '0',
},
});
}

View File

@@ -0,0 +1,69 @@
import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
import { requireStaffAuth } from '@/lib/auth';
const prisma = new PrismaClient();
export async function PUT(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
const { error, context } = await requireStaffAuth(request);
if (error || !context) return error!;
if (context.role !== 'curator') {
return NextResponse.json(
{ error: 'Only curators can access this endpoint' },
{ status: 403 }
);
}
try {
const { id } = await params;
const specialId = Number(id);
const { songId, startTime, order } = await request.json();
if (!specialId || Number.isNaN(specialId)) {
return NextResponse.json({ error: 'Invalid special id' }, { status: 400 });
}
if (!songId || typeof startTime !== 'number') {
return NextResponse.json({ error: 'Missing songId or startTime' }, { status: 400 });
}
// Prüfen, ob dieses Special dem Kurator zugeordnet ist
const assignment = await prisma.curatorSpecial.findFirst({
where: { curatorId: context.curator.id, specialId },
});
if (!assignment) {
return NextResponse.json(
{ error: 'Forbidden: You are not allowed to edit this special' },
{ status: 403 }
);
}
const specialSong = await prisma.specialSong.update({
where: {
specialId_songId: {
specialId,
songId,
},
},
data: {
startTime,
order,
},
include: {
song: true,
},
});
return NextResponse.json(specialSong);
} catch (e) {
console.error('Error updating curator special song:', e);
return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
}
}

View File

@@ -0,0 +1,47 @@
import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
import { requireStaffAuth } from '@/lib/auth';
const prisma = new PrismaClient();
export async function GET(request: NextRequest) {
const { error, context } = await requireStaffAuth(request);
if (error || !context) return error!;
if (context.role !== 'curator') {
return NextResponse.json(
{ error: 'Only curators can access this endpoint' },
{ status: 403 }
);
}
// Specials, die diesem Kurator zugewiesen sind
const assignments = await prisma.curatorSpecial.findMany({
where: { curatorId: context.curator.id },
select: { specialId: true },
});
if (assignments.length === 0) {
return NextResponse.json([]);
}
const specialIds = assignments.map(a => a.specialId);
const specials = await prisma.special.findMany({
where: { id: { in: specialIds } },
include: {
songs: true,
},
orderBy: { id: 'asc' },
});
const result = specials.map(special => ({
id: special.id,
name: special.name,
songCount: special.songs.length,
}));
return NextResponse.json(result);
}

View File

@@ -0,0 +1,107 @@
import { NextRequest, NextResponse } from 'next/server';
const OPENROUTER_API_KEY = process.env.OPENROUTER_API_KEY;
const OPENROUTER_MODEL = 'anthropic/claude-3.5-haiku';
export async function POST(request: NextRequest) {
try {
const { message } = await request.json();
if (!message || typeof message !== 'string') {
return NextResponse.json(
{ error: 'Message is required and must be a string' },
{ status: 400 }
);
}
if (!OPENROUTER_API_KEY) {
console.error('OPENROUTER_API_KEY is not configured');
// Fallback: return original message if API key is missing
return NextResponse.json({ rewrittenMessage: message });
}
const prompt = `You are a content moderation assistant. Analyze the following message and determine if it is truly inappropriate, unfriendly, sexist, or offensive.
Rules:
- ONLY rewrite the message if it is genuinely unfriendly, sexist, inappropriate, or offensive
- If the message is polite, constructive, or even just neutral/critical feedback, return it UNCHANGED
- If the message needs rewriting, rewrite it to express the COMPLETE OPPOSITE meaning - make it positive, respectful, and appreciative
- Maintain the original language (German or English)
- Return ONLY the message text (either unchanged original or rewritten version), nothing else
Message: "${message}"`;
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${OPENROUTER_API_KEY}`,
'Content-Type': 'application/json',
'HTTP-Referer': 'https://hoerdle.elpatron.me',
'X-Title': 'Hördle Message Rewriter'
},
body: JSON.stringify({
model: OPENROUTER_MODEL,
messages: [
{
role: 'user',
content: prompt
}
],
temperature: 0.7,
max_tokens: 500
})
});
if (!response.ok) {
console.error('OpenRouter API error:', await response.text());
// Fallback: return original message
return NextResponse.json({ rewrittenMessage: message });
}
const data = await response.json();
let rewrittenMessage = data.choices?.[0]?.message?.content?.trim() || message;
// Remove any explanatory comments in parentheses that the AI might add
// e.g., "(This message is a friendly, positive comment expressing appreciation. No rewriting is necessary.)"
rewrittenMessage = rewrittenMessage.replace(/\s*\([^)]*\)\s*/g, '').trim();
// Remove surrounding quotes if present (AI sometimes adds quotes)
// Handle both single and double quotes, and multiple layers of quotes
rewrittenMessage = rewrittenMessage.replace(/^["']+|["']+$/g, '').trim();
// Normalize both messages for comparison (remove extra whitespace, normalize quotes, case-insensitive)
const normalizeForComparison = (text: string): string => {
return text
.trim()
.replace(/["']/g, '') // Remove all quotes for comparison
.replace(/\s+/g, ' ') // Normalize whitespace
.toLowerCase()
.replace(/[.,!?;:]\s*$/, ''); // Remove trailing punctuation for comparison
};
const originalTrimmed = message.trim();
const rewrittenTrimmed = rewrittenMessage.trim();
const originalNormalized = normalizeForComparison(originalTrimmed);
const rewrittenNormalized = normalizeForComparison(rewrittenTrimmed);
// Check if message was actually changed (content-wise, not just formatting)
// Only consider it changed if the normalized content is different
const wasChanged = originalNormalized !== rewrittenNormalized;
if (wasChanged) {
rewrittenMessage = rewrittenTrimmed + " (autocorrected by Polite-Bot)";
} else {
// Return original message if not changed (without suffix)
rewrittenMessage = originalTrimmed;
}
return NextResponse.json({ rewrittenMessage });
} catch (error) {
console.error('Error rewriting message:', error);
return NextResponse.json(
{ error: 'Internal Server Error' },
{ status: 500 }
);
}
}

View File

@@ -81,11 +81,12 @@ export async function POST(request: Request) {
let assignments: { genreIds: Set<number>; specialIds: Set<number> } | null = null;
if (context.role === 'curator') {
assignments = await getCuratorAssignments(context.curator.id);
const curatorAssignments = await getCuratorAssignments(context.curator.id);
assignments = curatorAssignments;
// Validate genre/special toggles are within curator's assignments
if (hasGenreToggle) {
const invalidGenre = genreToggleIds.some((id: number) => !assignments.genreIds.has(id));
const invalidGenre = genreToggleIds.some((id: number) => !curatorAssignments.genreIds.has(id));
if (invalidGenre) {
return NextResponse.json(
{ error: 'Curators may only toggle their own genres' },
@@ -95,7 +96,7 @@ export async function POST(request: Request) {
}
if (hasSpecialToggle) {
const invalidSpecial = specialToggleIds.some((id: number) => !assignments.specialIds.has(id));
const invalidSpecial = specialToggleIds.some((id: number) => !curatorAssignments.specialIds.has(id));
if (invalidSpecial) {
return NextResponse.json(
{ error: 'Curators may only toggle their own specials' },

View File

@@ -214,6 +214,7 @@ export async function POST(request: Request) {
// Validate and extract metadata from file
let metadata;
let releaseYear: number | null = null;
let validationInfo = {
isValid: true,
hasCover: false,
@@ -244,6 +245,11 @@ export async function POST(request: Request) {
artist = metadata.common.albumartist;
}
// Try to extract release year from tags (preferred over external APIs)
if (typeof metadata.common.year === 'number') {
releaseYear = metadata.common.year;
}
// Validation info
validationInfo.hasCover = !!metadata.common.picture?.[0];
validationInfo.format = metadata.format.container || 'unknown';
@@ -338,18 +344,20 @@ export async function POST(request: Request) {
console.error('Failed to extract cover image:', e);
}
// Fetch release year from iTunes
let releaseYear = null;
// Fetch release year from iTunes only if not already present from tags
if (releaseYear == null) {
try {
const { getReleaseYearFromItunes } = await import('@/lib/itunes');
releaseYear = await getReleaseYearFromItunes(artist, title);
const fetchedYear = await getReleaseYearFromItunes(artist, title);
if (releaseYear) {
if (fetchedYear) {
releaseYear = fetchedYear;
console.log(`Fetched release year ${releaseYear} from iTunes for "${title}" by "${artist}"`);
}
} catch (e) {
console.error('Failed to fetch release year:', e);
}
}
const song = await prisma.song.create({
data: {

View File

@@ -43,18 +43,20 @@ export async function PUT(
try {
const { id } = await params;
const specialId = parseInt(id);
const { name, maxAttempts, unlockSteps, launchDate, endDate, curator } = await request.json();
const { name, maxAttempts, unlockSteps, launchDate, endDate, curator, hidden } = await request.json();
const updateData: any = {};
if (name !== undefined) updateData.name = name;
if (maxAttempts !== undefined) updateData.maxAttempts = maxAttempts;
if (unlockSteps !== undefined) updateData.unlockSteps = typeof unlockSteps === 'string' ? unlockSteps : JSON.stringify(unlockSteps);
if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
if (curator !== undefined) updateData.curator = curator || null;
if (hidden !== undefined) updateData.hidden = Boolean(hidden);
const special = await prisma.special.update({
where: { id: specialId },
data: {
name,
maxAttempts,
unlockSteps: typeof unlockSteps === 'string' ? unlockSteps : JSON.stringify(unlockSteps),
launchDate: launchDate ? new Date(launchDate) : null,
endDate: endDate ? new Date(endDate) : null,
curator: curator || null,
}
data: updateData
});
return NextResponse.json(special);

View File

@@ -35,11 +35,26 @@ export async function POST(request: Request) {
const authError = await requireAdminAuth(request as any);
if (authError) return authError;
const { name, subtitle, maxAttempts = 7, unlockSteps = '[2,4,7,11,16,30,60]', launchDate, endDate, curator } = await request.json();
const { name, subtitle, maxAttempts = 7, unlockSteps = '[2,4,7,11,16,30,60]', launchDate, endDate, curator, hidden = false } = await request.json();
if (!name) {
return NextResponse.json({ error: 'Name is required' }, { status: 400 });
}
// Validate unlockSteps JSON
if (unlockSteps) {
try {
const parsed = JSON.parse(unlockSteps);
if (!Array.isArray(parsed)) {
return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
}
if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
}
} catch (e) {
return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
}
}
// Ensure name is stored as JSON
const nameData = typeof name === 'string' ? { de: name, en: name } : name;
const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
@@ -53,6 +68,7 @@ export async function POST(request: Request) {
launchDate: launchDate ? new Date(launchDate) : null,
endDate: endDate ? new Date(endDate) : null,
curator: curator || null,
hidden: Boolean(hidden),
},
});
return NextResponse.json(special);
@@ -76,11 +92,26 @@ export async function PUT(request: Request) {
const authError = await requireAdminAuth(request as any);
if (authError) return authError;
const { id, name, subtitle, maxAttempts, unlockSteps, launchDate, endDate, curator } = await request.json();
const { id, name, subtitle, maxAttempts, unlockSteps, launchDate, endDate, curator, hidden } = await request.json();
if (!id) {
return NextResponse.json({ error: 'ID required' }, { status: 400 });
}
// Validate unlockSteps JSON if provided
if (unlockSteps !== undefined) {
try {
const parsed = JSON.parse(unlockSteps);
if (!Array.isArray(parsed)) {
return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
}
if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
}
} catch (e) {
return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
}
}
const updateData: any = {};
if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
@@ -89,6 +120,7 @@ export async function PUT(request: Request) {
if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
if (curator !== undefined) updateData.curator = curator || null;
if (hidden !== undefined) updateData.hidden = Boolean(hidden);
const updated = await prisma.special.update({
where: { id: Number(id) },

View File

@@ -2,6 +2,8 @@
import { useEffect, useRef, useState } from 'react';
import { useTranslations, useLocale } from 'next-intl';
import { Link } from '@/lib/navigation';
import HelpTooltip from '@/components/HelpTooltip';
interface Genre {
id: number;
@@ -20,6 +22,7 @@ interface Song {
filename: string;
createdAt: string;
releaseYear: number | null;
coverImage: string | null;
activations?: number;
puzzles?: any[];
genres: Genre[];
@@ -83,6 +86,8 @@ function getCuratorUploadHeaders() {
export default function CuratorPageClient() {
const t = useTranslations('Curator');
const tNav = useTranslations('Navigation');
const tHelp = useTranslations('CuratorHelp');
const locale = useLocale();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [isAuthenticated, setIsAuthenticated] = useState(false);
@@ -103,6 +108,7 @@ export default function CuratorPageClient() {
// Upload state (analog zum Admin-Upload, aber vereinfacht)
const [files, setFiles] = useState<File[]>([]);
const [uploadGenreIds, setUploadGenreIds] = useState<number[]>([]);
const [uploadSpecialIds, setUploadSpecialIds] = useState<number[]>([]);
const [isUploading, setIsUploading] = useState(false);
const [isDragging, setIsDragging] = useState(false);
const [uploadProgress, setUploadProgress] = useState<{ current: number; total: number }>({
@@ -123,6 +129,7 @@ export default function CuratorPageClient() {
const [itemsPerPage, setItemsPerPage] = useState(10);
const [playingSongId, setPlayingSongId] = useState<number | null>(null);
const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
const [hoveredCoverSongId, setHoveredCoverSongId] = useState<number | null>(null);
// Comments state
const [comments, setComments] = useState<CuratorComment[]>([]);
@@ -530,6 +537,12 @@ export default function CuratorPageClient() {
);
};
const toggleUploadSpecial = (specialId: number) => {
setUploadSpecialIds(prev =>
prev.includes(specialId) ? prev.filter(id => id !== specialId) : [...prev, specialId]
);
};
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const selected = Array.from(e.target.files || []);
if (selected.length === 0) return;
@@ -632,8 +645,8 @@ export default function CuratorPageClient() {
setFiles([]);
setIsUploading(false);
// Genres den erfolgreich hochgeladenen Songs zuweisen
if (uploadGenreIds.length > 0) {
// Genres/Specials den erfolgreich hochgeladenen Songs zuweisen
if (uploadGenreIds.length > 0 || uploadSpecialIds.length > 0) {
const successfulUploads = results.filter(r => r.success && r.song);
for (const result of successfulUploads) {
try {
@@ -645,12 +658,13 @@ export default function CuratorPageClient() {
title: result.song.title,
artist: result.song.artist,
releaseYear: result.song.releaseYear,
genreIds: uploadGenreIds,
genreIds: uploadGenreIds.length > 0 ? uploadGenreIds : undefined,
specialIds: uploadSpecialIds.length > 0 ? uploadSpecialIds : undefined,
}),
});
} catch {
// Fehler beim Genre-Assigning werden nur geloggt, nicht abgebrochen
console.error(`Failed to assign genres to ${result.song.title}`);
// Fehler beim Zuweisen werden nur geloggt, nicht abgebrochen
console.error(`Failed to assign genres/specials to ${result.song.title}`);
}
}
}
@@ -787,7 +801,14 @@ export default function CuratorPageClient() {
}}
>
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>Kuratoren-Dashboard</h1>
<HelpTooltip
shortText={tHelp('tooltipDashboardShort')}
longText={tHelp('tooltipDashboardLong')}
position="bottom"
/>
</div>
{curatorInfo && (
<p style={{ color: '#4b5563', fontSize: '0.9rem' }}>
{t('loggedInAs', { username: curatorInfo.username })}
@@ -795,6 +816,45 @@ export default function CuratorPageClient() {
</p>
)}
</div>
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
<Link
href="/curator/specials"
style={{
padding: '0.5rem 1rem',
background: '#10b981',
color: 'white',
textDecoration: 'none',
borderRadius: '0.375rem',
fontSize: '0.9rem',
display: 'inline-flex',
alignItems: 'center',
gap: '0.25rem',
lineHeight: '1.5',
boxSizing: 'border-box',
fontFamily: 'inherit',
}}
>
{t('curateSpecialsButton')}
</Link>
<Link
href="/curator/help"
style={{
padding: '0.5rem 1rem',
background: '#3b82f6',
color: 'white',
textDecoration: 'none',
borderRadius: '0.375rem',
fontSize: '0.9rem',
display: 'inline-flex',
alignItems: 'center',
gap: '0.25rem',
lineHeight: '1.5',
boxSizing: 'border-box',
fontFamily: 'inherit',
}}
>
{tHelp('helpButton')}
</Link>
<button
type="button"
onClick={handleLogout}
@@ -805,10 +865,17 @@ export default function CuratorPageClient() {
border: 'none',
borderRadius: '0.375rem',
cursor: 'pointer',
fontSize: '0.9rem',
display: 'inline-flex',
alignItems: 'center',
lineHeight: '1.5',
boxSizing: 'border-box',
fontFamily: 'inherit',
}}
>
{t('logout')}
</button>
</div>
</header>
{loading && <p>{t('loadingData')}</p>}
@@ -825,9 +892,16 @@ export default function CuratorPageClient() {
<section style={{ marginBottom: '2rem' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
<div style={{ display: 'flex', alignItems: 'baseline', gap: '0.75rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<h2 style={{ fontSize: '1.25rem', marginBottom: 0 }}>
{t('commentsTitle')} ({comments.length})
</h2>
<HelpTooltip
shortText={tHelp('tooltipCommentsShort')}
longText={tHelp('tooltipCommentsLong')}
position="right"
/>
</div>
{hasUnread && (
<span style={{
padding: '0.25rem 0.75rem',
@@ -978,7 +1052,14 @@ export default function CuratorPageClient() {
})()}
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.25rem', marginBottom: '0.75rem' }}>{t('uploadSectionTitle')}</h2>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
<h2 style={{ fontSize: '1.25rem', margin: 0 }}>{t('uploadSectionTitle')}</h2>
<HelpTooltip
shortText={tHelp('tooltipUploadShort')}
longText={tHelp('tooltipUploadLong')}
position="right"
/>
</div>
<p style={{ marginBottom: '0.75rem', color: '#4b5563', fontSize: '0.9rem' }}>
{t('uploadSectionDescription')}
</p>
@@ -1078,7 +1159,16 @@ export default function CuratorPageClient() {
)}
<div>
<div style={{ fontWeight: 500, marginBottom: '0.25rem' }}>{t('assignGenresLabel')}</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
<div style={{ fontWeight: 500 }}>{t('assignGenresLabel')}</div>
<HelpTooltip
shortText={tHelp('tooltipGenreAssignmentShort')}
longText={tHelp('tooltipGenreAssignmentLong')}
position="right"
/>
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
{genres
.filter(g => curatorInfo?.genreIds?.includes(g.id))
@@ -1112,6 +1202,47 @@ export default function CuratorPageClient() {
</div>
</div>
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem', marginTop: '0.5rem' }}>
<div style={{ fontWeight: 500 }}>{t('assignSpecialsLabel')}</div>
<HelpTooltip
shortText={tHelp('tooltipSpecialAssignmentShort')}
longText={tHelp('tooltipSpecialAssignmentLong')}
position="right"
/>
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
{specials
.filter(s => curatorInfo?.specialIds?.includes(s.id))
.map(special => (
<label
key={special.id}
style={{
display: 'flex',
alignItems: 'center',
gap: '0.25rem',
padding: '0.25rem 0.5rem',
borderRadius: '999px',
background: uploadSpecialIds.includes(special.id) ? '#fef3c7' : '#f3f4f6',
fontSize: '0.8rem',
cursor: 'pointer',
}}
>
<input
type="checkbox"
checked={uploadSpecialIds.includes(special.id)}
onChange={() => toggleUploadSpecial(special.id)}
/>
{typeof special.name === 'string'
? special.name
: special.name?.de ?? special.name?.en}
</label>
))}
</div>
</div>
</div>
</div>
<button
type="submit"
disabled={isUploading || files.length === 0}
@@ -1154,15 +1285,23 @@ export default function CuratorPageClient() {
</section>
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.25rem', marginBottom: '0.75rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
<h2 style={{ fontSize: '1.25rem', margin: 0 }}>
{t('tracklistTitle', { count: filteredSongs.length })}
</h2>
<HelpTooltip
shortText={tHelp('tooltipTracklistShort')}
longText={tHelp('tooltipTracklistLong')}
position="right"
/>
</div>
<p style={{ marginBottom: '0.75rem', color: '#4b5563', fontSize: '0.9rem' }}>
{t('tracklistDescription')}
</p>
{/* Suche & Filter */}
<div style={{ marginBottom: '0.75rem', display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
<div style={{ marginBottom: '0.75rem', display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
<div style={{ flex: '1', minWidth: '200px', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
<input
type="text"
placeholder={t('searchPlaceholder')}
@@ -1179,6 +1318,13 @@ export default function CuratorPageClient() {
border: '1px solid #d1d5db',
}}
/>
<HelpTooltip
shortText={tHelp('tooltipSearchShort')}
longText={tHelp('tooltipSearchLong')}
position="top"
/>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
<select
value={selectedFilter}
onChange={e => {
@@ -1218,6 +1364,12 @@ export default function CuratorPageClient() {
))}
</optgroup>
</select>
<HelpTooltip
shortText={tHelp('tooltipFilterShort')}
longText={tHelp('tooltipFilterLong')}
position="top"
/>
</div>
{(searchQuery || selectedFilter) && (
<button
type="button"
@@ -1256,9 +1408,16 @@ export default function CuratorPageClient() {
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<strong style={{ fontSize: '1rem' }}>
{t('batchEditTitle') || `Batch Edit: ${selectedSongIds.size} ${selectedSongIds.size === 1 ? 'song' : 'songs'} selected`}
</strong>
<HelpTooltip
shortText={tHelp('tooltipBatchEditShort')}
longText={tHelp('tooltipBatchEditLong')}
position="right"
/>
</div>
<button
type="button"
onClick={clearSelection}
@@ -1278,9 +1437,16 @@ export default function CuratorPageClient() {
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{/* Genre Toggle */}
<div>
<label style={{ display: 'block', fontWeight: 500, marginBottom: '0.25rem', fontSize: '0.9rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
<label style={{ display: 'block', fontWeight: 500, fontSize: '0.9rem', margin: 0 }}>
{t('batchToggleGenres') || 'Toggle Genres'}
</label>
<HelpTooltip
shortText={tHelp('tooltipBatchGenreToggleShort')}
longText={tHelp('tooltipBatchGenreToggleLong')}
position="right"
/>
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
{genres
.filter(g => curatorInfo?.genreIds?.includes(g.id))
@@ -1319,9 +1485,16 @@ export default function CuratorPageClient() {
{/* Special Toggle */}
<div>
<label style={{ display: 'block', fontWeight: 500, marginBottom: '0.25rem', fontSize: '0.9rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
<label style={{ display: 'block', fontWeight: 500, fontSize: '0.9rem', margin: 0 }}>
{t('batchToggleSpecials') || 'Toggle Specials'}
</label>
<HelpTooltip
shortText={tHelp('tooltipBatchSpecialToggleShort')}
longText={tHelp('tooltipBatchSpecialToggleLong')}
position="right"
/>
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
{specials
.filter(s => curatorInfo?.specialIds?.includes(s.id))
@@ -1361,9 +1534,16 @@ export default function CuratorPageClient() {
{/* Artist Change */}
<div>
<label style={{ display: 'block', fontWeight: 500, marginBottom: '0.25rem', fontSize: '0.9rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
<label style={{ display: 'block', fontWeight: 500, fontSize: '0.9rem', margin: 0 }}>
{t('batchChangeArtist') || 'Change Artist'}
</label>
<HelpTooltip
shortText={tHelp('tooltipBatchArtistShort')}
longText={tHelp('tooltipBatchArtistLong')}
position="right"
/>
</div>
<input
type="text"
value={batchArtist}
@@ -1435,7 +1615,7 @@ export default function CuratorPageClient() {
</div>
)}
<div style={{ overflowX: 'auto' }}>
<div style={{ overflowX: 'auto', position: 'relative' }}>
<table
style={{
width: '100%',
@@ -1485,6 +1665,7 @@ export default function CuratorPageClient() {
>
{t('columnYear')} {sortField === 'releaseYear' && (sortDirection === 'asc' ? '↑' : '↓')}
</th>
<th style={{ padding: '0.5rem' }}>{t('columnCover')}</th>
<th style={{ padding: '0.5rem' }}>{t('columnGenresSpecials')}</th>
<th
style={{ padding: '0.5rem', cursor: 'pointer' }}
@@ -1505,7 +1686,17 @@ export default function CuratorPageClient() {
{t('columnRating')} {sortField === 'averageRating' && (sortDirection === 'asc' ? '↑' : '↓')}
</th>
<th style={{ padding: '0.5rem' }}>{t('columnExcludeGlobal')}</th>
<th style={{ padding: '0.5rem' }}>{t('columnActions')}</th>
<th
style={{
padding: '0.5rem',
position: 'sticky',
right: 0,
backgroundColor: 'white',
zIndex: 10,
}}
>
{t('columnActions')}
</th>
</tr>
</thead>
<tbody>
@@ -1520,12 +1711,13 @@ export default function CuratorPageClient() {
const isSelected = selectedSongIds.has(song.id);
const rowBackgroundColor = isSelected ? '#eff6ff' : 'white';
return (
<tr
key={song.id}
style={{
borderBottom: '1px solid #f3f4f6',
backgroundColor: isSelected ? '#eff6ff' : 'transparent',
backgroundColor: rowBackgroundColor,
}}
>
<td style={{ padding: '0.5rem' }}>
@@ -1600,6 +1792,48 @@ export default function CuratorPageClient() {
'-'
)}
</td>
<td
style={{
padding: '0.5rem',
textAlign: 'center',
position: 'relative',
cursor: song.coverImage ? 'pointer' : 'default'
}}
onMouseEnter={() => song.coverImage && setHoveredCoverSongId(song.id)}
onMouseLeave={() => setHoveredCoverSongId(null)}
>
{song.coverImage ? '✓' : '-'}
{hoveredCoverSongId === song.id && song.coverImage && (
<div
style={{
position: 'absolute',
top: '100%',
left: '50%',
transform: 'translateX(-50%)',
marginTop: '0.5rem',
zIndex: 1000,
padding: '0.5rem',
background: 'white',
border: '1px solid #d1d5db',
borderRadius: '0.5rem',
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
pointerEvents: 'none',
}}
>
<img
src={`/api/covers/${song.coverImage}`}
alt={`Cover für ${song.title}`}
style={{
width: '200px',
height: '200px',
objectFit: 'cover',
borderRadius: '0.25rem',
display: 'block',
}}
/>
</div>
)}
</td>
<td style={{ padding: '0.5rem' }}>
{isEditing ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
@@ -1787,6 +2021,10 @@ export default function CuratorPageClient() {
style={{
padding: '0.5rem',
whiteSpace: 'nowrap',
position: 'sticky',
right: 0,
backgroundColor: rowBackgroundColor,
zIndex: 10,
}}
>
{isEditing ? (
@@ -1802,6 +2040,7 @@ export default function CuratorPageClient() {
border: 'none',
borderRadius: '0.25rem',
cursor: 'pointer',
whiteSpace: 'nowrap',
}}
>
💾
@@ -1815,6 +2054,7 @@ export default function CuratorPageClient() {
border: 'none',
borderRadius: '0.25rem',
cursor: 'pointer',
whiteSpace: 'nowrap',
}}
>

View File

@@ -0,0 +1,171 @@
'use client';
import { useTranslations, useLocale } from 'next-intl';
import { Link } from '@/lib/navigation';
export default function CuratorHelpClient() {
const t = useTranslations('CuratorHelp');
const locale = useLocale();
return (
<main style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
<header style={{ marginBottom: '2rem' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>{t('title')}</h1>
<Link
href="/curator"
style={{
padding: '0.5rem 1rem',
background: '#6b7280',
color: 'white',
textDecoration: 'none',
borderRadius: '0.375rem',
fontSize: '0.9rem',
}}
>
{t('backToDashboard')}
</Link>
</div>
</header>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
{/* Einführung */}
<section>
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
{t('introductionTitle')}
</h2>
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
<p style={{ marginBottom: '1rem' }}>{t('introductionText')}</p>
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('permissionsTitle')}</h3>
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
<li style={{ marginBottom: '0.5rem' }}>{t('permission1')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('permission2')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('permission3')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('permission4')}</li>
</ul>
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
<strong>{t('note')}:</strong> {t('permissionNote')}
</p>
</div>
</section>
{/* Song-Upload */}
<section>
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
{t('uploadTitle')}
</h2>
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('uploadStepsTitle')}</h3>
<ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep1')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep2')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep3')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep4')}</li>
</ol>
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('uploadBestPracticesTitle')}</h3>
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice1')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice2')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice3')}</li>
</ul>
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#dbeafe', borderRadius: '0.375rem', border: '1px solid #3b82f6' }}>
<strong>{t('tip')}:</strong> {t('uploadTip')}
</p>
</div>
</section>
{/* Song-Bearbeitung */}
<section>
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
{t('editingTitle')}
</h2>
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('singleEditTitle')}</h3>
<p style={{ marginBottom: '1rem' }}>{t('singleEditText')}</p>
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('batchEditTitle')}</h3>
<p style={{ marginBottom: '1rem' }}>{t('batchEditText')}</p>
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature1')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature2')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature3')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature4')}</li>
</ul>
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('genreSpecialAssignmentTitle')}</h3>
<p style={{ marginBottom: '1rem' }}>{t('genreSpecialAssignmentText')}</p>
</div>
</section>
{/* Specials kuratieren */}
<section>
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
{t('curateSpecialsHelpTitle')}
</h2>
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
<p style={{ marginBottom: '1rem' }}>{t('curateSpecialsHelpIntro')}</p>
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>
{t('curateSpecialsHelpStepsTitle')}
</h3>
<ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep1')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep2')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep3')}</li>
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep4')}</li>
</ol>
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
<strong>{t('note')}:</strong> {t('curateSpecialsPermissionsNote')}
</p>
</div>
</section>
{/* Kommentar-Verwaltung */}
<section>
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
{t('commentsTitle')}
</h2>
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
<p style={{ marginBottom: '1rem' }}>{t('commentsText')}</p>
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('commentsActionsTitle')}</h3>
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
<li style={{ marginBottom: '0.5rem' }}><strong>{t('markAsRead')}:</strong> {t('markAsReadText')}</li>
<li style={{ marginBottom: '0.5rem' }}><strong>{t('archive')}:</strong> {t('archiveText')}</li>
</ul>
</div>
</section>
{/* Best Practices */}
<section>
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
{t('bestPracticesTitle')}
</h2>
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice1')}</li>
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice2')}</li>
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice3')}</li>
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice4')}</li>
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice5')}</li>
</ul>
</div>
</section>
{/* Troubleshooting */}
<section>
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
{t('troubleshootingTitle')}
</h2>
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ1')}</h3>
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA1')}</p>
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ2')}</h3>
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA2')}</p>
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ3')}</h3>
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA3')}</p>
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ4')}</h3>
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA4')}</p>
</div>
</section>
</div>
</main>
);
}

View File

@@ -0,0 +1,8 @@
export const dynamic = 'force-dynamic';
import CuratorHelpClient from './CuratorHelpClient';
export default function CuratorHelpPage() {
return <CuratorHelpClient />;
}

View File

@@ -0,0 +1,156 @@
'use client';
import { useEffect, useState } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import { useLocale, useTranslations } from 'next-intl';
import { Link } from '@/lib/navigation';
import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
import { getLocalizedValue } from '@/lib/i18n';
interface CuratorSpecial {
id: number;
name: string | { de?: string; en?: string };
songCount: number;
}
export default function CuratorSpecialsClient() {
const router = useRouter();
const pathname = usePathname();
const urlLocale = pathname?.split('/')[1] as 'de' | 'en' | undefined;
const intlLocale = useLocale() as 'de' | 'en';
const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
const t = useTranslations('Curator');
const [specials, setSpecials] = useState<CuratorSpecial[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchSpecials = async () => {
try {
setLoading(true);
const res = await fetch('/api/curator/specials', {
headers: getCuratorAuthHeaders(),
});
if (!res.ok) {
if (res.status === 403) {
setError(t('specialForbidden'));
} else {
setError('Failed to load specials');
}
return;
}
const data = await res.json();
setSpecials(data);
} catch (e) {
setError('Failed to load specials');
} finally {
setLoading(false);
}
};
fetchSpecials();
}, [t]);
if (loading) {
return (
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
<p>{t('loading')}</p>
</div>
);
}
if (error) {
return (
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
<p style={{ color: 'red' }}>{error}</p>
<Link
href="/curator"
style={{
display: 'inline-block',
marginTop: '1rem',
padding: '0.5rem 1rem',
background: '#6b7280',
color: 'white',
textDecoration: 'none',
borderRadius: '0.375rem',
fontSize: '0.9rem',
}}
>
{t('backToDashboard') || 'Back to Dashboard'}
</Link>
</div>
);
}
return (
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
<header style={{ marginBottom: '2rem' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>
{t('curateSpecialsTitle') || 'Curate Specials'}
</h1>
<Link
href="/curator"
style={{
padding: '0.5rem 1rem',
background: '#6b7280',
color: 'white',
textDecoration: 'none',
borderRadius: '0.375rem',
fontSize: '0.9rem',
}}
>
{t('backToDashboard') || 'Back to Dashboard'}
</Link>
</div>
</header>
{specials.length === 0 ? (
<div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
<p>{t('noSpecialsAssigned') || 'No specials assigned to you.'}</p>
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{specials.map((special) => (
<Link
key={special.id}
href={`/curator/specials/${special.id}`}
style={{
display: 'block',
padding: '1.5rem',
background: '#f9fafb',
border: '1px solid #e5e7eb',
borderRadius: '0.5rem',
textDecoration: 'none',
color: 'inherit',
transition: 'all 0.2s',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#f3f4f6';
e.currentTarget.style.borderColor = '#d1d5db';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = '#f9fafb';
e.currentTarget.style.borderColor = '#e5e7eb';
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>
<h2 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#111827' }}>
{getLocalizedValue(special.name, locale)}
</h2>
<p style={{ fontSize: '0.875rem', color: '#6b7280' }}>
{special.songCount} {special.songCount === 1 ? 'song' : 'songs'}
</p>
</div>
<div style={{ fontSize: '1.5rem', color: '#10b981' }}></div>
</div>
</Link>
))}
</div>
)}
</div>
);
}

View File

@@ -0,0 +1,178 @@
'use client';
export const dynamic = 'force-dynamic';
import { useEffect, useState } from 'react';
import { useParams, useRouter, usePathname } from 'next/navigation';
import { useLocale, useTranslations } from 'next-intl';
import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
import HelpTooltip from '@/components/HelpTooltip';
export default function CuratorSpecialEditorPage() {
const params = useParams();
const router = useRouter();
const pathname = usePathname();
const urlLocale = pathname?.split('/')[1] as 'de' | 'en' | undefined;
const intlLocale = useLocale() as 'de' | 'en';
const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
const t = useTranslations('Curator');
const tHelp = useTranslations('CuratorHelp');
const specialId = params?.id as string;
const [special, setSpecial] = useState<CurateSpecial | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const fetchSpecial = async (showLoading = true) => {
try {
if (showLoading) {
setLoading(true);
}
const res = await fetch(`/api/curator/specials/${specialId}`, {
headers: getCuratorAuthHeaders(),
cache: 'no-store',
});
if (res.status === 403) {
setError(t('specialForbidden'));
return;
}
if (!res.ok) {
setError('Failed to load special');
return;
}
const data = await res.json();
setSpecial(data);
} catch (e) {
setError('Failed to load special');
} finally {
if (showLoading) {
setLoading(false);
}
}
};
useEffect(() => {
if (specialId) {
fetchSpecial(true);
}
}, [specialId, t]);
const handleSaveStartTime = async (songId: number, startTime: number) => {
const res = await fetch(`/api/curator/specials/${specialId}/songs`, {
method: 'PUT',
headers: {
...getCuratorAuthHeaders(),
'Content-Type': 'application/json',
},
body: JSON.stringify({ songId, startTime }),
});
if (res.status === 403) {
setError(t('specialForbidden'));
} else if (!res.ok) {
setError('Failed to save changes');
} else {
// Reload special data to update the start time in the song list
await fetchSpecial(false);
}
};
if (loading) {
return (
<div style={{ padding: '2rem', textAlign: 'center' }}>
<p>{t('loadingData')}</p>
</div>
);
}
if (error) {
return (
<div style={{ padding: '2rem', textAlign: 'center' }}>
<p>{error}</p>
<button
onClick={() => router.push(`/${locale}/curator`)}
style={{
marginTop: '1rem',
padding: '0.5rem 1rem',
borderRadius: '0.5rem',
border: 'none',
background: '#e5e7eb',
cursor: 'pointer',
}}
>
{t('backToDashboard')}
</button>
</div>
);
}
if (!special) {
return (
<div style={{ padding: '2rem', textAlign: 'center' }}>
<p>{t('specialNotFound')}</p>
<button
onClick={() => router.push(`/${locale}/curator`)}
style={{
marginTop: '1rem',
padding: '0.5rem 1rem',
borderRadius: '0.5rem',
border: 'none',
background: '#e5e7eb',
cursor: 'pointer',
}}
>
{t('backToDashboard')}
</button>
</div>
);
}
return (
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<h1 style={{ fontSize: '1.75rem', fontWeight: 'bold' }}>
{t('curateSpecialHeaderPrefix')}
</h1>
<HelpTooltip
shortText={tHelp('tooltipCurateSpecialEditorShort')}
longText={tHelp('tooltipCurateSpecialEditorLong')}
position="bottom"
/>
</div>
<button
type="button"
onClick={() => router.push(`/${locale}/curator/specials`)}
style={{
padding: '0.5rem 1rem',
background: '#e5e7eb',
borderRadius: '0.5rem',
border: 'none',
cursor: 'pointer',
fontSize: '0.9rem',
}}
>
{t('backToCuratorSpecials')}
</button>
</div>
<CurateSpecialEditor
special={special}
locale={locale}
onBack={() => router.push(`/${locale}/curator/specials`)}
onSaveStartTime={handleSaveStartTime}
backLabel={t('backToCuratorSpecials')}
headerPrefix={t('curateSpecialHeaderPrefix')}
noSongsHint={t('curateSpecialNoSongs')}
noSongsSubHint={t('curateSpecialNoSongsSub')}
instructionsText={t('curateSpecialInstructions')}
savingLabel={t('saving')}
saveChangesLabel={t('saveChanges')}
savedLabel={t('saved')}
/>
</div>
);
}

View File

@@ -0,0 +1,13 @@
'use client';
// Root /curator/specials route without locale:
// redirect users to the default English locale version.
import { redirect } from 'next/navigation';
export default function CuratorSpecialsPage() {
redirect('/en/curator/specials');
}

View File

@@ -1,141 +0,0 @@
.page {
--background: #fafafa;
--foreground: #fff;
--text-primary: #000;
--text-secondary: #666;
--button-primary-hover: #383838;
--button-secondary-hover: #f2f2f2;
--button-secondary-border: #ebebeb;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
font-family: var(--font-geist-sans);
background-color: var(--background);
}
.main {
display: flex;
min-height: 100vh;
width: 100%;
max-width: 800px;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
background-color: var(--foreground);
padding: 120px 60px;
}
.intro {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 24px;
}
.intro h1 {
max-width: 320px;
font-size: 40px;
font-weight: 600;
line-height: 48px;
letter-spacing: -2.4px;
text-wrap: balance;
color: var(--text-primary);
}
.intro p {
max-width: 440px;
font-size: 18px;
line-height: 32px;
text-wrap: balance;
color: var(--text-secondary);
}
.intro a {
font-weight: 500;
color: var(--text-primary);
}
.ctas {
display: flex;
flex-direction: row;
width: 100%;
max-width: 440px;
gap: 16px;
font-size: 14px;
}
.ctas a {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
padding: 0 16px;
border-radius: 128px;
border: 1px solid transparent;
transition: 0.2s;
cursor: pointer;
width: fit-content;
font-weight: 500;
}
a.primary {
background: var(--text-primary);
color: var(--background);
gap: 8px;
}
a.secondary {
border-color: var(--button-secondary-border);
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
a.primary:hover {
background: var(--button-primary-hover);
border-color: transparent;
}
a.secondary:hover {
background: var(--button-secondary-hover);
border-color: transparent;
}
}
@media (max-width: 600px) {
.main {
padding: 48px 24px;
}
.intro {
gap: 16px;
}
.intro h1 {
font-size: 32px;
line-height: 40px;
letter-spacing: -1.92px;
}
}
@media (prefers-color-scheme: dark) {
.logo {
filter: invert();
}
.page {
--background: #000;
--foreground: #000;
--text-primary: #ededed;
--text-secondary: #999;
--button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a;
--button-secondary-border: #1a1a1a;
}
}

View File

@@ -22,8 +22,8 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
const [progress, setProgress] = useState(0);
const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
const [processedSrc, setProcessedSrc] = useState(src);
const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState(unlockedSeconds);
const [processedSrc, setProcessedSrc] = useState<string | null>(null);
const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState<number | null>(null);
useEffect(() => {
console.log('[AudioPlayer] MOUNTED');
@@ -41,7 +41,7 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
let startPos = startTime;
// If same song but more time unlocked, start from where previous segment ended
if (src === processedSrc && unlockedSeconds > processedUnlockedSeconds) {
if (processedSrc !== null && src === processedSrc && processedUnlockedSeconds !== null && unlockedSeconds > processedUnlockedSeconds) {
startPos = startTime + processedUnlockedSeconds;
}
@@ -62,8 +62,11 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
const initialPercent = unlockedSeconds > 0 ? (initialElapsed / unlockedSeconds) * 100 : 0;
setProgress(Math.min(initialPercent, 100));
setHasPlayedOnce(false); // Reset for new segment
// Only reset hasPlayedOnce if the song changed, not if just more time was unlocked
if (processedSrc !== null && src !== processedSrc) {
setHasPlayedOnce(false); // Reset for new song
onHasPlayedChange?.(false); // Notify parent
}
// Update processed state
setProcessedSrc(src);
@@ -72,7 +75,11 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
if (autoPlay) {
// Delay play slightly to ensure currentTime sticks
setTimeout(() => {
const playPromise = audioRef.current?.play();
if (audioRef.current) {
// Use startPos (which may be startTime + processedUnlockedSeconds if more time was unlocked)
// instead of always using startTime
audioRef.current.currentTime = startPos;
const playPromise = audioRef.current.play();
if (playPromise !== undefined) {
playPromise
.then(() => {
@@ -86,8 +93,16 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
setIsPlaying(false);
});
}
}
}, 150);
}
} else if (startTime !== undefined && startTime > 0) {
// If startTime is set and we haven't processed changes, ensure currentTime is at least at startTime
// This handles the case where the audio element was reset or reloaded, or when manually playing for the first time
const current = audioRef.current.currentTime;
if (current < startTime) {
audioRef.current.currentTime = startTime;
}
}
}
}, [src, unlockedSeconds, startTime, autoPlay, processedSrc, processedUnlockedSeconds]);
@@ -97,6 +112,16 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
play: () => {
if (!audioRef.current) return;
// Check if we need to reset to startTime
const current = audioRef.current.currentTime;
const elapsed = current - startTime;
// Reset if: never played before, current position is before startTime, or we've exceeded the unlocked segment
if (!hasPlayedOnce || current < startTime || elapsed >= unlockedSeconds) {
// Reset to start of segment
audioRef.current.currentTime = startTime;
}
const playPromise = audioRef.current.play();
if (playPromise !== undefined) {
playPromise
@@ -121,8 +146,35 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
if (isPlaying) {
audioRef.current.pause();
setIsPlaying(false);
} else {
// Ensure we're at the correct position before playing
const current = audioRef.current.currentTime;
const elapsed = current - startTime;
// Determine target position
let targetPos = startTime;
// If we've played before and we're within the unlocked segment, continue from current position
if (hasPlayedOnce && current >= startTime && elapsed < unlockedSeconds) {
targetPos = current; // Continue from current position
} else {
// Reset to start of segment if: never played, before startTime, or exceeded unlocked segment
targetPos = startTime;
}
// Set position before playing
audioRef.current.currentTime = targetPos;
// Ensure position sticks (browser might reset it)
setTimeout(() => {
if (audioRef.current && Math.abs(audioRef.current.currentTime - targetPos) > 0.5) {
audioRef.current.currentTime = targetPos;
}
}, 50);
audioRef.current.play();
setIsPlaying(true);
onPlay?.();
if (hasPlayedOnce) {
@@ -132,7 +184,6 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
onHasPlayedChange?.(true); // Notify parent
}
}
setIsPlaying(!isPlaying);
};
const handleTimeUpdate = () => {

View File

@@ -0,0 +1,208 @@
'use client';
import { useState } from 'react';
import WaveformEditor from '@/components/WaveformEditor';
export type LocalizedString = string | { de: string; en: string };
export interface CurateSpecialSong {
id: number;
songId: number;
startTime: number;
order: number | null;
song: {
id: number;
title: string;
artist: string;
filename: string;
};
}
export interface CurateSpecial {
id: number;
name: LocalizedString;
subtitle?: LocalizedString | null;
maxAttempts: number;
unlockSteps: string;
songs: CurateSpecialSong[];
}
export interface CurateSpecialEditorProps {
special: CurateSpecial;
locale: 'de' | 'en';
onBack: () => void;
onSaveStartTime: (songId: number, startTime: number) => Promise<void>;
backLabel?: string;
headerPrefix?: string;
noSongsHint?: string;
noSongsSubHint?: string;
instructionsText?: string;
savingLabel?: string;
saveChangesLabel?: string;
savedLabel?: string;
}
const resolveLocalized = (value: LocalizedString | null | undefined, locale: 'de' | 'en'): string | undefined => {
if (!value) return undefined;
if (typeof value === 'string') return value;
return value[locale] ?? value.en ?? value.de;
};
export default function CurateSpecialEditor({
special,
locale,
onBack,
onSaveStartTime,
backLabel = '← Back',
headerPrefix = 'Edit Special:',
noSongsHint = 'No songs assigned to this special yet.',
noSongsSubHint = 'Go back to the dashboard to add songs to this special.',
instructionsText = 'Click on the waveform to select where the puzzle should start. The highlighted region shows what players will hear.',
savingLabel = '💾 Saving...',
saveChangesLabel = '💾 Save Changes',
savedLabel = '✓ Saved',
}: CurateSpecialEditorProps) {
// Filtere Songs ohne vollständige Song-Daten (song, song.filename)
const validSongs = special.songs.filter(ss => ss.song && ss.song.filename);
const [selectedSongId, setSelectedSongId] = useState<number | null>(
validSongs.length > 0 ? validSongs[0].songId : null
);
const [pendingStartTime, setPendingStartTime] = useState<number | null>(
validSongs.length > 0 ? validSongs[0].startTime : null
);
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
const [saving, setSaving] = useState(false);
const specialName = resolveLocalized(special.name, locale) ?? `Special #${special.id}`;
const specialSubtitle = resolveLocalized(special.subtitle ?? null, locale);
const unlockSteps = JSON.parse(special.unlockSteps);
const totalDuration = unlockSteps[unlockSteps.length - 1];
const selectedSpecialSong = validSongs.find(ss => ss.songId === selectedSongId) ?? null;
const handleStartTimeChange = (newStartTime: number) => {
setPendingStartTime(newStartTime);
setHasUnsavedChanges(true);
};
const handleSave = async () => {
if (!selectedSongId || pendingStartTime === null) return;
setSaving(true);
try {
await onSaveStartTime(selectedSongId, pendingStartTime);
setHasUnsavedChanges(false);
} finally {
setSaving(false);
}
};
return (
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
<div style={{ marginBottom: '2rem' }}>
<h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
{headerPrefix} {specialName}
</h1>
{specialSubtitle && (
<p style={{ fontSize: '1.125rem', color: '#4b5563', marginTop: '0.25rem' }}>
{specialSubtitle}
</p>
)}
<p style={{ color: '#666', marginTop: '0.5rem' }}>
Max Attempts: {special.maxAttempts} | Puzzle Duration: {totalDuration}s
</p>
</div>
{validSongs.length === 0 ? (
<div style={{ padding: '2rem', background: '#f3f4f6', borderRadius: '0.5rem', textAlign: 'center' }}>
<p>{noSongsHint}</p>
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
{noSongsSubHint}
</p>
</div>
) : (
<div>
<div style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
Select Song to Curate
</h2>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '1rem' }}>
{validSongs.map(ss => (
<div
key={ss.songId}
onClick={() => {
setSelectedSongId(ss.songId);
setPendingStartTime(ss.startTime);
setHasUnsavedChanges(false);
}}
style={{
padding: '1rem',
background: selectedSongId === ss.songId ? '#4f46e5' : '#f3f4f6',
color: selectedSongId === ss.songId ? 'white' : 'black',
borderRadius: '0.5rem',
cursor: 'pointer',
border: selectedSongId === ss.songId ? '2px solid #4f46e5' : '2px solid transparent'
}}
>
<div style={{ fontWeight: 'bold' }}>{ss.song.title}</div>
<div style={{ fontSize: '0.875rem', opacity: 0.8 }}>{ss.song.artist}</div>
<div style={{ fontSize: '0.75rem', marginTop: '0.5rem', opacity: 0.7 }}>
Start: {ss.startTime}s
</div>
</div>
))}
</div>
</div>
{selectedSpecialSong && selectedSpecialSong.song && selectedSpecialSong.song.filename ? (
<div>
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
Curate: {selectedSpecialSong.song.title}
</h2>
<div style={{ background: '#f9fafb', padding: '1.5rem', borderRadius: '0.5rem' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
<p style={{ fontSize: '0.875rem', color: '#666', margin: 0 }}>
{instructionsText}
</p>
<button
onClick={handleSave}
disabled={!hasUnsavedChanges || saving}
style={{
padding: '0.5rem 1.5rem',
background: hasUnsavedChanges ? '#10b981' : '#e5e7eb',
color: hasUnsavedChanges ? 'white' : '#9ca3af',
border: 'none',
borderRadius: '0.5rem',
cursor: hasUnsavedChanges && !saving ? 'pointer' : 'not-allowed',
fontWeight: 'bold',
fontSize: '0.875rem',
whiteSpace: 'nowrap'
}}
>
{saving ? savingLabel : hasUnsavedChanges ? saveChangesLabel : savedLabel}
</button>
</div>
<WaveformEditor
audioUrl={`/api/audio/${selectedSpecialSong.song.filename}`}
startTime={pendingStartTime ?? selectedSpecialSong.startTime}
duration={totalDuration}
unlockSteps={unlockSteps}
onStartTimeChange={handleStartTimeChange}
/>
</div>
</div>
) : selectedSpecialSong ? (
<div style={{ padding: '2rem', background: '#fee2e2', borderRadius: '0.5rem', textAlign: 'center' }}>
<p style={{ color: '#991b1b', fontWeight: 'bold' }}>
Fehler: Song-Daten unvollständig. Bitte wählen Sie einen anderen Song.
</p>
</div>
) : null}
</div>
)}
</div>
);
}

View File

@@ -49,8 +49,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
const t = useTranslations('Game');
const locale = useLocale();
const { gameState, statistics, addGuess, giveUp, addReplay, addYearBonus, skipYearBonus } = useGameState(genre, maxAttempts, isSpecial);
const [hasWon, setHasWon] = useState(false);
const [hasLost, setHasLost] = useState(false);
const [hasWon, setHasWon] = useState(gameState?.isSolved ?? false);
const [hasLost, setHasLost] = useState(gameState?.isFailed ?? false);
const [shareText, setShareText] = useState(`🔗 ${t('share')}`);
const [lastAction, setLastAction] = useState<'GUESS' | 'SKIP' | null>(null);
const [isProcessingGuess, setIsProcessingGuess] = useState(false);
@@ -65,6 +65,9 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
const [commentSending, setCommentSending] = useState(false);
const [commentSent, setCommentSent] = useState(false);
const [commentError, setCommentError] = useState<string | null>(null);
const [commentCollapsed, setCommentCollapsed] = useState(true);
const [rewrittenMessage, setRewrittenMessage] = useState<string | null>(null);
const [commentAIConsent, setCommentAIConsent] = useState(false);
useEffect(() => {
const updateCountdown = () => {
@@ -85,14 +88,18 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
}, []);
useEffect(() => {
if (gameState && dailyPuzzle) {
if (gameState) {
setHasWon(gameState.isSolved);
setHasLost(gameState.isFailed);
// Show year modal if won but year not guessed yet and release year is available
if (gameState.isSolved && !gameState.yearGuessed && dailyPuzzle.releaseYear) {
if (gameState.isSolved && !gameState.yearGuessed && dailyPuzzle?.releaseYear) {
setShowYearModal(true);
}
} else {
// Reset states when gameState is null (e.g., during loading)
setHasWon(false);
setHasLost(false);
}
}, [gameState, dailyPuzzle]);
@@ -161,6 +168,12 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
);
if (!gameState) return <div>{t('loadingState')}</div>;
// Use gameState directly for isSolved/isFailed to ensure consistency when returning to completed puzzles
// Always use gameState values directly - they are the source of truth
// This ensures that when returning to a completed puzzle, the result is shown immediately
const isSolved = Boolean(gameState.isSolved);
const isFailed = Boolean(gameState.isFailed);
const handleGuess = (song: any) => {
if (isProcessingGuess) return;
// Prevent guessing if already solved or failed
@@ -173,6 +186,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
if (song.id === dailyPuzzle.songId) {
addGuess(song.title, true);
setHasWon(true);
// gameState.isSolved will be updated by useGameState
// Track puzzle solved event
if (typeof window !== 'undefined' && window.plausible) {
window.plausible('puzzle_solved', {
@@ -193,6 +207,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
if (gameState.guesses.length + 1 >= maxAttempts) {
setHasLost(true);
setHasWon(false);
// gameState.isFailed will be updated by useGameState
// Track puzzle lost event
if (typeof window !== 'undefined' && window.plausible) {
window.plausible('puzzle_solved', {
@@ -233,6 +248,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
if (gameState.guesses.length + 1 >= maxAttempts) {
setHasLost(true);
setHasWon(false);
// gameState.isFailed will be updated by useGameState
// Track puzzle lost event
if (typeof window !== 'undefined' && window.plausible) {
window.plausible('puzzle_solved', {
@@ -257,6 +273,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
giveUp(); // Ensure game is marked as failed and score reset to 0
setHasLost(true);
setHasWon(false);
// gameState.isFailed will be updated by useGameState
// Track puzzle lost event
if (typeof window !== 'undefined' && window.plausible) {
window.plausible('puzzle_solved', {
@@ -315,12 +332,13 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
};
const handleCommentSubmit = async () => {
if (!commentText.trim() || commentSending || commentSent || !dailyPuzzle) {
if (!commentText.trim() || commentSending || commentSent || !dailyPuzzle || !commentAIConsent) {
return;
}
setCommentSending(true);
setCommentError(null);
setRewrittenMessage(null);
try {
const playerIdentifier = getOrCreatePlayerId();
@@ -328,6 +346,33 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
throw new Error('Could not get player identifier');
}
// 1. Rewrite message using AI
const rewriteResponse = await fetch('/api/rewrite-message', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: commentText.trim() })
});
let finalMessage = commentText.trim();
if (rewriteResponse.ok) {
const rewriteData = await rewriteResponse.json();
if (rewriteData.rewrittenMessage) {
finalMessage = rewriteData.rewrittenMessage;
// Only show rewritten message if it was actually changed
// The API adds "(autocorrected by Polite-Bot)" suffix only if message was changed
const wasChanged = finalMessage.includes('(autocorrected by Polite-Bot)');
if (wasChanged) {
// Remove the suffix for display
const displayMessage = finalMessage.replace(/\s*\(autocorrected by Polite-Bot\)\s*/g, '').trim();
setRewrittenMessage(displayMessage);
} else {
// Ensure rewrittenMessage is not set if message wasn't changed
setRewrittenMessage(null);
}
}
}
// 2. Send comment
// For specials, genreId should be null. For global, also null. For genres, we pass null and let API determine from puzzle
const genreId = isSpecial ? null : null; // API will determine from puzzle
@@ -339,7 +384,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
body: JSON.stringify({
puzzleId: dailyPuzzle.id,
genreId: genreId,
message: commentText.trim(),
message: finalMessage,
originalMessage: commentText.trim() !== finalMessage ? commentText.trim() : undefined,
playerIdentifier: playerIdentifier
})
});
@@ -377,26 +423,37 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
if (i < gameState.guesses.length) {
if (gameState.guesses[i] === 'SKIPPED') {
emojiGrid += '⬛';
} else if (hasWon && i === gameState.guesses.length - 1) {
} else if (isSolved && i === gameState.guesses.length - 1) {
emojiGrid += '🟩';
} else {
emojiGrid += '🟥';
}
} else {
// If game is lost, fill remaining slots with black squares
emojiGrid += hasLost ? '⬛' : '⬜';
emojiGrid += isFailed ? '⬛' : '⬜';
}
}
const speaker = hasWon ? '🔉' : '🔇';
const bonusStar = (hasWon && gameState.yearGuessed && dailyPuzzle.releaseYear && gameState.scoreBreakdown.some(item => item.reason === 'Bonus: Correct Year')) ? '⭐' : '';
const speaker = isSolved ? '🔉' : '🔇';
const bonusStar = (isSolved && gameState.yearGuessed && dailyPuzzle.releaseYear && gameState.scoreBreakdown.some(item => item.reason === 'Bonus: Correct Year')) ? '⭐' : '';
const genreText = genre ? `${isSpecial ? t('special') : t('genre')}: ${genre}\n` : '';
// Use current domain from window.location to support both hoerdle.de and hördle.de
const rawHost = typeof window !== 'undefined' ? window.location.hostname : config.domain;
const protocol = typeof window !== 'undefined' ? window.location.protocol : 'https:';
// For users on hördle.de, use Punycode domain (xn--hrdle-jua.de) in share message
// to avoid rendering issues with Unicode domains
let currentHost = rawHost;
if (rawHost === 'hördle.de' || rawHost === 'xn--hrdle-jua.de') {
currentHost = 'xn--hrdle-jua.de';
}
// OLD CODE (commented out - may be needed again in the future):
// Use current domain from window.location to support both hoerdle.de and hördle.de,
// but always share the pretty Unicode-Domain "hördle.de" instead of the Punycode variant.
const rawHost = typeof window !== 'undefined' ? window.location.hostname : config.domain;
const currentHost = rawHost === 'xn--hrdle-jua.de' ? 'hördle.de' : rawHost;
const protocol = typeof window !== 'undefined' ? window.location.protocol : 'https:';
// const currentHost = rawHost === 'xn--hrdle-jua.de' ? 'hördle.de' : rawHost;
let shareUrl = `${protocol}//${currentHost}`;
// Add locale prefix if not default (en)
if (locale !== 'en') {
@@ -491,7 +548,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
src={dailyPuzzle.audioUrl}
unlockedSeconds={unlockedSeconds}
startTime={dailyPuzzle.startTime}
autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost)}
autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !isSolved && !isFailed)}
onReplay={addReplay}
onHasPlayedChange={setHasPlayedAudio}
/>
@@ -500,7 +557,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
<div className="guess-list">
{gameState.guesses.map((guess, i) => {
const isCorrect = hasWon && i === gameState.guesses.length - 1;
const isCorrect = isSolved && i === gameState.guesses.length - 1;
return (
<div key={i} className="guess-item">
<span className="guess-number">#{i + 1}</span>
@@ -512,7 +569,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
})}
</div>
{!hasWon && !hasLost && (
{!isSolved && !isFailed && (
<>
<div id="tour-input">
<GuessInput onGuess={handleGuess} disabled={isProcessingGuess} />
@@ -543,13 +600,13 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
</>
)}
{(hasWon || hasLost) && (
<div className={`message-box ${hasWon ? 'success' : 'failure'}`}>
{(isSolved || isFailed) && (
<div className={`message-box ${isSolved ? 'success' : 'failure'}`}>
<h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
{hasWon ? t('won') : t('lost')}
{isSolved ? t('won') : t('lost')}
</h2>
<div style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0', color: hasWon ? 'var(--success)' : 'var(--danger)' }}>
<div style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0', color: isSolved ? 'var(--success)' : 'var(--danger)' }}>
{t('score')}: {gameState.score}
</div>
@@ -567,7 +624,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
</ul>
</details>
<p>{hasWon ? t('comeBackTomorrow') : t('theSongWas')}</p>
<p>{isSolved ? t('comeBackTomorrow') : t('theSongWas')}</p>
<div style={{ margin: '1.5rem 0', padding: '1rem', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<img
@@ -602,9 +659,24 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
{/* Comment Form */}
{!commentSent && (
<div style={{ marginTop: '1.5rem', padding: '1rem', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem' }}>
<h3 style={{ fontSize: '1rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
<div
onClick={() => setCommentCollapsed(!commentCollapsed)}
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
cursor: 'pointer',
marginBottom: commentCollapsed ? 0 : '1rem'
}}
>
<h3 style={{ fontSize: '1rem', fontWeight: 'bold', margin: 0 }}>
{t('sendComment')}
</h3>
<span>{commentCollapsed ? '▼' : '▲'}</span>
</div>
{!commentCollapsed && (
<>
<p style={{ fontSize: '0.85rem', color: 'var(--muted-foreground)', marginBottom: '0.75rem' }}>
{t('commentHelp')}
</p>
@@ -612,7 +684,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
value={commentText}
onChange={(e) => setCommentText(e.target.value)}
placeholder={t('commentPlaceholder')}
maxLength={2000}
maxLength={300}
style={{
width: '100%',
minHeight: '100px',
@@ -622,13 +694,15 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
fontSize: '0.9rem',
fontFamily: 'inherit',
resize: 'vertical',
marginBottom: '0.5rem'
marginBottom: '0.5rem',
display: 'block',
boxSizing: 'border-box' // Ensure padding and border are included in width
}}
disabled={commentSending}
/>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
<span style={{ fontSize: '0.75rem', color: 'var(--muted-foreground)' }}>
{commentText.length}/2000
{commentText.length}/300
</span>
{commentError && (
<span style={{ fontSize: '0.75rem', color: 'var(--danger)' }}>
@@ -636,26 +710,52 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
</span>
)}
</div>
<div style={{ marginBottom: '0.75rem' }}>
<label style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem', fontSize: '0.85rem', color: 'var(--foreground)', cursor: 'pointer' }}>
<input
type="checkbox"
checked={commentAIConsent}
onChange={(e) => setCommentAIConsent(e.target.checked)}
disabled={commentSending || commentSent}
style={{ marginTop: '0.2rem', cursor: (commentSending || commentSent) ? 'not-allowed' : 'pointer' }}
/>
<span>{t('commentAIConsent')}</span>
</label>
</div>
<button
onClick={handleCommentSubmit}
disabled={!commentText.trim() || commentSending || commentSent}
disabled={!commentText.trim() || commentSending || commentSent || !commentAIConsent}
className="btn-primary"
style={{
width: '100%',
opacity: (!commentText.trim() || commentSending || commentSent) ? 0.5 : 1,
cursor: (!commentText.trim() || commentSending || commentSent) ? 'not-allowed' : 'pointer'
opacity: (!commentText.trim() || commentSending || commentSent || !commentAIConsent) ? 0.5 : 1,
cursor: (!commentText.trim() || commentSending || commentSent || !commentAIConsent) ? 'not-allowed' : 'pointer'
}}
>
{commentSending ? t('sending') : t('sendComment')}
</button>
</>
)}
</div>
)}
{commentSent && (
<div style={{ marginTop: '1.5rem', padding: '1rem', background: 'rgba(16, 185, 129, 0.1)', borderRadius: '0.5rem', border: '1px solid rgba(16, 185, 129, 0.3)' }}>
<p style={{ fontSize: '0.9rem', color: 'var(--success)', textAlign: 'center' }}>
{rewrittenMessage ? (
<>
<p style={{ fontSize: '0.9rem', color: 'var(--success)', textAlign: 'center', marginBottom: '0.5rem' }}>
{t('commentSent')}
</p>
<div style={{ fontSize: '0.85rem', color: 'var(--muted-foreground)', textAlign: 'center' }}>
<p style={{ marginBottom: '0.25rem' }}>{t('commentRewritten')}</p>
<p style={{ fontStyle: 'italic' }}>"{rewrittenMessage}"</p>
</div>
</>
) : (
<p style={{ fontSize: '0.9rem', color: 'var(--success)', textAlign: 'center', marginBottom: 0 }}>
{t('commentThankYou')}
</p>
)}
</div>
)}

175
components/HelpTooltip.tsx Normal file
View File

@@ -0,0 +1,175 @@
'use client';
import { useState, useRef, useEffect } from 'react';
import { useTranslations } from 'next-intl';
interface HelpTooltipProps {
shortText: string; // Text für Hover
longText: string; // Text für Click/Modal
position?: 'top' | 'bottom' | 'left' | 'right';
}
export default function HelpTooltip({ shortText, longText, position = 'top' }: HelpTooltipProps) {
const t = useTranslations('CuratorHelp');
const [showHover, setShowHover] = useState(false);
const [showModal, setShowModal] = useState(false);
const tooltipRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (
tooltipRef.current &&
!tooltipRef.current.contains(event.target as Node) &&
buttonRef.current &&
!buttonRef.current.contains(event.target as Node)
) {
setShowModal(false);
}
}
if (showModal) {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}
}, [showModal]);
const positionStyles = {
top: { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: '0.5rem' },
bottom: { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: '0.5rem' },
left: { right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: '0.5rem' },
right: { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: '0.5rem' },
};
return (
<div style={{ position: 'relative', display: 'inline-block' }}>
<button
ref={buttonRef}
type="button"
onClick={() => setShowModal(!showModal)}
onMouseEnter={() => setShowHover(true)}
onMouseLeave={() => setShowHover(false)}
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
color: '#6b7280',
fontSize: '1rem',
padding: '0.25rem',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '50%',
width: '1.5rem',
height: '1.5rem',
transition: 'background-color 0.2s',
}}
onMouseOver={(e) => {
e.currentTarget.style.backgroundColor = '#f3f4f6';
}}
onMouseOut={(e) => {
e.currentTarget.style.backgroundColor = 'transparent';
}}
aria-label="Help"
>
</button>
{/* Hover Tooltip */}
{showHover && !showModal && (
<div
ref={tooltipRef}
style={{
position: 'absolute',
...positionStyles[position],
background: '#1f2937',
color: 'white',
padding: '0.5rem 0.75rem',
borderRadius: '0.375rem',
fontSize: '0.875rem',
whiteSpace: 'normal',
zIndex: 1000,
pointerEvents: 'none',
maxWidth: '250px',
}}
>
{shortText}
<div
style={{
position: 'absolute',
...(position === 'top' && { top: '100%', left: '50%', transform: 'translateX(-50%)', borderLeft: '6px solid transparent', borderRight: '6px solid transparent', borderTop: '6px solid #1f2937' }),
...(position === 'bottom' && { bottom: '100%', left: '50%', transform: 'translateX(-50%)', borderLeft: '6px solid transparent', borderRight: '6px solid transparent', borderBottom: '6px solid #1f2937' }),
...(position === 'left' && { left: '100%', top: '50%', transform: 'translateY(-50%)', borderTop: '6px solid transparent', borderBottom: '6px solid transparent', borderLeft: '6px solid #1f2937' }),
...(position === 'right' && { right: '100%', top: '50%', transform: 'translateY(-50%)', borderTop: '6px solid transparent', borderBottom: '6px solid transparent', borderRight: '6px solid #1f2937' }),
}}
/>
</div>
)}
{/* Modal für detaillierte Informationen */}
{showModal && (
<>
{/* Overlay */}
<div
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'rgba(0, 0, 0, 0.5)',
zIndex: 9998,
}}
onClick={() => setShowModal(false)}
/>
{/* Modal Content */}
<div
ref={tooltipRef}
style={{
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
background: 'white',
padding: '1.5rem',
borderRadius: '0.5rem',
boxShadow: '0 10px 25px rgba(0, 0, 0, 0.2)',
maxWidth: '500px',
width: '90%',
maxHeight: '80vh',
overflowY: 'auto',
zIndex: 9999,
}}
onClick={(e) => e.stopPropagation()}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '1rem' }}>
<h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 'bold' }}>{t('modalTitle')}</h3>
<button
type="button"
onClick={() => setShowModal(false)}
style={{
background: 'none',
border: 'none',
fontSize: '1.5rem',
cursor: 'pointer',
color: '#6b7280',
padding: '0',
lineHeight: '1',
}}
aria-label="Close"
>
×
</button>
</div>
<div style={{ fontSize: '0.9rem', lineHeight: '1.6', whiteSpace: 'pre-wrap' }}>
{longText}
</div>
</div>
</>
)}
</div>
);
}

View File

@@ -12,10 +12,14 @@ interface WaveformEditorProps {
export default function WaveformEditor({ audioUrl, startTime, duration, unlockSteps, onStartTimeChange }: WaveformEditorProps) {
const canvasRef = useRef<HTMLCanvasElement>(null);
const timelineRef = useRef<HTMLCanvasElement>(null);
const [audioBuffer, setAudioBuffer] = useState<AudioBuffer | null>(null);
const [audioDuration, setAudioDuration] = useState(0);
const [isPlaying, setIsPlaying] = useState(false);
const [playingSegment, setPlayingSegment] = useState<number | null>(null);
const [isPlayingFullTitle, setIsPlayingFullTitle] = useState(false);
const [pausedPosition, setPausedPosition] = useState<number | null>(null); // Position when paused
const [pausedType, setPausedType] = useState<'selection' | 'title' | null>(null); // Type of playback that was paused
const [zoom, setZoom] = useState(1); // 1 = full view, higher = zoomed in
const [viewOffset, setViewOffset] = useState(0); // Offset in seconds for panning
const [playbackPosition, setPlaybackPosition] = useState<number | null>(null); // Current playback position in seconds
@@ -55,6 +59,80 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
};
}, [audioUrl]);
// Draw timeline
useEffect(() => {
if (!audioDuration || !timelineRef.current) return;
const timeline = timelineRef.current;
const ctx = timeline.getContext('2d');
if (!ctx) return;
const width = timeline.width;
const height = timeline.height;
// Calculate visible range based on zoom and offset (same as waveform)
const visibleDuration = audioDuration / zoom;
const visibleStart = Math.max(0, Math.min(viewOffset, audioDuration - visibleDuration));
const visibleEnd = Math.min(audioDuration, visibleStart + visibleDuration);
// Clear timeline
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, width, height);
// Draw border
ctx.strokeStyle = '#e5e7eb';
ctx.lineWidth = 1;
ctx.strokeRect(0, 0, width, height);
// Calculate appropriate time interval based on visible duration
let timeInterval = 1; // Start with 1 second
if (visibleDuration > 60) timeInterval = 10;
else if (visibleDuration > 30) timeInterval = 5;
else if (visibleDuration > 10) timeInterval = 2;
else if (visibleDuration > 5) timeInterval = 1;
else if (visibleDuration > 1) timeInterval = 0.5;
else timeInterval = 0.1;
// Draw time markers
ctx.strokeStyle = '#9ca3af';
ctx.lineWidth = 1;
ctx.fillStyle = '#374151';
ctx.font = '10px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
const startTimeMarker = Math.floor(visibleStart / timeInterval) * timeInterval;
for (let time = startTimeMarker; time <= visibleEnd; time += timeInterval) {
const timePx = ((time - visibleStart) / visibleDuration) * width;
if (timePx >= 0 && timePx <= width) {
// Draw tick mark
ctx.beginPath();
ctx.moveTo(timePx, 0);
ctx.lineTo(timePx, height);
ctx.stroke();
// Draw time label
const timeLabel = time.toFixed(timeInterval < 1 ? 1 : 0);
ctx.fillText(`${timeLabel}s`, timePx, 2);
}
}
// Draw current playback position if playing
if (playbackPosition !== null) {
const playbackPx = ((playbackPosition - visibleStart) / visibleDuration) * width;
if (playbackPx >= 0 && playbackPx <= width) {
ctx.strokeStyle = '#10b981';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(playbackPx, 0);
ctx.lineTo(playbackPx, height);
ctx.stroke();
}
}
}, [audioDuration, zoom, viewOffset, playbackPosition]);
useEffect(() => {
if (!audioBuffer || !canvasRef.current) return;
@@ -133,6 +211,24 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
cumulativeTime = step;
});
// Draw end marker for the last segment (at startTime + duration)
const endTime = startTime + duration;
const endPx = ((endTime - visibleStart) / visibleDuration) * width;
if (endPx >= 0 && endPx <= width) {
ctx.beginPath();
ctx.moveTo(endPx, 0);
ctx.lineTo(endPx, height);
ctx.stroke();
// Draw "End" label
ctx.setLineDash([]);
ctx.fillStyle = '#ef4444';
ctx.font = 'bold 12px sans-serif';
ctx.fillText('End', endPx + 3, 15);
ctx.setLineDash([5, 5]);
}
ctx.setLineDash([]);
// Draw hover preview (semi-transparent)
@@ -215,11 +311,21 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
setHoverPreviewTime(null);
};
const stopPlayback = () => {
const stopPlayback = (savePosition = false) => {
if (savePosition && playbackPosition !== null) {
// Save current position for resume
setPausedPosition(playbackPosition);
// Keep playbackPosition visible (don't set to null) so cursor stays visible
} else {
// Clear paused position if stopping completely
setPausedPosition(null);
setPausedType(null);
setPlaybackPosition(null);
}
sourceRef.current?.stop();
setIsPlaying(false);
setPlayingSegment(null);
setPlaybackPosition(null);
setIsPlayingFullTitle(false);
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = null;
@@ -287,30 +393,119 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
const handlePlayFull = () => {
if (!audioBuffer || !audioContextRef.current) return;
if (isPlaying) {
// If full selection playback is already playing, pause it
if (isPlaying && playingSegment === null && !isPlayingFullTitle) {
stopPlayback(true); // Save position
setPausedType('selection');
return;
}
// Stop any current playback (segment, full selection, or full title)
stopPlayback();
} else {
// Determine start position (resume from pause or start from beginning)
const resumePosition = pausedType === 'selection' && pausedPosition !== null
? pausedPosition
: startTime;
const remainingDuration = resumePosition >= startTime + duration
? 0
: (startTime + duration) - resumePosition;
if (remainingDuration <= 0) {
// Already finished, reset
setPausedPosition(null);
setPausedType(null);
return;
}
// Start full selection playback
const source = audioContextRef.current.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContextRef.current.destination);
playbackStartTimeRef.current = audioContextRef.current.currentTime;
playbackOffsetRef.current = startTime;
playbackOffsetRef.current = resumePosition;
source.start(0, startTime, duration);
source.start(0, resumePosition, remainingDuration);
sourceRef.current = source;
setIsPlaying(true);
setPlaybackPosition(startTime);
setPlayingSegment(null);
setIsPlayingFullTitle(false);
setPausedPosition(null);
setPausedType(null);
setPlaybackPosition(resumePosition);
source.onended = () => {
setIsPlaying(false);
setPlayingSegment(null);
setIsPlayingFullTitle(false);
setPlaybackPosition(null);
setPausedPosition(null);
setPausedType(null);
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = null;
}
};
};
const handlePlayFullTitle = () => {
if (!audioBuffer || !audioContextRef.current) return;
// If full title playback is already playing, pause it
if (isPlaying && isPlayingFullTitle) {
stopPlayback(true); // Save position
setPausedType('title');
return;
}
// Stop any current playback (segment, full selection, or full title)
stopPlayback();
// Determine start position (resume from pause or start from beginning)
const resumePosition = pausedType === 'title' && pausedPosition !== null
? pausedPosition
: 0;
const remainingDuration = resumePosition >= audioDuration
? 0
: audioDuration - resumePosition;
if (remainingDuration <= 0) {
// Already finished, reset
setPausedPosition(null);
setPausedType(null);
return;
}
// Start full title playback (from resumePosition to audioDuration)
const source = audioContextRef.current.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContextRef.current.destination);
playbackStartTimeRef.current = audioContextRef.current.currentTime;
playbackOffsetRef.current = resumePosition;
source.start(0, resumePosition, remainingDuration);
sourceRef.current = source;
setIsPlaying(true);
setPlayingSegment(null);
setIsPlayingFullTitle(true);
setPausedPosition(null);
setPausedType(null);
setPlaybackPosition(resumePosition);
source.onended = () => {
setIsPlaying(false);
setPlayingSegment(null);
setIsPlayingFullTitle(false);
setPlaybackPosition(null);
setPausedPosition(null);
setPausedType(null);
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = null;
}
};
};
const handleZoomIn = () => setZoom(prev => Math.min(prev * 1.5, 10));
@@ -371,6 +566,7 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
)}
</div>
<div style={{ position: 'relative' }}>
<canvas
ref={canvasRef}
width={800}
@@ -383,9 +579,25 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
height: 'auto',
cursor: 'pointer',
border: '1px solid #e5e7eb',
borderRadius: '0.5rem'
borderRadius: '0.5rem 0.5rem 0 0',
display: 'block'
}}
/>
<canvas
ref={timelineRef}
width={800}
height={30}
style={{
width: '100%',
height: '30px',
border: '1px solid #e5e7eb',
borderTop: 'none',
borderRadius: '0 0 0.5rem 0.5rem',
display: 'block',
background: '#ffffff'
}}
/>
</div>
{/* Playback Controls */}
<div style={{ marginTop: '1rem', display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
@@ -401,7 +613,29 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
fontWeight: 'bold'
}}
>
{isPlaying && playingSegment === null ? '⏸ Pause' : '▶ Play Full Selection'}
{isPlaying && playingSegment === null && !isPlayingFullTitle
? '⏸ Pause'
: (pausedType === 'selection' && pausedPosition !== null
? '▶ Resume'
: '▶ Play Full Selection')}
</button>
<button
onClick={handlePlayFullTitle}
style={{
padding: '0.5rem 1rem',
background: '#10b981',
color: 'white',
border: 'none',
borderRadius: '0.5rem',
cursor: 'pointer',
fontWeight: 'bold'
}}
>
{isPlaying && isPlayingFullTitle
? '⏸ Pause'
: (pausedType === 'title' && pausedPosition !== null
? '▶ Resume'
: '▶ Play Full Title')}
</button>
<div style={{ fontSize: '0.875rem', color: '#666' }}>

88
docs/TESTING.md Normal file
View File

@@ -0,0 +1,88 @@
# Integration Testing
Hördle uses [Playwright](https://playwright.dev/) for end-to-end (E2E) integration testing. These tests ensure that critical flows like gameplay, authentication, and admin management function correctly across different browsers.
## Prerequisites
Ensure you have the Playwright browsers installed:
```bash
npx playwright install
```
## Running Tests
### Headless Mode (CI/CLI)
To run all tests in headless mode (Chromium, Firefox, WebKit):
```bash
npm run test:e2e
```
### UI Mode (Interactive)
To run tests with a UI to inspect traces and watch execution:
```bash
npm run test:e2e:ui
```
### Specific Test File
To run a specific test file:
```bash
npx playwright test tests/gameplay.spec.ts
```
### Specific Project (Browser)
To run tests only on a specific browser (e.g., Chromium):
```bash
npx playwright test --project=chromium
```
## Configuration
The Playwright configuration is located in `playwright.config.ts`. It sets up the base URL (default: `http://localhost:3000`) and the web server command to start the app if it's not running.
### Environment Variables
* **`ADMIN_PASSWORD`**: The tests assume the admin password is `'admin123'`.
* In `app/api/admin/login/route.ts`, the login logic has been enhanced to check if `ADMIN_PASSWORD` is a bcrypt hash (starts with `$2b$`) or plain text.
* For local testing, you can set `ADMIN_PASSWORD="admin123"` in your `.env` or `.env.local` (though the default fallback in the code also handles this).
* **Curator Credentials**: The mock Curator login page (`app/[locale]/curator/page.tsx`) mocks validation for testing.
* Username: `elpatron`
* Password: `example_password`
## Test Structure
Tests are located in the `tests/` directory:
* **`auth.spec.ts`**: Verifies public access and admin login flows.
* **`admin.spec.ts`**: Checks the Admin Dashboard, including access protection and visibility of sections (Dashboard, Daily Puzzles, etc.).
* **`curator.spec.ts`**: Verifies the Curator login form and authentication flows (valid/invalid credentials).
* **`gameplay.spec.ts`**: Tests the core game loop: loading the game, playing audio, interaction with the prompt, and submitting a guess.
## Troubleshooting & Known Issues
### Next.js Development Overlay (`nextjs-portal`)
In development mode (`npm run dev`), Next.js injects an overlay (`<nextjs-portal>`) for hot reloading feedback. This overlay can sometimes intercept clicks intended for UI elements, causing tests to fail with "element is not clickable" or timeout errors.
**Solution:**
We inject a CSS style in the `beforeEach` hook of our tests to hide this overlay:
```typescript
test.beforeEach(async ({ page }) => {
await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
});
```
### WebKit (Safari) Stability
WebKit can be slower or more sensitive to timing in some environments. If tests fail on WebKit but pass on other browsers:
1. Try increasing the timeout in `playwright.config.ts`.
2. Use `await page.waitForTimeout(500)` or specific assertions like `await expect(page).toHaveURL(...)` to allow for transition times, as implemented in `tests/admin.spec.ts`.

17
lib/curatorAuth.ts Normal file
View File

@@ -0,0 +1,17 @@
export function getCuratorAuthHeaders() {
if (typeof window === 'undefined') {
return {
'x-curator-auth': '',
'x-curator-username': '',
};
}
const authToken = localStorage.getItem('hoerdle_curator_auth');
const username = localStorage.getItem('hoerdle_curator_username') || '';
return {
'x-curator-auth': authToken || '',
'x-curator-username': username,
};
}

View File

@@ -29,9 +29,7 @@ export async function getOrCreateDailyPuzzle(genre: Genre | null = null) {
const allSongs = await prisma.song.findMany({
where: whereClause,
include: {
puzzles: {
where: { genreId: genreId }
},
puzzles: true, // Load ALL puzzles, not just for this genre (to use total activations)
},
});
@@ -40,28 +38,24 @@ export async function getOrCreateDailyPuzzle(genre: Genre | null = null) {
return null;
}
// Calculate weights
const weightedSongs = allSongs.map(song => ({
// Find songs with the minimum number of activations (all puzzles, not just for this genre)
// Only select from songs with the fewest activations to ensure fair distribution
const songsWithActivations = allSongs.map(song => ({
song,
weight: 1.0 / (song.puzzles.length + 1),
activations: song.puzzles.length,
}));
// Calculate total weight
const totalWeight = weightedSongs.reduce((sum, item) => sum + item.weight, 0);
// Find minimum activations
const minActivations = Math.min(...songsWithActivations.map(item => item.activations));
// Pick a random song based on weights using cumulative weights
// This ensures proper distribution and handles edge cases
let random = Math.random() * totalWeight;
let selectedSong = weightedSongs[weightedSongs.length - 1].song; // Fallback to last song
// Filter to only songs with minimum activations
const songsWithMinActivations = songsWithActivations
.filter(item => item.activations === minActivations)
.map(item => item.song);
let cumulativeWeight = 0;
for (const item of weightedSongs) {
cumulativeWeight += item.weight;
if (random <= cumulativeWeight) {
selectedSong = item.song;
break;
}
}
// Randomly select from songs with minimum activations
const randomIndex = Math.floor(Math.random() * songsWithMinActivations.length);
const selectedSong = songsWithMinActivations[randomIndex];
// Create the daily puzzle
try {
@@ -141,7 +135,7 @@ export async function getOrCreateSpecialPuzzle(special: Special) {
song: {
include: {
puzzles: {
where: { specialId: special.id }
where: { specialId: special.id } // For specials, only count puzzles within this special
}
}
}
@@ -150,25 +144,25 @@ export async function getOrCreateSpecialPuzzle(special: Special) {
if (specialSongs.length === 0) return null;
// Calculate weights
const weightedSongs = specialSongs.map(specialSong => ({
// Find songs with the minimum number of activations within this special
// Note: For specials, we only count puzzles within the special (not all puzzles),
// since specials are curated, separate lists
const songsWithActivations = specialSongs.map(specialSong => ({
specialSong,
weight: 1.0 / (specialSong.song.puzzles.length + 1),
activations: specialSong.song.puzzles.length,
}));
const totalWeight = weightedSongs.reduce((sum, item) => sum + item.weight, 0);
let random = Math.random() * totalWeight;
let selectedSpecialSong = weightedSongs[weightedSongs.length - 1].specialSong; // Fallback to last song
// Find minimum activations
const minActivations = Math.min(...songsWithActivations.map(item => item.activations));
// Pick a random song based on weights using cumulative weights
let cumulativeWeight = 0;
for (const item of weightedSongs) {
cumulativeWeight += item.weight;
if (random <= cumulativeWeight) {
selectedSpecialSong = item.specialSong;
break;
}
}
// Filter to only songs with minimum activations
const songsWithMinActivations = songsWithActivations
.filter(item => item.activations === minActivations)
.map(item => item.specialSong);
// Randomly select from songs with minimum activations
const randomIndex = Math.floor(Math.random() * songsWithMinActivations.length);
const selectedSpecialSong = songsWithMinActivations[randomIndex];
try {
dailyPuzzle = await prisma.dailyPuzzle.create({

View File

@@ -58,9 +58,13 @@
"skipBonus": "Bonus überspringen",
"notQuite": "Nicht ganz!",
"sendComment": "Nachricht an Kurator senden",
"commentPlaceholder": "Schreibe eine Nachricht an die Kuratoren dieses Genres...",
"sendCommentCollapsed": "Nachricht an Kurator senden",
"commentPlaceholder": "Schreibe eine Nachricht an die Kuratoren dieses Genres... Bitte bleibe freundlich und höflich.",
"commentHelp": "Teile deine Gedanken zum Rätsel mit den Kuratoren. Deine Nachricht wird ihnen angezeigt.",
"commentAIConsent": "Ich bin damit einverstanden, dass diese Nachricht von einer KI verarbeitet wird, um unfreundliche Nachrichten zu filtern.",
"commentSent": "✓ Nachricht gesendet! Vielen Dank für dein Feedback.",
"commentThankYou": "Vielen Dank für dein Feedback!",
"commentRewritten": "Deine Nachricht wurde automatisch freundlicher formuliert:",
"commentError": "Fehler beim Senden der Nachricht",
"commentRateLimited": "Du hast bereits eine Nachricht für dieses Rätsel gesendet.",
"sending": "Wird gesendet...",
@@ -145,6 +149,10 @@
"subtitle": "Untertitel",
"maxAttempts": "Max. Versuche",
"unlockSteps": "Freischalt-Schritte",
"unlockStepsRequired": "Freischalt-Schritte sind erforderlich",
"unlockStepsInvalidJson": "Ungültiges JSON-Format. Bitte verwende ein Array von Zahlen, z.B. [2,4,7,11,16,30,60]",
"unlockStepsMustBeArray": "Freischalt-Schritte müssen ein Array sein",
"unlockStepsMustBePositiveNumbers": "Alle Werte müssen positive Zahlen sein",
"launchDate": "Startdatum",
"endDate": "Enddatum",
"curator": "Kurator",
@@ -201,6 +209,7 @@
"selectedFilesTitle": "Ausgewählte Dateien:",
"uploadProgress": "Upload: {current} / {total}",
"assignGenresLabel": "Genres zuordnen",
"assignSpecialsLabel": "Specials zuordnen",
"noAssignedGenres": "Dir sind noch keine Genres zugeordnet. Bitte wende dich an den Admin.",
"uploadButtonIdle": "Upload starten",
"uploadButtonUploading": "Lade hoch...",
@@ -222,6 +231,7 @@
"columnTitle": "Titel",
"columnArtist": "Artist",
"columnYear": "Jahr",
"columnCover": "Cover",
"columnGenresSpecials": "Genres / Specials",
"columnAdded": "Hinzugefügt",
"columnActivations": "Aktivierungen",
@@ -272,7 +282,123 @@
"noBatchOperations": "Keine Batch-Operationen angegeben",
"batchUpdateSuccess": "Erfolgreich {success} von {processed} Titeln aktualisiert",
"batchUpdateError": "Fehler: {error}",
"batchUpdateNetworkError": "Netzwerkfehler bei der Batch-Aktualisierung"
"batchUpdateNetworkError": "Netzwerkfehler bei der Batch-Aktualisierung",
"backToDashboard": "Zurück zum Dashboard",
"loading": "Laden...",
"curateSpecialsButton": "Specials kuratieren",
"curateSpecialsTitle": "Deine Specials kuratieren",
"curateSpecialsDescription": "Hier kannst du die Startzeiten der Songs in deinen zugewiesenen Specials für das Rätsel feinjustieren.",
"noSpecialPermissions": "Dir sind keine Specials zugeordnet.",
"noSpecialsInScope": "Keine Specials zum Kuratieren vorhanden.",
"noSpecialsAssigned": "Dir sind keine Specials zugeordnet.",
"curateSpecialSongCount": "{count, plural, one {# Song} other {# Songs}} in diesem Special",
"curateSpecialOpen": "Öffnen",
"specialForbidden": "Du darfst dieses Special nicht bearbeiten.",
"specialNotFound": "Special nicht gefunden.",
"backToCuratorSpecials": "Zurück zur Special-Übersicht",
"curateSpecialHeaderPrefix": "Special kuratieren:",
"curateSpecialNoSongs": "Diesem Special sind noch keine Songs zugeordnet.",
"curateSpecialNoSongsSub": "Gehe zurück zu deinem Dashboard, um diesem Special Songs zuzuordnen.",
"curateSpecialInstructions": "Klicke auf die Waveform, um zu wählen, wo das Rätsel starten soll. Der hervorgehobene Bereich zeigt, was die Spieler hören.",
"saving": "💾 Speichere...",
"saveChanges": "💾 Änderungen speichern",
"saved": "✓ Gespeichert"
},
"CuratorHelp": {
"title": "Kurator-Hilfe & Handbuch",
"backToDashboard": "Zurück zum Dashboard",
"helpButton": "Hilfe",
"modalTitle": "Hilfe",
"introductionTitle": "Einführung",
"introductionText": "Als Kurator bist du verantwortlich für die Verwaltung von Songs in deinen zugewiesenen Genres und Specials. Dieses Dashboard ermöglicht es dir, Musik für das Hördle-Spiel hochzuladen, zu bearbeiten und zu organisieren.",
"permissionsTitle": "Deine Berechtigungen",
"permission1": "MP3-Dateien hochladen und deinen Genres zuordnen",
"permission2": "Songs bearbeiten, die mindestens einem deiner Genres oder Specials zugeordnet sind",
"permission3": "Songs löschen, die ausschließlich deinen Genres/Specials zugeordnet sind",
"permission4": "Kommentare von Spielern zu deinen Rätseln einsehen und verwalten",
"note": "Hinweis",
"permissionNote": "Du kannst nur Songs bearbeiten oder löschen, die deinen Genres/Specials zugeordnet sind. Songs, die anderen Kuratoren zugeordnet sind, kannst du nicht ändern.",
"uploadTitle": "Songs hochladen",
"uploadStepsTitle": "Schritt-für-Schritt-Anleitung",
"uploadStep1": "MP3-Dateien in den Upload-Bereich ziehen oder klicken, um Dateien auszuwählen",
"uploadStep2": "Ein oder mehrere Genres und falls passend Specials auswählen, um sie den hochgeladenen Songs zuzuordnen",
"uploadStep3": "Auf 'Upload starten' klicken, um den Upload-Prozess zu beginnen",
"uploadStep4": "Das System extrahiert automatisch Metadaten (Titel, Artist, Erscheinungsjahr) aus den Dateien",
"uploadBestPracticesTitle": "Best Practices",
"uploadBestPractice1": "Stelle sicher, dass MP3-Dateien korrekte ID3-Tags (Titel, Artist) für die automatische Metadaten-Extraktion haben",
"uploadBestPractice2": "Passende Genres (und Specials) vor dem Upload auswählen, um spätere manuelle Zuordnung zu vermeiden",
"uploadBestPractice3": "Vor dem Upload auf Duplikate prüfen - das System warnt dich, wenn ein Song bereits existiert",
"tip": "Tipp",
"uploadTip": "Alle von Kuratoren hochgeladenen Songs werden automatisch von der globalen Playlist ausgeschlossen. Nur Admins können diese Einstellung ändern.",
"editingTitle": "Songs bearbeiten",
"singleEditTitle": "Einzelne Song-Bearbeitung",
"singleEditText": "Klicke auf den Bearbeiten-Button (✏️) neben einem Song, um Titel, Artist, Erscheinungsjahr, Genres, Specials oder das Exclude-Global-Flag zu ändern. Nur Songs, die du bearbeiten kannst, haben einen aktiven Bearbeiten-Button.",
"batchEditTitle": "Batch-Bearbeitung",
"batchEditText": "Wähle mehrere Songs über die Checkboxen aus, dann nutze die Batch-Bearbeitungs-Toolbar, um Änderungen auf alle ausgewählten Songs gleichzeitig anzuwenden:",
"batchEditFeature1": "Genre Toggle: Genres zu allen ausgewählten Songs hinzufügen oder entfernen",
"batchEditFeature2": "Special Toggle: Specials zu allen ausgewählten Songs hinzufügen oder entfernen",
"batchEditFeature3": "Artist ändern: Gleichen Artist-Namen für alle ausgewählten Songs setzen",
"batchEditFeature4": "Exclude Global Flag: Exclude-Global-Flag setzen oder entfernen (nur Global-Kuratoren)",
"genreSpecialAssignmentTitle": "Genre & Special Zuordnung",
"genreSpecialAssignmentText": "Du kannst Songs nur Genres und Specials zuordnen, für die du verantwortlich bist. Songs können mehrere Genres und Specials haben. Beim Bearbeiten kannst du Zuordnungen umschalten - wenn ein Genre/Special bereits zugeordnet ist, wird es entfernt; wenn nicht, wird es hinzugefügt.",
"commentsTitle": "Kommentare verwalten",
"commentsText": "Spieler können dir Feedback zu Rätseln in deinen Genres oder Specials senden. Kommentare erscheinen in deinem Dashboard mit einem Badge für ungelesene Nachrichten.",
"commentsActionsTitle": "Verfügbare Aktionen",
"markAsRead": "Als gelesen markieren",
"markAsReadText": "Klicke auf einen Kommentar, um ihn als gelesen zu markieren. Gelesene Kommentare werden mit einem grauen Rahmen angezeigt.",
"archive": "Archivieren",
"archiveText": "Archiviere Kommentare, die du nicht mehr benötigst. Archivierte Kommentare werden aus deiner Ansicht entfernt.",
"bestPracticesTitle": "Best Practices für Kuratoren",
"bestPractice1": "Metadaten korrekt halten: Stelle sicher, dass Song-Titel und Artist-Namen korrekt und konsistent sind",
"bestPractice2": "Passende Genres verwenden: Ordne Songs den relevantesten Genres zu, um Spielern zu helfen, Musik zu entdecken",
"bestPractice3": "Auf Kommentare reagieren: Prüfe Kommentare regelmäßig und berücksichtige Spieler-Feedback beim Kuratieren",
"bestPractice4": "Qualität wahren: Überprüfe hochgeladene Songs auf Audio-Qualität und Metadaten-Genauigkeit",
"bestPractice5": "Batch-Bearbeitung effizient nutzen: Wenn du ähnliche Änderungen an mehreren Songs vornehmen musst, nutze die Batch-Bearbeitung, um Zeit zu sparen",
"troubleshootingTitle": "Troubleshooting",
"troubleshootingQ1": "Warum kann ich einen Song nicht bearbeiten?",
"troubleshootingA1": "Du kannst nur Songs bearbeiten, die mindestens einem deiner Genres oder Specials zugeordnet sind. Wenn ein Song keine Genres/Specials zugeordnet hat, kannst du ihn bearbeiten. Wenn er nur anderen Kuratoren zugeordnet ist, kannst du ihn nicht bearbeiten.",
"troubleshootingQ2": "Warum kann ich einen Song nicht löschen?",
"troubleshootingA2": "Du kannst nur Songs löschen, die ausschließlich deinen Genres/Specials zugeordnet sind. Wenn ein Song Genres oder Specials hat, die anderen Kuratoren zugeordnet sind, kannst du ihn nicht löschen.",
"troubleshootingQ3": "Warum kann ich ein Genre/Special nicht zuordnen?",
"troubleshootingA3": "Du kannst Songs nur Genres und Specials zuordnen, für die du verantwortlich bist. Wende dich an den Admin, wenn du Zugriff auf zusätzliche Genres oder Specials benötigst.",
"troubleshootingQ4": "Warum ist die Exclude-Global-Checkbox deaktiviert?",
"troubleshootingA4": "Nur Global-Kuratoren können das Exclude-Global-Flag ändern. Wenn du diese Berechtigung benötigst, wende dich an den Admin.",
"curateSpecialsHelpTitle": "Specials kuratieren",
"curateSpecialsHelpIntro": "Im Bereich „Curate Specials\" kannst du den exakten Audio-Ausschnitt festlegen, den Spieler in deinen Specials hören. Es werden nur Specials angezeigt, die dir zugewiesen sind.",
"curateSpecialsHelpStepsTitle": "So kuratierst du Specials",
"curateSpecialsHelpStep1": "Öffne das Kuratoren-Dashboard und klicke auf „Curate Specials\", um alle dir zugewiesenen Specials zu sehen.",
"curateSpecialsHelpStep2": "Wähle ein Special aus der Liste, um den Waveform-Editor für dieses Special zu öffnen.",
"curateSpecialsHelpStep3": "Klicke auf die Waveform, um die Startzeit zu wählen. Der hervorgehobene Bereich zeigt genau das, was Spieler hören werden.",
"curateSpecialsHelpStep4": "Nutze Zoom, Pan und Segment-Playback, um den Ausschnitt fein abzustimmen. Klicke auf „Änderungen speichern\", um die neue Startzeit zu übernehmen.",
"curateSpecialsPermissionsNote": "Du kannst nur Specials kuratieren, die dir zugewiesen sind. Wenn du versuchst, ein fremdes Special zu öffnen oder zu speichern, blockiert das System die Aktion.",
"tooltipDashboardShort": "Übersicht über dein Kuratoren-Dashboard",
"tooltipDashboardLong": "Dies ist dein Haupt-Dashboard, wo du Songs hochladen, deine Track-Liste verwalten und Kommentare von Spielern einsehen kannst. Nutze den Hilfe-Button (❓), um auf das vollständige Handbuch zuzugreifen.",
"tooltipUploadShort": "MP3-Dateien zu deinen Genres hochladen",
"tooltipUploadLong": "Ziehe MP3-Dateien per Drag & Drop oder klicke, um sie auszuwählen. Das System extrahiert automatisch Metadaten (Titel, Artist, Erscheinungsjahr) aus ID3-Tags. Wähle Genres vor dem Upload aus, um Songs automatisch zuzuordnen. Alle Kuratoren-Uploads sind standardmäßig von der globalen Playlist ausgeschlossen.",
"tooltipGenreAssignmentShort": "Genres zu hochgeladenen Songs zuordnen",
"tooltipGenreAssignmentLong": "Wähle ein oder mehrere Genres vor dem Upload aus. Die ausgewählten Genres werden allen erfolgreich hochgeladenen Songs zugeordnet. Du kannst nur Genres zuordnen, für die du verantwortlich bist. Wenn du keine Genres auswählst, kannst du sie später durch Bearbeitung der Songs zuordnen.",
"tooltipSpecialAssignmentShort": "Specials zu hochgeladenen Songs zuordnen",
"tooltipSpecialAssignmentLong": "Wähle ein oder mehrere Specials vor dem Upload aus. Die ausgewählten Specials werden allen erfolgreich hochgeladenen Songs zugeordnet. Du kannst nur Specials zuordnen, für die du verantwortlich bist. Wenn du keine Specials auswählst, kannst du sie später durch Bearbeitung der Songs zuordnen.",
"tooltipTracklistShort": "Deine Songs verwalten",
"tooltipTracklistLong": "Diese Tabelle zeigt alle Songs in deinen Genres und Specials. Du kannst suchen, filtern, sortieren und Songs bearbeiten. Nutze die Checkboxen, um mehrere Songs für die Batch-Bearbeitung auszuwählen. Nur Songs, die du bearbeiten kannst, haben eine aktive Checkbox.",
"tooltipSearchShort": "Nach Titel oder Artist suchen",
"tooltipSearchLong": "Tippe in das Suchfeld, um Songs nach Titel oder Artist-Namen zu filtern. Die Suche ist nicht case-sensitive und findet Teiltexte. Leere das Suchfeld, um alle Songs wieder anzuzeigen.",
"tooltipFilterShort": "Nach Genre, Special oder Global-Flag filtern",
"tooltipFilterLong": "Nutze das Filter-Dropdown, um nur Songs aus einem bestimmten Genre, Special oder Songs, die von der globalen Playlist ausgeschlossen sind, anzuzeigen. Kombiniere mit der Suche für präzisere Filterung.",
"tooltipBatchEditShort": "Mehrere Songs gleichzeitig bearbeiten",
"tooltipBatchEditLong": "Wähle mehrere Songs über Checkboxen aus, dann nutze die Batch-Bearbeitungs-Toolbar, um Änderungen auf alle ausgewählten Songs gleichzeitig anzuwenden. Du kannst Genres/Specials umschalten, Artist-Namen ändern oder das Exclude-Global-Flag ändern (nur Global-Kuratoren).",
"tooltipBatchGenreToggleShort": "Genres hinzufügen oder entfernen",
"tooltipBatchGenreToggleLong": "Wähle Genres zum Umschalten aus. Wenn ein ausgewählter Song das Genre bereits hat, wird es entfernt. Wenn nicht, wird es hinzugefügt. Dies ermöglicht es dir, schnell Genres zu mehreren Songs hinzuzufügen oder zu entfernen.",
"tooltipBatchSpecialToggleShort": "Specials hinzufügen oder entfernen",
"tooltipBatchSpecialToggleLong": "Wähle Specials zum Umschalten aus. Wenn ein ausgewählter Song das Special bereits hat, wird es entfernt. Wenn nicht, wird es hinzugefügt. Du kannst nur Specials umschalten, für die du verantwortlich bist.",
"tooltipBatchArtistShort": "Artist für alle ausgewählten Songs ändern",
"tooltipBatchArtistLong": "Gib einen neuen Artist-Namen ein, um ihn für alle ausgewählten Songs zu setzen. Dies ist nützlich, um Artist-Namen zu korrigieren oder Namenskonventionen über mehrere Songs hinweg zu standardisieren.",
"tooltipCommentsShort": "Spieler-Feedback und Kommentare",
"tooltipCommentsLong": "Spieler können dir Nachrichten zu Rätseln in deinen Genres oder Specials senden. Ungelesene Kommentare sind mit einem blauen Rahmen und Badge hervorgehoben. Klicke auf einen Kommentar, um ihn als gelesen zu markieren, oder archiviere ihn, wenn du ihn nicht mehr benötigst.",
"tooltipCurateSpecialsShort": "Startzeiten für deine Specials kuratieren",
"tooltipCurateSpecialsLong": "In dieser Ansicht siehst du alle Specials, die dir zugewiesen sind. Öffne ein Special, um den Audio-Ausschnitt zu wählen, den die Spieler hören. Du kannst nur Specials sehen und bearbeiten, für die du zuständig bist.",
"tooltipCurateSpecialEditorShort": "Mit dem Waveform-Editor den Puzzle-Ausschnitt wählen",
"tooltipCurateSpecialEditorLong": "Klicke auf die Waveform, um zu bestimmen, wo das Rätsel startet. Nutze Zoom und Pan für Feineinstellungen und spiele einzelne Segmente ab, um sie zu testen. Beim Speichern wird nur dieser kuratierte Ausschnitt für Spieler in diesem Special verwendet."
},
"About": {
"title": "Über Hördle & Impressum",

View File

@@ -58,9 +58,13 @@
"skipBonus": "Skip Bonus",
"notQuite": "Not quite!",
"sendComment": "Send message to curator",
"commentPlaceholder": "Write a message to the curators of this genre...",
"commentHelp": "Share your thoughts about the puzzle with the curators. Your message will be displayed to them.",
"sendCommentCollapsed": "Send message to curator",
"commentPlaceholder": "Write a message to the curators of this genre... Please remain friendly and polite.",
"commentHelp": "Share your thoughts on the puzzle with the curators. Your message will be shown to them.",
"commentAIConsent": "I agree that this message will be processed by an AI to filter unfriendly messages.",
"commentSent": "✓ Message sent! Thank you for your feedback.",
"commentThankYou": "Thank you for your feedback!",
"commentRewritten": "Your message was automatically rephrased to be more friendly:",
"commentError": "Error sending message",
"commentRateLimited": "You have already sent a message for this puzzle.",
"sending": "Sending...",
@@ -145,6 +149,10 @@
"subtitle": "Subtitle",
"maxAttempts": "Max Attempts",
"unlockSteps": "Unlock Steps",
"unlockStepsRequired": "Unlock steps are required",
"unlockStepsInvalidJson": "Invalid JSON format. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]",
"unlockStepsMustBeArray": "Unlock steps must be an array",
"unlockStepsMustBePositiveNumbers": "All values must be positive numbers",
"launchDate": "Launch Date",
"endDate": "End Date",
"curator": "Curator",
@@ -201,6 +209,7 @@
"selectedFilesTitle": "Selected files:",
"uploadProgress": "Upload: {current} / {total}",
"assignGenresLabel": "Assign genres",
"assignSpecialsLabel": "Assign specials",
"noAssignedGenres": "No genres are assigned to you yet. Please contact the admin.",
"uploadButtonIdle": "Start upload",
"uploadButtonUploading": "Uploading...",
@@ -222,6 +231,7 @@
"columnTitle": "Title",
"columnArtist": "Artist",
"columnYear": "Year",
"columnCover": "Cover",
"columnGenresSpecials": "Genres / Specials",
"columnAdded": "Added",
"columnActivations": "Activations",
@@ -272,7 +282,123 @@
"noBatchOperations": "No batch operations specified",
"batchUpdateSuccess": "Successfully updated {success} of {processed} songs",
"batchUpdateError": "Error: {error}",
"batchUpdateNetworkError": "Network error during batch update"
"batchUpdateNetworkError": "Network error during batch update",
"backToDashboard": "Back to dashboard",
"loading": "Loading...",
"curateSpecialsButton": "Curate Specials",
"curateSpecialsTitle": "Curate your Specials",
"curateSpecialsDescription": "Here you can fine-tune the start times of the songs in your assigned specials for the puzzle.",
"noSpecialPermissions": "You do not have any specials assigned to you.",
"noSpecialsInScope": "No specials available for you to curate.",
"noSpecialsAssigned": "No specials assigned to you.",
"curateSpecialSongCount": "{count, plural, one {# song} other {# songs}} in this special",
"curateSpecialOpen": "Open",
"specialForbidden": "You are not allowed to edit this special.",
"specialNotFound": "Special not found.",
"backToCuratorSpecials": "Back to specials overview",
"curateSpecialHeaderPrefix": "Curate Special:",
"curateSpecialNoSongs": "No songs assigned to this special yet.",
"curateSpecialNoSongsSub": "Go back to your dashboard to add songs to this special.",
"curateSpecialInstructions": "Click on the waveform to select where the puzzle should start. The highlighted region shows what players will hear.",
"saving": "💾 Saving...",
"saveChanges": "💾 Save Changes",
"saved": "✓ Saved"
},
"CuratorHelp": {
"title": "Curator Help & Manual",
"backToDashboard": "Back to Dashboard",
"helpButton": "Help",
"modalTitle": "Help",
"introductionTitle": "Introduction",
"introductionText": "As a curator, you are responsible for managing songs within your assigned genres and specials. This dashboard allows you to upload, edit, and organize music for the Hördle game.",
"permissionsTitle": "Your Permissions",
"permission1": "Upload MP3 files and assign them to your genres",
"permission2": "Edit songs that are assigned to at least one of your genres or specials",
"permission3": "Delete songs that are exclusively assigned to your genres/specials",
"permission4": "View and manage comments from players about your puzzles",
"note": "Note",
"permissionNote": "You can only edit or delete songs that are assigned to your genres/specials. Songs assigned to other curators' genres cannot be modified by you.",
"uploadTitle": "Uploading Songs",
"uploadStepsTitle": "Step-by-Step Guide",
"uploadStep1": "Drag MP3 files into the upload area or click to select files",
"uploadStep2": "Select one or more genres and, if applicable, specials to assign to the uploaded songs",
"uploadStep3": "Click 'Start upload' to begin the upload process",
"uploadStep4": "The system will automatically extract metadata (title, artist, release year) from the files",
"uploadBestPracticesTitle": "Best Practices",
"uploadBestPractice1": "Ensure MP3 files have correct ID3 tags (title, artist) for automatic metadata extraction",
"uploadBestPractice2": "Select appropriate genres (and specials) before uploading to avoid manual assignment later",
"uploadBestPractice3": "Check for duplicates before uploading - the system will warn you if a song already exists",
"tip": "Tip",
"uploadTip": "All songs uploaded by curators are automatically excluded from the global playlist. Only admins can change this setting.",
"editingTitle": "Editing Songs",
"singleEditTitle": "Single Song Editing",
"singleEditText": "Click the edit button (✏️) next to a song to modify its title, artist, release year, genres, specials, or exclude-from-global flag. Only songs you can edit will have an active edit button.",
"batchEditTitle": "Batch Editing",
"batchEditText": "Select multiple songs using the checkboxes, then use the batch edit toolbar to apply changes to all selected songs at once:",
"batchEditFeature1": "Genre Toggle: Add or remove genres from all selected songs",
"batchEditFeature2": "Special Toggle: Add or remove specials from all selected songs",
"batchEditFeature3": "Artist Change: Set the same artist name for all selected songs",
"batchEditFeature4": "Exclude Global Flag: Set or remove the exclude-from-global flag (Global Curators only)",
"genreSpecialAssignmentTitle": "Genre & Special Assignment",
"genreSpecialAssignmentText": "You can only assign songs to genres and specials that you are responsible for. Songs can have multiple genres and specials. When editing, you can toggle assignments - if a genre/special is already assigned, it will be removed; if not, it will be added.",
"commentsTitle": "Managing Comments",
"commentsText": "Players can send you feedback about puzzles in your genres or specials. Comments appear in your dashboard with a badge showing unread messages.",
"commentsActionsTitle": "Available Actions",
"markAsRead": "Mark as Read",
"markAsReadText": "Click on a comment to mark it as read. Read comments are displayed with a gray border.",
"archive": "Archive",
"archiveText": "Archive comments you no longer need. Archived comments are removed from your view.",
"bestPracticesTitle": "Best Practices for Curators",
"bestPractice1": "Keep metadata accurate: Ensure song titles and artist names are correct and consistent",
"bestPractice2": "Use appropriate genres: Assign songs to the most relevant genres to help players discover music",
"bestPractice3": "Respond to comments: Check comments regularly and consider player feedback when curating",
"bestPractice4": "Maintain quality: Review uploaded songs for audio quality and metadata accuracy",
"bestPractice5": "Use batch editing efficiently: When making similar changes to multiple songs, use batch edit to save time",
"troubleshootingTitle": "Troubleshooting",
"troubleshootingQ1": "Why can't I edit a song?",
"troubleshootingA1": "You can only edit songs that are assigned to at least one of your genres or specials. If a song has no genres/specials assigned, you can edit it. If it's assigned to other curators' genres only, you cannot edit it.",
"troubleshootingQ2": "Why can't I delete a song?",
"troubleshootingA2": "You can only delete songs that are exclusively assigned to your genres/specials. If a song has any genres or specials assigned to other curators, you cannot delete it.",
"troubleshootingQ3": "Why can't I assign a genre/special?",
"troubleshootingA3": "You can only assign songs to genres and specials that you are responsible for. Contact the admin if you need access to additional genres or specials.",
"troubleshootingQ4": "Why is the exclude-from-global checkbox disabled?",
"troubleshootingA4": "Only Global Curators can change the exclude-from-global flag. If you need this permission, contact the admin.",
"curateSpecialsHelpTitle": "Curating specials",
"curateSpecialsHelpIntro": "In the \"Curate Specials\" area you can choose the exact audio snippet that players will hear in your specials. You only ever see specials that are assigned to you.",
"curateSpecialsHelpStepsTitle": "How to curate specials",
"curateSpecialsHelpStep1": "Open the curator dashboard and click on \"Curate Specials\" to see all specials assigned to you.",
"curateSpecialsHelpStep2": "Select a special from the list to open the waveform editor for that special.",
"curateSpecialsHelpStep3": "Click on the waveform to choose the start time. The highlighted region shows exactly what players will hear.",
"curateSpecialsHelpStep4": "Use zoom, pan and segment playback to fine-tune the snippet. Click \"Save changes\" to apply the new start time.",
"curateSpecialsPermissionsNote": "You can only curate specials that are assigned to you. If you try to open or save a special that is not yours, the system will block the action.",
"tooltipDashboardShort": "Overview of your curator dashboard",
"tooltipDashboardLong": "This is your main dashboard where you can upload songs, manage your track list, and view comments from players. Use the help button (❓) to access the full manual.",
"tooltipUploadShort": "Upload MP3 files to your genres",
"tooltipUploadLong": "Drag and drop MP3 files or click to select. The system will automatically extract metadata (title, artist, release year) from ID3 tags. Select genres before uploading to automatically assign songs. All curator uploads are excluded from the global playlist by default.",
"tooltipGenreAssignmentShort": "Assign genres to uploaded songs",
"tooltipGenreAssignmentLong": "Select one or more genres before uploading. The selected genres will be assigned to all successfully uploaded songs. You can only assign genres that you are responsible for. If you don't select any genres, you can assign them later by editing the songs.",
"tooltipSpecialAssignmentShort": "Assign specials to uploaded songs",
"tooltipSpecialAssignmentLong": "Select one or more specials before uploading. The selected specials will be assigned to all successfully uploaded songs. You can only assign specials that you are responsible for. If you don't select any specials, you can assign them later by editing the songs.",
"tooltipTracklistShort": "Manage your songs",
"tooltipTracklistLong": "This table shows all songs in your genres and specials. You can search, filter, sort, and edit songs. Use the checkboxes to select multiple songs for batch editing. Only songs you can edit will have an active checkbox.",
"tooltipSearchShort": "Search by title or artist",
"tooltipSearchLong": "Type in the search box to filter songs by title or artist name. The search is case-insensitive and matches partial text. Clear the search to show all songs again.",
"tooltipFilterShort": "Filter by genre, special, or global flag",
"tooltipFilterLong": "Use the filter dropdown to show only songs from a specific genre, special, or songs excluded from the global playlist. Combine with search for more precise filtering.",
"tooltipBatchEditShort": "Edit multiple songs at once",
"tooltipBatchEditLong": "Select multiple songs using checkboxes, then use the batch edit toolbar to apply changes to all selected songs simultaneously. You can toggle genres/specials, change artist names, or modify the exclude-from-global flag (Global Curators only).",
"tooltipBatchGenreToggleShort": "Add or remove genres",
"tooltipBatchGenreToggleLong": "Select genres to toggle. If a selected song already has the genre, it will be removed. If it doesn't have the genre, it will be added. This allows you to quickly add or remove genres from multiple songs at once.",
"tooltipBatchSpecialToggleShort": "Add or remove specials",
"tooltipBatchSpecialToggleLong": "Select specials to toggle. If a selected song already has the special, it will be removed. If it doesn't have the special, it will be added. You can only toggle specials you are responsible for.",
"tooltipBatchArtistShort": "Change artist for all selected songs",
"tooltipBatchArtistLong": "Enter a new artist name to set it for all selected songs. This is useful for correcting artist names or standardizing naming conventions across multiple songs.",
"tooltipCommentsShort": "Player feedback and comments",
"tooltipCommentsLong": "Players can send you messages about puzzles in your genres or specials. Unread comments are highlighted with a blue border and badge. Click on a comment to mark it as read, or archive it if you no longer need it.",
"tooltipCurateSpecialsShort": "Curate the start times for your specials",
"tooltipCurateSpecialsLong": "This view shows all specials that are assigned to you. Open a special to choose the audio snippet that players will hear. You can only see and edit specials for which you are responsible.",
"tooltipCurateSpecialEditorShort": "Use the waveform editor to pick the puzzle snippet",
"tooltipCurateSpecialEditorLong": "Click on the waveform to choose where the puzzle starts. Use zoom and pan for fine control, and play back individual segments to test them. When you save, only this curated snippet will be used for players in this special."
},
"About": {
"title": "About Hördle & Imprint",

100
package-lock.json generated
View File

@@ -1,18 +1,18 @@
{
"name": "hoerdle",
"version": "0.1.2",
"version": "0.1.6.11",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "hoerdle",
"version": "0.1.2",
"version": "0.1.6.11",
"dependencies": {
"@prisma/client": "^6.19.0",
"bcryptjs": "^3.0.3",
"driver.js": "^1.4.0",
"music-metadata": "^11.10.2",
"next": "16.0.3",
"next": "^16.0.7",
"next-intl": "^4.5.6",
"prisma": "^6.19.0",
"react": "19.2.0",
@@ -28,7 +28,7 @@
"babel-plugin-react-compiler": "1.0.0",
"baseline-browser-mapping": "^2.8.32",
"eslint": "^9",
"eslint-config-next": "16.0.3",
"eslint-config-next": "^16.0.7",
"typescript": "^5"
}
},
@@ -1101,15 +1101,15 @@
}
},
"node_modules/@next/env": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.3.tgz",
"integrity": "sha512-IqgtY5Vwsm14mm/nmQaRMmywCU+yyMIYfk3/MHZ2ZTJvwVbBn3usZnjMi1GacrMVzVcAxJShTCpZlPs26EdEjQ==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.7.tgz",
"integrity": "sha512-gpaNgUh5nftFKRkRQGnVi5dpcYSKGcZZkQffZ172OrG/XkrnS7UBTQ648YY+8ME92cC4IojpI2LqTC8sTDhAaw==",
"license": "MIT"
},
"node_modules/@next/eslint-plugin-next": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.0.3.tgz",
"integrity": "sha512-6sPWmZetzFWMsz7Dhuxsdmbu3fK+/AxKRtj7OB0/3OZAI2MHB/v2FeYh271LZ9abvnM1WIwWc/5umYjx0jo5sQ==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.0.7.tgz",
"integrity": "sha512-hFrTNZcMEG+k7qxVxZJq3F32Kms130FAhG8lvw2zkKBgAcNOJIxlljNiCjGygvBshvaGBdf88q2CqWtnqezDHA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1117,9 +1117,9 @@
}
},
"node_modules/@next/swc-darwin-arm64": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.3.tgz",
"integrity": "sha512-MOnbd92+OByu0p6QBAzq1ahVWzF6nyfiH07dQDez4/Nku7G249NjxDVyEfVhz8WkLiOEU+KFVnqtgcsfP2nLXg==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.7.tgz",
"integrity": "sha512-LlDtCYOEj/rfSnEn/Idi+j1QKHxY9BJFmxx7108A6D8K0SB+bNgfYQATPk/4LqOl4C0Wo3LACg2ie6s7xqMpJg==",
"cpu": [
"arm64"
],
@@ -1133,9 +1133,9 @@
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.3.tgz",
"integrity": "sha512-i70C4O1VmbTivYdRlk+5lj9xRc2BlK3oUikt3yJeHT1unL4LsNtN7UiOhVanFdc7vDAgZn1tV/9mQwMkWOJvHg==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.7.tgz",
"integrity": "sha512-rtZ7BhnVvO1ICf3QzfW9H3aPz7GhBrnSIMZyr4Qy6boXF0b5E3QLs+cvJmg3PsTCG2M1PBoC+DANUi4wCOKXpA==",
"cpu": [
"x64"
],
@@ -1149,9 +1149,9 @@
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.3.tgz",
"integrity": "sha512-O88gCZ95sScwD00mn/AtalyCoykhhlokxH/wi1huFK+rmiP5LAYVs/i2ruk7xST6SuXN4NI5y4Xf5vepb2jf6A==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.7.tgz",
"integrity": "sha512-mloD5WcPIeIeeZqAIP5c2kdaTa6StwP4/2EGy1mUw8HiexSHGK/jcM7lFuS3u3i2zn+xH9+wXJs6njO7VrAqww==",
"cpu": [
"arm64"
],
@@ -1165,9 +1165,9 @@
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.3.tgz",
"integrity": "sha512-CEErFt78S/zYXzFIiv18iQCbRbLgBluS8z1TNDQoyPi8/Jr5qhR3e8XHAIxVxPBjDbEMITprqELVc5KTfFj0gg==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.7.tgz",
"integrity": "sha512-+ksWNrZrthisXuo9gd1XnjHRowCbMtl/YgMpbRvFeDEqEBd523YHPWpBuDjomod88U8Xliw5DHhekBC3EOOd9g==",
"cpu": [
"arm64"
],
@@ -1181,9 +1181,9 @@
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.3.tgz",
"integrity": "sha512-Tc3i+nwt6mQ+Dwzcri/WNDj56iWdycGVh5YwwklleClzPzz7UpfaMw1ci7bLl6GRYMXhWDBfe707EXNjKtiswQ==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.7.tgz",
"integrity": "sha512-4WtJU5cRDxpEE44Ana2Xro1284hnyVpBb62lIpU5k85D8xXxatT+rXxBgPkc7C1XwkZMWpK5rXLXTh9PFipWsA==",
"cpu": [
"x64"
],
@@ -1197,9 +1197,9 @@
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.3.tgz",
"integrity": "sha512-zTh03Z/5PBBPdTurgEtr6nY0vI9KR9Ifp/jZCcHlODzwVOEKcKRBtQIGrkc7izFgOMuXDEJBmirwpGqdM/ZixA==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.7.tgz",
"integrity": "sha512-HYlhqIP6kBPXalW2dbMTSuB4+8fe+j9juyxwfMwCe9kQPPeiyFn7NMjNfoFOfJ2eXkeQsoUGXg+O2SE3m4Qg2w==",
"cpu": [
"x64"
],
@@ -1213,9 +1213,9 @@
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.3.tgz",
"integrity": "sha512-Jc1EHxtZovcJcg5zU43X3tuqzl/sS+CmLgjRP28ZT4vk869Ncm2NoF8qSTaL99gh6uOzgM99Shct06pSO6kA6g==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.7.tgz",
"integrity": "sha512-EviG+43iOoBRZg9deGauXExjRphhuYmIOJ12b9sAPy0eQ6iwcPxfED2asb/s2/yiLYOdm37kPaiZu8uXSYPs0Q==",
"cpu": [
"arm64"
],
@@ -1229,9 +1229,9 @@
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.3.tgz",
"integrity": "sha512-N7EJ6zbxgIYpI/sWNzpVKRMbfEGgsWuOIvzkML7wxAAZhPk1Msxuo/JDu1PKjWGrAoOLaZcIX5s+/pF5LIbBBg==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.7.tgz",
"integrity": "sha512-gniPjy55zp5Eg0896qSrf3yB1dw4F/3s8VK1ephdsZZ129j2n6e1WqCbE2YgcKhW9hPB9TVZENugquWJD5x0ug==",
"cpu": [
"x64"
],
@@ -3474,13 +3474,13 @@
}
},
"node_modules/eslint-config-next": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.0.3.tgz",
"integrity": "sha512-5F6qDjcZldf0Y0ZbqvWvap9xzYUxyDf7/of37aeyhvkrQokj/4bT1JYWZdlWUr283aeVa+s52mPq9ogmGg+5dw==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.0.7.tgz",
"integrity": "sha512-WubFGLFHfk2KivkdRGfx6cGSFhaQqhERRfyO8BRx+qiGPGp7WLKcPvYC4mdx1z3VhVRcrfFzczjjTrbJZOpnEQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@next/eslint-plugin-next": "16.0.3",
"@next/eslint-plugin-next": "16.0.7",
"eslint-import-resolver-node": "^0.3.6",
"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-import": "^2.32.0",
@@ -5945,12 +5945,12 @@
}
},
"node_modules/next": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/next/-/next-16.0.3.tgz",
"integrity": "sha512-Ka0/iNBblPFcIubTA1Jjh6gvwqfjrGq1Y2MTI5lbjeLIAfmC+p5bQmojpRZqgHHVu5cG4+qdIiwXiBSm/8lZ3w==",
"version": "16.0.7",
"resolved": "https://registry.npmjs.org/next/-/next-16.0.7.tgz",
"integrity": "sha512-3mBRJyPxT4LOxAJI6IsXeFtKfiJUbjCLgvXO02fV8Wy/lIhPvP94Fe7dGhUgHXcQy4sSuYwQNcOLhIfOm0rL0A==",
"license": "MIT",
"dependencies": {
"@next/env": "16.0.3",
"@next/env": "16.0.7",
"@swc/helpers": "0.5.15",
"caniuse-lite": "^1.0.30001579",
"postcss": "8.4.31",
@@ -5963,14 +5963,14 @@
"node": ">=20.9.0"
},
"optionalDependencies": {
"@next/swc-darwin-arm64": "16.0.3",
"@next/swc-darwin-x64": "16.0.3",
"@next/swc-linux-arm64-gnu": "16.0.3",
"@next/swc-linux-arm64-musl": "16.0.3",
"@next/swc-linux-x64-gnu": "16.0.3",
"@next/swc-linux-x64-musl": "16.0.3",
"@next/swc-win32-arm64-msvc": "16.0.3",
"@next/swc-win32-x64-msvc": "16.0.3",
"@next/swc-darwin-arm64": "16.0.7",
"@next/swc-darwin-x64": "16.0.7",
"@next/swc-linux-arm64-gnu": "16.0.7",
"@next/swc-linux-arm64-musl": "16.0.7",
"@next/swc-linux-x64-gnu": "16.0.7",
"@next/swc-linux-x64-musl": "16.0.7",
"@next/swc-win32-arm64-msvc": "16.0.7",
"@next/swc-win32-x64-msvc": "16.0.7",
"sharp": "^0.34.4"
},
"peerDependencies": {

View File

@@ -1,6 +1,6 @@
{
"name": "hoerdle",
"version": "0.1.6.0",
"version": "0.1.6.38",
"private": true,
"scripts": {
"dev": "next dev",
@@ -13,7 +13,7 @@
"bcryptjs": "^3.0.3",
"driver.js": "^1.4.0",
"music-metadata": "^11.10.2",
"next": "16.0.3",
"next": "^16.0.7",
"next-intl": "^4.5.6",
"prisma": "^6.19.0",
"react": "19.2.0",
@@ -29,7 +29,7 @@
"babel-plugin-react-compiler": "1.0.0",
"baseline-browser-mapping": "^2.8.32",
"eslint": "^9",
"eslint-config-next": "16.0.3",
"eslint-config-next": "^16.0.7",
"typescript": "^5"
}
}

View File

@@ -0,0 +1,20 @@
-- RedefineTables
PRAGMA defer_foreign_keys=ON;
PRAGMA foreign_keys=OFF;
CREATE TABLE "new_Special" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"name" JSONB NOT NULL,
"subtitle" JSONB,
"maxAttempts" INTEGER NOT NULL DEFAULT 7,
"unlockSteps" TEXT NOT NULL,
"createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
"launchDate" DATETIME,
"endDate" DATETIME,
"curator" TEXT,
"hidden" BOOLEAN NOT NULL DEFAULT false
);
INSERT INTO "new_Special" ("createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "name", "subtitle", "unlockSteps") SELECT "createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "name", "subtitle", "unlockSteps" FROM "Special";
DROP TABLE "Special";
ALTER TABLE "new_Special" RENAME TO "Special";
PRAGMA foreign_keys=ON;
PRAGMA defer_foreign_keys=OFF;

View File

@@ -47,6 +47,7 @@ model Special {
launchDate DateTime?
endDate DateTime?
curator String?
hidden Boolean @default(false)
songs SpecialSong[]
puzzles DailyPuzzle[]
news News[]

BIN
public/favicon-base.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 563 KiB

BIN
public/logo-1024.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 437 KiB

BIN
public/logo-128.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/logo-256.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

BIN
public/logo-512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

19
public/logo-large.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 507 KiB

19
public/logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 142 KiB

View File

@@ -4,6 +4,84 @@
set -e
if [ -f "$HOME/.restic-env" ]; then
# shellcheck source=/dev/null
. "$HOME/.restic-env"
fi
# Extract Gotify variables from .env file if not set (ignore comments and empty lines)
if [ -z "$GOTIFY_URL" ] && [ -f ".env" ]; then
GOTIFY_URL=$(grep -v '^#' .env | grep -v '^$' | grep '^GOTIFY_URL=' | head -1 | cut -d'=' -f2- | tr -d '"' | tr -d "'" | xargs || echo "")
fi
if [ -z "$GOTIFY_APP_TOKEN" ] && [ -f ".env" ]; then
GOTIFY_APP_TOKEN=$(grep -v '^#' .env | grep -v '^$' | grep '^GOTIFY_APP_TOKEN=' | head -1 | cut -d'=' -f2- | tr -d '"' | tr -d "'" | xargs || echo "")
fi
# Extract Gotify variables from docker-compose.yml if not set
if [ -z "$GOTIFY_URL" ] && [ -f "docker-compose.yml" ]; then
GOTIFY_URL=$(grep -oP 'GOTIFY_URL=\K[^\s]+' docker-compose.yml | head -1 | tr -d '"' | tr -d "'" || echo "")
fi
if [ -z "$GOTIFY_APP_TOKEN" ] && [ -f "docker-compose.yml" ]; then
GOTIFY_APP_TOKEN=$(grep -oP 'GOTIFY_APP_TOKEN=\K[^\s]+' docker-compose.yml | head -1 | tr -d '"' | tr -d "'" || echo "")
fi
# Function to send Gotify notification
send_gotify_notification() {
local title="$1"
local message="$2"
local priority="${3:-5}"
# Check if Gotify is configured
if [ -z "$GOTIFY_URL" ] || [ -z "$GOTIFY_APP_TOKEN" ]; then
echo "⚠️ Gotify not configured (GOTIFY_URL or GOTIFY_APP_TOKEN not set), skipping notification"
return 0
fi
echo "📢 Sending Gotify notification..."
# Send notification (fire and forget, don't fail on error)
# Use jq if available for proper JSON encoding, otherwise use simple approach
if command -v jq >/dev/null 2>&1; then
local json_payload
json_payload=$(jq -n \
--arg title "$title" \
--arg message "$message" \
--argjson priority "$priority" \
'{title: $title, message: $message, priority: $priority}')
local curl_exit_code=0
curl -sSf -X POST "${GOTIFY_URL}/message?token=${GOTIFY_APP_TOKEN}" \
-H "Content-Type: application/json" \
-d "$json_payload" \
>/dev/null 2>&1 || curl_exit_code=$?
if [ $curl_exit_code -eq 0 ]; then
echo "✅ Gotify notification sent successfully"
else
echo "⚠️ Failed to send Gotify notification (curl exit code: $curl_exit_code)"
fi
else
# Fallback: simple JSON encoding (replace " with \" and newlines with \n)
local escaped_title escaped_message
escaped_title=$(echo "$title" | sed 's/"/\\"/g')
escaped_message=$(echo "$message" | sed 's/"/\\"/g' | sed ':a;N;$!ba;s/\n/\\n/g')
local curl_exit_code=0
curl -sSf -X POST "${GOTIFY_URL}/message?token=${GOTIFY_APP_TOKEN}" \
-H "Content-Type: application/json" \
-d "{\"title\":\"${escaped_title}\",\"message\":\"${escaped_message}\",\"priority\":${priority}}" \
>/dev/null 2>&1 || curl_exit_code=$?
if [ $curl_exit_code -eq 0 ]; then
echo "✅ Gotify notification sent successfully"
else
echo "⚠️ Failed to send Gotify notification (curl exit code: $curl_exit_code)"
fi
fi
}
echo "💾 Creating Restic backup..."
if ! command -v restic >/dev/null 2>&1; then
@@ -66,12 +144,32 @@ restic -r "$RESTIC_REPO" backup \
if [ $RESTIC_EXIT_CODE -eq 0 ]; then
echo "✅ Restic backup completed successfully"
# Send success notification
send_gotify_notification \
"Hördle Backup: Erfolgreich" \
"Restic Backup wurde erfolgreich abgeschlossen.\nDatum: ${CURRENT_DATE}\nCommit: ${CURRENT_COMMIT_SHORT}" \
5
exit 0
elif [ $RESTIC_EXIT_CODE -eq 3 ]; then
echo "⚠️ Restic backup completed with warnings (some files could not be read), continuing..."
# Send warning notification
send_gotify_notification \
"Hördle Backup: Mit Warnungen" \
"Restic Backup wurde mit Warnungen abgeschlossen (einige Dateien konnten nicht gelesen werden).\nDatum: ${CURRENT_DATE}\nCommit: ${CURRENT_COMMIT_SHORT}" \
7
exit 0
else
echo "⚠️ Restic backup failed (exit code: $RESTIC_EXIT_CODE), continuing deployment..."
# Send error notification
send_gotify_notification \
"Hördle Backup: Fehlgeschlagen" \
"Restic Backup ist fehlgeschlagen (Exit Code: ${RESTIC_EXIT_CODE}).\nDatum: ${CURRENT_DATE}\nCommit: ${CURRENT_COMMIT_SHORT}" \
9
exit 0
fi

View File

@@ -0,0 +1,47 @@
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
async function convertSvgToPng(svgPath, pngPath, size) {
try {
const svgBuffer = fs.readFileSync(svgPath);
await sharp(svgBuffer, {
density: 300 // High DPI for better quality
})
.resize(size, size, {
fit: 'contain',
background: { r: 255, g: 255, b: 255, alpha: 0 } // Transparent background
})
.png()
.toFile(pngPath);
console.log(`✅ Created ${pngPath} (${size}x${size})`);
} catch (error) {
console.error(`❌ Error converting ${svgPath}:`, error.message);
}
}
async function main() {
const publicDir = path.join(__dirname, '..', 'public');
// Convert logo.svg to various PNG sizes
const logoPath = path.join(publicDir, 'logo.svg');
if (fs.existsSync(logoPath)) {
await convertSvgToPng(logoPath, path.join(publicDir, 'logo-512.png'), 512);
await convertSvgToPng(logoPath, path.join(publicDir, 'logo-256.png'), 256);
await convertSvgToPng(logoPath, path.join(publicDir, 'logo-128.png'), 128);
}
// Convert logo-large.svg to larger PNG sizes
const logoLargePath = path.join(publicDir, 'logo-large.svg');
if (fs.existsSync(logoLargePath)) {
await convertSvgToPng(logoLargePath, path.join(publicDir, 'logo-1024.png'), 1024);
await convertSvgToPng(logoLargePath, path.join(publicDir, 'logo-512.png'), 512);
}
console.log('\n✨ Logo conversion complete!');
}
main();

View File

@@ -0,0 +1,138 @@
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
async function createLogoWithText(faviconPath, outputPath, size) {
try {
// Load and resize favicon - smaller to leave room for text
const faviconSize = Math.floor(size * 0.65);
const faviconBuffer = await sharp(faviconPath)
.resize(faviconSize, faviconSize, {
fit: 'contain',
background: { r: 255, g: 255, b: 255, alpha: 0 }
})
.toBuffer();
// Create SVG with favicon and text
const textSize = Math.floor(size * 0.12);
const iconY = Math.floor(size * 0.10); // Logo higher up
const textY = Math.floor(size * 0.92); // Text further down
const iconX = Math.floor((size - faviconSize) / 2);
const svg = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- White background -->
<rect width="${size}" height="${size}" fill="#ffffff"/>
<image href="data:image/png;base64,${faviconBuffer.toString('base64')}"
x="${iconX}"
y="${iconY}"
width="${faviconSize}"
height="${faviconSize}"/>
<text x="${size / 2}" y="${textY}"
font-family="system-ui, -apple-system, sans-serif"
font-size="${textSize}"
font-weight="bold"
fill="#000000"
text-anchor="middle"
letter-spacing="-0.5">
hördle.de
</text>
</svg>`;
// Convert SVG to PNG with white background
await sharp(Buffer.from(svg))
.resize(size, size)
.png()
.toFile(outputPath);
console.log(`✅ Created ${path.basename(outputPath)} (${size}x${size})`);
} catch (error) {
console.error(`❌ Error creating ${outputPath}:`, error.message);
}
}
async function createSVGLogo(faviconPath, outputPath, size) {
try {
// Load and resize favicon - smaller to leave room for text
const faviconSize = Math.floor(size * 0.65);
const faviconBuffer = await sharp(faviconPath)
.resize(faviconSize, faviconSize, {
fit: 'contain',
background: { r: 255, g: 255, b: 255, alpha: 0 }
})
.toBuffer();
// Create SVG with favicon and text
const textSize = Math.floor(size * 0.12);
const iconY = Math.floor(size * 0.10); // Logo higher up
const textY = Math.floor(size * 0.92); // Text further down
const iconX = Math.floor((size - faviconSize) / 2);
const svg = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- White background covering entire image -->
<rect width="${size}" height="${size}" fill="#ffffff"/>
<image href="data:image/png;base64,${faviconBuffer.toString('base64')}"
x="${iconX}"
y="${iconY}"
width="${faviconSize}"
height="${faviconSize}"/>
<text x="${size / 2}" y="${textY}"
font-family="system-ui, -apple-system, sans-serif"
font-size="${textSize}"
font-weight="bold"
fill="#000000"
text-anchor="middle"
letter-spacing="-0.5">
hördle.de
</text>
</svg>`;
fs.writeFileSync(outputPath, svg);
console.log(`✅ Created ${path.basename(outputPath)} (${size}x${size} SVG)`);
} catch (error) {
console.error(`❌ Error creating ${outputPath}:`, error.message);
}
}
async function main() {
const faviconPath = path.join(__dirname, '..', 'app', 'favicon.ico');
const publicDir = path.join(__dirname, '..', 'public');
if (!fs.existsSync(faviconPath)) {
console.error('❌ Favicon not found at', faviconPath);
return;
}
// Extract favicon to PNG first for processing
const tempFavicon = path.join(publicDir, 'favicon-temp.png');
const faviconBuffer = fs.readFileSync(faviconPath);
// Convert ICO to PNG
await sharp(faviconBuffer)
.resize(1024, 1024, { fit: 'contain' })
.png()
.toFile(tempFavicon);
console.log('✅ Extracted favicon to PNG\n');
// Create SVG logo
await createSVGLogo(tempFavicon, path.join(publicDir, 'logo.svg'), 512);
await createSVGLogo(tempFavicon, path.join(publicDir, 'logo-large.svg'), 1024);
// Create PNG logos with text in various sizes
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-128.png'), 128);
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-256.png'), 256);
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-512.png'), 512);
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-1024.png'), 1024);
// Clean up temp file
if (fs.existsSync(tempFavicon)) {
fs.unlinkSync(tempFavicon);
}
console.log('\n✨ Logo creation complete!');
}
main();

View File

@@ -0,0 +1,120 @@
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
async function createLogoWithText(faviconPath, outputPath, size, includeText = true) {
try {
const favicon = await sharp(faviconPath)
.resize(size * 0.7, size * 0.7, {
fit: 'contain',
background: { r: 255, g: 255, b: 255, alpha: 0 }
})
.toBuffer();
// Create SVG with favicon and text
const textSize = Math.floor(size * 0.15);
const spacing = Math.floor(size * 0.05);
const iconSize = Math.floor(size * 0.7);
const iconY = Math.floor(includeText ? size * 0.25 : size * 0.5);
const textY = Math.floor(size * 0.85);
// For now, we'll create a composite image
// First, create the favicon part
const svg = includeText ? `
<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="faviconPattern" x="0" y="0" width="1" height="1">
<image href="data:image/png;base64,${favicon.toString('base64')}"
x="${(size - iconSize) / 2}"
y="${iconY - iconSize / 2}"
width="${iconSize}"
height="${iconSize}"/>
</pattern>
</defs>
<rect width="${size}" height="${size}" fill="url(#faviconPattern)"/>
<text x="${size / 2}" y="${textY}"
font-family="system-ui, -apple-system, sans-serif"
font-size="${textSize}"
font-weight="bold"
fill="#000000"
text-anchor="middle"
letter-spacing="-0.5">
Hördle
</text>
</svg>
` : `
<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
<image href="data:image/png;base64,${favicon.toString('base64')}"
x="${(size - iconSize) / 2}"
y="${(size - iconSize) / 2}"
width="${iconSize}"
height="${iconSize}"/>
</svg>
`;
// Convert SVG to PNG
await sharp(Buffer.from(svg))
.png()
.toFile(outputPath);
console.log(`✅ Created ${outputPath} (${size}x${size})`);
} catch (error) {
console.error(`❌ Error creating ${outputPath}:`, error.message);
}
}
async function main() {
const faviconPath = path.join(__dirname, '..', 'app', 'favicon.ico');
const publicDir = path.join(__dirname, '..', 'public');
if (!fs.existsSync(faviconPath)) {
console.error('❌ Favicon not found at', faviconPath);
return;
}
// Extract favicon to PNG first
const tempFavicon = path.join(publicDir, 'favicon-temp.png');
const faviconBuffer = fs.readFileSync(faviconPath);
// Convert ICO to PNG
await sharp(faviconBuffer)
.resize(1024, 1024, { fit: 'contain' })
.png()
.toFile(tempFavicon);
console.log('✅ Extracted favicon to PNG');
// Create logos with text in various sizes
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-128.png'), 128);
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-256.png'), 256);
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-512.png'), 512);
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-1024.png'), 1024);
// Create SVG version
const faviconPng = await sharp(faviconBuffer)
.resize(512, 512, { fit: 'contain' })
.png()
.toBuffer();
const svgContent = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<image id="faviconImg" href="data:image/png;base64,${faviconPng.toString('base64')}" width="358" height="358" x="77" y="77"/>
</defs>
<use href="#faviconImg"/>
<text x="256" y="430" font-family="system-ui, -apple-system, sans-serif" font-size="48" font-weight="bold" fill="#000000" text-anchor="middle" letter-spacing="-0.5">
Hördle
</text>
</svg>`;
fs.writeFileSync(path.join(publicDir, 'logo.svg'), svgContent);
console.log('✅ Created logo.svg');
// Clean up temp file
fs.unlinkSync(tempFavicon);
console.log('\n✨ Logo creation complete!');
}
main();

View File

@@ -63,10 +63,44 @@ fi
./scripts/backup-restic.sh
# Nur neueste Version holen (shallow fetch), vollständiges Repo ist im Deployment nicht nötig
echo "📥 Fetching latest commit (shallow clone) from git..."
git fetch --prune --tags --depth=1 origin master
# Wichtig: Tags müssen vollständig geholt werden für Version-Anzeige
echo "📥 Fetching latest commit and all tags from git..."
git fetch --prune --tags origin master
git fetch --tags origin
git reset --hard origin/master
# Determine version: try git tag first, then package.json
echo "🏷️ Determining version..."
APP_VERSION=""
# Try to get exact tag if we're on a tagged commit
if git describe --tags --exact-match HEAD 2>/dev/null; then
APP_VERSION=$(git describe --tags --exact-match HEAD 2>/dev/null)
echo " Found exact tag: $APP_VERSION"
else
# Try to get latest tag
LATEST_TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
if [ -n "$LATEST_TAG" ]; then
APP_VERSION="$LATEST_TAG"
echo " Using latest tag: $APP_VERSION"
else
# Fallback to package.json
if [ -f "package.json" ]; then
PACKAGE_VERSION=$(grep -o '"version": "[^"]*"' package.json 2>/dev/null | cut -d'"' -f4)
if [ -n "$PACKAGE_VERSION" ]; then
APP_VERSION="v${PACKAGE_VERSION}"
echo " Using package.json version: $APP_VERSION"
fi
fi
fi
fi
if [ -z "$APP_VERSION" ]; then
echo "⚠️ Could not determine version, using 'dev'"
APP_VERSION="dev"
fi
echo "📦 Building with version: $APP_VERSION"
# Prüfe und erstelle/repariere Netzwerk falls nötig
echo "🌐 Prüfe Docker-Netzwerk..."
if ! docker network ls | grep -q "hoerdle_default"; then
@@ -82,16 +116,19 @@ echo ""
# Build new image in background (doesn't stop running container)
echo "🔨 Building new Docker image (this runs while app is still online)..."
docker compose build
docker compose build --build-arg APP_VERSION="$APP_VERSION"
# Quick restart with pre-built image
echo "🔄 Restarting with new image (minimal downtime)..."
docker compose up -d
# Clean up old images
# Clean up old images and build cache
echo "🧹 Cleaning up old images..."
docker image prune -f
echo "🧹 Cleaning up build cache..."
docker builder prune -f
echo "✅ Deployment complete!"
echo ""
echo "📊 Showing logs (Ctrl+C to exit)..."

104
scripts/restore-restic.sh Normal file
View File

@@ -0,0 +1,104 @@
#!/bin/bash
# Restic restore script for Hördle deployment
# Restores files from the Restic repository created by backup-restic.sh
#
# Usage:
# scripts/restore-restic.sh [SNAPSHOT] [TARGET_DIR]
#
# SNAPSHOT : Optional. Restic snapshot reference (ID, tag, or "latest").
# Defaults to "latest".
# TARGET_DIR : Optional. Directory to restore into.
# Defaults to "./restic-restore-<DATE>-<TIME>".
#
# Examples:
# scripts/restore-restic.sh
# → Restore latest snapshot into a new timestamped directory
#
# scripts/restore-restic.sh latest ./restore-latest
# → Restore latest snapshot into ./restore-latest
#
# scripts/restore-restic.sh d3adb33f ./restore-commit
# → Restore specific snapshot ID into ./restore-commit
set -e
# Optional: Restic-Umgebungsvariablen aus ~/.restic-env laden
if [ -f "$HOME/.restic-env" ]; then
# shellcheck source=/dev/null
. "$HOME/.restic-env"
fi
echo "💾 Restoring from Restic backup..."
if ! command -v restic >/dev/null 2>&1; then
echo "❌ restic nicht im PATH gefunden. Bitte installiere restic oder füge es zum PATH hinzu."
exit 1
fi
# Erforderliche Umgebungsvariablen prüfen
if [ -z "$RESTIC_PASSWORD" ]; then
echo "❌ RESTIC_PASSWORD ist nicht gesetzt. Abbruch."
exit 1
fi
if [ -z "$RESTIC_AUTH_USER" ] || [ -z "$RESTIC_AUTH_PASSWORD" ]; then
echo "❌ RESTIC_AUTH_USER oder RESTIC_AUTH_PASSWORD ist nicht gesetzt. Abbruch."
exit 1
fi
# Repository-URL auf Basis des Backup-Skripts
RESTIC_REPO="rest:https://${RESTIC_AUTH_USER}:${RESTIC_AUTH_PASSWORD}@restic.elpatron.me/"
# Passwort für restic exportieren
export RESTIC_PASSWORD
# Snapshot-Referenz und Zielverzeichnis bestimmen
SNAPSHOT_REF="${1:-latest}"
TIMESTAMP="$(date +%Y-%m-%d_%H-%M-%S)"
DEFAULT_TARGET_DIR="./restic-restore-${TIMESTAMP}"
TARGET_DIR="${2:-$DEFAULT_TARGET_DIR}"
echo " Repository : $RESTIC_REPO"
echo " Snapshot : $SNAPSHOT_REF"
echo " Zielordner : $TARGET_DIR"
# Prüfen, ob Repository existiert
if ! restic -r "$RESTIC_REPO" snapshots >/dev/null 2>&1; then
echo "❌ Kein gültiges Restic-Repository gefunden (oder keine Snapshots vorhanden)."
exit 1
fi
# Zielverzeichnis vorbereiten
if [ -e "$TARGET_DIR" ] && [ ! -d "$TARGET_DIR" ]; then
echo "$TARGET_DIR existiert und ist kein Verzeichnis. Abbruch."
exit 1
fi
if [ ! -d "$TARGET_DIR" ]; then
echo " Erstelle Zielverzeichnis $TARGET_DIR ..."
mkdir -p "$TARGET_DIR"
fi
echo " Verfügbare Snapshots (gekürzt):"
restic -r "$RESTIC_REPO" snapshots --compact || true
echo
echo " Starte Restic-Restore..."
RESTIC_EXIT_CODE=0
# Standard-Restore: gesamtes Repo in Zielverzeichnis
# (Das spiegelt die beim Backup gesicherten Pfade unterhalb von TARGET_DIR.)
restic -r "$RESTIC_REPO" restore "$SNAPSHOT_REF" \
--target "$TARGET_DIR" || RESTIC_EXIT_CODE=$?
if [ $RESTIC_EXIT_CODE -eq 0 ]; then
echo "✅ Restic-Restore erfolgreich abgeschlossen."
echo " Wiederhergestellte Daten befinden sich in: $TARGET_DIR"
exit 0
else
echo "⚠️ Restic-Restore fehlgeschlagen (Exit-Code: $RESTIC_EXIT_CODE)."
exit $RESTIC_EXIT_CODE
fi