From 10b5fa5413ac9095316c1e629d884d13dc6ac339 Mon Sep 17 00:00:00 2001
From: "Diego F. Goberna" <diego@feiss.be>
Date: Fri, 2 Nov 2018 16:22:11 +0100
Subject: [PATCH] tutorial code tweaks from kevin comments

---
 src/index.html              |  2 +-
 src/templates/tutorial.html | 37 +++++++++++++++++--------------------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/index.html b/src/index.html
index 22525a7..cd07555 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@
       effect-bloom="strength: 1"
       gpu-preloader
       loading-screen="backgroundColor: #000;"
-      overlay="objects: #rightHand, #leftHand, [mixin~='cursorMesh'], .overlay, #tutorial"
+      overlay="objects: #rightHand, #leftHand, [mixin~='cursorMesh'], .overlay"
       pool__beat-arrow-blue="mixin: arrowBlueBeat; size: 5; container: #beatContainer"
       pool__beat-arrow-red="mixin: arrowRedBeat; size: 10; container: #beatContainer"
       pool__beat-dot-blue="mixin: dotBlueBeat; size: 10; container: #beatContainer"
diff --git a/src/templates/tutorial.html b/src/templates/tutorial.html
index 723623c..c9ed0f8 100644
--- a/src/templates/tutorial.html
+++ b/src/templates/tutorial.html
@@ -1,29 +1,22 @@
-
-
 <a-entity id="tutorial"
+  class="overlay"
   position="1.1 1.6 0.2"
   rotation="0 -90 0"
   scale="0.8 0.8 0.8"
   bind__visible="menuActive">
-  <a-entity mixin="slice" slice9="width: 0.94; height: 0.25; left: 70; padding: 0.03; opacity: 0.9" position="-0.62 -0.18 -0.01" raycastable=""></a-entity>
-  <a-entity mixin="slice" slice9="width: 1.29; height: 0.21; left: 70; padding: 0.03; opacity: 0.9" position="-0.44 -0.455 -0.01" raycastable=""></a-entity>
-  <a-entity mixin="slice" slice9="width: 1.21; height: 0.21; left: 70; padding: 0.03; opacity: 0.9" position="-0.48 -0.715 -0.01" raycastable=""></a-entity>
-
+  <a-entity mixin="slice" slice9="width: 0.94; height: 0.25; left: 70; padding: 0.03; opacity: 0.9" position="-0.62 -0.18 -0.01"></a-entity>
+  <a-entity mixin="slice" slice9="width: 1.29; height: 0.21; left: 70; padding: 0.03; opacity: 0.9" position="-0.44 -0.455 -0.01"></a-entity>
+  <a-entity mixin="slice" slice9="width: 1.21; height: 0.21; left: 70; padding: 0.03; opacity: 0.9" position="-0.48 -0.715 -0.01"></a-entity>
   <a-entity position="-0.3 0 0">
