From 68c7115d8e398dacd1086c2e6e66e18c4795f5db Mon Sep 17 00:00:00 2001
From: Esa Kataja <ekataja@gmail.com>
Date: Fri, 21 Nov 2025 15:27:37 +0200
Subject: [PATCH] feat: add interactive button state and PocketBase integration

- 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
---
 app/components/PlayFieldButton.vue | 46 +++++++++------
 app/pages/gameroom.vue             | 90 ++++++++++++++++++------------
 app/pages/index.vue                |  2 +-
 app/pages/info.vue                 | 47 +++-------------
 4 files changed, 93 insertions(+), 92 deletions(-)

diff --git a/app/components/PlayFieldButton.vue b/app/components/PlayFieldButton.vue
index f8b67e2..ae1f141 100644
--- a/app/components/PlayFieldButton.vue
+++ b/app/components/PlayFieldButton.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
-    const props = defineProps<{
-        icon: string,
-        title: string,
-        description: string
-    }>()
-    const icon = computed(() => `/img/icons/${props.icon}`)
+const emit = defineEmits(['button-pressed'])
+const props = defineProps<{
+    icon: string,
+    title: string,
+    description: string,
+    id: string
+    isPressed: boolean | undefined
+}>()
+const icon = computed(() => `/img/icons/${props.icon}`)
+
+function onButtonPress(id: string) {
+    emit('button-pressed', id)
+}
 </script>
 
 <template>
     <div class="playfield-button-container">
         <div>
-            <div class="playfield-button">
+            <div @click="onButtonPress(props.id)" class="playfield-button " :class="{ 'pressed': isPressed }">
                 <NuxtImg :src="icon" alt="" format="webp" quality="80" />
                 <!-- <p>{{ description }}</p> -->
             </div>
@@ -20,7 +27,6 @@
 </template>
 
 <style scoped lang="scss">
-
 $button-size: 80px;
 
 .playfield-button-container {
@@ -33,6 +39,7 @@ $button-size: 80px;
     align-self: start;
     justify-items: center;
 }
+
 .playfield-button {
     height: $button-size;
     width: $button-size;
@@ -46,8 +53,8 @@ $button-size: 80px;
     box-shadow: inset 3px 3px 0.5rem hsl(0 74% 20%);
     font-size: 0.2rem;
     overflow: hidden;
-    
-    
+
+
     img {
         grid-area: image;
         width: 100%;
@@ -62,20 +69,27 @@ $button-size: 80px;
         margin: auto;
     }
 
+    &.pressed {
+        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%);
+        border: 9px solid hsl(0 74% 10% / 50%);
+
+    }
 
     p {
         grid-area: description;
         font-size: 0.2rem;
         text-align: center;
         overflow: hidden;
-        
+
     }
 }
+
 h3 {
-        font-weight: bold;
-        margin-top: 0.2rem;
-        font-size: 0.6rem;
-        text-align: center;
-        overflow: hidden;
+    font-weight: bold;
+    margin-top: 0.2rem;
+    font-size: 0.6rem;
+    text-align: center;
+    overflow: hidden;
 }
 </style>
diff --git a/app/pages/gameroom.vue b/app/pages/gameroom.vue
index 5277eeb..fdf9e32 100644
--- a/app/pages/gameroom.vue
+++ b/app/pages/gameroom.vue
@@ -1,56 +1,69 @@
 <script setup lang="ts">
-import card_data from "@/assets/card_data.json"
+import PocketBase from 'pocketbase'
+
+const pb = new PocketBase('http://localhost:8090')
+
 type playfieldButton = {
     id: number,
     title: string,
     icon: string,
     color: string,
     description: string,
-    
+    isPressed: boolean | null
+
 }
