Add Word Wrangler demos

examples/word-wrangler-gemini-live/client/src/hooks/useVisualFeedback.ts

@@ -0,0 +1,62 @@
+import { useState, useRef, useCallback } from 'react';
+import { clearTimer } from '@/utils/timerUtils';
+import { GAME_CONFIG } from '@/constants/gameConstants';
+
+export function useVisualFeedback() {
+  // Visual feedback state
+  const [showAutoDetected, setShowAutoDetected] = useState(false);
+  const [showIncorrect, setShowIncorrect] = useState(false);
+  const autoDetectTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Reset all visual states
+  const resetVisuals = useCallback(() => {
+    setShowAutoDetected(false);
+    setShowIncorrect(false);
+    autoDetectTimerRef.current = clearTimer(autoDetectTimerRef.current);
+  }, []);
+
+  // Show correct animation
+  const showCorrect = useCallback((onComplete?: () => void) => {
+    // Clear any existing animation
+    autoDetectTimerRef.current = clearTimer(autoDetectTimerRef.current);
+
+    // Show correct animation
+    setShowAutoDetected(true);
+    setShowIncorrect(false);
+
+    // Set timeout to hide animation
+    autoDetectTimerRef.current = setTimeout(() => {
+      setShowAutoDetected(false);
+      if (onComplete) onComplete();
+    }, GAME_CONFIG.ANIMATION_DURATION);
+  }, []);
+
+  // Show incorrect animation
+  const showIncorrectAnimation = useCallback(() => {
+    // Clear any existing animation
+    autoDetectTimerRef.current = clearTimer(autoDetectTimerRef.current);
+
+    // Show incorrect animation
+    setShowIncorrect(true);
+    setShowAutoDetected(false);
+
+    // Set timeout to hide animation
+    autoDetectTimerRef.current = setTimeout(() => {
+      setShowIncorrect(false);
+    }, GAME_CONFIG.ANIMATION_DURATION);
+  }, []);
+
+  // Clean up function
+  const cleanup = useCallback(() => {
+    autoDetectTimerRef.current = clearTimer(autoDetectTimerRef.current);
+  }, []);
+
+  return {
+    showAutoDetected,
+    showIncorrect,
+    resetVisuals,
+    showCorrect,
+    showIncorrectAnimation,
+    cleanup,
+  };
+}