mesh-configs/skills/devops/web-feature-iteration/references/tic-tac-toe-revert-2026-08-04.md

TicTacToe 3D-Relaunch → kompletter Revert (2026-08-04)

Chronologie einer über-engineert-Erweiterung, die der Nutzer 3× ablehnte, und der saubere Revert — als Muster, warum "minimal + funktionierend" gilt.

Ablauf

1. Ausgangslage: tictactoe.perfekt-ohne-en.de, statisches HTML/JS, Player (X) gegen KI (O), Minimax (unschlagbar), Flip-Coin-Animation, helles Glas-Design. Funktioniert.
2. Mesh-Brainstorming (Rechen-Agenten): UnraidHermes empfahl Schwierigkeitsstufen, SwitchHermes (KRITIK) empfahl stattdessen "Wer beginnt (X/O)" — kleinster Eingriff mit größtem Nutzen, weil gegen perfekte KI nur der Startende Remis erzwingen kann. → Entscheidung: X/O-Wahl als Punkt 3.
3. Umsetzung zu grob: Statt nur X/O-Wahl wurde ein kompletter 3D-Relaunch gebaut (Three.js, 3D-X aus gekreuzten Balken, 3D-O als Torus, rotierendes 3D-Board).
4. Ablehnung Runde 1: Nutzer: "Sieht schön aus aber ist wegen der Drehung unspielbar." → Nur Rotation entfernt.
5. Ablehnung Runde 2: Nutzer: "Ich klicke blind und verliere" (perspektivisches Canvas-Klick-Mapping ungenau). → 2D-Grid, CSS-3D-Steine.
6. Ablehnung Runde 3: "Schade ... X und o selbst sollte 3D bleiben." → Three.js echte 3D-Steine + unsichtbares 2D-Grid-Overlay für präzise Klicks.
7. Finales "Komplett zurück": Nutzer zufrieden nur mit der ORIGINAL-Version. → cp index-original.html.bak index.html, rm -rf lib/, chown, Re-verify im Browser.

Kernlektion

• Der Nutzer will funktionierend + vertraut, nicht schick + neu. Eine laufende Seite mit einer blassen Erweiterung anzufassen ist riskant; ein full 3D-Redesign bei einem simplen Spiel war die falsche Hebelgröße.
• Die Interaktion (präzises Klicken) ist unverhandelbar. Deko (3D) darf nie die Bedienbarkeit brechen.
• Beim ersten "zurück / unspielbar" früh auf minimalen Stand zurück (nicht "reparieren bis es gefällt") — spart · die 3 Wiederversuche.

Was gut war & bleibt

• Mesh-Brainstorming lief gut: beide Rechen-Agenten (UnraidHermes + SwitchHermes) lieferten substantielle, kritisch geprüfte Ideen mit eingebettetem Kontext in die Task-Beschreibung (Briefing-Pitfall: NIE externe Datei — Agenten sehen nur /srv/work/tasks/).
• Gegenprüfung: LaptopHermes offline → KRITIK-Task an SwitchHermes umgeleitet, lief sauber.

Three.js-Gotcha (Detail)

BoxGeometry/BufferGeometry haben KEINE .rotation-Eigenschaft — nur Object3D (Mesh, Group) haben das. g1.rotation.z = Math.PI/4 wirft TypeError: Cannot set properties of undefined (setting 'z'). Fix: g1.rotateZ(Math.PI/4) (Geometrie-Methode) oder Geometrie in ein Mesh packen. Isolierter Browser-Test (new THREE.BoxGeometry(...), new THREE.MeshPhysicalMaterial(...)) half, den Fehler auf die Geometrie-Zeile einzugrenzen.