7 save ships functionality

.vercelignore

@@ -0,0 +1,2 @@
+*.md
+.gitignore

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Shane B.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,8 @@
 # Wormroller (To be renamed maybe?)
 
-This is a simple app built with Vue on Vite to help plan rolling off wormholes in Eve Online.
+The repo for http://wormroller.dotlag.info.
+
+This is just a calculator built on Vue to help simplify the process of rolling wormholes in Eve Online.
 
 ## Documentation
 

package.json

@@ -14,6 +14,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@vueuse/core": "^10.3.0",
     "pinia": "^2.1.4",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "vue": "^3.3.4",
     "vuedraggable": "^4.1.0"
   },

src/App.vue

@@ -1,33 +1,34 @@
 <script setup>
-import { ref, watch, computed } from "vue";
+import { ref, watch } from "vue";
 import draggable from "vuedraggable";
 
 import { useSolverStore } from "./stores/solver";
+import { useShipStore } from "./stores/ship";
 
 import Toggle from "./components/Toggle.vue";
 import RadioGroup from "./components/RadioGroup.vue";
+import RollerControls from "./components/RollerControls.vue";
 import Ship from "./components/Ship.vue";
 
-const store = useSolverStore();
-const { wormholes, stages, solver, getJumpStyles } = store;
+const solverStore = useSolverStore();
+const { wormholes, stages, solver, getJumpStyles } = solverStore;
+const shipStore = useShipStore();
 
 const displayTons = ref(true);
 const rollFast = ref(true);
 const useText = ref(true);
 
+const showRollerControls = ref(true);
+
 const displayMass = (value) => {
   return (value / (displayTons.value ? 1000 : 1)).toLocaleString();
 };
 
