@mundogamernetwork/shared-ui 1.8.3 → 1.8.5

package/components/indie-wall/MediaKitWallBlock.vue

@@ -4,6 +4,7 @@ import MuralCanvas from './MuralCanvas.vue'
 import SupportStepper from './SupportStepper.vue'
 
 const props = defineProps<{ userId: number | string }>()
+const emit = defineEmits<{ (e: 'wall-status', hasWall: boolean): void }>()
 const localePath = useLocalePath()
 const authStore = useAuthStore()
 const { locale } = useI18n()
@@ -102,8 +103,12 @@ async function load() {
 		const res = await fetchStreamerActiveWalls(props.userId)
 		const list = res.data?.data ?? res.data ?? []
 		const first = Array.isArray(list) ? list.find((w: any) => w.show_on_media_kit) ?? list[0] : null
-		if (!first) return
+		if (!first) {
+			emit('wall-status', false)
+			return
+		}
 		wall.value = first
+		emit('wall-status', true)
 		const [goalsRes, supRes] = await Promise.all([
 			fetchPublicWallGoals(first.slug || first.id).catch(() => ({ data: { data: [] } })),
 			getWallSupporters(first.slug || first.id, { per_page: 500 }),
@@ -112,6 +117,7 @@ async function load() {
 		supporters.value = (supRes.data?.data ?? []).filter((p: any) => p.status)
 	} catch {
 		// no wall — renders nothing
+		emit('wall-status', false)
 	} finally {
 		loading.value = false
 	}

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.3",
+  "version": "1.8.5",
   "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

@@ -196,6 +196,12 @@
 									</div>
 
 									<div class="text">
+										<div class="card-name">{{ card.gameName || card.text }}</div>
+										<div v-if="card.studioName || card.regions.length" class="card-studio-row">
+											<span v-if="card.studioName" class="card-studio-name">{{ card.studioName }}</span>
+											<span v-if="card.studioName && card.regions.length" class="card-studio-sep">·</span>
+											<span v-if="card.regions.length">{{ card.regions.slice(0, 2).join(", ") }}</span>
+										</div>
 										<div class="card-meta-row">
 											<div class="days" v-if="card.time > 0 && card.user_can_access">
 												<span>{{ card.time }}</span> {{ $t("keys.campaigns.days") }}
@@ -208,11 +214,17 @@
 											</span>
 										</div>
 										<div v-if="card.platforms && card.platforms.length" class="card-platforms">
-											<span v-for="p in card.platforms" :key="p" class="card-platform-tag">
+											<span v-for="p in card.platforms.slice(0, 4)" :key="p" class="card-platform-tag">
 												{{ platformAbbr(p) }}
 											</span>
+											<span v-if="card.platforms.length > 4" class="card-platform-tag card-platform-more">
+												+{{ card.platforms.length - 4 }}
+											</span>
 										</div>
-										{{ card.text }}
+										<div v-if="card.available_count > 0 && card.user_can_access && !card.isExpired && !card.isUpcoming" class="card-availability">
+											{{ $t("keys.campaigns.keys_left", { n: card.available_count }) }}
+										</div>
+										<div v-if="card.gameName && card.gameName !== card.text" class="card-campaign-name">{{ card.text }}</div>
 
 										<div class="buttons">
 											<template v-if="!card.user_can_access">
@@ -609,6 +621,8 @@ async function loadCampaigns(page = 1) {
 				max_keys_for_user: item.max_keys_for_user || 1,
 				platforms: (item.platforms || []).map((p: any) => p.name),
 				gameName: item.game?.name || null,
+				studioName: item.company?.name || null,
+				regions: (item.regions || []).map((r: any) => r.name).filter(Boolean),
 				userRequestSlug: null,
 			}
 		})
@@ -1090,12 +1104,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 {
@@ -1192,12 +1218,54 @@ onUnmounted(() => {
 								max-height: 174px;
 								min-height: 174px;
 								overflow: hidden;
+								background: var(--body-bg-card, #101012);
+								display: flex;
+								align-items: center;
+								justify-content: center;
 								img { width: 100%; height: auto; display: flex; }
+								// The no-cover fallback is a small centered logo, not a
+								// banner — stretching it to 100% width (the normal-cover
+								// rule above) distorts it badly. Contain it instead.
+								&:has(img[src$="no-cover-img.jpg"]) img {
+									width: 40%;
+									height: auto;
+									max-height: 60%;
+									object-fit: contain;
+								}
 							}
 						}
 					}
 
 					.text {
+						min-height: 210px;
+
+						.card-name {
+							font-size: 16px;
+							font-weight: 700;
+							color: var(--title-fg);
+						}
+
+						.card-studio-row {
+							font-size: 12px;
+							color: var(--secondary-info-fg);
+							font-weight: 400;
+							display: flex;
+							align-items: center;
+							gap: 6px;
+						}
+
+						.card-availability {
+							font-size: 12px;
+							color: var(--key-accent, var(--primary, #D297FF));
+							font-weight: 600;
+						}
+
+						.card-campaign-name {
+							font-size: 13px;
+							font-weight: 400;
+							color: var(--secondary-info-fg);
+						}
+
 						.card-meta-row {
 							display: flex;
 							align-items: center;
@@ -1242,6 +1310,10 @@ onUnmounted(() => {
 								color: var(--secondary-info-fg);
 								text-transform: uppercase;
 							}
+							.card-platform-more {
+								border-style: dashed;
+								opacity: 0.8;
+							}
 						}
 
 						.buttons {