WolfsWorld — Architektur & Design-System Dokumentation

Description:

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

Source:

• ai/agents/agent-profiles.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• ai/agents/minimax-agent.js, line 3

Author:

• Alexander Wolf

Description:

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

Source:

• ai/agents/random-agent.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• ai/agents/rule-based-agent.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• ai/game-adapter.js, line 1

Author:

• Alexander Wolf

Description:

• Bridge zwischen numerischen Heuristiken und booleschen Regelbäumen.

Source:

• ai/heuristics/adapter/heuristic-rule-adapter.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• ai/heuristics/base.js, line 1

Author:

• Alexander Wolf

Description:

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

  • v1_baseline: Sieg/Verlust + einfache Fensterbewertung
  • v2_positional: Zentrumskontrolle, Spaltenqualität, Verbindungsbewertung
  • v3_aggressive: Druckmaximierung, Doppel-Drohungen, Mobilitätseinschränkung
  • v4_defensive: Maximale Gegner-Drohungs-Bestrafung, Höhenkontrolle
  • v5_offensive: Schneller Drohungsaufbau, Setup-Bonus, Threat-Eskalation
  • v6_local: Maximale Fensterwerte, minimale Positionsgewichte
  • v7_global: Spaltenstruktur + Verbindungsqualität dominieren

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

Source:

• ai/heuristics/config/connect4-heuristics-config.js, line 1

Author:

• Alexander Wolf

Description:

• Schema-Definition und Validierung für Heuristik-Konfigurationen. Unterstützt Profile v1–v7 (baseline, positional, aggressive, defensive, offensive, local, global). Validierung clampt Range-Verletzungen mit Warning statt throw (§5 ENGINEERING_CONVENTIONS).

Source:

• ai/heuristics/config/heuristic-config-schema.js, line 1

Author:

• Alexander Wolf

Description:

• Bewertungskonfigurationen für TTT-Heuristiken (regular, 3d, ultimate). Definiert je 7 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
  • v4_defensive: Asymmetrisches loss/win, Block-Fokus, Remis akzeptiert
  • v5_offensive: Schnellsieg, hoher Fork-Bonus, Druckmaximierung
  • v6_local: Unmittelbare Linienbildung, keine Positionsgewichte
  • v7_global: Feldqualität dominiert, Raumkontrolle

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

Source:

• ai/heuristics/config/ttt-heuristics-config.js, line 1

Author:

• Alexander Wolf

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:

• ai/heuristics/evaluators/connect4-heuristic.js, line 1

Author:

• Alexander Wolf

Description:

• Knights-Tour-Heuristik (Warnsdorf).

Source:

• ai/heuristics/evaluators/knights-tour-heuristic.js, line 1

Author:

• Alexander Wolf

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:

• ai/heuristics/evaluators/ttt-heuristic.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• ai/heuristics/registry.js, line 1

Author:

• Alexander Wolf

Description:

• NNPlaygroundController — Orchestrierung des NN-TTT-Playgrounds.

  Phase 2: DRY Game-Engine, SVG-verschmolzene Boards, Trainer-Tab.

  • Tab-Switching in der Sidebar (5 Tabs)
  • Topologie-Preset-Auswahl
  • Board-Interaktion via TTTRegularBoard (DRY Game-Engine)
  • Lokaler Forward-Pass + Training
  • Gewichts-Filter-Slider
  • Trainer-Tab: Trainings-Beispiele visualisieren
  • Metriken: Loss/Accuracy-History für Charts
  • Receptive-Field-Hover via NNMLPVisualizer

  Convention: Adapter-Layer. Verbindet UI-Elemente mit Core (NeuralNetwork) und Rendering (NNMLPVisualizer). Keine DOM-Erzeugung (außer dynamische Updates). Kein direktes console.log.

Source:

• ai/neural/controllers/nn-playground-controller.js, line 1

Author:

• Alexander Wolf

See:

• ToDos/NN_PLAYGROUND_PLAN_v2.md

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:

• ai/neural/core/layer.js, line 1

Author:

• Alexander Wolf

See:

• docs/architecture/NEURAL_NET_ARCHITECTURE.md

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:

• ai/neural/core/network.js, line 1

Author:

