130 lines
4.0 KiB
Vue
130 lines
4.0 KiB
Vue
<template>
|
|
<div class="p-6 h-full w-full overflow-auto flex flex-col items-center">
|
|
<div v-if="game" class="space-y-4 flex flex-col items-center w-full max-w-400">
|
|
<img v-if="game.logo_path" :src="game.logo_path" :alt="game.title" class="h-72"/>
|
|
<h1 v-else class="text-4xl font-bold">{{ game.title }}</h1>
|
|
|
|
<!-- Actual carousel pls -->
|
|
<!-- <div class="flex">-->
|
|
<!-- <LocalImage-->
|
|
<!-- v-for="(img, index) in game.media_paths"-->
|
|
<!-- :key="index"-->
|
|
<!-- :src="img"-->
|
|
<!-- :alt="img"-->
|
|
<!-- :gameId="game.id"-->
|
|
<!-- class="rounded-lg border border-gray-600 max-h-48 object-cover"-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
|
|
<div class="flex justify-between w-full space-y-1">
|
|
<ImageCarousel :gameId="game.id"
|
|
:links="game.media_paths"
|
|
class="basis-1/4"
|
|
/>
|
|
<!-- <LocalImage-->
|
|
<!-- v-for="(img, index) in [game.media_paths[0]]"-->
|
|
<!-- :key="index"-->
|
|
<!-- :src="img"-->
|
|
<!-- :alt="img"-->
|
|
<!-- :gameId="game.id"-->
|
|
<!-- class="rounded-lg border border-gray-600 max-h-48 object-cover basis-1/4"/>-->
|
|
|
|
<div class="flex flex-col basis-1/4">
|
|
<div class="text-md text-white">Players: {{ game.players }}</div>
|
|
<div class="text-md text-white">Genres: {{ game.genres }}</div>
|
|
<div class="text-md text-white">Collections: {{ game.collections }}</div>
|
|
<div class="text-md text-white">Updated: {{ game.modification }}</div>
|
|
<div class="text-md text-white">Released: {{ game.release }}</div>
|
|
<div class="text-md text-white">Version: {{ game.version }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-lg w-full wrap min-h-15">{{ game.description }}</div>
|
|
|
|
|
|
<div class="space-y-2 w-full flex items-start">
|
|
<div class="flex gap-2 mt-2">
|
|
<button
|
|
id="btn-play"
|
|
key="play"
|
|
:style="buttonStyle"
|
|
@click="store.startSelectedGame()"
|
|
class="bg-blue-600 px-6 py-2 rounded hover:bg-blue-500 rounded-full text-2xl"
|
|
>
|
|
Play
|
|
</button>
|
|
|
|
<div
|
|
v-for="(link, name) in {
|
|
Repo: game?.public_repository_link ?? undefined,
|
|
Itch: game.itch_link
|
|
}">
|
|
<button
|
|
v-if="link"
|
|
:key="name"
|
|
:style="buttonStyle"
|
|
class="bg-blue-600 px-6 py-2 rounded hover:bg-blue-500 rounded-full text-2xl"
|
|
@click="$emit('qr', link)"
|
|
>
|
|
{{ name }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex w-full items-start">
|
|
<div class="flex gap-3">
|
|
<DevCard
|
|
class="min-w-60"
|
|
v-for="dev in game.developers"
|
|
:dev="dev"
|
|
@qr="(value) => $emit('qr', value)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="h-full flex flex-col items-center justify-center text-gray-500">
|
|
<h1 class="text-3xl font-bold">No game selected</h1>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { models } from "../../wailsjs/go/models";
|
|
import Game = models.Game;
|
|
import LocalImage from "./LocalImage.vue";
|
|
import { computed } from "vue";
|
|
import DevCard from "./DevCard.vue";
|
|
import { useAppStore } from "../stores/app-store";
|
|
import ImageCarousel from "./ImageCarousel.vue";
|
|
|
|
const store = useAppStore();
|
|
|
|
const props = defineProps<{
|
|
game: Game,
|
|
}>();
|
|
|
|
const buttonStyle = computed(() => {
|
|
const ternary = props.game?.color_scheme?.ternary ?? "#ffffff";
|
|
const secondary = props.game?.color_scheme?.primary ?? "#100a99";
|
|
|
|
return {
|
|
backgroundColor: secondary,
|
|
textColor: ternary
|
|
};
|
|
})
|
|
|
|
defineEmits(['qr']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
img {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
img:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
</style>
|