Battleroom Dev Tools - xopherdeep/do-it-for-the-xp GitHub Wiki

Battleroom Dev Tools

The Battleroom Dev Tools component provides a development environment for testing and configuring battle mechanics in the Do It For The XP application. This tool allows developers and game masters to visualize and interact with the battle system without needing to complete actual tasks.

Overview

The Battleroom Dev Tool is a specialized Vue component that creates a sandbox environment for testing battle mechanics, animations, enemy interactions, and user interfaces related to the battle system. It provides a visual interface for configuring and triggering various battle scenarios.

Battleroom Dev Tools Interface

Key Features

1. Battle Visualization

  • Real-time preview of battle scenarios
  • Configurable enemy types (Basic, Mini Boss, Boss)
  • Dynamic battle state management

2. Task Enemy Configuration

  • Simulate different task types (Daily, Weekly, Project)
  • Adjust task difficulty (1-5 scale)
  • Visual representation of task health and status
  • Simulate task progress and completion

3. Profile Management

  • Select from existing user profiles
  • Create new test profiles
  • Test battle system with different character attributes

4. Beast/Enemy Selection

  • Browse and select from bestiary
  • Visualize different enemies in battle context
  • Test specific enemy behaviors and animations

5. Battle Control Actions

  • Trigger battle animations (Attack, Hit, Victory, Defeat)
  • Control battle state (active/inactive)
  • Reset battle scenarios
  • Display battle dialogs and victory screens

6. Developer Interface

  • Action sheet menus for common operations
  • Modals for detailed configuration
  • Live battle state JSON display for debugging

Using the Dev Tools

Accessing the Tools

The Battleroom Dev Tools are accessible in development environments via the developer menu or directly at the route /dev/battleroom.

Configuration Workflow

  1. Initial Setup:

    • Select a user profile (or create a test profile)
    • Choose an enemy/beast to battle against
    • Configure background settings if needed
  2. Battle Configuration:

    • Set task type and difficulty
    • Configure enemy type
    • Adjust health values and other parameters
  3. Testing Actions:

    • Trigger battle animations using the battle actions menu
    • Simulate task progress to test victory conditions
    • Test dialog sequences and interaction flows

Available Controls

Configuration Controls

  • Select Profile: Choose which user profile to use in battle testing
  • Select Beast: Pick an enemy from the bestiary to battle against
  • Battle Controls: Configure core battle parameters and state

Battle Action Controls

  • Attack Animation: Trigger player attack sequence
  • Enemy Hit Animation: Visualize enemy taking damage
  • Player Hit Animation: Visualize player taking damage
  • Victory Animation: Test end-of-battle victory sequence
  • Defeat Animation: Test end-of-battle defeat sequence
  • Reset Battle: Return battle to initial state

Implementation Details

The Battleroom Dev Tools component is implemented as a Vue component using the Ionic framework. It integrates with the core battle system components to provide a testing environment.

Key Component Dependencies

  • BattleField: Core battle visualization component
  • XpTypingText: Text animation component for battle dialogs
  • Ionic Components: UI framework elements (modals, action sheets, etc.)

State Management

The tool maintains its own internal state for development purposes, but it can also interact with the global Vuex store to trigger battle-related actions and mutations.

Data Sources

  • User profiles from ProfileDb
  • Beast/enemy data from BestiaryDb
  • Task types and difficulty settings (local state)

Best Practices

When using the Battleroom Dev Tools, keep these tips in mind:

  1. Test Across Profiles: Different profiles may have different stats, abilities, or visual representations
  2. Test Multiple Enemy Types: Ensure animations and mechanics work for all enemy categories
  3. Test Edge Cases: Try extreme values for health, difficulty, etc.
  4. Validate Dialog Sequences: Ensure all text is appropriate and properly formatted
  5. Check Mobile Responsiveness: Test the battle UI at different screen sizes

Troubleshooting

Common issues when using the Battleroom Dev Tools:

  1. Beasts Not Loading:

    • Check that the beast data is properly populated in the database
    • Verify storage mechanisms are working correctly
    • Try using the "Load Sample Beast" option if available
  2. Animation Issues:

    • Ensure the proper methods exist on the battleground component
    • Check for console errors related to animation classes
    • Try resetting the battle state completely
  3. Profile Selection Problems:

    • Verify the profile database is accessible
    • Check user data structure for required fields
    • Create a new test profile if existing ones aren't working

Future Enhancements

Planned improvements for the Battleroom Dev Tools:

  1. Enhanced animation testing capabilities
  2. More detailed battle metrics and analysis
  3. Ability to save and load battle configurations
  4. Integration with achievement and reward testing
  5. Mobile-friendly controls for on-device testing

Last Updated: May 3, 2025

⚠️ **GitHub.com Fallback** ⚠️