From 1bb24d2620c7ca794b98df21a4638a9512520f00 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 11 Aug 2025 10:04:46 +0000
Subject: [PATCH] Add success state to playground

Update the Rules of Inference Playground to display a light green background and freeze interactions upon successful completion of a proof. This state allows users to select a new puzzle.
---
 src/components/RulesOfInferencePlayground.tsx | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/RulesOfInferencePlayground.tsx b/src/components/RulesOfInferencePlayground.tsx
index e378764..6df2e2f 100644
--- a/src/components/RulesOfInferencePlayground.tsx
+++ b/src/components/RulesOfInferencePlayground.tsx
@@ -88,13 +88,17 @@ function parseDragData(e: React.DragEvent): { type: DragType; value: string } |
   }
 }
 
-function DraggableChip({ label, onDragStart: handle }: { label: string; onDragStart: (e: React.DragEvent) => void }) {
+function DraggableChip({ label, onDragStart: handle, disabled = false }: { label: string; onDragStart: (e: React.DragEvent) => void; disabled?: boolean }) {
   return (
     <div
       role="button"
-      draggable
-      onDragStart={handle}
-      className="select-none cursor-grab active:cursor-grabbing rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+      draggable={!disabled}
+      onDragStart={disabled ? undefined : handle}
+      className={`select-none rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground shadow-sm transition-colors ${
+        disabled 
+          ? 'opacity-50 cursor-not-allowed' 
+          : 'cursor-grab active:cursor-grabbing hover:bg-accent hover:text-accent-foreground'
+      }`}
       aria-label={label}
       title={label}
     >
@@ -222,6 +226,7 @@ export default function RulesOfInferencePlayground() {
   }
 
   function handlePremiseDrop(e: React.DragEvent) {
+    if (reachedTarget) return; // Freeze interactions when solved
     const data = parseDragData(e);
     if (!data) return;
     if (data.type === "premise" || data.type === "statement") {
@@ -233,6 +238,7 @@ export default function RulesOfInferencePlayground() {
   }
 
   function handleRuleDrop(e: React.DragEvent) {
+    if (reachedTarget) return; // Freeze interactions when solved
     const data = parseDragData(e);
     if (!data) return;
     if (data.type === "rule") setActiveRule(data.value);
@@ -248,7 +254,7 @@ export default function RulesOfInferencePlayground() {
     setActivePremises((prev) => prev.filter((x) => x !== p));
 
   return (
-    <div className="min-h-[70vh] space-y-4">
+    <div className={`min-h-[70vh] space-y-4 transition-colors duration-500 ${reachedTarget ? 'bg-green-50/50 dark:bg-green-950/20' : ''}`}>
       {/* Top controls */}
       <div className="flex items-center gap-3">
         <Select value={exampleId} onValueChange={setExampleId}>
@@ -282,7 +288,7 @@ export default function RulesOfInferencePlayground() {
               <p className="text-xs text-muted-foreground">Initial premises</p>
               <div className="flex flex-wrap gap-2">
                 {example.premises.map((p) => (
-                  <DraggableChip key={p} label={p} onDragStart={(e) => onDragStart(e, "premise", p)} />
+                  <DraggableChip key={p} label={p} onDragStart={(e) => onDragStart(e, "premise", p)} disabled={reachedTarget} />
                 ))}
               </div>
             </div>
@@ -290,13 +296,14 @@ export default function RulesOfInferencePlayground() {
               <div className="space-y-2">
                 <p className="text-xs text-muted-foreground">Derived so far</p>
                 <div className="flex flex-wrap gap-2">
-                  {steps.map((s, idx) => (
-                    <DraggableChip
-                      key={`${s.result}-${idx}`}
-                      label={s.result}
-                      onDragStart={(e) => onDragStart(e, "statement", s.result)}
-                    />
-                  ))}
+                   {steps.map((s, idx) => (
+                     <DraggableChip
+                       key={`${s.result}-${idx}`}
+                       label={s.result}
+                       onDragStart={(e) => onDragStart(e, "statement", s.result)}
+                       disabled={reachedTarget}
+                     />
+                   ))}
                 </div>
               </div>
             )}
@@ -308,7 +315,7 @@ export default function RulesOfInferencePlayground() {
           <div className="space-y-2">
             {example.rules.map((r) => (
               <div key={r.id} className="space-y-1">
-                <DraggableChip label={r.id} onDragStart={(e) => onDragStart(e, "rule", r.id)} />
+                <DraggableChip label={r.id} onDragStart={(e) => onDragStart(e, "rule", r.id)} disabled={reachedTarget} />
                 {r.help && <p className="text-xs text-muted-foreground pl-1">{r.help}</p>}
               </div>
             ))}