@mundogamernetwork/shared-ui 1.8.4 → 1.8.6

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/package.json

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

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>
+										<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>
-										{{ card.text }}
+										<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,
 			}
 		})
@@ -1204,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;
@@ -1254,6 +1310,10 @@ onUnmounted(() => {
 								color: var(--secondary-info-fg);
 								text-transform: uppercase;
 							}
+							.card-platform-more {
+								border-style: dashed;
+								opacity: 0.8;
+							}
 						}
 
 						.buttons {

package/pages/media-kit/[slug].vue

@@ -32,6 +32,7 @@ const loading = ref(true);
 const error = ref(false);
 
 const userId = computed(() => kit.value?.user_id);
+const hasMural = ref(false);
 const influencerProId = computed<number | null>(() => kit.value?.influencer_professional_info_id ?? null);
 const isOwnKit = computed(() => !!authStore.user?.id && !!userId.value && String(authStore.user.id) === String(userId.value));
 const showShortlistBar = computed(() =>
@@ -73,6 +74,7 @@ const portfolioImages = computed(() => kit.value?.portfolio_images ?? streamer.v
 const brandLogos = computed(() => kit.value?.brand_logos ?? streamer.value?.brand_logos ?? []);
 const creatorStore = computed(() => kit.value?.creator_store ?? null);
 const customLinks = computed(() => kit.value?.custom_links ?? streamer.value?.custom_links ?? []);
+const websiteUrl = computed<string | null>(() => streamer.value?.website ?? null);
 
 // ── D2 ecosystem data ──
 const selectedGames = computed<string[]>(() => kit.value?.selected_games ?? []);
@@ -253,7 +255,9 @@ function onDownload() {
 		<div v-else-if="error || !kit" class="kit-state"><p>{{ $t('kit.media.not_available') }}</p></div>
 
 		<template v-else>
-			<div class="mk-cover" :class="{ 'has-image': coverUrl }" :style="coverStyle" />
+			<div class="mk-cover" :class="{ 'has-image': coverUrl }" :style="coverStyle">
+				<span v-if="!coverUrl" class="mk-cover-brand">MUNDO GAMER AGENCY</span>
+			</div>
 
 			<div class="kit-wrap mk-layout">
 				<!-- ══════════════ SIDEBAR ══════════════ -->
@@ -290,9 +294,12 @@ function onDownload() {
 					</div>
 
 					<!-- Personal link hub: replaces a separate link-in-bio service. -->
-					<nav v-if="customLinks.length || tvChannelUrl || creatorStore || userId" class="mk-link-hub no-print" data-sec="links" :aria-label="$t('kit.media.quick_links')">
+					<nav v-if="customLinks.length || tvChannelUrl || websiteUrl || creatorStore || hasMural" class="mk-link-hub no-print" data-sec="links" :aria-label="$t('kit.media.quick_links')">
 						<a v-if="tvChannelUrl" class="mk-link mk-link--tv" :href="tvChannelUrl" target="_blank" rel="noopener" @click="track('click')">
-							<span>📺 {{ $t('kit.media.tv_channel') }}</span><b>↗</b>
+							<span>{{ $t('kit.media.tv_channel') }}</span><b>↗</b>
+						</a>
+						<a v-if="websiteUrl" class="mk-link" :href="websiteUrl" target="_blank" rel="noopener" @click="track('click')">
+							<span>{{ $t('kit.media.official_site') }}</span><b>↗</b>
 						</a>
 						<a v-for="(link, index) in customLinks" :key="`${link.url}-${index}`" class="mk-link" :href="link.url" target="_blank" rel="noopener" @click="track('click')">
 							<span>{{ link.label }}</span><b>↗</b>
@@ -300,7 +307,7 @@ function onDownload() {
 						<a v-if="creatorStore" class="mk-link" href="#store" @click="track('click')">
 							<span>{{ $t('kit.media.visit_store') }}</span><b>↓</b>
 						</a>
-						<a v-if="userId" class="mk-link" href="#support" @click="track('click')">
+						<a v-if="hasMural" class="mk-link" href="#support" @click="track('click')">
 							<span>{{ $t('kit.media.visit_mural') }}</span><b>↓</b>
 						</a>
 					</nav>
@@ -538,7 +545,7 @@ function onDownload() {
 				</section>
 
 				<section v-if="userId" id="support" class="kit-block" data-sec="support">
-					<MediaKitWallBlock :user-id="userId" />
+					<MediaKitWallBlock :user-id="userId" @wall-status="hasMural = $event" />
 				</section>
 
 				<footer class="mk-footer">
@@ -589,6 +596,22 @@ function onDownload() {
 	}
 }
 
+.mk-cover-brand {
+	position: absolute;
+	top: 20px;
+	right: 24px;
+	font-family: 'Rajdhani', sans-serif;
+	font-weight: 700;
+	font-size: 13px;
+	letter-spacing: 3px;
+	color: rgba(255, 255, 255, .55);
+	pointer-events: none;
+
+	@media (max-width: 640px) {
+		display: none;
+	}
+}
+
 /* ── Layout: sidebar + main ── */
 .mk-layout {
 	display: grid;