Social Raid Battles

Overview

Social Raid Battles transform intimidating financial liabilities into collaborative "Boss Encounters." In this system, a Raid Boss represents a significant collective debt (such as a large student loan or a community-wide financial goal). Users act as Trainers, dealing "damage" to the boss by making real-world payments or logging specific financial milestones.

Raid Mechanics

HP and Damage

The system uses a direct mapping between currency and gameplay stats:

• Total HP: The starting balance of the debt (e.g., $50,000).
• Current HP: The remaining balance to be paid off.
• Damage Dealt: The dollar amount contributed by a participant toward the debt.

Raid Boss Configuration

The RaidBoss interface defines the attributes of the debt entity. You can initialize a raid with varying difficulty levels and deadlines to create urgency.

import { RaidBoss } from './types/raidTypes';

const debtBoss: RaidBoss = {
  id: 'raid_1',
  name: 'The Student Loan Serpent',
  description: 'A massive snake made of promissory notes. It grows if left unchecked!',
  totalHp: 50000,
  currentHp: 32450,
  image: '🐍',
  deadline: '7 Days',
  difficulty: 'Hard'
};

Participation

Users are tracked as RaidParticipant objects, allowing the application to display a leaderboard of contributions (damage dealt).

export interface RaidParticipant {
  id: string;
  username: string;
  damageDealt: number; // Cumulative amount paid off
  avatar: string;      // Visual representation
  lastActive: string;
}

Visual Combat System

To provide immediate gratification for financial discipline, the application uses a Damage Feedback loop. When a user logs an expense categorized as "Debt" or "Investments," the system triggers a visual "float up" animation.

Triggering Damage Feedback

The damageBus is used to emit events that the UI listens to for rendering damage numbers. This is typically triggered within the BudgetPlanner or during a direct transaction log.

// Example from BudgetPlanner.tsx
import { damageBus } from './Visuals/DamageFeedback';

const handleAddExpense = (amount: number) => {
  // Logic to add transaction...
  
  // Trigger the visual "Damage" animation on screen
  damageBus.emit(amount);
};

CSS Styling

The visual feedback is styled using the following variables defined in the core theme:

• --accent-hp: Neon Red (#ef4444) - used for damage numbers.
• .floating-damage: The class responsible for the "float up" and "fade out" animation sequence.

Implementation Integration

To add a Social Raid to your view, import the SocialRaids component. It consumes the RaidBoss state and lists the RaidParticipants.

import { SocialRaids } from './components/SocialRaids';

// Inside your main App or View component:
<SocialRaids 
  boss={currentRaidBoss} 
  participants={activeTrainers} 
/>

Difficulty Tiers

The difficulty field influences how the Professor Ledger persona interacts with the user during the raid:

• Normal: Encouraging tones; standard XP rewards.
• Hard: High-stakes dialogue; requires frequent updates to prevent "HP Regrowth" (interest simulation).
• Extreme: Reserved for massive community goals; includes special achievement badges upon "defeat."