feat(viz): two pointers narrative

2025-08-24 15:30:46 +01:00
parent 2d581ab14f
commit 241489f1bd
17 changed files with 2191 additions and 2 deletions
@@ -0,0 +1,69 @@
+"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>
+  );
+}