45 lines
1.8 KiB
Vue
45 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import type { SteamGameOut } from "../api/types.gen";
|
|
|
|
defineProps<{ game: SteamGameOut }>();
|
|
|
|
const { t } = useI18n();
|
|
|
|
// Not every game has a library capsule on Steam, fall back to the header + name
|
|
const capsuleFailed = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="group relative aspect-[2/3] rounded-md overflow-hidden bg-base-200 hover:bg-base-100
|
|
shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-2 hover:scale-[1.05]">
|
|
<a :href="game.store_url" target="_blank" rel="noopener noreferrer" :title="game.name" class="block w-full h-full">
|
|
<img v-if="!capsuleFailed" :src="game.library_image" :alt="game.name" loading="lazy"
|
|
class="w-full h-full object-cover" @error="capsuleFailed = true" />
|
|
<div v-else class="w-full h-full flex flex-col justify-center gap-4 p-3 bg-gradient-to-b from-base-100 to-base-300">
|
|
<img :src="game.header_image" :alt="game.name" loading="lazy" class="w-full rounded-sm" />
|
|
<span class="text-center font-medium line-clamp-3">{{ game.name }}</span>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Opens the Steam client: launches the game if installed, offers to install it otherwise -->
|
|
<a :href="`steam://run/${game.steam_app_id}`" :title="t('games.play')"
|
|
class="steam-play absolute bottom-2 right-2 rounded-full w-10 h-10 flex items-center justify-center text-2xl
|
|
opacity-0 translate-y-1 transition-all group-hover:opacity-100 group-hover:translate-y-0 focus:opacity-100">
|
|
<i class="mdi mdi-play"></i>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.steam-play {
|
|
color: #ffffff;
|
|
background: linear-gradient(to right, #47bfff 5%, #1a44c2 95%);
|
|
}
|
|
|
|
.steam-play:hover {
|
|
background: linear-gradient(to right, #6fceff 5%, #2d5fd8 95%);
|
|
}
|
|
</style>
|