A free, web-based life counter and damage tracker for trading card games. Easily manage life totals, commander damage, and counters for 2-4 players.
AI Generation Prompt
Technical Specification: Trading Card Game Life & Damage Tracker
1. Overview
A professional-grade, single-file browser application designed to track life totals, commander damage, and resource counters for 2-4 players in a trading card game setting. The app emphasizes a clean, light-mode interface and high-performance, real-time interactions.
2. Technical Constraints (Strict Compliance)
- Single File: All HTML, CSS, and Vanilla JavaScript must be contained within a single
.htmlfile. - No Storage: No use of
localStorage,sessionStorage, cookies, or IndexedDB. State is kept strictly in memory. - Sandbox-Ready: No alerts, prompts, or synchronous dialogs. Use custom-built CSS/JS modals.
- Dependencies: Use CDN links for Tailwind CSS (via Tailwind Play/CDN) and Google Fonts (Inter/Roboto) only.
3. UI Layout
- Header: Minimalistic header showing the tool name and a "Reset Game" button that triggers a custom confirmation modal.
- Main Display: A dynamic flex-grid that distributes player panels evenly.
- 2 Players: 2 vertical columns.
- 3-4 Players: A responsive 2x2 grid.
- Player Panel Design:
- Centered life total (large typography).
- Floating '+' and '-' buttons.
- A "Details" icon button to toggle additional tracking (Commander Damage, Poison/Energy counters).
- Distinctive, soft pastel accent colors for each player to aid identification.
4. Feature List
- Core Tracking: Quick-tap increment/decrement for life totals.
- Commander Damage Tracker: A dedicated sub-menu per player to track damage taken from specific opponents (Commander A, B, and C).
- Secondary Counters: Inline fields for Poison, Energy, or Experience counters.
- Custom Naming: In-place editable player name fields.
- Visual Feedback: Micro-interactions using CSS transitions. Buttons show "press" effects (scale down) on click.
- Responsive Design: Layout flips from grid to list view on small screens to ensure touch targets remain accessible.
5. Visual Aesthetic & Palette
- Color Palette (Light Mode):
- Background:
#F8FAFC(Slate 50) - Card Surface:
#FFFFFF(White) with a subtle drop shadow (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)) - Primary Text:
#1E293B(Slate 800) - Accent Colors: Soft pastel variants for player identifiers (e.g.,
#E0F2FEfor player 1,#FEE2E2for player 2).
- Background:
- Typography: Sans-serif (Inter) for maximum readability.
6. Implementation Notes for Developer
- Animations: Use CSS
transition: all 0.2s ease-in-outfor all button and card interactions. - Modals: Create a centered overlay div
position: fixedwithz-index: 100for all confirmation or settings prompts to avoid thealert()block constraint. - Performance: Since there is no storage, encapsulate the game state in a single JavaScript object
{ players: [...] }and use a reactive function to re-render the DOM based on this object to avoid DOM manipulation spaghetti code.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I track commander damage in this tool?
Each player dashboard includes a dedicated 'Damage' button. Clicking this reveals a sub-menu where you can increment or decrement damage received from specific opponents. The interface updates the totals in real-time, ensuring precise tracking throughout the match. This system allows for granular control, making it easy to manage complex multiplayer games where damage tracking across multiple opponents is essential for maintaining accurate game states.
Does this app save my game data if I refresh the page?
This application operates entirely in-memory for security and performance reasons. Due to the sandboxed nature of the environment, it does not persist data to local storage or cookies. Refreshing the browser page will reset all game states to their default values. We recommend completing your match within a single browser session to avoid any loss of game progress.
Is this tool mobile-responsive?
Yes, the tool is designed with a mobile-first approach. It automatically adapts to various screen sizes, whether you are using a smartphone, tablet, or desktop computer. The layout shifts dynamically: on mobile devices, players are stacked vertically for easy interaction, while on larger screens, the interface expands to a grid layout to maximize visibility for all players.
Can I use this for formats other than Commander?
Absolutely. While the tool includes specific features for tracking commander damage, it functions perfectly as a general-purpose life counter for any trading card game format. Simply ignore the commander damage menus if you are playing formats like Standard, Modern, or Limited. The core life increment/decrement buttons work seamlessly for any style of gameplay.
