Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add success state to playground

Browse source 
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.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-11 10:04:46 +00:00
parent 8f5eeb77a9
commit 1bb24d2620
1 changed files with 21 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/RulesOfInferencePlayground.tsx
View file

@ -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>
@ -295,6 +301,7 @@ export default function RulesOfInferencePlayground() {
key={`${s.result}-${idx}`}
label={s.result}
onDragStart={(e) => onDragStart(e, "statement", s.result)}
disabled={reachedTarget}
/>
))}
</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>
))}