current_context - xopherdeep/do-it-for-the-xp GitHub Wiki

Current Context

Last Updated: 2025-12-31
Focus Area: Interface Polish & Code Quality

Project State Overview

Do It For The XP is a gamified chore management application built with Vue 3, Ionic 7, and Capacitor. The application transforms household tasks into RPG-style quests where children become "Bounty Hunters" and parents become "Game Masters."

Recent Development Focus

Interface Polish (In Progress)

Refining the core UI elements for a premium RPG feel.

  • ✅ Main User HUD:
    • Combined HP/MP bar and text labels for cleaner layout.
    • Improved label visibility and alignment (text below bars).
    • Grouped stat values for better readability.
    • Added animated GP Bar stacked above XP Bar.
    • Applied locale formatting to all HUD numbers (1,000 instead of 1000).
    • Menu Toggle: Implemented menuController logic for the retro menu button to sync functionality with Quick Draw.
  • ✅ Battle Task Menu Style: Adjusted "Attack" menu items and "Bash" costs to match the main RPG menu font (Apple Kid 1.5rem) and color (RPG yellow). Replaced the bolt icon with claw-marks and removed the redundant header for a cleaner, unified flow. removed background circles from icons.
  • ✅ Area FAB / Page Menu:
    • Centered menu on screen (matching User HUD aesthetic).
    • Added backdrop blur overlay with click-to-close.
    • Implemented "square-x" close button in top-right.
    • Fixed Ionic FAB visibility issues by moving menu outside ion-fab-list.
    • Synchronized Blur State: Fixed "phase-flipping" and "double-click" issues by letting Ionic handle natural toggles and forcing re-mounts on navigation via unique :key bindings.
  • ✅ User HUD Avatar:
    • Optimized avatar image registration to perfectly cover the circular FAB button.
    • Removed square green border artifacts and optimized hover scaling (1.12x).
    • Improved AP badge display with "AP %" prefix.
  • ✅ Navigation Highlighting:
    • Implemented global styles to dim non-active tabs in ion-tab-bar.
    • Non-selected tabs are grayscale (90%) and lower opacity (0.55).
    • Active tabs feature saturation boost, brightness increase, and a subtle vertical lift (translateY).
    • Added hover transitions for interactive feedback.
  • ✅ Equipment Modal:
    • Converted into a full-page Ionic card modal with presentation="card".
    • Integrated with the shared premium modal system (matching Profile Modal).
    • Added user identity (name/level) to modal header for consistency.
    • Simplified layout styles while maintaining the 7/5 grid split.
  • ✅ Modal Dismissal System:
    • Ref-Based Dismissal: Standardized all major modals (UserProfileModal, XpEquipmentModal, ItemInfoModal, ATMModal, SaveAndQuitModal) to use a local dismiss() method via a component ref.
    • Sound Logic Refinement: Resolved the "double close sound" issue by using @click.stop on close buttons to prevent event bubbling to global UI listeners.
    • Clean Event Flow: Decoupled the parent's close state from the button click, moving to the modal's native didDismiss lifecycle event to ensure single-emission logic.
  • ✅ Temple Navigation: Implemented state-based smooth scrolling, formalized /splash default routing, and tiered background strategy (parent-hosted vs child-transparent).
  • ✅ Quest Type Refactor: Replaced standard radio groups in XpConfigAchievement with iconic, dialpad-grid selection modals. Implemented generic XpTypeSelectorModal for streamlined Quest and Party type definition.
  • ✅ Quest Navigation Optimization: Refactored XpConfigAchievement to use nested routing and ion-tabs, mirroring the Temple Settings architecture for consistent GM experience. Updated child tabs (Type, Heroes, Schedule, Rewards, Config) to individual components with shared state via Provide/Inject.
  • ✅ Temple Splash Page:
    • Created a clean landing page for temple routes with a centered layout.
    • Header: Icon, title, and description centered at top.
    • Stats: 4-column responsive grid showing Rooms, Beasts, Floors, and World.
    • WeatherFX: Integrated with correct world-to-weather mapping (matching XpTemples.vue).
    • Navigation: Centered "Temple" tab in navigation bar using the temple's specific icon.
  • ✅ Quest Type Selection:
    • Replaced ion-radio-group with two clean, iconic action boxes for Quest Type and Party Type.
    • Implemented XpTypeSelectorModal: a generic, two-step selector (Grid -> Confirmation) matching the temple creator aesthetic.
    • Updated useAchievementForm hook with reactive state for modal visibility and active party type details.
  • ✅ Code Refactoring: Split XpConfigAchievement.vue into separate template (.vue), logic (.ts), and style (.scss) files for better maintainability.
  • ✅ Setup Slideshow & Dashboard Polish:
    • Dynamic Themed Backgrounds: Integrated with the global bg-slide system, applying color variations (.bg-slide-xp, .bg-slide-gp, etc.) to the ion-page for stable, high-performance background transitions.
    • Premium Glassmorphism: Implemented a modern design language using backdrop-filter: blur, subtle semi-transparent borders, and deep shadows for "floating" content cards.
    • Stat Counting Animations: Integrated vue3-autocounter into the shared XpStatBox, providing a satisfying data revealed effect when dashboards load.
    • Dashboard Grid Refinement: Updated XpDashboardGrid to support a :cols prop for explicit column control. Configured the WelcomeDashboard to a 3-column layout (3x2 for the 6 boxes) as requested by the GM.
    • Entrance Animations: Added cubic-bezier staggered entrance animations for hero cards and dashboard components to enhance the "alive" feel of the onboarding flow.
    • Custom Navigation: Replaced standard swiper arrows and bullets with themed, RPG-style indicators matching the Earthbound aesthetic.
  • ✅ Code Quality & Linting: Performed a global cleanup of ESLint errors and warnings across the codebase, including removal of unused imports, console statements, and duplicated methods in major components like BattleGround.ts, BattleState.ts, and useAchievementForm.ts.
  • ✅ Bestiary Index Fix: Resolved critical syntax and structure errors in XpBestiary.vue caused by misplaced braces and broken method blocks. Refactored clickAttachBeast to use clean async/await logic. Fixed spelling errors in DbStorageApi toast helpers.
  • ✅ Quest Index Icons:
    • Implemented LORE_COMBO_MATRIX shared constant for mapping Quest Type + Party Type to thematic icons/names.
    • Updated XpAchievementItem to display dynamic "Combo Icons" or "Beast Previews" in the avatar slot.
    • Integrated beast loading into XpAchievements.vue to ensure real-time beast avatars show in the quest index.
    • Enhanced Grid View in admin quest index to match the iconic combo logic.
    • Updated useAchievementForm summary card to reflect the new lore-based naming and iconography.
  • ✅ Beast Selection UI:
    • Removed the heavy "TARGET ACQUIRED" overlay in QuestTypeTab.vue.
    • Simplified the selection indicator by using XpBeastSelectorItem's native checkmark and border logic.
  • ✅ Beast Task List:
    • Replaced the alertController (which failed to render HTML) with a dedicated BeastTaskListModal.vue.
    • Implemented a premium glassmorphic list with staggered entrance animations for beast tasks.
  • ✅ UI Polish: Synchronized Area FAB blur, optimized Avatar presentation, standardized Ref-based modal dismissal, implemented global tab-bar highlighting, added a premium splash page for temple discovery, fixed the retro User HUD menu toggle, and matched the "Attack" task menu styles to the main RPG dialog menu (removing headers and updating icons).
  • ✅ Compendium Tab Root Navigation: Resolved a bug where clicking an active tab's subtree (e.g., editing a quest) wouldn't return to the tab's root index. Implemented handleTabClick in XpCompendium.vue to intercept clicks and force-navigate to the base tab route when already within its subtree.
  • ✅ Room Editor Toggles Fix: Resolved double-triggering bug on "It's a Trap" and Mimic toggles where clicking the switch itself failed to toggle.
  • ✅ AI Generate Card Alignment: Corrected the sizing of the AI Generate box in QuestTypeTab.vue to match other beast cards. Implemented aspect-ratio: 1/1, increased dashed border thickness, and added structural alignment spacers to ensure a perfectly uniform grid layout.

