avoid text overlapping

backend/app/Utils.js

@@ -94,12 +94,28 @@ const Utils = {
         })
     },
 
-    async wait(ms){
+    async wait(ms, opts = {}){
         await new Promise((resolve, reject)=>{
-            setTimeout(resolve, ms)
+            opts.id = setTimeout(resolve, ms)
+            opts.resolve = resolve;
+            opts.reject = reject;
         })
     },
 
+    async killWait(opts){
+        if (opts.id){
+            clearTimeout(opts.id);
+            if (opts.onKill == 'resolve') {
+                await opts.resolve()
+            }else {
+                await opts.reject()
+            }
+            delete opts.id;
+            delete opts.resolve;
+            delete opts.reject;
+        }
+    },
+
     async waitFor(expFn){
         while (!expFn()){
             await Utils.wait(200);

src/components/InteractiveObjects/GenericObject/GenericObject.js

@@ -31,9 +31,9 @@ class GenericObject extends EventManager{
 
             if (!data.exclude && (data.hud || data.description)){
                 engine.clickable.add(this.object, async e=>{
-                    this.object.__onhud = !this.object.__onhud;
                     if (engine.dashboard){
                         if (data.hud){
+                            this.object.__onhud = !this.object.__onhud;
                             const filterNoHud = a=>a.getClip().name.match(/\.nohud/)
                             if (this.object._hud ){
                                 this.#actions.filter(filterNoHud).forEach(a=>a.play());
@@ -59,10 +59,11 @@ class GenericObject extends EventManager{
                             }
                         }
                         if (data.description){
-                            engine.dashboard.updateText(this.object.__onhud ? data.description : '', {
+                            engine.dashboard.updateText((!data.hud || this.object.__onhud) ? data.description : '', {
                                 textScrolledCallback: (d)=>{
                                     d && this.dispatchEvent({type:'finish'})
-                                }
+                                },
+                                hideOnFinish: true
                             })
                         }
                     }

src/lib/Dashboard.js

@@ -11,6 +11,7 @@ import { TextObject } from "@/components/InteractiveObjects/TextObject/TextObjec
 class DashBoard extends EventManager {
 	#points = 0;
 	#attached = null;
+	#textTimeout = { onKill: 'reject' };
 	constructor(engine) {
         super();
 		let levelProgress;
@@ -138,60 +139,55 @@ class DashBoard extends EventManager {
 			sceneHeader.init(scene, startBtnCallback);
 		}
 
-		this.updateText = function(t, params = {}){
+		this.updateText = async function(t, params = {}){
 			if (!textPlane) return;
+			await Utils.killWait(this.#textTimeout);
 			textPlane.visible = !!t;
 			engine.motionQueue.clear(text);
 			text.text = t;
 			text.anchorY = 0.03 * dashHeight;
-			text.sync(async()=>{
+			return new Promise((resolve, reject)=>{
-				//console.log(text.clipRect);
+				text.sync(async()=>{
-				let dMax = text.textRenderInfo.blockBounds[3] - text.textRenderInfo.blockBounds[1];
+					//console.log(text.clipRect);
-				let dh = dMax + text.clipRect[1];
+					let dMax = text.textRenderInfo.blockBounds[3] - text.textRenderInfo.blockBounds[1];
-				if (params.startFrom){
+					let dh = dMax + text.clipRect[1];
-					text.anchorY = text.anchorY + (-dh -text.anchorY) * params.startFrom;
+					if (params.startFrom){
-				}
+						text.anchorY = text.anchorY + (-dh -text.anchorY) * params.startFrom;
-				if (dh > 0){
-					// let updateFn = ()=>{
-					// 	//text.sync();
-					// 	//console.log(text.clipRect, text.textRenderInfo.blockBounds)
-					// 	if (text.textRenderInfo.blockBounds[1] > text.clipRect[1] ){
-					// 		params.textScrolledCallback?.(true);
-					// 		params.textScrolledCallback = null;
-					// 		if (params.hideOnFinish){
-					// 			this.updateText('')
-					// 		}
-					// 	}
-					// }
-					engine.motionQueue.add({
-						o: text,
-						a: { anchorY: -dh },
-						t: params.duration ? (params.duration * (1-params.startFrom||0)) : (dMax*77 / dashHeight),
-						f: async ()=>{
-							params.textScrolledCallback?.(true);
-							params.textScrolledCallback = null;
-							if (params.hideOnFinish){
-								await Utils.wait(5000);
-								this.updateText('')
-							}else{
-								engine.motionQueue.add({
-									o: text,
-									a: { anchorY: -dMax },
-									t: 4,
-									f: params.textFinishCallback
-								})
-							}
-						}
-					})
-				}else{
-					if (params.hideOnFinish){
-						await Utils.wait(10000);
-						if (text.text == t) this.updateText('')
-						params.textScrolledCallback?.(false)
-					}else{
-						params.textScrolledCallback?.(false)
 					}
-				}
+					if (dh > 0){
+						engine.motionQueue.add({
+							o: text,
+							a: { anchorY: -dh },
+							t: params.duration ? (params.duration * (1-params.startFrom||0)) : (dMax*77 / dashHeight),
+							f: async ()=>{
+								params.textScrolledCallback?.(true);
+								params.textScrolledCallback = null;
+								if (params.hideOnFinish){
+									Utils.wait(5000, this.#textTimeout).then(_=>{
+										this.updateText('')
+									}).catch(_=>{})
+								}else{
+									engine.motionQueue.add({
+										o: text,
+										a: { anchorY: -dMax },
+										t: 4,
+										f: params.textFinishCallback
+									})
+								}
+							}
+						})
+					}else{
+						if (params.hideOnFinish){
+							Utils.wait(10000, this.#textTimeout).then(_=>{
+								this.updateText('')
+								params.textScrolledCallback?.(false)
+							}).catch(_=>{});
+						}else{
+							params.textScrolledCallback?.(false)
+						}
+					}
+					resolve();
+				})
 			})
 		}