To ensure consistency and maintainability across the "Do It For The XP" application, all screens should utilize standardized page wrappers. This document defines the core XpPage component and its specialized variations.

The base wrapper for all pages. It handles the ion-page structure, background application, header rendering, and loading states.

Props:

• title: string
• headerIcon: string (icon class)
• headerClass: string (default: rpg-box icon-colors)
• bgClass: string (default: ``)
• hideHeader: boolean
• loading: boolean
• backButtonHref: string

The standard page for "Game Master" and setup screens.

• Background: defaults to rpg-bg (or specifc sub-theme like bg-slide-dark).
• Header: uses xp-rpg-header style (boxed, icon-colors).
• Structure:

  <ion-page class="rpg-bg">
    <ion-header class="rpg-box icon-colors">...</ion-header>
    <ion-content>
       <XpLoading v-if="loading" />
       <slot v-else />
    </ion-content>
  </ion-page>

A lightweight wrapper for pages that exist inside an ion-tabs layout.

• Header: None (usually handled by the parent tabs page or specific tab needing transparency).
• Content: Pure ion-content or ion-router-outlet.
• Navigation: Relies on the parent ion-tabs bar for navigation.

The immersive hub for the player (Bounty Hunter). Located at components/templates/Page/XpPortalPage.vue.

Props:

• loading: boolean - Shows loading spinner
• pageClass: string - Additional page classes (e.g., my-portal)

Slots:

• #hud - Top overlay (stats, avatar)
• #fabs - Floating action buttons (quick draw, menu)
• #tabs - Tab bar with router outlet
• #modals - Modal components (stacked outside content)

Structure:

<ion-page class="xp-portal-page my-portal">
  <ion-content class="bg-transparent icon-colors">
    <slot name="hud" />   <!-- HUD overlay -->
    <slot name="fabs" />  <!-- FABs -->
    <slot name="tabs" />  <!-- Tabs + router outlet -->
  </ion-content>
  <slot name="modals" />  <!-- Modals -->
</ion-page>

A specialized viewfinder page for exploration.

• Header: Custom "Temple" status bar (Health, Time, Keys).
• View: Canvas/Grid-based renderer for the dungeon.
• Controls: D-Pad or touch controls overlay.
• Style: Dark, immersive, minimal UI chrome.

1. ✅ Standardize XpPage (Done).
2. 🔄 Refactor existing generic pages to use XpPage (In progress).
3. ✅ XpPortalPage shell created and integrated into MyPortal.
4. ⏳ XpDungeonCrawlerPage shell (Pending).