From d84a9b87287d7ed24f08edd86aa37790701a59de Mon Sep 17 00:00:00 2001
From: TheAsel <theasel99@gmail.com>
Date: Mon, 30 Oct 2023 19:32:19 +0100
Subject: [PATCH 1/4] multiple party implementation

---
 src/components/Encounter/CreatureList.vue     |   2 +-
 .../CreaturesTable/EncounterBuilder.vue       |   2 +-
 .../Encounter/CreaturesTable/PartyBuilder.vue | 199 +++++++++++++++---
 src/pages/EncounterPage.vue                   |  41 +++-
 src/stores/store.ts                           |  43 +++-
 src/types/party.ts                            |   4 +
 6 files changed, 246 insertions(+), 45 deletions(-)
 create mode 100644 src/types/party.ts

diff --git a/src/components/Encounter/CreatureList.vue b/src/components/Encounter/CreatureList.vue
index c1a85bc..a2b8239 100644
--- a/src/components/Encounter/CreatureList.vue
+++ b/src/components/Encounter/CreatureList.vue
@@ -27,7 +27,7 @@ const debouncedCall = debounce(async function () {
       }
     }
   }
-  const partyLevels = party.getParty;
+  const partyLevels = party.getActiveParty.members;
   const post = {
     enemy_levels: enemyLevels,
     party_levels: partyLevels
diff --git a/src/components/Encounter/CreaturesTable/EncounterBuilder.vue b/src/components/Encounter/CreaturesTable/EncounterBuilder.vue
index 511f533..4c1d70b 100644
--- a/src/components/Encounter/CreaturesTable/EncounterBuilder.vue
+++ b/src/components/Encounter/CreaturesTable/EncounterBuilder.vue
@@ -47,7 +47,7 @@ const restoreSettings = () => {
 
 const generateEncounter = async () => {
   saveChanges();
-  const partyLevels = party.getParty;
+  const partyLevels = party.getActiveParty.members;
   const post = {
     traits: tmpFilters.value.traits,
     alignments: tmpFilters.value.alignment,
diff --git a/src/components/Encounter/CreaturesTable/PartyBuilder.vue b/src/components/Encounter/CreaturesTable/PartyBuilder.vue
index 665a71f..f8f4e2b 100644
--- a/src/components/Encounter/CreaturesTable/PartyBuilder.vue
+++ b/src/components/Encounter/CreaturesTable/PartyBuilder.vue
@@ -1,41 +1,97 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { biXLg, biPlusLg, biDashLg } from '@quasar/extras/bootstrap-icons';
+import { party } from 'src/types/party';
+import { biXLg, biPlusLg, biDashLg, biTrash } from '@quasar/extras/bootstrap-icons';
+import { matArrowDropDown } from '@quasar/extras/material-icons';
+
 import { partyStore } from 'stores/store';
 
 const party = partyStore();
-const tmpParty = ref(party.getParty);
+const tmpParty = ref<party>({
+  name: party.getActiveParty.name,
+  members: [...party.getActiveParty.members]
+});
+const parties = ref(party.getParties.map((party) => party.name));
 
 const dialog = ref(false);
 
+const newPartyDialog = ref(false);
+const partyNameInput = ref();
+const newPartyName = ref('');
+
+const removePartyDialog = ref(false);
+
 const restoreParty = () => {
   dialog.value = true;
-  tmpParty.value = [...party.getParty];
+  tmpParty.value = {
+    name: party.getActiveParty.name,
+    members: [...party.getActiveParty.members]
+  };
 };
 
 const validateLevel = (index: number) => {
-  const value = tmpParty.value[index];
+  const value = tmpParty.value.members[index];
   if (value < 1) {
-    tmpParty.value[index] = 1;
+    tmpParty.value.members[index] = 1;
   }
   if (value > 20) {
-    tmpParty.value[index] = 20;
+    tmpParty.value.members[index] = 20;
   }
 };
 
 const addPlayer = () => {
-  tmpParty.value.push(1);
+  tmpParty.value.members.push(1);
 };
 
 const removePlayer = (index: number) => {
-  if (tmpParty.value.length > 1) {
-    tmpParty.value.splice(index, 1);
+  if (tmpParty.value.members.length > 1) {
+    tmpParty.value.members.splice(index, 1);
   }
 };
 
+const closeDialog = () => {
+  newPartyDialog.value = false;
+  removePartyDialog.value = false;
+  newPartyName.value = '';
+};
+
+const addParty = () => {
+  partyNameInput.value.validate();
+  if (!partyNameInput.value.hasError) {
+    party.addParty(newPartyName.value);
+    parties.value = party.getParties.map((party) => party.name);
+    tmpParty.value = {
+      name: party.getActiveParty.name,
+      members: [...party.getActiveParty.members]
+    };
+    saveChanges();
+    newPartyName.value = '';
+    newPartyDialog.value = false;
+  }
+};
+
+const removeParty = () => {
+  party.removeParty();
+  parties.value = party.getParties.map((party) => party.name);
+  tmpParty.value = {
+    name: party.getActiveParty.name,
+    members: [...party.getActiveParty.members]
+  };
+  saveChanges();
+  removePartyDialog.value = false;
+};
+
+const changeActiveParty = (selected: string) => {
+  party.changeActiveParty(party.getPartyIndex(selected));
+  tmpParty.value = {
+    name: party.getActiveParty.name,
+    members: [...party.getActiveParty.members]
+  };
+};
+
 const saveChanges = () => {
-  party.updateParty(tmpParty.value);
-  localStorage.setItem('party', JSON.stringify(tmpParty.value));
+  party.updateParty(tmpParty.value.name, tmpParty.value.members);
+  localStorage.setItem('parties', JSON.stringify(party.getParties));
 };
 </script>
 
@@ -43,26 +99,109 @@ const saveChanges = () => {
   <q-btn push label="Party Builder" @click="restoreParty" id="v-step-1" />
   <q-dialog v-model="dialog" aria-label="Player builder">
     <q-card flat bordered>
-      <q-card-section class="row items-center">
-        <div class="text-h6 tw-mr-4">Party Builder</div>
-        <q-space />
-        <q-btn
-          :icon="biXLg"
-          size="md"
-          padding="sm"
-          flat
-          round
-          dense
-          v-close-popup
-          aria-label="Close dialog"
-        />
+      <q-card-section class="items-center">
+        <div class="row">
+          <div class="text-h6 tw-mr-4">Party Builder</div>
+          <q-space />
+          <q-btn
+            :icon="biXLg"
+            size="md"
+            padding="sm"
+            flat
+            round
+            dense
+            v-close-popup
+            aria-label="Close dialog"
+          />
+        </div>
+        <div class="row">
+          <q-select
+            style="width: 180px"
+            outlined
+            v-model="tmpParty.name"
+            :options="parties"
+            label="Active Party"
+            :dropdown-icon="matArrowDropDown"
+            @update:model-value="changeActiveParty(tmpParty.name)"
+          />
+          <q-space />
+          <q-btn
+            class="tw-my-auto"
+            :icon="biPlusLg"
+            size="sm"
+            padding="sm"
+            flat
+            round
+            dense
+            aria-label="Add new party"
+            @click="newPartyDialog = true"
+          />
+          <q-dialog
+            v-model="newPartyDialog"
+            aria-label="New party dialog"
+            @escape-key="closeDialog"
+          >
+            <q-card flat bordered>
+              <q-card-section>
+                <div class="text-h6">New party name</div>
+              </q-card-section>
+
+              <q-card-section class="q-pt-none">
+                <q-input
+                  ref="partyNameInput"
+                  dense
+                  v-model="newPartyName"
+                  autofocus
+                  @keyup.enter="addParty"
+                  :rules="[
+                    (val) => !!val || 'Field is required',
+                    (val) => !parties.find((name) => name === val) || 'This party already exists'
+                  ]"
+                  :no-error-icon="true"
+                />
+              </q-card-section>
+
+              <q-card-actions align="center" class="text-primary">
+                <q-btn flat label="Cancel" @click="closeDialog" />
+                <q-btn flat label="Add party" @click="addParty" />
+              </q-card-actions>
+            </q-card>
+          </q-dialog>
+
+          <q-btn
+            class="tw-m-auto"
+            :icon="biTrash"
+            size="sm"
+            padding="sm"
+            flat
+            round
+            dense
+            aria-label="Remove current party"
+            @click="removePartyDialog = true"
+          />
+          <q-dialog
+            v-model="removePartyDialog"
+            aria-label="Remove party dialog"
+            @escape-key="closeDialog"
+          >
+            <q-card flat bordered>
+              <q-card-section>
+                <div class="text-h6">Remove this party?</div>
+              </q-card-section>
+              <q-card-actions align="center" class="text-primary">
+                <q-btn flat label="Cancel" @click="closeDialog" />
+                <q-btn flat label="Remove" @click="removeParty" color="red" />
+              </q-card-actions>
+            </q-card>
+          </q-dialog>
+        </div>
       </q-card-section>
 
       <q-separator />
 
       <q-card-section style="max-height: 60vh" class="scroll">
         <div class="tw-space-y-4">
-          <div v-for="(_, index) in tmpParty" :key="index" class="row no-wrap items-center">
+          <div v-for="(_, index) in tmpParty.members" :key="index" class="row no-wrap items-center">
             <div class="col-grow">
               <q-input
                 outlined
@@ -70,7 +209,7 @@ const saveChanges = () => {
                 min="1"
                 max="20"
                 :label="'Player ' + (index + 1)"
-                v-model.number="tmpParty[index]"
+                v-model.number="tmpParty.members[index]"
                 @update:model-value="validateLevel(index)"
                 dense
               />
@@ -129,3 +268,11 @@ input[type='number'] {
   appearance: textfield;
 }
 </style>
+
+<style scoped>
+.q-select:deep(.q-field__native) > span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/pages/EncounterPage.vue b/src/pages/EncounterPage.vue
index 90c0b37..85bb40f 100644
--- a/src/pages/EncounterPage.vue
+++ b/src/pages/EncounterPage.vue
@@ -2,6 +2,7 @@
 import { shallowRef } from 'vue';
 import { requestCreatures, requestFilters } from 'src/utils/api-calls';
 import { partyStore, filtersStore, creaturesStore, encounterStore } from 'stores/store';
+import { party } from 'src/types/party';
 import { creature } from 'src/types/creature';
 import CreatureList from 'src/components/Encounter/CreatureList.vue';
 
@@ -11,19 +12,41 @@ const creatures = creaturesStore();
 const encounter = encounterStore();
 const currentComponent = shallowRef();
 
-const localParty = localStorage.getItem('party');
+const localParty = localStorage.getItem('parties');
 if (localParty) {
   try {
-    const parsedParty: number[] = JSON.parse(localParty);
-    if (parsedParty && parsedParty.every((player) => player >= 1 && player <= 20)) {
-      party.updateParty(parsedParty);
+    const parsedParties = JSON.parse(localParty);
+    if (Array.isArray(parsedParties)) {
+      const isCompatible = parsedParties.every((p) => {
+        return (
+          typeof p.name === 'string' &&
+          Array.isArray(p.members) &&
+          p.members.every((member: any) => typeof member === 'number')
+        );
+      });
+      if (isCompatible) {
+        const parties: party[] = parsedParties;
+        parties.forEach((p) => {
+          if (!p || !p.members.every((player) => player >= 1 && player <= 20)) {
+            throw 'Invalid saved party levels';
+          }
+        });
+        const partyNames = parties.map((p) => p.name);
+        if (new Set(partyNames).size !== partyNames.length) {
+          throw 'Duplicate saved party names';
+        }
+        party.updateParties(parties);
+      } else {
+        throw 'Invalid saved party format';
+      }
     } else {
-      throw 'Invalid saved party';
+      throw 'Invalid saved party format';
     }
-  } catch (_) {
-    console.error('Invalid saved party');
-    localStorage.setItem('party', JSON.stringify([1, 1, 1, 1]));
-    party.updateParty([1, 1, 1, 1]);
+  } catch (error) {
+    console.error(error);
+    const defaultParty = { name: 'Default', members: [1, 1, 1, 1] };
+    localStorage.setItem('parties', JSON.stringify([defaultParty]));
+    party.updateParties([defaultParty]);
   }
 }
 
diff --git a/src/stores/store.ts b/src/stores/store.ts
index 303aa73..a0148c0 100644
--- a/src/stores/store.ts
+++ b/src/stores/store.ts
@@ -1,21 +1,48 @@
+import { party } from 'src/types/party';
 import { creature } from 'src/types/creature';
 import { encounter } from 'src/types/encounter';
 import { defineStore } from 'pinia';
 
 export const partyStore = defineStore('party', {
-  state: () => ({ party: [1, 1, 1, 1] }),
+  state: () => ({
+    parties: [{ name: 'Default', members: [1, 1, 1, 1] }] as party[],
+    activeParty: 0
+  }),
   getters: {
-    getParty: (state) => state.party
+    getParties: (state) => state.parties,
+    getActive: (state) => state.activeParty,
+    getActiveParty: (state) => state.parties[state.activeParty]
   },
   actions: {
-    updateParty(newParty: number[]) {
-      this.party = newParty;
+    getPartyIndex(partyName: string): number {
+      return this.parties.map((party) => party.name).indexOf(partyName);
     },
-    addPlayer() {
-      this.party.push(1);
+    updateParty(partyName: string, newMembers: number[]) {
+      const partyIndex = this.getPartyIndex(partyName);
+      if (partyIndex >= 0) {
+        this.parties[partyIndex].members = newMembers;
+      }
     },
-    removePlayer(index: number) {
-      this.party.splice(index, 1);
+    updateParties(newParties: party[]) {
+      this.parties = newParties;
+    },
+    changeActiveParty(partyIndex: number) {
+      if (partyIndex >= this.parties.length || partyIndex < 0) {
+        this.activeParty = 0;
+      } else {
+        this.activeParty = partyIndex;
+      }
+    },
+    addParty(partyName: string) {
+      this.parties.push({ name: partyName, members: [1, 1, 1, 1] });
+      this.activeParty = this.parties.length - 1;
+    },
+    removeParty() {
+      this.parties.splice(this.activeParty, 1);
+      this.activeParty = 0;
+      if (this.parties.length <= 0) {
+        this.parties = [{ name: 'Default', members: [1, 1, 1, 1] }];
+      }
     }
   }
 });
diff --git a/src/types/party.ts b/src/types/party.ts
new file mode 100644
index 0000000..46736d1
--- /dev/null
+++ b/src/types/party.ts
@@ -0,0 +1,4 @@
+export type party = {
+  name: string;
+  members: number[];
+};

From 9be3b259025c91c256cc1262d0c884f1f56b311b Mon Sep 17 00:00:00 2001
From: TheAsel <theasel99@gmail.com>
Date: Mon, 30 Oct 2023 20:04:29 +0100
Subject: [PATCH 2/4] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d447a1e..73c2af5 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@
 - Browse and filter a list of all creatures
 - Balance encounters based on your party size and level
 - Generate random encounters based on your requirements
-- Mobile friendly, light/dark theme, accessible
+- Fast, mobile friendly, light/dark theme, accessible
 - More to come...
 
 ![Screenshot of the Encounter Builder page of BYBE](https://raw.githubusercontent.com/TheAsel/BYBE-frontend/HEAD/.github/encounter-builder.png)

From edf343342fbc2e5f137a2b7e6ead2b94647d3246 Mon Sep 17 00:00:00 2001
From: TheAsel <theasel99@gmail.com>
Date: Tue, 31 Oct 2023 15:03:37 +0100
Subject: [PATCH 3/4] ui tweaks, updated tour

---
 .../CreaturesTable/EncounterBuilder.vue       | 11 +++---
 .../Encounter/CreaturesTable/PartyBuilder.vue | 36 ++++++++++++++-----
 src/pages/EncounterPage.vue                   |  9 ++---
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/components/Encounter/CreaturesTable/EncounterBuilder.vue b/src/components/Encounter/CreaturesTable/EncounterBuilder.vue
index 4c1d70b..4ae1405 100644
--- a/src/components/Encounter/CreaturesTable/EncounterBuilder.vue
+++ b/src/components/Encounter/CreaturesTable/EncounterBuilder.vue
@@ -219,19 +219,20 @@ defineExpose({ generateEncounter });
       </q-card-section>
       <q-separator />
       <q-card-actions>
-        <q-btn-group>
+        <q-btn-group flat>
           <q-btn
-            unelevated
+            flat
             label="Save changes"
-            type="submit"
+            type="button"
             class="full-width tw-text-blue-600 dark:tw-text-blue-400"
             v-close-popup
             @click="saveChanges"
           />
+          <q-separator vertical />
           <q-btn
-            unelevated
+            flat
             label="Generate Encounter"
-            type="submit"
+            type="button"
             class="full-width tw-text-blue-600 dark:tw-text-blue-400"
             v-close-popup
             @click="generateEncounter"
diff --git a/src/components/Encounter/CreaturesTable/PartyBuilder.vue b/src/components/Encounter/CreaturesTable/PartyBuilder.vue
index f8f4e2b..30f4d78 100644
--- a/src/components/Encounter/CreaturesTable/PartyBuilder.vue
+++ b/src/components/Encounter/CreaturesTable/PartyBuilder.vue
@@ -100,8 +100,8 @@ const saveChanges = () => {
   <q-dialog v-model="dialog" aria-label="Player builder">
     <q-card flat bordered>
       <q-card-section class="items-center">
-        <div class="row">
-          <div class="text-h6 tw-mr-4">Party Builder</div>
+        <div class="row tw-mb-2">
+          <div class="text-h6 tw-mr-4 tw-my-auto">Party Builder</div>
           <q-space />
           <q-btn
             :icon="biXLg"
@@ -162,12 +162,22 @@ const saveChanges = () => {
               </q-card-section>
 
               <q-card-actions align="center" class="text-primary">
-                <q-btn flat label="Cancel" @click="closeDialog" />
-                <q-btn flat label="Add party" @click="addParty" />
+                <q-btn
+                  flat
+                  label="Cancel"
+                  @click="closeDialog"
+                  class="tw-text-blue-600 dark:tw-text-blue-400"
+                />
+                <q-btn
+                  flat
+                  label="Add party"
+                  @click="addParty"
+                  class="tw-text-blue-600 dark:tw-text-blue-400"
+                />
               </q-card-actions>
             </q-card>
           </q-dialog>
-
+          <q-space />
           <q-btn
             class="tw-m-auto"
             :icon="biTrash"
@@ -189,8 +199,18 @@ const saveChanges = () => {
                 <div class="text-h6">Remove this party?</div>
               </q-card-section>
               <q-card-actions align="center" class="text-primary">
-                <q-btn flat label="Cancel" @click="closeDialog" />
-                <q-btn flat label="Remove" @click="removeParty" color="red" />
+                <q-btn
+                  flat
+                  label="Cancel"
+                  @click="closeDialog"
+                  class="tw-text-blue-600 dark:tw-text-blue-400"
+                />
+                <q-btn
+                  flat
+                  label="Remove"
+                  @click="removeParty"
+                  class="tw-text-red-600 dark:tw-text-red-400"
+                />
               </q-card-actions>
             </q-card>
           </q-dialog>
@@ -248,7 +268,7 @@ const saveChanges = () => {
         <q-btn
           unelevated
           label="Save changes"
-          type="submit"
+          type="button"
           class="full-width tw-text-blue-600 dark:tw-text-blue-400"
           v-close-popup
           @click="saveChanges"
diff --git a/src/pages/EncounterPage.vue b/src/pages/EncounterPage.vue
index 85bb40f..26d8925 100644
--- a/src/pages/EncounterPage.vue
+++ b/src/pages/EncounterPage.vue
@@ -142,7 +142,8 @@ const steps = [
   },
   {
     target: '#v-step-1',
-    content: 'You can change your party size and the level of the individual players here.',
+    content:
+      'Here you can change your party size and the level of the individual players. You can also add multiple parties and select the active one.',
     params: {
       placement: 'bottom'
     }
@@ -158,14 +159,14 @@ const steps = [
   {
     target: '#v-step-3',
     content:
-      'Clicking this button will generate a new random encounter, using the settings previously described.',
+      'Clicking this button will generate a new random encounter, based on the generator settings previously described and the currently active party.',
     params: {
       placement: 'bottom'
     }
   },
   {
     target: '#v-step-4',
-    content: 'From this dropdown you can select which colums to show and hide.',
+    content: 'From this dropdown you can select which colums of the table to show and hide.',
     params: {
       placement: 'bottom'
     }
@@ -180,7 +181,7 @@ const steps = [
   {
     target: '#v-step-6',
     content:
-      'This is the encounter list, where the creatures you added will be displayed. You can increase or decrease the number of creatures and change them to their Weak/Elite variant.',
+      'This is the encounter list, where the creatures you added will be displayed. You can increase or decrease the number of each creature and change them to their Weak/Elite variant.',
     params: {
       placement: 'auto'
     }

From 53a2a3955cd998e61c3d35d132332384e643ef10 Mon Sep 17 00:00:00 2001
From: TheAsel <theasel99@gmail.com>
Date: Tue, 31 Oct 2023 15:17:00 +0100
Subject: [PATCH 4/4] fixed typo in tour

---
 src/pages/EncounterPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/EncounterPage.vue b/src/pages/EncounterPage.vue
index 26d8925..05fe533 100644
--- a/src/pages/EncounterPage.vue
+++ b/src/pages/EncounterPage.vue
@@ -166,7 +166,7 @@ const steps = [
   },
   {
     target: '#v-step-4',
-    content: 'From this dropdown you can select which colums of the table to show and hide.',
+    content: 'From this dropdown you can select which columns of the table to show and hide.',
     params: {
       placement: 'bottom'
     }