97 lines
3.4 KiB
Vue
97 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import type { SteamGameOut } from "../api/types.gen";
|
|
|
|
const props = defineProps<{ game: SteamGameOut }>();
|
|
|
|
const { t } = useI18n();
|
|
|
|
// Steam gives prices in cents
|
|
const formatPrice = (cents: number) =>
|
|
new Intl.NumberFormat(undefined, {
|
|
style: "currency",
|
|
currency: props.game.currency || "CHF",
|
|
}).format(cents / 100);
|
|
|
|
const hasPrice = computed(() => props.game.price_final != null && !!props.game.currency);
|
|
const isDiscounted = computed(() => hasPrice.value && props.game.discount_percent > 0);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="card card-xl bg-base-200 hover:bg-base-100 overflow-hidden 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">
|
|
<img :src="game.header_image" :alt="game.name" loading="lazy"
|
|
class="w-full aspect-[460/215] object-cover" />
|
|
</a>
|
|
|
|
<div class="card-body min-w-0">
|
|
<a :href="game.store_url" target="_blank" rel="noopener noreferrer"
|
|
class="card-title text-2xl block truncate hover:underline">
|
|
{{ t("games.buy", { game: game.name }) }}
|
|
</a>
|
|
<p v-if="game.short_description" class="text-sm text-base-content/70 line-clamp-3">
|
|
{{ game.short_description }}
|
|
</p>
|
|
|
|
<div class="mt-auto pt-2 flex flex-wrap sm:flex-nowrap justify-end gap-2 whitespace-nowrap">
|
|
<!-- Opens the Steam client: launches the game if installed, offers to install it otherwise -->
|
|
<a :href="`steam://run/${game.steam_app_id}`"
|
|
class="steam-play rounded-sm px-5 py-2 flex items-center gap-1">
|
|
<i class="mdi mdi-play"></i>
|
|
{{ t("games.play") }}
|
|
</a>
|
|
<div class="bg-base-300 flex items-stretch rounded-sm overflow-hidden">
|
|
<template v-if="game.is_free">
|
|
<span class="px-3 py-2 flex items-center">{{ t("games.free") }}</span>
|
|
</template>
|
|
<template v-else-if="hasPrice">
|
|
<span v-if="isDiscounted" class="steam-discount px-3 flex items-center text-xl font-medium">
|
|
-{{ game.discount_percent }}%
|
|
</span>
|
|
<span class="px-3 flex flex-col justify-center leading-tight">
|
|
<span v-if="isDiscounted" class="text-base-content/50 text-xs line-through">
|
|
{{ formatPrice(game.price_initial!) }}
|
|
</span>
|
|
<span :class="{ 'text-success font-medium': isDiscounted }">{{ formatPrice(game.price_final!) }}</span>
|
|
</span>
|
|
</template>
|
|
<a :href="game.store_url" target="_blank" rel="noopener noreferrer"
|
|
class="steam-button px-5 py-2 flex items-center gap-1">
|
|
<i class="mdi mdi-steam"></i>
|
|
{{ t("games.viewOnSteam") }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Steam palette for the purchase buttons, the card itself follows the site theme */
|
|
.steam-discount {
|
|
background: #4c6b22;
|
|
color: #beee11;
|
|
}
|
|
|
|
.steam-button {
|
|
color: #d2efa9;
|
|
background: linear-gradient(to right, #75b022 5%, #588a1b 95%);
|
|
}
|
|
|
|
.steam-button:hover {
|
|
color: #ffffff;
|
|
background: linear-gradient(to right, #8ed629 5%, #6aa621 95%);
|
|
}
|
|
|
|
.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>
|