Combat Log + Damage Breakdown UI

A drop-in HTML5 combat readability UI for RPGs, roguelikes, autobattlers, survivors-likes, action prototypes, and idle combat games.

It includes a readable combat event feed, damage-type breakdown bars, source/target totals, crit and block tags, healing/shield events, JSON import, CSV export, and a small public API for wiring game events into the UI.

What is included

• Combat log event feed
• Damage type filters
• Event kind filters
• Crit-only filter
• Compact log mode
• Damage, healing, shield, crit rate, and largest-hit summary
• Damage/support breakdown bars
• Combatant dealt/taken/support totals
• Selected event inspector
• Manual event creator
• Random demo hit and round simulation
• JSON import/export
• CSV export
• Markdown report export
• LocalStorage save
• Public JavaScript API on window.combatLogUI
• Docs, samples, itch copy, marketing images, and package scripts

Quick start

1. Open index.html.
2. Press Sim round to generate events.
3. Use the filters to inspect damage types and crits.
4. Add a manual event.
5. Export JSON or CSV.
6. Copy the report for balance notes.

Public API

combatLogUI.<span class="hljs-title function_">addEvent</span>({ <span class="hljs-attr">source</span>: <span class="hljs-string">"Player"</span>, <span class="hljs-attr">target</span>: <span class="hljs-string">"Boss"</span>, <span class="hljs-attr">kind</span>: <span class="hljs-string">"damage"</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">"Fire"</span>, <span class="hljs-attr">amount</span>: <span class="hljs-number">120</span>, <span class="hljs-attr">blocked</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">critical</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">note</span>: <span class="hljs-string">"Fireball crit"</span> }); combatLogUI.<span class="hljs-title function_">addEvents</span>(arrayOfEvents); combatLogUI.<span class="hljs-title function_">getEvents</span>(); combatLogUI.<span class="hljs-title function_">getBreakdown</span>(); combatLogUI.<span class="hljs-title function_">getReport</span>(); combatLogUI.<span class="hljs-title function_">exportCsv</span>(); combatLogUI.<span class="hljs-title function_">reset</span>();<br><br>

Notes

This is a front-end UI system. It does not enforce combat rules or replace your game combat engine. Feed it events from your combat logic and use the exports for debugging, balance reviews, or player-facing breakdown screens.