Merge pull request #19 from TheAsel/develop

Ready for 1.2.0

package.json

@@ -14,28 +14,28 @@
     "start": "quasar serve --cache --history dist/spa"
   },
   "dependencies": {
-    "@quasar/extras": "^1.16.7",
+    "@quasar/extras": "^1.16.9",
     "lodash": "^4.17.21",
     "pinia": "^2.1.7",
-    "quasar": "^2.13.0",
+    "quasar": "^2.14.2",
     "vue": "3.3.4",
     "vue-router": "^4.2.5",
     "vue3-tour": "^0.3.4"
   },
   "devDependencies": {
-    "@quasar/app-vite": "^1.6.2",
+    "@quasar/app-vite": "^1.7.2",
     "@quasar/cli": "^2.3.0",
-    "@types/lodash": "^4.14.200",
-    "@types/node": "^20.8.7",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.11.4",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "prettier": "^3.0.3",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.2.2"
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.20.1",
+    "prettier": "^3.2.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
   },
   "engines": {
     "node": "^18 || ^16 || ^14.19",

src/components/Encounter/CreatureList.vue

@@ -1,24 +1,40 @@
 <script setup lang="ts">
-import { watch } from 'vue';
-import { biPlus, biDash, biTrash } from '@quasar/extras/bootstrap-icons';
+import { ref, watch } from 'vue';
+import { biPlus, biDash, biTrash, biPlusLg } from '@quasar/extras/bootstrap-icons';
+import { matArrowDropDown } from '@quasar/extras/material-icons';
 import debounce from 'lodash/debounce';
 import { partyStore, encounterStore, infoStore } from 'stores/store';
 import { encounterInfo } from 'src/utils/api-calls';
+import { encounterList } from 'src/types/encounter';
 
 const party = partyStore();
 const encounter = encounterStore();
 const info = infoStore();
 
+const newEncounterDialog = ref(false);
+const encounterNameInput = ref();
+const newEncounterName = ref('');
+
+const removeEncounterDialog = ref(false);
+
+const tmpEncounter = ref<encounterList>(encounter.getActiveEncounter);
+const encounters = ref<string[]>(encounter.getEncounters.map((encounter) => encounter.name));
+
+tmpEncounter.value = {
+  name: encounter.getActiveEncounter.name,
+  creatures: encounter.getActiveEncounter.creatures
+};
+
 const debouncedCall = debounce(async function () {
-  const encounterList = encounter.getEncounter;
+  const encounterList = encounter.getActiveEncounter.creatures;
   const enemyLevels: number[] = [];
   for (var i = 0; i < encounterList.length; i++) {
     for (var j = 0; j < encounterList[i].quantity!; j++) {
       switch (encounterList[i].variant) {
-        case 'weak':
+        case 'Weak':
           enemyLevels.push(encounterList[i].level - 1);
           break;
-        case 'elite':
+        case 'Elite':
           enemyLevels.push(encounterList[i].level + 1);
           break;
         default:
@@ -44,13 +60,64 @@ const debouncedCall = debounce(async function () {
   }
 }, 300);
 
+// get info on creature list change
 watch(encounter, () => {
+  saveChanges();
   debouncedCall();
 });
 
+// get info on party change
 watch(party, () => {
   debouncedCall();
 });
+
+// get info on page load
+debouncedCall();
+
+const closeDialog = () => {
+  newEncounterDialog.value = false;
+  removeEncounterDialog.value = false;
+  newEncounterName.value = '';
+};
+
+const addEncounter = () => {
+  encounterNameInput.value.validate();
+  if (!encounterNameInput.value.hasError) {
+    encounter.addEncounter(newEncounterName.value);
+    encounters.value = encounter.getEncounters.map((encounter) => encounter.name);
+    tmpEncounter.value = {
+      name: encounter.getActiveEncounter.name,
+      creatures: [...encounter.getActiveEncounter.creatures]
+    };
+    saveChanges();
+    newEncounterName.value = '';
+    newEncounterDialog.value = false;
+  }
+};
+
+const removeEncounter = () => {
+  encounter.removeEncounter();
+  encounters.value = encounter.getEncounters.map((encounter) => encounter.name);
+  tmpEncounter.value = {
+    name: encounter.getActiveEncounter.name,
+    creatures: [...encounter.getActiveEncounter.creatures]
+  };
+  saveChanges();
+  removeEncounterDialog.value = false;
+};
+
+const changeActiveEncounter = (selected: string) => {
+  encounter.changeActiveEncounter(encounter.getEncounterIndex(selected));
+  tmpEncounter.value = {
+    name: encounter.getActiveEncounter.name,
+    creatures: [...encounter.getActiveEncounter.creatures]
+  };
+};
+
+const saveChanges = () => {
+  encounter.updateEncounter(tmpEncounter.value.name, tmpEncounter.value.creatures);
+  localStorage.setItem('encounters', JSON.stringify(encounter.getEncounters));
+};
 </script>
 
 <template>
@@ -67,11 +134,109 @@ watch(party, () => {
           Cost: {{ info.getInfo.experience }} XP
         </div>
         <q-space />
+        <q-btn
+          class="tw-my-auto tw-ml-2 tw-p-2"
+          :icon="biPlusLg"
+          size="sm"
+          flat
+          rounded
+          dense
+          aria-label="Add new encounter"
+          @click="newEncounterDialog = true"
+        />
+        <q-dialog
+          v-model="newEncounterDialog"
+          aria-label="New encounter dialog"
+          @escape-key="closeDialog"
+        >
+          <q-card flat bordered>
+            <q-card-section>
+              <div class="text-h6">New encounter name</div>
+            </q-card-section>
+
+            <q-card-section class="q-pt-none">
+              <q-input
+                ref="encounterNameInput"
+                dense
+                v-model="newEncounterName"
+                autofocus
+                @keyup.enter="addEncounter"
+                :rules="[
+                  (val) => !!val || 'Field is required',
+                  (val) =>
+                    !encounters.find((name) => name === val) || 'This encounter already exists'
+                ]"
+                :no-error-icon="true"
+              />
+            </q-card-section>
+
+            <q-card-actions align="center" class="text-primary">
+              <q-btn
+                flat
+                label="Cancel"
+                @click="closeDialog"
+                class="tw-text-blue-600 dark:tw-text-blue-400"
+              />
+              <q-btn
+                flat
+                label="Add encounter"
+                @click="addEncounter"
+                class="tw-text-blue-600 dark:tw-text-blue-400"
+              />
+            </q-card-actions>
+          </q-card>
+        </q-dialog>
+        <q-btn
+          class="tw-my-auto tw-mx-2 tw-p-2"
+          :icon="biTrash"
+          size="sm"
+          flat
+          rounded
+          dense
+          aria-label="Remove current encounter"
+          @click="removeEncounterDialog = true"
+        />
+        <q-dialog
+          v-model="removeEncounterDialog"
+          aria-label="Remove encounter dialog"
+          @escape-key="closeDialog"
+        >
+          <q-card flat bordered>
+            <q-card-section>
+              <div class="text-h6">Remove this encounter?</div>
+            </q-card-section>
+            <q-card-actions align="center" class="text-primary">
+              <q-btn
+                flat
+                label="Cancel"
+                @click="closeDialog"
+                class="tw-text-blue-600 dark:tw-text-blue-400"
+              />
+              <q-btn
+                flat
+                label="Remove"
+                @click="removeEncounter"
+                class="tw-text-red-600 dark:tw-text-red-400"
+              />
+            </q-card-actions>
+          </q-card>
+        </q-dialog>
+        <q-select
+          dense
+          style="min-width: 120px; max-width: 120px"
+          class="tw-my-auto tw-mr-2"
+          outlined
+          v-model="tmpEncounter.name"
+          :options="encounters"
+          label="Encounters"
+          :dropdown-icon="matArrowDropDown"
+          @update:model-value="changeActiveEncounter(tmpEncounter.name)"
+        />
         <q-btn flat dense @click="encounter.clearEncounter">CLEAR</q-btn>
       </div>
       <q-separator class="tw-bg-gray-200 dark:tw-bg-gray-700" />
       <q-scroll-area visible style="height: calc(100% - 103px)">
-        <div v-for="(item, index) in encounter.getEncounter" :key="index" dense>
+        <div v-for="(item, index) in encounter.getActiveEncounter.creatures" :key="index" dense>
           <div class="tw-flex tw-grow tw-flex-wrap justify-end">
             <div class="tw-flex-initial tw-w-12 tw-my-auto tw-mx-1">
               <q-btn
@@ -99,9 +264,9 @@ watch(party, () => {
                 :href="
                   item.archive_link +
                   '&Weak=' +
-                  (item.variant === 'weak') +
+                  (item.variant === 'Weak') +
                   '&Elite=' +
-                  (item.variant === 'elite')
+                  (item.variant === 'Elite')
                 "
                 target="_blank"
                 rel="noopener"
@@ -119,28 +284,28 @@ watch(party, () => {
                   flat
                   label="Weak"
                   size="15px"
-                  :color="item.variant === 'weak' ? 'positive' : 'grey-4'"
+                  :color="item.variant === 'Weak' ? 'positive' : 'grey-4'"
                   padding="xs"
                   class="text-weight-bold"
-                  @click="encounter.changeVariant(index, 'weak')"
+                  @click="encounter.changeVariant(index, 'Weak')"
                 />
                 <q-btn
                   flat
                   label="Base"
                   size="15px"
-                  :color="item.variant === 'base' ? 'primary' : 'grey-4'"
+                  :color="item.variant === 'Base' ? 'primary' : 'grey-4'"
                   padding="xs"
                   class="text-weight-bold"
-                  @click="encounter.changeVariant(index, 'base')"
+                  @click="encounter.changeVariant(index, 'Base')"
                 />
                 <q-btn
                   flat
                   label="Elite"
                   size="15px"
-                  :color="item.variant === 'elite' ? 'negative' : 'grey-4'"
+                  :color="item.variant === 'Elite' ? 'negative' : 'grey-4'"
                   padding="xs"
                   class="text-weight-bold"
-                  @click="encounter.changeVariant(index, 'elite')"
+                  @click="encounter.changeVariant(index, 'Elite')"
                 />
               </q-btn-group>
             </div>
@@ -183,3 +348,11 @@ watch(party, () => {
     </div>
   </div>
 </template>
+
+<style scoped>
+.q-select:deep(.q-field__native) > span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>