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

Update page background and add sharing

Browse source 
Change the entire page background to a subtle green upon successful completion of the rules of inference puzzle. Add share links and a unique URL for direct access to the interactive.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-11 10:10:04 +00:00
parent 1bb24d2620
commit b6a3ad2c59
4 changed files with 59 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/RulesOfInferencePlayground.tsx
View file

@ -122,7 +122,7 @@ function DropZone({ children, onDrop, className }: { children?: React.ReactNode;
);
}
export default function RulesOfInferencePlayground() {
export default function RulesOfInferencePlayground({ onComplete }: { onComplete?: (completed: boolean) => void }) {
const { toast } = useToast();
const [exampleId, setExampleId] = useState(EXAMPLES[0].id);
const example = useMemo(() => EXAMPLES.find((e) => e.id === exampleId)!, [exampleId]);
@ -139,7 +139,8 @@ export default function RulesOfInferencePlayground() {
setSteps([]);
setActivePremises([]);
setActiveRule(undefined);
}, [exampleId]);
onComplete?.(false);
}, [exampleId, onComplete]);
const availableStatements = useMemo(
() => Array.from(new Set([...(example?.premises ?? []), ...steps.map((s) => s.result)])),
@ -220,6 +221,7 @@ export default function RulesOfInferencePlayground() {
if (result === example.conclusion) {
toast({ title: "Proof complete!", description: "You successfully derived the target conclusion!" });
onComplete?.(true);
} else {
toast({ title: "Step added", description: "Continue building your proof with the new statement." });
}
@ -254,7 +256,7 @@ export default function RulesOfInferencePlayground() {
setActivePremises((prev) => prev.filter((x) => x !== p));
return (
<div className={`min-h-[70vh] space-y-4 transition-colors duration-500 ${reachedTarget ? 'bg-green-50/50 dark:bg-green-950/20' : ''}`}>
<div className={`min-h-[70vh] space-y-4 transition-colors duration-500 ${reachedTarget && !onComplete ? 'bg-green-50/50 dark:bg-green-950/20' : ''}`}>
{/* Top controls */}
<div className="flex items-center gap-3">
<Select value={exampleId} onValueChange={setExampleId}>