feat(viz): sprint 1 - array visualisations

frontend/src/lib/visualizations/types.ts

@@ -9,17 +9,17 @@
 
 /** Phases of algorithm explanation */
 export type VisualizationPhase =
-  | "problem"
-  | "intuition"
-  | "pattern"
-  | "code"
-  | "execution";
+  | 'problem'
+  | 'intuition'
+  | 'pattern'
+  | 'code'
+  | 'execution';
 
 /** State of an individual array element */
 export interface ArrayElementState {
   value: number;
   index: number;
-  state: "normal" | "highlighted" | "dimmed" | "success" | "comparing";
+  state: 'normal' | 'highlighted' | 'dimmed' | 'success' | 'comparing';
 }
 
 /** Complete array state */
@@ -34,7 +34,7 @@ export interface PointerState {
   id: string;
   name: string;
   index: number;
-  color: "left" | "right" | "mid" | "default";
+  color: 'left' | 'right' | 'mid' | 'default';
   showValue?: boolean;
 }
 
@@ -59,13 +59,13 @@ export interface CalculationState {
   id: string;
   expression: string;
   result: string;
-  position: "above" | "below" | "inline";
+  position: 'above' | 'below' | 'inline';
   anchorElementId?: string;
 }
 
 /** Animation descriptor for transitions */
 export interface Animation {
-  type: "move" | "highlight" | "fade" | "appear" | "disappear" | "calculate";
+  type: 'move' | 'highlight' | 'fade' | 'appear' | 'disappear' | 'calculate';
   targetId: string;
   duration?: number;
   delay?: number;
@@ -93,7 +93,7 @@ export interface VisualizationStep {
 
 /** Code definition for the algorithm */
 export interface AlgorithmCode {
-  language: "typescript" | "python" | "javascript";
+  language: 'typescript' | 'python' | 'javascript';
   code: string;
 }
 

frontend/src/lib/visualizations/use-visualization.ts

@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type {
   AlgorithmDefinition,
   PlaybackSpeed,
   PlaybackState,
   UseVisualizationReturn,
   VisualizationControls,
-} from "./types";
+} from './types';
 
 const SPEED_MULTIPLIERS: Record<PlaybackSpeed, number> = {
   0.5: 2,
@@ -142,31 +142,31 @@ export function useVisualization(
       }
 
       switch (e.key) {
-        case " ":
+        case ' ':
           e.preventDefault();
           togglePlay();
           break;
-        case "ArrowLeft":
+        case 'ArrowLeft':
           e.preventDefault();
           stepBackward();
           break;
-        case "ArrowRight":
+        case 'ArrowRight':
           e.preventDefault();
           stepForward();
           break;
-        case "Home":
+        case 'Home':
           e.preventDefault();
           goToFirst();
           break;
-        case "End":
+        case 'End':
           e.preventDefault();
           goToLast();
           break;
       }
     };
 
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
   }, [togglePlay, stepBackward, stepForward, goToFirst, goToLast]);
 
   const currentStep = algorithm.steps[playback.currentStepIndex];