feat: codespace bg green flash on success

Author: SauceCode01

src/app/components/CssRush/CssRush.tsx

@@ -40,6 +40,7 @@ export function CssRush({ gameDurationSeconds = 180 }: GameConfigProps) {
     return createCodeBlocks(shuffled);
   });
   const [isClient, setIsClient] = useState(false);
+  const [showSuccessFlash, setShowSuccessFlash] = useState(false);
 
   // Hooks
   const [holdingBlockId, setHoldingBlockId] = useState<string | null>(null);
@@ -102,10 +103,16 @@ export function CssRush({ gameDurationSeconds = 180 }: GameConfigProps) {
 
     if (userCode === targetCode) {
       setGameState((prev) => ({ ...prev, score: prev.score + 1 }));
-      const newTarget = getRandomTarget();
-      setCurrentTarget(newTarget);
-      const shuffled = shuffleArray(newTarget.blocks);
-      setCode(createCodeBlocks(shuffled));
+      setShowSuccessFlash(true);
+      
+      // Wait 0.5 second before loading next target
+      setTimeout(() => {
+        const newTarget = getRandomTarget();
+        setCurrentTarget(newTarget);
+        const shuffled = shuffleArray(newTarget.blocks);
+        setCode(createCodeBlocks(shuffled));
+        setShowSuccessFlash(false);
+      }, 500);
     }
   }, [code, currentTarget]);
 
@@ -177,6 +184,7 @@ export function CssRush({ gameDurationSeconds = 180 }: GameConfigProps) {
                 code={code}
                 setDroppableRef={setDroppableRef}
                 activeId={holdingBlockId}
+                showSuccessFlash={showSuccessFlash}
               />
             </Droppable>
           </div>

src/app/components/CssRush/components/CodeSpace.tsx

@@ -8,20 +8,25 @@ interface CodeSpaceProps {
   code: CodeBlock[];
   setDroppableRef: (ref: HTMLDivElement | null) => void;
   activeId: string | null;
+  showSuccessFlash?: boolean;
 }
 
 /**
  * Code space where blocks are dropped and arranged
  */
-export function CodeSpace({ code, setDroppableRef, activeId }: CodeSpaceProps) {
+export function CodeSpace({ code, setDroppableRef, activeId, showSuccessFlash }: CodeSpaceProps) {
   return (
     <div className="flex-1 flex flex-col">
       <h3 className="text-sm font-semibold text-slate-300 mb-2 uppercase tracking-wide">
         Code Space
       </h3>
       <div
         ref={setDroppableRef}
-        className="flex-1 p-4 bg-slate-900/30 rounded-lg border border-slate-700 hover:border-slate-600 transition-colors overflow-y-auto overflow-x-hidden max-h-[calc(100vh-250px)]"
+        className={`flex-1 p-4 rounded-lg border overflow-y-auto overflow-x-hidden max-h-[calc(100vh-250px)] transition-colors duration-500 ${
+          showSuccessFlash
+            ? 'bg-green-500/40 border-green-400'
+            : 'bg-slate-900/30 border-slate-700 hover:border-slate-600'
+        }`}
       >
         <SortableContext items={code.map(c => c.id)}>
           {code.length === 0 ? (