From b1de42dcb7ef520f16aa31f10106e6422feabb07 Mon Sep 17 00:00:00 2001
From: goynov <goynov@gmail.com>
Date: Mon, 2 Jun 2025 19:29:44 +0300
Subject: [PATCH] xr and gameplay

---
 src/components/AppHeader.vue                 |   2 +
 src/components/GameDesigner/GameDesigner.vue |   1 +
 src/components/GamePlaying/GamePlaying.vue   | 214 +++++++++++++++++++
 src/lib/gameEngine.js                        |   2 +
 src/pages/play/[[id]].vue                    |  44 ++++
 src/pages/play/list.vue                      |  29 +++
 src/plugins/lang.js                          |   2 +
 7 files changed, 294 insertions(+)
 create mode 100644 src/components/GamePlaying/GamePlaying.vue
 create mode 100644 src/pages/play/[[id]].vue
 create mode 100644 src/pages/play/list.vue

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 6e6ce32..a10db61 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -25,6 +25,8 @@
             <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item>
             <v-divider></v-divider>
             <v-list-item prepend-icon="mdi-controller" :title="l.games" to="/games/list"></v-list-item>
+            <v-list-item prepend-icon="mdi-cog-play" :title="l.play" to="/play/list"></v-list-item>
+            
         </v-list>
         <v-divider></v-divider>
         <v-list nav>
