From df8641a2715efdc62ae67437147c091621b1d43f Mon Sep 17 00:00:00 2001
From: Fabien Benetou <fabien-services@benetou.fr>
Date: Mon, 23 Jan 2023 10:57:56 +0100
Subject: [PATCH] example as GIF in Tweet

---
 index.html | 40 +++++++++++++++-------------------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index ab017fd..9de533d 100644
--- a/index.html
+++ b/index.html
@@ -2176,29 +2176,19 @@ function changeColorLastId(){
 	if (id) document.querySelector("#"+id).setAttribute("color", "red")
 }
 
-/*
-
-generalize selector to pick last Nth rather than very last
-        adapt getIdFromPick() with .slice() after filter then map on length-N instead of length-1
-
-selector pickers : pickClass and pickId
-        display result in 3D HUD with rotating objects and selector value
-                ideally themselves also selectable/usable, e.g clone from HUD to bring back "out"
-                         requires extra work as becoming a child will not work, own positionning
-                                should fix that
-                        could compare to world coordinates instead of "just" position attribute
-        add a clear selector function to avoid making the HUD unusable
-
-could also pick via volume, e.g wireframe box
-        start with https://threejs.org/docs/#api/en/math/Box3.containsPoint
-                can iterate with https://threejs.org/docs/#api/en/math/Box3.containsBox
-                consider also https://threejs.org/docs/#api/en/math/Box3.intersectsBox
-
-consider pick then apply, i.e changeColorLastId() but for next Id
-        should be cancealable
-
-*/
-
+AFRAME.registerComponent('thumbstick-shifting',{
+/* illustrated in https://twitter.com/utopiah/status/1617460261111173121 */
+  init: function () {
+    this.el.addEventListener('thumbstickmoved', this.logThumbstick);
+  },
+  logThumbstick: function (evt) {
+	let className = getClassFromPick()
+    if (evt.detail.y > 0.95) { console.log("DOWN"); pushFrontClass(className)}
+    if (evt.detail.y < -0.95) { console.log("UP"); pushBackClass(className)}
+    if (evt.detail.x < -0.95) { console.log("LEFT"); pushLeftClass(className)}
+    if (evt.detail.x > 0.95) { console.log("RIGHT"); pushRightClass(className)}
+  }
+});
 
 </script>
 <div id="observablehq-key">
@@ -2268,8 +2258,8 @@ consider pick then apply, i.e changeColorLastId() but for next Id
 	      <a-text target value="jxr qs #rig sa position 0 0 10" position="0 1.55 .5" rotation="0 180 0" scale="0.1 0.1 0.1"></a-text>
 	-->
 
-      <a-entity oculus-touch-controls="hand: left"></a-entity>
-      <a-entity oculus-touch-controls="hand: right"></a-entity>
+      <a-entity thumbstick-shifting oculus-touch-controls="hand: left"></a-entity>
+      <a-entity thumbstick-shifting oculus-touch-controls="hand: right"></a-entity>
 
     </a-scene>
   </body>