<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);
        manager.addEventListener('the-end', async e =>{
            await this.$api.user.addGameData({ id: this.id, score: e.score });
            this.$router.push('/');
        })
        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;
            engine.resize(r.clientWidth, r.clientHeight);
        },

        async fullScreen(){
            await engine.renderer.domElement.requestFullscreen()
        }
    }
}
</script>