@mundogamernetwork/shared-ui 1.1.44 → 1.1.46

package/pages/presskit/game/[slug].vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { trackPressKitEvent } from '../../services/pressKitService';
+
+definePageMeta({ layout: 'blank' });
+
+const route = useRoute();
+const slug = route.params.slug as string;
+
+const runtimeConfig = useRuntimeConfig();
+const cfg = (runtimeConfig.public?.mgSharedUi || {}) as Record<string, any>;
+// Consuming apps may set apiBaseURL at public root (agency/community/tv pattern)
+// or inside mgSharedUi. pressKitApiUrl overrides both (e.g. community points to agency API).
+const apiBase: string =
+	cfg.pressKitApiUrl ||
+	(runtimeConfig.public as any)?.pressKitApiUrl ||
+	cfg.apiBaseURL ||
+	(runtimeConfig.public as any)?.apiBaseURL ||
+	'';
+
+const agencyBase: string =
+	cfg.agencyBaseUrl ||
+	(runtimeConfig.public as any)?.agencyBaseUrl ||
+	'';
+
+const SUPPORTED_LOCALES = ['en', 'pt-BR', 'es', 'de', 'ro', 'ar-AE'];
+const routePath = route.path.split('/');
+const lang = SUPPORTED_LOCALES.find(l => routePath.includes(l)) || 'en';
+
+const { data: kitData, error: fetchError, pending } = await useAsyncData(
+	`press-kit-${slug}`,
+	() => $fetch<any>(`${apiBase}/public/press-kits/${slug}`, {
+		params: { include: 'assets,videos,credits,awards,quotes', lang },
+	}),
+	{ lazy: false },
+);
+
+const kit = computed(() => kitData.value?.data || kitData.value || null);
+const loading = pending;
+const error = computed(() => !!fetchError.value || (!pending.value && !kit.value));
+
+onMounted(() => {
+	if (kit.value) {
+		trackPressKitEvent(slug, {
+			event_type: 'view',
+			referrer: document.referrer || undefined,
+		}).catch(() => {});
+	}
+});
+
+// Fractal include shape: relation -> { data: [...] }
+const list = (rel: any) => rel?.data || rel || [];
+const assets = computed(() => list(kit.value?.assets));
+const videos = computed(() => list(kit.value?.videos));
+const awards = computed(() => list(kit.value?.awards));
+const quotes = computed(() => list(kit.value?.quotes));
+const team = computed(() => list(kit.value?.credits));
+const features = computed(() => kit.value?.key_features || []);
+// New, optional blocks (rendered only when the API provides them)
+const articles = computed(() => list(kit.value?.articles));
+const coverage = computed(() => list(kit.value?.coverage));
+const showcases = computed(() => list(kit.value?.showcases));
+const hasEcosystem = computed(() => showcases.value.length || kit.value?.ventures_url || kit.value?.magazine_feature || kit.value?.community_url);
+
+const screenshots = computed(() => assets.value.filter((a: any) => ['screenshot', 'artwork', 'gif'].includes(a.type)));
+const brandAssets = computed(() => assets.value.filter((a: any) => ['logo', 'document'].includes(a.type)));
+
+const tpl = computed(() => kit.value?.theme || null);
+const layout = computed(() => kit.value?.layout || 'classic');
+const allowDownload = computed(() => kit.value?.allow_asset_download !== false);
+
+const keyPoolsVisible = ref(false);
+function onPoolsReady(count: number) {
+	keyPoolsVisible.value = count > 0;
+}
+
+const socials = computed(() => {
+	const s = kit.value?.social_links || {};
+	return Object.entries(s).filter(([, v]) => v).map(([k, v]) => ({ platform: k, url: v as string }));
+});
+
+const facts = computed(() => {
+	const k = kit.value || {};
+	const out: { label: string; value: string; accent?: boolean; href?: string }[] = [];
+	if (k.developer) out.push({ label: 'kit.press.developer', value: k.developer });
+	if (k.publisher) out.push({ label: 'kit.press.publisher', value: k.publisher });
+	if (k.release_date_tba) out.push({ label: 'kit.press.release', value: 'TBA', accent: true });
+	else if (k.release_date) out.push({ label: 'kit.press.release', value: k.release_date, accent: true });
+	if (k.release_status) out.push({ label: 'kit.press.status', value: String(k.release_status).replace(/_/g, ' ') });
+	if (k.price) out.push({ label: 'kit.press.price', value: `${k.price}${k.currency ? ' ' + k.currency : ''}` });
+	if (k.website_url) out.push({ label: 'kit.press.website', value: k.website_url, accent: true, href: k.website_url });
+	if (k.steam_url) out.push({ label: 'Steam', value: k.steam_url, href: k.steam_url });
+	if (k.press_contact_email) out.push({ label: 'kit.press.contact', value: k.press_contact_email, href: `mailto:${k.press_contact_email}` });
+	return out;
+});
+
+function track(type: 'click' | 'download' | 'contact') {
+	trackPressKitEvent(slug, { event_type: type, referrer: document.referrer || undefined }).catch(() => {});
+}
+
+const requestUrl = useRequestURL();
+useHead(() => ({
+	title: kit.value ? `${kit.value.name} — Press Kit` : 'Press Kit',
+	meta: [
+		{ name: 'description', content: kit.value?.tagline || '' },
+		{ property: 'og:title', content: kit.value?.name || 'Press Kit' },
+		{ property: 'og:description', content: kit.value?.tagline || '' },
+		{ property: 'og:image', content: kit.value?.hero_image_url || kit.value?.logo_url || '' },
+		{ property: 'og:type', content: 'article' },
+		{ property: 'og:url', content: requestUrl.href },
+	],
+}));
+</script>
+
+<template>
+	<div class="kit-press" :data-tpl="tpl" :data-layout="layout">
+		<div v-if="loading" class="kit-state">{{ $t('kit.loading') }}</div>
+		<div v-else-if="error || !kit" class="kit-state">
+			<h2>{{ $t('kit.press.not_found') }}</h2>
+		</div>
+
+		<template v-else>
+			<!-- CAPA / COVER -->
+			<header class="kit-cover">
+				<img v-if="kit.hero_image_url" class="kit-cover-art" :src="kit.hero_image_url" :alt="kit.name" />
+				<div class="kit-cover-inner">
+					<img v-if="kit.cover_image_url" class="kit-cover-poster" :src="kit.cover_image_url" :alt="kit.name" />
+					<div class="kit-cover-text">
+						<span v-if="kit.release_status" class="kit-eyebrow">{{ String(kit.release_status).replace(/_/g, ' ') }}</span>
+						<img v-if="kit.logo_url" class="kit-cover-logo-img" :src="kit.logo_url" :alt="kit.name" />
+						<h1 v-else>{{ kit.name }}</h1>
+						<p v-if="kit.tagline" class="kit-tagline">{{ kit.tagline }}</p>
+						<p v-if="kit.developer" class="kit-kicker">{{ kit.developer }}</p>
+						<div class="kit-actions">
+							<a v-if="allowDownload" class="kit-btn kit-btn-primary" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
+							<a v-if="kit.press_contact_email" class="kit-btn kit-btn-ghost" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
+						</div>
+					</div>
+				</div>
+			</header>
+
+			<div class="kit-wrap">
+				<div class="kit-layout">
+					<aside class="kit-sidebar">
+						<div class="kit-card kit-factsheet">
+							<h3 class="kit-fact-title">{{ $t('kit.press.fact_sheet') }}</h3>
+							<div v-for="f in facts" :key="f.label" class="kit-fact">
+								<span class="k">{{ $te(f.label) ? $t(f.label) : f.label }}</span>
+								<a v-if="f.href" class="v accent" :href="f.href" target="_blank" rel="noopener" @click="track('click')">{{ f.value }}</a>
+								<span v-else class="v" :class="{ accent: f.accent }">{{ f.value }}</span>
+							</div>
+							<div v-if="socials.length" class="kit-fact">
+								<span class="k">{{ $t('kit.press.social') }}</span>
+								<div class="kit-socials">
+									<a v-for="s in socials" :key="s.platform" :href="s.url" target="_blank" rel="noopener" @click="track('click')">{{ s.platform.charAt(0).toUpperCase() }}</a>
+								</div>
+							</div>
+						</div>
+					</aside>
+
+					<main class="kit-main">
+						<section v-if="kit.description" class="kit-block">
+							<h2>{{ $t('kit.press.about') }}</h2>
+							<div class="kit-lead" v-html="kit.description" />
+						</section>
+
+						<section v-if="features.length" class="kit-block">
+							<h2>{{ $t('kit.press.features') }}</h2>
+							<div class="kit-features">
+								<div v-for="(f, i) in features" :key="i" class="kit-feature"><span class="m">▸</span>{{ f }}</div>
+							</div>
+						</section>
+
+						<section v-if="videos.length" class="kit-block">
+							<h2>{{ $t('kit.press.videos') }}</h2>
+							<PressKitVideoPlayer :videos="videos" />
+						</section>
+
+						<section v-if="screenshots.length" class="kit-block">
+							<div class="kit-shead"><h2>{{ $t('kit.press.screenshots') }}</h2><a v-if="allowDownload" class="kit-dl" @click="track('download')">{{ $t('kit.press.download_all') }}</a></div>
+							<div class="kit-gallery">
+								<a v-for="(s, i) in screenshots" :key="i" class="kit-shot" :href="s.url" target="_blank" rel="noopener"><img :src="s.thumbnail_url || s.url" :alt="s.title || ''" /></a>
+							</div>
+						</section>
+
+						<section v-if="brandAssets.length" class="kit-block">
+							<div class="kit-shead"><h2>{{ $t('kit.press.logo_icons') }}</h2></div>
+							<div class="kit-logos">
+								<a v-for="(b, i) in brandAssets" :key="i" class="kit-logo-tile" :href="b.url" target="_blank" rel="noopener" @click="track('download')">
+									<span class="ic">◆</span>{{ b.title || b.type }}
+								</a>
+							</div>
+						</section>
+
+						<!-- NEW: Conteúdos & Artigos (community + external) -->
+						<section v-if="articles.length" class="kit-block">
+							<div class="kit-shead"><h2>{{ $t('kit.press.articles') }}</h2></div>
+							<div class="kit-articles">
+								<a v-for="(a, i) in articles" :key="i" class="kit-article" :href="a.url" target="_blank" rel="noopener" @click="track('click')">
+									<div class="thumb" :style="a.image ? { backgroundImage: `url(${a.image})` } : {}"><span class="src" :class="{ ext: a.external }">{{ a.external ? $t('kit.press.external') : 'Mundo Gamer' }}</span></div>
+									<div class="a-body"><h4>{{ a.title }}</h4><div class="meta">{{ a.source }}<span v-if="a.date"> · {{ a.date }}</span></div></div>
+								</a>
+							</div>
+						</section>
+
+						<!-- NEW: Cobertura de Criadores -->
+						<section v-if="coverage.length" class="kit-block">
+							<h2>{{ $t('kit.press.coverage') }}</h2>
+							<div class="kit-creators">
+								<a v-for="(c, i) in coverage" :key="i" class="kit-creator" :href="c.url || undefined" target="_blank" rel="noopener">
+									<div class="av" :style="c.avatar ? { backgroundImage: `url(${c.avatar})` } : {}" />
+									<div class="cn">{{ c.name }}</div>
+									<div class="cp">{{ c.platform }}<span v-if="c.followers"> · {{ c.followers }}</span></div>
+									<div v-if="c.label" class="cv">{{ c.label }}</div>
+								</a>
+							</div>
+						</section>
+
+						<section v-if="awards.length" class="kit-block">
+							<h2>{{ $t('kit.press.awards') }}</h2>
+							<PressKitAwards :awards="awards" />
+						</section>
+
+						<section v-if="quotes.length" class="kit-block">
+							<h2>{{ $t('kit.press.press') }}</h2>
+							<PressKitQuotes :quotes="quotes" />
+						</section>
+
+						<!-- Créditos -> Equipe -->
+						<section v-if="team.length" class="kit-block">
+							<h2>{{ $t('kit.press.team') }}</h2>
+							<div class="kit-team">
+								<div v-for="(m, i) in team" :key="i" class="kit-member"><span>{{ m.name }}</span><span class="role">{{ m.role }}</span></div>
+							</div>
+						</section>
+
+						<!-- NEW: Ecossistema Mundo Gamer -->
+						<section v-if="hasEcosystem" class="kit-block">
+							<h2>{{ $t('kit.press.ecosystem') }}</h2>
+							<div class="kit-eco">
+								<div v-if="showcases.length" class="kit-eco-card full">
+									<div class="kit-eco-h"><span class="ic">★</span>{{ $t('kit.press.showcases') }}</div>
+									<div class="kit-sbadges">
+										<span v-for="(s, i) in showcases" :key="i" class="kit-sbadge" :class="{ feat: s.featured }"><span class="medal">{{ s.featured ? '🏵️' : '🎮' }}</span>{{ s.name }}<span v-if="s.year"> {{ s.year }}</span></span>
+									</div>
+								</div>
+								<div v-if="kit.ventures_url" class="kit-eco-card">
+									<div class="kit-eco-h"><span class="ic">◈</span>MGN Ventures</div>
+									<a class="kit-vrow" :href="kit.ventures_url" target="_blank" rel="noopener" @click="track('click')"><span class="vlogo">VENTURES</span><span class="vtxt">{{ $t('kit.press.ventures_text') }}</span></a>
+								</div>
+								<a v-if="kit.magazine_feature" class="kit-eco-card kit-mag" :href="kit.magazine_feature.url" target="_blank" rel="noopener" @click="track('click')">
+									<div class="kit-eco-h" style="width:100%"><span class="ic">▤</span>MGN Magazine</div>
+									<div class="kit-mag-row"><div class="mcover" :style="kit.magazine_feature.cover ? { backgroundImage: `url(${kit.magazine_feature.cover})` } : {}" /><div><div class="mtitle">{{ kit.magazine_feature.title }}</div><div class="mmeta">{{ kit.magazine_feature.issue }}</div></div></div>
+								</a>
+								<div v-if="kit.community_url" class="kit-eco-card full">
+									<div class="kit-ccta">
+										<div><div class="ctitle">{{ $t('kit.press.follow_community', { name: kit.name }) }}</div><div v-if="kit.community_followers" class="cmeta">{{ kit.community_followers }} {{ $t('kit.press.followers') }}</div></div>
+										<a class="kit-btn kit-btn-primary" :href="kit.community_url" target="_blank" rel="noopener" @click="track('click')">{{ $t('kit.press.follow') }}</a>
+									</div>
+								</div>
+							</div>
+						</section>
+
+						<!-- Key pools embed — shown when game has active pools -->
+						<section v-if="kit.game_id" v-show="keyPoolsVisible" class="kit-block kit-keys-section">
+							<h2 class="kit-keys-title">{{ $t('kit.press.get_key_title') }}</h2>
+							<p class="kit-keys-desc">{{ $t('kit.press.get_key_desc') }}</p>
+							<KeyBrowser
+								requester-context="user"
+								:game-id="kit.game_id"
+								@pools-ready="onPoolsReady"
+							/>
+						</section>
+
+						<section v-if="kit.press_contact_email" class="kit-block">
+							<div class="kit-cta">
+								<h2>{{ $t('kit.press.covering', { name: kit.name }) }}</h2>
+								<p>{{ $t('kit.press.cta_text') }}</p>
+								<a class="kit-btn kit-btn-primary" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.contact_btn') }}</a>
+							</div>
+						</section>
+
+						<p class="kit-madewith">
+							{{ $t('kit.press.made_with') }} <strong>Mundo Gamer</strong> —
+							<a :href="kit.create_kit_url || `${agencyBase}/presskit`" target="_blank" rel="noopener">{{ $t('kit.press.create_yours') }}</a>
+						</p>
+					</main>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>

