62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<template>
|
|
<v-navigation-drawer width="133" rail location="right">
|
|
<v-btn icon="mdi-fullscreen" @click="fullScreen" variant="text" v-tooltip="l.fullScreen"></v-btn>
|
|
</v-navigation-drawer>
|
|
<div class="container my-3 position-relative ">
|
|
<div ref="target" @click="targetClick" class="canvas-wrapper"
|
|
@mousedown="targetPointer($event, 'start')"
|
|
@mousemove="targetPointer($event, 'drag')"
|
|
@mouseup="targetPointer($event, 'end')"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { GameEngine } from '@/lib/GameEngine';
|
|
import { GameManager } from '@/lib/GameManager';
|
|
let engine = null, manager = null;
|
|
|
|
export default {
|
|
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)
|
|
},
|
|
|
|
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()
|
|
}
|
|
}
|
|
}
|
|
</script> |