module damage bonus

src/tools/HaulerTank.vue

@@ -14,7 +14,7 @@ const haulableValue = computed(() => formatIsk(Math.ceil((fitEHP.value * 1000) /
 
 <template>
     <span class="font-bold text-lg">Haulable Value</span>
-    <div class="grid grid-cols-3 mb-2 mt-4">
+    <div class="grid grid-cols-3 mb-2 mt-2">
         <div class="flex">
             <span>Cost (million ISK): </span>
             <input type="number" class="flex-auto ms-1 me-2" step="1" v-model="fitCost" />

src/tools/ModuleDamage.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+const percentFormater = new Intl.NumberFormat("en-US", {
+    style: "percent",
+    minimumFractionDigits: 2
+});
+
+const damageBonus = ref(10);
+const rateOfFireBonus = ref(10.50);
+
+const totalBonus = computed(() => percentFormater.format((1 + (damageBonus.value / 100)) / (1 - (rateOfFireBonus.value / 100)) - 1));
+
+</script>
+
+<template>
+    <span class="font-bold text-lg">Module Damage Bunus</span>
+    <div class="grid grid-cols-3 mb-2 mt-2">
+        <div class="flex">
+            <span>Damage Bonus (%): </span>
+            <input type="number" class="flex-auto ms-1 me-2" step="0.01" v-model="damageBonus" />
+        </div>
+        <div class="flex ms-2">
+            <span>Rate of Fire Bonus (%): </span>
+            <input type="number" class="flex-auto ms-1 me-2" step="0.01" v-model="rateOfFireBonus" />
+        </div>
+        <div class="ms-2">
+            <span>Total Bonus: </span>
+            <span>{{ totalBonus }}</span>
+        </div>
+    </div>
+</template>

src/tools/Tools.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HaulerTank from './HaulerTank.vue';
+import ModuleDamage from './ModuleDamage.vue';
 
 
 
@@ -8,5 +9,7 @@ import HaulerTank from './HaulerTank.vue';
 <template>
     <div class="mt-4">
         <HaulerTank />
+        <hr class="mb-4">
+        <ModuleDamage />
     </div>
 </template>