Statt ewig auf der Jagd nach dem dritten webdesign-Award in Folge einen schicken Retro-Look im Stile der alten Arcade-Automaten nachzubauen, habe ich mich für ein zweckmäßiges Grid-Layout entschieden. Das svg-Element wird fixed über die Seite gespannt. Zu beachten ist, das das svg-Element nicht über die Navigationsleiste zu legen, da die Links dann nicht mehr zugänglich sind.
Mit Hilfe eines Scriptes können die einzelnen Tangram-Teile angewählt und dann mit den Pfeiltasten über den Bildschirm bewegt werden.
Die Tasten `a`und `d` rotieren die Teile. Der Vorschlag der KI, mit einer update-Transform Methode gleichzeitig für die Aktualisierung der Rotation der Teile, als auch des schwarzen Dreiecks zu sorgen führte zu dem ansehnlichen Fehler, dass jedes neu angewählte Tangram-Teil sich wieder an das zueletzt bewegte in seiner Ursprungsposition ansetzt
Die Rotationsachse habe ich auf 50,50 gelegt, was immer bezogen auf die ursprüngliche Position im Tangram interpretiert wird. Hier wäre es zweckmäßiger, das Tangram generisch aufzubauen, Grundformen zu definieren, mit einem klaren Rotationsmittelpunkt und diese dann per Transformation an ihre richtige Stelle zu verschieben.