<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>