diff --git a/src/components/GameDesigner/GameDesigner.vue b/src/components/GameDesigner/GameDesigner.vue
index c2d29f4..d59240f 100644
--- a/src/components/GameDesigner/GameDesigner.vue
+++ b/src/components/GameDesigner/GameDesigner.vue
@@ -175,6 +175,7 @@ export default {
         targetClick(e){
             if (performance.now() - this.pointerDownTime < 200){
                 let intersects = gameEngine.intersect(e, this.$refs.target, gameEngine.activeObjects.children, true);
+                //console.log(intersects)
                 if (intersects.length){
                     //console.log('attaching controls to', intersects[0].object)
                     //gameEngine.transformControls.attach(intersects[0].object);
diff --git a/src/components/GamePlaying/GamePlaying.vue b/src/components/GamePlaying/GamePlaying.vue
new file mode 100644
index 0000000..f782c0c
--- /dev/null
+++ b/src/components/GamePlaying/GamePlaying.vue
@@ -0,0 +1,214 @@
+<template>
+    <v-navigation-drawer width="133">
+        <v-btn-toggle variant="tonal" density="comfortable" class="ma-3" v-model="renderType" color="light-blue-darken-4">
+            <v-btn value="ST" icon="mdi-video-3d-variant"></v-btn>
+            <v-btn value="VR" icon="mdi-google-cardboard"></v-btn>
+            <v-btn value="AG" icon="mdi-glasses"></v-btn>
+        </v-btn-toggle>
+        <v-btn-toggle variant="tonal" density="comfortable" class="ma-3" v-model="mode" color="green-darken-4">
+            <v-btn class="text-none" value="translate" icon="mdi-cursor-move"></v-btn>
+            <v-btn class="text-none" value="rotate" icon="mdi-rotate-orbit"></v-btn>
+            <v-btn class="text-none" value="scale" icon="mdi-resize"></v-btn>
+        </v-btn-toggle>
+        <v-btn-toggle variant="tonal" v-model="cameraType" class="ma-3" density="comfortable" color="orange-darken-4">
+            <v-btn value="perspective" icon="mdi-cone"></v-btn>
+            <v-btn value="orthographic" icon="mdi-cone-off"></v-btn>
+        </v-btn-toggle>
+    </v-navigation-drawer>
+    <div class="container my-3 position-relative game-designer-canvas">
+        <div ref="target" @click="targetClick" @pointerdown="targetPointerDown"></div>
+        <div class="renderer-gizmo"></div>
+    </div>
+    <v-toolbar density="compact">
+        <v-slide-group show-arrows>
+            <v-slide-group-item v-for="(a, i) in objectAnimations" :key="i" v-slot="{ isSelected }">
+                <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2"
+                    :prepend-icon="'mdi-' + (a.playing ? 'stop' : 'play')" rounded @click="toggleAnimation(a)">
+                    {{ a.name }}
+                </v-btn>
+            </v-slide-group-item>
+        </v-slide-group>
+    </v-toolbar>
+    <v-navigation-drawer location="right">
+        <v-list v-model:selected="scenesList" selectable color="primary">
+            <v-list-item v-for="(s, i) in scenes" :key="i" :title="s.data.title" :value="s"></v-list-item>
+        </v-list>
+        <v-list selectable v-model:selected="objectsList" color="secondary">
+            <v-list-item v-for="(v, k) in sceneObjects" :title="v.__title" :subtitle="k" :value=v>
+                <template v-slot:prepend>
+                    <v-btn variant="plain" density="comfortable" size="small" v-if="v.__o"
+                        :icon="`mdi-eye${v.__o.visible ? '' : '-off'}`"
+                        @click.stop="v.__o.visible = !v.__o.visible"></v-btn>
+                    <!-- <v-icon :icon="components[item.name].icon" size="small"></v-icon> -->
+                </template>
+            </v-list-item>
+        </v-list>
+    </v-navigation-drawer>
+</template>
+
+<script>
+
+import { GameEngine } from '@/lib/gameEngine';
+
+let gameEngine = null;
+
+export default {
+    props:{
+        modelValue: Object,
+    },
+    data(){
+        return {
+            scenesList: [],
+            objectsList: [],
+            mode: 'translate',
+            pointerDownTime: 0,
+            scenario: null,
+            renderType: 'ST',
+            cameraType: 'perspective'
+        }
+    },
+    computed:{
+        scenes(){
+            return this.scenario?.scenes || [];
+        },
+        scene(){
+            return this.scenesList[0];
+        },
+        currentObject(){
+            return this.objectsList[0];
+        },
+        sceneObjects(){
+            return this.object.scenes?.[this.scene?.data?.id]?.objects;
+        },
+        object(){
+            return this.modelValue;
+        },
+        objectAnimations(){
+            return this.currentObject?.__g?.animations?.map(a => ({
+                name: a.name, id: a.uuid, a
+            }));
+        }
+    },
+    watch:{
+        async scene(n){
+            this.object.scenes = this.object.scenes || {}
+            this.object.scenes[n.data.id] = this.object.scenes[n.data.id] || {}
+            await this.loadEnvironment(n, this.object.scenes[n.data.id]);
+        },
+        mode(n){
+            gameEngine.transformControls.setMode(n)
+        },
+        async 'object.scenario'(n){
+            await this.loadScenario()
+        },
+        currentObject(n){
+            // gameEngine.transformControls.attach(n.__o);
+            // gameEngine.gizmo.target = n.__o.position;
+            //gameEngine.camera.lookAt(n.__o.position)
+            gameEngine.camera.updateProjectionMatrix()
+        },
+        renderType(v){
+            gameEngine.renderType = v;
+        },
+        cameraType(v){
+            if (v == 'perspective'){
+                gameEngine.setCameraPerspective();
+            }else{
+                gameEngine.setCameraOrthographic();
+            }
+        }
+    },
+    async mounted(){
+        gameEngine = new GameEngine();
+        //this.gameEngine = gameEngine;
+        await gameEngine.init(this.$refs.target);
+        gameEngine.scene.add(gameEngine.transformControls.getHelper());
+        gameEngine.scene.add(new gameEngine.$.GridHelper(100,100));
+        this.resize();
+        //gameEngine.setCamera(gameEngine.orthographicCamera)
+        //gameEngine.setCameraOrthographic();
+        await this.loadScenario();
+        window.addEventListener('resize', this.resize);
+    },
+    unmounted(){
+        window.removeEventListener('resize', this.resize);
+        gameEngine.stop();
+    },
+    methods:{
+        async loadScenario(){
+            if (this.object.scenario){
+                this.scenario = (await this.$api.scenario.load(this.object.scenario)).data;
+            }else{
+                this.scenario = null;
+            }
+        },
+        async loadEnvironment(scene, target){
+            await gameEngine.loadPanorama(`/asset/default/43.webp`);
+            await this.expandScenarioData(scene);
+            target.objects = target.objects || {};
+            let l = target.objects;
+            if (this.scene.data.$environment.type == 'panorama2d'){
+                await gameEngine.loadPanorama(`/asset/default/${this.scene.data.$environment.asset.name}`);
+            }else{
+                let env = await gameEngine.load(`/asset/default/${this.scene.data.$environment.asset.name}`);
+                this.setObjectAttributes(l, this.scene.data, env, 100);
+                gameEngine.activeObjects.add(env.scene);
+            }
+            for (let i of this.scene.data.items) {
+                let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
+                this.setObjectAttributes(l, i.data, gltf, 10);
+                gameEngine.activeObjects.add(gltf.scene);
+                //console.log(JSON.stringify(l));
+                //window.gameEngine = gameEngine;
+                //console.log(new gameEngine.$.Euler({"isEuler":true,"_x":0,"_y":0,"_z":0,"_order":"XYZ"}));
+            }
+        },
+        async expandScenarioData(scene){
+            scene.data.$environment = (await this.$api.gameObject.load(scene.data.environment)).data
+            for (let i of scene.data.items) {
+                i.data.$go = (await this.$api.gameObject.load(i.data.go)).data;
+            }
+        },
+        targetPointerDown(){
+            this.pointerDownTime = performance.now();
+        },
+        targetClick(e){
+            if (performance.now() - this.pointerDownTime < 200){
+                let intersects = gameEngine.intersect(e, this.$refs.target, gameEngine.activeObjects.children, true);
+                //console.log(intersects)
+                if (intersects.length){
+
+                }else{
+                    
+                }
+            }
+        },
+        setObjectAttributes(l, data, o, autoScaleFactor = 1){
+            if (l[data.id]){
+                ['position', 'scale', 'rotation'].forEach(p=>{
+                    o.scene[p].copy(l[data.id][p])
+                })
+            }else{
+                gameEngine.autoScale(o.scene, autoScaleFactor);
+            }
+            l[data.id] = l[data.id] || {};
+            ['position', 'scale', 'rotation', 'visible'].forEach(p=>{
+                l[data.id][p] = o.scene[p];
+            })
+            l[data.id].__o = o.scene;
+            l[data.id].__g = o;
+            l[data.id].__title = data.title;
+            o.scene.__pn_id = data.id;
+        },
+        async toggleAnimation(animation){
+            animation.playing = !animation.playing;
+            gameEngine.playAnimation(gameEngine.scene, animation.a, animation.playing);
+        },
+        resize(){
+            let r = this.$refs.target;
+            gameEngine.resize(r.clientWidth, r.clientHeight);
+            //this.zoom = Math.min(r.clientWidth / this.viewBox.w, r.clientHeight / this.viewBox.h);
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/lib/gameEngine.js b/src/lib/gameEngine.js
index 913db04..493c2fc 100644
--- a/src/lib/gameEngine.js
+++ b/src/lib/gameEngine.js
@@ -9,6 +9,7 @@ import { StereoEffect } from 'three/addons/effects/StereoEffect.js';
 import { MapControls } from 'three/addons/controls/MapControls.js';
 import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
 import { TransformControls } from 'three/addons/controls/TransformControls.js';
+import { ARButton } from 'three/addons/webxr/ARButton.js';
 
 class GameEngine {
     async init(domNode) {
@@ -140,6 +141,7 @@ class GameEngine {
             controls.rotateSpeed = 1 / gameEngine.camera.zoom;
             gameEngine.camera.updateProjectionMatrix();
         })
+        document.body.appendChild( ARButton.createButton( renderer, {  } ) );
     }
 
     $ = THREE;
diff --git a/src/pages/play/[[id]].vue b/src/pages/play/[[id]].vue
new file mode 100644
index 0000000..56dfb6e
--- /dev/null
+++ b/src/pages/play/[[id]].vue
@@ -0,0 +1,44 @@
+<template>
+    <v-container max-width="1400">
+        <GamePlaying v-model="object"></GamePlaying>
+    </v-container>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            object: {},
+            valid: false,
+            rules: {
+                required: v => v ? true : this.l.fieldRequired,
+                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
+            },
+            loading: false,
+            panel: [],
+            scenarios: []
+        }
+    },
+    async mounted(){
+        if (this.id && this.id != 'add') {
+            this.object = (await this.$api.game.load(this.id)).data;
+        }
+        this.scenarios = (await this.$api.scenario.search()).data.data;
+    },
+    watch:{
+        'object.scenario'(v){
+            if (v){
+                this.object.thumb = this.scenarios?.find(s=>s.id == v)?.sceneThumb?.[0];
+            }
+        }
+    },
+    computed: {
+        id() {
+            return this.$route.params?.id;
+        }
+    },
+    methods:{
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/pages/play/list.vue b/src/pages/play/list.vue
new file mode 100644
index 0000000..2580b99
--- /dev/null
+++ b/src/pages/play/list.vue
@@ -0,0 +1,29 @@
+<template>
+    <v-container>
+        <v-row>
+            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
+                <router-link :to="`/play/${v.id}`">
+                    <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
+                </router-link>
+                <div class="d-flex">
+                    <span class="flex-grow-1">{{ v.name }}</span>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+
+export default {
+    data(){
+        return {
+            items: []
+        }
+    },
+    
+    async created(){
+        this.items = (await this.$api.game.search()).data.data
+    },
+}
+</script>
\ No newline at end of file
diff --git a/src/plugins/lang.js b/src/plugins/lang.js
index 7b67cf7..ace008f 100644
--- a/src/plugins/lang.js
+++ b/src/plugins/lang.js
@@ -28,6 +28,7 @@ const lang = {
         gameRules: 'Rules',
         gameDesigner: 'Game studio',
         games: 'Games',
+        play: 'Play',
         darkMode: 'Dark mode',
         confirmDeletionOf: 'Confirm deletion of',
         yes: 'Yes',
@@ -68,6 +69,7 @@ const lang = {
         gameRules: 'Правила',
         gameDesigner: 'Студио',
         games: 'Игри',
+        play: 'Играй',
         darkMode: 'Тъмен режим',
         confirmDeletionOf: 'Потвърдете изтриването на',
         yes: 'Да',