input validation

README.md

@@ -5,7 +5,7 @@ colorFrom: blue
 colorTo: pink
 sdk: docker
 app_port: 8080
-pinned: false
+pinned: true
 ---
 # Think in Sync
 

src/components/game/SentenceBuilder.tsx

@@ -1,10 +1,5 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { useState } from "react";
 import { motion } from "framer-motion";
-import { KeyboardEvent, useRef, useEffect, useState } from "react";
-import { useToast } from "@/hooks/use-toast";
-import { useTranslation } from "@/hooks/useTranslation";
-import { House } from "lucide-react";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -15,6 +10,11 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { useTranslation } from "@/hooks/useTranslation";
+import { RoundHeader } from "./sentence-builder/RoundHeader";
+import { WordDisplay } from "./sentence-builder/WordDisplay";
+import { SentenceDisplay } from "./sentence-builder/SentenceDisplay";
+import { InputForm } from "./sentence-builder/InputForm";
 
 interface SentenceBuilderProps {
   currentWord: string;
@@ -39,92 +39,25 @@ export const SentenceBuilder = ({
   onMakeGuess,
   onBack,
 }: SentenceBuilderProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [imageLoaded, setImageLoaded] = useState(false);
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [hasMultipleWords, setHasMultipleWords] = useState(false);
-  const imagePath = `/think_in_sync_assets/${currentWord.toLowerCase()}.jpg`;
-  const { toast } = useToast();
+  const [containsTargetWord, setContainsTargetWord] = useState(false);
   const t = useTranslation();
 
-  useEffect(() => {
-    const img = new Image();
-    img.onload = () => setImageLoaded(true);
-    img.src = imagePath;
-    console.log("Attempting to load image:", imagePath);
-  }, [imagePath]);
-
-  useEffect(() => {
-    setTimeout(() => {
-      inputRef.current?.focus();
-    }, 100);
-  }, []);
-
-  useEffect(() => {
-    if (!isAiThinking && sentence.length > 0 && sentence.length % 2 === 0) {
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 100);
-    }
-  }, [isAiThinking, sentence.length]);
-
-  useEffect(() => {
-    // Check if input contains multiple words
-    setHasMultipleWords(playerInput.trim().split(/\s+/).length > 1);
-  }, [playerInput]);
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.shiftKey && e.key === 'Enter') {
-      e.preventDefault();
-      // Only trigger if buttons are not disabled and either we have a sentence or valid input
-      if (!hasMultipleWords && !isAiThinking && (sentence.length > 0 || playerInput.trim())) {
-        onMakeGuess();
-      }
-    }
+  // Input validation
+  const validateInput = (input: string) => {
+    setHasMultipleWords(input.trim().split(/\s+/).length > 1);
+    setContainsTargetWord(
+      input.toLowerCase().includes(currentWord.toLowerCase())
+    );
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    const input = playerInput.trim().toLowerCase();
-    const target = currentWord.toLowerCase();
-
-    if (hasMultipleWords) {
-      toast({
-        title: t.game.invalidWord,
-        description: t.game.singleWordOnly,
-        variant: "destructive",
-      });
-      return;
-    }
-
-    if (!/^[\p{L}]+$/u.test(input)) {
-      toast({
-        title: t.game.invalidWord,
-        description: t.game.lettersOnly,
-        variant: "destructive",
-      });
-      return;
-    }
-
-    if (input.includes(target)) {
-      toast({
-        title: t.game.invalidWord,
-        description: `${t.game.cantUseTargetWord} "${currentWord}"`,
-        variant: "destructive",
-      });
-      return;
-    }
-
-    onSubmitWord(e);
+  const handleInputChange = (value: string) => {
+    validateInput(value);
+    onInputChange(value);
   };
 
-  const handleHomeClick = () => {
-    if (successfulRounds > 0) {
-      setShowConfirmDialog(true);
-    } else {
-      onBack?.();
-    }
-  };
+  const isValidInput = !playerInput || /^[\p{L} ]+$/u.test(playerInput);
 
   return (
     <motion.div
@@ -132,88 +65,27 @@ export const SentenceBuilder = ({
       animate={{ opacity: 1 }}
       className="text-center relative"
     >
-      <div className="absolute right-0 top-0 bg-primary/10 px-3 py-1 rounded-lg">
-        <span className="text-sm font-medium text-primary">
-          {t.game.round} {successfulRounds + 1}
-        </span>
-      </div>
-
-      <Button
-        variant="ghost"
-        size="icon"
-        className="absolute left-0 top-0 text-gray-600 hover:text-primary"
-        onClick={handleHomeClick}
-      >
-        <House className="h-5 w-5" />
-      </Button>
-
-      <h2 className="mb-4 text-2xl font-semibold text-gray-900">
-        Think in Sync
-      </h2>
-      <div>
-        <p className="mb-1 text-sm text-gray-600">
-          {t.game.describeWord}
-        </p>
-        <div className="mb-6 overflow-hidden rounded-lg bg-secondary/10">
-          {imageLoaded && (
-            <img
-              src={imagePath}
-              alt={currentWord}
-              className="mx-auto h-48 w-full object-cover"
-            />
-          )}
-          <p className="p-4 text-2xl font-bold tracking-wider text-secondary">
-            {currentWord}
-          </p>
-        </div>
-      </div>
-      <form onSubmit={handleSubmit} className="mb-4">
-        {sentence.length > 0 && (
-          <motion.div 
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="mb-4 text-left p-3 rounded-lg bg-gray-50"
-          >
-            <p className="text-gray-700">
-              {sentence.join(" ")}
-            </p>
-          </motion.div>
-        )}
-        <div className="relative mb-4">
-          <Input
-            ref={inputRef}
-            type="text"
-            value={playerInput}
-            onChange={(e) => onInputChange(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={t.game.inputPlaceholder}
-            className={`w-full ${hasMultipleWords ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
-            disabled={isAiThinking}
-          />
-          {hasMultipleWords && (
-            <p className="text-sm text-red-500 mt-1">
-              {t.game.singleWordOnly}
-            </p>
-          )}
-        </div>
-        <div className="flex gap-4">
-          <Button
-            type="submit"
-            className="flex-1 bg-primary text-lg hover:bg-primary/90"
-            disabled={!playerInput.trim() || isAiThinking || hasMultipleWords}
-          >
-            {isAiThinking ? t.game.aiThinking : `${t.game.addWord}  ⏎`}
-          </Button>
-          <Button
-            type="button"
-            onClick={onMakeGuess}
-            className="flex-1 bg-secondary text-lg hover:bg-secondary/90"
-            disabled={(!sentence.length && !playerInput.trim()) || isAiThinking || hasMultipleWords}
-          >
-            {isAiThinking ? t.game.aiThinking : `${t.game.makeGuess} ⇧⏎`}
-          </Button>
-        </div>
-      </form>
+      <RoundHeader
+        successfulRounds={successfulRounds}
+        onBack={onBack}
+        showConfirmDialog={showConfirmDialog}
+        setShowConfirmDialog={setShowConfirmDialog}
+      />
+
+      <WordDisplay currentWord={currentWord} />
+
+      <SentenceDisplay sentence={sentence} />
+
+      <InputForm
+        playerInput={playerInput}
+        onInputChange={handleInputChange}
+        onSubmitWord={onSubmitWord}
+        onMakeGuess={onMakeGuess}
+        isAiThinking={isAiThinking}
+        hasMultipleWords={hasMultipleWords}
+        containsTargetWord={containsTargetWord}
+        isValidInput={isValidInput}
+      />
 
       <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
         <AlertDialogContent>
@@ -233,4 +105,4 @@ export const SentenceBuilder = ({
       </AlertDialog>
     </motion.div>
   );
-};
+};

src/components/game/sentence-builder/InputForm.tsx

@@ -0,0 +1,92 @@
+import { KeyboardEvent, useRef, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useTranslation } from "@/hooks/useTranslation";
+
+interface InputFormProps {
+  playerInput: string;
+  onInputChange: (value: string) => void;
+  onSubmitWord: (e: React.FormEvent) => void;
+  onMakeGuess: () => void;
+  isAiThinking: boolean;
+  hasMultipleWords: boolean;
+  containsTargetWord: boolean;
+  isValidInput: boolean;
+}
+
+export const InputForm = ({
+  playerInput,
+  onInputChange,
+  onSubmitWord,
+  onMakeGuess,
+  isAiThinking,
+  hasMultipleWords,
+  containsTargetWord,
+  isValidInput
+}: InputFormProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const t = useTranslation();
+
+  useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 100);
+  }, []);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.shiftKey && e.key === 'Enter') {
+      e.preventDefault();
+      if (!hasMultipleWords && !containsTargetWord && !isAiThinking && isValidInput) {
+        onMakeGuess();
+      }
+    }
+  };
+
+  const getInputError = () => {
+    if (hasMultipleWords) return t.game.singleWordOnly;
+    if (containsTargetWord) return t.game.cantUseTargetWord;
+    if (!isValidInput && playerInput) return t.game.lettersOnly;
+    return null;
+  };
+
+  const error = getInputError();
+
+  return (
+    <form onSubmit={onSubmitWord} className="mb-4">
+      <div className="relative mb-4">
+        <Input
+          ref={inputRef}
+          type="text"
+          value={playerInput}
+          onChange={(e) => onInputChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={t.game.inputPlaceholder}
+          className={`w-full ${error ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
+          disabled={isAiThinking}
+        />
+        {error && (
+          <p className="text-sm text-red-500 mt-1">
+            {error}
+          </p>
+        )}
+      </div>
+      <div className="flex gap-4">
+        <Button
+          type="submit"
+          className="flex-1 bg-primary text-lg hover:bg-primary/90"
+          disabled={!playerInput.trim() || isAiThinking || hasMultipleWords || containsTargetWord || !isValidInput}
+        >
+          {isAiThinking ? t.game.aiThinking : `${t.game.addWord}  ⏎`}
+        </Button>
+        <Button
+          type="button"
+          onClick={onMakeGuess}
+          className="flex-1 bg-secondary text-lg hover:bg-secondary/90"
+          disabled={(!playerInput.trim() && !playerInput.trim()) || isAiThinking || hasMultipleWords || containsTargetWord || !isValidInput}
+        >
+          {isAiThinking ? t.game.aiThinking : `${t.game.makeGuess} ⇧⏎`}
+        </Button>
+      </div>
+    </form>
+  );
+};

src/components/game/sentence-builder/RoundHeader.tsx

@@ -0,0 +1,50 @@
+import { House } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTranslation } from "@/hooks/useTranslation";
+
+interface RoundHeaderProps {
+  successfulRounds: number;
+  onBack?: () => void;
+  showConfirmDialog: boolean;
+  setShowConfirmDialog: (show: boolean) => void;
+}
+
+export const RoundHeader = ({ 
+  successfulRounds, 
+  onBack,
+  showConfirmDialog,
+  setShowConfirmDialog
+}: RoundHeaderProps) => {
+  const t = useTranslation();
+
+  const handleHomeClick = () => {
+    if (successfulRounds > 0) {
+      setShowConfirmDialog(true);
+    } else {
+      onBack?.();
+    }
+  };
+
+  return (
+    <div className="relative">
+      <div className="absolute right-0 top-0 bg-primary/10 px-3 py-1 rounded-lg">
+        <span className="text-sm font-medium text-primary">
+          {t.game.round} {successfulRounds + 1}
+        </span>
+      </div>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="absolute left-0 top-0 text-gray-600 hover:text-primary"
+        onClick={handleHomeClick}
+      >
+        <House className="h-5 w-5" />
+      </Button>
+
+      <h2 className="mb-4 text-2xl font-semibold text-gray-900">
+        Think in Sync
+      </h2>
+    </div>
+  );
+};

src/components/game/sentence-builder/SentenceDisplay.tsx

@@ -0,0 +1,21 @@
+import { motion } from "framer-motion";
+
+interface SentenceDisplayProps {
+  sentence: string[];
+}
+
+export const SentenceDisplay = ({ sentence }: SentenceDisplayProps) => {
+  if (!sentence.length) return null;
+
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="mb-4 text-left p-3 rounded-lg bg-gray-50"
+    >
+      <p className="text-gray-700">
+        {sentence.join(" ")}
+      </p>
+    </motion.div>
+  );
+};

src/components/game/sentence-builder/WordDisplay.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "@/hooks/useTranslation";
+
+interface WordDisplayProps {
+  currentWord: string;
+}
+
+export const WordDisplay = ({ currentWord }: WordDisplayProps) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const imagePath = `/think_in_sync_assets/${currentWord.toLowerCase()}.jpg`;
+  const t = useTranslation();
+
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => setImageLoaded(true);
+    img.src = imagePath;
+    console.log("Attempting to load image:", imagePath);
+  }, [imagePath]);
+
+  return (
+    <div>
+      <p className="mb-1 text-sm text-gray-600">
+        {t.game.describeWord}
+      </p>
+      <div className="mb-6 overflow-hidden rounded-lg bg-secondary/10">
+        {imageLoaded && (
+          <img
+            src={imagePath}
+            alt={currentWord}
+            className="mx-auto h-48 w-full object-cover"
+          />
+        )}
+        <p className="p-4 text-2xl font-bold tracking-wider text-secondary">
+          {currentWord}
+        </p>
+      </div>
+    </div>
+  );
+};

src/i18n/translations/de.ts

@@ -10,7 +10,7 @@ export const de = {
       aiThinking: "KI denkt nach...",
       aiDelayed: "Die KI ist derzeit beschäftigt. Bitte versuche es gleich noch einmal.",
       invalidWord: "Ungültiges Wort",
-      cantUseTargetWord: "Du kannst das Zielwort nicht verwenden",
+      cantUseTargetWord: "Verwende nicht das geheime Wort",
       lettersOnly: "Bitte nur Buchstaben verwenden",
       singleWordOnly: "Bitte nur ein Wort eingeben",
       leaveGameTitle: "Spiel verlassen?",

src/i18n/translations/en.ts

@@ -10,7 +10,7 @@ export const en = {
       aiThinking: "AI is thinking...",
       aiDelayed: "The AI is currently busy. Please try again in a moment.",
       invalidWord: "Invalid Word",
-      cantUseTargetWord: "You can't use the target word",
+      cantUseTargetWord: "Do not use the secret word",
       lettersOnly: "Please use letters only",
       singleWordOnly: "Please enter only one word",
       leaveGameTitle: "Leave Game?",

src/i18n/translations/es.ts

@@ -10,7 +10,7 @@ export const es = {
       aiThinking: "La IA está pensando...",
       aiDelayed: "La IA está ocupada en este momento. Por favor, inténtalo de nuevo en un momento.",
       invalidWord: "Palabra inválida",
-      cantUseTargetWord: "No puedes usar la palabra objetivo",
+      cantUseTargetWord: "No uses la palabra secreta",
       lettersOnly: "Por favor, usa solo letras",
       singleWordOnly: "Por favor, ingresa solo una palabra",
       leaveGameTitle: "¿Salir del juego?",

src/i18n/translations/fr.ts

@@ -9,7 +9,7 @@ export const fr = {
       aiThinking: "L'IA réfléchit...",
       aiDelayed: "L'IA est actuellement occupée. Veuillez réessayer dans un moment.",
       invalidWord: "Mot invalide",
-      cantUseTargetWord: "Vous ne pouvez pas utiliser le mot cible",
+      cantUseTargetWord: "N'utilisez pas le mot secret",
       lettersOnly: "Veuillez utiliser uniquement des lettres",
       singleWordOnly: "Veuillez entrer un seul mot",
       leaveGameTitle: "Quitter le jeu ?",

src/i18n/translations/it.ts

@@ -10,7 +10,7 @@ export const it = {
       aiThinking: "L'IA sta pensando...",
       aiDelayed: "L'IA è attualmente occupata. Riprova tra un momento.",
       invalidWord: "Parola non valida",
-      cantUseTargetWord: "Non puoi usare la parola obiettivo",
+      cantUseTargetWord: "Non usare la parola segreta",
       lettersOnly: "Usa solo lettere",
       singleWordOnly: "Inserisci una sola parola",
       leaveGameTitle: "Lasciare il gioco?",