-    <a-entity mixin="font" position="-0.64 -0.18 0" geometry="primitive: ring; radiusInner: 0.07; radiusOuter: 0.085; segmentsPhi: 1; segmentsTheta: 30" material="shader: flat; color: #ffffff"></a-entity>
-    <a-entity mixin="font" position="-0.64 -0.45 0" geometry="primitive: ring; radiusInner: 0.07; radiusOuter: 0.085; segmentsPhi: 1; segmentsTheta: 30" material="shader: flat; color: #ffffff"></a-entity>
-    <a-entity mixin="font" position="-0.64 -0.705 0" geometry="primitive: ring; radiusInner: 0.07; radiusOuter: 0.085; segmentsPhi: 1; segmentsTheta: 30" material="shader: flat; color: #ffffff"></a-entity>
-
-    <a-entity mixin="font" text="align: center; value: 1; wrapCount: 22" position="-0.64 -0.25 0"></a-entity>
-    <a-entity mixin="font" text="align: center; value: 2; wrapCount: 22" position="-0.64 -0.51 0"></a-entity>
-    <a-entity mixin="font" text="align: center; value: 3; wrapCount: 22" position="-0.64 -0.77 0"></a-entity>
-
-    <a-entity mixin="font" text="value: Slice the beats; wrapCount: 30" position="-0.01 -0.2 0"></a-entity>
+    <a-entity geometry-merger="preserveOriginal: false" material="shader: flat; color: #ffffff">
+      <a-entity position="-0.64 -0.18 0" geometry="primitive: ring; radiusInner: 0.07; radiusOuter: 0.085; segmentsPhi: 1; segmentsTheta: 30; buffer: false"></a-entity>
+      <a-entity position="-0.64 -0.45 0" geometry="primitive: ring; radiusInner: 0.07; radiusOuter: 0.085; segmentsPhi: 1; segmentsTheta: 30; buffer: false"></a-entity>
+      <a-entity position="-0.64 -0.705 0" geometry="primitive: ring; radiusInner: 0.07; radiusOuter: 0.085; segmentsPhi: 1; segmentsTheta: 30; buffer: false"></a-entity>
+    </a-entity>
+    <a-entity mixin="font" text="align: center; value: 1\n2\n3; baseline: top; wrapCount: 22; lineHeight: 117" position="-0.64 -0.220 0"></a-entity>
+    <a-entity mixin="font" text="baseline: top; lineHeight: 30.21; value: Slice the beats\n\n\n\n\n\nDodge walls, avoid cutting mines\n\n\n\n\nMore swing, more points!; wrapCount: 30" position="-0.01 -0.18 0"></a-entity>
     <a-entity mixin="font" text="value: (mind color and direction!)" position="-0.01 -0.26 0"></a-entity>
-    <a-entity mixin="font" text="value: Dodge walls, avoid cutting mines; wrapCount: 30" position="-0.01 -0.5 0"></a-entity>
-    <a-entity mixin="font" text="value: More swing, more points!; wrapCount: 30" position="-0.01 -0.75 0"></a-entity>
   </a-entity>
-
 </a-entity>
 
 <a-entity id="tutorialBloom"
@@ -41,6 +34,7 @@
     material="side: double; shader: flat; transparent: true; src: #tutorialImg"
     position="0.12 -0.3 0"
     scale="0.9 0.9 0.9"
+    bind__animation="enabled: menuActive"
     animation="property: object3D.rotation.y; from: -20; to: 35; dur: 5000; dir: alternate; easing: easeInOutCubic; loop: true"
     ></a-entity>
 
@@ -48,12 +42,14 @@
     position="0.59 -0.34 0">
     <a-entity
       geometry="width: 0.3; height: 0.04; depth: 0.3"
+      bind__animation="enabled: menuActive"
       animation="property: object3D.position.z; from: -0.5; to: -0.1; dur: 2000; easing: linear; loop: true; easing: easeInOutCubic"
       material="shader: wall-shader; tex: #noiseTexture; repeat: 1 2; transparent: true"></a-entity>
     <a-entity
       obj-model="obj: #mineObj"
       scale="0.2 0.2 0.2"
       position="-0.04 -0.07 0.03"
+      bind__animation="enabled: menuActive"
       animation="property: object3D.position.z; from: -0.24; to: 0.1; dur: 2000; easing: linear; loop: true; easing: easeInOutCubic"
       material="color: #161616; roughness: 0.38; metalness: 0.48;"
       ></a-entity>
@@ -61,16 +57,17 @@
       obj-model="obj: #mineObj"
       scale="0.2 0.2 0.2"
       position="-0.09 -0.18 0.01"
+      bind__animation="enabled: menuActive"
       animation="property: object3D.position.z; from: -0.25; to: -0.04; dur: 2000; easing: linear; loop: true; easing: easeInOutCubic"
       material="color: #161616; roughness: 0.38; metalness: 0.48;"
       ></a-entity>
     <a-entity
       obj-model="obj: #tutorial2Obj"
       material="side: double; shader: flat; transparent: true; src: #tutorialImg"
-      animation__tx="property: object3D.position.x; from: 0.05; to: 0.098; dur: 2000; easing: linear; loop: true; easing: easeInOutCubic"
+      bind__animation="enabled: menuActive"
+      animation="property: object3D.position.x; from: 0.05; to: 0.098; dur: 2000; easing: linear; loop: true; easing: easeInOutCubic"
       position="0.098 -0.26 0"
       scale="0.9 0.9 0.9"
       ></a-entity>
   </a-entity>
-
 </a-entity>