50 lines
2.8 KiB
Markdown
50 lines
2.8 KiB
Markdown
# 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.
|