username validation fix

src/components/GameContainer.tsx

@@ -16,6 +16,13 @@ import { supabase } from "@/integrations/supabase/client";
 
 type GameState = "welcome" | "theme-selection" | "building-sentence" | "showing-guess";
 
+const normalizeWord = (word: string): string => {
+  return word.normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim();
+};
+
 export const GameContainer = () => {
   const [gameState, setGameState] = useState<GameState>("welcome");
   const [currentWord, setCurrentWord] = useState<string>("");
@@ -240,7 +247,7 @@ export const GameContainer = () => {
   };
 
   const isGuessCorrect = () => {
-    return aiGuess.toLowerCase() === currentWord.toLowerCase();
+    return normalizeWord(aiGuess) === normalizeWord(currentWord);
   };
 
   const handleGuessComplete = () => {

src/components/HighScoreBoard.tsx

@@ -75,7 +75,7 @@ export const HighScoreBoard = ({
   });
 
   const handleSubmitScore = async () => {
-    if (!playerName.trim() || !/^[\p{L}0-9]+$/u.test(playerName.trim())) {
+    if (!playerName.trim() || !/^[a-zA-ZÀ-ÿ0-9-]+$/u.test(playerName.trim())) {
       toast({
         title: t.leaderboard.error.invalidName,
         description: t.leaderboard.error.invalidName,

src/components/game/GuessDisplay.tsx

@@ -60,6 +60,10 @@ export const GuessDisplay = ({
     setHasSubmittedScore(true);
   };
 
+  const handleShowHighScores = () => {
+    setShowHighScores(true);
+  };
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
@@ -88,7 +92,7 @@ export const GuessDisplay = ({
         sessionId={sessionId}
         currentTheme={currentTheme}
         onScoreSubmitted={handleScoreSubmitted}
-        onHighScoreDialogChange={setShowHighScores}
+        onShowHighScores={handleShowHighScores}
       />
 
       <Dialog open={showHighScores} onOpenChange={setShowHighScores}>

src/components/game/guess-display/ActionButtons.tsx

@@ -1,8 +1,6 @@
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { useState } from "react";
 import { useTranslation } from "@/hooks/useTranslation";
-import { HighScoreBoard } from "../../HighScoreBoard";
 
 interface ActionButtonsProps {
   isCorrect: boolean;
@@ -13,64 +11,31 @@ interface ActionButtonsProps {
   sessionId: string;
   currentTheme: string;
   onScoreSubmitted?: () => void;
-  onHighScoreDialogChange?: (isOpen: boolean) => void;
+  onShowHighScores: () => void;
 }
 
 export const ActionButtons = ({
   isCorrect,
   onNextRound,
   onPlayAgain,
-  currentScore,
-  avgWordsPerRound,
-  sessionId,
-  currentTheme,
-  onScoreSubmitted,
-  onHighScoreDialogChange,
+  onShowHighScores,
 }: ActionButtonsProps) => {
-  const [showHighScores, setShowHighScores] = useState(false);
   const t = useTranslation();
 
-  const handleShowHighScores = () => {
-    setShowHighScores(true);
-    onHighScoreDialogChange?.(true);
-  };
-
-  const handleCloseHighScores = () => {
-    setShowHighScores(false);
-    onHighScoreDialogChange?.(false);
-  };
-
   return (
-    <>
-      <div className="flex justify-center gap-4">
-        {isCorrect ? (
-          <Button onClick={onNextRound} className="text-white">{t.game.nextRound} ⏎</Button>
-        ) : (
-          <>
-            <Button onClick={onPlayAgain} className="text-white">
-              {t.game.playAgain} ⏎
-            </Button>
-            <Button onClick={handleShowHighScores} variant="secondary" className="text-white">
-              {t.game.saveScore}
-            </Button>
-          </>
-        )}
-      </div>
-
-      <Dialog open={showHighScores} onOpenChange={handleCloseHighScores}>
-        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
-          <HighScoreBoard
-            currentScore={currentScore}
-            avgWordsPerRound={avgWordsPerRound}
-            onClose={handleCloseHighScores}
-            onPlayAgain={onPlayAgain}
-            sessionId={sessionId}
-            showThemeFilter={false}
-            initialTheme={currentTheme}
-            onScoreSubmitted={onScoreSubmitted}
-          />
-        </DialogContent>
-      </Dialog>
-    </>
+    <div className="flex justify-center gap-4">
+      {isCorrect ? (
+        <Button onClick={onNextRound} className="text-white">{t.game.nextRound} ⏎</Button>
+      ) : (
+        <>
+          <Button onClick={onPlayAgain} className="text-white">
+            {t.game.playAgain} ⏎
+          </Button>
+          <Button onClick={onShowHighScores} variant="secondary" className="text-white">
+            {t.game.saveScore}
+          </Button>
+        </>
+      )}
+    </div>
   );
 };

src/components/game/leaderboard/ScoreSubmissionForm.tsx

@@ -27,7 +27,7 @@ export const ScoreSubmissionForm = ({
         placeholder={t.leaderboard.enterName}
         value={playerName}
         onChange={(e) => {
-          const value = e.target.value.replace(/[^a-zA-ZÀ-ÿ0-9]/g, "");
+          const value = e.target.value.replace(/[^a-zA-ZÀ-ÿ0-9-]/g, "");
           setPlayerName(value);
         }}
         onKeyDown={onKeyDown}