• Alexander Wolf

See:

• docs/architecture/NEURAL_NET_ARCHITECTURE.md

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:

• ai/neural/core/neuron.js, line 1

Author:

• Alexander Wolf

See:

• docs/architecture/NEURAL_NET_ARCHITECTURE.md

Description:

• TTT-Trainingsdaten-Generator für den NN-Playground.

  Generiert Supervised-Learning-Daten: Board-Zustand → Minimax-optimaler Zug (One-Hot). Die Daten werden on-demand im Browser berechnet (kein externer Datensatz nötig).

  Encoding: Input: 9 Werte — 1 = currentPlayer, -1 = Gegner, 0 = leer Target: 9 Werte — One-Hot-Vektor des optimalen Zugs (Minimax)

  Symmetrie-Augmentierung: Diehedralgruppe D₄ (4 Rotationen × 2 Spiegelungen = 8).

  Convention: Keine DOM-Bezüge! Läuft auch im Web Worker.

Source:

• ai/neural/datasets/ttt-training-data.js, line 1

Author:

• Alexander Wolf

See:

• ToDos/NN_PLAYGROUND_PLAN_v2.md

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:

• ai/neural/nn-orchestrator.js, line 1

Author:

• Alexander Wolf

See:

• docs/architecture/NEURAL_NET_ARCHITECTURE.md
• docs/conventions/IFRAME_BRIDGE_PROTOCOL.md

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:

• ai/neural/training/activation-functions.js, line 1

Author:

• Alexander Wolf

See:

• docs/architecture/NEURAL_NET_ARCHITECTURE.md

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:

• ai/neural/training/loss-functions.js, line 1

Author:

• Alexander Wolf

See:

• docs/architecture/NEURAL_NET_ARCHITECTURE.md

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:

• ai/neural/worker/nn-training-worker.js, line 1

Author:

• Alexander Wolf

See:

• docs/architecture/NEURAL_NET_ARCHITECTURE.md

Description:

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

Source:

• ai/rules/connect4-rules.js, line 2

Author:

• Alexander Wolf

Description:

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

Source:

• ai/rules/rule-structure.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• ai/rules/ttt-rules.js, line 1

Author:

• Alexander Wolf

Description:

