154 lines
4.1 KiB
Vue
154 lines
4.1 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 lang="ts">
|
|
import {
|
|
games
|
|
} from '@/js/ParseGamesJSON.js';
|
|
import type BingoGame from '@/js/lib/BingoGame.ts';
|
|
|
|
@DComponent
|
|
export default class EditorComponent extends Vue {
|
|
games: BingoGame[] = Array.from(games.values());
|
|
|
|
selected_game: BingoGame | undefined = undefined;
|
|
|
|
@Watch('selected_game')
|
|
onSelectedGameChange(newGame: BingoGame | undefined) {
|
|
if (newGame)
|
|
this.learn_more = true;
|
|
}
|
|
|
|
learn_more: boolean = false;
|
|
|
|
@Watch('learn_more')
|
|
onPopupClose(newValue: boolean) {
|
|
if (!newValue)
|
|
this.selected_game = undefined;
|
|
}
|
|
|
|
search: string = '';
|
|
|
|
get filtered_games(): BingoGame[] {
|
|
return this.games.filter(game => game.name.toLocaleLowerCase().includes(this.search.toLocaleLowerCase()));
|
|
}
|
|
}
|
|
</script>
|