From 87407c255205abacc63255c36940658b36f271b1 Mon Sep 17 00:00:00 2001
From: Fabien Benetou <fabien-services@benetou.fr>
Date: Sun, 29 Oct 2023 18:12:40 +0100
Subject: [PATCH] cone change as core feedback mecanics

---
 index.html | 26 +++++++++++++-------------
 jxr.js     | 35 ++++++++++++++++++++++++++++++-----
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index e6d02b1..0e2f3ef 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@
     <!-- still experimenting, see webdav.html -->
     <script src='dependencies/webdav.js'></script> 
 
-    <script src='jxr.js'></script> 
+    <script src='jxr.js?12344'></script> 
     <!-- replacing with local copies as CDNs are like unpkg tend to be slow
     <script type="module" src="https://unpkg.com/immers-client/dist/destination.bundle.js"></script>
     <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
@@ -129,18 +129,18 @@
       <!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position 
 	      <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-console position="0 2 -0.8" rotation="-5 0 0" font-size="34" height=1 skip-intro=true></a-console>
-
-      <a-entity playground></a-entity>
-      <a-troika-text value="Biggu's Gate" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="0 2 -0.5"
-	rotation="25 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #00f"></a-troika-text>
-	<a-gltf-model hide-on-enter-ar="" src="../content/winterset/Mountains.glb" position="0 0 0" rotation="0 0 0" scale="10 10 10" class="clonableasset"></a-gltf-model>
-
-	<a-gltf-model src="../content/winterset/Crystal.glb" position="-1 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model>
-	<a-gltf-model id="fish" src="../content/winterset/Fish.glb" position="2 0 -2" rotation="0 0 0" scale=".01 .01 .01" class="clonableasset"></a-gltf-model>
-	<a-gltf-model id="penguin" src="../content/winterset/Penguin.glb" position="0 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model>
-
-	<a-gltf-model src="../content/winterset/Pinetree.glb" position="0 3 -10" rotation="0 0 0" scale="5 5 5" class="clonableasset"></a-gltf-model>
+      <a-console position="2 2 0" rotation="0 -45 0" font-size="34" height=1 skip-intro=true></a-console>
+
+	<a-gltf-model hide-on-enter-ar="" visible=false src="../content/room.gltf" position="0 0 0" rotation="0 0 0" ></a-gltf-model>
+	<a-gltf-model hide-on-enter-ar="" src="../content/kitchen.gltf" position=".5 0 0" rotation="0 110 0" ></a-gltf-model>
+
+	<a-cone changeover="color:red"position="0 0.1 -1.0" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
+	<a-cone changeover="color:red"position="0 0.1 -1.4" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
+	<a-cone changeover="color:red"position="0 0.1 -1.8" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
+	<a-cone changeover="color:red"position="0 0.1 -2.2" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
+	<a-cone changeover="color:red"position="0 0.1 -2.6" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
+	<a-cone changeover="color:red"position="0 0.1 -3.0" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
+	<a-torus position="0 0 -3" arc="180" color="#43A367" radius=".5" scale="1 4 1" height="10" radius-tubular="0.01"></a-torus>
 
 	<a-plane hide-on-enter-ar="" scale="50 50 50" rotation="-90 0 0" color="lightblue"></a-plane>
     </a-scene>
diff --git a/jxr.js b/jxr.js
index 32c5809..a5b4e21 100644
--- a/jxr.js
+++ b/jxr.js
@@ -3513,13 +3513,12 @@ AFRAME.registerComponent('unpackable', {
 })
 
 AFRAME.registerComponent('trail', {
-  
   init: function () {
 	let player = document.getElementById('player') // assuming single player, non networked
 	let previousPos 
 	setInterval( _ => {
 		let pos = player.getAttribute('position').clone()
-		pos.y = 1
+		pos.y = 0
 		// compare current pos with previous set ones and if below distance threshold, lose points
 		let hits = Array.from(document.querySelectorAll('.trail'))
 			.filter( e => e.getAttribute("visible") == true)
@@ -3532,16 +3531,16 @@ AFRAME.registerComponent('trail', {
 		}
 		if (previousPos && previousPos.distanceTo(pos) < 0.1) return // threshold to avoid cluttering
 		let el = document.createElement('a-cylinder')
-		el.setAttribute('scale', '.2 2 .2')
+		el.setAttribute('scale', '.2 .2 .2')
 		el.setAttribute('position', AFRAME.utils.coordinates.stringify( pos ) )
 		el.setAttribute('color', 'green')
-		el.setAttribute('opacity', '0.3')
+		el.setAttribute('opacity', '0.03')
 		el.setAttribute('segments-radial', '6')
 		el.setAttribute('segments-height', '2')
 		el.className += 'trail'
 		this.el.appendChild(el)
 		previousPos = player.getAttribute('position').clone()
-		previousPos.y = 1
+		previousPos.y = 0
 	}, 50)
   },
   remove: function () {
@@ -3549,6 +3548,32 @@ AFRAME.registerComponent('trail', {
   }
 })
 
+let changeovercheck
+AFRAME.registerComponent('changeover', {
+  schema: { color : {type: 'string'} },
+  init: function () {
+	// (this.el, this.data.content)
+	if (changeovercheck) return
+	let player = document.getElementById('player') // assuming single player, non networked
+	console.log('adding timer')
+	changeovercheck = setInterval( _ => {
+		let pos = player.getAttribute('position').clone()
+		pos.y = 0.1 // hard coded but should be from component element
+		let hits = Array.from(document.querySelectorAll('[changeover]'))
+			.filter( e => e.getAttribute("visible") == true)
+			.map( t => { return { el: t, dist : pos.distanceTo(t.getAttribute("position") ) } })
+			.filter( t => t.dist < 0.02 ) 
+			.sort( (a,b) => a.dist > b.dist)
+		console.log(hits.length)
+		if (hits.length>0) {
+			setFeedbackHUD('touching cone')
+			console.log('touching cone')
+			hits[hits.length-1].el.setAttribute('color', 'red')
+		}
+	}, 50)
+  }
+})
+
 // used for testing, now that jxr.js is outside of index.html, could consider putting this back in index.html instead to keep behavior one would expect from a library
 // does indeed create problems, namely other pages relying on it do get this testing behavior
 AFRAME.registerComponent('startfunctions', {