70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useVisualization } from "@/lib/visualizations/use-visualization";
|
|
import type { AlgorithmDefinition } from "@/lib/visualizations/types";
|
|
import { VisualizationContainer } from "../core/visualization-container";
|
|
import { ArrayView } from "../data-structures/array-view";
|
|
import { CalculationBubble } from "../primitives/calculation-bubble";
|
|
|
|
interface TwoPointersVisualizationProps {
|
|
algorithm: AlgorithmDefinition;
|
|
className?: string;
|
|
}
|
|
|
|
export function TwoPointersVisualization({
|
|
algorithm,
|
|
className,
|
|
}: TwoPointersVisualizationProps) {
|
|
const {
|
|
currentStep,
|
|
currentStepIndex,
|
|
totalSteps,
|
|
playback,
|
|
controls,
|
|
currentPhase,
|
|
progress,
|
|
} = useVisualization(algorithm);
|
|
|
|
const { dataState } = currentStep;
|
|
const mainArray = dataState.arrays[0];
|
|
const calculation = dataState.calculations[0] ?? null;
|
|
|
|
return (
|
|
<VisualizationContainer
|
|
title={algorithm.title}
|
|
pattern={algorithm.pattern}
|
|
code={algorithm.code}
|
|
currentLine={currentStep.codeLine}
|
|
highlightLines={currentStep.codeHighlightLines}
|
|
explanation={currentStep.explanation}
|
|
decision={currentStep.decision}
|
|
phase={currentPhase}
|
|
variables={dataState.variables}
|
|
currentStepIndex={currentStepIndex}
|
|
totalSteps={totalSteps}
|
|
isPlaying={playback.isPlaying}
|
|
speed={playback.speed}
|
|
controls={controls}
|
|
progress={progress}
|
|
className={className}
|
|
>
|
|
<div className="flex flex-col items-center">
|
|
{/* Fixed height area for calculation bubble */}
|
|
<div className="flex h-8 items-center justify-center">
|
|
<CalculationBubble calculation={calculation} />
|
|
</div>
|
|
{/* Array visualization with pointers */}
|
|
<div className="mt-2">
|
|
{mainArray && (
|
|
<ArrayView
|
|
array={mainArray}
|
|
pointers={dataState.pointers}
|
|
elementSize="md"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</VisualizationContainer>
|
|
);
|
|
}
|