#35

src/lib/Dashboard.js

@@ -1,24 +1,14 @@
 import { 
-	PlaneGeometry, CylinderGeometry, CanvasTexture, Group, 
+	PlaneGeometry, CylinderGeometry, CanvasTexture, Group, SphereGeometry,
 	Mesh, MeshStandardMaterial, MeshBasicMaterial, DoubleSide 
 } from "three";
 
 import { Text } from "troika-three-text";
-class DashBoard {
+import { EventManager } from "./EventManager";
+class DashBoard extends EventManager {
 	#points = 0;
 	constructor(engine) {
-		let svg = p=>`<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-<g>
-	<rect x="0" y="85%" width="100%" height="15%" opacity="0.73" fill="#98d696"/>
-	<rect x="80%" y="0" width="20%" height="15%" opacity="0.73" fill="#98d696"/>
-	<rect x="0" y="0" width="20%" height="15%" opacity="0.73" fill="#98d696" visibility="hidden"/>
-	<circle r="10%" cx="11%" cy="85%" opacity="0.73" fill="#98d696" visibility="hidden"/>
-</g>
-<text id="hint" text-anchor="middle" x="50%" y="92%" font-family="MyriadPro-Regular, &apos;Myriad Pro&apos;" font-size="150%">${p.hint || ''}</text>
-<text x="90%" text-anchor="middle" y="8%" font-family="MyriadPro-Regular, &apos;Myriad Pro&apos;" font-size="150%">Points</text>
-</svg>`;
-		
+        super();
 		let img = new Image(), url, levelProgress;
 		let canvas = document.createElement('canvas');
 		let ctx = canvas.getContext('2d');
@@ -36,7 +26,7 @@ class DashBoard {
 
 		const dash = new Group(), hud = new Group(), hudTarget = new Group();
 		hud.visible = false;
-		let hudAnimation, hudPlane, textPlane;
+		let hudAnimation, hudPlane, textPlane, startBtn;
 		this.group = dash;
 		dash.add(hud);
 		hud.add(hudTarget)
@@ -68,8 +58,9 @@ class DashBoard {
 		loadingPlane.add(loadingProgress.object);
 		dash.add(loadingPlane);
 
-		(async()=>{
+		this.ready = new Promise(async(resolve, reject)=>{
 			let map = await engine.loadTexture('/static/textures/hud.png', '');
+			let start = await engine.loadTexture('/static/textures/play.webp', '');
 			hudPlane = new Mesh(
 				new PlaneGeometry(dashWidth * 0.96, dashHeight * 0.9), 
 				new MeshBasicMaterial({
@@ -97,7 +88,19 @@ class DashBoard {
 			// fix #44
 			textPlane.material.depthTest = false;
 			//hudPlane.material.depthTest = false;
-		})()
+			startBtn = new Mesh(
+				new SphereGeometry(dashWidth * 0.11), 
+				new MeshStandardMaterial({
+					color: 0xffffff,
+					roughnessMap: start,
+					metalness: 1
+				})
+			)
+			startBtn.visible = false;
+			startBtn.rotation.y = Math.PI/6;
+			dash.add(startBtn);
+			resolve();
+		});
 
 		const text = new Text()
 		Object.assign(text, {
@@ -127,7 +130,18 @@ class DashBoard {
 			dash.translateZ(-0.75/Math.tan(engine.camera.fov/2 * Math.PI/180) * engine.camera.zoom);
 		})
 
+		this.initScene = function(startBtnCallback){
+			this.loading(0,0);
+			startBtn.visible = false;
+			engine.clickable.add(startBtn, ()=>{
+				startBtnCallback();
+				startBtn.visible = false;
+				engine.motionQueue.clear(startBtn)
+			});
+		}
+
 		this.updateText = function(t, textScrolledCallback){
+			if (!textPlane) return;
 			textPlane.visible = !!t;
 			engine.motionQueue.clear(text);
 			text.text = t;
@@ -208,7 +222,10 @@ class DashBoard {
 					o:hudPlane, a:{scale:{y:1}}, t:.4, d:.4,
 				}])
 			}
-			if (occupied) return false;
+			if (occupied) {
+				//console.log('Sorry, occupied!')
+				return false;
+			}
 			object._hud = {
 				parent: object.parent,
 				placement: {
@@ -248,6 +265,7 @@ class DashBoard {
 		}
 
 		this.detach = (object, opts = {})=>{
+			//console.log('detaching', object)
 			engine.motionQueue.remove(hudAnimation);
 			object._hud.parent?.attach(object);
 			hud.rotation.y = 0;
@@ -265,6 +283,14 @@ class DashBoard {
 		this.loading = function(progress, tt){
 			loadingPlane.visible = progress > 0 && progress < 1;
 			loadingProgress.update(progress, tt)
+			if (progress == 1){
+				startBtn.visible = true;
+				engine.motionQueue.add(
+					{ o: startBtn, a:{
+						scale: (k,s)=>s.setScalar(1+0.05*Math.sin(4*k*Math.PI))
+					}, r: true, t: 3 },
+				)
+			}
 		}
 		this.loading(0,0);
 	}

src/lib/EventManager.js

@@ -6,6 +6,13 @@ class EventManager extends EventDispatcher{
             this.addEventListener(e, object.dispatchEvent.bind(object))
         })
     }
+    once(type, listener){
+        let wrapper = function(event){
+            listener.call(this, event);
+            this.removeEventListener(event.type, wrapper);
+        }
+        this.addEventListener(type, wrapper);
+    }
 }
 
 export { EventManager }

src/lib/GameEngine.js

@@ -594,6 +594,18 @@ class GameEngine extends THREE.EventDispatcher{
         this.ambientSound.play();
     }
 
+    showBackground(show){
+        if (show){
+            this.motionQueue.add({
+                o: this.scene,
+                a: { backgroundIntensity: 1},
+                t: 15
+            })
+        }else{
+            this.scene.backgroundIntensity = 0;
+        }
+    }
+
     static textureLoader = new THREE.TextureLoader();
     static audioLoader = new THREE.AudioLoader();