Merge pull request #18 from Lenni009/dev

Minor adjustments
Eisvana · Sep 30, 2023 · ce8a12c · ce8a12c
2 parents 5e33784 + db4a417
commit ce8a12c
Show file tree

Hide file tree

Showing 19 changed files with 425 additions and 107 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
-# EisHub-Catalogue-Entry
-Simple interface for submitting catalogue entries to the EisHub Scribes
+# Eisvana-Catalogue-Entry
+Simple interface for submitting catalogue entries to the Eisvana Wiki Scholars
diff --git a/index.html b/index.html
@@ -4,12 +4,12 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>EisHub Catalogue Entry</title>
+  <script type="module" src="/src/main.ts"></script>
+  <title>Eisvana Catalogue Entry</title>
 </head>
 
 <body>
   <div id="app" class="container"></div>
-  <script type="module" src="/src/main.ts"></script>
 </body>
 
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "eishub-catalogue-entry",
+  "name": "eisvana-catalogue-entry",
   "version": "0.0.0",
   "private": true,
   "scripts": {

diff --git a/src/App.vue b/src/App.vue
@@ -6,7 +6,7 @@ import { storeToRefs } from 'pinia';
 import router from './router';
 
 const catalogueDataStore = useCatalogueDataStore();
-const { file, name } = storeToRefs(catalogueDataStore);
+const { file, name, isArtifact } = storeToRefs(catalogueDataStore);
 
 const persistentDataStore = usePersistentDataStore();
 const { requiredFields, catalogueUrl } = storeToRefs(persistentDataStore);
@@ -17,6 +17,7 @@ router.afterEach((to) => {
   catalogueUrl.value = typeof newCatalogueUrl === 'string' ? newCatalogueUrl : '';
   requiredFields.value = Array.isArray(newRequiredFields) ? newRequiredFields : [];
 
+  isArtifact.value = to.name === 'Artifact';
   name.value.value = '';
   file.value.value = null;
 });
@@ -25,7 +26,7 @@ router.afterEach((to) => {
 <template>
   <header>
     <NavBar />
-    <h1 class="title">EisHub Catalogue Entry</h1>
+    <h1 class="title">Eisvana Catalogue Entry</h1>
   </header>
 
   <main>

diff --git a/src/components/ActionButtons.vue b/src/components/ActionButtons.vue
@@ -24,6 +24,7 @@ const {
   sandworm,
   flora,
   planet,
+  artifact,
 } = storeToRefs(catalogueDataStore);
 const persistentDataStore = usePersistentDataStore();
 const { contact, submittedEntries, catalogueUrl } = storeToRefs(persistentDataStore);
@@ -52,6 +53,7 @@ const albumStrings: { [key: string]: string } = reactive({
   sandworm,
   flora,
   planet,
+  artifact,
 });
 
 const isValidData = computed(() => useRequiredFields().isValidData);

diff --git a/src/components/DiscovererInputs.vue b/src/components/DiscovererInputs.vue
@@ -1,32 +1,47 @@
 <script setup lang="ts">
+import { watchEffect } from 'vue';
 import { useCatalogueDataStore } from '../stores/catalogueData';
 import { usePersistentDataStore } from '../stores/persistentData';
 import { storeToRefs } from 'pinia';
 
 const catalogueDataStore = useCatalogueDataStore();
-const { discoverer, discovererReddit, notes } = storeToRefs(catalogueDataStore);
+const { discoverer, discovererReddit, notes, isArtifact } = storeToRefs(catalogueDataStore);
 const persistentDataStore = usePersistentDataStore();
 const { contact } = storeToRefs(persistentDataStore);
+
+watchEffect(() => {
+  discoverer.value.isActive = !isArtifact.value;
+  discovererReddit.value.isActive = !isArtifact.value;
+});
 </script>
 
 <template>
   <div class="input-group">
-    <div>
-      <label for="username">Discoverer</label>
-      <input
-        type="text"
-        id="username"
-        v-model="discoverer.value"
-      />
-    </div>
+    <div
+      v-if="!isArtifact"
+      class="discoverer-group-wrapper"
+    >
+      <p class="required one-required-notice">Fill out at least one</p>
+      <div class="discoverer-group">
+        <div>
+          <label for="username">Discoverer</label>
+          <input
+            class="required"
+            type="text"
+            id="username"
+            v-model="discoverer.value"
+          />
+        </div>
 
-    <div>
-      <label for="redditUsername">Discoverer Reddit Name (if available)</label>
-      <input
-        type="text"
-        id="redditUsername"
-        v-model="discovererReddit.value"
-      />
+        <div>
+          <label for="redditUsername">Discoverer Reddit Name (if available)</label>
+          <input
+            type="text"
+            id="redditUsername"
+            v-model="discovererReddit.value"
+          />
+        </div>
+      </div>
     </div>
 
     <div>
@@ -42,8 +57,8 @@ const { contact } = storeToRefs(persistentDataStore);
       />
     </div>
 
-    <div>
-      <label for="notes">Additional Notes for the Scribe Team</label>
+    <div class="textarea-wrapper">
+      <label for="notes">Additional Notes for the Wiki Scholar Team</label>
       <textarea
         class="textarea"
         id="notes"
@@ -55,7 +70,36 @@ const { contact } = storeToRefs(persistentDataStore);
 </template>
 
 <style scoped lang="scss">
-.textarea {
-  resize: vertical;
+.textarea-wrapper {
+  width: 100%;
+  .textarea {
+    resize: vertical;
+  }
+}
+
+.discoverer-group-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  padding: 0.5rem;
+  border: 1px solid var(--form-element-border-color);
+  border-radius: var(--border-radius);
+
+  .one-required-notice {
+    margin: 0;
+    font-size: 0.75rem;
+    text-align: center;
+  }
+
+  .discoverer-group {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    gap: 1rem;
+
+    & > * {
+      flex-grow: 1;
+    }
+  }
 }
 </style>
diff --git a/src/components/GlyphInput.vue b/src/components/GlyphInput.vue
@@ -61,7 +61,7 @@ watchEffect(() => (glyphs.value.isValid = isValidGlyphs.value));
     <ErrorMessage
       v-if="glyphs.value.length === 12 && !isValidGlyphs"
       class="error"
-      >Glyphs are outside of EisHub space!</ErrorMessage
+      >Glyphs are outside of Eisvana space!</ErrorMessage
     >
     <div class="portal-buttons grid">
       <button

diff --git a/src/components/NavLink.vue b/src/components/NavLink.vue
@@ -16,6 +16,9 @@ defineProps<{
 
 <style scoped lang="scss">
 .link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: inherit;
   padding: 0.75rem 1.25rem;
   width: 100%;

diff --git a/src/composables/useRequiredFields.ts b/src/composables/useRequiredFields.ts
@@ -1,7 +1,7 @@
-import { reactive } from "vue";
+import { reactive } from 'vue';
 import { useCatalogueDataStore } from '../stores/catalogueData';
 import { usePersistentDataStore } from '../stores/persistentData';
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia';
 
 export function useRequiredFields() {
   const catalogueDataStore = useCatalogueDataStore();
@@ -25,15 +25,21 @@ export function useRequiredFields() {
     mtType,
     shipType,
     isValidDiscoverer,
+    artifactType,
+    artifactRarity,
+    modifier,
+    value,
+    id,
+    isValidGlyphs,
   } = storeToRefs(catalogueDataStore);
 
   const persistentDataStore = usePersistentDataStore();
   const { contact, requiredFields } = storeToRefs(persistentDataStore);
 
   const fields: {
     [key: string]: {
-      [key: string]: string | File | null | boolean
-    }
+      [key: string]: string | File | null | boolean;
+    };
   } = reactive({
     name,
     file,
@@ -54,11 +60,21 @@ export function useRequiredFields() {
     mtType,
     shipType,
     contact,
+    artifactType,
+    artifactRarity,
+    modifier,
+    value,
+    id,
   });
 
   const standardFields: string[] = ['contact', 'name', 'file', ...requiredFields.value];
 
-  const isValidData = standardFields.filter((field) => fields[field].isActive).every(field => fields[field].value && fields[field].isValid !== false) && isValidDiscoverer.value;
+  const isValidData =
+    standardFields
+      .filter((field) => fields[field].isActive)
+      .every((field) => fields[field].value && fields[field].isValid !== false) &&
+    isValidDiscoverer.value &&
+    isValidGlyphs.value;
 
   return { isValidData };
-}
+}
diff --git a/src/css/style.scss b/src/css/style.scss
@@ -9,7 +9,7 @@
 
 .container {
   margin-block-start: 1rem;
-  margin-block-end: 5rem;
+  margin-block-end: 2rem;
 }
 
 html,

diff --git a/src/objects/regions.ts b/src/objects/regions.ts
@@ -0,0 +1 @@
+export const regions = ['A21117FF', 'A11117FF', 'A11127FF', 'A21127FF', 'A21107FF', 'A21107FE', 'A21117FE'];
diff --git a/src/pages/Artifact.vue b/src/pages/Artifact.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useCatalogueDataStore } from '../stores/catalogueData';
+import { storeToRefs } from 'pinia';
+import ErrorMessage from '../components/ErrorMessage.vue';
+import { watchEffect } from 'vue';
+
+const catalogueDataStore = useCatalogueDataStore();
+const { artifactType, artifactRarity, modifier, value, id, isValidValue, isValidModifier, isValidId } =
+  storeToRefs(catalogueDataStore);
+
+watchEffect(() => {
+  modifier.value.isValid = isValidModifier.value;
+  value.value.isValid = isValidValue.value;
+  id.value.isValid = isValidId.value;
+});
+</script>
+
+<template>
+  <div class="input-group">
+    <div>
+      <label class="required">Type</label>
+      <select v-model="artifactType.value">
+        <option value="Ancient Skeleton">Ancient Skeleton</option>
+        <option value="Aquatic Treasure">Aquatic Treasure</option>
+        <option value="Biological Sample">Biological Sample</option>
+        <option value="Delicate Flora (FARM)">Delicate Flora (mutated genes)</option>
+        <option value="Delicate Flora (PLNT)">Delicate Flora (years)</option>
+        <option value="Excavated Bones">Excavated Bones</option>
+        <option value="Fossil Sample">Fossil Sample</option>
+        <option value="Historical Document">Historical Document</option>
+        <option value="Lost Artifact">Lost Artifact</option>
+        <option value="Salvaged Scrap">Salvaged Scrap</option>
+        <option value="Terrifying Sample">Terrifying Sample</option>
+        <option value="Unearthed Treasure">Unearthed Treasure</option>
+      </select>
+    </div>
+    <div>
+      <label class="required">Rarity</label>
+      <select v-model="artifactRarity.value">
+        <option value="Common">Common (Blue)</option>
+        <option value="Uncommon">Uncommon (Purple) Treasure</option>
+        <option value="Rare">Rare (Yellow)</option>
+      </select>
+    </div>
+    <div>
+      <label
+        class="required"
+        for="modifier"
+        >Modifier</label
+      >
+      <input
+        v-model="modifier.value"
+        id="modifier"
+        type="text"
+      />
+      <ErrorMessage v-if="!isValidModifier">Must only contain numbers</ErrorMessage>
+    </div>
+    <div>
+      <label
+        class="required"
+        for="value"
+        >Value</label
+      >
+      <input
+        v-model="value.value"
+        id="value"
+        type="text"
+      />
+      <ErrorMessage v-if="!isValidValue">Must only contain numbers</ErrorMessage>
+    </div>
+    <div>
+      <label for="id">ID (from save editor)</label>
+      <input
+        v-model="id.value"
+        id="id"
+        type="text"
+      />
+      <ErrorMessage v-if="!isValidId">Must only contain numbers</ErrorMessage>
+    </div>
+  </div>
+</template>