feat: add plausible.elpatron.me to CSP script-src and connect-src directives.

chore: remove Content-Security-Policy header configuration
feat: Add Content Security Policy header and move Plausible script to HTML head with beforeInteractive strategy.
2025-11-25 22:34:32 +01:00 · 2025-11-25 22:31:13 +01:00 · 2025-11-25 22:19:34 +01:00 · 2025-11-25 22:13:46 +01:00 · 2025-11-25 15:28:22 +01:00 · 2025-11-25 15:26:20 +01:00
4 changed files with 73 additions and 8 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import Script from "next/script";
 import "./globals.css";

 const geistSans = Geist({
@@ -34,6 +35,14 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
+      <head>
+        <Script
+          defer
+          data-domain="hoerdle.elpatron.me"
+          src="https://plausible.elpatron.me/js/script.js"
+          strategy="beforeInteractive"
+        />
+      </head>
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
        <InstallPrompt />
--- a/components/AudioPlayer.tsx
+++ b/components/AudioPlayer.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';

 interface AudioPlayerProps {
    src: string;
@@ -9,9 +9,14 @@ interface AudioPlayerProps {
    onPlay?: () => void;
    onReplay?: () => void;
    autoPlay?: boolean;
+    onHasPlayedChange?: (hasPlayed: boolean) => void;
 }

-export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false }: AudioPlayerProps) {
+export interface AudioPlayerRef {
+    play: () => void;
+}
+
+const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false, onHasPlayedChange }, ref) => {
    const audioRef = useRef<HTMLAudioElement>(null);
    const [isPlaying, setIsPlaying] = useState(false);
    const [progress, setProgress] = useState(0);
@@ -24,6 +29,7 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
            setIsPlaying(false);
            setProgress(0);
            setHasPlayedOnce(false); // Reset for new segment
+            onHasPlayedChange?.(false); // Notify parent

            if (autoPlay) {
                const playPromise = audioRef.current.play();
@@ -33,6 +39,7 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
                            setIsPlaying(true);
                            onPlay?.();
                            setHasPlayedOnce(true);
+                            onHasPlayedChange?.(true); // Notify parent
                        })
                        .catch(error => {
                            console.log("Autoplay prevented:", error);
@@ -43,6 +50,30 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
        }
    }, [src, unlockedSeconds, startTime, autoPlay]);

+    // Expose play method to parent component
+    useImperativeHandle(ref, () => ({
+        play: () => {
+            if (!audioRef.current) return;
+
+            const playPromise = audioRef.current.play();
+            if (playPromise !== undefined) {
+                playPromise
+                    .then(() => {
+                        setIsPlaying(true);
+                        onPlay?.();
+                        if (!hasPlayedOnce) {
+                            setHasPlayedOnce(true);
+                            onHasPlayedChange?.(true);
+                        }
+                    })
+                    .catch(error => {
+                        console.error("Play failed:", error);
+                        setIsPlaying(false);
+                    });
+            }
+        }
+    }));
+
    const togglePlay = () => {
        if (!audioRef.current) return;

@@ -56,6 +87,7 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
                onReplay?.();
            } else {
                setHasPlayedOnce(true);
+                onHasPlayedChange?.(true); // Notify parent
            }
        }
        setIsPlaying(!isPlaying);
@@ -112,4 +144,8 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
            </div>
        </div>
    );
-}
+});
+
+AudioPlayer.displayName = 'AudioPlayer';
+
+export default AudioPlayer;
--- a/components/Game.tsx
+++ b/components/Game.tsx
@@ -1,7 +1,7 @@
 'use client';

-import { useEffect, useState } from 'react';
-import AudioPlayer from './AudioPlayer';
+import { useEffect, useState, useRef } from 'react';
+import AudioPlayer, { AudioPlayerRef } from './AudioPlayer';
 import GuessInput from './GuessInput';
 import Statistics from './Statistics';
 import { useGameState } from '../lib/gameState';
