interactive objects parametrization

src/components/InteractiveObjects/InteractiveObject.js

@@ -2,16 +2,16 @@
 import { Group, AnimationMixer, LoopPingPong, Vector3 } from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { assignMaterial, assignParams } from "@/lib/MeshUtils";
-import { Game1 } from "./PuzzleGame1";
-import { Game2 } from "./PuzzleGame2";
+import { PuzzleGame1 } from "./PuzzleGame1";
+import { PuzzleGame2 } from "./PuzzleGame2";
 // import { Game3 } from "./games/Game3";
-import { Game4 } from "./PuzzleGame4";
+import { PuzzleGame4 } from "./PuzzleGame4";
 // import { Game5 } from "./games/Game5";
 // import { Game6 } from "./games/Game6";
 import { TextObject } from "./TextObject";
 import { ImageObject } from "./ImageObject";
 
-const games = {Game1, Game2, Game4};
+const games = {PuzzleGame1, PuzzleGame2, PuzzleGame4};
 
 class InteractiveObject {
     constructor(obj, context) {
@@ -75,12 +75,12 @@ class InteractiveObject {
                     assignMaterial(mesh, obj, context);
                     resolve(mesh);
                     break;
-                case 'Game1':
-                case 'Game2':
-                case 'Game3':
-                case 'Game4':
-                case 'Game5':
-                case 'Game6':
+                case 'PuzzleGame1':
+                case 'PuzzleGame2':
+                case 'PuzzleGame3':
+                case 'PuzzleGame4':
+                case 'PuzzleGame5':
+                case 'PuzzleGame6':
                     var game = new games[obj.type](context, obj.args[0], obj.args[1], obj.args[2]);
                     mesh = game.object;
                     mesh.game = game;
@@ -129,16 +129,14 @@ class InteractiveObject {
     }
 }
 
-    
-// function textObject(text, context){
-//     const geometry = new TextGeometry( text, {
-//         font: context.font,
-//         size: .05,
-//         height: .01,
-//         curveSegments: 1
-//     } );
-//     return new Mesh(geometry, context.fontMaterial);
-// }
+const InteractiveObjectTypes = [
+    {
+        id: 'PuzzleGame1', name: 'Puzzle Game 1'
+    }, {
+        id: 'MazeQuizGame', name: 'Maze Quiz Game'
+    }, {
+        id: 'VideoPlayer', name: 'Video Player'
+    }
+]
 
-
-export {InteractiveObject}
+export { InteractiveObject, InteractiveObjectTypes }

src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js

@@ -96,7 +96,7 @@ class MazeQuizGame {
             )
             let dd;
             if (d == 'f'){
-                dd = Math.round() > 0.5 ? 'l' : 'r';
+                dd = Math.random() > 0.5 ? 'l' : 'r';
             }else {
                 dd = d == 'l' ? 'r' : 'l'
             }

src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        MAZE
+    </div>
+</template>
+
+<script>
+export default {
+    
+}
+</script>

src/components/InteractiveObjects/PuzzleGame1.js

@@ -2,7 +2,7 @@ import { BoxGeometry, Mesh, MeshBasicMaterial, Group } from 'three';
 import { TextureLoader } from 'three/src/loaders/TextureLoader';
 import { MotionEngine } from '../../lib/MotionEngine';
 
-class Game1 {
+class PuzzleGame1 {
     constructor(context, image, w, h) {
         this.object = new Group();
         const aq = new MotionEngine();
@@ -93,4 +93,4 @@ class Game1 {
     }
 }
 
-export {Game1}
+export { PuzzleGame1 }

src/components/InteractiveObjects/PuzzleGame1.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+export default {
+    
+}
+</script>

src/components/InteractiveObjects/PuzzleGame2.js

@@ -2,7 +2,7 @@ import { BoxGeometry, Mesh, MeshBasicMaterial, Group } from 'three';
 import { TextureLoader } from 'three/src/loaders/TextureLoader';
 import { MotionEngine } from '../../lib/MotionEngine';
 
-class Game2 {
+class PuzzleGame2 {
     constructor(context, image, w, h) {
         const texture = new TextureLoader().load(image);
         //texture.encoding = sRGBEncoding;
@@ -143,4 +143,4 @@ class Game2 {
     }
 }
 
-export { Game2 };
+export { PuzzleGame2 };

src/components/InteractiveObjects/PuzzleGame4.js

@@ -2,7 +2,7 @@ import { Group, RGBAFormat } from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { MotionEngine } from '../../lib/MotionEngine';
 
-var Game4 = function(context, gltf, w, h){
+var PuzzleGame4 = function(context, gltf, w, h){
     this.object = new Group();
     const aq = new MotionEngine();
     const pr = [];
@@ -121,4 +121,4 @@ var Game4 = function(context, gltf, w, h){
     }
 }
 
-export { Game4 }
+export { PuzzleGame4 }

src/components/InteractiveObjects/VideoPlayer.vue

@@ -1,24 +1,20 @@
 <template>
-<v-card v-if="selected" :title="modelValue.title" class="mx-2" variant="text">
     <asset-selector @select="assignVideoObject" :type="['Descriptive']">
         <template v-slot:activator="props">
-            <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose video object</v-btn>
+            <v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Choose video object</v-btn>
         </template>
     </asset-selector>
-    <v-form class="py-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-card v-if="modelValue.go">
+        <v-card-item>
+            <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
+            <div class="text-caption text-center">{{ modelValue.title }}</div>
+        </v-card-item>
+    </v-card>
 </template>
 
 <script>
 
-import Utils from '@/lib/Utils';
-
 export default {
-  emits:['target', 'preview'],
     data(){
         return {
             active: false
@@ -28,32 +24,12 @@ export default {
         this.active = true;
     },
     props:{
-        //context: Object,
-        modelValue: Object,
-        vd: Object,
-        selected: Boolean, 
-        cid:String, 
-        visible: Boolean,
-        parent: Object
+        modelValue: Object
     },
-    computed:{
-        showInView(){
-            this.vd.__showInView = this.visible && this.parent.visible;
-            return this.vd.__showInView;
-        }
-    },
-    steps: [['x1', 'y1']],
-    name: 'game-object',
-    modifiers: ['x1', 'y1'],
     methods:{
-        intersect(v){
-            return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);
-        },
-        assignGameObject(e){
+        assignVideoObject(e){
             this.modelValue.go = e.id;
-            if (this.modelValue.id == this.modelValue.title){
-                this.modelValue.title = e.name
-            }
+            this.modelValue.title = e.name
         }
     }
 }