feat(games): add steam pages with steam price/reduc

2026-10-16 01:03:46 +02:00
parent 919e611895
commit 27d3c08a72
24 changed files with 779 additions and 6 deletions
@@ -0,0 +1,129 @@
+<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="steam-card flex flex-col overflow-hidden rounded-lg 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="flex flex-col flex-1 min-w-0 p-6 gap-3">
+      <a :href="game.store_url" target="_blank" rel="noopener noreferrer"
+        class="steam-title text-2xl font-semibold truncate hover:underline">
+        {{ t("games.buy", { game: game.name }) }}
+      </a>
+      <p v-if="game.short_description" class="steam-text line-clamp-3">
+        {{ game.short_description }}
+      </p>
+
+      <div class="mt-auto pt-2 flex flex-wrap justify-end gap-2">
+        <!-- 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="steam-purchase flex items-stretch rounded-sm overflow-hidden">
+          <template v-if="game.is_free">
+            <span class="steam-price 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="steam-price px-3 flex flex-col justify-center leading-tight">
+              <span v-if="isDiscounted" class="steam-original text-xs line-through">
+                {{ formatPrice(game.price_initial!) }}
+              </span>
+              <span :class="{ 'steam-discounted': 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 store palette, on purpose regardless of the site theme */
+.steam-card {
+  background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
+}
+
+/* Lightens on hover, like the homepage cards' hover:bg-base-100 */
+.steam-card:hover {
+  background: linear-gradient(135deg, #22344a 0%, #335672 100%);
+}
+
+.steam-title {
+  color: #ffffff;
+}
+
+.steam-text {
+  color: #c6d4df;
+}
+
+.steam-purchase {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.steam-discount {
+  background: #4c6b22;
+  color: #beee11;
+}
+
+.steam-price {
+  color: #c6d4df;
+}
+
+.steam-original {
+  color: #738895;
+}
+
+.steam-discounted {
+  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>