refactor: restructure playfield button layout and move card data to JSON
- Reorganized PlayFieldButton component with new container structure and moved title outside button - Extracted card data from gameroom.vue into separate card_data.json file - Added session validation on index page with PocketBase integration
This commit is contained in:
Esa Kataja
+2
-233
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import card_data from "@/assets/card_data.json"
|
||||
type playfieldButton = {
|
||||
id: number,
|
||||
title: string,
|
||||
@@ -40,239 +41,7 @@ type playfieldButton = {
|
||||
"Response": "True"
|
||||
})
|
||||
|
||||
const buttons = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "Blondi tuli taloon",
|
||||
icon: "blondi.webp",
|
||||
color: "",
|
||||
description: "Naispääosalla pitkät blondit hiukset."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Ensilumi",
|
||||
icon: "ensilumi.webp",
|
||||
color: "",
|
||||
description: "Juuri kun kaikki toivo on menetetty, ensilumi alkaa sataa."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Evergreen",
|
||||
icon: "evergreen.webp",
|
||||
color: "",
|
||||
description: "Tarinan kylä tai kaupunki on idyllinen paikka, nimeltään jotain jouluista, kuten 'Evergreen' tai 'Snowville'."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Hengailua kirjastossa",
|
||||
icon: "kirjasto.webp",
|
||||
color: "",
|
||||
description: "Pieni kirjakauppa tai kirjasto on keskeinen kohtauspaikka ja keskustelujen paikka."
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Himo jouluttaja",
|
||||
icon: "himojouluttaja.webp",
|
||||
color: "",
|
||||
description: "Yksi hahmoista on ylitsepursuava jouluihminen, jolla on täydellisesti koristeltu koti"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Joulukuusten invaasio",
|
||||
icon: "joulukuuset.webp",
|
||||
color: "",
|
||||
description: "Elokuvassa on koti jossa on vähintään 5 joulukuusta. Kuuset voivat olla eri kokoisia."
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Jouluenkeli",
|
||||
icon: "jouluenkeli.webp",
|
||||
color: "",
|
||||
description: "Jouluenkeli – joko koristeena tai todellisena ilmestyksenä – ohjaa hahmoja oikealle tielle."
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "Joulumörkö",
|
||||
icon: "joulumorko.webp",
|
||||
color: "",
|
||||
description: "Hahmo, joka vihaa joulua, mutta päätyy lopulta rakastamaan sitä."
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Jouluoksennus",
|
||||
icon: "jouluoksennus.webp",
|
||||
color: "",
|
||||
description: "Koti, työpaikka tai jokin muu koristeltu liioitellusti jouluteemalla, ilman mitään hillittyä tyylitajua"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "Kantakahvila",
|
||||
icon: "kantakahvila.webp",
|
||||
color: "",
|
||||
description: "Pieni, kodikas kahvila toimii kaikkien tapaamispaikkana ja keskustelujen keskuksena."
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: "Keskeytetty suudelma",
|
||||
icon: "keskeytetty.webp",
|
||||
color: "",
|
||||
description: "Juuri, kun romanttinen hetki on käsillä, jokin keskeyttää ensisuudelman."
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: "Kuuma kaakao",
|
||||
icon: "kaakao.webp",
|
||||
color: "",
|
||||
description: "Kuumaa kaakaota juodaan lukemattomia kertoja, aina kermavaahdon kera."
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: "Kuusen valinta",
|
||||
icon: "kuusi.webp",
|
||||
color: "",
|
||||
description: "Kohtaus, jossa kuusen valinnasta tehdään koko tarinan käännekohta."
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: "Täysikuu",
|
||||
icon: "taysikuu.webp",
|
||||
color: "",
|
||||
description: "Jouluyön täysikuu valaisee maiseman ja tuo taianomaisen tunnelman."
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: "Pääosa jumissa",
|
||||
icon: "jumissa.webp",
|
||||
color: "",
|
||||
description: "Päähenkilö jää jumiin elokuvan tapahtumapaikalle."
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: "Luistelukohtaus",
|
||||
icon: "luistelu.webp",
|
||||
color: "",
|
||||
description: "Pari luisteluhetkellä, jonka aiakana tunteet alkavat syttyä."
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: "Punainen lava-auto",
|
||||
icon: "lavaauto.webp",
|
||||
color: "",
|
||||
description: "Joku hahmoista ajaa punaisella lava-autolla, usein ilman mitään käytännön syytä."
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: "Punainen villakangastakki",
|
||||
icon: "villakangastakki.webp",
|
||||
color: "",
|
||||
description: "Päähenkilöllä on päällään kirkkaanpunainen, täydellisesti istuva talvitakki."
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: "Suuri salaisuus",
|
||||
icon: "salaisuus.webp",
|
||||
color: "",
|
||||
description: "Joku hahmoista kantaa suurta salaisuutta, joka paljastuu juuri oikella hetkellä."
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: "The Huoltaja",
|
||||
icon: "huoltaja.webp",
|
||||
color: "",
|
||||
description: "Miespäähenkilö on yksinhuoltaja, joka tasapainoilee uran ja lapsenhoidon välillä."
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
title: "Työkriisi",
|
||||
icon: "tyokriisi.webp",
|
||||
color: "",
|
||||
description: "Päähenkilön työelämässä on kriisi, joka vaatii kaiken huomion joulun alla."
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
title: "Vanha kirje",
|
||||
icon: "kirje.webp",
|
||||
color: "",
|
||||
description: "Päähenkilö löytää vanhan kirjeen, joka muuttaa hänen elämänsä."
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
title: "Vanhan parin rakkausneuvo",
|
||||
icon: "rakkausneuvo.webp",
|
||||
color: "",
|
||||
description: "Iäkäs pariskunta antaa päähenkilölle neuvoja rakkaudesta."
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
title: "Yllätävä vieras",
|
||||
icon: "vieras.webp",
|
||||
color: "",
|
||||
description: "Joulun alla joku saapuu yllättäen perhejuhliin tai kylään."
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
title: "Yritys pulassa",
|
||||
icon: "pulassa.webp",
|
||||
color: "",
|
||||
description: "Päähenkilön yritys on konkurssin partaalla tai vaarassa tulla ostetuksi."
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
title: "Kylän joulutapahtuma",
|
||||
icon: "joulutapahtuma.webp",
|
||||
color: "",
|
||||
description: "Koko kylän joulutapahtuma jossa kaikki on paikalla."
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
title: "Lapsen joulutoive",
|
||||
icon: "joulutoive.webp",
|
||||
color: "",
|
||||
description: "Pieni lapsi toivoo joululta jotain suurta, yleensä perheeseen liittyvää."
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
title: "Leskimies",
|
||||
icon: "leskimies.webp",
|
||||
color: "",
|
||||
description: "Miespääosa on leski."
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
title: "Lumiukko",
|
||||
icon: "lumiukko.webp",
|
||||
color: "",
|
||||
description: "Lumiukon rakentamien on täydellisen joulupäivän kohokohta."
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
title: "Majatalo",
|
||||
icon: "majatalo.webp",
|
||||
color: "",
|
||||
description: "Tarinaan kuuluu aina viehättävä majatalo."
|
||||
},
|
||||
{
|
||||
id: 31,
|
||||
title: "Eräjorma",
|
||||
icon: "erajorma.webp",
|
||||
color: "",
|
||||
description: "Miespääosa on eräjorma / handyman."
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
title: "Naispääosa kaupungista",
|
||||
icon: "naispaaosa.webp",
|
||||
color: "",
|
||||
description: "Uraohjautunut nainen suurkaupungista."
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
title: "Naispääosan tuore ero",
|
||||
icon: "ero.webp",
|
||||
color: "",
|
||||
description: "Naispääosa on juuri eronnut tai eroaa elokuvan alussa."
|
||||
},
|
||||
])
|
||||
const buttons = ref(card_data)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
+26
-4
@@ -1,3 +1,22 @@
|
||||
<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>
|
||||
@@ -5,16 +24,19 @@
|
||||
<h1>Paska Joululeffa 2025</h1>
|
||||
</header>
|
||||
<main>
|
||||
<img src="@/assets/img/reindeerpoop.webp" alt="">
|
||||
<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>Varoitus!</h2>
|
||||
<h2 v-if="isValid">Varoitus!</h2>
|
||||
<h2 v-else>URPO!!!</h2>
|
||||
<Icon name="mdi:warning" size="1.5rem" />
|
||||
</div>
|
||||
<p>Täällä on vain tyhmää läppää. Herkkänahkaisille ei suositella.</p>
|
||||
<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">Sisään</NuxtLink>
|
||||
<NuxtLink class="btn btn-primary" to="/info" v-if="isValid">Sisään</NuxtLink>
|
||||
</main>
|
||||
<footer><sup>©</sup> {{ new Date().getFullYear() }} Kessinen</footer>
|
||||
</div>
|
||||
|
||||
+4
-1
@@ -1,5 +1,8 @@
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
const { pb } = usePocketbase()
|
||||
const movie_data2 = await pb.collection('movies').getFullList()
|
||||
console.log(movie_data2)
|
||||
const movie_data = ref({
|
||||
"Title": "A Maple Valley Christmas",
|
||||
"Year": "2022",
|
||||
|
||||
Reference in New Issue
Block a user