Chrome/Firefox MV3 extension that shows move type effectiveness during PokeRogue battles. Features: - Auto-detects battle state via Phaser game bridge (MAIN world) - Shows effectiveness multiplier, base power, and physical/special category - Supports single and double battles - Manual type calculator mode as fallback - Draggable overlay with dark theme matching PokeRogue aesthetic - Settings popup with position, opacity, and display options - Complete Gen 6+ type chart (18 types) from PokeRogue source data - Type colors matching PokeRogue's own color scheme
87 lines
2.8 KiB
HTML
87 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PokeRogue Type Effectiveness</title>
|
|
<link rel="stylesheet" href="popup.css">
|
|
</head>
|
|
<body>
|
|
<div class="popup">
|
|
<div class="popup-header">
|
|
<img src="../icons/icon-32.png" alt="icon" class="popup-icon">
|
|
<div>
|
|
<h1 class="popup-title">Type Effectiveness</h1>
|
|
<p class="popup-subtitle" id="statusText">Connecting...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="popup-section">
|
|
<label class="popup-toggle">
|
|
<input type="checkbox" id="enableToggle" checked>
|
|
<span class="toggle-slider"></span>
|
|
<span class="toggle-label">Enable Overlay</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="popup-section">
|
|
<label class="popup-toggle">
|
|
<input type="checkbox" id="manualMode">
|
|
<span class="toggle-slider"></span>
|
|
<span class="toggle-label">Manual Mode</span>
|
|
</label>
|
|
<p class="popup-hint">Use type calculator instead of auto-detection</p>
|
|
</div>
|
|
|
|
<div class="popup-divider"></div>
|
|
|
|
<div class="popup-section">
|
|
<label class="popup-label">Position</label>
|
|
<div class="popup-position-grid">
|
|
<button class="pos-btn" data-pos="top-left" title="Top Left">↖</button>
|
|
<button class="pos-btn" data-pos="top-right" title="Top Right">↗</button>
|
|
<button class="pos-btn" data-pos="bottom-left" title="Bottom Left">↙</button>
|
|
<button class="pos-btn" data-pos="bottom-right" title="Bottom Right">↘</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="popup-section">
|
|
<label class="popup-label">
|
|
Opacity
|
|
<span id="opacityValue">90%</span>
|
|
</label>
|
|
<input type="range" id="opacitySlider" min="30" max="100" value="90" class="popup-slider">
|
|
</div>
|
|
|
|
<div class="popup-divider"></div>
|
|
|
|
<div class="popup-section">
|
|
<label class="popup-label">Display Options</label>
|
|
<label class="popup-checkbox">
|
|
<input type="checkbox" id="showMoveNames" checked>
|
|
<span>Show move names</span>
|
|
</label>
|
|
<label class="popup-checkbox">
|
|
<input type="checkbox" id="showPower" checked>
|
|
<span>Show base power</span>
|
|
</label>
|
|
<label class="popup-checkbox">
|
|
<input type="checkbox" id="showCategory" checked>
|
|
<span>Show physical/special</span>
|
|
</label>
|
|
<label class="popup-checkbox">
|
|
<input type="checkbox" id="compactMode">
|
|
<span>Compact mode</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="popup-footer">
|
|
<button id="refreshBtn" class="popup-btn">Refresh</button>
|
|
<span class="popup-version">v1.0.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|