@mundogamernetwork/shared-ui 1.8.2 → 1.8.4

package/components/keys/KeyCampaignDashboardCard.vue

@@ -7,6 +7,8 @@ const props = defineProps<{
 		slug: string;
 		name: string;
 		cover: string | null;
+		cover_focal_x?: number | null;
+		cover_focal_y?: number | null;
 		game_cover?: string | null;
 		available_count: number;
 		is_exclusive?: boolean;
@@ -34,6 +36,17 @@ const cardCover = computed(() => {
 	return c.cover || c.cover_src || c.game?.url_cover_src || c.game_cover || "/imgs/no-cover-img.jpg";
 });
 
+// Only apply the campaign's own focal point to its own cover — a game-cover/no-cover
+// fallback wasn't framed against that point and would crop wrong if we reused it.
+const cardCoverPosition = computed(() => {
+	const c = props.card as any;
+	const hasOwnCover = Boolean(c.cover || c.cover_src);
+	if (!hasOwnCover) return "50% 50%";
+	const fx = c.cover_focal_x ?? 0.5;
+	const fy = c.cover_focal_y ?? 0.5;
+	return `${fx * 100}% ${fy * 100}%`;
+});
+
 const userCanAccess = computed(() => props.publicMode || props.card.user_can_access !== false);
 const isExpired    = computed(() => props.card.isExpired ?? false);
 const isUpcoming   = computed(() => props.card.isUpcoming ?? false);
@@ -99,6 +112,7 @@ const detailRoute = computed(() =>
 					<img
 						:src="cardCover"
 						:alt="card.name"
+						:style="{ objectPosition: cardCoverPosition }"
 						:class="{ 'gray-out': isExpired || isUpcoming || !userCanAccess }"
 						@error="(e: Event) => { (e.target as HTMLImageElement).src = '/imgs/no-cover-img.jpg' }"
 					/>

package/components/keys/KeyCampaignsCarousel.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import { ref, onMounted, inject } from "vue"
 import { fetchCampaigns } from "../../services/campaignService"
+import KeyCampaignDashboardCard from "./KeyCampaignDashboardCard.vue"
 
 const props = defineProps<{
 	excludeId?: number | null
 	mgPlatform?: string
+	publicMode?: boolean
+	baseRoute?: string
 }>()
 
 const mgPlatform = props.mgPlatform || (inject<string>("mgPlatform", "MGTV"))
@@ -46,31 +49,13 @@ onMounted(async () => {
 		</div>
 
 		<div v-else class="kc-carousel__track">
-			<NuxtLink
-				v-for="item in items"
-				:key="item.id"
-				:to="`/key-campaigns/${item.slug}`"
-				class="kc-carousel__card"
-			>
-				<div class="kc-carousel__thumb">
-					<img
-						v-if="item.cover_src || item.cover"
-						:src="item.cover_src || item.cover"
-						:alt="item.name"
-					/>
-					<div v-else class="kc-carousel__thumb-placeholder">
-						<i class="mg-icon mg-icon-game-key" />
-					</div>
-					<span v-if="!item.is_open" class="kc-carousel__closed">{{ $t("keys.campaigns.closed") }}</span>
-				</div>
-				<div class="kc-carousel__info">
-					<div class="kc-carousel__name">{{ item.name }}</div>
-					<div class="kc-carousel__avail">
-						{{ item.available_count ?? 0 }}/{{ item.total_count ?? item.quantity ?? "?" }}
-						{{ $t("keys.campaigns.available") }}
-					</div>
-				</div>
-			</NuxtLink>
+			<div v-for="item in items" :key="item.id" class="kc-carousel__card">
+				<KeyCampaignDashboardCard
+					:card="{ ...item, isExpired: item.is_open === false }"
+					:public-mode="publicMode"
+					:base-route="baseRoute ?? 'key-campaigns'"
+				/>
+			</div>
 		</div>
 	</div>
 </template>
@@ -105,81 +90,14 @@ onMounted(async () => {
 	}
 
 	&__skeleton {
-		flex: 0 0 180px;
-		height: 140px;
+		flex: 0 0 200px;
+		height: 280px;
 		background: var(--bg-app-badge);
 		animation: pulse 1.4s ease-in-out infinite;
 	}
 
 	&__card {
-		flex: 0 0 180px;
-		display: flex;
-		flex-direction: column;
-		text-decoration: none;
-		color: inherit;
-		border: 1px solid var(--button-secondary-default-bg);
-		transition: border-color 0.15s;
-
-		&:hover { border-color: var(--key-accent, var(--primary, #D297FF)); }
-	}
-
-	&__thumb {
-		position: relative;
-		width: 100%;
-		height: 101px;
-		overflow: hidden;
-		background: var(--bg-app-badge);
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-	}
-
-	&__thumb-placeholder {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--secondary-info-fg);
-		font-size: 24px;
-	}
-
-	&__closed {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: var(--overlay-dark, rgba(0, 0, 0, 0.55));
-		font-size: 11px;
-		font-weight: 700;
-		color: var(--card-article-title, #fff);
-		letter-spacing: 0.5px;
-		text-transform: uppercase;
-	}
-
-	&__info {
-		padding: 8px 10px;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__name {
-		font-size: 12px;
-		font-weight: 600;
-		color: var(--card-article-title);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&__avail {
-		font-size: 11px;
-		color: var(--secondary-info-fg);
+		flex: 0 0 200px;
 	}
 }
 

package/components/ui/MgHeaderUIUser.vue

@@ -107,7 +107,7 @@ const handleLogout = async () => {
 				<div v-if="features.wallet && user?.coins !== null" class="row info-row">
 					<span class="coins">
 						<MGIcon icon="coin" />
-						{{ user?.coins ?? 0 }}
+						{{ Math.floor(user?.coins ?? 0).toLocaleString() }}
 					</span>
 				</div>
 

package/components/ui/MgWalletPlanBadge.vue

@@ -44,7 +44,7 @@ const isSubscriber = computed(() => !!(user.value as any)?.subscription?.is_subs
 	<div class="mg-wallet-plan">
 		<span v-if="showWallet" class="mg-wallet-plan__coins">
 			<MGIcon icon="coin" />
-			{{ walletBalance.toLocaleString() }}
+			{{ Math.floor(walletBalance).toLocaleString() }}
 			<span class="mg-wallet-plan__currency">MGC</span>
 		</span>
 		<span

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaign/[slug].vue

@@ -78,7 +78,13 @@ const restriction = computed(() => {
 
 		<template v-else>
 			<div class="kc__hero">
-				<img v-if="key.cover_src" :src="key.cover_src" :alt="key.name" class="kc__cover">
+				<img
+					v-if="key.cover_src"
+					:src="key.cover_src"
+					:alt="key.name"
+					class="kc__cover"
+					:style="{ objectPosition: `${(key.cover_focal_x ?? 0.5) * 100}% ${(key.cover_focal_y ?? 0.5) * 100}%` }"
+				>
 				<div class="kc__hero-body">
 					<h1 class="kc__title">{{ key.name }}</h1>
 					<div v-if="restriction" class="kc__badge">🔒 {{ restriction }}</div>
@@ -96,7 +102,7 @@ const restriction = computed(() => {
 				/>
 			</div>
 
-			<KeyCampaignsCarousel :exclude-id="key.id ?? null" />
+			<KeyCampaignsCarousel :exclude-id="key.id ?? null" :public-mode="true" base-route="key-campaign" />
 		</template>
 	</div>
 </template>

package/pages/key-campaigns/[slug].vue

@@ -840,9 +840,9 @@ onMounted(async () => {
 									<img
 										v-for="(u, index) in redeemedUsers?.users?.slice(0, 4)"
 										:key="index"
-										:src="u.avatar_url || '/imgs/avatar-default.jpg'"
+										:src="u.avatar_url || '/imgs/default-avatar.png'"
 										:alt="u.nickname"
-										@error="(e: Event) => { const t = e.target as HTMLImageElement; if (t && t.src !== '/imgs/avatar-default.jpg') t.src = '/imgs/avatar-default.jpg' }"
+										@error="(e: Event) => { const t = e.target as HTMLImageElement; if (t) { t.onerror = null; t.src = '/imgs/default-avatar.png' } }"
 									/>
 								</div>
 								<div class="text">
@@ -872,9 +872,9 @@ onMounted(async () => {
 									</div>
 									<div v-for="(u, index) in redeemedUsers?.users" :key="index" class="users-modal-row">
 										<img
-											:src="u.avatar_url || '/imgs/avatar-default.jpg'"
+											:src="u.avatar_url || '/imgs/default-avatar.png'"
 											:alt="u.nickname"
-											@error="(e: Event) => { const t = e.target as HTMLImageElement; if (t && t.src !== '/imgs/avatar-default.jpg') t.src = '/imgs/avatar-default.jpg' }"
+											@error="(e: Event) => { const t = e.target as HTMLImageElement; if (t) { t.onerror = null; t.src = '/imgs/default-avatar.png' } }"
 										/>
 										<span>{{ u.nickname || `${u.first_name || ''} ${u.last_name || ''}`.trim() }}</span>
 									</div>
@@ -926,6 +926,8 @@ onMounted(async () => {
 	<KeyCampaignsCarousel
 		:exclude-id="campaign?.id ?? null"
 		:mg-platform="mgPlatform"
+		:public-mode="true"
+		base-route="key-campaigns"
 		class="container"
 	/>
 	</div>
@@ -1482,6 +1484,16 @@ onMounted(async () => {
 				.time { gap: 6px; .card-time { height: auto; padding: 8px; font-size: 24px; } }
 				.actions .data { flex-direction: column; }
 				.status { flex-direction: column; align-items: start; gap: 8px; }
+				.requirements .tags {
+					flex-wrap: wrap;
+					.tag {
+						height: auto;
+						min-height: 32px;
+						padding: 8px;
+						flex: 1 1 calc(50% - 6px);
+						text-align: center;
+					}
+				}
 			}
 		}
 	}

package/pages/key-campaigns/index.vue

@@ -1090,12 +1090,24 @@ onUnmounted(() => {
 					gap: 12px;
 					button { height: 44px; }
 
-					// FormAppSelect ships at 32px (its own default look on other
-					// pages) — bump to match the 44px filter pills/search box so
-					// the toolbar reads as one consistent row instead of controls
-					// bobbing at two different heights.
-					:deep(.select-wrapper) { display: flex; align-items: center; height: 44px; }
-					:deep(.select-wrapper select) { height: 44px; }
+					// FormAppSelect ships at 32px with its own light --input-bg
+					// (its default look on other pages, e.g. account settings
+					// forms on a card background) — bump to match the 44px
+					// filter pills/search box height, and repaint it to match
+					// the dark toolbar instead of the light default, so it
+					// reads as one consistent row instead of a native-looking
+					// light select stranded next to dark pills.
+					:deep(.select-wrapper) {
+						display: flex;
+						align-items: center;
+						height: 44px;
+						border-bottom-color: var(--secondary-info-fg);
+					}
+					:deep(.select-wrapper select) {
+						height: 44px;
+						background: transparent;
+						color: var(--secondary-info-fg);
+					}
 				}
 
 				.header-left .btn.tertiary.active {