Rarity & Statistics System Demo

Reusable components for displaying player statistics, choice rates, and content rarity across all guides

📊 Rarity Badge Component

Use <RarityBadge> to preview visual rarity states. Demo values are illustrative only.

Common (>50%):⚪72% common<RarityBadge rarity="common" :percentage="72" />
Uncommon (25-50%):🟢35% uncommon<RarityBadge rarity="uncommon" :percentage="35" />
Rare (10-25%):🔵18% rare<RarityBadge rarity="rare" :percentage="18" />
Epic (5-10%):🟣7% epic<RarityBadge rarity="epic" :percentage="7" />
Legendary (<5%):🟠0.8% legendary<RarityBadge rarity="legendary" :percentage="0.8" />
Custom Label:🟠Secret 7th Ending<RarityBadge rarity="legendary" custom-label="Secret 7th Ending" />
No Icon:8% epic<RarityBadge rarity="epic" :percentage="8" :show-icon="false" />

📈 Statistics Panel Component

Use <StatisticsPanel> to preview labeled interface values. Demo numbers are illustrative only.

Example 1: Player Choice Statistics

Episode 7 Choice #1: Invisigal's Fate

Choice-frequency visualization demo
✅ Defend Invisigal
67 %
⚪67% common
Most popular choice - unlocks full confession scene
67%
❌ Support Removal
33 %
🟢33% uncommon
Blocks Unity ending and Invisigal romance
33%
😊 Player Satisfaction
92 %
92%
Data updated: January 2025

Example 2: Romance Path Comparison

Romance Path Popularity

💛 Blonde Blazer
52 %
Most Popular
52%
💜 Invisigal
48 %
Close Second
48%

Example 3: Achievement Rarity

Rarest Achievements

Illustrative component preview
🏆 Path to Redemption
0.8 %
🟠0.8% legendary
Secret 7th ending - rarest achievement in game
0.8%
🎮 Meta-Gamer
2 %
🟠2% legendary
Break the fourth wall in Episode 4
2%
🕵️ Master Detective
4 %
🟠4% legendary
Deduce Mecha-Man identity early
4%

Example 4: Compact View

Choice Rate
78 %
78%
Satisfaction
94 %
94%

💡 Real-World Integration Examples

Use Case 1: Episode Choice Guide

Option A: Defend Invisigal

⚪67% common

Example choice presentation for component layout testing.

📊 Player Choice Rate
67 %
Most Popular
67%
😊 Satisfaction Rate
92 %
Players who chose this option and were satisfied with outcome
92%
😞 Regret Rate
8 %
8%

Use Case 2: Hidden Achievement

🏆

Path to Redemption

🟠0.8% legendary

Unlock the secret 7th ending by redeeming Shroud. Requires perfect Russian Roulette, giving both Pulses, and meeting the Janitor.

🔓 Unlock Rate
0.8 %
🟠0.8% legendary
Illustrative value for component layout testing only
0.8%

Use Case 3: Romance Ending Comparison

Blonde Blazer Romance Ending Quality

🌟 S-Tier Ending Rate
45 %
Perfect Ending
Strategic Astral Pulse use + 100 Trust = "Power Couple" ending
45%
⭐ A-Tier Ending Rate
38 %
Good ending with minor compromises
38%
💔 B/C-Tier Rate
17 %
Needs Improvement
Low trust or poor Episode 8 choices
17%
Illustrative component values — not player survey results

📝 Component API Documentation

RarityBadge Props

PropTypeRequiredDefaultDescription
rarityString✅ Yes-One of: common, uncommon, rare, epic, legendary
percentageNumber❌ NonullIllustrative percentage used only to preview the component state
showIconBoolean❌ NotrueShow colored circle icon
customLabelString❌ NonullOverride default label text

StatisticsPanel Props

PropTypeRequiredDefaultDescription
statsArray✅ Yes-Array of stat objects (see structure below)
titleString❌ NonullPanel title
subtitleString❌ NonullPanel subtitle
variantString❌ NodefaultOne of: default, compact, detailed, comparison
footerString❌ NonullFooter text

Stats Object Structure:

{
  label: 'Player Choice Rate',    // Required
  value: '67',                     // Required
  unit: '%',                       // Optional
  icon: '📊',                      // Optional
  description: 'Additional info',  // Optional
  percentage: 67,                  // Optional (shows progress bar)
  highlight: true,                 // Optional (highlights value)
  badge: {                         // Optional
    rarity: 'common',              // Use rarity badge
    percentage: 67
    // OR
    type: 'success',               // Use simple badge
    text: 'Popular'
  }
}

📋 Copy-Paste Templates

Template 1: Basic Choice Statistics

<StatisticsPanel
  title="Choice Statistics"
  :stats="[
    {
      label: 'Player Choice Rate',
      value: '72',
      unit: '%',
      icon: '📊',
      percentage: 72,
      badge: { rarity: 'common', percentage: 72 }
    },
    {
      label: 'Satisfaction Rate',
      value: '95',
      unit: '%',
      icon: '😊',
      percentage: 95
    }
  ]"
/>

Template 2: Romance Path Comparison

<StatisticsPanel
  title="Romance Popularity"
  :stats="[
    { label: 'Blazer Path', value: '52', unit: '%', percentage: 52 },
    { label: 'Invisigal Path', value: '48', unit: '%', percentage: 48 }
  ]"
  variant="comparison"
/>
Quick answer

Dispatch quick answer

Rarity & Statistics System Demo. Reusable components for displaying player statistics, choice rates, and content rarity across all guides

  1. Read the quick answerStart with the summary for Rarity & Statistics System Demo.
  2. Open the relevant sectionUse the page navigation or headings to find the episode, hero, choice, or mechanic you need.
  3. Continue with a related toolFollow the contextual links when you need a calculation or route-specific result.
What does Rarity & Statistics System Demo cover?

Rarity & Statistics System Demo. Reusable components for displaying player statistics, choice rates, and content rarity across all guides