From d0a64c8533659307b9dbbfcae36af37eb722ef85 Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Tue, 16 Jul 2024 13:52:34 +0200
Subject: [PATCH 1/9] add link hover colour

---
 src/style/style.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/style/style.css b/src/style/style.css
index 5dd03d3..5b78bfc 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -5,6 +5,16 @@
     url('/NMS-Glyphs-Mono.ttf') format('truetype');
 }
 
+:root {
+  --link-hover: #363636;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --link-hover: #c9c9c9;
+  }
+}
+
 html {
   scrollbar-gutter: stable;
 }
@@ -25,3 +35,7 @@ html {
 .select select {
   width: 100%;
 }
+
+a:hover {
+  color: var(--link-hover);
+}

From 1611e9434f62e9068d61c2454d5c156b6d6119c3 Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Sat, 20 Jul 2024 18:51:46 +0200
Subject: [PATCH 2/9] restrict new endpoints to only space stations

---
 src/App.vue                             |  2 +-
 src/components/EditEndpointDialogue.vue | 12 +++++---
 src/components/FilterInput.vue          |  9 ++----
 src/types/teleportEndpoint.ts           | 41 +++++++++++++++----------
 src/variables/limits.ts                 |  1 +
 5 files changed, 37 insertions(+), 28 deletions(-)
 create mode 100644 src/variables/limits.ts

diff --git a/src/App.vue b/src/App.vue
index e7e1332..9f17532 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,7 +53,7 @@ const renderJson = computed(() => {
         v-for="endpoint in json"
         v-show="renderJson.includes(endpoint)"
         :endpoint-json="endpoint"
-        :key="endpoint.Name"
+        :key="`${endpoint.Name}${endpoint.UniverseAddress}`"
       />
     </div>
   </main>
diff --git a/src/components/EditEndpointDialogue.vue b/src/components/EditEndpointDialogue.vue
index 2d2967c..da64178 100644
--- a/src/components/EditEndpointDialogue.vue
+++ b/src/components/EditEndpointDialogue.vue
@@ -3,12 +3,11 @@ import { addressToXYZ, createEndpoint, endpointToGlyphs } from '@/common';
 import { useId } from '@/helpers/id';
 import { useEndpointDataStore } from '@/store/endpointData';
 import type { DialogProps } from '@/types/props';
-import { teleporterTypesEnum, type TeleporterTypes } from '@/types/teleportEndpoint';
+import { teleporterTypes, type TeleporterTypes } from '@/types/teleportEndpoint';
 import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 
 const props = withDefaults(defineProps<DialogProps>(), {
-  open: false,
   endpointData: () => createEndpoint(),
 });
 
@@ -20,6 +19,11 @@ const newEndpointAddress = ref<string>(endpointToGlyphs(props.endpointData));
 const newEndpointGalaxy = ref<string>((props.endpointData.UniverseAddress.RealityIndex + 1).toString());
 const newEndpointType = ref<TeleporterTypes>(props.endpointData.TeleporterType);
 
+const stationEndpoints = teleporterTypes.filter((item) => item.startsWith('Spacestation'));
+
+const isNewEndpoint = computed(() => !props.endpointData.Name);
+const editButtonText = computed(() => (isNewEndpoint.value ? 'Add Endpoint' : 'Save Changes'));
+
 function resetEndpointInputs() {
   newEndpointName.value = props.endpointData.Name;
   newEndpointAddress.value = endpointToGlyphs(props.endpointData);
@@ -74,8 +78,6 @@ const ids = {
   galaxyInput: 'galaxyInput' + uniqueId,
 };
 
-const editButtonText = computed(() => (props.endpointData.Name ? 'Save Changes' : 'Add Endpoint'));
-
 const isOutOfSafeRange = computed(() => {
   const systemIndex = newEndpointAddress.value.substring(1, 4);
   const systemNumber = parseInt(systemIndex, 16);
@@ -127,7 +129,7 @@ const isOutOfSafeRange = computed(() => {
       <div class="select">
         <select v-model="newEndpointType">
           <option
-            v-for="endpointType in teleporterTypesEnum"
+            v-for="endpointType in isNewEndpoint ? stationEndpoints : teleporterTypes"
             :value="endpointType"
           >
             {{ endpointType }}
diff --git a/src/components/FilterInput.vue b/src/components/FilterInput.vue
index 9f37c43..1125006 100644
--- a/src/components/FilterInput.vue
+++ b/src/components/FilterInput.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import { useEndpointDataStore } from '@/store/endpointData';
-import { teleporterTypesEnum } from '@/types/teleportEndpoint';
+import { teleporterTypes } from '@/types/teleportEndpoint';
 import { storeToRefs } from 'pinia';
 import FilterInputWrapper from './FilterInputWrapper.vue';
 
 const endpointData = useEndpointDataStore();
 const { filter, filterType } = storeToRefs(endpointData);
 
-// what the actual fuck is this, please explain what the hell this empty string property is
-const teleporterFilterTypes = {
-  '': '',
-  ...teleporterTypesEnum,
-};
+// These are the possible filters. You can either filter by all teleporter types, or by nothing.
+const teleporterFilterTypes = ['', ...teleporterTypes];
 </script>
 
 <template>
diff --git a/src/types/teleportEndpoint.ts b/src/types/teleportEndpoint.ts
index f337639..59bceac 100644
--- a/src/types/teleportEndpoint.ts
+++ b/src/types/teleportEndpoint.ts
@@ -1,20 +1,29 @@
-export const teleporterTypesEnum = {
-  Base: 'Base',
-  Spacestation: 'Spacestation',
-  Atlas: 'Atlas',
-  PlanetAwayFromShip: 'PlanetAwayFromShip',
-  ExternalBase: 'ExternalBase',
-  EmergencyGalaxyFix: 'EmergencyGalaxyFix',
-  OnNexus: 'OnNexus',
-  SpacestationFixPosition: 'SpacestationFixPosition',
-  Settlement: 'Settlement',
-  Freighter: 'Freighter',
-  Frigate: 'Frigate',
-} as const;
+export type TeleporterTypes =
+  | 'Base'
+  | 'Spacestation'
+  | 'Atlas'
+  | 'PlanetAwayFromShip'
+  | 'ExternalBase'
+  | 'EmergencyGalaxyFix'
+  | 'OnNexus'
+  | 'SpacestationFixPosition'
+  | 'Settlement'
+  | 'Freighter'
+  | 'Frigate';
 
-type ObjectValues<T> = T[keyof T];
-
-export type TeleporterTypes = ObjectValues<typeof teleporterTypesEnum>;
+export const teleporterTypes: TeleporterTypes[] = [
+  'Atlas',
+  'Base',
+  'EmergencyGalaxyFix',
+  'ExternalBase',
+  'Freighter',
+  'Frigate',
+  'OnNexus',
+  'PlanetAwayFromShip',
+  'Settlement',
+  'Spacestation',
+  'SpacestationFixPosition',
+];
 
 export interface TeleportEndpoint {
   UniverseAddress: {
diff --git a/src/variables/limits.ts b/src/variables/limits.ts
new file mode 100644
index 0000000..c501916
--- /dev/null
+++ b/src/variables/limits.ts
@@ -0,0 +1 @@
+export const maxStations = 70;

From 643fae8a529f6bfc6ecf37f38cb3c6ae9553ff84 Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Sat, 20 Jul 2024 19:57:18 +0200
Subject: [PATCH 3/9] add new items to the end of the array (beginning of list)

---
 src/App.vue                             |  4 +++-
 src/components/CopyButton.vue           |  5 +++--
 src/components/EditEndpointDialogue.vue |  6 ++++--
 src/components/EndpointCard.vue         |  3 ++-
 src/store/endpointData.ts               | 15 +++++++++++++++
 5 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9f17532..1ffa29b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@ import FilterInput from './components/FilterInput.vue';
 import CopyButton from './components/CopyButton.vue';
 import { useEndpointDataStore } from './store/endpointData';
 import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
+import { computed, watchEffect } from 'vue';
 import { endpointToGlyphs } from './common';
 
 const endpointData = useEndpointDataStore();
@@ -25,6 +25,8 @@ const renderJson = computed(() => {
     return json.value;
   }
 });
+
+watchEffect(() => console.log(json.value.map(item => item.Name)))
 </script>
 
 <template>
diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
index 52c0c8f..185a135 100644
--- a/src/components/CopyButton.vue
+++ b/src/components/CopyButton.vue
@@ -4,7 +4,7 @@ import { storeToRefs } from 'pinia';
 import { ref } from 'vue';
 
 const endpointData = useEndpointDataStore();
-const { json } = storeToRefs(endpointData);
+const { json, addedEndpoints } = storeToRefs(endpointData);
 
 const defaultText = 'Copy modified JSON';
 const buttonText = ref(defaultText);
@@ -13,7 +13,8 @@ const copied = ref(false);
 function copyJson() {
   const indent = 2;
   const displayTime = 1500;
-  navigator.clipboard.writeText(JSON.stringify(json.value, null, indent));
+  const combinedEndpoints = [...json.value, ...addedEndpoints.value];
+  navigator.clipboard.writeText(JSON.stringify(combinedEndpoints, null, indent));
   buttonText.value = 'Copied!';
   copied.value = true;
   setTimeout(() => {
diff --git a/src/components/EditEndpointDialogue.vue b/src/components/EditEndpointDialogue.vue
index da64178..1a6e3cb 100644
--- a/src/components/EditEndpointDialogue.vue
+++ b/src/components/EditEndpointDialogue.vue
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<DialogProps>(), {
 });
 
 const endpointData = useEndpointDataStore();
-const { json } = storeToRefs(endpointData);
+const { addedEndpoints } = storeToRefs(endpointData);
 
 const newEndpointName = ref<string>(props.endpointData.Name);
 const newEndpointAddress = ref<string>(endpointToGlyphs(props.endpointData));
@@ -64,7 +64,9 @@ function addEndpoint() {
     props.endpointData.UniverseAddress.RealityIndex = parseInt(newEndpointGalaxy.value) - 1;
     props.endpointData.TeleporterType = newEndpointType.value;
   } else {
-    json.value.unshift(endpoint);
+    // start of the array: oldest (bottom of list in game)
+    // end of the array: newest (top of list in game)
+    addedEndpoints.value.unshift(endpoint);
   }
 
   // reset to initial state
diff --git a/src/components/EndpointCard.vue b/src/components/EndpointCard.vue
index 3dcdde9..2812e2e 100644
--- a/src/components/EndpointCard.vue
+++ b/src/components/EndpointCard.vue
@@ -11,12 +11,13 @@ const props = defineProps<{
 }>();
 
 const endpointData = useEndpointDataStore();
-const { json } = storeToRefs(endpointData);
+const { json, addedEndpoints } = storeToRefs(endpointData);
 
 const address = computed(() => endpointToGlyphs(props.endpointJson));
 
 function removeEndpoint() {
   json.value = json.value.filter((t) => t !== props.endpointJson);
+  addedEndpoints.value = addedEndpoints.value.filter((t) => t !== props.endpointJson);
 }
 </script>
 
diff --git a/src/store/endpointData.ts b/src/store/endpointData.ts
index 894b686..18c8be1 100644
--- a/src/store/endpointData.ts
+++ b/src/store/endpointData.ts
@@ -4,6 +4,7 @@ import { defineStore } from 'pinia';
 interface State {
   jsonInputString: string;
   json: TeleportEndpoint[];
+  addedEndpoints: TeleportEndpoint[];
   filter: string;
   filterType: TeleporterTypes | '';
   jsonError: boolean;
@@ -13,11 +14,25 @@ export const useEndpointDataStore = defineStore('endpointData', {
   state: (): State => ({
     jsonInputString: '',
     json: [],
+    addedEndpoints: [],
     filter: '',
     filterType: '',
     jsonError: false,
   }),
 
+  getters: {
+    typeCounter: (state) => {
+      const counter: Partial<Record<TeleporterTypes, number>> = {};
+      const allEndpoints = [...state.addedEndpoints, ...state.json]
+      for (const endpoint of allEndpoints) {
+        const type = endpoint.TeleporterType;
+        counter[type] ??= 0;
+        counter[type]++;
+      }
+      return counter;
+    },
+  },
+
   actions: {
     parseJson() {
       try {

From e9b8a84eb0d60e8fa212adceb4e29a18aa673a1b Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Sat, 20 Jul 2024 20:38:33 +0200
Subject: [PATCH 4/9] remove excess stations to stay in limit

---
 src/components/CopyButton.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
index 185a135..8917062 100644
--- a/src/components/CopyButton.vue
+++ b/src/components/CopyButton.vue
@@ -1,19 +1,35 @@
 <script setup lang="ts">
 import { useEndpointDataStore } from '@/store/endpointData';
+import type { TeleportEndpoint, TeleporterTypes } from '@/types/teleportEndpoint';
+import { maxStations } from '@/variables/limits';
 import { storeToRefs } from 'pinia';
 import { ref } from 'vue';
 
 const endpointData = useEndpointDataStore();
-const { json, addedEndpoints } = storeToRefs(endpointData);
+const { json, addedEndpoints, typeCounter } = storeToRefs(endpointData);
 
 const defaultText = 'Copy modified JSON';
 const buttonText = ref(defaultText);
 const copied = ref(false);
 
+function getExcessEndpoints(arr: TeleportEndpoint[], type: TeleporterTypes) {
+  const endpointCount = typeCounter.value[type] ?? 0;
+  const excessEndpoints = Math.max(endpointCount - maxStations, 0);
+  const endpoints = arr.filter((item) => item.TeleporterType === type);
+  const removeStations = endpoints.slice(0, excessEndpoints);
+  return removeStations;
+}
+
 function copyJson() {
   const indent = 2;
   const displayTime = 1500;
-  const combinedEndpoints = [...json.value, ...addedEndpoints.value];
+  const excessStations = getExcessEndpoints(json.value, 'Spacestation');
+  const excessStationsFixPos = getExcessEndpoints(json.value, 'SpacestationFixPosition');
+  const filteredEndpoints = json.value.filter(
+    (item) => !excessStations.includes(item) && !excessStationsFixPos.includes(item)
+  );
+  const combinedEndpoints = [...filteredEndpoints, ...addedEndpoints.value];
+
   navigator.clipboard.writeText(JSON.stringify(combinedEndpoints, null, indent));
   buttonText.value = 'Copied!';
   copied.value = true;

From 28ca964d4fd865897ab00d99d4ad289913d20820 Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Sat, 20 Jul 2024 20:43:54 +0200
Subject: [PATCH 5/9] remove non-working code

---
 src/App.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1ffa29b..e7e1332 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@ import FilterInput from './components/FilterInput.vue';
 import CopyButton from './components/CopyButton.vue';
 import { useEndpointDataStore } from './store/endpointData';
 import { storeToRefs } from 'pinia';
-import { computed, watchEffect } from 'vue';
+import { computed } from 'vue';
 import { endpointToGlyphs } from './common';
 
 const endpointData = useEndpointDataStore();
@@ -25,8 +25,6 @@ const renderJson = computed(() => {
     return json.value;
   }
 });
-
-watchEffect(() => console.log(json.value.map(item => item.Name)))
 </script>
 
 <template>
@@ -55,7 +53,7 @@ watchEffect(() => console.log(json.value.map(item => item.Name)))
         v-for="endpoint in json"
         v-show="renderJson.includes(endpoint)"
         :endpoint-json="endpoint"
-        :key="`${endpoint.Name}${endpoint.UniverseAddress}`"
+        :key="endpoint.Name"
       />
     </div>
   </main>

From b006fa2c91787bb3439bbf377197daa309d9bcb2 Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Sat, 20 Jul 2024 20:49:16 +0200
Subject: [PATCH 6/9] use computed property

---
 src/components/CopyButton.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
index 8917062..8ea638a 100644
--- a/src/components/CopyButton.vue
+++ b/src/components/CopyButton.vue
@@ -3,14 +3,14 @@ import { useEndpointDataStore } from '@/store/endpointData';
 import type { TeleportEndpoint, TeleporterTypes } from '@/types/teleportEndpoint';
 import { maxStations } from '@/variables/limits';
 import { storeToRefs } from 'pinia';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const endpointData = useEndpointDataStore();
 const { json, addedEndpoints, typeCounter } = storeToRefs(endpointData);
 
-const defaultText = 'Copy modified JSON';
-const buttonText = ref(defaultText);
-const copied = ref(false);
+const isCopied = ref(false);
+
+const buttonText = computed(() => (isCopied.value ? 'Copied!' : 'Copy modified JSON'));
 
 function getExcessEndpoints(arr: TeleportEndpoint[], type: TeleporterTypes) {
   const endpointCount = typeCounter.value[type] ?? 0;
@@ -31,18 +31,16 @@ function copyJson() {
   const combinedEndpoints = [...filteredEndpoints, ...addedEndpoints.value];
 
   navigator.clipboard.writeText(JSON.stringify(combinedEndpoints, null, indent));
-  buttonText.value = 'Copied!';
-  copied.value = true;
+  isCopied.value = true;
   setTimeout(() => {
-    buttonText.value = defaultText;
-    copied.value = false;
+    isCopied.value = false;
   }, displayTime);
 }
 </script>
 
 <template>
   <button
-    :class="{ 'no-interaction': copied, 'is-outlined': !copied }"
+    :class="{ 'no-interaction': isCopied, 'is-outlined': !isCopied }"
     class="button is-success"
     @click="copyJson"
   >

From cae2cbf58f70b7e5b8424ed4ece96937309b788b Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Sat, 20 Jul 2024 20:52:12 +0200
Subject: [PATCH 7/9] render all endpoints

---
 src/App.vue               | 8 ++++----
 src/store/endpointData.ts | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e7e1332..84f705a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,11 +10,11 @@ import { computed } from 'vue';
 import { endpointToGlyphs } from './common';
 
 const endpointData = useEndpointDataStore();
-const { json, filter, filterType } = storeToRefs(endpointData);
+const { allEndpoints, filter, filterType } = storeToRefs(endpointData);
 
 const renderJson = computed(() => {
   if (filter.value || filterType.value) {
-    return json.value.filter(
+    return allEndpoints.value.filter(
       (item) =>
         (!filter.value ||
           item.Name.toLowerCase().includes(filter.value.toLowerCase()) ||
@@ -22,7 +22,7 @@ const renderJson = computed(() => {
         (!filterType.value || item.TeleporterType === filterType.value)
     );
   } else {
-    return json.value;
+    return allEndpoints.value;
   }
 });
 </script>
@@ -50,7 +50,7 @@ const renderJson = computed(() => {
     </div>
     <div class="endpoint-list mt-5 mb-6">
       <EndpointCard
-        v-for="endpoint in json"
+        v-for="endpoint in allEndpoints"
         v-show="renderJson.includes(endpoint)"
         :endpoint-json="endpoint"
         :key="endpoint.Name"
diff --git a/src/store/endpointData.ts b/src/store/endpointData.ts
index 18c8be1..5268633 100644
--- a/src/store/endpointData.ts
+++ b/src/store/endpointData.ts
@@ -21,10 +21,10 @@ export const useEndpointDataStore = defineStore('endpointData', {
   }),
 
   getters: {
-    typeCounter: (state) => {
+    allEndpoints: (state) => [...state.json, ...state.addedEndpoints],
+    typeCounter() {
       const counter: Partial<Record<TeleporterTypes, number>> = {};
-      const allEndpoints = [...state.addedEndpoints, ...state.json]
-      for (const endpoint of allEndpoints) {
+      for (const endpoint of this.allEndpoints) {
         const type = endpoint.TeleporterType;
         counter[type] ??= 0;
         counter[type]++;

From c747b5b6c10b4a421c6338b2c982fcacf0b7eb89 Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Sat, 20 Jul 2024 21:19:42 +0200
Subject: [PATCH 8/9] warn if limit is reached

---
 src/App.vue                             |  2 +-
 src/components/EditEndpointDialogue.vue | 43 +++++++++++++++++++------
 src/style/style.css                     |  7 ++--
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 84f705a..7d25774 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,7 +50,7 @@ const renderJson = computed(() => {
     </div>
     <div class="endpoint-list mt-5 mb-6">
       <EndpointCard
-        v-for="endpoint in allEndpoints"
+        v-for="endpoint in allEndpoints.toReversed()"
         v-show="renderJson.includes(endpoint)"
         :endpoint-json="endpoint"
         :key="endpoint.Name"
diff --git a/src/components/EditEndpointDialogue.vue b/src/components/EditEndpointDialogue.vue
index 1a6e3cb..e9946f3 100644
--- a/src/components/EditEndpointDialogue.vue
+++ b/src/components/EditEndpointDialogue.vue
@@ -4,6 +4,7 @@ import { useId } from '@/helpers/id';
 import { useEndpointDataStore } from '@/store/endpointData';
 import type { DialogProps } from '@/types/props';
 import { teleporterTypes, type TeleporterTypes } from '@/types/teleportEndpoint';
+import { maxStations } from '@/variables/limits';
 import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 
@@ -12,7 +13,7 @@ const props = withDefaults(defineProps<DialogProps>(), {
 });
 
 const endpointData = useEndpointDataStore();
-const { addedEndpoints } = storeToRefs(endpointData);
+const { addedEndpoints, typeCounter } = storeToRefs(endpointData);
 
 const newEndpointName = ref<string>(props.endpointData.Name);
 const newEndpointAddress = ref<string>(endpointToGlyphs(props.endpointData));
@@ -87,6 +88,20 @@ const isOutOfSafeRange = computed(() => {
   const aboveSafeRange = systemNumber > lastSafeIndex;
   return aboveSafeRange && endpointToGlyphs(props.endpointData) !== newEndpointAddress.value;
 });
+
+const isOverLimit = computed(() => {
+  const amountOfTypeEndpoints = typeCounter.value[newEndpointType.value] ?? 0;
+  // case 1: editing existing endpoint, but not changing type (total must be > max)
+  // case 2: editing existing endpoint, but changing type (total + 1 must be > max)
+  // case 3: adding new endpoint (total + 1 must be > max)
+  return (
+    (!isNewEndpoint.value && amountOfTypeEndpoints > maxStations) ||
+    ((isNewEndpoint.value || props.endpointData.TeleporterType !== newEndpointType.value) &&
+      amountOfTypeEndpoints + 1 > maxStations)
+  );
+});
+
+const amountOverLimit = computed(() => Math.max((typeCounter.value[newEndpointType.value] ?? 0) - maxStations, 1));
 </script>
 
 <template>
@@ -128,15 +143,23 @@ const isOutOfSafeRange = computed(() => {
         type="text"
       />
       <label>Type:</label>
-      <div class="select">
-        <select v-model="newEndpointType">
-          <option
-            v-for="endpointType in isNewEndpoint ? stationEndpoints : teleporterTypes"
-            :value="endpointType"
-          >
-            {{ endpointType }}
-          </option>
-        </select>
+      <div>
+        <div class="select">
+          <select v-model="newEndpointType">
+            <option
+              v-for="endpointType in isNewEndpoint ? stationEndpoints : teleporterTypes"
+              :value="endpointType"
+            >
+              {{ endpointType }}
+            </option>
+          </select>
+        </div>
+        <p
+          v-if="isOverLimit"
+          class="warning mt-1 p-1"
+        >
+          Warning: Too many {{ newEndpointType }} endpoints. {{ amountOverLimit }} will be removed.
+        </p>
       </div>
     </form>
 
diff --git a/src/style/style.css b/src/style/style.css
index 5b78bfc..4ecb12d 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -32,8 +32,11 @@ html {
   }
 }
 
-.select select {
-  width: 100%;
+.select {
+  &,
+  select {
+    width: 100%;
+  }
 }
 
 a:hover {

From cca2fd62dbd319338db7b4cc595194372fce3ab3 Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Sun, 21 Jul 2024 00:37:47 +0200
Subject: [PATCH 9/9] automatically switch to fixposition to avoid overflow

---
 src/components/EditEndpointDialogue.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/EditEndpointDialogue.vue b/src/components/EditEndpointDialogue.vue
index e9946f3..ebbece0 100644
--- a/src/components/EditEndpointDialogue.vue
+++ b/src/components/EditEndpointDialogue.vue
@@ -6,7 +6,7 @@ import type { DialogProps } from '@/types/props';
 import { teleporterTypes, type TeleporterTypes } from '@/types/teleportEndpoint';
 import { maxStations } from '@/variables/limits';
 import { storeToRefs } from 'pinia';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const props = withDefaults(defineProps<DialogProps>(), {
   endpointData: () => createEndpoint(),
@@ -29,7 +29,7 @@ function resetEndpointInputs() {
   newEndpointName.value = props.endpointData.Name;
   newEndpointAddress.value = endpointToGlyphs(props.endpointData);
   newEndpointGalaxy.value = (props.endpointData.UniverseAddress.RealityIndex + 1).toString();
-  newEndpointType.value = props.endpointData.TeleporterType;
+  changeInitialEndpointType();
 }
 
 function addEndpoint() {
@@ -51,7 +51,7 @@ function addEndpoint() {
     planet: PlanetIndex,
   });
 
-  if (props.endpointData.Name) {
+  if (!isNewEndpoint.value) {
     const locationData = addressToXYZ(newEndpointAddress.value);
     if (!locationData) return;
     const { VoxelX, VoxelY, VoxelZ, SolarSystemIndex, PlanetIndex } = locationData;
@@ -102,6 +102,16 @@ const isOverLimit = computed(() => {
 });
 
 const amountOverLimit = computed(() => Math.max((typeCounter.value[newEndpointType.value] ?? 0) - maxStations, 1));
+
+function changeInitialEndpointType() {
+  if ((typeCounter.value.Spacestation ?? 0) + 1 > maxStations && isNewEndpoint.value) {
+    newEndpointType.value = 'SpacestationFixPosition';
+  } else {
+    newEndpointType.value = props.endpointData.TeleporterType;
+  }
+}
+
+watch(typeCounter, changeInitialEndpointType);
 </script>
 
 <template>