Widget:Calculator/Combat/Max Hit: Difference between revisions

From HighSpell Wiki
Jump to navigation Jump to search
← Older edit
No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 18: Line 18:
         <td>
         <td>
           <span class="max-hit-calc__stat-label">
           <span class="max-hit-calc__stat-label">
            <img src="/w/images/thumb/1/1b/Strength_icon.png/20px-Strength_icon.png" alt="Strength icon" width="20" height="20">
             Strength Level
             Strength Level
           </span>
           </span>
Line 29: Line 28:
         <td>
         <td>
           <span class="max-hit-calc__stat-label">
           <span class="max-hit-calc__stat-label">
            <img src="/w/images/thumb/1/1b/Strength_icon.png/20px-Strength_icon.png" alt="Strength icon" width="20" height="20">
             Strength Bonus
             Strength Bonus
           </span>
           </span>
Line 40: Line 38:
         <td>
         <td>
           <span class="max-hit-calc__stat-label">
           <span class="max-hit-calc__stat-label">
            <img src="/w/images/thumb/1/1b/Strength_icon.png/20px-Strength_icon.png" alt="Strength icon" width="20" height="20">
             Training Style
             Training Style
           </span>
           </span>
Line 56: Line 53:
   </table>
   </table>
   <div class="max-hit-calc__results">
   <div class="max-hit-calc__results">
     <b>Max Hit:</b> <span id="max-hit-result">—</span>
     <b>Est. Max Hit:</b> <span id="max-hit-result">—</span>
   </div>
   </div>
</div>
</div>
Line 71: Line 68:
     let strengthBonus = parseInt(strengthBonusInput.value, 10) || 0;
     let strengthBonus = parseInt(strengthBonusInput.value, 10) || 0;
     const trainingStyle = trainingStyleSelect.value;
     const trainingStyle = trainingStyleSelect.value;
   
 
     // Ensure inputs are within valid range
     // Clamp values
     strengthLevel = Math.max(1, Math.min(100, strengthLevel));
     strengthLevel = Math.max(1, Math.min(100, strengthLevel));
     strengthBonus = Math.max(0, strengthBonus);
     strengthBonus = Math.max(0, strengthBonus);
   
 
     // Apply training style bonus
     // Base effective strength
     let effectiveStrength;
     let effectiveStrength = strengthLevel + 8;
 
    // Extra +3 only if "Strength" training style is selected
     if (trainingStyle === 'strength') {
     if (trainingStyle === 'strength') {
       effectiveStrength = strengthLevel + 3;
       effectiveStrength += 3;
    } else if (trainingStyle === 'all') {
      effectiveStrength = strengthLevel + 1;
    } else {
      effectiveStrength = strengthLevel;
     }
     }


     const maxHit = Math.floor((effectiveStrength + (strengthBonus / 2)) / 7);
    // Apply formula
     const calculatedHit = 1 + ((effectiveStrength * (strengthBonus + 64)) / 640);
    const maxHit = Math.floor(calculatedHit);
 
     maxHitResultEl.textContent = maxHit;
     maxHitResultEl.textContent = maxHit;
   }
   }


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

Latest revision as of 14:15, 3 September 2025

<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> 
         
           Strength Level
         

         <input type="number" id="strength-level-input" value="1" min="1" max="100">

         
           Strength Bonus
         

         <input type="number" id="strength-bonus-input" value="0" min="0">

         
           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>

   Est. 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;

   // Clamp values
   strengthLevel = Math.max(1, Math.min(100, strengthLevel));
   strengthBonus = Math.max(0, strengthBonus);

   // Base effective strength
   let effectiveStrength = strengthLevel + 8;

   // Extra +3 only if "Strength" training style is selected
   if (trainingStyle === 'strength') {
     effectiveStrength += 3;
   }

   // Apply formula
   const calculatedHit = 1 + ((effectiveStrength * (strengthBonus + 64)) / 640);
   const maxHit = Math.floor(calculatedHit);

   maxHitResultEl.textContent = maxHit;
 }

 document.addEventListener('DOMContentLoaded', () => {
   strengthLevelInput.addEventListener('input', calculateMaxHit);
   strengthBonusInput.addEventListener('input', calculateMaxHit);
   trainingStyleSelect.addEventListener('change', calculateMaxHit);
   calculateMaxHit();
 });

})(); </script>

Retrieved from "https://highspell.wiki/w/index.php?title=Widget:Calculator/Combat/Max_Hit&oldid=13335"