refactor

src/components/GamePlaying/GamePlaying.vue

@@ -54,11 +54,11 @@
 
 import { GameEngine } from '@/lib/GameEngine';
 import { Hero } from '@/lib/Hero';
-import { Game1 } from '@/lib/interactive-objects/Game1';
+import { Game1 } from '@/components/InteractiveObjects/PuzzleGame1';
-import { Game2 } from '@/lib/interactive-objects/Game2';
+import { Game2 } from '@/components/InteractiveObjects/PuzzleGame2';
-import { Game4 } from '@/lib/interactive-objects/Game4';
+import { Game4 } from '@/components/InteractiveObjects/PuzzleGame4';
-import { Grass } from '@/lib/interactive-objects/Grass';
+import { Grass } from '@/components/InteractiveObjects/Grass';
-import { VideoPlayer } from '@/lib/interactive-objects/VideoPlayer';
+import { VideoPlayer } from '@/components/InteractiveObjects/VideoPlayer';
 import { useAppStore } from '@/stores/app';
 
 const store = useAppStore();

src/components/InteractiveObjects/PuzzleGame1.js

@@ -1,6 +1,6 @@
 import { BoxGeometry, Mesh, MeshBasicMaterial, Group } from 'three';
 import { TextureLoader } from 'three/src/loaders/TextureLoader';
-import { MotionEngine } from '../MotionEngine';
+import { MotionEngine } from '../../lib/MotionEngine';
 
 class Game1 {
     constructor(context, image, w, h) {

src/components/InteractiveObjects/PuzzleGame2.js

@@ -1,6 +1,6 @@
 import { BoxGeometry, Mesh, MeshBasicMaterial, Group } from 'three';
 import { TextureLoader } from 'three/src/loaders/TextureLoader';
-import { MotionEngine } from '../MotionEngine';
+import { MotionEngine } from '../../lib/MotionEngine';
 
 class Game2 {
     constructor(context, image, w, h) {

src/components/InteractiveObjects/PuzzleGame4.js

@@ -1,6 +1,6 @@
 import { Group, RGBAFormat } from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { MotionEngine } from '../MotionEngine';
+import { MotionEngine } from '../../lib/MotionEngine';
 
 var Game4 = function(context, gltf, w, h){
     this.game = new Group();

src/components/InteractiveObjects/VideoPlayer.js

@@ -2,7 +2,6 @@ import * as THREE from 'three';
 
 
 class VideoPlayer {
-
     constructor(context, video, w, h){
         let geometry = new THREE.PlaneGeometry( w, h );
         let map = new THREE.VideoTexture( video );
@@ -25,7 +24,6 @@ class VideoPlayer {
             }
         });
     }
-
 }
 
 export {VideoPlayer}

src/components/InteractiveObjects/VideoPlayer.vue

@@ -0,0 +1,60 @@
+<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>
+        </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>
+</template>
+
+<script>
+
+import Utils from '@/lib/utils';
+
+export default {
+  emits:['target', 'preview'],
+    data(){
+        return {
+            active: false
+        }
+    },
+    mounted(){
+        this.active = true;
+    },
+    props:{
+        //context: Object,
+        modelValue: Object,
+        vd: Object,
+        selected: Boolean, 
+        cid:String, 
+        visible: Boolean,
+        parent: 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){
+            this.modelValue.go = e.id;
+            if (this.modelValue.id == this.modelValue.title){
+                this.modelValue.title = e.name
+            }
+        }
+    }
+}
+</script>