218 lines
9.7 KiB
TypeScript
218 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { AlgorithmKey, LanguageCode, Step } from "@/lib/types";
|
|
import { runAlgorithm } from "@/lib/algorithms";
|
|
import { algorithmDescriptions } from "@/lib/descriptions";
|
|
import { complexityClass } from "@/lib/complexity";
|
|
import { t, narrate } from "@/lib/i18n";
|
|
import Bars from "@/components/Bars";
|
|
import GrowthChart from "@/components/GrowthChart";
|
|
import Narration from "@/components/Narration";
|
|
import StatsPanel from "@/components/StatsPanel";
|
|
import PlaybackControls, { Speed } from "@/components/PlaybackControls";
|
|
import { AlgorithmPicker } from "@/components/Pickers";
|
|
import SiteFooter from "@/components/SiteFooter";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
const SPEED_MS: Record<Speed, number> = { slow: 260, normal: 120, fast: 55, turbo: 18 };
|
|
|
|
function randomArray(size: number): number[] {
|
|
return Array.from({ length: size }, () => Math.floor(Math.random() * 100) + 1);
|
|
}
|
|
|
|
export default function Page() {
|
|
const [algorithm, setAlgorithm] = useState<AlgorithmKey>("bubble");
|
|
const [language, setLanguage] = useState<LanguageCode>("en");
|
|
const [arraySize, setArraySize] = useState(24);
|
|
const [baseArray, setBaseArray] = useState<number[]>(() => randomArray(24));
|
|
const [steps, setSteps] = useState<Step[]>([]);
|
|
const [stepIndex, setStepIndex] = useState(0);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [speed, setSpeed] = useState<Speed>("normal");
|
|
|
|
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
// (Re)compute the full step-by-step story whenever the algorithm or the
|
|
// underlying data changes. Everything downstream just plays it back.
|
|
useEffect(() => {
|
|
setSteps(runAlgorithm(algorithm, baseArray));
|
|
setStepIndex(0);
|
|
setIsPlaying(false);
|
|
}, [algorithm, baseArray]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!isPlaying) return;
|
|
if (stepIndex >= steps.length - 1) {
|
|
setIsPlaying(false);
|
|
return;
|
|
}
|
|
timeoutRef.current = setTimeout(() => {
|
|
setStepIndex((i) => Math.min(i + 1, steps.length - 1));
|
|
}, SPEED_MS[speed]);
|
|
return () => {
|
|
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
};
|
|
}, [isPlaying, stepIndex, steps.length, speed]);
|
|
|
|
const handleTogglePlay = useCallback(() => {
|
|
if (stepIndex >= steps.length - 1) {
|
|
setStepIndex(0);
|
|
}
|
|
setIsPlaying((p) => !p);
|
|
}, [stepIndex, steps.length]);
|
|
|
|
const handleShuffle = useCallback(() => {
|
|
setBaseArray(randomArray(arraySize));
|
|
}, [arraySize]);
|
|
|
|
const handleReset = useCallback(() => {
|
|
setBaseArray(randomArray(arraySize));
|
|
}, [arraySize]);
|
|
|
|
const handleArraySizeChange = useCallback((n: number) => {
|
|
setArraySize(n);
|
|
setBaseArray(randomArray(n));
|
|
}, []);
|
|
|
|
const handleScrub = useCallback((i: number) => {
|
|
setIsPlaying(false);
|
|
setStepIndex(Math.min(i, steps.length - 1));
|
|
}, [steps.length]);
|
|
|
|
const currentStep: Step | undefined = steps[stepIndex];
|
|
const description = algorithmDescriptions[algorithm]?.[language] ?? algorithmDescriptions[algorithm]?.en;
|
|
const cclass = complexityClass[algorithm];
|
|
|
|
const pivotIndex = useMemo(() => {
|
|
if (!currentStep) return undefined;
|
|
if (currentStep.action === "select-pivot" || currentStep.action === "pivot-placed") return currentStep.indices[0];
|
|
return undefined;
|
|
}, [currentStep]);
|
|
|
|
const narration = useMemo(() => {
|
|
if (!currentStep) return "";
|
|
return narrate(currentStep, algorithm, description?.title ?? algorithm, language);
|
|
}, [currentStep, algorithm, description, language]);
|
|
|
|
const growthLabels = {
|
|
"n+k": "O(n + k)",
|
|
nlogn: "O(n log n)",
|
|
"n2-adaptive": "O(n log\u00B2 n)",
|
|
n2: "O(n\u00B2)",
|
|
} as const;
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col">
|
|
<header className="border-b border-border bg-card/30 backdrop-blur-sm">
|
|
<div className="container mx-auto px-4 md:px-6 py-6 flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">
|
|
<span className="text-primary">{t(language, "brand")}</span>
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">{t(language, "tagline")}</p>
|
|
</div>
|
|
<AlgorithmPicker value={algorithm} onChange={setAlgorithm} triggerLabel={t(language, "pickAlgorithm")} />
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 container mx-auto px-4 md:px-6 py-10 space-y-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6"
|
|
>
|
|
<Bars
|
|
values={currentStep?.array ?? baseArray}
|
|
indices={currentStep?.indices ?? []}
|
|
action={currentStep?.action}
|
|
sorted={currentStep?.sorted ?? []}
|
|
range={currentStep?.range}
|
|
pivotIndex={pivotIndex}
|
|
stepDurationMs={SPEED_MS[speed]}
|
|
/>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<Narration text={narration} stepIndex={stepIndex} title={t(language, "narrationTitle")} />
|
|
<PlaybackControls
|
|
isPlaying={isPlaying}
|
|
onTogglePlay={handleTogglePlay}
|
|
onShuffle={handleShuffle}
|
|
onReset={handleReset}
|
|
arraySize={arraySize}
|
|
onArraySizeChange={handleArraySizeChange}
|
|
speed={speed}
|
|
onSpeedChange={setSpeed}
|
|
stepIndex={stepIndex}
|
|
stepCount={Math.max(steps.length - 1, 0)}
|
|
onScrub={handleScrub}
|
|
labels={{
|
|
play: t(language, "play"), pause: t(language, "pause"),
|
|
shuffle: t(language, "shuffle"), reset: t(language, "reset"),
|
|
arraySize: t(language, "arraySize"), elements: t(language, "elements"),
|
|
speed: t(language, "speed"), speedSlow: t(language, "speedSlow"),
|
|
speedNormal: t(language, "speedNormal"), speedFast: t(language, "speedFast"),
|
|
speedTurbo: t(language, "speedTurbo"),
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<StatsPanel
|
|
title={t(language, "statsTitle")}
|
|
comparisons={currentStep?.comparisons ?? 0}
|
|
writes={currentStep?.writes ?? 0}
|
|
stepLabel={t(language, "step")}
|
|
stepIndex={stepIndex}
|
|
stepCount={Math.max(steps.length - 1, 0)}
|
|
sortedLabel={t(language, "sorted")}
|
|
sortedCount={currentStep?.sorted.length ?? 0}
|
|
total={baseArray.length}
|
|
/>
|
|
|
|
{description && (
|
|
<Card className="bg-card/60 backdrop-blur-sm">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">{description.title}</CardTitle>
|
|
<CardDescription className="space-y-0.5">
|
|
<div className="font-mono text-xs">{description.timeComplexity}</div>
|
|
<div className="font-mono text-xs">{description.spaceComplexity}</div>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">{description.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-5">
|
|
<p className="text-xs uppercase tracking-widest text-muted-foreground mb-1">{t(language, "growthTitle")}</p>
|
|
<p className="text-xs text-muted-foreground mb-4">{t(language, "growthCaption")}</p>
|
|
<GrowthChart active={cclass} n={arraySize} maxN={100} labels={growthLabels} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<SiteFooter
|
|
year={2024}
|
|
rightsLabel={t(language, "footerRights")}
|
|
licenseLabel={t(language, "license")}
|
|
viewLicenseLabel={t(language, "viewLicense")}
|
|
lang={language}
|
|
onLangChange={setLanguage}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|