interactive objects parametrization

src/components/SceneDesigner/GameObject.vue

@@ -16,21 +16,29 @@
                 <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose game object</v-btn>
             </template>
         </asset-selector>
-        <v-form class="py-4">
+        <v-form class="pt-4">
             <v-text-field density="compact" :label="l.name" v-model="modelValue.title"></v-text-field>
             <v-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
             <v-text-field density="compact" :label="l.id" v-model="modelValue.id"></v-text-field>
         </v-form>
     </v-card>
+    
+    <v-container v-if="selected && modelValue.io">
+        <component :is="modelValue.io.id" v-model="modelValue.io"></component>
+    </v-container>
 </template>
 
 <script>
 import SvgIcon from './SvgIcon.vue';
 import Utils from '@/lib/Utils';
 
+import VideoPlayer from '../InteractiveObjects/VideoPlayer.vue';
+import PuzzleGame1 from '../InteractiveObjects/PuzzleGame1.vue';
+import MazeQuizGame from '../InteractiveObjects/MazeQuizGame/MazeQuizGame.vue';
+
 export default {
   emits:['target', 'preview'],
-  components: { SvgIcon },
+  components: { SvgIcon, VideoPlayer, PuzzleGame1, MazeQuizGame },
     data(){
         return {
             active: false
@@ -65,6 +73,12 @@ export default {
             this.modelValue.go = e.id;
             if (this.modelValue.id == this.modelValue.title){
                 this.modelValue.title = e.name
+                delete this.modelValue.io;
+            }
+            if (e.type == 'InteractiveObject'){
+                this.modelValue.io = {
+                    id: e.id
+                };
             }
         }
     }