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

app/components/PlayFieldButton.vue

@@ -8,10 +8,14 @@
 </script>
 
 <template>
+    <div class="playfield-button-container">
+        <div>
             <div class="playfield-button">
-        <h3>{{ title }}</h3>
                 <NuxtImg :src="icon" alt="" format="webp" quality="80" />
-        <p>{{ description }}</p>
+                <!-- <p>{{ description }}</p> -->
+            </div>
+            <h3>{{ title }}</h3>
+        </div>
     </div>
 </template>
 
@@ -19,17 +23,20 @@
 
 $button-size: 80px;
 
-    .playfield-button {
+.playfield-button-container {
-        height: $button-size;
-        width: $button-size;
-        padding: 0.4rem;
     display: grid;
     grid-template-rows: auto 1fr auto;
     gap: 0.4rem;
-        grid-template-areas: 
+    justify-content: center;
-            "title"
+    align-items: start;
-            "image"
+    align-content: start;
-            "description";
+    align-self: start;
+    justify-items: center;
+}
+.playfield-button {
+    height: $button-size;
+    width: $button-size;
+    padding: 0.4rem;
     justify-content: center;
     align-items: center;
     border: 1px solid hsl(0 74% 10% / 50%);
@@ -38,7 +45,6 @@ $button-size: 80px;
     background-image: linear-gradient(to bottom, hsl(0 74% 80%), hsl(0 74% 70%));
     box-shadow: inset 3px 3px 0.5rem hsl(0 74% 20%);
     font-size: 0.2rem;
-        
     overflow: hidden;
     
     
@@ -56,16 +62,7 @@ $button-size: 80px;
         margin: auto;
     }
 
-        h3 {
+
-            grid-area: title;
-            font-weight: bold;
-            margin: 0;
-            font-size: 0.3rem;
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
     p {
         grid-area: description;
         font-size: 0.2rem;
@@ -73,5 +70,12 @@ $button-size: 80px;
         overflow: hidden;
         
     }
-    }
+}
+h3 {
+        font-weight: bold;
+        margin-top: 0.2rem;
+        font-size: 0.6rem;
+        text-align: center;
+        overflow: hidden;
+}
 </style>

app/pages/gameroom.vue

@@ -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([
+const buttons = ref(card_data)
-    {
-        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."
-    },
-])
 </script>
 
 <template>

app/pages/index.vue

@@ -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>&copy;</sup> {{ new Date().getFullYear() }} Kessinen</footer>
 </div>

app/pages/info.vue

@@ -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",