Merge pull request #2 from Lenni009/dev

add error messages
NMSCD · Nov 19, 2023 · 3e3043c · 3e3043c
2 parents 58cb4a1 + cb217e5
commit 3e3043c
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 33 deletions.
diff --git a/src/common.ts b/src/common.ts
@@ -2,8 +2,6 @@ import type { TeleportEndpoint, TeleporterTypes } from './types/teleportEndpoint
 
 type Pos = [number, number, number];
 
-const randomNumber = Math.random();
-
 export function createEndpoint(
   name: string = '',
   teleporterType: TeleporterTypes = 'Spacestation',
@@ -13,8 +11,8 @@ export function createEndpoint(
   galaxy: number = 0,
   systemIndex: number = 0,
   planet: number = 0,
-  position: Pos = [randomNumber, randomNumber, randomNumber],
-  facing: Pos = [randomNumber, randomNumber, randomNumber],
+  position: Pos = [1, 1, 1],
+  facing: Pos = [1, 1, 1],
   isFeatured: boolean = false,
   calcWarpOffset: boolean = false
 ): TeleportEndpoint {

diff --git a/src/components/EditEndpointDialogue.vue b/src/components/EditEndpointDialogue.vue
@@ -91,11 +91,20 @@ const ids = {
 };
 
 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);
+  const lastSafeIndex = 122;
+  const aboveSafeRange = systemNumber > lastSafeIndex;
+  return aboveSafeRange && endpointToAddress(props.endpointData) !== newEndpointAddress.value;
+});
 </script>
 
 <template>
   <dialog
-    class="p-0"
+    :class="{ 'dialog-hide': !open }"
+    class="box p-0 m-auto"
     ref="dialog"
     @click.self="closeModal"
     @close="$emit('update:open', false)"
@@ -114,15 +123,22 @@ const editButtonText = computed(() => (props.endpointData.Name ? 'Save Changes'
           autofocus
         />
         <label :for="ids.addressInput">Address:</label>
-        <input
-          v-model="newEndpointAddress"
-          class="input"
-          type="text"
-          :id="ids.addressInput"
-          maxlength="19"
-        />
+        <div>
+          <input
+            v-model="newEndpointAddress"
+            class="input"
+            type="text"
+            :id="ids.addressInput"
+            maxlength="19"
+          />
+          <p
+            v-if="isOutOfSafeRange"
+            class="warning mt-1 p-1"
+          >
+            Warning: This system may<br />not have a space station.
+          </p>
+        </div>
         <label :for="ids.galaxyInput">Galaxy:</label>
-
         <input
           v-model="newEndpointGalaxy"
           class="input"
@@ -166,15 +182,28 @@ const editButtonText = computed(() => (props.endpointData.Name ? 'Save Changes'
 </template>
 
 <style scoped lang="scss">
-.submit-buttons {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-}
+dialog {
+  border: 1px solid silver;
+
+  .warning {
+    background-color: orange;
+    border-radius: 4px;
+  }
+
+  &.dialog-hide {
+    display: none;
+  }
+
+  .submit-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+  }
 
-.endpoint-add-form {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  .endpoint-add-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
 }
 </style>
diff --git a/src/components/EndpointCard.vue b/src/components/EndpointCard.vue
@@ -26,8 +26,8 @@ function removeEndpoint() {
 </script>
 
 <template>
-  <div class="endpoint-card">
-    <div>{{ endpointJson.Name }}</div>
+  <div class="box">
+    <div class="has-text-weight-bold">{{ endpointJson.Name }}</div>
     <div class="glyphs">{{ address }}</div>
     <div>Galaxy: {{ endpointJson.UniverseAddress.RealityIndex + 1 }}</div>
     <div>{{ endpointJson.TeleporterType }}</div>
@@ -53,13 +53,6 @@ function removeEndpoint() {
 </template>
 
 <style scoped lang="scss">
-.endpoint-card {
-  background-color: #eee;
-  border: 1px solid silver;
-  padding: 0.5rem;
-  border-radius: 7px;
-}
-
 .actions {
   display: flex;
   gap: 0.5rem;

diff --git a/src/components/JsonInput.vue b/src/components/JsonInput.vue
@@ -3,7 +3,7 @@ import { useEndpointDataStore } from '@/stores/endpointData';
 import { storeToRefs } from 'pinia';
 
 const endpointData = useEndpointDataStore();
-const { jsonInputString } = storeToRefs(endpointData);
+const { jsonInputString, jsonError } = storeToRefs(endpointData);
 </script>
 
 <template>
@@ -19,6 +19,12 @@ const { jsonInputString } = storeToRefs(endpointData);
       id="jsonInput"
       @input="endpointData.parseJson"
     ></textarea>
+    <p
+      v-if="jsonError"
+      class="error mt-1 p-1"
+    >
+      Malformed JSON detected. The app will not work.
+    </p>
   </div>
 </template>
 
@@ -27,4 +33,10 @@ label {
   margin-block-end: 3px;
   display: block;
 }
+
+.error {
+  background-color: red;
+  color: white;
+  border-radius: 4px;
+}
 </style>
diff --git a/src/stores/endpointData.ts b/src/stores/endpointData.ts
@@ -6,6 +6,7 @@ interface State {
   json: TeleportEndpoint[];
   filter: string;
   filterType: TeleporterTypes | '';
+  jsonError: boolean;
 }
 
 export const useEndpointDataStore = defineStore('endpointData', {
@@ -14,11 +15,18 @@ export const useEndpointDataStore = defineStore('endpointData', {
     json: [],
     filter: '',
     filterType: '',
+    jsonError: false,
   }),
 
   actions: {
     parseJson() {
-      this.json = JSON.parse(this.jsonInputString || '[]');
+      try {
+        this.json = JSON.parse(this.jsonInputString || '[]');
+        this.jsonError = false;
+      } catch (error) {
+        console.error(error);
+        this.jsonError = true;
+      }
     },
   },
 });