<goma-mission-details>

The full detail view for one mission: a banner + progress header, Levels / Games / Rules / Events tabs, and the join-state variants (in-progress, not-joined, left-challenge). Sister widget to <goma-missions-hub>.

Part 1 — UI only

Host-fed: set the mission property directly, or drop this widget next to a <goma-missions-hub> and let it follow goma:mission-select.

Element tag

<goma-mission-details></goma-mission-details>

Installation

pnpm add @gomagaming/mission-details vue pinia vue-router vue-i18n @vueuse/core

Configuration

Key	Type	Default	Description
locale	string	'en'	i18n locale (en / fr / pt).
theme	object	Pulse theme	--goma-* token overrides.
messages	object	—	Per-locale i18n overrides.

Data source

Host-fed. Two ways to set the active mission:

1. Direct — set the mission property to a Mission object (see the shape in the hub docs).
2. Follow a hub — leave followMissionSelect on (default) and supply a missions pool; when a sibling <goma-missions-hub> fires goma:mission-select, this widget resolves the id against the pool and renders it. Mirrors game-details' follow-event-navigate automation.

Props / attributes

Property	Attribute	Type	Default	Description
mission	mission	Mission | null	null	The mission to render.
missions	missions	Mission[]	[]	Pool the follow-select watcher resolves ids against.
followMissionSelect	follow-mission-select	boolean	true	Follow a sibling hub's goma:mission-select.
missionSelectSelector	mission-select-selector	string	''	Optional CSS selector to only follow a specific hub.
activeDetailTab	active-detail-tab	'levels'|'games'|'rules'|'events'	'levels'	Initial tab.
leftStateImage	left-state-image	string	''	Host-injectable illustration for the "left this mission" body.

Events

All events are composed + bubbling.

Event	detail	When
goma:mission-cta	{ missionId, action }	Footer CTA pressed (pause / deposit / discover, derived from join state).
goma:mission-optout	{ missionId }	"Quit this mission" link (Rules tab) pressed.
goma:mission-game-select	{ missionId, gameId }	A game tile (Games tab) tapped.
goma:mission-back	{ missionId }	Header back chevron pressed.
ready	{}	Mounted and rendered.
error	{ message, code }	Render error caught by the boundary.

Embedding

Vanilla — paired with the hub

<goma-missions-hub id="hub"></goma-missions-hub>
<goma-mission-details id="detail"></goma-mission-details>
<script type="module">
  import '@gomagaming/missions-hub'
  import '@gomagaming/mission-details'

  const missions = [/* Mission[] */]
  hub.missions = missions
  detail.missions = missions   // lets the follow-select watcher resolve ids
</script>

React

import '@gomagaming/mission-details'

<goma-mission-details
  ref={(el) => { if (el) el.mission = activeMission }}
  onGoma:mission-cta={(e) => handleCta(e.detail)}
/>

Vue

<script setup>
import '@gomagaming/mission-details'
import { ref } from 'vue'
const mission = ref(/* Mission */)
</script>

<template>
  <goma-mission-details :mission.prop="mission" @goma:mission-back="goBack" />
</template>

Source layout

Layer	File
Element class	packages/mission-details/src/MissionDetailsElement.js
App wrapper + follow-select watcher	packages/mission-details/src/MissionDetailsApp.vue
Detail tab strip	packages/mission-details/src/components/MissionDetails/MissionDetailTabs.vue
Shared header / panels / helpers	packages/sports-domain/src/components/Missions/{ChallengerHeader,ChallengerLevelRow,MissionGameCard,MissionDetailPanels/*}.vue
Playground manifest	packages/mission-details/src/playground.manifest.js
Tests	packages/mission-details/tests/{MissionDetails,playground-manifest}.test.js