Restore hover-sprite behavior in super-keyboard key color plane

The supermedium-sync in 8456119 dropped two pieces that are required
for keyboards that ship a hover sprite (our `superkeyboard` model
does — `keyboard-hover.png`):

1. Setting `src: hoverImg` on the color plane material (normal
   blending, sampled texture) instead of the additive-solid-color
   glow.
2. UV manipulation so the per-key plane samples only that key's
   region of the sprite. Since modern three.js replaced
   `geometry.faceVertexUvs` with BufferGeometry, switch to
   `texture.offset` + `texture.repeat` which gives the same result.

Without this, the hover plane was drawn as a flat white (or
`keyHoverColor`) rectangle on top of each key — an opaque white
square with the letter erased behind it.

The additive-glow path is preserved for keyboards without a hover
sprite, and setAttribute declares `blending: 'additive'` directly
instead of relying on a componentinitialized listener (which now
fires synchronously and was being attached too late).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: vincentfretin

src/components/super-keyboard.js

@@ -264,17 +264,25 @@ AFRAME.registerComponent('super-keyboard', {
    * The plane for visual feedback when a key is hovered or clicked
    */
   initKeyColorPlane: function () {
+    var kbdata = KEYBOARDS[this.data.model];
     var keyColorPlane = this.keyColorPlane = document.createElement('a-entity');
     keyColorPlane.classList.add('superKeyboardKeyColorPlane');
     keyColorPlane.object3D.position.z = 0.001;
     keyColorPlane.object3D.visible = false;
     keyColorPlane.setAttribute('geometry', {primitive: 'plane'});
-    keyColorPlane.setAttribute('material', {shader: 'flat', color: this.data.keyBgColor,
-                                            transparent: true});
-    keyColorPlane.addEventListener('componentinitialized', function (evt) {
-      if (evt.detail.name !== 'material') { return; }
-      this.getObject3D('mesh').material.blending = THREE.AdditiveBlending;
-    });
+    var matAttr = {
+      shader: 'flat',
+      color: this.data.keyBgColor,
+      transparent: true
+    };
+    if (kbdata.hoverImg) {
+      // Keyboards that ship a hover sprite blend normally so each key's
+      // highlight is sampled from the texture, not painted as a flat color.
+      matAttr.src = this.data.imagePath + '/' + kbdata.hoverImg;
+    } else {
+      matAttr.blending = 'additive';
+    }
+    keyColorPlane.setAttribute('material', matAttr);
     this.el.appendChild(keyColorPlane);
   },
 
@@ -307,7 +315,15 @@ AFRAME.registerComponent('super-keyboard', {
       keyColorPlane.object3D.position.x = kdata.x * w - w2 + keyw / 2;
       keyColorPlane.object3D.position.y = (1 - kdata.y) * h - h2 - keyh / 2;
       // Color.
-      keyColorPlane.getObject3D('mesh').material.color.copy(color);
+      var material = keyColorPlane.getObject3D('mesh').material;
+      material.color.copy(color);
+      // If the keyboard uses a hover sprite, offset/repeat the texture so
+      // the plane samples only the hovered key's region instead of the
+      // whole image squashed into the key rectangle.
+      if (kbdata.hoverImg && material.map) {
+        material.map.offset.set(kdata.x, 1 - kdata.y - kdata.h);
+        material.map.repeat.set(kdata.w, kdata.h);
+      }
       break;
     }
     keyColorPlane.object3D.visible = true;