Haulable Value

src/main.ts

@@ -7,6 +7,7 @@ const routes = [
     { path: '/', component: () => import('@/Index.vue') },
     { path: '/reprocess', component: () => import('@/reprocess/Reprocess.vue') },
     { path: '/market', component: () => import('@/market/Market.vue') },
+    { path: '/tools', component: () => import('@/tools/Tools.vue') },
 ];
 
 const router = createRouter({

src/sidebar/Sidebar.vue

@@ -16,6 +16,11 @@ import { RouterLink } from 'vue-router';
                         <span>Market</span>
                     </RouterLink>
                 </li>
+                <li>
+                    <RouterLink to="/tools" class="flex items-center p-2 rounded-md">
+                        <span>Tools</span>
+                    </RouterLink>
+                </li>
             </ul>
         </div>
     </aside>

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>