From b1a13c339bfc213c145c3254acd2520390911d8d Mon Sep 17 00:00:00 2001
From: goynov <goynov@gmail.com>
Date: Wed, 4 Feb 2026 18:12:19 +0200
Subject: [PATCH] #51

---
 src/components/InteractiveObjects/ClassicPuzzle.js     | 6 ++++--
 src/components/InteractiveObjects/ClassicPuzzle.vue    | 1 +
 src/components/InteractiveObjects/PairMatchingGame.vue | 2 +-
 src/components/InteractiveObjects/PuzzleGame1.js       | 3 ++-
 src/components/InteractiveObjects/PuzzleGame1.vue      | 1 +
 src/components/InteractiveObjects/PuzzleGame2.js       | 3 ++-
 src/components/InteractiveObjects/PuzzleGame2.vue      | 1 +
 src/components/SceneDesigner/GameObject.vue            | 4 ++--
 8 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/InteractiveObjects/ClassicPuzzle.js b/src/components/InteractiveObjects/ClassicPuzzle.js
index da7eaf5..5e9cfdd 100644
--- a/src/components/InteractiveObjects/ClassicPuzzle.js
+++ b/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){
diff --git a/src/components/InteractiveObjects/ClassicPuzzle.vue b/src/components/InteractiveObjects/ClassicPuzzle.vue
index e8f10ff..0dffcd7 100644
--- a/src/components/InteractiveObjects/ClassicPuzzle.vue
+++ b/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>
diff --git a/src/components/InteractiveObjects/PairMatchingGame.vue b/src/components/InteractiveObjects/PairMatchingGame.vue
index f781dc9..626f498 100644
--- a/src/components/InteractiveObjects/PairMatchingGame.vue
+++ b/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>
diff --git a/src/components/InteractiveObjects/PuzzleGame1.js b/src/components/InteractiveObjects/PuzzleGame1.js
index eadee98..4e37e16 100644
--- a/src/components/InteractiveObjects/PuzzleGame1.js
+++ b/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({
diff --git a/src/components/InteractiveObjects/PuzzleGame1.vue b/src/components/InteractiveObjects/PuzzleGame1.vue
index bc3d209..397c5cd 100644
--- a/src/components/InteractiveObjects/PuzzleGame1.vue
+++ b/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>
diff --git a/src/components/InteractiveObjects/PuzzleGame2.js b/src/components/InteractiveObjects/PuzzleGame2.js
index b15a9a7..43d19e5 100644
--- a/src/components/InteractiveObjects/PuzzleGame2.js
+++ b/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
diff --git a/src/components/InteractiveObjects/PuzzleGame2.vue b/src/components/InteractiveObjects/PuzzleGame2.vue
index dcf7631..65b61ae 100644
--- a/src/components/InteractiveObjects/PuzzleGame2.vue
+++ b/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>
diff --git a/src/components/SceneDesigner/GameObject.vue b/src/components/SceneDesigner/GameObject.vue
index 5841140..efeed64 100644
--- a/src/components/SceneDesigner/GameObject.vue
+++ b/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>