- 🟢 Starke Tasten
+ Starke Tasten
${bestKeys
.map(
diff --git a/src/components/typing-area/TypingArea.ts b/src/components/typing-area/TypingArea.ts
index 4b56db8..c010bec 100644
--- a/src/components/typing-area/TypingArea.ts
+++ b/src/components/typing-area/TypingArea.ts
@@ -46,6 +46,40 @@ export class TypingArea {
}
}
+ /**
+ * Handle backspace - allow correction of mistakes
+ * Returns true if backspace was processed, false if at start
+ */
+ handleBackspace(): boolean {
+ if (this.currentPosition === 0) {
+ return false;
+ }
+
+ // Move position back
+ this.currentPosition--;
+
+ // Reset the character at the current position
+ const charEl = this.charElements[this.currentPosition];
+ if (charEl) {
+ charEl.classList.remove('correct', 'incorrect', 'upcoming');
+ charEl.classList.add('current');
+ }
+
+ // Reset the next character to upcoming (if exists)
+ if (this.currentPosition + 1 < this.charElements.length) {
+ const nextCharEl = this.charElements[this.currentPosition + 1];
+ if (nextCharEl) {
+ nextCharEl.classList.remove('current');
+ nextCharEl.classList.add('upcoming');
+ }
+ }
+
+ // Emit backspace event
+ EventBus.emit('typing:backspace', { position: this.currentPosition });
+
+ return true;
+ }
+
/**
* Process a keystroke
*/
diff --git a/src/components/visualization/AlgorithmVisualizer.ts b/src/components/visualization/AlgorithmVisualizer.ts
new file mode 100644
index 0000000..fd33f44
--- /dev/null
+++ b/src/components/visualization/AlgorithmVisualizer.ts
@@ -0,0 +1,1227 @@
+/**
+ * Algorithm Visualizer Component
+ * Beautiful step-by-step visualizations for algorithms
+ */
+
+export type VisualizationState = {
+ array: number[];
+ comparing: number[];
+ swapping: number[];
+ sorted: number[];
+ pivot?: number;
+ current?: number;
+ left?: number;
+ right?: number;
+ mid?: number;
+ found?: number;
+ message: string;
+};
+
+export type AlgorithmStep = {
+ state: VisualizationState;
+ code: string;
+ lineHighlight: number;
+};
+
+/**
+ * Algorithm Visualizer - Creates beautiful animations
+ */
+export class AlgorithmVisualizer {
+ private readonly containerId: string;
+ private steps: AlgorithmStep[] = [];
+ private currentStep: number = 0;
+ private isPlaying: boolean = false;
+ private speed: number = 500; // ms
+ private animationFrame: number | null = null;
+
+ constructor(containerId: string) {
+ this.containerId = containerId;
+ }
+
+ /**
+ * Generate Bubble Sort steps
+ */
+ static generateBubbleSortSteps(arr: number[]): AlgorithmStep[] {
+ const steps: AlgorithmStep[] = [];
+ const array = [...arr];
+ const n = array.length;
+ const sorted: number[] = [];
+
+ const code = `function bubbleSort(arr) {
+ for (let i = 0; i < n - 1; i++) {
+ for (let j = 0; j < n - i - 1; j++) {
+ if (arr[j] > arr[j + 1]) {
+ swap(arr[j], arr[j + 1]);
+ }
+ }
+ }
+}`;
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: [],
+ message: 'Start Bubble Sort',
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ for (let i = 0; i < n - 1; i++) {
+ for (let j = 0; j < n - i - 1; j++) {
+ // Comparing
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [j, j + 1],
+ swapping: [],
+ sorted: [...sorted],
+ message: `Vergleiche ${array[j]} und ${array[j + 1]}`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ if (array[j] > array[j + 1]) {
+ // Swapping
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [j, j + 1],
+ sorted: [...sorted],
+ message: `Tausche ${array[j]} und ${array[j + 1]}`,
+ },
+ code,
+ lineHighlight: 4,
+ });
+
+ [array[j], array[j + 1]] = [array[j + 1], array[j]];
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: [...sorted],
+ message: `Getauscht!`,
+ },
+ code,
+ lineHighlight: 4,
+ });
+ }
+ }
+ sorted.unshift(n - 1 - i);
+ }
+
+ sorted.unshift(0);
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: [...sorted],
+ message: 'Array sortiert!',
+ },
+ code,
+ lineHighlight: 7,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Quick Sort steps
+ */
+ static generateQuickSortSteps(arr: number[]): AlgorithmStep[] {
+ const steps: AlgorithmStep[] = [];
+ const array = [...arr];
+ const sorted: number[] = [];
+
+ const code = `function quickSort(arr, low, high) {
+ if (low < high) {
+ const pivot = partition(arr, low, high);
+ quickSort(arr, low, pivot - 1);
+ quickSort(arr, pivot + 1, high);
+ }
+}`;
+
+ function partition(low: number, high: number): number {
+ const pivotValue = array[high];
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: [...sorted],
+ pivot: high,
+ message: `Pivot gewählt: ${pivotValue}`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ let i = low - 1;
+
+ for (let j = low; j < high; j++) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [j, high],
+ swapping: [],
+ sorted: [...sorted],
+ pivot: high,
+ current: j,
+ message: `Vergleiche ${array[j]} mit Pivot ${pivotValue}`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ if (array[j] < pivotValue) {
+ i++;
+ if (i !== j) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [i, j],
+ sorted: [...sorted],
+ pivot: high,
+ message: `Tausche ${array[i]} und ${array[j]}`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ [array[i], array[j]] = [array[j], array[i]];
+ }
+ }
+ }
+
+ if (i + 1 !== high) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [i + 1, high],
+ sorted: [...sorted],
+ pivot: high,
+ message: `Platziere Pivot an Position ${i + 1}`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ [array[i + 1], array[high]] = [array[high], array[i + 1]];
+ }
+
+ sorted.push(i + 1);
+ return i + 1;
+ }
+
+ function quickSort(low: number, high: number): void {
+ if (low < high) {
+ const pi = partition(low, high);
+ quickSort(low, pi - 1);
+ quickSort(pi + 1, high);
+ }
+ }
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: [],
+ message: 'Start Quick Sort',
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ quickSort(0, array.length - 1);
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: array.length }, (_, i) => i),
+ message: 'Array sortiert!',
+ },
+ code,
+ lineHighlight: 6,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Binary Search steps
+ */
+ static generateBinarySearchSteps(arr: number[], target: number): AlgorithmStep[] {
+ const steps: AlgorithmStep[] = [];
+ const array = [...arr].sort((a, b) => a - b);
+
+ const code = `function binarySearch(arr, target) {
+ let left = 0, right = arr.length - 1;
+ while (left <= right) {
+ const mid = Math.floor((left + right) / 2);
+ if (arr[mid] === target) return mid;
+ if (arr[mid] < target) left = mid + 1;
+ else right = mid - 1;
+ }
+ return -1;
+}`;
+
+ let left = 0;
+ let right = array.length - 1;
+
+ steps.push({
+ state: {
+ array,
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: array.length }, (_, i) => i),
+ left,
+ right,
+ message: `Suche nach ${target} in sortiertem Array`,
+ },
+ code,
+ lineHighlight: 2,
+ });
+
+ while (left <= right) {
+ const mid = Math.floor((left + right) / 2);
+
+ steps.push({
+ state: {
+ array,
+ comparing: [mid],
+ swapping: [],
+ sorted: Array.from({ length: array.length }, (_, i) => i),
+ left,
+ right,
+ mid,
+ message: `Mitte: Index ${mid}, Wert ${array[mid]}`,
+ },
+ code,
+ lineHighlight: 4,
+ });
+
+ if (array[mid] === target) {
+ steps.push({
+ state: {
+ array,
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: array.length }, (_, i) => i),
+ found: mid,
+ message: `Gefunden! ${target} ist an Index ${mid}`,
+ },
+ code,
+ lineHighlight: 5,
+ });
+ return steps;
+ }
+
+ if (array[mid] < target) {
+ steps.push({
+ state: {
+ array,
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: array.length }, (_, i) => i),
+ left: mid + 1,
+ right,
+ message: `${array[mid]} < ${target}, suche rechts`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+ left = mid + 1;
+ } else {
+ steps.push({
+ state: {
+ array,
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: array.length }, (_, i) => i),
+ left,
+ right: mid - 1,
+ message: `${array[mid]} > ${target}, suche links`,
+ },
+ code,
+ lineHighlight: 7,
+ });
+ right = mid - 1;
+ }
+ }
+
+ steps.push({
+ state: {
+ array,
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: array.length }, (_, i) => i),
+ message: `${target} nicht gefunden`,
+ },
+ code,
+ lineHighlight: 9,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Insertion Sort steps
+ */
+ static generateInsertionSortSteps(arr: number[]): AlgorithmStep[] {
+ const steps: AlgorithmStep[] = [];
+ const array = [...arr];
+ const n = array.length;
+
+ const code = `function insertionSort(arr) {
+ for (let i = 1; i < arr.length; i++) {
+ const key = arr[i];
+ let j = i - 1;
+ while (j >= 0 && arr[j] > key) {
+ arr[j + 1] = arr[j];
+ j--;
+ }
+ arr[j + 1] = key;
+ }
+}`;
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: [0],
+ message: 'Start Insertion Sort',
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ for (let i = 1; i < n; i++) {
+ const key = array[i];
+ let j = i - 1;
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [i],
+ swapping: [],
+ sorted: Array.from({ length: i }, (_, idx) => idx),
+ current: i,
+ message: `Schlüssel: ${key}`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ while (j >= 0 && array[j] > key) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [j, i],
+ swapping: [],
+ sorted: Array.from({ length: i }, (_, idx) => idx),
+ message: `${array[j]} > ${key}, verschiebe nach rechts`,
+ },
+ code,
+ lineHighlight: 5,
+ });
+
+ array[j + 1] = array[j];
+ j--;
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: i }, (_, idx) => idx),
+ message: `Verschoben`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+ }
+
+ array[j + 1] = key;
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: i + 1 }, (_, idx) => idx),
+ message: `${key} eingefügt an Position ${j + 1}`,
+ },
+ code,
+ lineHighlight: 9,
+ });
+ }
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: n }, (_, i) => i),
+ message: 'Array sortiert!',
+ },
+ code,
+ lineHighlight: 10,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Selection Sort steps
+ */
+ static generateSelectionSortSteps(arr: number[]): AlgorithmStep[] {
+ const steps: AlgorithmStep[] = [];
+ const array = [...arr];
+ const n = array.length;
+
+ const code = `function selectionSort(arr) {
+ for (let i = 0; i < arr.length - 1; i++) {
+ let minIdx = i;
+ for (let j = i + 1; j < arr.length; j++) {
+ if (arr[j] < arr[minIdx]) {
+ minIdx = j;
+ }
+ }
+ swap(arr[i], arr[minIdx]);
+ }
+}`;
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: [],
+ message: 'Start Selection Sort',
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ for (let i = 0; i < n - 1; i++) {
+ let minIdx = i;
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [i],
+ swapping: [],
+ sorted: Array.from({ length: i }, (_, idx) => idx),
+ current: i,
+ message: `Suche Minimum ab Index ${i}`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ for (let j = i + 1; j < n; j++) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [minIdx, j],
+ swapping: [],
+ sorted: Array.from({ length: i }, (_, idx) => idx),
+ message: `Vergleiche ${array[minIdx]} und ${array[j]}`,
+ },
+ code,
+ lineHighlight: 5,
+ });
+
+ if (array[j] < array[minIdx]) {
+ minIdx = j;
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [minIdx],
+ swapping: [],
+ sorted: Array.from({ length: i }, (_, idx) => idx),
+ message: `Neues Minimum: ${array[minIdx]}`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+ }
+ }
+
+ if (minIdx !== i) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [i, minIdx],
+ sorted: Array.from({ length: i }, (_, idx) => idx),
+ message: `Tausche ${array[i]} und ${array[minIdx]}`,
+ },
+ code,
+ lineHighlight: 9,
+ });
+
+ [array[i], array[minIdx]] = [array[minIdx], array[i]];
+ }
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: i + 1 }, (_, idx) => idx),
+ message: `Position ${i} sortiert`,
+ },
+ code,
+ lineHighlight: 9,
+ });
+ }
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: n }, (_, i) => i),
+ message: 'Array sortiert!',
+ },
+ code,
+ lineHighlight: 10,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Merge Sort steps
+ */
+ static generateMergeSortSteps(arr: number[]): AlgorithmStep[] {
+ const steps: AlgorithmStep[] = [];
+ const array = [...arr];
+
+ const code = `function mergeSort(arr) {
+ if (arr.length <= 1) return arr;
+ const mid = Math.floor(arr.length / 2);
+ const left = mergeSort(arr.slice(0, mid));
+ const right = mergeSort(arr.slice(mid));
+ return merge(left, right);
+}`;
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: [],
+ message: 'Start Merge Sort',
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ function mergeSortHelper(start: number, end: number): void {
+ if (start >= end) {
+ return;
+ }
+
+ const mid = Math.floor((start + end) / 2);
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [mid],
+ swapping: [],
+ sorted: [],
+ message: `Teile Array bei Index ${mid}`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ mergeSortHelper(start, mid);
+ mergeSortHelper(mid + 1, end);
+
+ // Merge
+ const temp: number[] = [];
+ let i = start;
+ let j = mid + 1;
+
+ while (i <= mid && j <= end) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [i, j],
+ swapping: [],
+ sorted: [],
+ message: `Vergleiche ${array[i]} und ${array[j]}`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+
+ if (array[i] <= array[j]) {
+ temp.push(array[i++]);
+ } else {
+ temp.push(array[j++]);
+ }
+ }
+
+ while (i <= mid) {
+ temp.push(array[i++]);
+ }
+ while (j <= end) {
+ temp.push(array[j++]);
+ }
+
+ for (let k = 0; k < temp.length; k++) {
+ array[start + k] = temp[k];
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [start + k],
+ sorted: [],
+ message: `Setze ${temp[k]} an Position ${start + k}`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+ }
+ }
+
+ mergeSortHelper(0, array.length - 1);
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: array.length }, (_, i) => i),
+ message: 'Array sortiert!',
+ },
+ code,
+ lineHighlight: 6,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Heap Sort steps
+ */
+ static generateHeapSortSteps(arr: number[]): AlgorithmStep[] {
+ const steps: AlgorithmStep[] = [];
+ const array = [...arr];
+ const n = array.length;
+
+ const code = `function heapSort(arr) {
+ buildMaxHeap(arr);
+ for (let i = n - 1; i > 0; i--) {
+ swap(arr[0], arr[i]);
+ heapify(arr, i, 0);
+ }
+}`;
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: [],
+ message: 'Start Heap Sort - baue Max-Heap',
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ function heapify(size: number, root: number): void {
+ let largest = root;
+ const left = 2 * root + 1;
+ const right = 2 * root + 2;
+
+ if (left < size) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [largest, left],
+ swapping: [],
+ sorted: Array.from({ length: n - size }, (_, i) => n - 1 - i),
+ message: `Vergleiche ${array[largest]} mit linkem Kind ${array[left]}`,
+ },
+ code,
+ lineHighlight: 5,
+ });
+
+ if (array[left] > array[largest]) {
+ largest = left;
+ }
+ }
+
+ if (right < size) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [largest, right],
+ swapping: [],
+ sorted: Array.from({ length: n - size }, (_, i) => n - 1 - i),
+ message: `Vergleiche ${array[largest]} mit rechtem Kind ${array[right]}`,
+ },
+ code,
+ lineHighlight: 5,
+ });
+
+ if (array[right] > array[largest]) {
+ largest = right;
+ }
+ }
+
+ if (largest !== root) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [root, largest],
+ sorted: Array.from({ length: n - size }, (_, i) => n - 1 - i),
+ message: `Tausche ${array[root]} und ${array[largest]}`,
+ },
+ code,
+ lineHighlight: 5,
+ });
+
+ [array[root], array[largest]] = [array[largest], array[root]];
+ heapify(size, largest);
+ }
+ }
+
+ // Build max heap
+ for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
+ heapify(n, i);
+ }
+
+ // Extract elements from heap
+ for (let i = n - 1; i > 0; i--) {
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [0, i],
+ sorted: Array.from({ length: n - i }, (_, j) => n - 1 - j),
+ message: `Tausche Maximum ${array[0]} ans Ende`,
+ },
+ code,
+ lineHighlight: 4,
+ });
+
+ [array[0], array[i]] = [array[i], array[0]];
+ heapify(i, 0);
+ }
+
+ steps.push({
+ state: {
+ array: [...array],
+ comparing: [],
+ swapping: [],
+ sorted: Array.from({ length: n }, (_, i) => i),
+ message: 'Array sortiert!',
+ },
+ code,
+ lineHighlight: 6,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Linear Search steps
+ */
+ static generateLinearSearchSteps(arr: number[], target: number): AlgorithmStep[] {
+ const steps: AlgorithmStep[] = [];
+ const array = [...arr];
+
+ const code = `function linearSearch(arr, target) {
+ for (let i = 0; i < arr.length; i++) {
+ if (arr[i] === target) {
+ return i;
+ }
+ }
+ return -1;
+}`;
+
+ steps.push({
+ state: {
+ array,
+ comparing: [],
+ swapping: [],
+ sorted: [],
+ message: `Suche nach ${target} - durchlaufe alle Elemente`,
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ for (let i = 0; i < array.length; i++) {
+ steps.push({
+ state: {
+ array,
+ comparing: [i],
+ swapping: [],
+ sorted: [],
+ current: i,
+ message: `Prufe Index ${i}: ${array[i]} === ${target}?`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ if (array[i] === target) {
+ steps.push({
+ state: {
+ array,
+ comparing: [],
+ swapping: [],
+ sorted: [],
+ found: i,
+ message: `Gefunden! ${target} ist an Index ${i}`,
+ },
+ code,
+ lineHighlight: 4,
+ });
+ return steps;
+ }
+ }
+
+ steps.push({
+ state: {
+ array,
+ comparing: [],
+ swapping: [],
+ sorted: [],
+ message: `${target} nicht gefunden`,
+ },
+ code,
+ lineHighlight: 7,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Set steps
+ */
+ setSteps(steps: AlgorithmStep[]): void {
+ this.steps = steps;
+ this.currentStep = 0;
+ this.render();
+ }
+
+ /**
+ * Render visualization
+ */
+ render(): void {
+ const container = document.getElementById(this.containerId);
+ if (!container) {
+ return;
+ }
+
+ const step = this.steps[this.currentStep];
+ if (!step) {
+ return;
+ }
+
+ const maxValue = Math.max(...step.state.array);
+ const barWidth = Math.min(50, Math.floor(400 / step.state.array.length) - 4);
+
+ container.innerHTML = `
+
+
+
+ ${step.state.array
+ .map((value, index) => {
+ let barClass = 'algo-bar';
+ if (step.state.comparing.includes(index)) {
+ barClass += ' comparing';
+ }
+ if (step.state.swapping.includes(index)) {
+ barClass += ' swapping';
+ }
+ if (step.state.sorted.includes(index)) {
+ barClass += ' sorted';
+ }
+ if (step.state.pivot === index) {
+ barClass += ' pivot';
+ }
+ if (step.state.found === index) {
+ barClass += ' found';
+ }
+ if (step.state.current === index) {
+ barClass += ' current';
+ }
+ if (step.state.left === index) {
+ barClass += ' left-bound';
+ }
+ if (step.state.right === index) {
+ barClass += ' right-bound';
+ }
+ if (step.state.mid === index) {
+ barClass += ' mid';
+ }
+
+ const height = (value / maxValue) * 180;
+ return `
+
+ ${value}
+
+ `;
+ })
+ .join('')}
+
+
+
${step.state.message}
+
+
+
+
+
+
+
+
+
+
+
+ ${this.currentStep + 1} / ${this.steps.length}
+
+
+
+
+
+ ${this.speed}ms
+
+
+
+
+
+
+
${this.highlightCode(step.code, step.lineHighlight)}
+
+
+
+
+
+ `;
+
+ this.attachEventListeners();
+ }
+
+ /**
+ * Highlight code line
+ */
+ private highlightCode(code: string, line: number): string {
+ const lines = code.split('\n');
+ return lines
+ .map((l, i) => {
+ const lineNum = i + 1;
+ const isHighlighted = lineNum === line;
+ const escapedLine = l.replace(//g, '>');
+ return `
${escapedLine}`;
+ })
+ .join('\n');
+ }
+
+ /**
+ * Attach event listeners
+ */
+ private attachEventListeners(): void {
+ document.getElementById('algo-first')?.addEventListener('click', () => this.goToStep(0));
+ document.getElementById('algo-prev')?.addEventListener('click', () => this.prevStep());
+ document.getElementById('algo-play')?.addEventListener('click', () => this.togglePlay());
+ document.getElementById('algo-next')?.addEventListener('click', () => this.nextStep());
+ document
+ .getElementById('algo-last')
+ ?.addEventListener('click', () => this.goToStep(this.steps.length - 1));
+
+ document.getElementById('algo-slider')?.addEventListener('input', e => {
+ const value = parseInt((e.target as HTMLInputElement).value);
+ this.goToStep(value);
+ });
+
+ document.getElementById('algo-speed')?.addEventListener('input', e => {
+ const value = parseInt((e.target as HTMLInputElement).value);
+ this.speed = 2100 - value;
+ this.render();
+ });
+ }
+
+ /**
+ * Go to specific step
+ */
+ goToStep(step: number): void {
+ this.currentStep = Math.max(0, Math.min(step, this.steps.length - 1));
+ this.render();
+ }
+
+ /**
+ * Next step
+ */
+ nextStep(): void {
+ if (this.currentStep < this.steps.length - 1) {
+ this.currentStep++;
+ this.render();
+ } else {
+ this.stop();
+ }
+ }
+
+ /**
+ * Previous step
+ */
+ prevStep(): void {
+ if (this.currentStep > 0) {
+ this.currentStep--;
+ this.render();
+ }
+ }
+
+ /**
+ * Toggle play/pause
+ */
+ togglePlay(): void {
+ if (this.isPlaying) {
+ this.stop();
+ } else {
+ this.play();
+ }
+ }
+
+ /**
+ * Play animation
+ */
+ play(): void {
+ this.isPlaying = true;
+ this.render();
+ this.animate();
+ }
+
+ /**
+ * Stop animation
+ */
+ stop(): void {
+ this.isPlaying = false;
+ if (this.animationFrame) {
+ cancelAnimationFrame(this.animationFrame);
+ this.animationFrame = null;
+ }
+ this.render();
+ }
+
+ /**
+ * Animate steps
+ */
+ private animate(): void {
+ if (!this.isPlaying) {
+ return;
+ }
+
+ const now = performance.now();
+ const step = () => {
+ if (!this.isPlaying) {
+ return;
+ }
+ if (performance.now() - now >= this.speed) {
+ this.nextStep();
+ if (this.isPlaying && this.currentStep < this.steps.length - 1) {
+ this.animate();
+ }
+ } else {
+ this.animationFrame = requestAnimationFrame(step);
+ }
+ };
+ this.animationFrame = requestAnimationFrame(step);
+ }
+
+ /**
+ * Reset visualization
+ */
+ reset(): void {
+ this.stop();
+ this.currentStep = 0;
+ this.render();
+ }
+
+ /**
+ * Destroy
+ */
+ destroy(): void {
+ this.stop();
+ const container = document.getElementById(this.containerId);
+ if (container) {
+ container.innerHTML = '';
+ }
+ }
+}
diff --git a/src/components/visualization/GraphVisualizer.ts b/src/components/visualization/GraphVisualizer.ts
new file mode 100644
index 0000000..5a5c402
--- /dev/null
+++ b/src/components/visualization/GraphVisualizer.ts
@@ -0,0 +1,2168 @@
+/**
+ *
+ * Graph & Tree Visualizer Component
+ * Visualizes graph algorithms like Dijkstra, BFS, DFS and tree operations
+ */
+
+export interface GraphNode {
+ id: string;
+ x: number;
+ y: number;
+ value?: number;
+ label?: string;
+}
+
+export interface GraphEdge {
+ from: string;
+ to: string;
+ weight?: number;
+}
+
+export interface TreeNode {
+ id: string;
+ value: number;
+ left?: TreeNode;
+ right?: TreeNode;
+ x?: number;
+ y?: number;
+}
+
+export type GraphVisualizationState = {
+ nodes: GraphNode[];
+ edges: GraphEdge[];
+ visited: string[];
+ current: string | null;
+ path: string[];
+ queue: string[];
+ stack: string[];
+ distances: Map
;
+ message: string;
+};
+
+export type TreeVisualizationState = {
+ root: TreeNode | null;
+ visited: string[];
+ current: string | null;
+ path: string[];
+ comparing: string | null;
+ message: string;
+};
+
+export type GraphAlgorithmStep = {
+ state: GraphVisualizationState;
+ code: string;
+ lineHighlight: number;
+};
+
+export type TreeAlgorithmStep = {
+ state: TreeVisualizationState;
+ code: string;
+ lineHighlight: number;
+};
+
+/**
+ * Graph Visualizer - Creates beautiful graph and tree animations
+ */
+export class GraphVisualizer {
+ private readonly containerId: string;
+ private steps: (GraphAlgorithmStep | TreeAlgorithmStep)[] = [];
+ private currentStep: number = 0;
+ private isPlaying: boolean = false;
+ private speed: number = 800;
+ private animationFrame: number | null = null;
+ private mode: 'graph' | 'tree' = 'graph';
+
+ constructor(containerId: string) {
+ this.containerId = containerId;
+ }
+
+ /**
+ * Create a sample graph for demonstrations
+ */
+ static createSampleGraph(): { nodes: GraphNode[]; edges: GraphEdge[] } {
+ const nodes: GraphNode[] = [
+ { id: 'A', x: 150, y: 50, label: 'A' },
+ { id: 'B', x: 50, y: 150, label: 'B' },
+ { id: 'C', x: 250, y: 150, label: 'C' },
+ { id: 'D', x: 100, y: 250, label: 'D' },
+ { id: 'E', x: 200, y: 250, label: 'E' },
+ { id: 'F', x: 150, y: 350, label: 'F' },
+ ];
+
+ const edges: GraphEdge[] = [
+ { from: 'A', to: 'B', weight: 4 },
+ { from: 'A', to: 'C', weight: 2 },
+ { from: 'B', to: 'D', weight: 5 },
+ { from: 'C', to: 'D', weight: 8 },
+ { from: 'C', to: 'E', weight: 3 },
+ { from: 'D', to: 'E', weight: 2 },
+ { from: 'D', to: 'F', weight: 6 },
+ { from: 'E', to: 'F', weight: 1 },
+ ];
+
+ return { nodes, edges };
+ }
+
+ /**
+ * Create a sample weighted graph for Dijkstra
+ */
+ static createDijkstraGraph(): { nodes: GraphNode[]; edges: GraphEdge[] } {
+ const nodes: GraphNode[] = [
+ { id: '0', x: 80, y: 100, label: 'Start' },
+ { id: '1', x: 200, y: 50, label: '1' },
+ { id: '2', x: 200, y: 180, label: '2' },
+ { id: '3', x: 320, y: 100, label: '3' },
+ { id: '4', x: 440, y: 50, label: '4' },
+ { id: '5', x: 440, y: 180, label: 'Ziel' },
+ ];
+
+ const edges: GraphEdge[] = [
+ { from: '0', to: '1', weight: 4 },
+ { from: '0', to: '2', weight: 2 },
+ { from: '1', to: '2', weight: 1 },
+ { from: '1', to: '3', weight: 5 },
+ { from: '2', to: '3', weight: 8 },
+ { from: '2', to: '4', weight: 10 },
+ { from: '3', to: '4', weight: 2 },
+ { from: '3', to: '5', weight: 6 },
+ { from: '4', to: '5', weight: 3 },
+ ];
+
+ return { nodes, edges };
+ }
+
+ /**
+ * Generate Dijkstra's Algorithm steps
+ */
+ static generateDijkstraSteps(
+ nodes: GraphNode[],
+ edges: GraphEdge[],
+ startId: string,
+ endId: string
+ ): GraphAlgorithmStep[] {
+ const steps: GraphAlgorithmStep[] = [];
+
+ const code = `function dijkstra(graph, start) {
+ const dist = new Map(); // Distanzen
+ const prev = new Map(); // Vorgänger
+ const pq = new PriorityQueue();
+
+ // Initialisiere alle Distanzen mit ∞
+ for (const node of graph.nodes) {
+ dist.set(node, Infinity);
+ }
+ dist.set(start, 0);
+ pq.add(start, 0);
+
+ while (!pq.isEmpty()) {
+ const u = pq.extractMin();
+ for (const neighbor of getNeighbors(u)) {
+ const alt = dist.get(u) + weight(u, neighbor);
+ if (alt < dist.get(neighbor)) {
+ dist.set(neighbor, alt);
+ prev.set(neighbor, u);
+ pq.decreaseKey(neighbor, alt);
+ }
+ }
+ }
+ return { dist, prev };
+}`;
+
+ // Build adjacency list
+ const adj = new Map();
+ nodes.forEach(n => adj.set(n.id, []));
+ edges.forEach(e => {
+ adj.get(e.from)?.push({ node: e.to, weight: e.weight || 1 });
+ adj.get(e.to)?.push({ node: e.from, weight: e.weight || 1 });
+ });
+
+ const distances = new Map();
+ const previous = new Map();
+ const visited = new Set();
+
+ nodes.forEach(n => distances.set(n.id, Infinity));
+ distances.set(startId, 0);
+
+ const pq: { node: string; dist: number }[] = [{ node: startId, dist: 0 }];
+
+ // Initial step
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [],
+ current: null,
+ path: [],
+ queue: [startId],
+ stack: [],
+ distances: new Map(distances),
+ message: `Starte Dijkstra von Knoten ${startId}. Alle Distanzen auf ∞ gesetzt, Start = 0`,
+ },
+ code,
+ lineHighlight: 7,
+ });
+
+ while (pq.length > 0) {
+ pq.sort((a, b) => a.dist - b.dist);
+ const { node: current } = pq.shift()!;
+
+ if (visited.has(current)) {
+ continue;
+ }
+ visited.add(current);
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current,
+ path: [],
+ queue: pq.map(p => p.node),
+ stack: [],
+ distances: new Map(distances),
+ message: `Besuche Knoten ${current} mit Distanz ${distances.get(current)}`,
+ },
+ code,
+ lineHighlight: 13,
+ });
+
+ if (current === endId) {
+ // Reconstruct path
+ const path: string[] = [];
+ let curr: string | undefined = endId;
+ while (curr) {
+ path.unshift(curr);
+ curr = previous.get(curr);
+ }
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current: endId,
+ path,
+ queue: [],
+ stack: [],
+ distances: new Map(distances),
+ message: `Ziel erreicht! Kürzester Pfad: ${path.join(' → ')} (Distanz: ${distances.get(endId)})`,
+ },
+ code,
+ lineHighlight: 21,
+ });
+ return steps;
+ }
+
+ const neighbors = adj.get(current) || [];
+ for (const { node: neighbor, weight } of neighbors) {
+ if (visited.has(neighbor)) {
+ continue;
+ }
+
+ const alt = (distances.get(current) || 0) + weight;
+ const currentDist = distances.get(neighbor) || Infinity;
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current,
+ path: [current, neighbor],
+ queue: pq.map(p => p.node),
+ stack: [],
+ distances: new Map(distances),
+ message: `Prüfe Kante ${current} → ${neighbor}: ${distances.get(current)} + ${weight} = ${alt} ${alt < currentDist ? '< ' + currentDist + ' → Update!' : '>= ' + currentDist}`,
+ },
+ code,
+ lineHighlight: 15,
+ });
+
+ if (alt < currentDist) {
+ distances.set(neighbor, alt);
+ previous.set(neighbor, current);
+
+ const existing = pq.findIndex(p => p.node === neighbor);
+ if (existing >= 0) {
+ pq[existing].dist = alt;
+ } else {
+ pq.push({ node: neighbor, dist: alt });
+ }
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current,
+ path: [],
+ queue: pq.map(p => p.node),
+ stack: [],
+ distances: new Map(distances),
+ message: `Distanz zu ${neighbor} aktualisiert: ${alt}`,
+ },
+ code,
+ lineHighlight: 17,
+ });
+ }
+ }
+ }
+
+ return steps;
+ }
+
+ /**
+ * Generate BFS (Breadth-First Search) steps
+ */
+ static generateBFSSteps(
+ nodes: GraphNode[],
+ edges: GraphEdge[],
+ startId: string
+ ): GraphAlgorithmStep[] {
+ const steps: GraphAlgorithmStep[] = [];
+
+ const code = `function bfs(graph, start) {
+ const visited = new Set();
+ const queue = [start];
+ visited.add(start);
+
+ while (queue.length > 0) {
+ const current = queue.shift();
+ process(current);
+
+ for (const neighbor of getNeighbors(current)) {
+ if (!visited.has(neighbor)) {
+ visited.add(neighbor);
+ queue.push(neighbor);
+ }
+ }
+ }
+}`;
+
+ // Build adjacency list
+ const adj = new Map();
+ nodes.forEach(n => adj.set(n.id, []));
+ edges.forEach(e => {
+ adj.get(e.from)?.push(e.to);
+ adj.get(e.to)?.push(e.from);
+ });
+
+ const visited = new Set();
+ const queue: string[] = [startId];
+ visited.add(startId);
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [startId],
+ current: null,
+ path: [],
+ queue: [...queue],
+ stack: [],
+ distances: new Map(),
+ message: `Starte BFS von Knoten ${startId}. Queue initialisiert.`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ while (queue.length > 0) {
+ const current = queue.shift()!;
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current,
+ path: [],
+ queue: [...queue],
+ stack: [],
+ distances: new Map(),
+ message: `Besuche Knoten ${current} (aus Queue entnommen)`,
+ },
+ code,
+ lineHighlight: 7,
+ });
+
+ const neighbors = (adj.get(current) || []).sort();
+ for (const neighbor of neighbors) {
+ if (!visited.has(neighbor)) {
+ visited.add(neighbor);
+ queue.push(neighbor);
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current,
+ path: [current, neighbor],
+ queue: [...queue],
+ stack: [],
+ distances: new Map(),
+ message: `Nachbar ${neighbor} entdeckt - zur Queue hinzugefügt`,
+ },
+ code,
+ lineHighlight: 12,
+ });
+ }
+ }
+ }
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current: null,
+ path: [],
+ queue: [],
+ stack: [],
+ distances: new Map(),
+ message: `BFS abgeschlossen! Alle ${visited.size} Knoten besucht.`,
+ },
+ code,
+ lineHighlight: 16,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate DFS (Depth-First Search) steps
+ */
+ static generateDFSSteps(
+ nodes: GraphNode[],
+ edges: GraphEdge[],
+ startId: string
+ ): GraphAlgorithmStep[] {
+ const steps: GraphAlgorithmStep[] = [];
+
+ const code = `function dfs(graph, start) {
+ const visited = new Set();
+ const stack = [start];
+
+ while (stack.length > 0) {
+ const current = stack.pop();
+ if (visited.has(current)) continue;
+
+ visited.add(current);
+ process(current);
+
+ for (const neighbor of getNeighbors(current)) {
+ if (!visited.has(neighbor)) {
+ stack.push(neighbor);
+ }
+ }
+ }
+}`;
+
+ // Build adjacency list
+ const adj = new Map();
+ nodes.forEach(n => adj.set(n.id, []));
+ edges.forEach(e => {
+ adj.get(e.from)?.push(e.to);
+ adj.get(e.to)?.push(e.from);
+ });
+
+ const visited = new Set();
+ const stack: string[] = [startId];
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [],
+ current: null,
+ path: [],
+ queue: [],
+ stack: [...stack],
+ distances: new Map(),
+ message: `Starte DFS von Knoten ${startId}. Stack initialisiert.`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ while (stack.length > 0) {
+ const current = stack.pop()!;
+
+ if (visited.has(current)) {
+ continue;
+ }
+ visited.add(current);
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current,
+ path: [],
+ queue: [],
+ stack: [...stack],
+ distances: new Map(),
+ message: `Besuche Knoten ${current} (vom Stack genommen)`,
+ },
+ code,
+ lineHighlight: 9,
+ });
+
+ const neighbors = (adj.get(current) || []).sort().reverse();
+ for (const neighbor of neighbors) {
+ if (!visited.has(neighbor)) {
+ stack.push(neighbor);
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current,
+ path: [current, neighbor],
+ queue: [],
+ stack: [...stack],
+ distances: new Map(),
+ message: `Nachbar ${neighbor} auf Stack gelegt`,
+ },
+ code,
+ lineHighlight: 14,
+ });
+ }
+ }
+ }
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current: null,
+ path: [],
+ queue: [],
+ stack: [],
+ distances: new Map(),
+ message: `DFS abgeschlossen! Alle ${visited.size} Knoten besucht.`,
+ },
+ code,
+ lineHighlight: 17,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Create a sample Binary Search Tree
+ */
+ static createSampleBST(): TreeNode {
+ return {
+ id: '1',
+ value: 50,
+ left: {
+ id: '2',
+ value: 30,
+ left: { id: '4', value: 20 },
+ right: { id: '5', value: 40 },
+ },
+ right: {
+ id: '3',
+ value: 70,
+ left: { id: '6', value: 60 },
+ right: { id: '7', value: 80 },
+ },
+ };
+ }
+
+ /**
+ * Generate BST Search steps
+ */
+ static generateBSTSearchSteps(root: TreeNode, target: number): TreeAlgorithmStep[] {
+ const steps: TreeAlgorithmStep[] = [];
+
+ const code = `function searchBST(node, target) {
+ if (node === null) {
+ return null; // Nicht gefunden
+ }
+
+ if (target === node.value) {
+ return node; // Gefunden!
+ }
+
+ if (target < node.value) {
+ return searchBST(node.left, target);
+ } else {
+ return searchBST(node.right, target);
+ }
+}`;
+
+ const visited: string[] = [];
+ let current: TreeNode | null = root;
+
+ steps.push({
+ state: {
+ root,
+ visited: [],
+ current: null,
+ path: [],
+ comparing: null,
+ message: `Suche nach ${target} im Binary Search Tree`,
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ while (current) {
+ visited.push(current.id);
+
+ steps.push({
+ state: {
+ root,
+ visited: [...visited],
+ current: current.id,
+ path: [...visited],
+ comparing: current.id,
+ message: `Vergleiche ${target} mit Knoten ${current.value}`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+
+ if (target === current.value) {
+ steps.push({
+ state: {
+ root,
+ visited: [...visited],
+ current: current.id,
+ path: [...visited],
+ comparing: null,
+ message: `Gefunden! ${target} ist im Baum.`,
+ },
+ code,
+ lineHighlight: 7,
+ });
+ return steps;
+ }
+
+ if (target < current.value) {
+ steps.push({
+ state: {
+ root,
+ visited: [...visited],
+ current: current.id,
+ path: [...visited],
+ comparing: null,
+ message: `${target} < ${current.value} → gehe nach links`,
+ },
+ code,
+ lineHighlight: 11,
+ });
+ current = current.left || null;
+ } else {
+ steps.push({
+ state: {
+ root,
+ visited: [...visited],
+ current: current.id,
+ path: [...visited],
+ comparing: null,
+ message: `${target} > ${current.value} → gehe nach rechts`,
+ },
+ code,
+ lineHighlight: 13,
+ });
+ current = current.right || null;
+ }
+ }
+
+ steps.push({
+ state: {
+ root,
+ visited: [...visited],
+ current: null,
+ path: [...visited],
+ comparing: null,
+ message: `${target} nicht im Baum gefunden.`,
+ },
+ code,
+ lineHighlight: 3,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate A* (A-Star) Algorithm steps - The industry standard for pathfinding
+ * Used by: Google Maps, Video Games (Starcraft, Age of Empires), Robotics
+ */
+ static generateAStarSteps(
+ nodes: GraphNode[],
+ edges: GraphEdge[],
+ startId: string,
+ endId: string
+ ): GraphAlgorithmStep[] {
+ const steps: GraphAlgorithmStep[] = [];
+
+ const code = `function aStar(graph, start, goal) {
+ const openSet = new PriorityQueue();
+ const gScore = new Map(); // Kosten vom Start
+ const fScore = new Map(); // g + heuristic
+ const cameFrom = new Map();
+
+ gScore.set(start, 0);
+ fScore.set(start, heuristic(start, goal));
+ openSet.add(start, fScore.get(start));
+
+ while (!openSet.isEmpty()) {
+ const current = openSet.extractMin();
+ if (current === goal) {
+ return reconstructPath(cameFrom, current);
+ }
+
+ for (const neighbor of getNeighbors(current)) {
+ const tentative = gScore.get(current) + weight(current, neighbor);
+ if (tentative < gScore.get(neighbor)) {
+ cameFrom.set(neighbor, current);
+ gScore.set(neighbor, tentative);
+ fScore.set(neighbor, tentative + heuristic(neighbor, goal));
+ openSet.add(neighbor, fScore.get(neighbor));
+ }
+ }
+ }
+ return null; // Kein Pfad gefunden
+}`;
+
+ // Build adjacency list
+ const adj = new Map();
+ nodes.forEach(n => adj.set(n.id, []));
+ edges.forEach(e => {
+ adj.get(e.from)?.push({ node: e.to, weight: e.weight || 1 });
+ adj.get(e.to)?.push({ node: e.from, weight: e.weight || 1 });
+ });
+
+ // Heuristic function (Euclidean distance)
+ const heuristic = (a: string, b: string): number => {
+ const nodeA = nodes.find(n => n.id === a);
+ const nodeB = nodes.find(n => n.id === b);
+ if (!nodeA || !nodeB) {
+ return 0;
+ }
+ return Math.sqrt(Math.pow(nodeA.x - nodeB.x, 2) + Math.pow(nodeA.y - nodeB.y, 2)) / 50;
+ };
+
+ const gScore = new Map();
+ const fScore = new Map();
+ const cameFrom = new Map();
+ const visited = new Set();
+
+ nodes.forEach(n => {
+ gScore.set(n.id, Infinity);
+ fScore.set(n.id, Infinity);
+ });
+ gScore.set(startId, 0);
+ fScore.set(startId, heuristic(startId, endId));
+
+ const openSet: { node: string; f: number }[] = [{ node: startId, f: fScore.get(startId)! }];
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [],
+ current: null,
+ path: [],
+ queue: [startId],
+ stack: [],
+ distances: new Map(gScore),
+ message: `A* startet von ${startId}. Heuristik: Euklidische Distanz zum Ziel`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+
+ while (openSet.length > 0) {
+ openSet.sort((a, b) => a.f - b.f);
+ const { node: current } = openSet.shift()!;
+
+ if (visited.has(current)) {
+ continue;
+ }
+ visited.add(current);
+
+ const h = heuristic(current, endId).toFixed(1);
+ const g = gScore.get(current)!;
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current,
+ path: [],
+ queue: openSet.map(p => p.node),
+ stack: [],
+ distances: new Map(gScore),
+ message: `Besuche ${current}: g=${g}, h=${h}, f=${(g + parseFloat(h)).toFixed(1)}`,
+ },
+ code,
+ lineHighlight: 12,
+ });
+
+ if (current === endId) {
+ const path: string[] = [];
+ let curr: string | undefined = endId;
+ while (curr) {
+ path.unshift(curr);
+ curr = cameFrom.get(curr);
+ }
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current: endId,
+ path,
+ queue: [],
+ stack: [],
+ distances: new Map(gScore),
+ message: `Ziel erreicht! Optimaler Pfad: ${path.join(' → ')} (Kosten: ${gScore.get(endId)})`,
+ },
+ code,
+ lineHighlight: 14,
+ });
+ return steps;
+ }
+
+ const neighbors = adj.get(current) || [];
+ for (const { node: neighbor, weight } of neighbors) {
+ if (visited.has(neighbor)) {
+ continue;
+ }
+
+ const tentativeG = (gScore.get(current) || 0) + weight;
+ const currentG = gScore.get(neighbor) || Infinity;
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(visited),
+ current,
+ path: [current, neighbor],
+ queue: openSet.map(p => p.node),
+ stack: [],
+ distances: new Map(gScore),
+ message: `Prüfe ${current} → ${neighbor}: g_neu=${tentativeG} ${tentativeG < currentG ? '< ' + currentG + ' → Update!' : '>= ' + currentG}`,
+ },
+ code,
+ lineHighlight: 18,
+ });
+
+ if (tentativeG < currentG) {
+ cameFrom.set(neighbor, current);
+ gScore.set(neighbor, tentativeG);
+ const h = heuristic(neighbor, endId);
+ fScore.set(neighbor, tentativeG + h);
+
+ const existing = openSet.findIndex(p => p.node === neighbor);
+ if (existing >= 0) {
+ openSet[existing].f = tentativeG + h;
+ } else {
+ openSet.push({ node: neighbor, f: tentativeG + h });
+ }
+ }
+ }
+ }
+
+ return steps;
+ }
+
+ /**
+ * Generate Topological Sort steps (Kahn's Algorithm)
+ * Used by: npm/yarn dependency resolution, Build systems (Make, Gradle), Task scheduling
+ */
+ static generateTopologicalSortSteps(
+ nodes: GraphNode[],
+ edges: GraphEdge[]
+ ): GraphAlgorithmStep[] {
+ const steps: GraphAlgorithmStep[] = [];
+
+ const code = `function topologicalSort(graph) {
+ const inDegree = new Map();
+ const queue = [];
+ const result = [];
+
+ // Berechne In-Degree für jeden Knoten
+ for (const node of graph.nodes) {
+ inDegree.set(node, 0);
+ }
+ for (const edge of graph.edges) {
+ inDegree.set(edge.to, inDegree.get(edge.to) + 1);
+ }
+
+ // Füge Knoten mit In-Degree 0 zur Queue
+ for (const [node, degree] of inDegree) {
+ if (degree === 0) queue.push(node);
+ }
+
+ while (queue.length > 0) {
+ const node = queue.shift();
+ result.push(node);
+
+ for (const neighbor of getOutgoing(node)) {
+ inDegree.set(neighbor, inDegree.get(neighbor) - 1);
+ if (inDegree.get(neighbor) === 0) {
+ queue.push(neighbor);
+ }
+ }
+ }
+
+ return result.length === graph.nodes.length ? result : null;
+}`;
+
+ // Calculate in-degrees
+ const inDegree = new Map();
+ const outgoing = new Map();
+
+ nodes.forEach(n => {
+ inDegree.set(n.id, 0);
+ outgoing.set(n.id, []);
+ });
+
+ edges.forEach(e => {
+ inDegree.set(e.to, (inDegree.get(e.to) || 0) + 1);
+ outgoing.get(e.from)?.push(e.to);
+ });
+
+ const queue: string[] = [];
+ const result: string[] = [];
+ const visited: string[] = [];
+
+ // Initial step
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [],
+ current: null,
+ path: [],
+ queue: [],
+ stack: [],
+ distances: new Map(Array.from(inDegree.entries()).map(([k, v]) => [k, v])),
+ message: `Berechne In-Degree für jeden Knoten (Anzahl eingehender Kanten)`,
+ },
+ code,
+ lineHighlight: 7,
+ });
+
+ // Find nodes with in-degree 0
+ nodes.forEach(n => {
+ if (inDegree.get(n.id) === 0) {
+ queue.push(n.id);
+ }
+ });
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [],
+ current: null,
+ path: [],
+ queue: [...queue],
+ stack: [],
+ distances: new Map(Array.from(inDegree.entries()).map(([k, v]) => [k, v])),
+ message: `Knoten mit In-Degree 0: [${queue.join(', ')}] → Keine Abhängigkeiten`,
+ },
+ code,
+ lineHighlight: 15,
+ });
+
+ while (queue.length > 0) {
+ const current = queue.shift()!;
+ result.push(current);
+ visited.push(current);
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [...visited],
+ current,
+ path: [...result],
+ queue: [...queue],
+ stack: [],
+ distances: new Map(Array.from(inDegree.entries()).map(([k, v]) => [k, v])),
+ message: `Verarbeite ${current} → Reihenfolge: [${result.join(', ')}]`,
+ },
+ code,
+ lineHighlight: 20,
+ });
+
+ const neighbors = outgoing.get(current) || [];
+ for (const neighbor of neighbors) {
+ const newDegree = (inDegree.get(neighbor) || 0) - 1;
+ inDegree.set(neighbor, newDegree);
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [...visited],
+ current,
+ path: [current, neighbor],
+ queue: [...queue],
+ stack: [],
+ distances: new Map(Array.from(inDegree.entries()).map(([k, v]) => [k, v])),
+ message: `Reduziere In-Degree von ${neighbor}: ${newDegree + 1} → ${newDegree}`,
+ },
+ code,
+ lineHighlight: 24,
+ });
+
+ if (newDegree === 0) {
+ queue.push(neighbor);
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [...visited],
+ current,
+ path: [],
+ queue: [...queue],
+ stack: [],
+ distances: new Map(Array.from(inDegree.entries()).map(([k, v]) => [k, v])),
+ message: `${neighbor} hat jetzt In-Degree 0 → zur Queue hinzugefügt`,
+ },
+ code,
+ lineHighlight: 26,
+ });
+ }
+ }
+ }
+
+ const success = result.length === nodes.length;
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [...visited],
+ current: null,
+ path: [...result],
+ queue: [],
+ stack: [],
+ distances: new Map(),
+ message: success
+ ? `Topologische Sortierung: [${result.join(' → ')}]`
+ : `Zyklus erkannt! Keine topologische Sortierung möglich.`,
+ },
+ code,
+ lineHighlight: 30,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Create a DAG (Directed Acyclic Graph) for topological sort
+ */
+ static createDAGGraph(): { nodes: GraphNode[]; edges: GraphEdge[] } {
+ const nodes: GraphNode[] = [
+ { id: 'A', x: 80, y: 80, label: 'A' },
+ { id: 'B', x: 200, y: 50, label: 'B' },
+ { id: 'C', x: 200, y: 150, label: 'C' },
+ { id: 'D', x: 320, y: 80, label: 'D' },
+ { id: 'E', x: 320, y: 180, label: 'E' },
+ { id: 'F', x: 440, y: 120, label: 'F' },
+ ];
+
+ // Directed edges (dependencies)
+ const edges: GraphEdge[] = [
+ { from: 'A', to: 'B' },
+ { from: 'A', to: 'C' },
+ { from: 'B', to: 'D' },
+ { from: 'C', to: 'D' },
+ { from: 'C', to: 'E' },
+ { from: 'D', to: 'F' },
+ { from: 'E', to: 'F' },
+ ];
+
+ return { nodes, edges };
+ }
+
+ /**
+ * Generate Tree Preorder Traversal steps
+ * Used by: Creating a copy of tree, Prefix expression, Serialization
+ */
+ static generatePreorderSteps(root: TreeNode): TreeAlgorithmStep[] {
+ const steps: TreeAlgorithmStep[] = [];
+ const result: number[] = [];
+
+ const code = `function preorder(node) {
+ if (node === null) return;
+
+ process(node.value); // Wurzel ZUERST
+ preorder(node.left); // Links
+ preorder(node.right); // Rechts
+}
+// Anwendung: Tree-Kopie, Prefix-Notation`;
+
+ function traverse(node: TreeNode | undefined, path: string[]): void {
+ if (!node) {
+ return;
+ }
+
+ result.push(node.value);
+ steps.push({
+ state: {
+ root,
+ visited: result.map((_, i) => `node-${i}`),
+ current: node.id,
+ path: [...path, node.id],
+ comparing: node.id,
+ message: `Besuche ${node.value} ZUERST - Ergebnis: [${result.join(', ')}]`,
+ },
+ code,
+ lineHighlight: 4,
+ });
+
+ steps.push({
+ state: {
+ root,
+ visited: result.map((_, i) => `node-${i}`),
+ current: node.id,
+ path: [...path, node.id],
+ comparing: null,
+ message: `Gehe zum linken Kind von ${node.value}`,
+ },
+ code,
+ lineHighlight: 5,
+ });
+ traverse(node.left, [...path, node.id]);
+
+ steps.push({
+ state: {
+ root,
+ visited: result.map((_, i) => `node-${i}`),
+ current: node.id,
+ path: [...path, node.id],
+ comparing: null,
+ message: `Gehe zum rechten Kind von ${node.value}`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+ traverse(node.right, [...path, node.id]);
+ }
+
+ steps.push({
+ state: {
+ root,
+ visited: [],
+ current: null,
+ path: [],
+ comparing: null,
+ message: 'Starte Preorder-Traversierung (Wurzel → Links → Rechts)',
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ traverse(root, []);
+
+ steps.push({
+ state: {
+ root,
+ visited: [],
+ current: null,
+ path: [],
+ comparing: null,
+ message: `Preorder abgeschlossen: [${result.join(', ')}]`,
+ },
+ code,
+ lineHighlight: 8,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Tree Postorder Traversal steps
+ * Used by: Deleting tree, Postfix expression, Directory size calculation
+ */
+ static generatePostorderSteps(root: TreeNode): TreeAlgorithmStep[] {
+ const steps: TreeAlgorithmStep[] = [];
+ const result: number[] = [];
+
+ const code = `function postorder(node) {
+ if (node === null) return;
+
+ postorder(node.left); // Links
+ postorder(node.right); // Rechts
+ process(node.value); // Wurzel ZULETZT
+}
+// Anwendung: Tree löschen, Postfix, du -sh`;
+
+ function traverse(node: TreeNode | undefined, path: string[]): void {
+ if (!node) {
+ return;
+ }
+
+ steps.push({
+ state: {
+ root,
+ visited: result.map((_, i) => `node-${i}`),
+ current: node.id,
+ path: [...path, node.id],
+ comparing: null,
+ message: `Bei ${node.value} - gehe erst zum linken Kind`,
+ },
+ code,
+ lineHighlight: 4,
+ });
+ traverse(node.left, [...path, node.id]);
+
+ steps.push({
+ state: {
+ root,
+ visited: result.map((_, i) => `node-${i}`),
+ current: node.id,
+ path: [...path, node.id],
+ comparing: null,
+ message: `Bei ${node.value} - gehe zum rechten Kind`,
+ },
+ code,
+ lineHighlight: 5,
+ });
+ traverse(node.right, [...path, node.id]);
+
+ result.push(node.value);
+ steps.push({
+ state: {
+ root,
+ visited: result.map((_, i) => `node-${i}`),
+ current: node.id,
+ path: [...path, node.id],
+ comparing: node.id,
+ message: `Besuche ${node.value} ZULETZT - Ergebnis: [${result.join(', ')}]`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+ }
+
+ steps.push({
+ state: {
+ root,
+ visited: [],
+ current: null,
+ path: [],
+ comparing: null,
+ message: 'Starte Postorder-Traversierung (Links → Rechts → Wurzel)',
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ traverse(root, []);
+
+ steps.push({
+ state: {
+ root,
+ visited: [],
+ current: null,
+ path: [],
+ comparing: null,
+ message: `Postorder abgeschlossen: [${result.join(', ')}]`,
+ },
+ code,
+ lineHighlight: 8,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Bellman-Ford Algorithm steps
+ * Used by: Network routing (RIP protocol), Currency arbitrage detection, Negative weight handling
+ */
+ static generateBellmanFordSteps(
+ nodes: GraphNode[],
+ edges: GraphEdge[],
+ startId: string
+ ): GraphAlgorithmStep[] {
+ const steps: GraphAlgorithmStep[] = [];
+
+ const code = `function bellmanFord(graph, start) {
+ const dist = new Map();
+ const prev = new Map();
+
+ // Initialisiere alle Distanzen mit ∞
+ for (const node of graph.nodes) {
+ dist.set(node, Infinity);
+ }
+ dist.set(start, 0);
+
+ // Relaxiere alle Kanten |V|-1 mal
+ for (let i = 0; i < nodes.length - 1; i++) {
+ for (const edge of graph.edges) {
+ if (dist.get(edge.from) + edge.weight < dist.get(edge.to)) {
+ dist.set(edge.to, dist.get(edge.from) + edge.weight);
+ prev.set(edge.to, edge.from);
+ }
+ }
+ }
+
+ // Prüfe auf negative Zyklen
+ for (const edge of graph.edges) {
+ if (dist.get(edge.from) + edge.weight < dist.get(edge.to)) {
+ return "Negativer Zyklus erkannt!";
+ }
+ }
+ return { dist, prev };
+}`;
+
+ const distances = new Map();
+ const previous = new Map();
+
+ nodes.forEach(n => distances.set(n.id, Infinity));
+ distances.set(startId, 0);
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [],
+ current: null,
+ path: [],
+ queue: [],
+ stack: [],
+ distances: new Map(distances),
+ message: `Bellman-Ford startet von ${startId}. Alle Distanzen = ∞, Start = 0`,
+ },
+ code,
+ lineHighlight: 6,
+ });
+
+ // Relax all edges V-1 times
+ for (let i = 0; i < nodes.length - 1; i++) {
+ let updated = false;
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [],
+ current: null,
+ path: [],
+ queue: [],
+ stack: [],
+ distances: new Map(distances),
+ message: `Iteration ${i + 1}/${nodes.length - 1}: Relaxiere alle Kanten`,
+ },
+ code,
+ lineHighlight: 12,
+ });
+
+ for (const edge of edges) {
+ const fromDist = distances.get(edge.from) || Infinity;
+ const toDist = distances.get(edge.to) || Infinity;
+ const weight = edge.weight || 1;
+
+ if (fromDist !== Infinity && fromDist + weight < toDist) {
+ distances.set(edge.to, fromDist + weight);
+ previous.set(edge.to, edge.from);
+ updated = true;
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [edge.from],
+ current: edge.to,
+ path: [edge.from, edge.to],
+ queue: [],
+ stack: [],
+ distances: new Map(distances),
+ message: `Kante ${edge.from}→${edge.to}: ${fromDist} + ${weight} = ${fromDist + weight} < ${toDist} → Update!`,
+ },
+ code,
+ lineHighlight: 15,
+ });
+ }
+ }
+
+ // Also check reverse edges (undirected graph)
+ for (const edge of edges) {
+ const fromDist = distances.get(edge.to) || Infinity;
+ const toDist = distances.get(edge.from) || Infinity;
+ const weight = edge.weight || 1;
+
+ if (fromDist !== Infinity && fromDist + weight < toDist) {
+ distances.set(edge.from, fromDist + weight);
+ previous.set(edge.from, edge.to);
+ updated = true;
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [edge.to],
+ current: edge.from,
+ path: [edge.to, edge.from],
+ queue: [],
+ stack: [],
+ distances: new Map(distances),
+ message: `Kante ${edge.to}→${edge.from}: ${fromDist} + ${weight} = ${fromDist + weight} < ${toDist} → Update!`,
+ },
+ code,
+ lineHighlight: 15,
+ });
+ }
+ }
+
+ if (!updated) {
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: [],
+ current: null,
+ path: [],
+ queue: [],
+ stack: [],
+ distances: new Map(distances),
+ message: `Keine Änderungen in Iteration ${i + 1} → Früher Abbruch möglich`,
+ },
+ code,
+ lineHighlight: 18,
+ });
+ break;
+ }
+ }
+
+ steps.push({
+ state: {
+ nodes: [...nodes],
+ edges: [...edges],
+ visited: Array.from(distances.keys()),
+ current: null,
+ path: [],
+ queue: [],
+ stack: [],
+ distances: new Map(distances),
+ message: `Bellman-Ford abgeschlossen! Kürzeste Distanzen von ${startId}: ${Array.from(
+ distances.entries()
+ )
+ .map(([k, v]) => `${k}=${v}`)
+ .join(', ')}`,
+ },
+ code,
+ lineHighlight: 27,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Generate Tree Inorder Traversal steps
+ */
+ static generateInorderSteps(root: TreeNode): TreeAlgorithmStep[] {
+ const steps: TreeAlgorithmStep[] = [];
+ const result: number[] = [];
+
+ const code = `function inorder(node) {
+ if (node === null) return;
+
+ inorder(node.left); // Links
+ process(node.value); // Wurzel
+ inorder(node.right); // Rechts
+}
+// Ergebnis: sortierte Reihenfolge!`;
+
+ function traverse(node: TreeNode | undefined, path: string[]): void {
+ if (!node) {
+ return;
+ }
+
+ steps.push({
+ state: {
+ root,
+ visited: [...result.map((_, i) => path[i])].filter(Boolean),
+ current: node.id,
+ path: [...path, node.id],
+ comparing: null,
+ message: `Gehe zu linkem Kind von ${node.value}`,
+ },
+ code,
+ lineHighlight: 4,
+ });
+
+ traverse(node.left, [...path, node.id]);
+
+ result.push(node.value);
+ steps.push({
+ state: {
+ root,
+ visited: result.map((_, i) => `node-${i}`),
+ current: node.id,
+ path: [...path, node.id],
+ comparing: node.id,
+ message: `Besuche ${node.value} - Ergebnis: [${result.join(', ')}]`,
+ },
+ code,
+ lineHighlight: 5,
+ });
+
+ traverse(node.right, [...path, node.id]);
+ }
+
+ steps.push({
+ state: {
+ root,
+ visited: [],
+ current: null,
+ path: [],
+ comparing: null,
+ message: 'Starte Inorder-Traversierung (Links → Wurzel → Rechts)',
+ },
+ code,
+ lineHighlight: 1,
+ });
+
+ traverse(root, []);
+
+ steps.push({
+ state: {
+ root,
+ visited: [],
+ current: null,
+ path: [],
+ comparing: null,
+ message: `Inorder abgeschlossen: [${result.join(', ')}] - sortiert!`,
+ },
+ code,
+ lineHighlight: 8,
+ });
+
+ return steps;
+ }
+
+ /**
+ * Set steps
+ */
+ setGraphSteps(steps: GraphAlgorithmStep[]): void {
+ this.steps = steps;
+ this.currentStep = 0;
+ this.mode = 'graph';
+ this.render();
+ }
+
+ setTreeSteps(steps: TreeAlgorithmStep[]): void {
+ this.steps = steps;
+ this.currentStep = 0;
+ this.mode = 'tree';
+ this.render();
+ }
+
+ /**
+ * Render graph visualization
+ */
+ private renderGraph(state: GraphVisualizationState): string {
+ const width = 500;
+ const height = 400;
+
+ return `
+
+
+
+ ${state.queue.length > 0 ? `
Queue: [${state.queue.join(', ')}]
` : ''}
+ ${state.stack.length > 0 ? `
Stack: [${state.stack.join(', ')}]
` : ''}
+ ${
+ state.distances.size > 0
+ ? `
+
+ Distanzen:
+ ${Array.from(state.distances.entries())
+ .map(([k, v]) => `${k}:${v === Infinity ? '∞' : v}`)
+ .join(' | ')}
+
+ `
+ : ''
+ }
+
Kein Baum vorhanden
';
+ }
+
+ const positions = new Map();
+ // Starte in der Mitte mit mehr Platz für Knoten
+ this.calculateTreePositions(state.root, 220, 35, 0, positions);
+
+ const renderNode = (node: TreeNode | undefined): string => {
+ if (!node) {
+ return '';
+ }
+ const pos = positions.get(node.id);
+ if (!pos) {
+ return '';
+ }
+
+ let nodeClass = 'tree-node';
+ if (state.current === node.id) {
+ nodeClass += ' current';
+ }
+ if (state.comparing === node.id) {
+ nodeClass += ' comparing';
+ }
+ if (state.path.includes(node.id)) {
+ nodeClass += ' in-path';
+ }
+
+ let edges = '';
+ if (node.left) {
+ const leftPos = positions.get(node.left.id);
+ if (leftPos) {
+ edges += ``;
+ }
+ }
+ if (node.right) {
+ const rightPos = positions.get(node.right.id);
+ if (rightPos) {
+ edges += ``;
+ }
+ }
+
+ return `
+ ${edges}
+
+
+ ${node.value}
+
+ ${renderNode(node.left)}
+ ${renderNode(node.right)}
+ `;
+ };
+
+ return `
+
+ `;
+ }
+
+ /**
+ * Render visualization
+ */
+ render(): void {
+ const container = document.getElementById(this.containerId);
+ if (!container) {
+ return;
+ }
+
+ const step = this.steps[this.currentStep];
+ if (!step) {
+ return;
+ }
+
+ const visualization =
+ this.mode === 'graph'
+ ? this.renderGraph(step.state as GraphVisualizationState)
+ : this.renderTree(step.state as TreeVisualizationState);
+
+ container.innerHTML = `
+
+
+
+ ${visualization}
+
+
+
${step.state.message}
+
+
+
+
+
+
+
+
+
+
+
+ ${this.currentStep + 1} / ${this.steps.length}
+
+
+
+
+
+ ${this.speed}ms
+
+
+
+
+
+
+
${this.highlightCode(step.code, step.lineHighlight)}
+
+
+
Auf Wiedersehen! 👋
+ Auf Wiedersehen!
KeyboardWriter wird beendet...
diff --git a/src/pages/AlgorithmTrainingPage.ts b/src/pages/AlgorithmTrainingPage.ts
index 9dd85b5..975c023 100644
--- a/src/pages/AlgorithmTrainingPage.ts
+++ b/src/pages/AlgorithmTrainingPage.ts
@@ -1,916 +1,1068 @@
/**
* Algorithm Training Page
- * Specialized typing practice for algorithms and data structures
+ * Beautiful step-by-step algorithm visualizations
+ * Includes sorting, searching, graph, and tree algorithms
*/
-import { VirtualKeyboard } from '../components/keyboard/VirtualKeyboard';
-import { EventBus, Store } from '../core';
-import { ALGORITHM_CATEGORIES } from '../data/algorithmExercises';
-import { FRAMEWORK_CATEGORIES } from '../data/frameworkExercises';
-import { CodeSnippet } from '../data/programmingExercises';
-
-type CategoryType = 'algorithms' | 'frameworks';
-type Difficulty = 'beginner' | 'intermediate' | 'advanced';
-
-interface Category {
- id: string;
+import { AlgorithmVisualizer } from '../components/visualization/AlgorithmVisualizer';
+import { GraphVisualizer } from '../components/visualization/GraphVisualizer';
+
+type AlgorithmType =
+ | 'bubble-sort'
+ | 'quick-sort'
+ | 'insertion-sort'
+ | 'selection-sort'
+ | 'merge-sort'
+ | 'heap-sort'
+ | 'binary-search'
+ | 'linear-search'
+ | 'dijkstra'
+ | 'a-star'
+ | 'bellman-ford'
+ | 'bfs'
+ | 'dfs'
+ | 'topological-sort'
+ | 'bst-search'
+ | 'tree-inorder'
+ | 'tree-preorder'
+ | 'tree-postorder';
+
+type CategoryType = 'sorting' | 'search' | 'graph' | 'tree';
+
+interface AlgorithmInfo {
+ id: AlgorithmType;
name: string;
- icon: string;
- snippets: CodeSnippet[];
+ description: string;
+ complexity: string;
+ category: CategoryType;
+ realWorld?: string;
}
+const ALGORITHMS: AlgorithmInfo[] = [
+ // Sorting Algorithms
+ {
+ id: 'bubble-sort',
+ name: 'Bubble Sort',
+ description: 'Vergleicht benachbarte Elemente und tauscht sie wenn nötig',
+ complexity: 'O(n²)',
+ category: 'sorting',
+ realWorld: 'Lehrzwecke, kleine Datensätze',
+ },
+ {
+ id: 'selection-sort',
+ name: 'Selection Sort',
+ description: 'Findet das Minimum und setzt es an die richtige Position',
+ complexity: 'O(n²)',
+ category: 'sorting',
+ realWorld: 'Speicherplatz-kritische Anwendungen',
+ },
+ {
+ id: 'insertion-sort',
+ name: 'Insertion Sort',
+ description: 'Fügt jedes Element an der richtigen Stelle ein - gut für fast sortierte Daten',
+ complexity: 'O(n²)',
+ category: 'sorting',
+ realWorld: 'Echtzeit-Datenstromsortierung, kleine Arrays',
+ },
+ {
+ id: 'quick-sort',
+ name: 'Quick Sort',
+ description: 'Divide & Conquer mit Pivot - Standard in vielen Sprachen',
+ complexity: 'O(n log n)',
+ category: 'sorting',
+ realWorld: 'Arrays.sort() in Java, qsort() in C',
+ },
+ {
+ id: 'merge-sort',
+ name: 'Merge Sort',
+ description: 'Stabiler Sortieralgorithmus - teilt und verschmilzt',
+ complexity: 'O(n log n)',
+ category: 'sorting',
+ realWorld: 'Externe Sortierung, Linked Lists, Git Merge',
+ },
+ {
+ id: 'heap-sort',
+ name: 'Heap Sort',
+ description: 'Nutzt Heap-Datenstruktur - garantiert O(n log n)',
+ complexity: 'O(n log n)',
+ category: 'sorting',
+ realWorld: 'Priority Queues, Scheduling-Algorithmen',
+ },
+ // Search Algorithms
+ {
+ id: 'binary-search',
+ name: 'Binary Search',
+ description: 'Sucht effizient in sortierten Arrays durch Halbierung',
+ complexity: 'O(log n)',
+ category: 'search',
+ realWorld: 'Datenbank-Indizes, Git bisect, Telefonbuch',
+ },
+ {
+ id: 'linear-search',
+ name: 'Linear Search',
+ description: 'Durchsucht jedes Element sequentiell',
+ complexity: 'O(n)',
+ category: 'search',
+ realWorld: 'Unsortierte Daten, kleine Listen',
+ },
+ // Graph Algorithms
+ {
+ id: 'dijkstra',
+ name: 'Dijkstra',
+ description: 'Findet kürzeste Pfade in gewichteten Graphen',
+ complexity: 'O(V² / E log V)',
+ category: 'graph',
+ realWorld: 'Google Maps, GPS Navigation, Netzwerk-Routing',
+ },
+ {
+ id: 'a-star',
+ name: 'A* (A-Star)',
+ description: 'Heuristik-basiertes Pathfinding - schneller als Dijkstra',
+ complexity: 'O(E)',
+ category: 'graph',
+ realWorld: 'Google Maps, Videospiele (Starcraft, AoE), Robotik',
+ },
+ {
+ id: 'bellman-ford',
+ name: 'Bellman-Ford',
+ description: 'Kürzeste Pfade auch mit negativen Gewichten',
+ complexity: 'O(V × E)',
+ category: 'graph',
+ realWorld: 'RIP-Protokoll, Währungsarbitrage, Netzwerk-Routing',
+ },
+ {
+ id: 'bfs',
+ name: 'BFS (Breitensuche)',
+ description: 'Durchsucht Graph ebenenweise - findet kürzesten Pfad',
+ complexity: 'O(V + E)',
+ category: 'graph',
+ realWorld: 'Social Networks, Web Crawler, Schachcomputer',
+ },
+ {
+ id: 'dfs',
+ name: 'DFS (Tiefensuche)',
+ description: 'Durchsucht Graph in die Tiefe - gut für Zykluserkennung',
+ complexity: 'O(V + E)',
+ category: 'graph',
+ realWorld: 'Labyrinth-Lösung, Topologische Sortierung, Compiler',
+ },
+ {
+ id: 'topological-sort',
+ name: 'Topologische Sortierung',
+ description: 'Ordnet DAG-Knoten nach Abhängigkeiten',
+ complexity: 'O(V + E)',
+ category: 'graph',
+ realWorld: 'npm/yarn, Build-Systeme (Make, Gradle), Task-Scheduling',
+ },
+ // Tree Algorithms
+ {
+ id: 'bst-search',
+ name: 'BST Suche',
+ description: 'Suche im Binary Search Tree - links kleiner, rechts größer',
+ complexity: 'O(log n)',
+ category: 'tree',
+ realWorld: 'Datenbanken, Dateisysteme, Auto-Complete',
+ },
+ {
+ id: 'tree-inorder',
+ name: 'Inorder Traversierung',
+ description: 'Links → Wurzel → Rechts - gibt sortierte Reihenfolge',
+ complexity: 'O(n)',
+ category: 'tree',
+ realWorld: 'Sortierte Ausgabe von BST, Expression Trees',
+ },
+ {
+ id: 'tree-preorder',
+ name: 'Preorder Traversierung',
+ description: 'Wurzel → Links → Rechts - für Kopieren/Serialisierung',
+ complexity: 'O(n)',
+ category: 'tree',
+ realWorld: 'Tree-Kopie, Prefix-Notation, JSON-Serialisierung',
+ },
+ {
+ id: 'tree-postorder',
+ name: 'Postorder Traversierung',
+ description: 'Links → Rechts → Wurzel - für Löschen/Auswertung',
+ complexity: 'O(n)',
+ category: 'tree',
+ realWorld: 'Tree löschen, Postfix-Notation, du -sh (Verzeichnisgröße)',
+ },
+];
+
+const CATEGORY_INFO: Record = {
+ sorting: { title: 'Sortierung', icon: '' },
+ search: { title: 'Suche', icon: '' },
+ graph: { title: 'Graphen', icon: '' },
+ tree: { title: 'Bäume', icon: '' },
+};
+
/**
- * Algorithm Training Page Controller
+ * Algorithm Training Page
*/
export class AlgorithmTrainingPage {
- private keyboard: VirtualKeyboard | null = null;
- private currentCategoryType: CategoryType = 'algorithms';
- private currentCategoryIndex: number = 0;
- private currentSnippetIndex: number = 0;
- private currentDifficulty: Difficulty | 'all' = 'all';
- private currentInput: string = '';
- private isTyping: boolean = false;
- private startTime: number = 0;
- private errors: number = 0;
- private readonly boundKeydownHandler: ((e: KeyboardEvent) => void) | null = null;
+ private arrayVisualizer: AlgorithmVisualizer | null = null;
+ private graphVisualizer: GraphVisualizer | null = null;
+ private currentAlgorithm: AlgorithmType = 'bubble-sort';
+ private arraySize: number = 8;
+ private searchTarget: number = 0;
+ private bstSearchTarget: number = 40;
+ private currentArray: number[] = [];
constructor() {
- this.boundKeydownHandler = this.handleKeyboardInput.bind(this);
+ this.generateNewArray();
}
/**
- * Get current categories based on type
+ * Generate random array
*/
- private getCategories(): Category[] {
- return this.currentCategoryType === 'algorithms' ? ALGORITHM_CATEGORIES : FRAMEWORK_CATEGORIES;
+ private generateNewArray(): void {
+ this.currentArray = Array.from(
+ { length: this.arraySize },
+ () => Math.floor(Math.random() * 50) + 5
+ );
+ this.searchTarget = this.currentArray[Math.floor(Math.random() * this.currentArray.length)];
}
/**
- * Get current category
+ * Get current algorithm info
*/
- private getCurrentCategory(): Category | undefined {
- const categories = this.getCategories();
- return categories[this.currentCategoryIndex];
- }
-
- /**
- * Get filtered snippets
- */
- private getFilteredSnippets(): CodeSnippet[] {
- const category = this.getCurrentCategory();
- if (!category) {
- return [];
- }
-
- if (this.currentDifficulty === 'all') {
- return category.snippets;
- }
-
- return category.snippets.filter(s => s.difficulty === this.currentDifficulty);
- }
-
- /**
- * Get current snippet
- */
- private getCurrentSnippet(): CodeSnippet | undefined {
- const snippets = this.getFilteredSnippets();
- return snippets[this.currentSnippetIndex];
+ private getCurrentAlgorithmInfo(): AlgorithmInfo | undefined {
+ return ALGORITHMS.find(a => a.id === this.currentAlgorithm);
}
/**
* Render the page
*/
render(): string {
+ const currentAlgo = this.getCurrentAlgorithmInfo();
+
return `
-
- ${this.renderHeader()}
- ${this.renderTypeSelector()}
- ${this.renderCategorySelector()}
- ${this.renderDifficultyFilter()}
- ${this.renderCodeArea()}
- ${this.renderKeyboard()}
- ${this.renderStats()}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${this.renderControls()}
+
+
+
+
- `;
- }
-
- /**
- * Render header
- */
- private renderHeader(): string {
- return `
-
- `;
- }
-
- /**
- * Render type selector
- */
- private renderTypeSelector(): string {
- return `
-
-
-
-
- `;
- }
- /**
- * Render category selector
- */
- private renderCategorySelector(): string {
- const categories = this.getCategories();
+ .algo-vis-speed {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ justify-content: center;
+ font-size: var(--font-size-sm);
+ color: var(--text-secondary);
+ }
- return `
-
- ${categories
- .map(
- (cat, index) => `
-
- ${cat.icon}
- ${cat.name}
- ${cat.snippets.length} Übungen
-
- `
- )
- .join('')}
-
- `;
- }
+ .algo-vis-speed input[type="range"] {
+ width: 150px;
+ cursor: pointer;
+ }
- /**
- * Render difficulty filter
- */
- private renderDifficultyFilter(): string {
- const difficulties: { id: Difficulty | 'all'; label: string }[] = [
- { id: 'all', label: 'Alle' },
- { id: 'beginner', label: '🟢 Anfänger' },
- { id: 'intermediate', label: '🟡 Mittel' },
- { id: 'advanced', label: '🔴 Fortgeschritten' },
- ];
+ .algo-vis-speed span {
+ font-family: var(--font-mono);
+ min-width: 60px;
+ }
- return `
-
- ${difficulties
- .map(
- d => `
-
- `
- )
- .join('')}
-
+ @media (max-width: 900px) {
+ .algo-layout {
+ grid-template-columns: 1fr;
+ }
+
+ .algo-sidebar {
+ position: static;
+ max-height: none;
+ }
+
+ .algo-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ }
+
+ .algo-controls-card {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .algo-current-array {
+ margin-left: 0;
+ justify-content: center;
+ }
+ }
+
`;
}
/**
- * Render code area
+ * Render algorithm-specific controls
*/
- private renderCodeArea(): string {
- const snippet = this.getCurrentSnippet();
- const snippets = this.getFilteredSnippets();
+ private renderControls(): string {
+ const algo = this.getCurrentAlgorithmInfo();
- if (!snippet) {
+ if (algo?.category === 'sorting') {
return `
-
-
-
Keine Übungen in dieser Kategorie gefunden.
-
Wähle eine andere Kategorie oder entferne den Schwierigkeitsfilter.
+
+
+
+
+ ${this.arraySize}
+
+
+
+ Array:
+ [${this.currentArray.join(', ')}]
`;
}
- const targetChars = snippet.code.split('');
- const inputChars = this.currentInput.split('');
-
- return `
-
-