Analyze creature battle type interactions with this free, browser-based effectiveness calculator. Determine weaknesses, resistances, and immunities instantly.
AI Generation Prompt
Creature Type Effectiveness Calculator
Overview
A high-performance, single-file browser utility designed to calculate damage multipliers for battle creatures. This tool allows users to input up to two types to instantly view a comprehensive chart of weaknesses, resistances, and immunities.
Technical Requirements & Constraints
- Architecture: Single HTML file containing all logic (Vanilla JS), structure (HTML5), and styling (CSS3).
- Frameworks: Pure Vanilla JS. Use Tailwind CSS via CDN for styling.
- Storage: ABSOLUTELY NO usage of
localStorage,sessionStorage,cookies, or any persistent storage. All state must be handled in memory. - Security: Must function within a sandboxed
<iframe>with a null origin. - Aesthetic: Clean, vibrant, modern light-mode SaaS UI. High contrast, sans-serif typography, subtle card-based layouts.
Core Features
- Dynamic Type Selection: Dual dropdown menus with searchable/filtered lists of elements.
- Instant Result Grid: A responsive grid showing all 18+ types and their specific multiplier (0x, 0.25x, 0.5x, 1x, 2x, 4x).
- Visual Feedback: Color-coded damage levels (e.g., Red for weakness, Green for resistance, Grey for neutral).
- Reset Functionality: Quick clear button to reset the selection.
- Mobile Responsiveness: Flexbox/Grid layout that wraps gracefully on small screens.
UI Layout Specification
- Header: Simple, clean centered title: "Creature Type Calculator".
- Input Section: A horizontal flex container featuring two labeled selects: "Type 1" and "Type 2". "Type 2" should allow a "None" option.
- Main Display Area: A CSS grid that displays cards for each of the 18 element types. Each card displays the type name, the icon, and the calculated multiplier.
- Footer/Credits: None. (Per requirements).
Design System (Light Mode)
- Palette:
- Background:
#f8fafc(Slate 50) - Cards/Containers:
#ffffff(White) - Text:
#1e293b(Slate 800) - Primary Accent:
#3b82f6(Blue 500) - Weakness Indicator:
#ef4444(Red 500) - Resistance Indicator:
#22c55e(Green 500) - Immunity Indicator:
#64748b(Slate 500)
- Background:
- Transitions: All state changes (selecting a type) must use
transition: all 0.2s ease-in-outfor smooth updates. - Shadows: Soft
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)for cards.
Development Directives
- Use
document.createElementfor dynamic results instead ofinnerHTMLfor security best practices. - Ensure all calculations occur instantly on the
changeevent of the dropdowns. - Use a standard lookup table (JS Object) for the type interaction matrix.
- Ensure no popups or external navigation occur; all functionality must remain within the page.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I use this creature type calculator?
Using the tool is straightforward. Simply select the primary type and optional secondary type from the dropdown menus at the top of the interface. The application will instantly update the dynamic grid to display the damage multipliers for every possible attacking element against your selected defender. The results are color-coded to indicate strengths, weaknesses, and immunities. You can clear your selection at any time using the reset button to start a new analysis without needing to refresh the page.
How does the dual-type calculation work?
When calculating effectiveness for a creature with two types, the tool automatically computes the combined multiplier for each attacking element. It multiplies the effectiveness of the first type by the effectiveness of the second type to provide the final, accurate damage output. For example, if an attack is 'super effective' against one type and 'not very effective' against the other, the resulting multiplier will be neutral (1x). If an attack is immune to either type, the entire result will be labeled as immune (0x), regardless of other interactions.
Is this tool mobile-friendly?
Yes, the interface is fully responsive and designed to function seamlessly on mobile devices, tablets, and desktop computers. The grid layout automatically adjusts based on your screen width, ensuring that damage multipliers remain readable and easy to navigate regardless of the device you are using. Because the tool is entirely client-side and browser-based, it loads extremely quickly on mobile networks. No additional software or screen real estate is wasted on unnecessary elements, providing a clean and focused experience.
Does the application save my data?
This application is built with a 'privacy-first' design philosophy and operates entirely in your browser's volatile memory. It does not use cookies, localStorage, or any external databases to track or save your inputs. When you close the browser tab, all session data is discarded. This ensures that your usage remains completely private and that the tool remains lightweight, fast, and compliant with strict sandboxed environments.
