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

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