Haulable Value

src/tools/HaulerTank.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { formatIsk } from '@/formaters';
+import { computed, ref } from 'vue';
+
+const tornadosDPS = 24000;
+const tornadosCost = 100000000;
+
+const fitCost = ref(0);
+const fitEHP = ref(0);
+
+const haulableValue = computed(() => formatIsk(Math.ceil(fitEHP.value / tornadosDPS) * tornadosCost - fitCost.value));
+
+</script>
+
+<template>
+    <span class="font-bold text-lg">Haulable Value</span>
+    <div class="grid grid-cols-3 mb-2 mt-4">
+        <div class="flex">
+            <span>Cost: </span>
+            <input type="number" class="flex-auto ms-1 me-2" step="1" v-model="fitCost" />
+        </div>
+        <div class="flex ms-2">
+            <span>EHP: </span>
+            <input type="number" class="flex-auto ms-1 me-2" step="1" v-model="fitEHP" />
+        </div>
+        <div class="ms-2">
+            <span>Haulable Value: </span>
+            <span>{{ haulableValue }}</span>
+        </div>
+    </div>
+</template>

src/tools/Tools.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import HaulerTank from './HaulerTank.vue';
+
+
+
+</script>
+
+<template>
+    <div class="mt-4">
+        <HaulerTank />
+    </div>
+</template>