#51

src/components/InteractiveObjects/GenenricObject.js

@@ -36,7 +36,7 @@ class GenericObject extends EventManager{
                             }
                         }
                         if (data.description){
-                            engine.dashboard.updateText(this.object.__onhud ? data.description : '', (d)=>{
+                            engine.dashboard.updateText(this.object.__onhud ? data.description : '', false, (d)=>{
                                 d && this.dispatchEvent({type:'finish'})
                             })
                         }

src/components/InteractiveObjects/InteractiveObject.js

@@ -64,6 +64,13 @@ class InteractiveObject extends EventManager{
                     //     this.io.addEventListener?.(event, this.dispatchEvent.bind(this))
                     // })
                     this.io.forwardEvents?.(this);
+                    if (this.emits?.includes('interaction')){
+                        this.io.once('interaction', ()=>{
+                            if (obj.introText){
+                                engine.dashboard.updateText(obj.introText, true)
+                            }
+                        })
+                    }
                     break;
             }
             if (obj.shouldBeLocked){

src/components/InteractiveObjects/PairMatchingGame.js

@@ -5,7 +5,7 @@ import { EventManager } from '@/lib/EventManager';
 import Utils from '@/lib/Utils';
 
 class PairMatchingGame extends EventManager {
-    emits = ['finish']
+    emits = ['finish', 'interaction']
     constructor(engine, data) {
         super();
         return new Promise(async (resolve, reject)=>{
@@ -76,6 +76,7 @@ class PairMatchingGame extends EventManager {
             let actionDef = {material:{emissiveIntensity:k=>(1+Math.sin((k*2+1.5)*Math.PI))*4 }};
 
             let clickFn = (i) => {
+                this.dispatchEvent({type:'interaction'});
                 let oc = clicked;
                 if (done.includes(i.object.userData.gd.id)) return;
                 clicked = i.object;

src/components/InteractiveObjects/PairMatchingGame.vue

@@ -1,6 +1,7 @@
 <template>
     <div v-if="modelValue.go">
         <v-number-input density="compact" label="Number of elements" v-model="modelValue.c"></v-number-input>
+        <v-textarea :label="l.description" v-model="modelValue.introText" class="mt-3"></v-textarea>
         <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
         <div class="text-caption text-center">{{ modelValue.title }}</div>
     </div>

src/lib/Dashboard.js

@@ -5,6 +5,7 @@ import {
 
 import { Text } from "troika-three-text";
 import { EventManager } from "./EventManager";
+import Utils from "./Utils";
 class DashBoard extends EventManager {
 	#points = 0;
 	constructor(engine) {
@@ -133,13 +134,13 @@ class DashBoard extends EventManager {
 			});
 		}
 
-		this.updateText = function(t, textScrolledCallback){
+		this.updateText = function(t, hideOnFinish = false, textScrolledCallback){
 			if (!textPlane) return;
 			textPlane.visible = !!t;
 			engine.motionQueue.clear(text);
 			text.text = t;
 			text.anchorY = 0.03 * dashHeight;
-			text.sync(()=>{
+			text.sync(async()=>{
 				let dMax = text.textRenderInfo.blockBounds[3] - text.textRenderInfo.blockBounds[1];
 				let dh = dMax + text.clipRect[1];
 				if (dh > 0){
@@ -148,6 +149,9 @@ class DashBoard extends EventManager {
 						if (text.textRenderInfo.blockBounds[1]> text.clipRect[1] * 1.33 ){
 							textScrolledCallback?.(true);
 							textScrolledCallback = null;
+							if (hideOnFinish){
+								this.updateText('')
+							}
 						}
 					}
 					engine.motionQueue.add({
@@ -157,7 +161,13 @@ class DashBoard extends EventManager {
 						u: updateFn
 					})
 				}else{
+					if (hideOnFinish){
+						await Utils.wait(10000);
+						this.updateText('')
 						textScrolledCallback?.(false)
+					}else{
+						textScrolledCallback?.(false)
+					}
 				}
 			})
 		}