#51

src/components/InteractiveObjects/ClassicPuzzle.js

@@ -3,7 +3,7 @@ import { EventManager } from '@/lib/EventManager';
 import { centerOrigin } from "@/lib/MeshUtils";
 
 class ClassicPuzzle extends EventManager {
-    emits = ['finish']
+    emits = ['finish', 'interaction']
     constructor(engine, data, objPrefix='Plane'){
         super();
         const container = new Group();
@@ -19,7 +19,9 @@ class ClassicPuzzle extends EventManager {
             let dragZone = gltf.scene.getObjectByName('DragZone');
             dragZone.material.side = DoubleSide;
             let eventsFn= {
-                start(){},
+                start(){
+                    that.dispatchEvent({type:'interaction'});
+                },
                 drag(){},
                 end(e){
                     if (Math.abs(e.o.position.x)<.1 && Math.abs(e.o.position.y)<.1){

src/components/InteractiveObjects/ClassicPuzzle.vue

@@ -1,6 +1,7 @@
 <template>
     <div v-if="modelValue.go">
         <v-select label="Dimension" v-model="modelValue.dimension" :items="['3x3', '5x4', '6x6']" density="compact"></v-select>
+        <v-textarea :label="l.description" v-model="modelValue.introText"></v-textarea>
         <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
         <div class="text-caption text-center">{{ modelValue.title }}</div>
     </div>

src/components/InteractiveObjects/PairMatchingGame.vue

@@ -1,7 +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-textarea :label="l.description" v-model="modelValue.introText"></v-textarea>
         <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
         <div class="text-caption text-center">{{ modelValue.title }}</div>
     </div>

src/components/InteractiveObjects/PuzzleGame1.js

@@ -3,7 +3,7 @@ import { centerOrigin } from '@/lib/MeshUtils';
 import { EventManager } from '@/lib/EventManager';
 
 class PuzzleGame1 extends EventManager {
-    emits = ['finish']
+    emits = ['finish', 'interaction']
     constructor(engine, data) {
         super();
         return new Promise(async (resolve, reject)=>{
@@ -71,6 +71,7 @@ class PuzzleGame1 extends EventManager {
             };
 
             let clickFn = (i) => {
+                this.dispatchEvent({type:'interaction'});
                 if (!this.done && !aq.isActive(i.object)) {
                     i.object._ri = (i.object._ri + 1) % 6;
                     aq.add({

src/components/InteractiveObjects/PuzzleGame1.vue

@@ -2,6 +2,7 @@
     <div v-if="modelValue.go">
         <v-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
         <v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
+        <v-textarea :label="l.description" v-model="modelValue.introText"></v-textarea>
         <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
         <div class="text-caption text-center">{{ modelValue.title }}</div>
     </div>

src/components/InteractiveObjects/PuzzleGame2.js

@@ -3,7 +3,7 @@ import { centerOrigin } from '@/lib/MeshUtils';
 import { EventManager } from '@/lib/EventManager';
 
 class PuzzleGame2 extends EventManager {
-    emits = ['finish']
+    emits = ['finish', 'interaction']
     constructor(engine, data) {
         super();
         return new Promise(async (resolve, reject)=>{
@@ -103,6 +103,7 @@ class PuzzleGame2 extends EventManager {
             this.shuffle();
 
             let clickFn = (i) => {
+                this.dispatchEvent({type:'interaction'});
                 if (!this.done && !aq.isActive(i.object)) {
                     let idx = container.children.indexOf(i.object);
                     if (idx == lidx) return; //we ignore the empty cell

src/components/InteractiveObjects/PuzzleGame2.vue

@@ -2,6 +2,7 @@
     <div v-if="modelValue.go">
         <v-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
         <v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
+        <v-textarea :label="l.description" v-model="modelValue.introText"></v-textarea>
         <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
         <div class="text-caption text-center">{{ modelValue.title }}</div>
     </div>

src/components/SceneDesigner/GameObject.vue

@@ -29,9 +29,9 @@
             <!-- <v-text-field density="compact" :label="l.id" v-model="modelValue.id"></v-text-field> -->
             <v-number-input density="compact" label="Completion points" v-model="modelValue.points"></v-number-input>
         </v-form>
-        <v-container v-if="selected && modelValue.type">
+        <div v-if="selected && modelValue.type">
             <component :is="modelValue.type" v-model="mv"></component>
-        </v-container>
+        </div>
 
         <v-card title="Activation requirements" v-if="modelValue.type != 'CharacterObject'">
             <v-number-input density="compact" label="Level score should be above" v-model="modelValue.activationScore"></v-number-input>