Temple Creator (Refinement Complete)

The Temple Creator tool has been consolidated and polished for a more cohesive experience.

Location: src/app/Admin/XpCompendium/views/XpTemples/

Recent Accomplishments:

  • ✅ Consolidated Editor: Removed redundant TempleFloorEditor.vue and unified all editing logic into the Layout tab (XpTempleLayout.vue).
  • ✅ Centered Grid Layout: Optimized the grid editor to be centered with the page for better focus and premium aesthetic.
  • ✅ Integrated Header: Re-enabled XpTempleCreatorHeader.vue within the layout tab for seamless grid resizing.
  • ✅ Popover Sync: Updated the quick-edit popover with full feature parity, including item/loot selection.

Current State:

  • ✅ Room type selection modal complete
  • ✅ Cardinal door system (N/E/S/W) with locks
  • ✅ Adjacent room detection for wall limiting
  • ✅ Monster room beast selector integration
  • ✅ Room navigation within editor
  • ✅ Loot room configuration complete
  • ✅ Shop room configuration complete
  • ✅ Smooth navigation return paths with auto-scroll and highlight
  • ✅ Dynamic accordion tier isolation for beast management

Key Components:

  • XpTempleLayout.vue - Unified editor and layout preview
  • components/RoomCardinalLayout.vue - Room direction/door UI
  • components/XpTempleCreatorHeader.vue - Floor controls

