Widget:Calculator/Combat/Max Hit

<style>

1. max-hit-calc-widget { max-width: 360px; font-size: 14px; }

.max-hit-calc__table { border-collapse: collapse; width: 100%; } .max-hit-calc__table td { padding: 6px 4px; } .max-hit-calc__stat-label { display: flex; align-items: center; gap: 8px; } .max-hit-calc__stat-label img { vertical-align: middle; } .max-hit-calc__results { margin-top: 15px; padding: 12px; background-color: var(--bg-secondary, #1e1e1e); color: var(--text-main, #ccc); border: 1px solid var(--border-color-base, #333); border-radius: 5px; } .max-hit-calc__results b { color: var(--text-bright, #fff); }

1. max-hit-calc-widget input[type="text"],
2. max-hit-calc-widget input[type="number"] { width: 100%; background-color: var(--bg-main, #1e1f22); color: var(--text-main, #b6b4b2); border: 1px solid var(--border-color-base, #2d2d2d); border-radius: 4px; padding: 6px 8px; box-sizing: border-box; }
3. max-hit-calc-widget select { width: 100%; background-color: var(--bg-main, #1e1f22); color: var(--text-main, #b6b4b2); border: 1px solid var(--border-color-base, #2d2d2d); border-radius: 4px; padding: 6px 8px; box-sizing: border-box; }

</style>

<tbody> </tbody>

<img src="/w/images/thumb/1/1b/Strength_icon.png/20px-Strength_icon.png" alt="Strength icon" width="20" height="20"> Strength Level	<input type="number" id="strength-level-input" value="1" min="1" max="100">
<img src="/w/images/thumb/c/c5/Strength_bonus_icon.png/20px-Strength_bonus_icon.png" alt="Strength bonus icon" width="20" height="20"> Strength Bonus	<input type="number" id="strength-bonus-input" value="0" min="0">
<img src="/w/images/thumb/4/4b/Training_icon.png/20px-Training_icon.png" alt="Training icon" width="20" height="20"> Training Style	<select id="training-style-select"> <option value="strength">Strength</option> <option value="accuracy">Accuracy</option> <option value="defense">Defense</option> <option value="all">All (controlled)</option> </select>

   Max Hit: —

<script> (function() {

 const strengthLevelInput = document.getElementById('strength-level-input');
 const strengthBonusInput = document.getElementById('strength-bonus-input');
 const trainingStyleSelect = document.getElementById('training-style-select');
 const maxHitResultEl = document.getElementById('max-hit-result');

 function calculateMaxHit() {
   let strengthLevel = parseInt(strengthLevelInput.value, 10) || 1;
   let strengthBonus = parseInt(strengthBonusInput.value, 10) || 0;
   const trainingStyle = trainingStyleSelect.value;
   
   // Ensure inputs are within valid range
   strengthLevel = Math.max(1, Math.min(100, strengthLevel));
   strengthBonus = Math.max(0, strengthBonus);
   
   // Apply training style bonus
   let effectiveStrength;
   if (trainingStyle === 'strength') {
     effectiveStrength = strengthLevel + 3;
   } else if (trainingStyle === 'all') {
     effectiveStrength = strengthLevel + 1;
   } else {
     effectiveStrength = strengthLevel;
   }

   const maxHit = Math.floor((effectiveStrength + (strengthBonus / 2)) / 7) + 1;
   maxHitResultEl.textContent = maxHit;
 }

 // Attach event listeners to all inputs and the select dropdown
 document.addEventListener('DOMContentLoaded', () => {
   strengthLevelInput.addEventListener('input', calculateMaxHit);
   strengthBonusInput.addEventListener('input', calculateMaxHit);
   trainingStyleSelect.addEventListener('change', calculateMaxHit);
   calculateMaxHit(); // Initial calculation on page load
 });

})(); </script>