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