WolfsWorld - Interaktive KI-Lernplattform

Eine umfassende Lernumgebung für Künstliche Intelligenz mit Fokus auf Spieltheorie, Suchalgorithmen und strategisches Denken.

🎯 Überblick

WolfsWorld bietet eine Sammlung klassischer Strategiespiele und KI-Algorithmen, die es Schülern und Studenten ermöglicht, die Konzepte der Künstlichen Intelligenz praktisch zu erleben und zu verstehen.

Enthaltene Spiele

  • Tic-Tac-Toe Varianten

    • Classic 3x3
    • 3D Tic-Tac-Toe (4x4x4)
    • Ultimate Tic-Tac-Toe (Meta-Board)
  • Connect 4

    • Klassisches 2D Vier Gewinnt (7x6)
    • 3D Connect 4 (4x4x4)
  • Puzzles

    • Springer-Problem (Knight's Tour)
    • RotateBox (Schiebepuzzle)
    • Nim-Spiel

🤖 KI-Komponenten

Agenten

  • Random Agent: Zufällige Zugauswahl (Baseline)
  • Rule-Based Agent: Regelbasierte Entscheidungsfindung mit Entscheidungsbäumen
  • Minimax Agent: Optimaler Spieler mit Alpha-Beta-Pruning

Algorithmen

  • Minimax mit Alpha-Beta-Pruning: Optimale Spielstrategie
  • Heuristiken: Spielspezifische Bewertungsfunktionen
  • Suchalgorithmen: BFS und DFS für Zustandsräume
  • Regelsysteme: Composite Pattern für komplexe Entscheidungslogik

🎮 Playground-Module

Arena

Turnierplattform, auf der verschiedene KI-Agenten gegeneinander antreten können. Unterstützt automatische Turniere mit konfigurierbaren Spielen und Agenten.

Features:

  • Tic-Tac-Toe Varianten (Regular, 3D, Ultimate)
  • Connect 4 (Standard & 3D)
  • Statistik-Tracking (Siege, Niederlagen, Remis)
  • Agent-Profile mit verschiedenen Schwierigkeitsgraden
  • Live-Visualisierung der Spiele

Minimax-Visualizer

Interaktive Visualisierung des Minimax-Algorithmus mit Alpha-Beta-Pruning.

Features:

  • Schritt-für-Schritt Durchlauf
  • Baum-Visualisierung mit Canvas
  • Bewertungs-Anzeige für jeden Knoten
  • Alpha-Beta Cut-Off Markierungen

Rules-Lab

Experimentierplattform für regelbasierte KI-Systeme.

Features:

  • Flowchart-Visualisierung von Entscheidungsbäumen
  • Interaktives An-/Abschalten von Regeln
  • Live-Testing gegen Rule-Based Agents
  • Vergleich verschiedener Strategien (Simple vs. Complex)

RotateBox-Visualizer

Visualisierung von Suchalgorithmen am Beispiel eines Schiebepuzzles.

Features:

  • BFS vs. DFS Vergleich
  • Schrittweise Animation
  • Lösungspfad-Anzeige
  • Performance-Metriken

Perceptron Playground

Interaktive Lernumgebung für das Perceptron – das einfachste neuronale Netz.

Features:

  • 4 vordefinierte Datensätze (Schwimmfähig, Krabben, Haustier) + generischer Gaussian-Generator
  • Phasenbasiertes Schritt-für-Schritt-Training (Punkt wählen → Δw₁ → Δw₂ → Gewichte anwenden → Visualisierung)
  • Live-Architekturdiagramm (x₁ → Σ → θ(x) → ŷ) mit animierten Gewichtsübergängen
  • Decision Boundary im Scatter-Plot mit Gleichungsanzeige
  • Fehler-pro-Epoche Chart
  • Speed-Slider für Training-Geschwindigkeit
  • Responsive 2×2 Grid-Layout

📁 Projektstruktur

WolfsWorld/
├── js/                          # JavaScript Quellcode
│   ├── core/                    # Kernkomponenten
│   │   ├── agent.js            # Abstrakte Agent-Basisklasse
│   │   ├── game-state.js       # GameState Interface
│   │   ├── game-adapter.js     # Spiel-Adapter
│   │   └── base-game-controller.js
│   ├── ai/                      # KI-Algorithmen
│   │   ├── agents/             # Agent-Implementierungen
│   │   │   ├── random-agent.js
│   │   │   ├── rule-based-agent.js
│   │   │   └── minimax-agent.js
│   │   ├── neural/             # Neuronale Netze
│   │   │   ├── core/           # Engine (Neuron, Layer, Network)
│   │   │   │   ├── neuron.js
│   │   │   │   ├── layer.js
│   │   │   │   └── network.js
│   │   │   ├── datasets/       # Datensätze
│   │   │   │   └── perceptron-datasets.js
│   │   │   ├── training/       # Aktivierungs-/Verlustfunktionen
│   │   │   │   ├── activation-functions.js
│   │   │   │   └── loss-functions.js
│   │   │   ├── worker/         # Web Worker für Training
│   │   │   │   └── nn-training-worker.js
│   │   │   ├── nn-orchestrator.js
│   │   │   └── perceptron-controller.js
│   │   ├── heuristics/         # Heuristiken
│   │   │   ├── base.js
│   │   │   ├── ttt.js
│   │   │   └── connect4.js
│   │   ├── rules/              # Regelsysteme
│   │   │   ├── rule-structure.js
│   │   │   ├── ttt-rules.js
│   │   │   └── connect4-rules.js
│   │   ├── minimax.js          # Minimax Engine
│   │   ├── game-adapter.js     # Arena Game Adapter
│   │   ├── agent-profiles.js   # Vorkonfigurierte Profile
│   │   ├── algorithm-runner.js # Schrittweise Ausführung
│   │   └── search-algorithms.js # BFS/DFS
│   ├── games/                   # Spielimplementierungen
│   │   ├── tictactoe/
│   │   ├── connect4/
│   │   ├── knights-tour/
│   │   └── rotatebox/
│   ├── viz/                     # Visualisierungen
│   │   ├── neural/             # Neuronale-Netz-Visualisierung
│   │   │   └── nn-visualizer.js
│   │   ├── tree-engine.js
│   │   ├── flowchart-visualizer.js
│   │   ├── rule-visualizer.js
│   │   ├── rule-tree-adapter.js
│   │   └── minimax-adapter.js
│   ├── utils/                   # Hilfsfunktionen
│   │   └── gaussian-generator.js
│   └── templates/               # Vorlagen für Schülerprojekte
├── html/games/                       # Game HTML-Seiten
├── html/playground/                  # Experimentierplattformen
├── css/                         # Stylesheets
├── docs/                        # JSDoc-Dokumentation (generiert)
└── learning/                    # Lernpfade & Tutorials

🚀 Schnellstart

Voraussetzungen

  • Moderner Webbrowser (Chrome, Firefox, Safari, Edge)
  • Optional: Node.js für JSDoc-Dokumentation

Installation

  1. Repository klonen oder herunterladen
  2. html/index.html im Browser öffnen

Dokumentation generieren

npm install
npm run doc

Die Dokumentation wird in docs/ generiert und kann mit npm run serve-doc geöffnet werden.

🧩 Architektur

GameState Interface

Alle Spiele implementieren ein einheitliches Interface:

{
    getAllValidMoves() → Array      // Alle gültigen Züge
    makeMove(move) → GameState      // Führt Zug aus, gibt neuen Zustand zurück
    clone() → GameState             // Tiefe Kopie
    getStateKey() → String          // Hash für Duplikatserkennung
    isTerminal() → Boolean          // Ist Endzustand erreicht?
    evaluate(player) → Number       // Bewertung (optional)
}

Agent-Architektur

Alle Agenten erben von der abstrakten Agent-Klasse:

class Agent {
    selectMove(gameState) → move    // Wählt optimalen Zug
}

Minimax-Engine

Konfigurierbarer Minimax mit:

  • Alpha-Beta-Pruning (optimiert)
  • Variable Suchtiefe
  • Austauschbare Heuristiken
  • Optional: Trace-Capture für Visualisierung

🎓 Didaktischer Ansatz

Für Schüler

  • Visuelle Lernhilfen: Alle Algorithmen sind visuell nachvollziehbar
  • Schrittweise Execution: Play/Pause/Step-Funktionen
  • Interaktive Experimente: Parameter anpassen und Ergebnisse sehen
  • Templates: Vorgefertigte Vorlagen für eigene Spiele

Für Lehrer

  • Modularer Aufbau: Komponenten können einzeln gelehrt werden
  • Dokumentation: Vollständige JSDoc-Dokumentation aller Komponenten
  • Erweiterbar: Neue Spiele/Agenten einfach hinzufügbar
  • Performance-Metriken: Benchmarking-Tools integriert

🔧 Technische Details

Minimax-Optimierungen

  • Alpha-Beta-Pruning: Reduziert Suchraum drastisch
  • Move Ordering: Bessere Züge zuerst für mehr Cut-Offs
  • Tiefenbegrenzte Suche: Mit Heuristiken für Nicht-Terminal-Knoten
  • Transposition Tables: (Geplant) für Zustandscaching

Heuristiken

Jedes Spiel hat spezialisierte Bewertungsfunktionen:

  • TTT: Zentrum-Bonus, Linien-Bewertung, Gewinnwahrscheinlichkeiten
  • 3D TTT: Layer-Control, 3D-Linien (49 Gewinnlinien)
  • Ultimate TTT: Makro-Board-Bewertung, lokale vs. globale Strategie
  • Connect 4: Zentrum-Kontrolle, offene Linien, Bedrohungserkennung

Performance

  • Minimax mit Alpha-Beta ist optimiert für:
    • TTT Regular: Depth 9 (perfektes Spiel)
    • TTT 3D: Depth 3-4 (mit Heuristiken)
    • Ultimate TTT: Depth 2-3 (komplexer Zustandsraum)
    • Connect 4: Depth 5-7 (mit Heuristiken)

📚 Verwendete Konzepte

  • Spieltheorie: Zero-Sum Games, Minimax-Theorem
  • Suchalgorithmen: BFS, DFS, Best-First-Search
  • Neuronale Netze: Perceptron, Delta-Regel, Aktivierungsfunktionen
  • Design Patterns: Composite (Regeln), Strategy (Agenten), Adapter (Games)
  • Heuristiken: Evaluation Functions, Position Scoring
  • Algorithmusvisualisierung: SVG, Canvas API, DOM-Manipulation

📐 Architektur-Dokumentation

  • NEURAL_NET_ARCHITECTURE.md — Vollständige Architektur der Neuronale-Netz-Engine (Vanilla-JS-Entscheidung, Worker-Pipeline, SVG/Canvas-Grenzen, Modul-Design)

🤝 Beiträge

Dieses Projekt ist für Bildungszwecke konzipiert. Erweiterungen und Verbesserungen sind willkommen!

Ideen für Erweiterungen

  • Weitere Spiele (Schach, Dame, Mühle)
  • Monte-Carlo Tree Search (MCTS)
  • Neuronale Netze für Heuristiken
  • Multiplayer-Modus über WebSockets
  • Reinforcement Learning Playground

📖 Dokumentation

Die vollständige API-Dokumentation wird mit JSDoc generiert:

npm run doc        # Dokumentation generieren
npm run serve-doc  # Dokumentation im Browser öffnen

Die Dokumentation enthält:

  • Detaillierte Klassenbeschreibungen
  • Parameter und Rückgabetypen
  • Beispielcode
  • Architekturdiagramme

📄 Lizenz

Dieses Projekt ist für Bildungszwecke frei verfügbar.

✨ Autoren

Entwickelt als Lernplattform für KI-Konzepte im Schulunterricht.


Version: 1.0.0
Letzte Aktualisierung: Januar 2026

ai/agents/agent-profiles.js

Description:
  • Vorkonfigurierte Agent-Profile für die Arena. Definiert verschiedene Konfigurationen für MiniMax, RuleBased und Random Agenten.

Source:

Vorkonfigurierte Agent-Profile für die Arena. Definiert verschiedene Konfigurationen für MiniMax, RuleBased und Random Agenten.

ai/agents/minimax-agent.js

Description:
  • Agent für Minimax-Algorithmus mit Alpha-Beta Pruning. Berechnet optimale Züge durch baumartige Spielzustandssimulation.

Source:

Agent für Minimax-Algorithmus mit Alpha-Beta Pruning. Berechnet optimale Züge durch baumartige Spielzustandssimulation.

ai/agents/random-agent.js

Description:
  • Agent für zufällige Zugwahl (Random Agent). Wählt aus allen gültigen Zügen einen zufällig aus.

Source:

Agent für zufällige Zugwahl (Random Agent). Wählt aus allen gültigen Zügen einen zufällig aus.

ai/agents/rule-based-agent.js

Description:
  • Agent für regelbasierte KI-Entscheidungen. Nutzt Entscheidungsbäume (Decision Trees) zur Auswahl von Zügen.

Source:

Agent für regelbasierte KI-Entscheidungen. Nutzt Entscheidungsbäume (Decision Trees) zur Auswahl von Zügen.

ai/game-adapter.js

Description:
  • Adapter für verschiedene Spiele, damit sie mit der Arena kompatibel sind. Die Arena braucht ein einheitliches Interface für verschiedene Spiele.

Source:

Adapter für verschiedene Spiele, damit sie mit der Arena kompatibel sind. Die Arena braucht ein einheitliches Interface für verschiedene Spiele.

ai/heuristics/adapter/heuristic-rule-adapter.js

ai/heuristics/base.js

Description:
  • Abstrakte Basisklasse für Heuristiken. Definiert die gemeinsame Schnittstelle für alle Heuristik-Evaluatoren.

Source:
Author:
  • Alexander Wolf

Abstrakte Basisklasse für Heuristiken. Definiert die gemeinsame Schnittstelle für alle Heuristik-Evaluatoren.

ai/heuristics/config/connect4-heuristics-config.js

Description:
  • Bewertungskonfigurationen für Connect4-Heuristiken (regular, 3d). Definiert je drei Profile pro Variante:

    • v1_baseline: Sieg/Verlust + einfache Fensterbewertung
    • v2_positional: Zentrumskontrolle, Spaltenqualität, Verbindungsbewertung
    • v3_aggressive: Druckmaximierung, Doppel-Drohungen, Mobilitätseinschränkung

    Alle Werte sind Schema-validiert via heuristic-config-schema.js.

Source:
Author:
  • Alexander Wolf

Bewertungskonfigurationen für Connect4-Heuristiken (regular, 3d). Definiert je drei Profile pro Variante:

  • v1_baseline: Sieg/Verlust + einfache Fensterbewertung
  • v2_positional: Zentrumskontrolle, Spaltenqualität, Verbindungsbewertung
  • v3_aggressive: Druckmaximierung, Doppel-Drohungen, Mobilitätseinschränkung

Alle Werte sind Schema-validiert via heuristic-config-schema.js.

ai/heuristics/config/heuristic-config-schema.js

Description:
  • Schema-Definition und Validierung für Heuristik-Konfigurationen. Unterstützt Profile (v1_baseline, v2_positional, v3_aggressive) pro Game-Variante.

Source:
Author:
  • Alexander Wolf

Schema-Definition und Validierung für Heuristik-Konfigurationen. Unterstützt Profile (v1_baseline, v2_positional, v3_aggressive) pro Game-Variante.

ai/heuristics/config/ttt-heuristics-config.js

Description:
  • Bewertungskonfigurationen für TTT-Heuristiken (regular, 3d, ultimate). Definiert je drei Profile pro Variante:

    • v1_baseline: Sieg/Verlust-Erkennung, minimale Linienbewertung
    • v2_positional: Positionelle Kontrolle (Zentrum, Ecken, strategische Felder)
    • v3_aggressive: Gabel-Erkennung, Druckmaximierung, Mobilitätseinschränkung

    Alle Werte sind Schema-validiert via heuristic-config-schema.js.

Source:
Author:
  • Alexander Wolf

Bewertungskonfigurationen für TTT-Heuristiken (regular, 3d, ultimate). Definiert je drei Profile pro Variante:

  • v1_baseline: Sieg/Verlust-Erkennung, minimale Linienbewertung
  • v2_positional: Positionelle Kontrolle (Zentrum, Ecken, strategische Felder)
  • v3_aggressive: Gabel-Erkennung, Druckmaximierung, Mobilitätseinschränkung

Alle Werte sind Schema-validiert via heuristic-config-schema.js.

ai/heuristics/evaluators/connect4-heuristic.js

Description:
  • Connect4-Heuristik-Evaluator für regular und 3d. Unterstützt drei Bewertungsprofile pro Variante: v1_baseline — Standard-Fensterbewertung + Center-Bias v2_positional — Starke Zentrumskontrolle, Höhenstrafe, Verbindungsbonus v3_aggressive — Drohungsmaximierung, Setup-Scoring, offensiver Bias

Source:
Author:
  • Alexander Wolf

Connect4-Heuristik-Evaluator für regular und 3d. Unterstützt drei Bewertungsprofile pro Variante: v1_baseline — Standard-Fensterbewertung + Center-Bias v2_positional — Starke Zentrumskontrolle, Höhenstrafe, Verbindungsbonus v3_aggressive — Drohungsmaximierung, Setup-Scoring, offensiver Bias

ai/heuristics/evaluators/knights-tour-heuristic.js

ai/heuristics/evaluators/ttt-heuristic.js

Description:
  • TTT-Heuristik-Evaluator für regular, 3d und ultimate. Unterstützt drei Bewertungsprofile pro Variante: v1_baseline — Lineare Zählung (Sieg/Verlust + Linien) v2_positional — Positionswerte (Zentrum, Ecken, Raumkontrolle) v3_aggressive — Druckmaximierung (Forks, Drohungen, Mobilitätseinschränkung)

Source:
Author:
  • Alexander Wolf

TTT-Heuristik-Evaluator für regular, 3d und ultimate. Unterstützt drei Bewertungsprofile pro Variante: v1_baseline — Lineare Zählung (Sieg/Verlust + Linien) v2_positional — Positionswerte (Zentrum, Ecken, Raumkontrolle) v3_aggressive — Druckmaximierung (Forks, Drohungen, Mobilitätseinschränkung)

ai/heuristics/registry.js

Description:
  • Zentrale Registry für Heuristiken. Kapselt Registrierung und Lookup von Heuristik-Instanzen.

Source:
Author:
  • Alexander Wolf

Zentrale Registry für Heuristiken. Kapselt Registrierung und Lookup von Heuristik-Instanzen.

ai/neural/core/layer.js

Description:
  • Layer — Eine Schicht von Neuronen im Neuronalen Netz.

    Ein Layer verwaltet eine Gruppe von Neuronen, führt den kollektiven Forward-Pass durch und stellt aggregierte Snapshots bereit.

    Der Layer kennt seine Aktivierungsfunktion und wendet sie einheitlich auf alle Neuronen an. Für Softmax-Outputs wird die Aktivierung nach dem Forward-Pass auf Vektorebene berechnet.

    Architektur: Neuron → Layer → Network (hierarchisch)

Source:
Author:
  • Alexander Wolf
See:
  • docs/architecture/NEURAL_NET_ARCHITECTURE.md

Layer — Eine Schicht von Neuronen im Neuronalen Netz.

Ein Layer verwaltet eine Gruppe von Neuronen, führt den kollektiven Forward-Pass durch und stellt aggregierte Snapshots bereit.

Der Layer kennt seine Aktivierungsfunktion und wendet sie einheitlich auf alle Neuronen an. Für Softmax-Outputs wird die Aktivierung nach dem Forward-Pass auf Vektorebene berechnet.

Architektur: Neuron → Layer → Network (hierarchisch)

ai/neural/core/network.js

Description:
  • NeuralNetwork — Zentrales Netzwerk, das Layers verwaltet.

    Verantwortlich für:

    • Aufbau der Netzwerk-Topologie (Neuron → Layer → Network)
    • Forward-Pass durch alle Schichten
    • Backward-Pass (Backpropagation) mit Gradient-Descent
    • Snapshot-Erstellung für Live-Visualisierung über IframeBridge
    • Manuelle Manipulation von Gewichten/Biases durch den Nutzer

    KEINE DOM-Bezüge! Diese Klasse läuft sowohl im Main-Thread als auch im Web Worker. Die Kommunikation mit der View erfolgt ausschließlich über Snapshots, die der NNOrchestrator via IframeBridge weiterleitet.

Source:
Author:
  • Alexander Wolf
See:
  • docs/architecture/NEURAL_NET_ARCHITECTURE.md

NeuralNetwork — Zentrales Netzwerk, das Layers verwaltet.

Verantwortlich für:

  • Aufbau der Netzwerk-Topologie (Neuron → Layer → Network)
  • Forward-Pass durch alle Schichten
  • Backward-Pass (Backpropagation) mit Gradient-Descent
  • Snapshot-Erstellung für Live-Visualisierung über IframeBridge
  • Manuelle Manipulation von Gewichten/Biases durch den Nutzer

KEINE DOM-Bezüge! Diese Klasse läuft sowohl im Main-Thread als auch im Web Worker. Die Kommunikation mit der View erfolgt ausschließlich über Snapshots, die der NNOrchestrator via IframeBridge weiterleitet.

ai/neural/core/neuron.js

Description:
  • Neuron — Einzelne Recheneinheit des Neuronalen Netzes.

    Ein Neuron hält seine Gewichte, seinen Bias und den letzten Aktivierungswert. Alle numerischen Daten werden in Float64Array gespeichert (V8-optimiert).

    Das Neuron bietet Hook-Callbacks, über die Gewichte und Aktivierungen von außen ausgelesen werden können (für IframeBridge-Visualisierung).

    Architektur: Neuron → Layer → Network (hierarchisch)

Source:
Author:
  • Alexander Wolf
See:
  • docs/architecture/NEURAL_NET_ARCHITECTURE.md

Neuron — Einzelne Recheneinheit des Neuronalen Netzes.

Ein Neuron hält seine Gewichte, seinen Bias und den letzten Aktivierungswert. Alle numerischen Daten werden in Float64Array gespeichert (V8-optimiert).

Das Neuron bietet Hook-Callbacks, über die Gewichte und Aktivierungen von außen ausgelesen werden können (für IframeBridge-Visualisierung).

Architektur: Neuron → Layer → Network (hierarchisch)

ai/neural/nn-orchestrator.js

Description:
  • NNOrchestrator — Main-Thread Orchestrator für das Neuronale Netz.

    Verantwortlich für:

    • Erstellung und Verwaltung des Web Workers
    • Throttling der Worker-Snapshots auf UI-Framerate (60fps)
    • Weiterleitung der Snapshots an die IframeBridge (NN:SNAPSHOT etc.)
    • Empfang von Nutzer-Interaktionen (Gewichts-Änderungen, Hyperparameter)
    • Entkopplung von High-Speed-Training und Low-Speed-Visualisierung

    Architektur: Worker ──(postMessage)──▶ NNOrchestrator ──(IframeBridge)──▶ View (iframe) View ──(IframeBridge)──▶ NNOrchestrator ──(postMessage)──▶ Worker

    Convention: Keine direkten DOM-Aufrufe! Keine console.log!

Source:
Author:
  • Alexander Wolf
See:
  • docs/architecture/NEURAL_NET_ARCHITECTURE.md
  • docs/conventions/IFRAME_BRIDGE_PROTOCOL.md

NNOrchestrator — Main-Thread Orchestrator für das Neuronale Netz.

Verantwortlich für:

  • Erstellung und Verwaltung des Web Workers
  • Throttling der Worker-Snapshots auf UI-Framerate (60fps)
  • Weiterleitung der Snapshots an die IframeBridge (NN:SNAPSHOT etc.)
  • Empfang von Nutzer-Interaktionen (Gewichts-Änderungen, Hyperparameter)
  • Entkopplung von High-Speed-Training und Low-Speed-Visualisierung

Architektur: Worker ──(postMessage)──▶ NNOrchestrator ──(IframeBridge)──▶ View (iframe) View ──(IframeBridge)──▶ NNOrchestrator ──(postMessage)──▶ Worker

Convention: Keine direkten DOM-Aufrufe! Keine console.log!

ai/neural/training/activation-functions.js

Description:
  • Aktivierungsfunktionen für das Neuronale Netz.

    Jede Funktion ist als Objekt mit fn (Vorwärts) und derivative (Ableitung) implementiert, um im Backpropagation-Schritt direkt die Ableitung berechnen zu können.

    Unterstützte Funktionen: Sigmoid, ReLU, Tanh, Linear, Softmax. Softmax wird separat behandelt, da sie über den gesamten Vektor operiert.

Source:
Author:
  • Alexander Wolf
See:
  • docs/architecture/NEURAL_NET_ARCHITECTURE.md

Aktivierungsfunktionen für das Neuronale Netz.

Jede Funktion ist als Objekt mit fn (Vorwärts) und derivative (Ableitung) implementiert, um im Backpropagation-Schritt direkt die Ableitung berechnen zu können.

Unterstützte Funktionen: Sigmoid, ReLU, Tanh, Linear, Softmax. Softmax wird separat behandelt, da sie über den gesamten Vektor operiert.

ai/neural/training/loss-functions.js

Description:
  • Verlustfunktionen (Loss Functions) für das Training.

    Jede Loss-Funktion ist als Objekt mit compute (Vorwärts) und derivative implementiert, um im Backpropagation-Schritt die Gradienten zu berechnen.

    Unterstützt: MSE (Mean Squared Error) und Cross-Entropy.

Source:
Author:
  • Alexander Wolf
See:
  • docs/architecture/NEURAL_NET_ARCHITECTURE.md

Verlustfunktionen (Loss Functions) für das Training.

Jede Loss-Funktion ist als Objekt mit compute (Vorwärts) und derivative implementiert, um im Backpropagation-Schritt die Gradienten zu berechnen.

Unterstützt: MSE (Mean Squared Error) und Cross-Entropy.

ai/neural/worker/nn-training-worker.js

Description:
  • Web Worker für das Neuronale Netz Training.

    Dieser Worker läuft in einem separaten Thread und führt das Training (Forward + Backward Pass) durch, ohne den Main-Thread zu blockieren.

    Kommunikation:

    • Main → Worker: Befehle (START_TRAINING, STOP, SET_WEIGHT, etc.)
    • Worker → Main: Snapshots (SNAPSHOT, TRAINING_COMPLETE, ERROR)

    Der Worker sendet Snapshots adaptiv (~60fps-Target), damit der NNOrchestrator im Main-Thread die IframeBridge nicht überlastet.

    WICHTIG: Dieser Worker importiert die Core-Dateien via importScripts(). Er hat KEINEN Zugriff auf DebugConfig (kein window-Objekt).

Source:
Author:
  • Alexander Wolf
See:
  • docs/architecture/NEURAL_NET_ARCHITECTURE.md

Web Worker für das Neuronale Netz Training.

Dieser Worker läuft in einem separaten Thread und führt das Training (Forward + Backward Pass) durch, ohne den Main-Thread zu blockieren.

Kommunikation:

  • Main → Worker: Befehle (START_TRAINING, STOP, SET_WEIGHT, etc.)
  • Worker → Main: Snapshots (SNAPSHOT, TRAINING_COMPLETE, ERROR)

Der Worker sendet Snapshots adaptiv (~60fps-Target), damit der NNOrchestrator im Main-Thread die IframeBridge nicht überlastet.

WICHTIG: Dieser Worker importiert die Core-Dateien via importScripts(). Er hat KEINEN Zugriff auf DebugConfig (kein window-Objekt).

ai/rules/connect4-rules.js

Description:
  • Regel-Definitionen für Connect 4 (Standard und 3D). Implementiert "elementary" und "advanced" Strategiebäume.

Source:
Author:
  • Alexander Wolf

Regel-Definitionen für Connect 4 (Standard und 3D). Implementiert "elementary" und "advanced" Strategiebäume.

ai/rules/rule-structure.js

Description:
  • Datenstrukturen für das Regelsystem. Definiert die Bausteine für den Entscheidungsbaum (Composite Pattern).

Source:
Author:
  • Alexander Wolf

Datenstrukturen für das Regelsystem. Definiert die Bausteine für den Entscheidungsbaum (Composite Pattern).

ai/rules/ttt-rules.js

Description:
  • Bibliothek von KI-Regeln für Tic-Tac-Toe. Enthält komplexe Logik für 3D und Ultimate sowie Strategie-Templates.

Source:
Author:
  • Alexander Wolf

Bibliothek von KI-Regeln für Tic-Tac-Toe. Enthält komplexe Logik für 3D und Ultimate sowie Strategie-Templates.

config/constants.js

Description:
  • ZENTRALE Konstanten-Definitionen Alle Dateien verwenden diese Konstanten von hier. Keine Duplikate mehr in verschiedenen Dateien!

    Struktur:

    • GAME_CONSTANTS: Spieler, Status, Felder
    • AI_CONSTANTS: Suchtiefen, Algorithmus-Parameter
    • UI_CONSTANTS: Farben, Dimensionen
Source:

ZENTRALE Konstanten-Definitionen Alle Dateien verwenden diese Konstanten von hier. Keine Duplikate mehr in verschiedenen Dateien!

Struktur:

  • GAME_CONSTANTS: Spieler, Status, Felder
  • AI_CONSTANTS: Suchtiefen, Algorithmus-Parameter
  • UI_CONSTANTS: Farben, Dimensionen

core/agent.js

Description:
  • Abstrakte Basisklasse für alle KI-Agenten. Ein Agent erhält einen Spielzustand und muss einen Zug zurückgeben.

Source:

Abstrakte Basisklasse für alle KI-Agenten. Ein Agent erhält einen Spielzustand und muss einen Zug zurückgeben.

core/base-game-controller.js

Description:
  • Basis-Controller für gitterbasierte Strategiespiele (TTT, Connect4, etc.).

    Reduziert Code-Duplikation durch ein gemeinsames Template, das von Regular TTT, 3D, Ultimate, Connect 4 und weiteren genutzt wird.

Source:

Basis-Controller für gitterbasierte Strategiespiele (TTT, Connect4, etc.).

Reduziert Code-Duplikation durch ein gemeinsames Template, das von Regular TTT, 3D, Ultimate, Connect 4 und weiteren genutzt wird.

core/game-adapter.js

Description:
  • Einheitliche Schnittstelle für alle Tic-Tac-Toe Varianten.

    Macht alle Spiele (Regular, 3D, Ultimate) über eine standardisierte API zugänglich. Verhindert Code-Duplikation und sorgt für konsistentes Verhalten.

Source:

Einheitliche Schnittstelle für alle Tic-Tac-Toe Varianten.

Macht alle Spiele (Regular, 3D, Ultimate) über eine standardisierte API zugänglich. Verhindert Code-Duplikation und sorgt für konsistentes Verhalten.

core/iframe-bridge.js

Description:
  • IframeBridge — Einheitliches Kommunikationssystem für iframe-basierte Module.

    Ersetzt das bisherige Mischsystem aus URL-Parametern, manuellen postMessage-Aufrufen und globalem Keyboard-Forwarding durch ein strukturiertes Host/Client-Protokoll.

    Architektur:

    • IframeBridgeHost (läuft in der Parent-Seite, steuert ein iframe)
    • IframeBridgeClient (läuft im iframe, kommuniziert mit Parent)
    • Beide nutzen ein gemeinsames Message-Schema mit Namespace:Action-Typen

    Lifecycle:

    1. Client sendet SYSTEM:READY
    2. Host empfängt → sendet CONFIG:INIT (+ flusht Queue)
    3. Client empfängt → wendet Config an → sendet SYSTEM:READY_ACK
    4. Host markiert ready=true, regulärer Betrieb beginnt

    Debug-Integration: Nutzt DebugConfig.log() mit den Domains CORE_IFRAME_BRIDGE, CORE_IFRAME_BRIDGE_HOST, CORE_IFRAME_BRIDGE_CLIENT. Aktivierung: DEBUG_CONFIG.DEBUG_CORE_IFRAME_BRIDGE = true

Source:
Version:
  • 1.0
Author:
  • Alexander Wolf
See:
  • docs/conventions/IFRAME_BRIDGE_PROTOCOL.md

IframeBridge — Einheitliches Kommunikationssystem für iframe-basierte Module.

Ersetzt das bisherige Mischsystem aus URL-Parametern, manuellen postMessage-Aufrufen und globalem Keyboard-Forwarding durch ein strukturiertes Host/Client-Protokoll.

Architektur:

  • IframeBridgeHost (läuft in der Parent-Seite, steuert ein iframe)
  • IframeBridgeClient (läuft im iframe, kommuniziert mit Parent)
  • Beide nutzen ein gemeinsames Message-Schema mit Namespace:Action-Typen

Lifecycle:

  1. Client sendet SYSTEM:READY
  2. Host empfängt → sendet CONFIG:INIT (+ flusht Queue)
  3. Client empfängt → wendet Config an → sendet SYSTEM:READY_ACK
  4. Host markiert ready=true, regulärer Betrieb beginnt

Debug-Integration: Nutzt DebugConfig.log() mit den Domains CORE_IFRAME_BRIDGE, CORE_IFRAME_BRIDGE_HOST, CORE_IFRAME_BRIDGE_CLIENT. Aktivierung: DEBUG_CONFIG.DEBUG_CORE_IFRAME_BRIDGE = true

games/connect4/logic.js

Description:
  • Spiellogik für Connect 4 und Connect 4 3D. Implementiert die GameState-Interface-Konzepte.

Source:

Spiellogik für Connect 4 und Connect 4 3D. Implementiert die GameState-Interface-Konzepte.

games/knights-tour/controller.js

Description:
  • Controller für das Springerproblem. Steuert Interaktionen, KI-Lösung und Unterbrechung.

Source:

Controller für das Springerproblem. Steuert Interaktionen, KI-Lösung und Unterbrechung.

games/knights-tour/logic.js

Description:
  • Kernlogik für das Springerproblem. Definiert das Brett, die Züge und die Validierung.

Source:

Kernlogik für das Springerproblem. Definiert das Brett, die Züge und die Validierung.

games/knights-tour/renderer.js

Description:
  • Renderer für das Springerproblem. Zeichnet das Brett mit einem verbesserten Farbschema.

Source:

Renderer für das Springerproblem. Zeichnet das Brett mit einem verbesserten Farbschema.

games/nim/logic.js

Description:
  • NIM Game - Implementierungsbeispiel

Source:

NIM Game - Implementierungsbeispiel

games/rotatebox/controller.js

games/rotatebox/logic.js

Description:
  • Definiert den Spielzustand, das Parsen der Level und die Physik.

Source:

Definiert den Spielzustand, das Parsen der Level und die Physik.

games/rotatebox/renderer.js

games/rotatebox/solver.js

Description:
  • KI-Solver Wrapper für RotateBox. Nutzt die generische SearchEngine, um das Level zu lösen.

Source:

KI-Solver Wrapper für RotateBox. Nutzt die generische SearchEngine, um das Level zu lösen.

games/rotatebox/tree-adapter.js

Description:
  • Adapter, der RotateBox-Zustände in einen Visualisierungs-Baum wandelt.

Source:

Adapter, der RotateBox-Zustände in einen Visualisierungs-Baum wandelt.

games/tictactoe/logic.js

Description:
  • Zentrale Spiellogik für die Tic-Tac-Toe Varianten. Beinhaltet die Klassen für Regular (3x3), 3D (NxNxN) und Ultimate. Implementiert das GameState Interface.

Source:

Zentrale Spiellogik für die Tic-Tac-Toe Varianten. Beinhaltet die Klassen für Regular (3x3), 3D (NxNxN) und Ultimate. Implementiert das GameState Interface.

templates/game-state-template.js

Description:
  • GameState Template für Schülerprojekte

Source:

GameState Template für Schülerprojekte

Example

class MyGameLogic extends GameState {
    constructor() {
        super();
        // Initialisiere dein Spiel hier
    }
}

viz/shared/tree-analysis-utils.js

Description:
  • Allgemeine Hilfsfunktionen zur Analyse von Baumstrukturen.

    Unterstützt zwei Zählvarianten:

    • Alle Knoten eines Teilbaums
    • Nur Blattknoten eines Teilbaums

    Zusätzlich kann ein möglicher Spielbaum direkt aus einem GameState gezählt werden, ohne dass alle Knoten im Visualisierungsbaum materialisiert sein müssen.

Source:

Allgemeine Hilfsfunktionen zur Analyse von Baumstrukturen.

Unterstützt zwei Zählvarianten:

  • Alle Knoten eines Teilbaums
  • Nur Blattknoten eines Teilbaums

Zusätzlich kann ein möglicher Spielbaum direkt aus einem GameState gezählt werden, ohne dass alle Knoten im Visualisierungsbaum materialisiert sein müssen.

viz/specializers/flowchart/flowchart-visualizer.js

Description:
  • Visualisiert Regelbäume als interaktives Flowchart. Nutzt DOM-Elemente für Styling (Karten, Farbbalken).

Source:

Visualisiert Regelbäume als interaktives Flowchart. Nutzt DOM-Elemente für Styling (Karten, Farbbalken).

viz/specializers/rules/rule-visualizer.js

Description:
  • Visualisiert einen DecisionTree als interaktive HTML-Liste. Ermöglicht das An/Abschalten von Regeln per Checkbox.

Source:

Visualisiert einen DecisionTree als interaktive HTML-Liste. Ermöglicht das An/Abschalten von Regeln per Checkbox.

viz/tree-viz/engines/interaction-engine.js

Description:
  • TreeInteractionEngine - Modul für Benutzerinteraktion und Viewport-Management

    Implementiert alle Interaktionsmechaniken:

    • setupWheelZoom(): Maus-Wheel Zooming mit Smart-Pause für Active-Node-Tracking
    • setupDragPan(): Drag-basiertes Pannen des Baums
    • setupNodeClickDetection(): Klick-Erkennung auf Baum-Knoten
    • setupTouchSupport(): Touch-Gesten (Pinch-to-Zoom, Drag)
    • getViewportTransform(): Berechnung der Viewport-Transformationen
Source:
Version:
  • 1.0
Author:
  • Alexander Wolf

TreeInteractionEngine - Modul für Benutzerinteraktion und Viewport-Management

Implementiert alle Interaktionsmechaniken:

  • setupWheelZoom(): Maus-Wheel Zooming mit Smart-Pause für Active-Node-Tracking
  • setupDragPan(): Drag-basiertes Pannen des Baums
  • setupNodeClickDetection(): Klick-Erkennung auf Baum-Knoten
  • setupTouchSupport(): Touch-Gesten (Pinch-to-Zoom, Drag)
  • getViewportTransform(): Berechnung der Viewport-Transformationen

viz/tree-viz/engines/knights-tour-nodes.js

Description:
  • KnightsTourNodeRenderer - Spezialisierter Renderer für Knights-Tour Boards in Tree-Nodes

    Rendert Schachbrett-Boards in Baum-Knoten mit zwei visuellen Stilen:

    • "classic": Echtes Schachbrett mit schwarzen Zahlen und roter Umrandung (original)
    • "modern": Grüne besuchte Felder mit optimiertem Styling

    Wird von TreeRenderer.renderNode() aufgerufen, wenn boardData vorhanden ist.

Source:
Version:
  • 1.0
Author:
  • Alexander Wolf

KnightsTourNodeRenderer - Spezialisierter Renderer für Knights-Tour Boards in Tree-Nodes

Rendert Schachbrett-Boards in Baum-Knoten mit zwei visuellen Stilen:

  • "classic": Echtes Schachbrett mit schwarzen Zahlen und roter Umrandung (original)
  • "modern": Grüne besuchte Felder mit optimiertem Styling

Wird von TreeRenderer.renderNode() aufgerufen, wenn boardData vorhanden ist.

viz/tree-viz/engines/layout-engine.js

Description:
  • TreeLayoutEngine - Modul für Knoten-Positionierung und Auto-Layout-Algorithmen

    Implementiert verschiedene Layout-Strategien für Suchbäume:

    • calculatePosition(): Berechnet Position für neue Knoten basierend auf Parent und Level
    • getNodeLevel(): Bestimmt die Tiefe eines Knotens im Baum
    • balanceSubtree(): Auto-Balance-Algorithmus für gleichmäßige Breite
    • applyLayout(): Wendet Layout-Algorithmus auf alle Knoten an
Source:
Version:
  • 1.0
Author:
  • Alexander Wolf

TreeLayoutEngine - Modul für Knoten-Positionierung und Auto-Layout-Algorithmen

Implementiert verschiedene Layout-Strategien für Suchbäume:

  • calculatePosition(): Berechnet Position für neue Knoten basierend auf Parent und Level
  • getNodeLevel(): Bestimmt die Tiefe eines Knotens im Baum
  • balanceSubtree(): Auto-Balance-Algorithmus für gleichmäßige Breite
  • applyLayout(): Wendet Layout-Algorithmus auf alle Knoten an

viz/tree-viz/engines/minimax-nodes.js

Description:
  • MinimaxNodeRenderer - Spezialisierter Renderer für Minimax/TicTacToe in Knoten

    Rendert TicTacToe-Boards in Baum-Knoten mit Minimax-Metadaten:

    • 3x3 Grid mit X/O Symbolen
    • Minimax-Werte (Value, Alpha, Beta)
    • Spezielle Markierungen für Best-Move und Pruned-Nodes

    Wird von TreeRenderer.renderNode() aufgerufen, wenn boardType === 'minimax'.

Source:
Version:
  • 1.0
Author:
  • Alexander Wolf

MinimaxNodeRenderer - Spezialisierter Renderer für Minimax/TicTacToe in Knoten

Rendert TicTacToe-Boards in Baum-Knoten mit Minimax-Metadaten:

  • 3x3 Grid mit X/O Symbolen
  • Minimax-Werte (Value, Alpha, Beta)
  • Spezielle Markierungen für Best-Move und Pruned-Nodes

Wird von TreeRenderer.renderNode() aufgerufen, wenn boardType === 'minimax'.

viz/tree-viz/engines/numeric-nodes.js

Description:
  • NumericNodeRenderer - Renderer für numerische Knoten im Diagramm-Modus

    Rendert Baumknoten als Kreise mit zentriertem Zahlenwert, analog zu Lehrbuch-Darstellungen von Minimax- und Alpha-Beta-Bäumen.

    Visuelles Layout (v2):

    • Statusbasierter Außenring (READY = grün, ACTIVE = gelb, etc.)
    • Kreis-Füllung basierend auf dem evaluierten Wert: • value > 0: rötlich (MAX-Vorteil) • value < 0: bläulich (MIN-Vorteil) • value = 0: grau (Unentschieden) • unevaluiert: weiß
    • Unter dem Kreis: farbkodierte α/β-Werte (α rot, β blau) mit Cutoff-Indikator wenn α ≥ β
    • Rollenlabel (MAX/MIN) ENTFERNT – redundant mit Ebenen-Overlay
    • Schriftgröße skaliert proportional zum Knotenradius

    Separation of Concerns:

    • Kein Wissen über TicTacToe, Knights-Tour oder andere Spiele.
    • Reagiert ausschließlich auf boardType: 'numeric' und NumericNodeMetadata.
    • Farben und Dimensionen aus NUMERIC_VIZ_CONSTANTS (zentrale Parameterhaltung).
    • Status-Ring nutzt style-Objekt aus TreeFeaturesEngine (status-config.js).

    Wird von TreeRenderer.renderBoardNode() aufgerufen, wenn boardType === 'numeric'.

Source:
Version:
  • 2.0
Author:
  • Alexander Wolf
See:
  • ENGINEERING_CONVENTIONS.md – Konventionen 2 (JSDoc), 3 (Magic Numbers), 4 (Parameterhaltung)

NumericNodeRenderer - Renderer für numerische Knoten im Diagramm-Modus

Rendert Baumknoten als Kreise mit zentriertem Zahlenwert, analog zu Lehrbuch-Darstellungen von Minimax- und Alpha-Beta-Bäumen.

Visuelles Layout (v2):

  • Statusbasierter Außenring (READY = grün, ACTIVE = gelb, etc.)
  • Kreis-Füllung basierend auf dem evaluierten Wert: • value > 0: rötlich (MAX-Vorteil) • value < 0: bläulich (MIN-Vorteil) • value = 0: grau (Unentschieden) • unevaluiert: weiß
  • Unter dem Kreis: farbkodierte α/β-Werte (α rot, β blau) mit Cutoff-Indikator wenn α ≥ β
  • Rollenlabel (MAX/MIN) ENTFERNT – redundant mit Ebenen-Overlay
  • Schriftgröße skaliert proportional zum Knotenradius

Separation of Concerns:

  • Kein Wissen über TicTacToe, Knights-Tour oder andere Spiele.
  • Reagiert ausschließlich auf boardType: 'numeric' und NumericNodeMetadata.
  • Farben und Dimensionen aus NUMERIC_VIZ_CONSTANTS (zentrale Parameterhaltung).
  • Status-Ring nutzt style-Objekt aus TreeFeaturesEngine (status-config.js).

Wird von TreeRenderer.renderBoardNode() aufgerufen, wenn boardType === 'numeric'.

viz/tree-viz/engines/renderer.js

Description:
  • TreeRenderer - Canvas-Rendering Modul für Bäume

    Zentrale Rendering-Engine für alle visuellen Baum-Elemente:

    • renderEdges(): Verbindungslinien zwischen Knoten
    • renderNode(): Einzelne Knoten mit Status-Styling
    • renderLabel(): Node-Labels mit Font-Metriken
    • renderOverlay(): Debug-Overlay mit Viewport-Informationen

    Unterstützt spezialisierte Board-Renderer:

    • KnightsTourNodeRenderer (für Knights-Tour Boards)
    • RotateBoxNodeRenderer (für RotateBox Boards)
Source:
Version:
  • 2.0
Author:
  • Alexander Wolf

TreeRenderer - Canvas-Rendering Modul für Bäume

Zentrale Rendering-Engine für alle visuellen Baum-Elemente:

  • renderEdges(): Verbindungslinien zwischen Knoten
  • renderNode(): Einzelne Knoten mit Status-Styling
  • renderLabel(): Node-Labels mit Font-Metriken
  • renderOverlay(): Debug-Overlay mit Viewport-Informationen

Unterstützt spezialisierte Board-Renderer:

  • KnightsTourNodeRenderer (für Knights-Tour Boards)
  • RotateBoxNodeRenderer (für RotateBox Boards)

viz/tree-viz/engines/rotatebox-nodes.js

Description:
  • RotateBoxNodeRenderer - Spezialisierter Renderer für RotateBox Boards in Tree-Nodes

    Rendert RotateBox-Puzzle-Boards in Baum-Knoten Zeigt Blöcke mit Farben und fallOffsets-Animationen

    Wird von TreeRenderer.renderBoardNode() aufgerufen, wenn boardData vorhanden ist.

Source:
Version:
  • 2.0
Author:
  • Alexander Wolf

RotateBoxNodeRenderer - Spezialisierter Renderer für RotateBox Boards in Tree-Nodes

Rendert RotateBox-Puzzle-Boards in Baum-Knoten Zeigt Blöcke mit Farben und fallOffsets-Animationen

Wird von TreeRenderer.renderBoardNode() aufgerufen, wenn boardData vorhanden ist.

viz/tree-viz/features/features-engine.js

Description:
  • TreeFeaturesEngine - Feature-Modul für Node-Styling, Status-Management und Dead-End-Erkennung

    WICHTIG: Status-Definitionen und -Designs sind nun zentral in status-config.js definiert. Diese Datei nutzt:

    • StatusConfig.getStatusTypes() für Priority-basierte Status
    • StatusConfig.getStyleConfig() für Visual-Styles
    • STYLE_CONFIG_GLOBAL für Master-Rendering-Effekte

    Zentrale Verwaltung aller visuellen Effekte und Node-Eigenschaften:

    • checkAndMarkDeadEnd(): Erkennung von Sackgassen im Baum
    • getNodeStyle(): Konsistentes Styling basierend auf Node-Status
    • updateActiveNodeTracking(): Fokus-Management für aktive Knoten
Source:
Version:
  • 1.0
Author:
  • Alexander Wolf

TreeFeaturesEngine - Feature-Modul für Node-Styling, Status-Management und Dead-End-Erkennung

WICHTIG: Status-Definitionen und -Designs sind nun zentral in status-config.js definiert. Diese Datei nutzt:

  • StatusConfig.getStatusTypes() für Priority-basierte Status
  • StatusConfig.getStyleConfig() für Visual-Styles
  • STYLE_CONFIG_GLOBAL für Master-Rendering-Effekte

Zentrale Verwaltung aller visuellen Effekte und Node-Eigenschaften:

  • checkAndMarkDeadEnd(): Erkennung von Sackgassen im Baum
  • getNodeStyle(): Konsistentes Styling basierend auf Node-Status
  • updateActiveNodeTracking(): Fokus-Management für aktive Knoten

viz/tree-viz/features/node-expansion.js

Description:
  • Node Expansion Engine - Kollabierbare Baumknoten

    Ermöglicht schrittweises Explorieren des Suchbaums:

    • Nodes können collapsed/expanded sein
    • Nur expanded Nodes zeigen ihre Kinder
    • Click auf collapsed Node expandiert ihn
Source:
Version:
  • 1.0
Author:
  • Alexander Wolf

Node Expansion Engine - Kollabierbare Baumknoten

Ermöglicht schrittweises Explorieren des Suchbaums:

  • Nodes können collapsed/expanded sein
  • Nur expanded Nodes zeigen ihre Kinder
  • Click auf collapsed Node expandiert ihn

viz/tree-viz/tree-engine.js

Description:
  • TreeVizEngine v3.0 - Generisches Suchbaum-Visualisierungs-System mit modularer Architektur

    Orchestriert mehrere spezialisierte Module für Baum-Visualisierung:

    • TreeRenderer: Canvas-Rendering (Kanten, Knoten, Labels)
    • TreeLayoutEngine: Knoten-Positionierung und Auto-Layout
    • TreeInteractionEngine: Zoom, Pan, Click-Detection
    • TreeFeaturesEngine: Dead-End Detection, Active Node Tracking, Status Management

    Status-Konfiguration wird zentral in status-config.js definiert. Diese Datei nutzt StatusConfig.getStatusTypes() zur Runtime.

Source:
Version:
  • 3.0
Author:
  • Alexander Wolf

TreeVizEngine v3.0 - Generisches Suchbaum-Visualisierungs-System mit modularer Architektur

Orchestriert mehrere spezialisierte Module für Baum-Visualisierung:

  • TreeRenderer: Canvas-Rendering (Kanten, Knoten, Labels)
  • TreeLayoutEngine: Knoten-Positionierung und Auto-Layout
  • TreeInteractionEngine: Zoom, Pan, Click-Detection
  • TreeFeaturesEngine: Dead-End Detection, Active Node Tracking, Status Management

Status-Konfiguration wird zentral in status-config.js definiert. Diese Datei nutzt StatusConfig.getStatusTypes() zur Runtime.

viz/tree-viz/utils/node-status-manager.js

Description:
  • NodeStatusManager - Zentrale Status-Verwaltung für Tree-Adapters

    Bietet eine einzelne Schnittstelle zur konsistenten Status-Synchronisierung:

    • Interne Datenschicht (treeStructure.status in Adapter)
    • Externe Visualisierungsschicht (UPDATE_NODE Commands zu TreeVizEngine)

    Diese Klasse wird VON den Tree-Adapters verwendet, NICHT von der Visualisierung. Sie stellt sicher, dass Status-Änderungen immer atomar und konsistent erfolgen.

    WICHTIG: StatusConfig muss vor diesem Modul geladen sein!

Source:
Version:
  • 1.0
Author:
  • Alexander Wolf

NodeStatusManager - Zentrale Status-Verwaltung für Tree-Adapters

Bietet eine einzelne Schnittstelle zur konsistenten Status-Synchronisierung:

  • Interne Datenschicht (treeStructure.status in Adapter)
  • Externe Visualisierungsschicht (UPDATE_NODE Commands zu TreeVizEngine)

Diese Klasse wird VON den Tree-Adapters verwendet, NICHT von der Visualisierung. Sie stellt sicher, dass Status-Änderungen immer atomar und konsistent erfolgen.

WICHTIG: StatusConfig muss vor diesem Modul geladen sein!