82 lines
2.3 KiB
TypeScript
82 lines
2.3 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 { StackView } from '../data-structures/stack-view';
|
|
|
|
interface MonotonicStackVisualizationProps {
|
|
algorithm: AlgorithmDefinition;
|
|
className?: string;
|
|
}
|
|
|
|
export function MonotonicStackVisualization({
|
|
algorithm,
|
|
className,
|
|
}: MonotonicStackVisualizationProps) {
|
|
const {
|
|
currentStep,
|
|
currentStepIndex,
|
|
totalSteps,
|
|
playback,
|
|
controls,
|
|
currentPhase,
|
|
progress,
|
|
} = useVisualization(algorithm);
|
|
|
|
const { dataState } = currentStep;
|
|
|
|
// Input array with i pointer
|
|
const inputArray = dataState.arrays.find((a) => a.id === 'input');
|
|
// Result array
|
|
const resultArray = dataState.arrays.find((a) => a.id === 'result');
|
|
// Stack
|
|
const stack = dataState.stacks?.[0];
|
|
|
|
// Filter pointers for the input array (only show 'i' pointer on input)
|
|
const inputPointers = dataState.pointers.filter((p) => p.id === 'i');
|
|
|
|
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 gap-4">
|
|
{/* Input array with i pointer */}
|
|
{inputArray && (
|
|
<ArrayView
|
|
array={inputArray}
|
|
pointers={inputPointers}
|
|
elementSize="sm"
|
|
/>
|
|
)}
|
|
|
|
<div className="flex items-end gap-6">
|
|
{/* Stack (left side) */}
|
|
{stack && <StackView stack={stack} />}
|
|
|
|
{/* Result array (right side) */}
|
|
{resultArray && (
|
|
<ArrayView array={resultArray} pointers={[]} elementSize="sm" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</VisualizationContainer>
|
|
);
|
|
}
|