-    const movie_data = ref({
-        "Title": "A Maple Valley Christmas",
-        "Year": "2022",
-        "Rated": "TV-G",
-        "Released": "05 Nov 2022",
-        "Runtime": "85 min",
-        "Genre": "Comedy, Drama, Romance",
-        "Director": "Paul Ziller",
-        "Writer": "Joie Botkin, Jerry Todt",
-        "Actors": "Peyton List, Andrew W. Walker, Frances Flanagan",
-        "Plot": "Erica is a rancher who has spent her whole life working the family farm with her mother and sister. When Aaron arrives and disrupts her plans, she starts to question what it is she actually wants.",
-        "Language": "English, Italian",
-        "Country": "Canada, United States",
-        "Awards": "1 nomination total",
-        "Poster": "https://m.media-amazon.com/images/M/MV5BZjliMTRlMGItOGQzZC00NTI2LWJkODctZWZmMDIzOGRmYTQ3XkEyXkFqcGc@._V1_SX300.jpg",
-        "Ratings": [
-            {
-                "Source": "Internet Movie Database",
-                "Value": "6.3/10"
-            }
-        ],
-        "Metascore": "N/A",
-        "imdbRating": "6.3",
-        "imdbVotes": "1,577",
-        "imdbID": "tt21841642",
-        "Type": "movie",
-        "DVD": "N/A",
-        "BoxOffice": "N/A",
-        "Production": "N/A",
-        "Website": "N/A",
-        "Response": "True"
+type movie = {
+    id: string,
+    title: string,
+    plot: string,
+    poster_url: string,
+    imdbid: string,
+    isActive: boolean,
+    created: string,
+    updated: string
+}
+
+const sessionid = checkSession()
+
+async function getCards() {
+    const data = pb.collection('cards').getFullList()
+    return data
+}
+
+async function get_session() {
+    const data = pb.collection('game_sessions').getOne(sessionid as string, { expand: 'movie_title' })
+    return data
+}
+
+const movie_data = ref<movie>()
+movie_data.value = (await get_session()).expand?.movie_title
+
+const cards_data = ref(await getCards())
+
+const playfield = computed(() => {
+    pb.collection('game_sessions').subscribe(sessionid as string, (e) => {
+        console.log(e.action)
+        console.log(e.record)
+    })
 })
 
-const buttons = ref(card_data)
+function onButtonPress(id: string) {
+    const card = cards_data.value.find((card) => card.id === id)
+    if (card) {
+        card.isPressed = !card.isPressed
+    }
+}
 </script>
 
 <template>
     <div class="game-room-container">
         <div>
-            <h1>{{ movie_data.Title }}</h1>
+            <h1>{{ movie_data?.title }}</h1>
         </div>
         <div class="playfield">
-            <PlayFieldButton v-for="button in buttons" :key="button.id" :icon="button.icon" :title="button.title" :description="button.description" />
+            <PlayFieldButton v-for="card in cards_data" :key="card.id" :icon="card.icon" :title="card.title"
+                :description="card.description" :id="card.id" :isPressed="card.isPressed"
+                @button-pressed="onButtonPress" />
         </div>
         <div class="end-game">
             <button class="btn btn-primary">Lopeta peli</button>
@@ -63,13 +76,14 @@ const buttons = ref(card_data)
     padding: 1rem;
     display: grid;
     gap: 1rem;
-    
+
 }
 
 h1 {
     text-align: center;
     margin-bottom: 1rem;
 }
+
 .playfield {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -83,9 +97,11 @@ h1 {
     place-items: center;
     overflow-y: auto;
 }
+
 .end-game {
     justify-self: center;
     width: 100%;
+
     button {
         width: 100%;
     }
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4677dea..c9440ce 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -36,7 +36,7 @@ if (sessionid) {
             <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" v-if="isValid">Sisään</NuxtLink>
+        <NuxtLink class="btn btn-primary" :to="'/info?sessionid=' + sessionid" v-if="isValid">Sisään</NuxtLink>
     </main>
     <footer><sup>&copy;</sup> {{ new Date().getFullYear() }} Kessinen</footer>
 </div>
diff --git a/app/pages/info.vue b/app/pages/info.vue
index ad2a928..fa160e1 100644
--- a/app/pages/info.vue
+++ b/app/pages/info.vue
@@ -1,48 +1,19 @@
 
 <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",
-        "Rated": "TV-G",
-        "Released": "05 Nov 2022",
-        "Runtime": "85 min",
-        "Genre": "Comedy, Drama, Romance",
-        "Director": "Paul Ziller",
-        "Writer": "Joie Botkin, Jerry Todt",
-        "Actors": "Peyton List, Andrew W. Walker, Frances Flanagan",
-        "Plot": "Erica is a rancher who has spent her whole life working the family farm with her mother and sister. When Aaron arrives and disrupts her plans, she starts to question what it is she actually wants.",
-        "Language": "English, Italian",
-        "Country": "Canada, United States",
-        "Awards": "1 nomination total",
-        "Poster": "https://m.media-amazon.com/images/M/MV5BZjliMTRlMGItOGQzZC00NTI2LWJkODctZWZmMDIzOGRmYTQ3XkEyXkFqcGc@._V1_SX300.jpg",
-        "Ratings": [
-            {
-                "Source": "Internet Movie Database",
-                "Value": "6.3/10"
-            }
-        ],
-        "Metascore": "N/A",
-        "imdbRating": "6.3",
-        "imdbVotes": "1,577",
-        "imdbID": "tt21841642",
-        "Type": "movie",
-        "DVD": "N/A",
-        "BoxOffice": "N/A",
-        "Production": "N/A",
-        "Website": "N/A",
-        "Response": "True"
-})
+
+const sessionid = checkSession()
+const session_data = await pb.collection("game_sessions").getOne(sessionid as string, {expand: 'movie_title'})
+const movie_data = session_data.expand?.movie_title
+
 </script>
 <template>
     <div class="info-container">
-        <h1>{{ movie_data.Title }}</h1>
+        <h1>{{ movie_data?.title }}</h1>
         <div class="poster-content">
-            <img class="poster" :src="movie_data.Poster" alt="">
-            <p>{{ movie_data.Plot }}</p>
-            <NuxtLink class="btn btn-primary" to="/gameroom">Aloita</NuxtLink>
+            <img class="poster" :src="movie_data.poster_url" alt="">
+            <p>{{ movie_data.plot }}</p>
+            <NuxtLink class="btn btn-primary" :to="'/gameroom?sessionid=' + sessionid">Aloita</NuxtLink>
         </div>
     </div>
 </template>