MVP

README.md

@@ -1,2 +1,2 @@
 # NMS-Teleport-Editor
-Allows you to edit multiple destinations into your teleporter list
+Allows you to edit your teleporter list

src/App.vue

@@ -10,14 +10,16 @@ import { computed } from 'vue';
 import { endpointToAddress } from './common';
 
 const endpointData = useEndpointDataStore();
-const { json, filter } = storeToRefs(endpointData);
+const { json, filter, filterType } = storeToRefs(endpointData);
 
 const renderJson = computed(() => {
-  if (filter.value) {
+  if (filter.value || filterType.value) {
     return json.value.filter(
       (item) =>
-        item.Name.toLowerCase().includes(filter.value.toLowerCase()) ||
-        endpointToAddress(item).includes(filter.value.toUpperCase())
+        (!filter.value ||
+          item.Name.toLowerCase().includes(filter.value.toLowerCase()) ||
+          endpointToAddress(item).includes(filter.value.toUpperCase())) &&
+        (!filterType.value || item.TeleporterType === filterType.value)
     );
   } else {
     return json.value;
@@ -72,19 +74,15 @@ nav {
 
 .input-wrapper {
   display: flex;
-  flex-wrap: wrap;
   gap: 1rem;
-
-  & > * {
-    flex-grow: 1;
-  }
+  flex-direction: column;
 
   .action-wrapper {
     display: flex;
-    flex-grow: 0;
+    flex-grow: 1;
     gap: 1rem;
     flex-wrap: wrap;
-    width: min-content;
+    align-items: end;
   }
 }
 </style>

src/common.ts

@@ -37,11 +37,17 @@ export function createEndpoint(
 }
 
 export function endpointToAddress(endpoint: TeleportEndpoint) {
-  const  {VoxelX, VoxelY, VoxelZ, SolarSystemIndex, PlanetIndex } = endpoint.UniverseAddress.GalacticAddress;
+  const { VoxelX, VoxelY, VoxelZ, SolarSystemIndex, PlanetIndex } = endpoint.UniverseAddress.GalacticAddress;
   return xyzToAddress(VoxelX, VoxelY, VoxelZ, SolarSystemIndex, PlanetIndex);
 }
 
-export function xyzToAddress(voxelX: number, voxelY: number, voxelZ: number, system_idx: number, planet_idx: number): string {
+export function xyzToAddress(
+  voxelX: number,
+  voxelY: number,
+  voxelZ: number,
+  system_idx: number,
+  planet_idx: number
+): string {
   let x_glyphs, y_glyphs, z_glyphs;
   if (voxelX < 0) {
     x_glyphs = voxelX + 4096;
@@ -78,6 +84,7 @@ export function addressToXYZ(input: string) {
   const y_glyphs = numberCoords[1];
   const z_glyphs = numberCoords[2]; // NoSonar this is stupid indexing
   const system_idx = numberCoords[3]; // NoSonar this is stupid indexing
+  const planet_idx = numberCoords[4]; // NoSonar this is stupid indexing
 
   let VoxelX, VoxelY, VoxelZ;
   if (x_glyphs > 2047) {
@@ -101,6 +108,7 @@ export function addressToXYZ(input: string) {
     VoxelY,
     VoxelZ,
     SolarSystemIndex: system_idx,
+    PlanetIndex: planet_idx,
   };
 }
 
@@ -109,8 +117,9 @@ function convertGlyphs(glyphs: string): string[] {
   const y_glyphs = glyphs.substring(4, 6);
   const z_glyphs = glyphs.substring(6, 9);
   const system_idx = glyphs.substring(1, 4);
+  const planet_idx = glyphs.substring(0, 1);
 
-  return [x_glyphs, y_glyphs, z_glyphs, system_idx];
+  return [x_glyphs, y_glyphs, z_glyphs, system_idx, planet_idx];
 }
 
 function convertCoords(coords: string): string[] {

src/components/CopyButton.vue

@@ -34,10 +34,6 @@ function copyJson() {
 </template>
 
 <style scoped lang="scss">
-button {
-  flex-grow: 1;
-}
-
 .no-interaction {
   pointer-events: none;
 }

src/components/EditEndpointDialogue.vue

@@ -1,31 +1,25 @@
 <script setup lang="ts">
-import { addressToXYZ, createEndpoint } from '@/common';
+import { addressToXYZ, createEndpoint, endpointToAddress } from '@/common';
 import { useEndpointDataStore } from '@/stores/endpointData';
-import { teleporterTypesEnum, type TeleporterTypes } from '@/types/teleportEndpoint';
+import { teleporterTypesEnum, type TeleporterTypes, type TeleportEndpoint } from '@/types/teleportEndpoint';
 import { storeToRefs } from 'pinia';
-import { ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
 interface Props {
   open: boolean;
-  endpointName?: string;
-  endpointAddress?: string;
-  endpointGalaxy?: string;
-  endpointType?: TeleporterTypes;
+  endpointData?: TeleportEndpoint;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   open: false,
-  endpointName: '',
-  endpointAddress: '',
-  endpointGalaxy: '',
-  endpointType: 'Base',
+  endpointData: () => createEndpoint(),
 });
 
 const dialog = ref<HTMLDialogElement | null>(null);
-const newEndpointName = ref(props.endpointName);
-const newEndpointAddress = ref(props.endpointAddress);
-const newEndpointGalaxy = ref(props.endpointGalaxy);
-const newEndpointType = ref<TeleporterTypes>(props.endpointType);
+const newEndpointName = ref<string>(props.endpointData.Name);
+const newEndpointAddress = ref<string>(endpointToAddress(props.endpointData));
+const newEndpointGalaxy = ref<string>((props.endpointData.UniverseAddress.RealityIndex + 1).toString());
+const newEndpointType = ref<TeleporterTypes>(props.endpointData.TeleporterType);
 
 const endpointData = useEndpointDataStore();
 const { json } = storeToRefs(endpointData);
@@ -45,10 +39,10 @@ function closeModal() {
 }
 
 function cancelEndpointAdd() {
-  newEndpointName.value = '';
-  newEndpointAddress.value = '';
-  newEndpointGalaxy.value = '';
-  newEndpointType.value = 'Base';
+  newEndpointName.value = props.endpointData.Name;
+  newEndpointAddress.value = endpointToAddress(props.endpointData);
+  newEndpointGalaxy.value = (props.endpointData.UniverseAddress.RealityIndex + 1).toString();
+  newEndpointType.value = props.endpointData.TeleporterType;
 }
 
 function addEndpoint() {
@@ -57,18 +51,35 @@ function addEndpoint() {
   const coordinateData = addressToXYZ(newEndpointAddress.value);
   const galaxyNumber = parseInt(newEndpointGalaxy.value);
   if (!coordinateData || isNaN(galaxyNumber) || galaxyNumber < minGalaxy || galaxyNumber > maxGalaxy) return;
-  const { VoxelX, VoxelY, VoxelZ, SolarSystemIndex } = coordinateData;
+  const { VoxelX, VoxelY, VoxelZ, SolarSystemIndex, PlanetIndex } = coordinateData;
 
   const endpoint = createEndpoint(
     newEndpointName.value,
     newEndpointType.value,
     VoxelX,
     VoxelY,
     VoxelZ,
+    galaxyNumber - 1,
     SolarSystemIndex,
-    galaxyNumber
+    PlanetIndex
   );
-  json.value.unshift(endpoint);
+
+  if (props.endpointData.Name) {
+    const locationData = addressToXYZ(newEndpointAddress.value);
+    if (!locationData) return;
+    const { VoxelX, VoxelY, VoxelZ, SolarSystemIndex, PlanetIndex } = locationData;
+    const GalacticAddressData = props.endpointData.UniverseAddress.GalacticAddress;
+    props.endpointData.Name = newEndpointName.value;
+    GalacticAddressData.PlanetIndex = PlanetIndex;
+    GalacticAddressData.SolarSystemIndex = SolarSystemIndex;
+    GalacticAddressData.VoxelX = VoxelX;
+    GalacticAddressData.VoxelY = VoxelY;
+    GalacticAddressData.VoxelZ = VoxelZ;
+    props.endpointData.UniverseAddress.RealityIndex = parseInt(newEndpointGalaxy.value) - 1;
+    props.endpointData.TeleporterType = newEndpointType.value;
+  } else {
+    json.value.unshift(endpoint);
+  }
   cancelEndpointAdd();
 }
 
@@ -78,6 +89,8 @@ const ids = {
   addressInput: 'addressInput' + uniqueIdAddition,
   galaxyInput: 'galaxyInput' + uniqueIdAddition,
 };
+
+const editButtonText = computed(() => (props.endpointData.Name ? 'Save Changes' : 'Add Endpoint'));
 </script>
 
 <template>
@@ -90,7 +103,7 @@ const ids = {
     <div class="p-4 dialog-content">
       <form
         class="mb-4 endpoint-add-form"
-        @submit.prevent
+        @submit.prevent="addEndpoint"
       >
         <label :for="ids.nameInput">Name:</label>
         <input
@@ -109,6 +122,7 @@ const ids = {
           maxlength="19"
         />
         <label :for="ids.galaxyInput">Galaxy:</label>
+
         <input
           v-model="newEndpointGalaxy"
           class="input"
@@ -138,7 +152,7 @@ const ids = {
           class="button is-success"
           @click="addEndpoint"
         >
-          Add Endpoint
+          {{ editButtonText }}
         </button>
         <button
           class="button is-danger"

src/components/EndpointCard.vue

@@ -47,10 +47,7 @@ function removeEndpoint() {
     </div>
     <EditEndpointDialogue
       v-model:open="isModalOpen"
-      :endpoint-address="address"
-      :endpoint-galaxy="(endpointJson.UniverseAddress.RealityIndex + 1).toString()"
-      :endpoint-name="endpointJson.Name"
-      :endpoint-type="endpointJson.TeleporterType"
+      :endpoint-data="endpointJson"
     />
   </div>
 </template>

src/components/FilterInput.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { useEndpointDataStore } from '@/stores/endpointData';
+import { teleporterTypesEnum } from '@/types/teleportEndpoint';
 import { storeToRefs } from 'pinia';
 
 const endpointData = useEndpointDataStore();
-const { filter } = storeToRefs(endpointData);
+const { filter, filterType } = storeToRefs(endpointData);
+
+const teleporterFilterTypes = {
+  '': '',
+  ...teleporterTypesEnum,
+};
 </script>
 
 <template>
@@ -20,6 +26,20 @@ const { filter } = storeToRefs(endpointData);
       type="text"
     />
   </div>
+  <div>
+    <label class="has-text-weight-bold">Filter Types</label>
+    <select
+      v-model="filterType"
+      class="select"
+    >
+      <option
+        v-for="teleporterType in teleporterFilterTypes"
+        :value="teleporterType"
+      >
+        {{ teleporterType }}
+      </option>
+    </select>
+  </div>
 </template>
 
 <style scoped lang="scss">

src/stores/endpointData.ts

@@ -1,17 +1,19 @@
-import type { TeleportEndpoint } from '@/types/teleportEndpoint';
+import type { TeleportEndpoint, TeleporterTypes } from '@/types/teleportEndpoint';
 import { defineStore } from 'pinia';
 
 interface State {
   jsonInputString: string;
   json: TeleportEndpoint[];
   filter: string;
+  filterType: TeleporterTypes | '';
 }
 
 export const useEndpointDataStore = defineStore('endpointData', {
   state: (): State => ({
     jsonInputString: '',
     json: [],
     filter: '',
+    filterType: '',
   }),
 
   actions: {