119 lines
2.3 KiB
Vue
119 lines
2.3 KiB
Vue
<template>
|
|
<div class="bg-gray-900 h-[100dvh] text-white">
|
|
<div :class="$style.noise"/>
|
|
<div :class="$style.vignette"/>
|
|
<div class="absolute inset-0 overflow-hidden">
|
|
<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>
|