91 lines
3.4 KiB
Vue
91 lines
3.4 KiB
Vue
<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="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" class="mx-2" variant="text">
|
|
<asset-selector @select="assignGameObject" :type="['GameObject', 'Player']">
|
|
<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="pt-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>
|
|
|
|
<v-container v-if="selected && modelValue.type">
|
|
<component :is="modelValue.type" v-model="mv"></component>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import SvgIcon from './SvgIcon.vue';
|
|
import Utils from '@/lib/Utils';
|
|
|
|
import VideoPlayer from '../InteractiveObjects/VideoPlayer.vue';
|
|
import PuzzleGame1 from '../InteractiveObjects/PuzzleGame1.vue';
|
|
import PuzzleGame2 from '../InteractiveObjects/PuzzleGame2.vue';
|
|
import MazeQuizGame from '../InteractiveObjects/MazeQuizGame/MazeQuizGame.vue';
|
|
import GenericObject from '../InteractiveObjects/GenericObject.vue';
|
|
|
|
export default {
|
|
emits:['target', 'preview'],
|
|
components: { SvgIcon, VideoPlayer, PuzzleGame1, PuzzleGame2, MazeQuizGame, GenericObject },
|
|
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;
|
|
},
|
|
mv(){
|
|
return this.modelValue
|
|
}
|
|
},
|
|
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
|
|
delete this.modelValue.io;
|
|
}
|
|
if (e.type == 'InteractiveObject'){
|
|
this.modelValue.type = e.id;
|
|
}else{
|
|
this.modelValue.type = 'GenericObject'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |