@mundogamernetwork/shared-ui 1.12.1 → 1.13.0

package/components/ui/MgXpLevelBar.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { fetchGamificationSummary, type GamificationSummary } from "../../services/gamificationService";
+
+const props = withDefaults(
+	defineProps<{
+		/**
+		 * Where to send the user to see and claim their tasks. Only Community
+		 * hosts those pages, so leaving this unset points at Community — which
+		 * is the right destination from every other front. Community itself
+		 * passes its own internal route to avoid a full page load.
+		 */
+		missionsUrl?: string;
+		/** Locale segment for the default Community destination. */
+		locale?: string;
+		/** Renders without the title line, for tight spaces. */
+		compact?: boolean;
+		/**
+		 * MGC balance from the host's auth store, which is the ecosystem's
+		 * single source of truth for it. Left unset, the component falls back
+		 * to the balance the dashboard call already returns.
+		 */
+		mgcBalance?: number | null;
+		/** Hide the balance where the host already shows it elsewhere. */
+		showBalance?: boolean;
+	}>(),
+	{ missionsUrl: "", locale: "", compact: false, mgcBalance: null, showBalance: true },
+);
+
+const emit = defineEmits<{ (e: "navigate"): void }>();
+
+/** Missions and the reward store live on Community for the whole ecosystem. */
+const COMMUNITY_URL = "https://mundogamer.community";
+
+const summary = ref<GamificationSummary | null>(null);
+const loaded = ref(false);
+
+const level = computed(() => summary.value?.level ?? null);
+const claimable = computed(() => summary.value?.missions?.claimable_count ?? 0);
+
+/** Store discount this level grants; only some hosts surface it. */
+const discount = computed(() => level.value?.reward_discount_pct ?? 0);
+
+const destination = computed(() => {
+	if (props.missionsUrl) return props.missionsUrl;
+
+	const locale =
+		props.locale ||
+		(typeof document !== "undefined" ? document.documentElement.lang : "") ||
+		"en";
+
+	return `${COMMUNITY_URL}/${locale}/gamification/missions`;
+});
+
+const balance = computed(() => {
+	const fromHost = props.mgcBalance;
+	const value = fromHost !== null && fromHost !== undefined ? fromHost : summary.value?.wallet?.balance;
+	return typeof value === "number" ? Math.floor(value).toLocaleString() : null;
+});
+
+// progress_percent comes from the API; the local computation is a fallback for
+// older api-main snapshots, which satellite APIs vendor and can lag by weeks.
+const percent = computed(() => {
+	const l = level.value;
+	if (!l) return 0;
+	if (typeof l.progress_percent === "number") return Math.min(100, Math.max(0, l.progress_percent));
+	if (!l.next_level_xp) return 100;
+	return Math.min(100, Math.round((l.current_level_xp / l.next_level_xp) * 100));
+});
+
+onMounted(async () => {
+	try {
+		const response = await fetchGamificationSummary();
+		summary.value = response?.data?.data ?? response?.data ?? null;
+	} catch {
+		// Never let a gamification hiccup break the header it sits in.
+		summary.value = null;
+	} finally {
+		loaded.value = true;
+	}
+});
+</script>
+
+<template>
+	<a
+		v-if="loaded && level"
+		:href="destination"
+		class="mg-xp-bar"
+		:class="{ 'mg-xp-bar--compact': props.compact }"
+		@click="emit('navigate')"
+	>
+		<div class="mg-xp-bar__top">
+			<span class="mg-xp-bar__badge">{{ level.current_level }}</span>
+
+			<div class="mg-xp-bar__meta">
+				<span v-if="!props.compact && level.title" class="mg-xp-bar__title">{{ level.title }}</span>
+				<span class="mg-xp-bar__xp">{{ level.current_level_xp }} / {{ level.next_level_xp }} XP</span>
+			</div>
+
+			<span v-if="discount > 0" class="mg-xp-bar__discount">-{{ discount }}%</span>
+
+			<span v-if="props.showBalance && balance" class="mg-xp-bar__balance">{{ balance }} MGC</span>
+
+			<span v-if="claimable > 0" class="mg-xp-bar__claimable">{{ claimable }}</span>
+		</div>
+
+		<div class="mg-xp-bar__track">
+			<div class="mg-xp-bar__fill" :style="{ width: percent + '%' }" />
+		</div>
+	</a>
+</template>
+
+<style lang="scss" scoped>
+.mg-xp-bar {
+	display: block;
+	padding: 0.5rem 0.75rem;
+	// Own token layer, resolved per host.
+	//
+	// Each front names its theme differently and, more importantly, brands
+	// --bt-active differently (blue on Community, orange on Academy, yellow on
+	// Agency). Reading the token rather than a fixed colour is what makes the
+	// bar adopt each project's identity. Shop uses a separate vocabulary
+	// (--surface/--text/--muted/--green), so each token falls through to its
+	// equivalent there, and finally to currentColor — a monochrome bar that
+	// inherits the host is never wrong, a hardcoded cyan on a green UI is.
+	--mg-xp-accent: var(--bt-active, var(--green, currentColor));
+	--mg-xp-surface: var(--card-article-bg, var(--surface, transparent));
+	--mg-xp-text: var(--card-cover-title, var(--text, currentColor));
+	--mg-xp-muted: var(--inactive, var(--muted, currentColor));
+
+	background: var(--mg-xp-surface);
+	text-decoration: none;
+	color: inherit;
+
+	&__top {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.4rem;
+	}
+
+	&__badge {
+		flex: 0 0 22px;
+		height: 22px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 11px;
+		font-weight: 700;
+		color: var(--mg-xp-accent);
+		border: 1px solid var(--mg-xp-accent);
+	}
+
+	&__meta {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	&__title {
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--mg-xp-text);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__xp {
+		font-size: 10px;
+		color: var(--mg-xp-muted);
+		opacity: 0.8;
+	}
+
+	&__discount {
+		flex: 0 0 auto;
+		font-size: 10px;
+		font-weight: 700;
+		padding: 1px 4px;
+		color: var(--mg-xp-accent);
+		border: 1px solid var(--mg-xp-accent);
+	}
+
+	&__balance {
+		flex: 0 0 auto;
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--mg-xp-text);
+		white-space: nowrap;
+	}
+
+	&__claimable {
+		flex: 0 0 auto;
+		min-width: 18px;
+		height: 18px;
+		padding: 0 5px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 10px;
+		font-weight: 700;
+		// Tinted rather than filled: a solid accent needs a contrasting ink
+		// colour, and there is no way to derive one for a host whose accent
+		// falls back to currentColor — that combination rendered white on
+		// light grey. Accent text over a wash of the same accent contrasts in
+		// every theme without needing to know the theme.
+		color: var(--mg-xp-accent);
+		background: rgba(128, 128, 128, 0.2);
+		background: color-mix(in srgb, var(--mg-xp-accent) 18%, transparent);
+		border: 1px solid var(--mg-xp-accent);
+	}
+
+	&__track {
+		height: 4px;
+		// Not --search-bar-bg: in the dark theme it resolves to the same value
+		// as --card-article-bg behind it, so the unfilled part of the bar
+		// vanished and a 0% bar rendered as nothing at all — worst for the new
+		// user the bar exists to orient. A translucent tint of the fill colour
+		// reads as "the rest of this bar" and holds up in both themes.
+		background: rgba(128, 128, 128, 0.35);
+		background: color-mix(in srgb, var(--mg-xp-accent) 22%, transparent);
+	}
+
+	&__fill {
+		height: 100%;
+		background: var(--mg-xp-accent);
+		transition: width 0.3s ease;
+	}
+
+	&--compact {
+		padding: 0.35rem 0.5rem;
+	}
+}
+
+a.mg-xp-bar:hover .mg-xp-bar__fill {
+	filter: brightness(1.15);
+}
+</style>

package/locales/de.json

@@ -290,7 +290,7 @@
       "type_print": "Screenshot / Print",
       "deadline_days_left": "Noch {days} Tage, um dein Material einzureichen",
       "deadline_today": "Letzter Tag, um dein Material einzureichen",
-      "deadline_overdue": "Die Einreichungsfrist ist abgelaufen",
+      "deadline_overdue": "Die empfohlene Frist ist abgelaufen, du kannst dein Material aber trotzdem einreichen",
       "required_fields": "Fill in all required fields",
       "url_error": "Invalid URL",
       "submit_error": "Error submitting. Try again.",

package/locales/en.json

@@ -290,7 +290,7 @@
       "type_print": "Screenshot / Print",
       "deadline_days_left": "{days} days left to submit your material",
       "deadline_today": "Last day to submit your material",
-      "deadline_overdue": "The submission deadline has passed",
+      "deadline_overdue": "The suggested deadline has passed, but you can still submit your material",
       "required_fields": "Fill in all required fields",
       "url_error": "Invalid URL",
       "submit_error": "Error submitting. Try again.",

package/locales/es.json

@@ -290,7 +290,7 @@
       "type_print": "Impreso",
       "deadline_days_left": "Quedan {days} días para enviar tu material",
       "deadline_today": "Último día para enviar tu material",
-      "deadline_overdue": "El plazo de envío ya venció",
+      "deadline_overdue": "El plazo sugerido ya venció, pero aún puedes enviar tu material",
       "required_fields": "¡Por favor, completa todos los campos obligatorios!",
       "url_error": "Introduce URLs válidas (deben comenzar con http:// o https://)",
       "submit_error": "Hubo un error al procesar tu material.",

package/locales/pt-BR.json

@@ -290,7 +290,7 @@
       "type_print": "Screenshot / Print",
       "deadline_days_left": "Faltam {days} dias para enviar seu material",
       "deadline_today": "Último dia para enviar seu material",
-      "deadline_overdue": "O prazo de envio já passou",
+      "deadline_overdue": "O prazo sugerido já passou, mas você ainda pode enviar seu material",
       "required_fields": "Fill in all required fields",
       "url_error": "Invalid URL",
       "submit_error": "Error submitting. Try again.",

package/locales/ro.json

@@ -290,7 +290,7 @@
       "type_print": "Screenshot / Print",
       "deadline_days_left": "Mai ai {days} zile pentru a trimite materialul",
       "deadline_today": "Ultima zi pentru a trimite materialul",
-      "deadline_overdue": "Termenul de trimitere a expirat",
+      "deadline_overdue": "Termenul sugerat a expirat, dar poți trimite materialul în continuare",
       "required_fields": "Fill in all required fields",
       "url_error": "Invalid URL",
       "submit_error": "Error submitting. Try again.",

package/package.json

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

package/pages/key-campaigns/index.vue

@@ -1511,7 +1511,14 @@ onUnmounted(() => {
 								display: flex;
 								align-items: center;
 								justify-content: center;
-								img { width: 100%; height: auto; display: flex; }
+								// height:auto here let the image fall short of the fixed
+								// 174px box whenever its own aspect ratio was taller than
+								// the box's realized width:height ratio, leaving the dark
+								// --body-bg-card background showing as a band under the
+								// cover. Same fix already used by .request-card below:
+								// fill the box and crop via object-fit instead of guessing
+								// a height that only sometimes matches.
+								img { width: 100%; height: 100%; object-fit: cover; 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.

package/pages/key-campaigns/key-materials.vue

@@ -345,7 +345,7 @@ const submitForm = async () => {
 		})
 
 		const hasEmptyFields = forms.value.some(
-			(form) => form.content_types.length === 0 || !form.material_url || !form.description || !form.submitted_at,
+			(form) => form.content_types.length === 0 || !form.material_url || !form.submitted_at,
 		)
 
 		if (hasEmptyFields) {
@@ -500,12 +500,6 @@ onMounted(async () => {
 			color: var(--card-cover-title);
 			font-size: 13px;
 			i { color: #d297ff; }
-
-			&.overdue {
-				background: rgba(248, 60, 60, 0.1);
-				border-left-color: rgb(248, 60, 60);
-				i { color: rgb(248, 60, 60); }
-			}
 		}
 
 		.disabled {

package/services/gamificationService.ts

@@ -0,0 +1,26 @@
+import httpService from "./httpService";
+
+/**
+ * Gamification lives in api-main's shared GamificationProvider, which every
+ * satellite API registers — so this hits whichever API the consuming front is
+ * already authenticated against, with no extra auth setup.
+ */
+export interface XpLevel {
+	current_level: number;
+	total_xp: number;
+	current_level_xp: number;
+	next_level_xp: number;
+	progress_percent: number;
+	title: string | null;
+}
+
+export interface GamificationSummary {
+	level: XpLevel;
+	wallet: { balance: number; lifetime_earned: number };
+	missions: { active: any[]; claimable_count: number };
+	achievements: { total_unlocked: number; recent: any[] };
+}
+
+export const fetchGamificationSummary = async (): Promise<any> => {
+	return await httpService.get(`/public/user/gamification/dashboard`);
+};