• Assessment-Fragenkatalog als globale Variable.

  Wrapper um config/assessment-questions.json, damit der Einstiegstest auch ohne lokalen Server (file://) funktioniert.

Source:

• config/assessment-questions-data.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

See:

• config/assessment-questions.json

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:

• config/constants.js, line 1

Author:

• Alexander Wolf

Description:

• Content-Registry-Daten als globale Variable.

  Wrapper um config/content-registry.json, damit die Content-Registry auch ohne lokalen Server (file://) funktioniert.

  WICHTIG: Diese Datei wird automatisch von content-registry.js genutzt, wenn kein HTTP-Server verfügbar ist. Bitte bei Änderungen an config/content-registry.json synchron halten.

Source:

• config/content-registry-data.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

See:

• config/content-registry.json
• docs/specifications/ES_MODULES_CORS_EVALUATION.md §1.3

Description:

• Glossar-Daten als globale Variable.

  Wrapper um config/glossary.json, damit das Glossar auch ohne lokalen Server (file://) funktioniert.

Source:

• config/glossary-data.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

See:

• config/glossary.json

Description:

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

Source:

• core/agent.js, line 1

Author:

• Alexander Wolf

Description:

• Assessment-Engine — Adaptiver Eingangstest.

  Wählt Fragen aus dem Katalog aus, passt die Schwierigkeit dynamisch an die Antworten des Nutzers an und berechnet pro Kategorie einen Score (0.0–1.0).

  Algorithmus:

  1. Startet mit Schwierigkeit 2 (Grundlagen)
  2. Bei richtiger Antwort: Schwierigkeit +1 (max 4)
  3. Bei falscher Antwort: Schwierigkeit −1 (min 1)
  4. Pro Kategorie werden 2–3 Fragen gestellt (adaptiv)
  5. Reihenfolge der Kategorien wird gemischt
  6. Antwort-Optionen werden pro Frage gemischt

Source:

• core/assessment-engine.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

See:

• docs/conventions/DATA_MODEL_CONVENTIONS.md §4
• docs/specifications/ONBOARDING_AND_CONTENT_ARCHITECTURE.md

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:

• core/base-game-controller.js, line 1

Author:

• Alexander Wolf

Description:

• Content-Registry — Zentraler Ressourcen-Katalog.

  Lädt die Content-Registry aus config/content-registry.json und bietet eine Such- und Filter-API für alle Plattform-Inhalte.

Source:

• core/content-registry.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

See:

• docs/conventions/DATA_MODEL_CONVENTIONS.md §1

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:

• core/game-adapter.js, line 1

Author:

• Alexander Wolf

Description:

• GlossaryManager — Loads glossary data and provides tooltip controller.

  Responsibilities:

  1. Load & cache glossary terms from config/glossary.json
  2. Provide query API (getById, getByCategory, search)
  3. Scan DOM for data-glossary annotations and attach tooltip behavior

  Usage: const gm = await GlossaryManager.load('../'); // from html/ subfolder gm.initTooltips(); // activate on current page const term = gm.getById('suchbaum');

Source:

• core/glossary.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

See:

• docs/conventions/DATA_MODEL_CONVENTIONS.md §3
• docs/conventions/ENGINEERING_CONVENTIONS.md §10

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:

• core/iframe-bridge.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

See:

• docs/conventions/IFRAME_BRIDGE_PROTOCOL.md

Description:

• Recommendation-Engine — Personalisierte Inhaltsempfehlungen.

  Orchestriert UserProfile (Assessment-Ergebnisse, Fortschritt) und ContentRegistry (Inhalte, Beziehungen) zu kontextbewussten Empfehlungen für den jeweiligen Nutzer.

Source:

• core/recommendation-engine.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

See:

• docs/specifications/ONBOARDING_AND_CONTENT_ARCHITECTURE.md §3

Description:

• Zentrales User-Profil — localStorage-basiert.

  Konsolidiert alle lernbezogenen Daten (Fortschritt, Assessment-Ergebnisse, Interessen) in einem einzigen localStorage-Key. Bestehende Legacy-Keys (lp_progress, ai_unboxed_universe_progress) werden beim ersten Laden eingelesen und in das neue Schema migriert.

Source:

• core/user-profile.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

See:

• docs/conventions/DATA_MODEL_CONVENTIONS.md §2

Description:

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

Source:

• games/connect4/logic.js, line 2

Author:

• Alexander Wolf

Description:

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

Source:

• games/knights-tour/controller.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• games/knights-tour/logic.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• games/knights-tour/renderer.js, line 1

Author:

• Alexander Wolf

Description:

• NIM Game - Implementierungsbeispiel

Source:

• games/nim/logic.js, line 1

Author:

• Alexander Wolf

Description:

• Controller RotateBox.

Source:

• games/rotatebox/controller.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• games/rotatebox/logic.js, line 1

Author:

• Alexander Wolf

Description:

• Renderer und Animations-Logik für RotateBox.

Source:

• games/rotatebox/renderer.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• games/rotatebox/solver.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• games/rotatebox/tree-adapter.js, line 1

Author:

• Alexander Wolf

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:

• games/tictactoe/logic.js, line 2

Author:

• Alexander Wolf

Description:

• GameState Template für Schülerprojekte

Source:

• templates/game-state-template.js, line 1

Author:

• Alexander Wolf

Example

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

Description:

• Starfield background generator

Source:

• ui/aiverse-starfield.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

Description:

• Canvas-Utilities für HiDPI-Rendering und responsive Größenanpassung.

  Zentrale Helfer für alle Canvas-basierten Spiele und Visualisierungen. Stellt sicher, dass Canvas-Inhalte auf Retina/HiDPI-Displays scharf dargestellt werden und sich an die Container-Größe anpassen.

Source:

• utils/canvas-utils.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

Description:

• NNMLPVisualizer — SVG Data-Flow-Visualisierung eines MLP.

  Phase 2: Verschmolzenes SVG mit integrierten Input/Output-Boards.

  Rendert das Netzwerk als links→rechts Datenfluss: Input (3×3 klickbare Rects) → Hidden Layers (Kreise) → Output (3×3 Heatmap-Rects)

  Features:

  • Input-Neuronen als klickbare im 3×3-Gitter (X/O/leer)
  • Output-Neuronen als mit Heatmap-Farbe + %-Label
  • Hidden-Neuronen als Kreise (vollständig, kein Truncation)
  • ALLE Verbindungen gerendert (Stärke ∝ |Gewicht|, Farbe ∝ Vorzeichen)
  • Zoom/Pan via
  • Weight-Filter: applyWeightFilter(percentage)
  • Receptive-Field-Hover auf erstem Hidden Layer

  Convention: Reine Rendering-Klasse, keine Game-Logik, kein Controller-Code.

Source:

• viz/neural/nn-mlp-visualizer.js, line 1

Author:

• Alexander Wolf

See:

• ToDos/NN_PLAYGROUND_PLAN_v2.md

Description:

• NNTrainingCharts — Canvas-basierte Mini-Charts für Loss & Accuracy.

  Rendert zwei kompakte Linien-Charts im Metriken-Tab des NN-Playgrounds:

  1. Loss-Kurve (Cross-Entropy) — blau, fallend ist gut
  2. Accuracy-Kurve (% richtige Vorhersagen) — grün, steigend ist gut

  Convention: Reine Rendering-Klasse. Kein State, keine Game-Logik.

Source:

• viz/neural/nn-training-charts.js, line 1

Author:

• Alexander Wolf

See:

• ToDos/NN_PLAYGROUND_PLAN_v2.md §3E

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:

• viz/shared/tree-analysis-utils.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• viz/specializers/flowchart/flowchart-visualizer.js, line 1

Author:

• Alexander Wolf

Description:

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

Source:

• viz/specializers/rules/rule-visualizer.js, line 1

Author:

• Alexander Wolf

Description:

• StaticTreeRenderer — Schnittstelle zum Rendern statischer Minimax-Bäume in tree-viz-v2.html Iframes via IframeBridge.

  Wandelt verschachtelte Baumdefinitionen in BATCH ADD_NODE Kommandos um und sendet sie über IframeBridgeHost an die tree-viz-v2 Engine. Knoten-IDs werden in BFS-Reihenfolge (Ebene für Ebene) vergeben oder können per id-Feld in der Baumdefinition explizit benannt werden.

Source:

• viz/static-tree-renderer.js, line 1

Example

// Baum mit expliziten IDs und automatisch berechneten Minimax-Werten:
const tree = StaticTreeRenderer.computeMinimaxValues({
    id: 'root',
    children: [
        { id: 'minLeft', children: [{ id: 'leaf3', value: 3 }, { id: 'leaf5', value: 5 }] },
        { id: 'minRight', children: [{ id: 'leaf2', value: 2 }, { id: 'leaf9', value: 9 }] }
    ]
});
const renderer = new StaticTreeRenderer(document.getElementById('treeFrame'));
renderer.renderTree(tree);
renderer.updateNode('minLeft', { label: '3', status: 'EVALUATED' });

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:

• viz/tree-viz/engines/interaction-engine.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

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:

• viz/tree-viz/engines/knights-tour-nodes.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

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:

• viz/tree-viz/engines/layout-engine.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

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:

• viz/tree-viz/engines/minimax-nodes.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

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:

• viz/tree-viz/engines/numeric-nodes.js, line 1

Version:

• 2.0

Author:

• Alexander Wolf

See:

• ENGINEERING_CONVENTIONS.md – Konventionen 2 (JSDoc), 3 (Magic Numbers), 4 (Parameterhaltung)

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:

• viz/tree-viz/engines/renderer.js, line 1

Version:

• 2.0

Author:

• Alexander Wolf

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:

• viz/tree-viz/engines/rotatebox-nodes.js, line 1

Version:

• 2.0

Author:

• Alexander Wolf

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:

• viz/tree-viz/features/features-engine.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

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:

• viz/tree-viz/features/node-expansion.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf

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:

• viz/tree-viz/tree-engine.js, line 1

Version:

• 3.0

Author:

• Alexander Wolf

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:

• viz/tree-viz/utils/node-status-manager.js, line 1

Version:

• 1.0

Author:

• Alexander Wolf