package/plugins/echo.client.ts

@@ -55,7 +55,7 @@ export default defineNuxtPlugin({
 				authorize: (socketId: any, callback: any) => {
 					axios
 						.post(
-							import.meta.env.VITE_PUSHER_AUTH,
+							(import.meta.env.VITE_PUSHER_AUTH ?? '').replace(/^["']|["']$/g, ''),
 							{
 								socket_id: socketId,
 								channel_name: channel.name,

package/services/keyService.ts

@@ -0,0 +1,45 @@
+import httpService from './httpService'
+
+export type KeyPool = {
+  id: number
+  name: string
+  slug: string
+  access_policy: string
+  available_count: number
+  already_requested: boolean
+  game: { id: number; name: string } | null
+  cover: string | null
+}
+
+export type KeyRequest = {
+  id: number
+  pool_id: number
+  pool_name: string
+  pool_slug: string
+  status_slug: string
+  status_name: string
+  platforms: string[]
+  revealed_at: string | null
+  created_at: string
+}
+
+export type RevealResult = {
+  code: string
+  platform: string | null
+  revealed_at: string
+}
+
+export const fetchAvailablePools = (params: Record<string, any> = {}) =>
+  httpService.get<{ data: KeyPool[] }>('/key-pools/available', { params })
+
+export const fetchMyRequests = () =>
+  httpService.get<{ data: KeyRequest[] }>('/key-requests/mine')
+
+export const requestKey = (poolId: number, body: Record<string, any>) =>
+  httpService.post(`/key-pools/${poolId}/request`, body)
+
+export const revealKey = (requestId: number, body: Record<string, any> = {}) =>
+  httpService.post<{ data: RevealResult }>(`/key-requests/${requestId}/reveal`, body)
+
+export const fetchPlatforms = () =>
+  httpService.get<{ data: { id: number; name: string }[] }>('/showcase-studio-dashboard/platforms')