390 lines
13 KiB
TypeScript
390 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useCallback } from "react";
|
||
import { Card } from "@/components/ui/card";
|
||
import { StepControls } from "./step-controls";
|
||
import { gcd, lcm, simplify, toKatex } from "@/lib/math/fractions";
|
||
import { MathDisplay } from "@/components/math/math-display";
|
||
|
||
type Operation = "add" | "subtract" | "multiply" | "divide";
|
||
|
||
interface Step {
|
||
label: string;
|
||
math: string;
|
||
barA: { filled: number; total: number };
|
||
barB: { filled: number; total: number };
|
||
barResult?: { filled: number; total: number };
|
||
}
|
||
|
||
function buildSteps(
|
||
n1: number, d1: number,
|
||
n2: number, d2: number,
|
||
op: Operation,
|
||
): Step[] {
|
||
const steps: Step[] = [];
|
||
|
||
// Step 0: Show the original fractions
|
||
const opSymbol = { add: "+", subtract: "-", multiply: "\\times", divide: "\\div" }[op];
|
||
steps.push({
|
||
label: "Start with the two fractions",
|
||
math: `${toKatex(n1, d1)} ${opSymbol} ${toKatex(n2, d2)}`,
|
||
barA: { filled: n1, total: d1 },
|
||
barB: { filled: n2, total: d2 },
|
||
});
|
||
|
||
if (op === "add" || op === "subtract") {
|
||
// Step 1: Find LCD
|
||
const lcd = lcm(d1, d2);
|
||
const mult1 = lcd / d1;
|
||
const mult2 = lcd / d2;
|
||
const cn1 = n1 * mult1;
|
||
const cn2 = n2 * mult2;
|
||
|
||
if (d1 !== d2) {
|
||
steps.push({
|
||
label: `Find the LCD of ${d1} and ${d2}`,
|
||
math: `\\text{LCD}(${d1}, ${d2}) = ${lcd}`,
|
||
barA: { filled: n1, total: d1 },
|
||
barB: { filled: n2, total: d2 },
|
||
});
|
||
|
||
// Step 2: Convert both fractions
|
||
steps.push({
|
||
label: "Convert to equivalent fractions with the LCD",
|
||
math: `${toKatex(n1, d1)} = ${toKatex(cn1, lcd)} \\quad ${toKatex(n2, d2)} = ${toKatex(cn2, lcd)}`,
|
||
barA: { filled: cn1, total: lcd },
|
||
barB: { filled: cn2, total: lcd },
|
||
});
|
||
}
|
||
|
||
// Step 3: Perform the operation
|
||
const resultNum = op === "add" ? cn1 + cn2 : cn1 - cn2;
|
||
steps.push({
|
||
label: op === "add" ? "Add the numerators" : "Subtract the numerators",
|
||
math: `${toKatex(cn1, lcd)} ${opSymbol} ${toKatex(cn2, lcd)} = ${toKatex(resultNum, lcd)}`,
|
||
barA: { filled: cn1, total: lcd },
|
||
barB: { filled: cn2, total: lcd },
|
||
barResult: { filled: Math.abs(resultNum), total: lcd },
|
||
});
|
||
|
||
// Step 4: Simplify if needed
|
||
const [sn, sd] = simplify(resultNum, lcd);
|
||
if (Math.abs(sn) !== Math.abs(resultNum) || sd !== lcd) {
|
||
const g = gcd(Math.abs(resultNum), lcd);
|
||
steps.push({
|
||
label: `Simplify by dividing by GCD = ${g}`,
|
||
math: `${toKatex(resultNum, lcd)} = ${toKatex(sn, sd)}`,
|
||
barA: { filled: cn1, total: lcd },
|
||
barB: { filled: cn2, total: lcd },
|
||
barResult: { filled: Math.abs(sn), total: sd },
|
||
});
|
||
}
|
||
} else if (op === "multiply") {
|
||
// Step 1: Multiply numerators and denominators
|
||
const rn = n1 * n2;
|
||
const rd = d1 * d2;
|
||
steps.push({
|
||
label: "Multiply numerators and denominators",
|
||
math: `\\frac{${n1} \\times ${n2}}{${d1} \\times ${d2}} = ${toKatex(rn, rd)}`,
|
||
barA: { filled: n1, total: d1 },
|
||
barB: { filled: n2, total: d2 },
|
||
barResult: { filled: rn, total: rd },
|
||
});
|
||
|
||
// Step 2: Simplify
|
||
const [sn, sd] = simplify(rn, rd);
|
||
if (sn !== rn || sd !== rd) {
|
||
const g = gcd(Math.abs(rn), rd);
|
||
steps.push({
|
||
label: `Simplify by dividing by GCD = ${g}`,
|
||
math: `${toKatex(rn, rd)} = ${toKatex(sn, sd)}`,
|
||
barA: { filled: n1, total: d1 },
|
||
barB: { filled: n2, total: d2 },
|
||
barResult: { filled: Math.abs(sn), total: sd },
|
||
});
|
||
}
|
||
} else {
|
||
// divide: invert and multiply
|
||
steps.push({
|
||
label: "Invert the second fraction (reciprocal)",
|
||
math: `${toKatex(n1, d1)} \\times ${toKatex(d2, n2)}`,
|
||
barA: { filled: n1, total: d1 },
|
||
barB: { filled: d2, total: n2 },
|
||
});
|
||
|
||
const rn = n1 * d2;
|
||
const rd = d1 * n2;
|
||
steps.push({
|
||
label: "Multiply numerators and denominators",
|
||
math: `\\frac{${n1} \\times ${d2}}{${d1} \\times ${n2}} = ${toKatex(rn, rd)}`,
|
||
barA: { filled: n1, total: d1 },
|
||
barB: { filled: d2, total: n2 },
|
||
barResult: { filled: rn, total: rd },
|
||
});
|
||
|
||
const [sn, sd] = simplify(rn, rd);
|
||
if (sn !== rn || sd !== rd) {
|
||
const g = gcd(Math.abs(rn), rd);
|
||
steps.push({
|
||
label: `Simplify by dividing by GCD = ${g}`,
|
||
math: `${toKatex(rn, rd)} = ${toKatex(sn, sd)}`,
|
||
barA: { filled: n1, total: d1 },
|
||
barB: { filled: d2, total: n2 },
|
||
barResult: { filled: Math.abs(sn), total: sd },
|
||
});
|
||
}
|
||
}
|
||
|
||
return steps;
|
||
}
|
||
|
||
function FractionBar({
|
||
filled,
|
||
total,
|
||
color,
|
||
label,
|
||
}: {
|
||
filled: number;
|
||
total: number;
|
||
color: string;
|
||
label?: string;
|
||
}) {
|
||
const maxSegments = Math.min(total, 24);
|
||
const fillCount = Math.min(filled, maxSegments);
|
||
|
||
return (
|
||
<div className="flex flex-col items-center gap-1">
|
||
{label && <span className="text-xs font-medium text-muted">{label}</span>}
|
||
<div className="flex h-10 w-full max-w-[280px] overflow-hidden rounded-lg border-2 border-border">
|
||
{Array.from({ length: maxSegments }, (_, i) => (
|
||
<div
|
||
key={i}
|
||
className="border-r border-border/30 transition-colors duration-500 last:border-r-0"
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: i < fillCount ? color : "transparent",
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
<span className="text-xs text-muted">
|
||
{filled}/{total}
|
||
</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function FractionOperationExplorer() {
|
||
const [op, setOp] = useState<Operation>("add");
|
||
const [n1, setN1] = useState("1");
|
||
const [d1, setD1] = useState("3");
|
||
const [n2, setN2] = useState("1");
|
||
const [d2, setD2] = useState("4");
|
||
const [error, setError] = useState("");
|
||
|
||
const [steps, setSteps] = useState<Step[] | null>(null);
|
||
const [currentStep, setCurrentStep] = useState(0);
|
||
const [isPlaying, setIsPlaying] = useState(false);
|
||
|
||
const done = steps ? currentStep >= steps.length - 1 : false;
|
||
|
||
function handleGo() {
|
||
setError("");
|
||
const nums = [parseInt(n1), parseInt(d1), parseInt(n2), parseInt(d2)];
|
||
if (nums.some(isNaN) || nums.some((n) => n === 0)) {
|
||
setError("Enter valid non-zero numbers.");
|
||
return;
|
||
}
|
||
if (nums[1] < 0 || nums[3] < 0) {
|
||
setError("Denominators must be positive.");
|
||
return;
|
||
}
|
||
if (nums.some((n) => Math.abs(n) > 99)) {
|
||
setError("Keep numbers under 100.");
|
||
return;
|
||
}
|
||
try {
|
||
const s = buildSteps(nums[0], nums[1], nums[2], nums[3], op);
|
||
setSteps(s);
|
||
setCurrentStep(0);
|
||
setIsPlaying(false);
|
||
} catch {
|
||
setError("Could not compute. Check your inputs.");
|
||
}
|
||
}
|
||
|
||
const stepForward = useCallback(() => {
|
||
if (!steps || currentStep >= steps.length - 1) return;
|
||
setCurrentStep((s) => s + 1);
|
||
if (currentStep + 1 >= steps.length - 1) setIsPlaying(false);
|
||
}, [steps, currentStep]);
|
||
|
||
const stepBack = useCallback(() => {
|
||
if (currentStep <= 0) return;
|
||
setCurrentStep((s) => s - 1);
|
||
}, [currentStep]);
|
||
|
||
const togglePlay = useCallback(() => setIsPlaying((p) => !p), []);
|
||
|
||
const reset = useCallback(() => {
|
||
setSteps(null);
|
||
setCurrentStep(0);
|
||
setIsPlaying(false);
|
||
}, []);
|
||
|
||
const step = steps ? steps[currentStep] : null;
|
||
|
||
const opLabels: Record<Operation, string> = {
|
||
add: "Add (+)",
|
||
subtract: "Subtract (−)",
|
||
multiply: "Multiply (×)",
|
||
divide: "Divide (÷)",
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Operation tabs */}
|
||
<div className="flex flex-wrap gap-2">
|
||
{(["add", "subtract", "multiply", "divide"] as Operation[]).map((o) => (
|
||
<button
|
||
key={o}
|
||
onClick={() => {
|
||
setOp(o);
|
||
reset();
|
||
}}
|
||
className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
|
||
op === o
|
||
? "border-unit-1 bg-unit-1 text-white"
|
||
: "border-unit-1/40 text-unit-1 hover:bg-unit-1-light"
|
||
}`}
|
||
>
|
||
{opLabels[o]}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Input Card */}
|
||
<Card>
|
||
<p className="mb-3 text-xs font-bold uppercase tracking-wider text-unit-1">
|
||
Enter two fractions
|
||
</p>
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<div className="flex items-center gap-1">
|
||
<div className="flex flex-col items-center">
|
||
<input
|
||
type="number"
|
||
value={n1}
|
||
onChange={(e) => setN1(e.target.value)}
|
||
className="w-14 rounded-lg border-2 border-border bg-surface px-2 py-1.5 text-center text-lg font-bold outline-none focus:border-unit-1"
|
||
aria-label="Numerator 1"
|
||
/>
|
||
<div className="my-0.5 h-0.5 w-12 bg-foreground" />
|
||
<input
|
||
type="number"
|
||
value={d1}
|
||
onChange={(e) => setD1(e.target.value)}
|
||
className="w-14 rounded-lg border-2 border-border bg-surface px-2 py-1.5 text-center text-lg font-bold outline-none focus:border-unit-1"
|
||
aria-label="Denominator 1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<span className="text-xl font-bold text-muted">
|
||
{{ add: "+", subtract: "−", multiply: "×", divide: "÷" }[op]}
|
||
</span>
|
||
<div className="flex items-center gap-1">
|
||
<div className="flex flex-col items-center">
|
||
<input
|
||
type="number"
|
||
value={n2}
|
||
onChange={(e) => setN2(e.target.value)}
|
||
className="w-14 rounded-lg border-2 border-border bg-surface px-2 py-1.5 text-center text-lg font-bold outline-none focus:border-unit-1"
|
||
aria-label="Numerator 2"
|
||
/>
|
||
<div className="my-0.5 h-0.5 w-12 bg-foreground" />
|
||
<input
|
||
type="number"
|
||
value={d2}
|
||
onChange={(e) => setD2(e.target.value)}
|
||
className="w-14 rounded-lg border-2 border-border bg-surface px-2 py-1.5 text-center text-lg font-bold outline-none focus:border-unit-1"
|
||
aria-label="Denominator 2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={handleGo}
|
||
className="rounded-lg bg-unit-1 px-6 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-1-dark"
|
||
>
|
||
Go →
|
||
</button>
|
||
</div>
|
||
{error && <p className="mt-2 text-sm text-incorrect">{error}</p>}
|
||
</Card>
|
||
|
||
{/* Display Card */}
|
||
<Card className="flex min-h-[240px] flex-col items-center justify-center gap-5 p-6">
|
||
{!step ? (
|
||
<p className="text-muted/50">
|
||
Enter fractions above and click <strong>Go</strong>
|
||
</p>
|
||
) : (
|
||
<>
|
||
<p className="text-sm font-medium text-muted">{step.label}</p>
|
||
<MathDisplay math={step.math} className="text-2xl" />
|
||
<div className="flex w-full max-w-md flex-col gap-3">
|
||
<FractionBar
|
||
filled={step.barA.filled}
|
||
total={step.barA.total}
|
||
color="var(--unit-1)"
|
||
label="First"
|
||
/>
|
||
<FractionBar
|
||
filled={step.barB.filled}
|
||
total={step.barB.total}
|
||
color="var(--unit-1-dark)"
|
||
label="Second"
|
||
/>
|
||
{step.barResult && (
|
||
<FractionBar
|
||
filled={step.barResult.filled}
|
||
total={step.barResult.total}
|
||
color="var(--correct)"
|
||
label="Result"
|
||
/>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
</Card>
|
||
|
||
{/* Controls */}
|
||
<Card className="p-4">
|
||
<StepControls
|
||
currentStep={currentStep + 1}
|
||
totalSteps={steps?.length ?? 0}
|
||
isPlaying={isPlaying}
|
||
onStepForward={stepForward}
|
||
onStepBack={stepBack}
|
||
onTogglePlay={togglePlay}
|
||
onReset={reset}
|
||
canStepForward={!!steps && !done}
|
||
canStepBack={!!steps && currentStep > 0}
|
||
/>
|
||
</Card>
|
||
|
||
{/* Result */}
|
||
<Card className="flex min-h-[80px] flex-col items-center justify-center gap-1.5 text-center">
|
||
{!done || !steps ? (
|
||
<p className="text-sm text-muted/40">Result will appear here when steps are complete</p>
|
||
) : (
|
||
<>
|
||
<p className="text-xs uppercase tracking-wider text-muted">Answer</p>
|
||
<div className="text-3xl font-extrabold max-sm:text-2xl">
|
||
<MathDisplay math={steps[steps.length - 1].math} />
|
||
</div>
|
||
</>
|
||
)}
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|