Esa Kataja
41e2925d62
- 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
94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import card_data from "@/assets/card_data.json"
|
|
type playfieldButton = {
|
|
id: number,
|
|
title: string,
|
|
icon: string,
|
|
color: string,
|
|
description: string,
|
|
|
|
}
|
|
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 buttons = ref(card_data)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="game-room-container">
|
|
<div>
|
|
<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" />
|
|
</div>
|
|
<div class="end-game">
|
|
<button class="btn btn-primary">Lopeta peli</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.game-room-container {
|
|
padding: 1rem;
|
|
display: grid;
|
|
gap: 1rem;
|
|
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.playfield {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
width: fit-content;
|
|
margin: auto;
|
|
gap: 1.8rem;
|
|
padding: 0.5rem;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-items: center;
|
|
place-items: center;
|
|
overflow-y: auto;
|
|
}
|
|
.end-game {
|
|
justify-self: center;
|
|
width: 100%;
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|