Battle System (Stable)

The battle system has been recently enhanced:

  • ✅ Proper player stats HP/MP calculation (level + class based)
  • ✅ Battle HUD with animated stats display
  • ✅ Integrated action menu in dialog box
  • ✅ Intro dialog messages before battle starts
  • ✅ Pinia migration complete (Vuex fully removed)

Architecture Quick Reference

State Management

All stores are Pinia-based in src/lib/store/stores/:

  • user.ts - User profiles, authentication, GP
  • game.ts - Global game state, theme, entity caching
  • battle.ts - Battle state management
  • audio.ts - Sound control
  • temple-creator.ts - Temple builder state

Engine Structure

src/lib/engine/
├── battle/           # Combat logic
├── core/dungeons/    # Temple system
└── temples/          # Pre-built temples

Component Hierarchy

components/
├── atoms/       # Basic primitives
├── molecules/   # Composed units
└── organisms/   # Complex features

Immediate Next Steps

  1. Loot Room Configuration - Complete treasure chest reward selector
  2. Room Data Persistence - Ensure room edits save to temple
  3. Room Validation - Must have entrance, boss for temples
  4. Template Rooms - Pre-configured room types

Known Issues / Blockers

  • Battle dialog may show duplicate intro messages (recently fixed)
  • Wall icons occasionally show wrong icon type (recently fixed)
  • Floor editor grid size needs custom dimensions (recently fixed)
  • ✅ Navigation Crash: Fixed a TypeError: Cannot read properties of undefined (reading 'preventDefault') in WorldPlains.ts when navigating via FAB shortcuts.
  • Area FAB menu was invisible due to Ionic ion-fab-list opacity transitions (recently fixed)

Key Documentation

Doc Purpose
Roadmap Overall project direction
Architecture Technical overview
Temple-System Dungeon engine
Battle-System-Engine Combat mechanics
Player-Stats-Leveling HP/MP formulas

Quick Start for New Context

  1. Read: docs/Roadmap.md - Understand current phase
  2. Read: docs/current_context.md (this file) - Get oriented
  3. Check: Active files in XpTemples/ - Temple Creator focus
  4. Review: lib/store/stores/ - State architecture