-const randomInt = (min, max) => {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-};
-
 const swapShips = (ev) => {
-  if (ev.newIdx >= 0 && ev.newIdx < store.ships.length) {
-    let a = store.ships[Math.min(ev.oldIdx, ev.newIdx)];
-    let b = store.ships[Math.max(ev.oldIdx, ev.newIdx)];
-    store.ships.splice(Math.min(ev.oldIdx, ev.newIdx), 2, b, a);
+  if (ev.newIdx >= 0 && ev.newIdx < solverStore.ships.length) {
+    let a = solverStore.ships[Math.min(ev.oldIdx, ev.newIdx)];
+    let b = solverStore.ships[Math.max(ev.oldIdx, ev.newIdx)];
+    solverStore.ships.splice(Math.min(ev.oldIdx, ev.newIdx), 2, b, a);
   }
 };
 
@@ -38,7 +39,11 @@ const copyShip = (ship) => {
 };
 
 watch(
-  [store.ships, () => store.selectedStage.name, () => store.selectedWH.type],
+  [
+    solverStore.ships,
+    () => solverStore.selectedStage.name,
+    () => solverStore.selectedWH.type,
+  ],
   () => {
     solver(rollFast);
   }
@@ -48,7 +53,7 @@ watch(
 <template>
   <main class="container">
     <div class="wh-info">
-      <select v-model="store.selectedWH" @change="solver(rollFast)">
+      <select v-model="solverStore.selectedWH" @change="solver(rollFast)">
         <option disabled>Static</option>
         <option
           v-for="wh in wormholes.filter((elem) =>
@@ -83,56 +88,43 @@ watch(
       <div class="col-span-all row-span-1">
         <span class="mass-label">Total Mass:</span>{{ " " }}
         <span>
-          {{ displayMass(store.selectedWH.totalMass * 0.9) }} —
-          {{ displayMass(store.selectedWH.totalMass * 1.1) }}
+          {{ displayMass(solverStore.selectedWH.totalMass * 0.9) }} —
+          {{ displayMass(solverStore.selectedWH.totalMass * 1.1) }}
           {{ displayTons ? "tons" : "kg" }}
         </span>
       </div>
       <div class="col-span-all row-span-1">
         <span class="mass-label">Jump Mass:</span>{{ " " }}
         <span>
-          {{ displayMass(store.selectedWH.jumpMass) }}
+          {{ displayMass(solverStore.selectedWH.jumpMass) }}
           {{ displayTons ? "tons" : "kg" }}
         </span>
       </div>
       <div class="col-span-all row-span-1">
         <span class="mass-label">Remaining:</span>{{ " " }}
         <span>
-          {{ displayMass(store.planMassKg.min) }} —
-          {{ displayMass(store.planMassKg.max) }}
+          {{ displayMass(solverStore.planMassKg.min) }} —
+          {{ displayMass(solverStore.planMassKg.max) }}
           {{ displayTons ? "tons" : "kg" }}
         </span>
       </div>
-      <div class="col-span-full flex justify-around mt-4">
-        <button
-          class="w-max"
-          @click="
-            store.ships.push({
-              id: Math.floor(Math.random() * 1000000),
-              name: 'roller',
-              cold: 174_000_000,
-              hot: 274_000_000,
-              isThreader: false,
-              color: {
-                h: randomInt(0, 360),
-                s: randomInt(42, 98),
-                l: randomInt(40, 90),
-              },
-            });
-            solver(rollFast);
-          "
-        >
-          Add Ship
-        </button>
-        <button
-          class="clear w-max"
-          @click="
-            store.plan.length = 0;
-            store.ships.length = 0;
-          "
+      <div
+        class="col-span-full flex flex-wrap justify-around mt-4 content-center gap-3"
+      >
+        <select
+          class="text-sm mb-0"
+          v-model="shipStore.selectedShip"
+          @change="solver(rollFast)"
         >
-          Clear Ships
-        </button>
+          <option
+            v-for="ship in shipStore.savedShips"
+            :key="ship.name"
+            :value="ship"
+          >
+            {{ ship.name }}
+          </option>
+        </select>
+        <RollerControls :use-tons="displayTons" v-model="showRollerControls" />
       </div>
     </div>
     <div>
@@ -141,17 +133,22 @@ watch(
         <Toggle label-left="icons" label-right="text" v-model="useText" />
         <div class="col-span-full h-24 w-full pr-8">
           <RadioGroup
-            v-model:model-value="store.selectedStage"
+            v-model:model-value="solverStore.selectedStage"
             :options="stages"
           />
         </div>
       </div>
     </div>
     <hr class="col-span-full my-4" />
     <h3>Plan</h3>
-    <div :class="`wh-bar h-12 ${store.selectedStage.name.replace(/\s/, '_')}`">
+    <div
+      :class="`wh-bar h-12 ${solverStore.selectedStage.name.replace(
+        /\s/,
+        '_'
+      )}`"
+    >
       <div
-        v-for="jump in store.plan"
+        v-for="jump in solverStore.plan"
         class="ship-bar"
         :style="getJumpStyles(jump)"
       >
@@ -164,11 +161,11 @@ watch(
         </template>
       </div>
     </div>
-    <hr v-if="store.ships.length" class="col-span-full my-4" />
+    <hr v-if="solverStore.ships.length" class="col-span-full my-4" />
     <div class="ships-list">
-      <h3 v-if="store.ships.length">Ships</h3>
+      <h3 v-if="solverStore.ships.length">Ships</h3>
       <draggable
-        v-model="store.ships"
+        v-model="solverStore.ships"
         item-key="id"
         @end="solver(rollFast)"
         :on-remove="(ev) => console.log(ev)"
@@ -180,10 +177,10 @@ watch(
             :idx="idx"
             :ship="ship"
             :use-tons="displayTons"
-            @change:ship="store.ships.splice(idx, 1, $event)"
+            @change:ship="solverStore.ships.splice(idx, 1, $event)"
             @change:ship-idx="swapShips($event)"
-            @delete:ship="store.ships.splice(idx, 1)"
-            @copy:ship="store.ships.push(copyShip(ship))"
+            @delete:ship="solverStore.ships.splice(idx, 1)"
+            @copy:ship="solverStore.ships.push(copyShip(ship))"
           />
         </template>
       </draggable>

src/components/RollerControls.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { ref, computed } from "vue";
+
+import { useSolverStore } from "../stores/solver";
+import { useShipStore } from "../stores/ship";
+
+import Toggle from "./Toggle.vue";
+
+const { modelValue, useTons } = defineProps(["modelValue", "useTons"]);
+defineEmits(["update:modelValue"]);
+
+const shipStore = useShipStore();
+const solverStore = useSolverStore();
+
+const tempShip = ref(JSON.parse(JSON.stringify(shipStore.selectedShip)));
+const idx = computed(() => {
+  return shipStore.savedShips.findIndex((item) => {
+    return item.name === shipStore.selectedShip.name;
+  });
+});
+</script>
+
+<template>
+  <template v-if="modelValue">
+    <span>
+      <button class="w-max" @click="$emit('update:modelValue', false)">
+        Edit Ship
+      </button>
+      <button
+        class="w-max"
+        @click="
+          shipStore.addShip(solverStore.ships);
+          solverStore.solver(rollFast);
+        "
+      >
+        Add Ship
+      </button>
+      <button
+        class="clear w-max"
+        @click="
+          solverStore.plan.length = 0;
+          solverStore.ships.length = 0;
+        "
+      >
+        Clear Ships
+      </button>
+    </span>
+  </template>
+  <template v-else>
+    <button
+      class="save w-max"
+      @click="
+        shipStore.savedShips.splice(idx, 1, tempShip);
+        $emit('update:modelValue', true);
+      "
+    >
+      Save Ship
+    </button>
+    <button class="clear w-max" @click="$emit('update:modelValue', true)">
+      Cancel
+    </button>
+    <div class="w-full flex flex-col mt-4 gap-2 items-center">
+      <label>
+        <input
+          type="text"
+          :value="shipStore.selectedShip.name"
+          @change="
+            tempShip = shipStore.updateShipProperty(
+              'name',
+              $event.target.value,
+              shipStore.selectedShip,
+              useTons
+            )
+          "
+          placeholder="Ship Name"
+        />
+      </label>
+      <label>
+        <input
+          type="number"
+          :value="
+            useTons
+              ? Math.floor(shipStore.selectedShip.cold / 1000)
+              : shipStore.selectedShip.cold
+          "
+          @change="
+            tempShip = shipStore.updateShipProperty(
+              'cold',
+              $event.target.valueAsNumber * (useTons ? 1000 : 1),
+              shipStore.selectedShip,
+              useTons
+            )
+          "
+          placeholder="Cold Mass"
+          :min="0"
+        />
+        {{ useTons ? "tons" : "kg" }}
+      </label>
+      <label>
+        <input
+          type="number"
+          :value="
+            useTons
+              ? Math.floor(shipStore.selectedShip.hot / 1000)
+              : shipStore.selectedShip.hot
+          "
+          @change="
+            tempShip = shipStore.updateShipProperty(
+              'hot',
+              $event.target.valueAsNumber * (useTons ? 1000 : 1),
+              shipStore.selectedShip,
+              useTons
+            )
+          "
+          placeholder="Hot Mass"
+          :min="0"
+        />
+        {{ useTons ? "tons" : "kg" }}
+      </label>
+      <Toggle
+        label-left="roller"
+        label-right="threader"
+        v-model="tempShip.isThreader"
+      />
+    </div>
+  </template>
+</template>