@@ -37,6 +37,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
    const [timeUntilNext, setTimeUntilNext] = useState('');
    const [hasRated, setHasRated] = useState(false);
    const [showYearModal, setShowYearModal] = useState(false);
+    const [hasPlayedAudio, setHasPlayedAudio] = useState(false);
+    const audioPlayerRef = useRef<AudioPlayerRef>(null);

    useEffect(() => {
        const updateCountdown = () => {
@@ -116,7 +118,20 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
        setTimeout(() => setIsProcessingGuess(false), 500);
    };

+    const handleStartAudio = () => {
+        // This will be called when user clicks "Start" button on first attempt
+        // Trigger the audio player to start playing
+        audioPlayerRef.current?.play();
+        setHasPlayedAudio(true);
+    };
+
    const handleSkip = () => {
+        // If user hasn't played audio yet on first attempt, start it instead of skipping
+        if (gameState.guesses.length === 0 && !hasPlayedAudio) {
+            handleStartAudio();
+            return;
+        }
+
        setLastAction('SKIP');
        addGuess("SKIPPED", false);

@@ -252,11 +267,13 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                    <ScoreDisplay score={gameState.score} breakdown={gameState.scoreBreakdown} />

                    <AudioPlayer
+                        ref={audioPlayerRef}
                        src={dailyPuzzle.audioUrl}
                        unlockedSeconds={unlockedSeconds}
                        startTime={dailyPuzzle.startTime}
                        autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost)}
                        onReplay={addReplay}
+                        onHasPlayedChange={setHasPlayedAudio}
                    />
                </div>

@@ -282,7 +299,10 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                                onClick={handleSkip}
                                className="skip-button"
                            >
-                                Skip (+{unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds}s)
+                                {gameState.guesses.length === 0 && !hasPlayedAudio
+                                    ? 'Start'
+                                    : `Skip (+${unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds}s)`
+                                }
                            </button>
                        ) : (
                            <button
--- a/middleware.ts
+++ b/middleware.ts
@@ -25,11 +25,11 @@ export function middleware(request: NextRequest) {
    // Content Security Policy
    const csp = [
        "default-src 'self'",
-        "script-src 'self' 'unsafe-inline' 'unsafe-eval'", // Next.js requires unsafe-inline/eval
+        "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://plausible.elpatron.me", // Next.js requires unsafe-inline/eval
        "style-src 'self' 'unsafe-inline'", // Allow inline styles
        "img-src 'self' data: blob:",
        "font-src 'self' data:",
-        "connect-src 'self' https://openrouter.ai https://gotify.example.com",
+        "connect-src 'self' https://openrouter.ai https://gotify.example.com https://plausible.elpatron.me",
        "media-src 'self' blob:",
        "frame-ancestors 'self'",
    ].join('; ');
Author	SHA1	Message	Date
Hördle Bot	0877842107	feat: add plausible.elpatron.me to CSP script-src and connect-src directives.	2025-11-25 22:34:32 +01:00
Hördle Bot	a5cbbffc20	chore: remove Content-Security-Policy header configuration	2025-11-25 22:31:13 +01:00
Hördle Bot	ffb7be602f	feat: Add Content Security Policy header and move Plausible script to HTML head with `beforeInteractive` strategy.	2025-11-25 22:19:34 +01:00
Hördle Bot	1d62aca2fb	feat: add Plausible Analytics script to layout for tracking.	2025-11-25 22:13:46 +01:00
Hördle Bot	9bf7e72a6c	Fix: Properly handle async play() and remove autoPlay conflict	2025-11-25 15:28:22 +01:00
Hördle Bot	f8b5dcf300	Fix: Start button now actually starts audio playback	2025-11-25 15:26:20 +01:00
Hördle Bot	072158f4ed	Feature: Skip button becomes Start button on first attempt if audio not played	2025-11-25 15:18:25 +01:00