From 52922636922f9c77fb8708327a7a4f88aef56d6a Mon Sep 17 00:00:00 2001
From: Fabien Benetou <fabien-services@benetou.fr>
Date: Mon, 10 Apr 2023 20:12:53 +0200
Subject: [PATCH] racing example with timing comparison

---
 index.html | 43 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index bd6ba01..1527232 100644
--- a/index.html
+++ b/index.html
@@ -3018,7 +3018,7 @@ AFRAME.registerComponent('collision-check-target', {
 	radius = e.detail.els[0].getAttribute("radius")
 	score += 1/radius
 	setFeedbackHUD("hit" + radius + "target, score: "+score)
-	if (score > 20}{
+	if (score > 20){
 		score = 20
 		setFeedbackHUD("you win")
 	}
@@ -3026,6 +3026,33 @@ AFRAME.registerComponent('collision-check-target', {
   }
 });
 
+let gatesToPass = ["gate1","gate2","gate3"]
+let gatesPassed = []
+let firstGatePassed
+let lapDurations = []
+AFRAME.registerComponent('gate-through', {
+  dependencies: ['raycaster'],
+
+  init: function () {
+    this.el.addEventListener('raycaster-intersection', function (e) {
+	if (!firstGatePassed) firstGatePassed = +Date.now()
+	let gateId = e.target.parentElement.id
+	setFeedbackHUD("gate through "+ gateId)
+	e.target.parentElement.setAttribute("color", "orange")
+	gatesPassed.push(gateId)
+	if (gatesPassed.length >= gatesToPass.length && gatesPassed.slice(-gatesToPass.length).join() == gatesToPass.join()){
+	    lap = Date.now() - firstGatePassed 
+	    setFeedbackHUD("circuit done in "+(lap/1000).toFixed(2)+"s")
+	    if (lapDurations.length && lap < lapDurations.sort()[0])
+		    setFeedbackHUD("fastest lap!")
+	    lapDurations.push(lap)
+	    gatesPassed = []
+	    firstGatePassed = null
+	}
+    });
+  }
+});
+
 // used for testing
 AFRAME.registerComponent('startfunctions', {
   init: function () {
@@ -3064,10 +3091,10 @@ AFRAME.registerComponent('startfunctions', {
       <a-entity id="rig" animation="property: position.y; to: 0.4; dir: alternate; loop:1; startEvents:jump; dur: 400">
 		<a-sound src="../content/street-crowd-ambience.mp3" autoplay=true loop=true volume=0.2></a-sound><!-- warning skipped on Quest, does autoplay there -->
 		<a-sound id="snapping-sound" src="url(../content/magnets_snap.mp3)"></a-sound>
-		<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" 
+		<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;"
 			hud camera look-controls wasd-controls waistattach="target: .movebypinch" position="0 1.6 0">
 			<a-entity position="0 -1.2 0" rotation="-25 0 0" collision-check raycaster="far:.2; interval: 100; objects: .cubes; showLine:true;" ></a-entity>
-
+			<a-box visible="false" id="playerwithbody"></a-box>
 			<a-cone id="sword" 
 				collision-check-target raycaster="far:.6; interval: 100; objects: .target; showLine:true; direction:0 1 0"
 				color="gray" radius-bottom=".1" radius-top="0.01" position="0.5 -0.2 -1" height="1" rotation="-90 0 0"></a-cone>
@@ -3076,6 +3103,16 @@ AFRAME.registerComponent('startfunctions', {
 		<a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
       </a-entity>
 
+      <a-torus id="gate1" scale="1 2 1" position="0 -.2 -1" color="#43A367" arc="180" radius="2" radius-tubular="0.1">
+	      <a-entity position="-2 1 0" gate-through raycaster="far:4; interval: 100; objects: #playerwithbody; showLine:true; direction:1 0 0"></a-entity>
+      </a-torus>
+      <a-torus id="gate2" scale="1 2 1" position="-2 -.2 -3" rotation="0 45 0" color="#43A367" arc="180" radius="2" radius-tubular="0.1">
+	      <a-entity position="-2 1 0" gate-through raycaster="far:4; interval: 100; objects: #playerwithbody; showLine:true; direction:1 0 0"></a-entity>
+      </a-torus>
+      <a-torus id="gate3" scale="1 2 1" position="-4 -.2 -5" rotation="0 90 0" color="#43A367" arc="180" radius="2" radius-tubular="0.1">
+	      <a-entity position="-2 1 0" gate-through raycaster="far:4; interval: 100; objects: #playerwithbody; showLine:true; direction:1 0 0"></a-entity>
+      </a-torus>
+
       <a-cylinder rotation="90 0 0" position="0 2 -3" class="target" color="white" height=".1" radius="1"></a-cylinder>
       <a-cylinder rotation="90 0 0" position="0 2 -2.9" class="target" color="red" height=".1" radius=".7"></a-cylinder>
       <a-cylinder rotation="90 0 0" position="0 2 -2.8" class="target" color="white" height=".1" radius=".4"></a-cylinder>