feat: target preview changed

SauceCode01 · SauceCode01 · commit 84e169140625 · 2025-12-07T14:52:07.000+08:00
diff --git a/src/app/components/CssRush/CssRush.tsx b/src/app/components/CssRush/CssRush.tsx
@@ -41,6 +41,7 @@ export function CssRush({ gameDurationSeconds = 180 }: GameConfigProps) {
   });
   const [isClient, setIsClient] = useState(false);
   const [showSuccessFlash, setShowSuccessFlash] = useState(false);
+  const [showTargetFlash, setShowTargetFlash] = useState(true);
 
   // Hooks
   const [holdingBlockId, setHoldingBlockId] = useState<string | null>(null);
@@ -112,10 +113,21 @@ export function CssRush({ gameDurationSeconds = 180 }: GameConfigProps) {
         const shuffled = shuffleArray(newTarget.blocks);
         setCode(createCodeBlocks(shuffled));
         setShowSuccessFlash(false);
+        setShowTargetFlash(true);
       }, 500);
     }
   }, [code, currentTarget]);
 
+  // Flash target at start of each round
+  useEffect(() => {
+    if (showTargetFlash) {
+      const timer = setTimeout(() => {
+        setShowTargetFlash(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [showTargetFlash]);
+
   // Handlers
   const handleDragEnd = (event: any) => {
     setHoldingBlockId(null);
@@ -190,7 +202,7 @@ export function CssRush({ gameDurationSeconds = 180 }: GameConfigProps) {
           </div>
 
           {/* Right Column */}
-          <PreviewPane code={code} targetHtml={generateTargetHtml(currentTarget.blocks)} />
+          <PreviewPane code={code} targetHtml={generateTargetHtml(currentTarget.blocks)} showTargetFlash={showTargetFlash} />
         </div>
       </div>
 
diff --git a/src/app/components/CssRush/components/PreviewPane.tsx b/src/app/components/CssRush/components/PreviewPane.tsx
@@ -4,37 +4,41 @@ import { CodeBlock } from '../types';
 interface PreviewPaneProps {
   code: CodeBlock[];
   targetHtml: string;
+  showTargetFlash?: boolean;
 }
 
 /**
  * Preview pane showing user code and target design
  */
-export function PreviewPane({ code, targetHtml }: PreviewPaneProps) {
+export function PreviewPane({ code, targetHtml, showTargetFlash }: PreviewPaneProps) {
   const [showTarget, setShowTarget] = useState(false);
+  const displayTarget = showTarget || showTargetFlash;
 
   const userCode = code.map((c) => c.content).join('');
   const userHtml =
     code.length === 0
-      ? '<html><body style="margin:0;padding:0;"></body></html>'
-      : `<html><body style="margin:0;padding:0;">${userCode}</body></html>`;
+      ? '<html><body style="margin:0;padding:1rem;"></body></html>'
+      : `<html><body style="margin:0;padding:1rem;">${userCode}</body></html>`;
 
   return (
-    <div className="flex flex-col bg-slate-900/40 backdrop-blur rounded-lg p-6 border border-slate-800">
-      <h3 className="text-sm font-semibold text-slate-300 mb-3 uppercase tracking-wide">
-        {showTarget ? '🎯 Target Design' : '👁 Your Rendered Code'}
+    <div className={`flex flex-col backdrop-blur rounded-lg p-6 border h-full transition-colors ${
+      displayTarget ? 'bg-yellow-400/20 border-yellow-400/30' : 'bg-slate-900/40 border-slate-800'
+    }`}>
+      <h3 className="text-sm font-semibold text-slate-300 mb-4 uppercase tracking-wide">
+        {displayTarget ? 'Target Design' : 'Your Output'}
       </h3>
 
       <div
         onMouseEnter={() => setShowTarget(true)}
         onMouseLeave={() => setShowTarget(false)}
-        className="flex-1 relative rounded-lg overflow-hidden border border-slate-700 bg-white"
+        className="flex-1 relative rounded-lg overflow-hidden border border-slate-700 bg-white p-4"
       >
         <iframe
           key="user"
           title="User Output"
           srcDoc={userHtml}
           className={`absolute inset-0 w-full h-full transition-opacity ${
-            showTarget ? 'opacity-0 pointer-events-none' : 'opacity-100'
+            displayTarget ? 'opacity-0 pointer-events-none' : 'opacity-100'
           }`}
         />
 
@@ -43,7 +47,7 @@ export function PreviewPane({ code, targetHtml }: PreviewPaneProps) {
           title="Target Output"
           srcDoc={targetHtml}
           className={`absolute inset-0 w-full h-full transition-opacity ${
-            showTarget ? 'opacity-100' : 'opacity-0 pointer-events-none'
+            displayTarget ? 'opacity-100' : 'opacity-0 pointer-events-none'
           }`}
         />
       </div>
diff --git a/src/app/components/targets.ts b/src/app/components/targets.ts
@@ -8,7 +8,7 @@ export interface Target {
  */
 export function generateTargetHtml(blocks: string[]): string {
   const code = blocks.join('');
-  return `<html><body style="margin:0;padding:0;">${code}</body></html>`;
+  return `<html><body style="margin:0;padding:1rem;">${code}</body></html>`;
 }
 
 export const targets: Target[] = [

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ export interface Target {`
`8`	`8`	`*/`
`9`	`9`	`export function generateTargetHtml(blocks: string[]): string {`
`10`	`10`	`const code = blocks.join('');`
`11`		- return `<html><body style="margin:0;padding:0;">${code}</body></html>`;
	`11`	+ return `<html><body style="margin:0;padding:1rem;">${code}</body></html>`;
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`export const targets: Target[] = [`