feat(games): add steam pages with steam price/reduc
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useTitle } from "@vueuse/core";
|
||||
import { gamesApiListEventSteamGames } from "./api";
|
||||
import type { SteamGameOut } from "./api/types.gen";
|
||||
import SteamStoreCard from "./components/SteamStoreCard.vue";
|
||||
|
||||
interface Props {
|
||||
eventPath: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const { t } = useI18n();
|
||||
useTitle(computed(() => t("games.title")));
|
||||
|
||||
const games = ref<SteamGameOut[]>([]);
|
||||
const loading = ref(true);
|
||||
|
||||
onMounted(async () => {
|
||||
const response = await gamesApiListEventSteamGames({
|
||||
path: { event_path: props.eventPath },
|
||||
});
|
||||
if (response.data) {
|
||||
games.value = response.data;
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1 bg-base-300 flex justify-center px-4 py-12">
|
||||
<div class="w-full max-w-6xl">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-5xl font-bold mb-4">{{ t("games.title") }}</h1>
|
||||
<p class="text-xl text-base-content/70">{{ t("games.subtitle") }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="flex justify-center py-20">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<p v-else-if="!games.length" class="text-center text-base-content/50 py-20">
|
||||
{{ t("games.empty") }}
|
||||
</p>
|
||||
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<SteamStoreCard v-for="game in games" :key="game.id" :game="game" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -18,6 +18,7 @@ useTitle(computed(() => t("home.title")));
|
||||
|
||||
const games = ref<GamesApiListEventGamesResponse | undefined>();
|
||||
const loading = ref(true);
|
||||
const hasSteamGames = computed(() => games.value?.some((game) => game.steam_app_id) ?? false);
|
||||
const imageErrors = ref<Set<number>>(new Set());
|
||||
|
||||
const getHeaderImage = (game: GamesApiListEventGamesResponse[number]) => {
|
||||
@@ -83,7 +84,7 @@ onMounted(async () => {
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl">{{ game.name }}</h2>
|
||||
<p v-if="game.description" class="text-base-content/70">{{ game.description }}</p>
|
||||
<p v-if="game.description" class="text-sm text-base-content/70 line-clamp-2" :title="game.description">{{ game.description }}</p>
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button class="btn btn-primary">
|
||||
<i class="mdi mdi-arrow-right mr-2"></i>
|
||||
@@ -94,6 +95,14 @@ onMounted(async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Link to the Steam games page -->
|
||||
<div v-if="!loading && hasSteamGames" class="text-center mt-12">
|
||||
<RouterLink :to="{ name: 'games', params: { eventPath } }" class="btn btn-outline">
|
||||
<i class="mdi mdi-steam mr-2"></i>
|
||||
{{ t("home.getTheGames") }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="text-center mt-12 text-base-content/50">
|
||||
<p>{{ t("home.footer") }}</p>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2,7 +2,7 @@
|
||||
|
||||
import { type Client, formDataBodySerializer, type Options as Options2, type TDataShape } from './client';
|
||||
import { client } from './client.gen';
|
||||
import type { AnimationsApiPuzzleResultsData, AnimationsApiPuzzleResultsResponses, AnimationsApiResultsData, AnimationsApiResultsResponses, AnimationsApiTopSubmissionsData, AnimationsApiTopSubmissionsResponses, ClockApiCurrentStateData, ClockApiCurrentStateResponses, ClockApiMyStatsData, ClockApiMyStatsResponses, GamesApiListEventGamesData, GamesApiListEventGamesResponses, GamesApiListGamesData, GamesApiListGamesResponses, MarketApiBetHistoryData, MarketApiBetHistoryResponses, MarketApiCloseMarketData, MarketApiCloseMarketResponses, MarketApiCreateBetData, MarketApiCreateBetResponses, MarketApiGetUserPointsData, MarketApiGetUserPointsResponses, MarketApiListMarketsData, MarketApiListMarketsResponses, MarketApiListUserBetsData, MarketApiListUserBetsResponses, MarketApiResolveMarketData, MarketApiResolveMarketResponses, NoitaApiGetLeaderboardData, NoitaApiGetLeaderboardResponses, NoitaApiGetResultsData, NoitaApiGetResultsResponses, NoitaApiSubmitLogFileData, NoitaApiSubmitLogFileErrors, NoitaApiSubmitLogFileResponses, OpusMagnumApiCreateSubmissionData, OpusMagnumApiCreateSubmissionResponses, OpusMagnumApiDeleteSubmissionData, OpusMagnumApiDeleteSubmissionResponses, OpusMagnumApiGetCollectionData, OpusMagnumApiGetCollectionResponses, OpusMagnumApiGetStatsData, OpusMagnumApiGetStatsResponses, OpusMagnumApiGetSubmissionData, OpusMagnumApiGetSubmissionResponses, OpusMagnumApiListPuzzlesData, OpusMagnumApiListPuzzlesResponses, OpusMagnumApiListResponsesNeedingValidationData, OpusMagnumApiListResponsesNeedingValidationResponses, OpusMagnumApiListSubmissionsData, OpusMagnumApiListSubmissionsResponses, OpusMagnumApiValidateAutoData, OpusMagnumApiValidateAutoResponses, OpusMagnumApiValidateResponseData, OpusMagnumApiValidateResponseResponses, OpusMagnumApiValidateSubmissionData, OpusMagnumApiValidateSubmissionResponses, PlaceApiCanvasData, PlaceApiCanvasResponses, PlaceApiEvolutionGifData, PlaceApiEvolutionGifResponses, PolylanSubmitterApiClearCacheData, PolylanSubmitterApiClearCacheResponses, PolylanSubmitterApiGetUserInfoData, PolylanSubmitterApiGetUserInfoResponses, PolylanSubmitterApiHealthCheckData, PolylanSubmitterApiHealthCheckResponses, SubmissionsApiCreateImageCropData, SubmissionsApiCreateImageCropResponses, SubmissionsApiCreateSubmissionData, SubmissionsApiCreateSubmissionErrors, SubmissionsApiCreateSubmissionResponses, SubmissionsApiDeleteImageCropData, SubmissionsApiDeleteImageCropResponses, SubmissionsApiGetSubmissionData, SubmissionsApiGetSubmissionResponses, SubmissionsApiListAvailableScopesData, SubmissionsApiListAvailableScopesErrors, SubmissionsApiListAvailableScopesResponses, SubmissionsApiListMyScopesData, SubmissionsApiListMyScopesErrors, SubmissionsApiListMyScopesResponses, SubmissionsApiListSubmissionsByGameData, SubmissionsApiListSubmissionsByGameResponses, SubmissionsApiListUserSubmissionsData, SubmissionsApiListUserSubmissionsErrors, SubmissionsApiListUserSubmissionsResponses, SubmissionsApiProcessCropOcrData, SubmissionsApiProcessCropOcrResponses, SubmissionsApiProcessFileOcrData, SubmissionsApiProcessFileOcrResponses } from './types.gen';
|
||||
import type { AnimationsApiPuzzleResultsData, AnimationsApiPuzzleResultsResponses, AnimationsApiResultsData, AnimationsApiResultsResponses, AnimationsApiTopSubmissionsData, AnimationsApiTopSubmissionsResponses, ClockApiCurrentStateData, ClockApiCurrentStateResponses, ClockApiMyStatsData, ClockApiMyStatsResponses, GamesApiListEventGamesData, GamesApiListEventGamesResponses, GamesApiListEventSteamGamesData, GamesApiListEventSteamGamesResponses, GamesApiListGamesData, GamesApiListGamesResponses, MarketApiBetHistoryData, MarketApiBetHistoryResponses, MarketApiCloseMarketData, MarketApiCloseMarketResponses, MarketApiCreateBetData, MarketApiCreateBetResponses, MarketApiGetUserPointsData, MarketApiGetUserPointsResponses, MarketApiListMarketsData, MarketApiListMarketsResponses, MarketApiListUserBetsData, MarketApiListUserBetsResponses, MarketApiResolveMarketData, MarketApiResolveMarketResponses, NoitaApiGetLeaderboardData, NoitaApiGetLeaderboardResponses, NoitaApiGetResultsData, NoitaApiGetResultsResponses, NoitaApiSubmitLogFileData, NoitaApiSubmitLogFileErrors, NoitaApiSubmitLogFileResponses, OpusMagnumApiCreateSubmissionData, OpusMagnumApiCreateSubmissionResponses, OpusMagnumApiDeleteSubmissionData, OpusMagnumApiDeleteSubmissionResponses, OpusMagnumApiGetCollectionData, OpusMagnumApiGetCollectionResponses, OpusMagnumApiGetStatsData, OpusMagnumApiGetStatsResponses, OpusMagnumApiGetSubmissionData, OpusMagnumApiGetSubmissionResponses, OpusMagnumApiListPuzzlesData, OpusMagnumApiListPuzzlesResponses, OpusMagnumApiListResponsesNeedingValidationData, OpusMagnumApiListResponsesNeedingValidationResponses, OpusMagnumApiListSubmissionsData, OpusMagnumApiListSubmissionsResponses, OpusMagnumApiValidateAutoData, OpusMagnumApiValidateAutoResponses, OpusMagnumApiValidateResponseData, OpusMagnumApiValidateResponseResponses, OpusMagnumApiValidateSubmissionData, OpusMagnumApiValidateSubmissionResponses, PlaceApiCanvasData, PlaceApiCanvasResponses, PlaceApiEvolutionGifData, PlaceApiEvolutionGifResponses, PolylanSubmitterApiClearCacheData, PolylanSubmitterApiClearCacheResponses, PolylanSubmitterApiGetUserInfoData, PolylanSubmitterApiGetUserInfoResponses, PolylanSubmitterApiHealthCheckData, PolylanSubmitterApiHealthCheckResponses, SubmissionsApiCreateImageCropData, SubmissionsApiCreateImageCropResponses, SubmissionsApiCreateSubmissionData, SubmissionsApiCreateSubmissionErrors, SubmissionsApiCreateSubmissionResponses, SubmissionsApiDeleteImageCropData, SubmissionsApiDeleteImageCropResponses, SubmissionsApiGetSubmissionData, SubmissionsApiGetSubmissionResponses, SubmissionsApiListAvailableScopesData, SubmissionsApiListAvailableScopesErrors, SubmissionsApiListAvailableScopesResponses, SubmissionsApiListMyScopesData, SubmissionsApiListMyScopesErrors, SubmissionsApiListMyScopesResponses, SubmissionsApiListSubmissionsByGameData, SubmissionsApiListSubmissionsByGameResponses, SubmissionsApiListUserSubmissionsData, SubmissionsApiListUserSubmissionsErrors, SubmissionsApiListUserSubmissionsResponses, SubmissionsApiProcessCropOcrData, SubmissionsApiProcessCropOcrResponses, SubmissionsApiProcessFileOcrData, SubmissionsApiProcessFileOcrResponses } from './types.gen';
|
||||
|
||||
export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean, TResponse = unknown> = Options2<TData, ThrowOnError, TResponse> & {
|
||||
/**
|
||||
@@ -196,6 +196,13 @@ export const noitaApiSubmitLogFile = <ThrowOnError extends boolean = false>(opti
|
||||
*/
|
||||
export const gamesApiListEventGames = <ThrowOnError extends boolean = false>(options: Options<GamesApiListEventGamesData, ThrowOnError>) => (options.client ?? client).get<GamesApiListEventGamesResponses, unknown, ThrowOnError>({ url: '/api/events/{event_path}/games', ...options });
|
||||
|
||||
/**
|
||||
* List Event Steam Games
|
||||
*
|
||||
* The event's Steam games with their store info (price, discount, blurb).
|
||||
*/
|
||||
export const gamesApiListEventSteamGames = <ThrowOnError extends boolean = false>(options: Options<GamesApiListEventSteamGamesData, ThrowOnError>) => (options.client ?? client).get<GamesApiListEventSteamGamesResponses, unknown, ThrowOnError>({ url: '/api/events/{event_path}/games/steam', ...options });
|
||||
|
||||
/**
|
||||
* List My Scopes
|
||||
*/
|
||||
|
||||
@@ -924,6 +924,60 @@ export type NoitaSubmissionOut = {
|
||||
processed: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* SteamGameOut
|
||||
*/
|
||||
export type SteamGameOut = {
|
||||
/**
|
||||
* Id
|
||||
*/
|
||||
id: number;
|
||||
/**
|
||||
* Name
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* Steam App Id
|
||||
*/
|
||||
steam_app_id: number;
|
||||
/**
|
||||
* Store Url
|
||||
*/
|
||||
store_url: string;
|
||||
/**
|
||||
* Header Image
|
||||
*/
|
||||
header_image: string;
|
||||
/**
|
||||
* Short Description
|
||||
*/
|
||||
short_description: string;
|
||||
/**
|
||||
* Is Free
|
||||
*/
|
||||
is_free: boolean;
|
||||
/**
|
||||
* Currency
|
||||
*/
|
||||
currency: string;
|
||||
/**
|
||||
* Price Initial
|
||||
*/
|
||||
price_initial?: number | null;
|
||||
/**
|
||||
* Price Final
|
||||
*/
|
||||
price_final?: number | null;
|
||||
/**
|
||||
* Discount Percent
|
||||
*/
|
||||
discount_percent: number;
|
||||
/**
|
||||
* Updated At
|
||||
*/
|
||||
updated_at?: string | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* ScopeOut
|
||||
*/
|
||||
@@ -1715,6 +1769,29 @@ export type GamesApiListEventGamesResponses = {
|
||||
|
||||
export type GamesApiListEventGamesResponse = GamesApiListEventGamesResponses[keyof GamesApiListEventGamesResponses];
|
||||
|
||||
export type GamesApiListEventSteamGamesData = {
|
||||
body?: never;
|
||||
path: {
|
||||
/**
|
||||
* Event Path
|
||||
*/
|
||||
event_path: string;
|
||||
};
|
||||
query?: never;
|
||||
url: '/api/events/{event_path}/games/steam';
|
||||
};
|
||||
|
||||
export type GamesApiListEventSteamGamesResponses = {
|
||||
/**
|
||||
* Response
|
||||
*
|
||||
* OK
|
||||
*/
|
||||
200: Array<SteamGameOut>;
|
||||
};
|
||||
|
||||
export type GamesApiListEventSteamGamesResponse = GamesApiListEventSteamGamesResponses[keyof GamesApiListEventSteamGamesResponses];
|
||||
|
||||
export type SubmissionsApiListMyScopesData = {
|
||||
body?: never;
|
||||
path: {
|
||||
|
||||
@@ -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>
|
||||
@@ -64,8 +64,19 @@
|
||||
"title": "PolyLAN Submitter",
|
||||
"subtitle": "Choose a game and submit your best solutions",
|
||||
"submitResults": "Submit results",
|
||||
"getTheGames": "Get the games",
|
||||
"footer": "Select a game above to begin submitting"
|
||||
},
|
||||
"games": {
|
||||
"header": "Games",
|
||||
"title": "Get the games",
|
||||
"subtitle": "Don't own them yet? Grab them on Steam",
|
||||
"empty": "No Steam games for this event",
|
||||
"buy": "Buy {game}",
|
||||
"free": "Free to Play",
|
||||
"viewOnSteam": "View on Steam",
|
||||
"play": "Play"
|
||||
},
|
||||
"clock": {
|
||||
"pageTitle": "Beat the Clock",
|
||||
"header": "Beat the Clock",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { createRouter, createWebHistory, type RouteLocationNormalizedLoaded, type RouteLocationRaw } from "vue-router";
|
||||
import Clock from "@/Clock.vue";
|
||||
import Games from "@/Games.vue";
|
||||
import Home from "@/Home.vue";
|
||||
import Market from "@/Market.vue";
|
||||
import Noita from "@/Noita.vue";
|
||||
@@ -37,6 +38,13 @@ export const router = createRouter({
|
||||
component: Home,
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/:eventPath/games",
|
||||
name: "games",
|
||||
component: Games,
|
||||
props: true,
|
||||
meta: { titleKey: "games.header", getBackRoute: eventHome },
|
||||
},
|
||||
{
|
||||
path: "/:eventPath/market",
|
||||
name: "market",
|
||||
|
||||
Reference in New Issue
Block a user