58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
<template>
|
|
<div class="p-6 h-full overflow-auto">
|
|
<div v-if="game" class="space-y-4">
|
|
<h1 class="text-4xl font-bold">{{ game.Game }}</h1>
|
|
<div class="text-sm text-gray-400">{{ game.Genres }} - {{ game.Players }} players</div>
|
|
<p class="text-lg">{{ game.Description }}</p>
|
|
|
|
<div class="flex">
|
|
<LocalImage
|
|
v-for="(img, index) in [game.ImagePath]"
|
|
:key="index"
|
|
:src="img"
|
|
:alt="img"
|
|
:gameId="game.Id"
|
|
class="rounded-lg border border-gray-600 max-h-48 object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div class="flex gap-2 mt-2">
|
|
<button
|
|
v-for="(link, name) in {
|
|
Repo: game.PublicRepositoryLink
|
|
}"
|
|
:key="name"
|
|
class="bg-blue-600 px-3 py-1 rounded hover:bg-blue-500"
|
|
@click="$emit('qr', link)"
|
|
>
|
|
{{ name }} 🔗
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="text-center text-gray-500">No game selected</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { models } from "../../wailsjs/go/models";
|
|
import Game = models.Game;
|
|
import LocalImage from "./LocalImage.vue";
|
|
|
|
defineProps<{
|
|
game: Game,
|
|
}>();
|
|
|
|
defineEmits(['qr']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
img {
|
|
transition: transform 0.2s;
|
|
}
|
|
img:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
</style>
|