Technical Specification: Super Smash Bros Melee Hitstun and Knockback Calculator

Overview

A high-performance, single-file browser tool designed to help competitive players analyze frame data, hitstun duration, and launch trajectories. The app provides a clean, professional interface for calculating combat interactions without external dependencies or server-side storage.

Technical Architecture

• Architecture: Single HTML file containing embedded CSS and Vanilla JavaScript.
• Constraints: No localStorage, sessionStorage, cookies, or databases. The app operates entirely in memory.
• Libraries: Tailwind CSS (via CDN) for responsive design; Math.js (optional, via CDN) for high-precision arithmetic.
• Security: Fully compatible with sandboxed iframes. No alert() or confirm() prompts; all UI feedback is handled via custom modal overlays.

UI/UX Design

• Aesthetic: Clean, minimalist "Light Mode" design. Colors: Crisp white (#FFFFFF) backgrounds, light grey (#F3F4F6) card sections, and vibrant primary actions in professional deep blue (#2563EB) and accent green (#059669).
• Layout:
  • Header: Sticky top navigation containing the tool title and a reset button.
  • Main Input Panel: A structured form group divided into "Attack Parameters" (Damage, BKB, KBG) and "Defender Stats" (Weight, Fall Speed).
  • Result Dashboard: A dynamic card that updates instantly as inputs change. Displays: Hitstun (frames), Launch Speed, and a visual trajectory arc.
  • Responsive behavior: Desktop uses a 2-column layout (Input vs. Result); mobile stacks these into a vertical single-column scroll.

Core Feature Set

1. Dynamic Calculation Engine: Real-time formula execution. As the user types in any field, the results update immediately without requiring a "Calculate" button.
2. Character Preset Loader: A dropdown menu containing core competitive characters with hardcoded weight and fall speed attributes. Selecting a character auto-fills the defender input fields.
3. Visual Trajectory Output: A simplified, CSS-based visualization showing the resulting launch angle and speed.
4. Advanced DI Toggle: A checkbox for toggling "Optimal DI" to see how defensive influence impacts the result window.
5. No-Reload Reset: A prominent "Clear" action that resets all input fields to default states without refreshing the page.

Developer Instructions

1. State Management: All application state must exist as global variables or within a centralized state object. Re-render functions should trigger every time an input change or input event occurs.
2. Input Validation: Ensure numeric inputs handle decimal points correctly (e.g., character weight 1.05). Use parseFloat() and isNaN() checks to prevent crashes.
3. Animations: Use CSS transitions (300ms ease-in-out) for all UI changes, particularly when the result cards highlight new values. Avoid layout shifts that jar the user; use fixed-height containers where possible.
4. Performance: Since this is a utility, avoid heavy resource loading. Everything should be "instant," meaning logic must execute in <16ms (1 frame at 60fps) to maintain a feeling of responsiveness.