Initial commit

src/components/game/ValidationFeedback.tsx

@@ -0,0 +1,51 @@
+import { useGameStore } from '@/stores/game-store';
+import { Loader2, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export default function ValidationFeedback() {
+  const isValidating = useGameStore((s) => s.isValidating);
+  const validationError = useGameStore((s) => s.validationError);
+  const chain = useGameStore((s) => s.chain);
+  const [showCheck, setShowCheck] = useState(false);
+
+  // Flash a green check when chain grows (successful validation)
+  useEffect(() => {
+    if (chain.length > 1) {
+      setShowCheck(true);
+      const timer = setTimeout(() => setShowCheck(false), 600);
+      return () => clearTimeout(timer);
+    }
+  }, [chain.length]);
+
+  if (isValidating) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        Validating connection...
+      </div>
+    );
+  }
+
+  if (validationError) {
+    return (
+      <div
+        key={validationError}
+        className="flex animate-shake items-center gap-2 text-sm text-destructive"
+      >
+        <AlertCircle className="h-4 w-4" />
+        {validationError}
+      </div>
+    );
+  }
+
+  if (showCheck) {
+    return (
+      <div className="flex animate-check-flash items-center gap-2 text-sm text-green-600">
+        <CheckCircle2 className="h-4 w-4" />
+        Connected!
+      </div>
+    );
+  }
+
+  return null;
+}