156 lines
4.2 KiB
Vue
156 lines
4.2 KiB
Vue
<template>
|
|
<div class="row q-pa-lg items-center justify-evenly q-col-gutter-md">
|
|
<div class="col-12" :style="{ 'max-width': '400px' }">
|
|
<q-card flat bordered>
|
|
<q-card-section horizontal>
|
|
<q-card-section>
|
|
<div class="text-h5 q-mt-sm q-mb-xs">New Game</div>
|
|
<div class="text-caption text-grey">
|
|
Add a new game
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-space></q-space>
|
|
|
|
<q-card-section class="col-5 flex flex-center">
|
|
<q-avatar square size="100px">
|
|
<q-icon name="add" size="4rem"/>
|
|
</q-avatar>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions>
|
|
<q-btn flat color="green" label="Add" />
|
|
|
|
<q-space/>
|
|
|
|
<q-btn flat color="blue" icon="upload" label="Import" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-pa-lg items-center justify-evenly q-col-gutter-md">
|
|
<div class="col-12">
|
|
<div class="row items-center justify-evenly">
|
|
<div class="col-4">
|
|
<q-input filled v-model="search" label="Search for games..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col" v-for="(game, index) of filtered_games" :key="game.id" :style="{ 'max-width': '500px' }">
|
|
<q-card flat bordered>
|
|
<q-card-section horizontal>
|
|
<q-card-section>
|
|
<div class="text-h5 q-mt-sm q-mb-xs">{{ game.name }}</div>
|
|
<div class="text-caption text-grey">
|
|
{{ game.short_description }}
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-space></q-space>
|
|
|
|
<q-card-section class="col-5 flex justify-end">
|
|
<q-avatar square size="100px">
|
|
<q-img
|
|
:src="`https://picsum.photos/200/200?_=${index}`"
|
|
width="100%"
|
|
height="100%"
|
|
/>
|
|
</q-avatar>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions>
|
|
<q-btn flat icon="help" @click="selected_game = game">
|
|
<q-tooltip>
|
|
Learn more...
|
|
</q-tooltip>
|
|
</q-btn>
|
|
<q-btn flat icon="edit" color="green">
|
|
<q-tooltip>
|
|
Edit
|
|
</q-tooltip>
|
|
</q-btn>
|
|
<q-btn flat icon="delete" color="red">
|
|
<q-tooltip>
|
|
Delete
|
|
</q-tooltip>
|
|
</q-btn>
|
|
|
|
<q-space/>
|
|
|
|
<q-btn flat color="blue" icon="download" label="Export" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<q-dialog v-model="learn_more">
|
|
<q-card style="min-width: 700px; max-width: 80vw; min-height: 10vh; max-height: 80vh;">
|
|
<q-card-section class="row items-start">
|
|
<div class="col-2">
|
|
<q-avatar square size="200px">
|
|
<q-img
|
|
src="https://picsum.photos/200/200"
|
|
width="100%"
|
|
height="100%"
|
|
/>
|
|
</q-avatar>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-h3">{{ selected_game?.name }}</div>
|
|
<div class="text-h6 text-grey">
|
|
{{ selected_game?.short_description }}
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="q-pt-none">
|
|
<MarkdownRenderer :text="selected_game?.description"/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
games as parsed_games
|
|
} from '@/js/ParseGamesJSON.js';
|
|
import BingoGame from '@/js/lib/BingoGame.ts';
|
|
|
|
// All games
|
|
const games = ref<BingoGame[]>(Array.from(parsed_games.values()));
|
|
|
|
// Selected game
|
|
const selected_game = ref<BingoGame | undefined>(undefined);
|
|
|
|
// Popup open state
|
|
const learn_more = ref<boolean>(false);
|
|
|
|
// Search query
|
|
const search = ref<string>('');
|
|
|
|
// Filter games by search
|
|
const filtered_games = computed(() => {
|
|
return games.value.filter(game => game.name.toLocaleLowerCase().includes(search.value.toLocaleLowerCase()));
|
|
});
|
|
|
|
// On selected game change, open popup
|
|
watch(selected_game, newGame => {
|
|
if (newGame)
|
|
learn_more.value = true;
|
|
});
|
|
|
|
// On popup close, reset selected game
|
|
watch(learn_more, newValue => {
|
|
if (!newValue)
|
|
selected_game.value = undefined;
|
|
});
|
|
</script>
|