Esa Kataja
68c7115d8e
- Implemented button press tracking with visual feedback and event emission - Integrated PocketBase for real-time session and movie data management - Added session ID routing across pages for game state persistence
122 lines
2.7 KiB
Vue
122 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
const { pb } = usePocketbase()
|
|
const url = useRequestURL()
|
|
|
|
let isValid = false
|
|
|
|
const sessionid = url.searchParams.get('sessionid')
|
|
|
|
if (sessionid) {
|
|
|
|
const movie_data = await pb.collection('game_sessions').getList(1,1, {filter: `id = '${sessionid}'`})
|
|
if (movie_data.items.length > 0) {
|
|
isValid = true
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="index-container">
|
|
<header>
|
|
<img src="@/assets/img/snow.svg" alt="">
|
|
<h1>Paska Joululeffa 2025</h1>
|
|
</header>
|
|
<main>
|
|
<NuxtImg v-if="isValid" format="avif,webp" quality="30" src="/reindeerpoop.webp" alt="" :placeholder="[50, 25, 75, 5]"/>
|
|
<NuxtImg v-else format="avif,webp" quality="30" src="/reindeerpoop-angry.webp" alt="" :placeholder="[50, 25, 75, 5]" />
|
|
<div class="warning">
|
|
<div>
|
|
<Icon name="mdi:warning" size="1.5rem"/>
|
|
<h2 v-if="isValid">Varoitus!</h2>
|
|
<h2 v-else>URPO!!!</h2>
|
|
<Icon name="mdi:warning" size="1.5rem" />
|
|
</div>
|
|
<p v-if="isValid">Täällä on vain tyhmää läppää. Herkkänahkaisille ei suositella.</p>
|
|
<p v-else>Virheellinen koodi</p>
|
|
</div>
|
|
<NuxtLink class="btn btn-primary" :to="'/info?sessionid=' + sessionid" v-if="isValid">Sisään</NuxtLink>
|
|
</main>
|
|
<footer><sup>©</sup> {{ new Date().getFullYear() }} Kessinen</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
* {
|
|
font-family: DynaPuff, sans-serif;
|
|
}
|
|
|
|
.index-container {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
|
|
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
display: grid;
|
|
grid-template-areas: "stack";
|
|
|
|
> * {
|
|
grid-area: stack;
|
|
max-width: 100%;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
h1 {
|
|
padding: 1rem;
|
|
color: hsl(0 74% 5%);
|
|
}
|
|
}
|
|
|
|
main {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
display: grid;
|
|
justify-content: center;
|
|
place-items: center;
|
|
|
|
img {
|
|
max-width: 80%;
|
|
}
|
|
|
|
.warning {
|
|
.iconify {
|
|
color: hsl(44, 100%, 65%);
|
|
}
|
|
}
|
|
|
|
> div {
|
|
font-size: 0.9rem;
|
|
line-height: 2;
|
|
padding: 1rem;
|
|
max-width: 80%;
|
|
margin: auto;
|
|
background-color: hsl(212 74% 50% / 20%);
|
|
color: hsl(212 74% 90%);
|
|
border-radius: 1rem;
|
|
> div {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
background-image: linear-gradient(to bottom, hsl(212, 74%, 50%), hsl(212, 90%, 35%));
|
|
font-size: 0.8rem;
|
|
}
|
|
</style>
|