109 lines
2.2 KiB
Vue
109 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
|
|
const { pb } = usePocketbase()
|
|
|
|
type playfieldButton = {
|
|
id: number,
|
|
title: string,
|
|
icon: string,
|
|
color: string,
|
|
description: string,
|
|
isPressed: boolean | null
|
|
|
|
}
|
|
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)
|
|
})
|
|
})
|
|
|
|
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>
|
|
</div>
|
|
<div class="playfield">
|
|
<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>
|
|
</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>
|