dev

backend/app/bl/GameObjectsManager.js

@@ -116,7 +116,7 @@ class GameObjectsManager{
          */
         this.addThumb = async function(object, thumbSrc){
             let ext = path.extname(thumbSrc).toLowerCase();
-            console.log(object, thumbSrc, ext);
+            //console.log(object, thumbSrc, ext);
             let dest = `${config.fs.repo}/thumb/${object.id}.webp`;
             if (['.jpg', '.png', '.webp'].includes(ext) || !ext){
                 await sharp(thumbSrc).resize({height: 250}).toFile(dest);

src/components/AppHeader.vue

@@ -20,15 +20,21 @@
         </v-list>
         <v-divider></v-divider>
         <v-list nav>
-            <v-list-item prepend-icon="mdi-database" to="/game-objects/list" :title="$l.gameObjects"></v-list-item>
+            <v-list-item prepend-icon="mdi-database" to="/game-objects/list" :title="l.gameObjects"></v-list-item>
-            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/scenarios/list" :title="$l.gameScenarios"></v-list-item>
+            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/scenarios/list" :title="l.gameScenarios"></v-list-item>
-            <v-list-item prepend-icon="mdi-cogs" :title="$l.gameRules"></v-list-item>
+            <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-controller" :title="l.games" to="/games/list"></v-list-item>
         </v-list>
         <v-divider></v-divider>
         <v-list nav>
-            <v-list-item @click="toggleTheme" prepend-icon="mdi-theme-light-dark" :title="$l.darkMode"></v-list-item>
+            <v-list-item @click="toggleTheme" prepend-icon="mdi-theme-light-dark" :title="l.darkMode"></v-list-item>
+            <v-list-item prepend-icon="mdi-translate">
+                <v-btn-toggle density="compact" v-model="lang" rounded="xl" color="white" variant="outlined">
+                    <v-btn size="small" value="bg">BG</v-btn>
+                    <v-btn size="small" value="en">EN</v-btn>
+                </v-btn-toggle>
+            </v-list-item>
         </v-list>
     </v-navigation-drawer>
 </template>

src/components/AssetsManagement/AssetBrowser.vue

@@ -0,0 +1,66 @@
+<template>
+    <v-chip-group variant="flat" v-if="!hideFilter" class="pa-4" multiple column v-model="selectedTypes">
+        <v-chip v-for="(f,i) in $p.objectTypes" :key="i" :text="l[f.value]" :value="f.value" :color="f.color" filter></v-chip>
+    </v-chip-group>
+    <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="`/game-objects/${v.id}`"> -->
+                <v-img :src="`/asset/thumb/${v.asset?.thumb}`" class="cursor-pointer" @click="$emit('select', v)"></v-img>
+                <!-- </router-link> -->
+                <div class="d-flex">
+                    <span class="flex-grow-1">{{ v.name }}</span>
+                    <v-btn density="comfortable" size="small" :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`" 
+                        :color="$p.objectTypes.find(t=>t.value == v.type).color" class="position-absolute top-0 left-0 ma-6"></v-btn>
+                    <v-btn density="comfortable" size="small" icon="mdi-play-circle" @click="preview(v)" 
+                        color="light-blue-darken-4" class="position-absolute top-0 right-0 ma-6"></v-btn>
+                    <slot name="action-buttons" v-bind:object="v"></slot>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+    <v-dialog v-model="previewDialog" width="auto" max-width="1200">
+        <AssetPreview :object="previewObject" autoplay></AssetPreview>
+    </v-dialog>
+</template>
+
+<script>
+
+export default {
+    props:[
+        'modelValue', 'query', 'hideFilter'
+    ],
+    emits:['select', 'preview'],
+    data(){
+        return {
+            items: [],
+            q: {},
+            selectedTypes: this.$p.objectTypes.map(f=>f.value),
+            previewObject: null,
+            previewDialog: false,
+        }
+    },
+    
+    async created(){
+        await this.load();
+    },
+
+    watch:{
+        async selectedTypes(n){
+            this.q.type = { $in: n };
+            await this.load();
+        }
+    },
+
+    methods:{
+        async load(){
+            Object.assign(this.q, this.query || {});
+            this.items = (await this.$api.gameObject.search(this.q)).data.data;
+        },
+        preview(v){
+            this.previewObject = v;
+            this.previewDialog = true;
+        }
+    }
+}
+</script>

src/components/AssetsManagement/AssetPreview.vue

@@ -10,8 +10,9 @@
             </v-slide-group-item>
         </v-slide-group>
     </div>
-    <v-img v-if="!forRendering && object.type == 'object2d'" :src="`/asset/default/${object.asset?.name}`"></v-img>
+    <v-img v-if="obj && !forRendering && obj.type == 'object2d'" :src="`/asset/default/${obj.asset?.name}`"></v-img>
-    <video controls :autoplay="autoplay ? 'autoplay' : ''" v-if="!forRendering && object.type == 'video'" :src="`/asset/default/${object.asset?.name}`"></video>
+    <video v-if="obj && !forRendering && obj.type == 'video'" controls :autoplay="autoplay ? 'autoplay' : ''" 
+        :src="`/asset/default/${obj.asset?.name}`"></video>
 </template>
 
 <script>
@@ -21,50 +22,58 @@ let gameEngine = null;
 export default{
     props:{
         object: Object,
+        objectId: Number,
         autoplay: Boolean
     },
     data(){
         return {
-            animations: []
+            animations: [],
+            obj: null
         }
     },
     async mounted(){
-        console.log('mounted')
+        if (this.object) {
-        gameEngine = new GameEngine();
+            this.obj = this.object;
-        this.gameEngine = gameEngine;
+        }else{
-        await gameEngine.init(this.$refs.target);
+            this.obj = (await this.$api.gameObject.load(this.objectId)).data; 
-        await this.loadAsset();
+        }
     },
     beforeUnmount() {
         gameEngine?.stop();
     },
+    watch:{
+        async obj(){
+            gameEngine = new GameEngine();
+            this.gameEngine = gameEngine;
+            await gameEngine.init(this.$refs.target);
+            await this.loadAsset();
+        }
+    },
     computed:{
         forRendering() {
-            return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
+            return this.$p.objectTypes.find(t=> t.value == this.obj?.type)?.render
-        },
+        }
     },
     methods:{
         async loadAsset() {
-            console.log('loading asset');
             if (this.forRendering) {
-                console.log('loading preview');
                 gameEngine.scene.clear();
-                if (this.object.type == 'panorama2d') {
+                if (this.obj.type == 'panorama2d') {
-                    let t = await gameEngine.loadTexture(`/asset/default/${this.object.asset.name}`);
+                    let t = await gameEngine.loadTexture(`/asset/default/${this.obj.asset.name}`);
                     t.mapping = gameEngine.$.EquirectangularReflectionMapping;
                     gameEngine.scene.background = t;
                     gameEngine.scene.environment = t;
                     gameEngine.scene.add(gameEngine.camera);
                 } else {
-                    let gltf = await gameEngine.load(`/asset/default/${this.object.asset.name}`);
+                    let gltf = await gameEngine.load(`/asset/default/${this.obj.asset.name}`);
                     console.debug('GLTF', gltf);
                     this.loadedAsset = gltf;
                     this.animations = gltf.animations.map(a => ({
                         name: a.name, id: a.uuid
                     }));
                     let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
-                    gltf.scene.traverse(function (object) {
+                    gltf.scene.traverse(function (o) {
-                        object.frustumCulled = false;
+                        o.frustumCulled = false;
                     });
                     gameEngine.camera.position.set(bb.max.x, bb.max.y, bb.max.z);
                     gameEngine.controls.target.set((bb.max.x + bb.min.x) / 2, (bb.max.y + bb.min.y) / 2, (bb.max.z + bb.min.z) / 2)

src/components/AssetsManagement/AssetSelector.vue

@@ -0,0 +1,39 @@
+<template>
+    <slot name="activator" v-bind="activatorProps" @click="dialog = !dialog"></slot>
+    <v-dialog transition="dialog-bottom-transition" fullscreen v-model="dialog">
+        <v-card title="Assets">
+            <AssetBrowser :query="query" @select="select" :hideFilter="true"></AssetBrowser>
+            <v-card-actions>
+                <v-btn text="Close" color="primary" @click="dialog = false"></v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+
+export default {
+    props:[
+        'modelValue', 'type'
+    ],
+    emits:['select'],
+    data(){
+        return {
+            query: {
+                type: { $in: this.$p.objectTypes.filter(t=>t.type == this.type || !this.type).map(t=>t.value) }
+            },
+            activatorProps:{},
+            dialog: false
+        }
+    },
+    
+    async created(){},
+
+    methods:{
+        select(v){
+            this.$emit('select', { id: v.id, name: v.name });
+            this.dialog = false;
+        }
+    }
+}
+</script>

src/components/SceneDesigner/AssetSelector.vue

@@ -1,55 +0,0 @@
-<template>
-    <slot name="activator" v-bind="activatorProps" @click="dialog = !dialog"></slot>
-    <v-dialog transition="dialog-bottom-transition" fullscreen v-model="dialog">
-        <v-card title="Assets">
-            <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">
-                        <v-img :src="`/asset/thumb/${v.asset?.thumb}`" @click="select(v)"
-                            class="cursor-pointer"></v-img>
-                        <div class="d-flex">
-                            <span class="flex-grow-1">{{ v.name }}</span>
-                            <v-icon color="primary" size="x-large" class="position-absolute top-0 left-0 ma-6">mdi-{{
-                                $p.objectTypes.find(t=>t.value == v.type).icon }}</v-icon>
-                            <!-- <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`" color="primary"></v-btn> -->
-                        </div>
-                    </v-col>
-                </v-row>
-            </v-container>
-            <v-card-actions>
-                <v-btn text="Close" color="primary" @click="dialog = false"></v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-</template>
-
-<script>
-
-export default {
-    props:[
-        'modelValue', 'type'
-    ],
-    emits:['select'],
-    data(){
-        return {
-            items: [],
-            activatorProps:{},
-            dialog: false
-        }
-    },
-    
-    async created(){
-        this.items = (await this.$api.gameObject.search({
-            type: { $in: this.$p.objectTypes.filter(t=>t.type == this.type || !this.type).map(t=>t.value) }
-        })).data.data
-    },
-
-    methods:{
-        select(v){
-            this.$emit('select', { id: v.id, name: v.name });
-            this.dialog = false;
-        }
-    }
-}
-</script>

src/components/SceneDesigner/GameObject.vue

@@ -1,20 +1,24 @@
 <template>
     <teleport to=".scene-designer .game-objects" v-if="active">
-        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{gameObject: true, selected}" v-show="visible && parent.visible">
+        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{gameObject: true, selected}" 
+            v-show="showInView">
             <line :x1="vd.x1" :y1="vd.y1" :x2="parent.vd.x1" :y2="parent.vd.y1"></line>
             <svg-icon :src="`/asset/thumb/${modelValue.go||0}.webp`" :x="vd.x1" :y="vd.y1" :size="37"></svg-icon>
             <text :x="vd.x1" :y="vd.y1" dy="58">{{ modelValue.title }}</text>
+            <image v-if="modelValue.go" href="/static/svg/play-circle.svg" width="20" class="cursor-pointer"
+                :x="vd.x1 + 37 - 10" :y="vd.y1 + 37 - 10" @click="$emit('preview', modelValue.go)">
+            </image>
         </g>
     </teleport>
-    <v-card v-if="selected" :title="modelValue.title">
+    <v-card v-if="selected" :title="modelValue.title" class="mx-2" variant="text">
         <asset-selector @select="assignGameObject" type="GameObject">
             <template v-slot:activator="props">
                 <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-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
+            <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-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
         </v-form>
     </v-card>
 </template>
@@ -24,7 +28,7 @@ import SvgIcon from './SvgIcon.vue';
 import Utils from '@/lib/utils';
 
 export default {
-  emits:['target'],
+  emits:['target', 'preview'],
   components: { SvgIcon },
     data(){
         return {
@@ -43,6 +47,12 @@ export default {
         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'],

src/components/SceneDesigner/Scene.vue

@@ -1,11 +1,14 @@
 <template>
     <teleport to=".scene-designer .scenes" v-if="active">
-        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{scene: true, selected}" v-show="visible">
+        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{scene: true, selected}" v-show="showInView">
             <svg-icon :src="`/asset/thumb/${modelValue.environment||0}.webp`" :x="vd.x1" :y="vd.y1" :size="65"></svg-icon>
             <text :x="vd.x1" :y="vd.y1" dy="86">{{ modelValue.title }}</text>
+            <image v-if="modelValue.environment" href="/static/svg/play-circle.svg" width="20" class="cursor-pointer"
+                :x="vd.x1 + 60 - 10" :y="vd.y1 + 60 - 10" @click="$emit('preview', modelValue.environment)">
+            </image>
         </g>
     </teleport>
-    <v-card :title="modelValue.title" v-if="selected">
+    <v-card :title="modelValue.title" v-if="selected" class="mx-2" variant="text">
         <asset-selector @select="assignEnvironment" type="Scene">
             <template v-slot:activator="props">
                 <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" block color="success" class="py-4">Choose environment</v-btn>
@@ -13,8 +16,8 @@
         </asset-selector>
 
         <v-form class="py-4">
-            <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
+            <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-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
         </v-form>
     </v-card>
 </template>
@@ -22,10 +25,10 @@
 <script>
 import SvgIcon from './SvgIcon.vue';
 import Utils from '@/lib/utils';
-import AssetSelector from './AssetSelector.vue';
+import AssetSelector from '../AssetsManagement/AssetSelector.vue';
 
 export default {
-  emits:['target'],
+  emits:['target', 'preview'],
   components: { SvgIcon, AssetSelector },
     data(){
         return {
@@ -47,6 +50,12 @@ export default {
     steps: [['x1', 'y1']],
     name: 'scene',
     modifiers: ['x1', 'y1'],
+    computed:{
+        showInView(){
+            this.vd.__showInView = this.visible;
+            return this.vd.__showInView;
+        }
+    },
     methods:{
         intersect(v){
             return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);

src/components/SceneDesigner/SceneDesigner.vue

@@ -26,12 +26,13 @@
                 <g class="scenes"></g>
             </svg>
         </div>
-        <v-navigation-drawer location="right" :width="!selectedItem.length ? 400 : expandDrawer ? 800 : 400">
+        <v-navigation-drawer location="right" :width="expandDrawer ? 800 : 400">
-            <v-btn :icon="expandDrawer ? 'mdi-arrow-expand-right' : 'mdi-arrow-expand-left'" variant="plain" size="small" 
+            <v-btn :icon="expandDrawer ? 'mdi-arrow-expand-right' : 'mdi-arrow-expand-left'" variant="plain" size="x-small" density="compact"
-                @click="expandDrawer = !expandDrawer" v-if="selectedItem.length"></v-btn>
+                @click="expandDrawer = !expandDrawer" v-if="selectedItem.length" class="position-absolute z-100 ma-1"></v-btn>
             <template v-for="(item, i) in flatItems" :key="i">
-                <component :is="components[item.__type]" :ref="'sc-' + item.__path" :vd="item.vd" v-model="item.data"
+                <component :is="components[item.__type]" :ref="`sc-${item.__path}`" :vd="item.vd" v-model="item.data"
-                    @target="setTarget($event, item)" :visible="item.visible" :cid="item.id" :parent="item.__parent"
+                    @target="setTarget($event, item)" @preview="preview"
+                    :visible="item.visible" :cid="item.id" :parent="item.__parent"
                     :selected="selectedItem.includes(item)">
                 </component>
             </template>
@@ -41,7 +42,8 @@
             :select-strategy="mode == 'select' ? 'leaf' : 'single-leaf'">
                 <v-list-item v-for="(item, i) in flatItems.toSorted((a,b)=>a.__path.localeCompare(b.__path))" 
                     :key="i" :title="item.data.title" :value="item" :style="`padding-left:${item.__level}rem`" 
-                    v-show="!item.__parent || item.__parent.vd.expanded" :color="[0,'secondary', 'primary', 'success'][item.__level]">
+                    v-show="!item.__parent || item.__parent.vd.expanded" :base-color="item.vd.__showInView ? '' : 'grey'"
+                    :color="[0,'secondary', 'primary', 'success'][item.__level]">
                     <template v-slot:prepend>
                     <v-btn variant="plain" density="comfortable" size="small"
                             :icon="`mdi-eye${item.visible ? '' : '-off'}`"
@@ -58,6 +60,9 @@
             </v-list>
         </v-navigation-drawer>
     </div>
+    <v-dialog v-model="previewDialog" width="auto" max-width="1200">
+        <AssetPreview :objectId="previewObject" autoplay></AssetPreview>
+    </v-dialog>
 </template>
 
 <script>
@@ -65,7 +70,7 @@ import GameObject from './GameObject.vue';
 import Scene from './Scene.vue';
 import SvgRectangle from './SvgRectangle.vue';
 import Utils from '@/lib/utils';
-import AssetSelector from './AssetSelector.vue';
+import AssetSelector from '../AssetsManagement/AssetSelector.vue';
 import Task from './Task.vue';
 
 const components = {
@@ -104,7 +109,9 @@ export default {
                 type: 'Scene'
             },
             dialog: false,
-            expandDrawer: false
+            expandDrawer: false,
+            previewObject: null,
+            previewDialog: false
         }
     },
     mounted(){
@@ -354,57 +361,11 @@ export default {
             //console.log(item);
             let p = item.__parent?.data?.items || this.items;
             p.splice(p.indexOf(item), 1);
+        },
+        preview(v){
+            this.previewObject = v;
+            this.previewDialog = true;
         }
     }
 }
 </script>
-
-<style lang="scss">
-
-:root {
-    --svg-scale: 1;
-}
-
-.svg-container{
-    svg{
-        image{
-            clip-path: circle(50% at 50% 50%);
-        }
-        circle {
-            stroke: rgba(var(--v-theme-primary), .7);
-            fill:rgba(255,255,255,.5);
-            stroke-width: 2px;
-        }
-        g{
-            &.selected circle{
-                fill: rgba(var(--v-theme-secondary), .9);
-            }
-        }
-        line, path{
-            stroke: rgb(213, 226, 231);
-            stroke-width: calc( 2px * var(--svg-scale) );
-        }
-        g.selector {
-            line {
-            stroke-dasharray: 0 calc(8 * var(--svg-scale)) 0;
-            }
-        }
-        text {
-            text-anchor: middle;
-            fill:rgb(var(--v-theme-on-surface));
-            stroke-width: 0;//calc( .1px * var(--svg-scale) );;
-        }
-        background-color: rgba(128,128,128,.05);
-    }
-    overflow: hidden;
-    width: 100%;
-    max-width: 100vw;
-    height: calc(100vh - 244px);
-    &.pan {
-        cursor: grab;
-    }
-    &.Scene, &.GameObject, &.Task {
-        cursor: grabbing;
-    }
-}
-</style>

src/components/SceneDesigner/Task.vue

@@ -1,16 +1,19 @@
 <template>
     <teleport to=".scene-designer .tasks" v-if="active">
         <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{task: true, selected}" 
-            v-show="visible && parent.visible && parent.__parent.visible">
+            v-show="showInView">
             <line :x1="vd.x1" :y1="vd.y1" :x2="parent.vd.x1" :y2="parent.vd.y1"></line>
             <svg-icon :src="`/asset/thumb/${modelValue.intro || 0}.webp`" :x="vd.x1" :y="vd.y1" :size="22"></svg-icon>
             <text :x="vd.x1" :y="vd.y1" dy="44">{{ modelValue.title }}</text>
+            <image v-if="modelValue.intro" href="/static/svg/play-circle.svg" width="20" class="cursor-pointer"
+                :x="vd.x1 + 25 - 10" :y="vd.y1 + 25 - 10" @click="$emit('preview', modelValue.intro)">
+            </image>
         </g>
     </teleport>
-    <v-card v-if="selected" :title="modelValue.title">
+    <v-card v-if="selected" :title="modelValue.title" class="mx-2" variant="text">
         <v-form class="py-4">
-            <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
+            <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-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
         </v-form>
         <asset-selector @select="assignTaskIntro" type="Descriptive">
             <template v-slot:activator="props">
@@ -25,7 +28,7 @@ import SvgIcon from './SvgIcon.vue';
 import Utils from '@/lib/utils';
 
 export default {
-  emits:['target'],
+  emits:['target', 'preview'],
   components: { SvgIcon },
     data(){
         return {
@@ -44,6 +47,12 @@ export default {
         visible: Boolean,
         parent: Object
     },
+    computed:{
+        showInView(){
+            this.vd.__showInView = this.visible && this.parent.visible && this.parent.__parent.visible;
+            return this.vd.__showInView;
+        }
+    },
     steps: [['x1', 'y1']],
     name: 'task',
     modifiers: ['x1', 'y1'],

src/pages/game-objects/[[id]].vue

@@ -1,31 +1,50 @@
 <template>
-    <v-card :title="id == 'add' ? $l.createGameObject : $l.editGameObject" class="container my-3">
+    <v-container max-width="1400">
+        <v-tabs v-model="panel">
+            <v-tab value="edit">
+                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGameObject : l.editGameObject }}
+            </v-tab>
+            <v-tab value="preview" v-if="object.asset">
+                <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.preview }}
+            </v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="panel">
+            <v-tabs-window-item value="edit">
+                <v-card class="container my-3">
                     <v-form class="pa-4" v-model="valid">
-            <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+                        <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
-            <v-textarea :label="$l.description" v-model="object.description"></v-textarea>
+                        <v-textarea :label="l.description" v-model="object.description"></v-textarea>
-            <v-select :label="$l.objectType" v-model="object.type" :items="$p.objectTypes" :rules="[rules.required]">
+                        <v-select :label="l.objectType" v-model="object.type" :items="$p.objectTypes.map(ot=>({title:l[ot.value], value:ot.value}))" tit :rules="[rules.required]">
                         </v-select>
-            <v-file-input :label="$l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
+                        <v-file-input :label="l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
                         <div v-if="object.asset?.name">{{ object.asset.name }}</div>
                     </v-form>
                     <v-card-actions>
-            <v-btn @click="saveAndPreview" :loading="loading" prepend-icon="mdi-content-save" color="primary"
+                        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="success"
                             :disabled="!valid">
-                {{ $l.saveAndPreview }}
+                            {{ l.save }}
                         </v-btn>
-            <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">{{ $l.publish
+                        <v-btn @click="save({preview: true})" :loading="loading" prepend-icon="mdi-content-save" color="primary"
+                            :disabled="!valid">
+                            {{ l.saveAndPreview }}
+                        </v-btn>
+                        <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">{{ l.publish
                             }}</v-btn>
                     </v-card-actions>
                 </v-card>
-
+            </v-tabs-window-item>
-    <v-card :title="$l.preview" class="container my-3" v-if="object.asset">
+            <v-tabs-window-item value="preview">
+                <v-card :title="l.preview" class="container my-3" v-if="object.asset">
                     <AssetPreview :object="object" ref="assetPreview" ></AssetPreview>
                     <v-card-actions>
                         <v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
-                {{ $l.captureThumbnail }}
+                            {{ l.captureThumbnail }}
                         </v-btn>
                     </v-card-actions>
                 </v-card>
+            </v-tabs-window-item>
+        </v-tabs-window>
+    </v-container>
 </template>
 
 <script>
@@ -33,11 +52,12 @@
 export default {
     data() {
         return {
+            panel: 'edit',
             object: {},
             valid: false,
             rules: {
-                required: v => v ? true : this.$l.fieldRequired,
+                required: v => v ? true : this.l.fieldRequired,
-                requiredFile: v => (v?.size || this.id != 'add') ? true : this.$l.fieldRequired
+                requiredFile: v => (v?.size || this.id != 'add') ? true : this.l.fieldRequired
             },
             loading: false
         }
@@ -59,7 +79,7 @@ export default {
         },
     },
     methods: {
-        async saveAndPreview(params) {
+        async save(params) {
             this.loading = true;
             try {
                 let fd = new FormData();
@@ -79,11 +99,12 @@ export default {
                 console.error(err);
             }
             this.loading = false
+            this.panel = 'preview';
         },
         
         async captureThumbnail() {
             this.object.thumb = await this.$refs.assetPreview.gameEngine.captureScreenshot();
-            await this.saveAndPreview({ thumbOnly: true });
+            await this.save({ thumbOnly: true });
         },
 
         async publish() {

src/pages/game-objects/list.vue

@@ -1,34 +1,18 @@
 <template>
-    <v-container>
+    <AssetBrowser @select="$router.push(`/game-objects/${$event.id}`)" ref="browser">
-        <v-row>
+        <template v-slot:action-buttons="{ object }">
-            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
+            <v-btn density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/game-objects/${object.id}`" color="primary"></v-btn>
-                <router-link :to="`/game-objects/${v.id}`">
+            <v-btn density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red"></v-btn>
-                    <v-img :src="`/asset/thumb/${v.asset?.thumb}`"></v-img>
+        </template>
-                </router-link>
+    </AssetBrowser>
-                <div class="d-flex">
-                    <span class="flex-grow-1">{{ v.name }}</span>
-                    <v-btn density="comfortable" size="small" :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`" 
-                        :color="$p.objectTypes.find(t=>t.value == v.type).color" class="position-absolute top-0 left-0 ma-6"></v-btn>
-                    <v-btn density="comfortable" size="small" icon="mdi-play-circle" @click="preview(v)" 
-                        color="light-blue-darken-4" class="position-absolute top-0 right-0 ma-6"></v-btn>
-                    
-                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`" color="primary"></v-btn>
-                    <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
-                </div>
-            </v-col>
-        </v-row>
-    </v-container>
     <v-dialog v-model="confirmDialog" width="auto">
-        <v-card :title="`${$l.confirmDeletionOf} ${ confirmTarget.name }?`">
+        <v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
             <template v-slot:actions>
-                <v-btn @click="confirmDialog = false">{{ $l.no }}</v-btn>
+                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
-                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ $l.yes }}</v-btn>
+                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
             </template>
         </v-card>
     </v-dialog>
-    <v-dialog v-model="previewDialog" width="auto" max-width="1200">
-        <AssetPreview :object="previewObject" autoplay></AssetPreview>
-    </v-dialog>
 </template>
 
 <script>
@@ -36,27 +20,16 @@
 export default {
     data(){
         return {
-            items: [],
             confirmDialog: false,
-            confirmTarget: null,
+            confirmTarget: null
-            previewObject: null,
-            previewDialog: false
         }
     },
 
-    async created(){
-        this.items = (await this.$api.gameObject.search()).data.data
-    },
-
     methods:{
         async remove(item){
             await this.$api.gameObject.remove(item.id);
             this.confirmDialog = false;
-            this.items.splice(this.items.indexOf(item), 1);
+            this.$refs.browser.load();
-        },
-        preview(v){
-            this.previewObject = v;
-            this.previewDialog = true;
         }
     }
 }

src/pages/scenarios/[[id]].vue

@@ -2,7 +2,7 @@
     <v-container max-width="1400">
         <v-tabs v-model="panel">
             <v-tab value="scenario">
-                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? $l.createScenario : $l.editScenario }}
+                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createScenario : l.editScenario }}
             </v-tab>
             <v-tab value="scenes">
                 <v-icon icon="mdi-panorama-outline"></v-icon> Edit scenes
@@ -11,8 +11,8 @@
         <v-tabs-window v-model="panel">
             <v-tabs-window-item value="scenario">
                 <v-form class="pa-4" v-model="valid">
-                    <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+                    <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
-                    <v-textarea :label="$l.description" v-model="object.description"></v-textarea>
+                    <v-textarea :label="l.description" v-model="object.description"></v-textarea>
                 </v-form>
             </v-tabs-window-item>
             <v-tabs-window-item value="scenes">
@@ -31,8 +31,8 @@ export default {
             object: {},
             valid: false,
             rules: {
-                required: v => v ? true : this.$l.fieldRequired,
+                required: v => v ? true : this.l.fieldRequired,
-                requiredFile: v => (v?.length || this.id != 'add') ? true : this.$l.fieldRequired
+                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
             },
             loading: false,
             panel: []

src/pages/scenarios/list.vue

@@ -14,10 +14,10 @@
         </v-row>
     </v-container>
     <v-dialog v-model="confirmDialog" width="auto">
-        <v-card  :title="`${$l.confirmDeletionOf} ${ confirmTarget.name }?`">
+        <v-card  :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
             <template v-slot:actions>
-                <v-btn @click="confirmDialog = false">{{ $l.no }}</v-btn>
+                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
-                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ $l.yes }}</v-btn>
+                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
             </template>
         </v-card>
     </v-dialog>

src/plugins/lang.js

@@ -1,5 +1,39 @@
 const lang = {
-    bg0: {
+    en: {
+        _code: 'en',
+        createGameObject: 'Add game object',
+        editGameObject: 'Edit game object',
+        name: 'Name',
+        description: 'Description',
+        fieldRequired: 'Field is required',
+        objectType: 'Object type',
+        objectFile: 'File',
+        panorama2d: 'Panorama picture',
+        environment3d: 'Environment',
+        object3d: '3D object',
+        object2d: '2D object (picture)',
+        audio: 'Audio',
+        video: 'Video',
+        player3d: 'Player',
+        save: 'Save',
+        saveAndPreview: 'Save and preview',
+        preview: 'Preview',
+        captureThumbnail: 'Save thumbnail',
+        publish: 'Publish',
+        gameObjects: 'Objects',
+        gameScenarios: 'Scenarios',
+        gameRules: 'Rules',
+        games: 'Games',
+        darkMode: 'Dark mode',
+        confirmDeletionOf: 'Confirm deletion of',
+        yes: 'Yes',
+        no: 'No',
+        createScenario: 'Create scenario',
+        editScenario: 'Edit scenario',
+        addScene: 'Add scene'
+    },
+    bg: {
+        _code: 'bg',
         createGameObject: 'Добавяне на игрови обект',
         editGameObject: 'Редактиране на игрови обект',
         name: 'Име',
@@ -14,6 +48,7 @@ const lang = {
         audio: 'Аудио',
         video: 'Видео',
         player3d: 'Играч',
+        save: 'Запис',
         saveAndPreview: 'Запис и преглед',
         preview: 'Преглед',
         captureThumbnail: 'Save thumbnail',
@@ -30,43 +65,37 @@ const lang = {
         editScenario: 'Редактиране на сценарий',
         addScene: 'Добавяне на сцена'
     },
-    bg: {
-        createGameObject: 'Add game object',
-        editGameObject: 'Edit game object',
-        name: 'Name',
-        description: 'Description',
-        fieldRequired: 'Field is required',
-        objectType: 'Object type',
-        objectFile: 'File',
-        panorama2d: 'Panorama picture',
-        environment3d: 'Environment',
-        object3d: '3D object',
-        object2d: '2D object (picture)',
-        audio: 'Audio',
-        video: 'Video',
-        player3d: 'Player',
-        saveAndPreview: 'Save and preview',
-        preview: 'Preview',
-        captureThumbnail: 'Save thumbnail',
-        publish: 'Publish',
-        gameObjects: 'Objects',
-        gameScenarios: 'Scenarios',
-        gameRules: 'Rules',
-        games: 'Games',
-        darkMode: 'Dark mode',
-        confirmDeletionOf: 'Confirm deletion of',
-        yes: 'Yes',
-        no: 'No',
-        createScenario: 'Create scenario',
-        editScenario: 'Edit scenario',
-        addScene: 'Add scene'
-    }
 }
 
+import { ref } from 'vue';
 
 export default {
     install: (app, options) => {
         // inject a globally available $translate() method
-        app.config.globalProperties.$l = lang.bg
+        app.config.globalProperties.$lang = ref('bg');
+        // app.config.globalProperties.$l = computed(()=>lang[app.config.globalProperties.$lang]);
+        app.mixin({
+            data(){
+                return {
+                    
                 }
+            },
+            created(){
+
+            },
+            computed:{
+                lang:{
+                    get(){
+                        return app.config.globalProperties.$lang.value
+                    },
+                    set(v){
+                        app.config.globalProperties.$lang.value = v
+                    }
+                },
+                l(){
+                    return lang[this.lang];
+                }
+            }
+        })
+    },
 }

src/plugins/params.js

@@ -1,50 +1,41 @@
 export default {
     install: (app, options) => {
-        // inject a globally available $translate() method
-        let l = app.config.globalProperties.$l;
         app.config.globalProperties.$p = {
             objectTypes: [{
                 value: 'panorama2d',
                 icon: 'panorama-variant-outline',
-                title: l.panorama2d,
                 render: true,
                 type: 'Scene',
                 color: 'light-blue-darken-4'
             }, {
                 value: 'environment3d',
                 icon: 'panorama-sphere-outline',
-                title: l.environment3d,
                 render: true,
                 type: 'Scene',
-                color: 'teal-darken-3'
+                color: 'orange-darken-4'
             }, {
                 value: 'object3d',
                 icon: 'video-3d',
-                title: l.object3d,
                 render: true,
                 type: 'GameObject',
-                color: 'deep-orange-darken-4'
+                color: 'green-darken-4'
             }, {
                 value: 'object2d',
                 icon: 'file-image-outline',
-                title: l.object2d,
                 type: 'Descriptive',
                 color: 'light-green-accent-4'
             }, {
                 value: 'player3d',
                 icon: 'human-greeting',
-                title: l.player3d,
                 render: true,
                 color: 'yellow-accent-4'
             }, {
                 value: 'audio',
                 icon: 'volume-medium',
-                title: l.audio,
                 color: 'deep-purple-accent-4'
             }, {
                 value: 'video',
                 icon: 'filmstrip',
-                title: l.video,
                 type: 'Descriptive',
                 color: 'purple-darken-3'
             }]

src/styles/style.scss

@@ -10,3 +10,67 @@
 video{
     max-width: 100%;
 }
+
+.z-100 {
+    z-index: 100;
+}
+
+
+:root {
+    --svg-scale: 1;
+}
+
+.browse-asset {
+    position: absolute !important;
+    right: 22px;
+    &.edit{
+        bottom: 77px;
+    }
+    &.remove {
+        bottom: 44px;
+    }
+}
+
+.svg-container{
+    svg{
+        image{
+            clip-path: circle(50% at 50% 50%);
+        }
+        circle {
+            stroke: rgba(var(--v-theme-primary), .7);
+            fill:rgba(255,255,255,.5);
+            stroke-width: 2px;
+        }
+        g{
+            &.selected circle{
+                fill: rgba(var(--v-theme-secondary), .9);
+            }
+        }
+        line, path{
+            stroke: rgb(213, 226, 231);
+            stroke-width: calc( 2px * var(--svg-scale) );
+        }
+        g.selector {
+            line {
+            stroke-dasharray: 0 calc(8 * var(--svg-scale)) 0;
+            }
+        }
+        text {
+            text-anchor: middle;
+            fill:rgb(var(--v-theme-on-surface));
+            stroke-width: 0;//calc( .1px * var(--svg-scale) );;
+            user-select: none;
+        }
+        background-color: rgba(128,128,128,.05);
+    }
+    overflow: hidden;
+    width: 100%;
+    max-width: 100vw;
+    height: calc(100vh - 244px);
+    &.pan {
+        cursor: grab;
+    }
+    &.Scene, &.GameObject, &.Task {
+        cursor: grabbing;
+    }
+}