imi-bas/pronature-platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

dev

Browse Source
This commit is contained in:
goynov
2025-03-18 12:21:21 +02:00
parent eaa46eeda8
commit 1f6ee77c24
17 changed files with 407 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/bl/GameObjectsManager.js
+1 -1
View File
@@ -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
+11 -5
View File
@@ -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-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-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-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
+66
View File
@@ -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/AssetPreview.vue → src/components/AssetsManagement/AssetPreview.vue
+26 -17
View File
@@ -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>
<video controls :autoplay="autoplay ? 'autoplay' : ''" v-if="!forRendering && object.type == 'video'" :src="`/asset/default/${object.asset?.name}`"></video>
<v-img v-if="obj && !forRendering && obj.type == 'object2d'" :src="`/asset/default/${obj.asset?.name}`"></v-img>
<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')
gameEngine = new GameEngine();
this.gameEngine = gameEngine;
await gameEngine.init(this.$refs.target);
await this.loadAsset();
if (this.object) {
this.obj = this.object;
}else{
this.obj = (await this.$api.gameObject.load(this.objectId)).data;
}
},
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') {
let t = await gameEngine.loadTexture(`/asset/default/${this.object.asset.name}`);
if (this.obj.type == 'panorama2d') {
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) {
object.frustumCulled = false;
gltf.scene.traverse(function (o) {
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
+39
View File
@@ -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
-55
View File
@@ -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
+15 -5
View File
@@ -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-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
<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-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
+15 -6
View File
@@ -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-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
<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-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
+19 -58
View File
@@ -26,12 +26,13 @@
<g class="scenes"></g>
</svg>
</div>
<v-navigation-drawer location="right" :width="!selectedItem.length ? 400 : expandDrawer ? 800 : 400">
<v-btn :icon="expandDrawer ? 'mdi-arrow-expand-right' : 'mdi-arrow-expand-left'" variant="plain" size="small"
@click="expandDrawer = !expandDrawer" v-if="selectedItem.length"></v-btn>
<v-navigation-drawer location="right" :width="expandDrawer ? 800 : 400">
<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" 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"
@target="setTarget($event, item)" :visible="item.visible" :cid="item.id" :parent="item.__parent"
<component :is="components[item.__type]" :ref="`sc-${item.__path}`" :vd="item.vd" v-model="item.data"
@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
+14 -5
View File
@@ -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-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
<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-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
+36 -15
View File
@@ -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-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-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-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-card :title="$l.preview" class="container my-3" v-if="object.asset">
</v-tabs-window-item>
<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,
requiredFile: v => (v?.size || this.id != 'add') ? true : this.$l.fieldRequired
required: v => v ? 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
+11 -38
View File
@@ -1,34 +1,18 @@
<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="`/game-objects/${v.id}`">
<v-img :src="`/asset/thumb/${v.asset?.thumb}`"></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>
<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>
<AssetBrowser @select="$router.push(`/game-objects/${$event.id}`)" ref="browser">
<template v-slot:action-buttons="{ object }">
<v-btn density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/game-objects/${object.id}`" color="primary"></v-btn>
<v-btn density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red"></v-btn>
</template>
</AssetBrowser>
<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 color="red-darken-4" @click="remove(confirmTarget)">{{ $l.yes }}</v-btn>
<v-btn @click="confirmDialog = false">{{ l.no }}</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,
previewObject: null,
previewDialog: false
confirmTarget: null
}
},
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);
},
preview(v){
this.previewObject = v;
this.previewDialog = true;
this.$refs.browser.load();
}
}
}
src/pages/scenarios/[[id]].vue
+5 -5
View File
@@ -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-textarea :label="$l.description" v-model="object.description"></v-textarea>
<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-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,
requiredFile: v => (v?.length || this.id != 'add') ? true : this.$l.fieldRequired
required: v => v ? true : this.l.fieldRequired,
requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
},
loading: false,
panel: []
src/pages/scenarios/list.vue
+3 -3
View File
@@ -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 color="red-darken-4" @click="remove(confirmTarget)">{{ $l.yes }}</v-btn>
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
</template>
</v-card>
</v-dialog>
src/plugins/lang.js
+62 -33
View File
@@ -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
+2 -11
View File
@@ -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
+64
View File
@@ -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;
}
}