#39

src/lib/Dashboard.js

@@ -40,9 +40,12 @@ class DashBoard {
 		this.group = dash;
 		dash.add(hud);
 		hud.add(hudTarget)
+		hudTarget.position.set(0,0,0.55);
 		dash.visible = false;
+		const k = 1.55;
+		const dashWidth = engine.aspect * k, dashHeight = k;
 
-		const dashGeometry = new PlaneGeometry(engine.aspect, 1);
+		const dashGeometry = new PlaneGeometry(dashWidth, dashHeight);
 		const dashMesh = new Mesh(dashGeometry, new MeshBasicMaterial({
 			transparent: true,
 			map: texture
@@ -52,7 +55,7 @@ class DashBoard {
 		engine.scene.add(dash);
 
 		const loadingPlane = new Mesh(
-			new PlaneGeometry(engine.aspect, 1), 
+			new PlaneGeometry(dashWidth, dashHeight), 
 			new MeshStandardMaterial({
 				color:0xffffff,
 				opacity:0, transparent:true,
@@ -60,26 +63,26 @@ class DashBoard {
 			})
 		);
 		const loadingProgress = new ProgressBar(engine);
-		loadingProgress.object.scale.set(engine.aspect*0.8, 0.05, 0.05)
-		loadingProgress.object.position.set(-engine.aspect/2 + engine.aspect*0.1, 0, 0)
+		loadingProgress.object.scale.set(dashWidth*0.8, 0.05*dashHeight, 0.05*dashHeight)
+		loadingProgress.object.position.set(-dashWidth/2 + dashWidth*0.1, 0, 0)
 		loadingPlane.add(loadingProgress.object);
 		dash.add(loadingPlane);
 
 		(async()=>{
 			hudPlane = new Mesh(
-				new PlaneGeometry(engine.aspect, 1), 
+				new PlaneGeometry(dashWidth, dashHeight), 
 				new MeshBasicMaterial({
 					map: await engine.loadTexture('/static/textures/hud.png', ''),
 					opacity: 0.37,
 					transparent:true
 				})
 			);
-			hudPlane.position.z = 0;
-			hudPlane.position.y = -0.05
+			hudPlane.position.z = -0.07 * dashHeight;
+			hudPlane.position.y = -0.05 * dashHeight
 			hud.add(hudPlane)
 
 			textPlane = new Mesh(
-				new PlaneGeometry(engine.aspect, 0.17), 
+				new PlaneGeometry(dashWidth, 0.17 * dashHeight), 
 				new MeshBasicMaterial({
 					map: await engine.loadTexture('/static/textures/hud.png', ''),
 					opacity: 0.52,
@@ -87,7 +90,7 @@ class DashBoard {
 				})
 			);
 			textPlane.position.z = -0.002;
-			textPlane.position.y = -0.41
+			textPlane.position.y = -0.41 * dashHeight
 			textPlane.visible = false;
 			dash.add(textPlane)
 		})()
@@ -95,13 +98,13 @@ class DashBoard {
 		const text = new Text()
 		Object.assign(text, {
 			text:``, 
-			fontSize: 0.033, lineHeight: 1.1, maxWidth: engine.aspect * 0.8,
+			fontSize: 0.033 * dashHeight, lineHeight: 1.1 * dashHeight, maxWidth: dashWidth * 0.8,
 			textAlign: 'center', font: '/static/fonts/Montserrat-Regular.ttf',
-			anchorX: 'center', anchorY: 0.03, depthOffset: 0.1, color: 0x000000,
-			clipRect: [-engine.aspect * 0.4, -0.12, engine.aspect * 0.4, 0]
+			anchorX: 'center', anchorY: 0.03 * dashHeight, depthOffset: 0.1, color: 0x000000,
+			clipRect: [-dashWidth * 0.4, -0.12 * dashHeight, dashWidth * 0.4, 0]
 		})
 		text.sync();
-		text.position.y = -0.33;
+		text.position.set(0, -0.33 * dashHeight, 0.001);
 		dash.add(text);
 
 		const pointsText = new Text()
@@ -109,14 +112,14 @@ class DashBoard {
 			text:``, fontSize: 0.044, font: '/static/fonts/Montserrat-Bold.ttf',
 			outlineColor: 0x113377, outlineWidth: '3%', anchorX: 'center',
 		})
-		pointsText.position.set(0.86 * engine.aspect/2, 0.47, -0.001);
+		pointsText.position.set(0.86 * dashWidth/2, 0.47 * dashHeight, -0.001);
 		dash.add(pointsText);
 
 		engine.addEventListener('beforeRender', ()=>{
 			dash.quaternion.copy(engine.camera.quaternion)
 			dash.position.copy(engine.camera.position)
 			//dash.translateZ(-1.2 * engine.camera.zoom);
-			dash.translateZ(-0.5/Math.tan(engine.camera.fov/2 * Math.PI/180) * engine.camera.zoom);
+			dash.translateZ(-0.75/Math.tan(engine.camera.fov/2 * Math.PI/180) * engine.camera.zoom);
 		})
 
 		this.updateText = function(t, textScrolledCallback){
@@ -137,7 +140,7 @@ class DashBoard {
 					engine.motionQueue.add({
 						o: text,
 						a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.03 },
-						t: dh*177,
+						t: dh*177 / dashHeight,
 						u: updateFn
 					})
 				}else{
@@ -148,8 +151,8 @@ class DashBoard {
 
 		levelProgress = new ProgressBar(engine)
 		dash.add(levelProgress.object);
-		levelProgress.object.position.set(-engine.aspect/2 + engine.aspect/30, 0.45, -0.001)
-		levelProgress.object.scale.set(engine.aspect/3, 0.02, 0.02)
+		levelProgress.object.position.set(-dashWidth/2 + dashWidth/30, 0.45 * dashHeight, -0.001)
+		levelProgress.object.scale.set(dashWidth/3, 0.02 * dashHeight, 0.02 * dashHeight)
 		this.levelProgress = levelProgress;
 
 		this.addPoints = function(p){