# Sortier-Algorithmen Visualisierung

Interaktive Visualisierung von 20 Sortieralgorithmen mit Schritt-für-Schritt-Darstellung, Speicher-Ansicht und Keyboard-Steuerung.

**Datei:** `sorting_visualization.html` — Single-File, keine Abhängigkeiten, läuft direkt im Browser.

[Online ansehen](sorting_visualization.html) · [Tests bestehen: 198/198](test_algorithms.js)

---

## Algorithmus-Übersicht

| Kategorie | Algorithmen |
|---|---|
| O(n²) | Bubble Sort, Selection Sort, Insertion Sort, Cocktail Shaker Sort |
| O(n log n) | Merge Sort, Heap Sort, Quick Sort, 3-Way Quick Sort, Dual-Pivot Quick Sort, Introsort, Shell Sort, Tree Sort, Timsort |
| Linear | Counting Sort, Radix Sort, Bucket Sort |
| Spezial | Pancake Sort, Cycle Sort, Bogo Sort, Fisher-Yates Shuffle |

---

## Features

- **20 Algorithmen** — vom klassischen Bubble Sort bis zum Fisher-Yates Shuffle
- **Speicher-Ansicht** — zeigt Hilfsdatenstrukturen bei Merge Sort, Heap Sort, Timsort, Counting/Radix/Bucket Sort
- **5 Datensatz-Presets** — Zufällig, Sortiert, Umgekehrt, Fast sortiert, Duplikate
- **Schritt-Navigation** — vor, zurück, Play/Pause
- **Keyboard-Steuerung** — alle Funktionen auch ohne Maus bedienbar
- **URL-State** — Auswahl bleibt beim Neuladen erhalten
- **Mobile optimiert** — Touch-Support, zoom-resistent, responsive
- **Hell/Dunkel-Modus** — per Button oder `T`
- **Barrierefreiheit** — ARIA-Labels, Screen-Reader-Ankündigungen

---

## Schnellstart

1. `sorting_visualization.html` im Browser öffnen
2. Algorithmus wählen → Start mit `Space`
3. Oder: Play-Button drücken

---

## Tastaturkürzel

| Taste | Funktion |
|---|---|
| `Space` / `K` | Play / Pause |
| `→` / `L` | Ein Schritt vor |
| `←` / `J` | Ein Schritt zurück |
| `R` | Reset |
| `T` | Theme wechseln |
| `S` | Mischen (Fisher-Yates) |

---

## Tests

```bash
node test_algorithms.js          # Kurzbericht
node test_algorithms.js --verbose # Detaillierte Ausgabe
```

### Was wird getestet?

Das Testskript führt **automatisierte Korrektheitstests** für alle Sortieralgorithmen durch:

**1. Haupt-Tests (2 Größen × 5 Presets × 19 Sortier-Algorithmen = 190)**
Für jeden Algorithmus (außer Shuffle) wird geprüft:
- Der letzte Step hat `type === 'done'`
- Das Array ist vollständig sortiert
- Die Array-Länge bleibt erhalten

**2. Shuffle-Tests (10 Tests)**
Shuffle ist speziell — prüft stattdessen:
- Länge bleibt erhalten
- Alle Original-Werte sind noch vorhanden

**3. Edge Cases (2 Tests)**
- Leeres Array → Bubble Sort
- Single-Element `[42]` → Bubble Sort

**4. Performance-Test (6 Algorithmen × 100 Elemente)**
- Sortiert das Array korrekt in akzeptabler Zeit

**Gesamt: 198 Tests**

### Technische Details

Das Skript:
1. **Extrahiert** den JavaScript-Code aus `sorting_visualization.html`
2. **Führt** ihn in einer isolierten Node.js-VM aus (mit gemockten DOM-Elementen)
3. **Ruft** `buildSteps(algo)` auf — die Funktion die alle Steps für die Animation erzeugt
4. **Verifiziert** dass der letzte Step das Array korrekt sortiert hat

Die `buildSteps`-Funktion ist rein funktional und gibt nur Step-Objekte zurück — keine DOM-Manipulation. Das macht sie unit-testbar.

---

## Dateien

```
sorting_visualization.html  # Hauptprogramm (Single-File)
BEDIENUNGSANLEITUNG.md      # Bedienungsanlietung
test_algorithms.js          # Node.js Test-Suite
.gitignore                  # Git-Konfiguration
README.md                   # Dieses Dokument
```

---

## Entwicklung

- **Kein Build-Schritt** — pure HTML/JS/CSS
- **Keine externen Abhängigkeiten** — läuft offline
- **Externe CDN** (optional, für Icons): Lucide Icons, Tailwind CSS
- **Version** — wird automatisch via `pre-commit`-Hook erhöht

---

## Autor

© 2026 Dieter Schlüter <dieter(dot)schlueter(at)linix(dot)de>