<template>
  <div class="bg-gray-900 h-[100dvh] overflow-hidden text-white">
    <div :class="$style.noise"/>
    <div :class="$style.vignette"/>
    <div class="absolute inset-0">
      <component :is="SCREENS.find(s => s.id === screenId)!.component"/>
    </div>
  </div>
</template>

<style module lang="scss">
  html, body {
    user-select: none;
    height: 100%;
  }

  .noise, .vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .noise {
    background: url("./assets/noise.png") repeat;
    opacity: 10%;
  }

  .vignette {
    background: radial-gradient(rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 20%));
  }
</style>

<style>
  *, *::before, *:after {
    box-sizing: border-box;
  }

  button {
    border: none;
    color: inherit;
  }

  html, body, #app {
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    user-select: none;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 200ms ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .list-move,
  .list-enter-active,
  .list-leave-active {
    transition: 400ms ease;
    transition-property: opacity, transform;
  }

  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: scale(0.9);
  }

  .list-leave-active {
    position: absolute;
  }
</style>

<script setup lang="ts">
  import { type Component, computed } from "vue"
  import { useBrowserLocation } from "@vueuse/core"
  import PlayerScreen from "./screens/PlayerScreen.vue"
  import CrewLoginScreen from "./screens/CrewLoginScreen.vue"
  import DuoScreen from "./screens/DuoScreen.vue"

  const location = useBrowserLocation()

  const screenId = computed(() => location.value.search?.slice(1))

  interface Screen {
    id: string
    isCrewOnly: boolean
    component: Component
  }

  const SCREENS: Screen[] = [
    {
      id: "player",
      isCrewOnly: false,
      component: PlayerScreen
    },
    {
      id: "crew-login",
      isCrewOnly: false,
      component: CrewLoginScreen
    },
    {
      id: "duo",
      isCrewOnly: true,
      component: DuoScreen
    }
  ]

  const matchingScreen = SCREENS.find(s => s.id === screenId.value)
  if (matchingScreen === undefined || (matchingScreen.isCrewOnly && !Boolean(window.localStorage.getItem("crew-token")))) {
    location.value.search = "?player"
  }
</script>
