input validations

src/components/HighScoreBoard.tsx

@@ -78,10 +78,11 @@ export const HighScoreBoard = ({
   });
 
   const handleSubmitScore = async () => {
-    if (!playerName.trim()) {
+    // Validate player name (only alphanumeric characters allowed)
+    if (!playerName.trim() || !/^[a-zA-Z0-9]+$/.test(playerName.trim())) {
       toast({
         title: "Error",
-        description: "Please enter your name",
+        description: "Please enter a valid name (only letters and numbers allowed)",
         variant: "destructive",
       });
       return;
@@ -221,11 +222,16 @@ export const HighScoreBoard = ({
       {!hasSubmitted && currentScore > 0 && (
         <div className="flex gap-4 mb-6">
           <Input
-            placeholder="Enter your name"
+            placeholder="Enter your name (letters and numbers only)"
             value={playerName}
-            onChange={(e) => setPlayerName(e.target.value)}
+            onChange={(e) => {
+              // Only allow alphanumeric input
+              const value = e.target.value.replace(/[^a-zA-Z0-9]/g, '');
+              setPlayerName(value);
+            }}
             onKeyDown={handleKeyDown}
             className="flex-1"
+            maxLength={20}
           />
           <Button
             onClick={handleSubmitScore}

src/components/game/SentenceBuilder.tsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { motion } from "framer-motion";
 import { KeyboardEvent, useRef, useEffect, useState } from "react";
+import { useToast } from "@/hooks/use-toast";
 
 interface SentenceBuilderProps {
   currentWord: string;
@@ -27,6 +28,7 @@ export const SentenceBuilder = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const [imageLoaded, setImageLoaded] = useState(false);
   const imagePath = `/think_in_sync_assets/${currentWord.toLowerCase()}.jpg`;
+  const { toast } = useToast();
 
   useEffect(() => {
     const img = new Image();
@@ -55,17 +57,40 @@ export const SentenceBuilder = ({
     if (e.shiftKey && e.key === 'Enter') {
       e.preventDefault();
       if (playerInput.trim()) {
-        // Create a synthetic form event to add the current word
-        const syntheticEvent = {
-          preventDefault: () => {},
-        } as React.FormEvent;
-        onSubmitWord(syntheticEvent);
+        handleSubmit(e as any);
       }
       // Make the guess immediately without waiting for AI response
       onMakeGuess();
     }
   };
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const input = playerInput.trim().toLowerCase();
+    const target = currentWord.toLowerCase();
+
+    // Check if the input contains only letters
+    if (!/^[a-zA-Z]+$/.test(input)) {
+      toast({
+        title: "Invalid Word",
+        description: "Please use only letters (no numbers or special characters)",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (input.includes(target)) {
+      toast({
+        title: "Invalid Word",
+        description: `You cannot use words that contain "${currentWord}"`,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    onSubmitWord(e);
+  };
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
@@ -95,14 +120,18 @@ export const SentenceBuilder = ({
           {sentence.length > 0 ? sentence.join(" ") : "Start your sentence..."}
         </p>
       </div>
-      <form onSubmit={onSubmitWord} className="mb-4">
+      <form onSubmit={handleSubmit} className="mb-4">
         <Input
           ref={inputRef}
           type="text"
           value={playerInput}
-          onChange={(e) => onInputChange(e.target.value.replace(/\s/g, ''))}
+          onChange={(e) => {
+            // Only allow letters in the input
+            const value = e.target.value.replace(/[^a-zA-Z]/g, '');
+            onInputChange(value);
+          }}
           onKeyDown={handleKeyDown}
-          placeholder="Enter your word..."
+          placeholder="Enter your word (letters only)..."
           className="mb-4"
           disabled={isAiThinking}
         />

src/components/game/WordDisplay.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 interface WordDisplayProps {
   currentWord: string;
@@ -11,13 +12,16 @@ interface WordDisplayProps {
 export const WordDisplay = ({ currentWord, successfulRounds, onContinue }: WordDisplayProps) => {
   const [imageLoaded, setImageLoaded] = useState(false);
   const imagePath = `/think_in_sync_assets/${currentWord.toLowerCase()}.jpg`;
+  const isMobile = useIsMobile();
 
   useEffect(() => {
-    const img = new Image();
-    img.onload = () => setImageLoaded(true);
-    img.src = imagePath;
-    console.log("Attempting to load image:", imagePath);
-  }, [imagePath]);
+    if (!isMobile) {
+      const img = new Image();
+      img.onload = () => setImageLoaded(true);
+      img.src = imagePath;
+      console.log("Attempting to load image:", imagePath);
+    }
+  }, [imagePath, isMobile]);
 
   return (
     <motion.div
@@ -27,7 +31,7 @@ export const WordDisplay = ({ currentWord, successfulRounds, onContinue }: WordD
     >
       <h2 className="mb-4 text-2xl font-semibold text-gray-900">Your Word</h2>
       <div className="mb-4 overflow-hidden rounded-lg bg-secondary/10">
-        {imageLoaded && (
+        {!isMobile && imageLoaded && (
           <img
             src={imagePath}
             alt={currentWord}