67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<template>
|
|
<div class="page-play__container">
|
|
<TopBar />
|
|
<AlertBox v-if="!isConnected" mode="alert">
|
|
connection to server broken
|
|
<div v-if="retry >= 0">retrying {{ '...'.slice(0, retry % 4) }}</div>
|
|
</AlertBox>
|
|
<div class="page-play__playfield-container">
|
|
<div class="page-play__playfield-content">
|
|
<p>wohoo!</p>
|
|
</div>
|
|
<EngineDebug v-if="showEngineDebug" class="page-play__playfield-debug" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { navigateTo, useRoute } from '#app'
|
|
import { computed } from 'vue'
|
|
import useAuth from '@/composables/useAuth';
|
|
import useEngine from '@/composables/useEngine';
|
|
import { onMounted, onBeforeUnmount } from 'vue';
|
|
|
|
// ensure user is authenticated
|
|
const { authenticateAndLoadUserInfo } = useAuth()
|
|
try {
|
|
await authenticateAndLoadUserInfo()
|
|
} catch (e) {
|
|
navigateTo('/', { replace: true })
|
|
}
|
|
|
|
const { start: startEngine, stop: stopEngine, isConnected, retry } = useEngine()
|
|
onMounted(() => startEngine())
|
|
onBeforeUnmount(() => stopEngine())
|
|
|
|
const route = useRoute()
|
|
const showEngineDebug = computed(() => route.hash.indexOf('debug') > -1)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-play {
|
|
&__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&__playfield {
|
|
&-container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&-content {
|
|
flex-grow: 1;
|
|
padding: 0 2em;
|
|
}
|
|
|
|
&-debug {
|
|
max-width: 350px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|