#72 epic refactoring

src/components/GamePlay/GamePlay.vue

@@ -6,44 +6,57 @@
         <div ref="target" @click="targetClick" class="canvas-wrapper"
             @mousedown="targetPointer($event, 'start')" 
             @mousemove="targetPointer($event, 'drag')" 
-            @mouseup="targetPointer($event, 'end')" 
-            @pointerdown="targetPointerDown"></div>
+            @mouseup="targetPointer($event, 'end')"></div>
     </div>
-    <video class="d-none" src="" ref="videoPlayer"></video>
 </template>
 
 <script>
-
-import { useAppStore } from '@/stores/app';
-
-import GameEnvironmentMixin from '@/mixins/GameEnvironmentMixin';
-
-const store = useAppStore();
+import { GameEngine } from '@/lib/GameEngine';
+import { GameManager } from '@/lib/GameManager';
+let engine = null, manager = null;
 
 export default {
-    mixins:[GameEnvironmentMixin],
-    props:{
-        modelValue: Object,
+    props:['id'],
+    async mounted(){
+        engine = new GameEngine();
+        await engine.init(this.$refs.target, { 
+            xr: true,
+            mode: 'GamePlay'
+        });
+        manager = await new GameManager(engine, this.id);
+        window.addEventListener('resize', this.resize);
+        manager.loadScene(manager.scenarioData.scenes[0].data.id)
     },
-    watch:{
-        scenario(n){
-            this.debug('Scenario changed', n);
-            if (n){
-                this.scenesList = [this.scenes?.[0]];
-            }
+
+    async unmounted(){
+        this.debug('Disposing scene')
+        window.removeEventListener('resize', this.resize);
+        engine.tm?.setGame(null);
+        engine.dispose();
+        this.debug('Disposed scene', JSON.stringify(engine.renderer.info.memory));
+        engine = null;
+        manager = null;
+    },
+
+    methods:{
+
+        targetClick(e){
+            engine.onClick(e, this.$refs.target);
+        },
+
+        targetPointer(e, t){
+            engine.onPointer(e, this.$refs.target, t);
+        },
+
+        resize(){
+            let r = this.$refs.target;
+            this.debug('resizing', r.clientWidth, r.clientHeight, r)
+            engine.resize(r.clientWidth, r.clientHeight);
+        },
+
+        async fullScreen(){
+            await engine.renderer.domElement.requestFullscreen()
         }
-    },
-    data(){
-        return {
-            env: 'GamePlay',
-            scenesList: [],
-            objectsList: [],
-            pointerDownTime: 0,
-            scenario: null,
-            renderType: 'ST',
-            cameraType: 'perspective',
-            store
-        }
-    },
+    }
 }
 </script>