Add: Gameroon screen
This commit is contained in:
Esa Kataja
@@ -0,0 +1,324 @@
|
||||
<script setup lang="ts">
|
||||
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([
|
||||
{
|
||||
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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user