From 1c92b2073a38bdc96e552bb1de2ebc1b5b1f0d72 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 26 Apr 2024 15:43:59 +0200
Subject: [PATCH 01/24] clone encounter

---
 src/views/UserContent/Encounters/index.vue | 73 +++++++++++++++++++++-
 1 file changed, 70 insertions(+), 3 deletions(-)

diff --git a/src/views/UserContent/Encounters/index.vue b/src/views/UserContent/Encounters/index.vue
index c4836f95..16e07ff6 100644
--- a/src/views/UserContent/Encounters/index.vue
+++ b/src/views/UserContent/Encounters/index.vue
@@ -142,15 +142,19 @@
 										<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
 									</router-link>
 									<a
-										class="btn btn-sm bg-neutral-5"
+										class="mr-1 btn btn-sm bg-neutral-5"
 										@click="deleteEncounter($event, props.key, props.row.name)"
 									>
 										<i aria-hidden="true" class="fas fa-trash-alt"></i>
 										<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
 									</a>
+									<a class="btn btn-sm bg-neutral-5" @click="dialogCloneEncounter(props.key)">
+										<i aria-hidden="true" class="fas fa-copy"></i>
+										<q-tooltip anchor="top middle" self="center middle"> Clone </q-tooltip>
+									</a>
 								</div>
 							</q-td>
-							</q-tr>
+						</q-tr>
 					</template>
 					<div slot="no-data" />
 				</q-table>
@@ -206,7 +210,10 @@
 											<i aria-hidden="true" class="fas fa-eye"></i>
 											<q-tooltip anchor="top middle" self="center middle"> View </q-tooltip>
 										</router-link>
-										<a class="btn btn-sm bg-neutral-5 ml-1" @click="reset(props.key, (hard = false))">
+										<a
+											class="btn btn-sm bg-neutral-5 ml-1"
+											@click="reset(props.key, (hard = false))"
+										>
 											<i aria-hidden="true" class="fas fa-trash-restore-alt"></i>
 											<q-tooltip anchor="top middle" self="center middle"> Unfinish </q-tooltip>
 										</a>
@@ -307,6 +314,39 @@
 				</q-form>
 			</div>
 		</q-dialog>
+
+		<!-- Clone encounter dialog -->
+		<q-dialog
+			v-if="
+				clone &&
+				(encounter_count < tier.benefits.encounters || tier.benefits.encounters == 'infinite')
+			"
+			v-model="clone"
+			square
+		>
+			<div>
+				<q-form @submit="cloneEncounter">
+					<hk-card header="Clone encounter" class="mb-0">
+						<div class="card-body">
+							<q-input
+								:dark="$store.getters.theme === 'dark'"
+								filled
+								square
+								label="Encounter title"
+								type="text"
+								autocomplete="off"
+								v-model="cloneEncounterData.name"
+								:rules="[(val) => (val && val.length > 0) || 'Enter a title']"
+							/>
+						</div>
+						<div slot="footer" class="card-footer d-flex justify-content-end">
+							<q-btn v-close-popup class="mr-1" no-caps type="cancel">Cancel</q-btn>
+							<q-btn color="primary" type="submit" no-caps label="Add encounter" />
+						</div>
+					</hk-card>
+				</q-form>
+			</div>
+		</q-dialog>
 	</div>
 	<hk-loader v-else name="encounters" />
 </template>
@@ -326,6 +366,12 @@ export default {
 			finished_fetched: false,
 			newEncounter: "",
 			add: false,
+			clone: false,
+			cloneEncounterData: {
+				name: undefined,
+				key: undefined,
+				ogEncounter: undefined,
+			},
 			currentPage: 1,
 			search: undefined,
 			columns: [
@@ -395,6 +441,7 @@ export default {
 	methods: {
 		...mapActions("encounters", [
 			"get_campaign_encounters",
+			"get_encounter",
 			"add_encounter",
 			"delete_encounter",
 			"delete_finished_encounters",
@@ -464,6 +511,26 @@ export default {
 				);
 			}
 		},
+		async dialogCloneEncounter(key) {
+			this.clone = true;
+			this.cloneEncounterData.key = key;
+			this.cloneEncounterData.ogEncounter = await this.get_encounter({
+				uid: this.user.uid,
+				campaignId: this.campaignId,
+				id: key,
+			});
+			this.cloneEncounterData.name = this.cloneEncounterData.ogEncounter.name;
+		},
+		async cloneEncounter() {
+			const encounter = this.cloneEncounterData.ogEncounter;
+			encounter.name = this.cloneEncounterData.name;
+			const new_id = await this.add_encounter({
+				campaignId: this.campaignId,
+				encounter,
+			});
+			await this.reset_encounter({ campaignId: this.campaignId, id: new_id });
+			this.clone = false;
+		},
 		async deleteFinishedEncounters() {
 			this.$snotify.error(
 				"Are you sure you want to delete all finished encounters?",

From b52ba511e24184415779c268e21d59e025c31a8a Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 26 Apr 2024 15:44:12 +0200
Subject: [PATCH 02/24] fix broken player view in finish encounter

---
 src/components/campaign/Players.vue | 38 ++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/campaign/Players.vue b/src/components/campaign/Players.vue
index 6423a1a5..343e6bac 100644
--- a/src/components/campaign/Players.vue
+++ b/src/components/campaign/Players.vue
@@ -35,7 +35,13 @@
 						<q-tooltip anchor="top middle" self="center middle">Manage Players</q-tooltip>
 					</button>
 					<button
-						v-if="tier.name !== 'Free' && Object.keys(sync_characters).length && Object.values(players).some(item => item.sync_character)"
+						v-if="
+							tier.name !== 'Free' &&
+							sync_characters &&
+							players &&
+							Object.keys(sync_characters).length &&
+							Object.values(players).some((item) => item.sync_character)
+						"
 						class="btn btn-sm bg-neutral-5 mr-1"
 						@click="syncAll"
 					>
@@ -337,7 +343,9 @@
 						<div class="col actions" :key="'actions-' + key" v-if="viewerIsUser">
 							<template v-if="tier.name !== 'Free' && extensionInstalled">
 								<button
-									v-if="players[key].sync_character && (players[key].sync_character in sync_characters)"
+									v-if="
+										players[key].sync_character && players[key].sync_character in sync_characters
+									"
 									class="btn btn-sm bg-neutral-5 mr-1"
 									@click="syncCharacter(key, players[key].sync_character)"
 								>
@@ -347,7 +355,7 @@
 											rotate: key in syncing,
 											green: syncing[key] === 'success',
 											red: syncing[key] === 'error',
-											orange: !playerEqualsLinkedCharacter(players[key])
+											orange: !playerEqualsLinkedCharacter(players[key]),
 										}"
 										aria-hidden="true"
 									/>
@@ -355,11 +363,7 @@
 										Update with Character Sync
 									</q-tooltip>
 								</button>
-								<button
-									v-else
-									class="btn btn-sm bg-neutral-5 mr-1"
-									@click="linkDialog(key)"
-								>
+								<button v-else class="btn btn-sm bg-neutral-5 mr-1" @click="linkDialog(key)">
 									<i class="fas fa-link" aria-hidden="true" />
 									<q-tooltip anchor="top middle" self="center middle">
 										Link Character to Sync with
@@ -416,7 +420,6 @@
 			<hk-link-character @link="linkCharacter" />
 		</q-dialog>
 
-
 		<q-dialog v-if="viewerIsUser && page !== 'user'" v-model="rest_dialog">
 			<hk-card :min-width="300">
 				<div slot="header" class="card-header">
@@ -460,7 +463,11 @@
 import { mapGetters, mapActions } from "vuex";
 import { experience } from "src/mixins/experience.js";
 import { currencyMixin } from "src/mixins/currency.js";
-import { extensionInstalled, comparePlayerToCharacter, getCharacterSyncCharacter } from "src/utils/generalFunctions";
+import {
+	extensionInstalled,
+	comparePlayerToCharacter,
+	getCharacterSyncCharacter,
+} from "src/utils/generalFunctions";
 
 export default {
 	name: "Players",
@@ -484,8 +491,8 @@ export default {
 		},
 		syncCharacters: {
 			type: Object,
-			default: () => {}
-		}
+			default: () => {},
+		},
 	},
 	mixins: [experience, currencyMixin],
 	data() {
@@ -534,7 +541,7 @@ export default {
 			sync_characters: this.syncCharacters,
 			link_character: undefined,
 			link_dialog: false,
-			extensionInstalled: undefined
+			extensionInstalled: undefined,
 		};
 	},
 	computed: {
@@ -700,7 +707,10 @@ export default {
 		},
 		async syncAll() {
 			for (const [key, player] of Object.entries(this.players)) {
-				if (player.sync_character && Object.keys(this.sync_characters).includes(player.sync_character)) {
+				if (
+					player.sync_character &&
+					Object.keys(this.sync_characters).includes(player.sync_character)
+				) {
 					await this.syncCharacter(key, player.sync_character);
 				}
 			}

From e882aa7377df6a052285b952d41ded9b46c0a0da Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 26 Apr 2024 15:50:58 +0200
Subject: [PATCH 03/24] last setdrawer

---
 src/components/combat/TargetItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/combat/TargetItem.vue b/src/components/combat/TargetItem.vue
index fb41cee3..1b330f7b 100644
--- a/src/components/combat/TargetItem.vue
+++ b/src/components/combat/TargetItem.vue
@@ -516,7 +516,7 @@ export default {
 			"display_maxHp",
 		]),
 		showCondition(key) {
-			this.setSlide({
+			this.setDrawer({
 				show: true,
 				type: "drawers/encounter/Condition",
 				data: {

From aa1fd1d1def5ea9fa73990c779bf6a0be45efdf8 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 26 Apr 2024 15:56:44 +0200
Subject: [PATCH 04/24] Clear conditions on reset

---
 src/store/modules/userContent/encounters.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/store/modules/userContent/encounters.js b/src/store/modules/userContent/encounters.js
index cbfeabdf..3869ca83 100644
--- a/src/store/modules/userContent/encounters.js
+++ b/src/store/modules/userContent/encounters.js
@@ -869,6 +869,7 @@ const encounter_actions = {
 						delete entity.meters;
 						delete entity.hidden;
 						delete entity.reminders;
+						delete entity.conditions;
 
 						if (entity.entityType === "npc") {
 							entity.curHp = entity.maxHp;

From 0401a9b32c1bf23a65dc9cdbdafffecd5dec1ca8 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 26 Apr 2024 15:56:56 +0200
Subject: [PATCH 05/24] correctly clone data from og encounter

---
 src/views/UserContent/Encounters/index.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/views/UserContent/Encounters/index.vue b/src/views/UserContent/Encounters/index.vue
index 16e07ff6..3dc1cde4 100644
--- a/src/views/UserContent/Encounters/index.vue
+++ b/src/views/UserContent/Encounters/index.vue
@@ -514,15 +514,17 @@ export default {
 		async dialogCloneEncounter(key) {
 			this.clone = true;
 			this.cloneEncounterData.key = key;
-			this.cloneEncounterData.ogEncounter = await this.get_encounter({
-				uid: this.user.uid,
-				campaignId: this.campaignId,
-				id: key,
-			});
-			this.cloneEncounterData.name = this.cloneEncounterData.ogEncounter.name;
+			this.cloneEncounterData.ogEncounter = structuredClone(
+				await this.get_encounter({
+					uid: this.user.uid,
+					campaignId: this.campaignId,
+					id: key,
+				})
+			);
+			this.cloneEncounterData.name = structuredClone(this.cloneEncounterData.ogEncounter.name);
 		},
 		async cloneEncounter() {
-			const encounter = this.cloneEncounterData.ogEncounter;
+			const encounter = structuredClone(this.cloneEncounterData.ogEncounter);
 			encounter.name = this.cloneEncounterData.name;
 			const new_id = await this.add_encounter({
 				campaignId: this.campaignId,
@@ -530,6 +532,11 @@ export default {
 			});
 			await this.reset_encounter({ campaignId: this.campaignId, id: new_id });
 			this.clone = false;
+			this.cloneEncounterData = {
+				name: undefined,
+				key: undefined,
+				ogEncounter: undefined,
+			};
 		},
 		async deleteFinishedEncounters() {
 			this.$snotify.error(

From 73d7ab2ba4e8315fcc8d05658aedb99dfb46f2e7 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 26 Apr 2024 16:10:00 +0200
Subject: [PATCH 06/24] clone finished encounters & move button

---
 src/views/UserContent/Encounters/index.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/views/UserContent/Encounters/index.vue b/src/views/UserContent/Encounters/index.vue
index 3dc1cde4..9372c73d 100644
--- a/src/views/UserContent/Encounters/index.vue
+++ b/src/views/UserContent/Encounters/index.vue
@@ -143,15 +143,19 @@
 									</router-link>
 									<a
 										class="mr-1 btn btn-sm bg-neutral-5"
+										v-if="!overencumbered"
+										@click="dialogCloneEncounter(props.key)"
+									>
+										<i aria-hidden="true" class="fas fa-copy"></i>
+										<q-tooltip anchor="top middle" self="center middle"> Clone </q-tooltip>
+									</a>
+									<a
+										class="btn btn-sm bg-neutral-5"
 										@click="deleteEncounter($event, props.key, props.row.name)"
 									>
 										<i aria-hidden="true" class="fas fa-trash-alt"></i>
 										<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
 									</a>
-									<a class="btn btn-sm bg-neutral-5" @click="dialogCloneEncounter(props.key)">
-										<i aria-hidden="true" class="fas fa-copy"></i>
-										<q-tooltip anchor="top middle" self="center middle"> Clone </q-tooltip>
-									</a>
 								</div>
 							</q-td>
 						</q-tr>
@@ -225,6 +229,14 @@
 											<i aria-hidden="true" class="fas fa-undo"></i>
 											<q-tooltip anchor="top middle" self="center middle"> Reset </q-tooltip>
 										</a>
+										<a
+											class="mr-1 btn btn-sm bg-neutral-5"
+											v-if="!overencumbered"
+											@click="dialogCloneEncounter(props.key)"
+										>
+											<i aria-hidden="true" class="fas fa-copy"></i>
+											<q-tooltip anchor="top middle" self="center middle"> Clone </q-tooltip>
+										</a>
 										<a
 											class="btn btn-sm bg-neutral-5"
 											@click="deleteEncounter($event, props.key, props.row.name)"

From c7219317279220c0e65be94099c34737795ccbad Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 26 Apr 2024 16:24:12 +0200
Subject: [PATCH 07/24] Select a beast to transform in

---
 src/components/CopyContent.vue             |  54 +--
 src/components/drawers/Transform.vue       | 244 ++++++++++----
 src/components/hk-components/hk-select.vue |   2 +-
 src/services/api/monsters.js               | 141 ++++----
 src/utils/generalFunctions.js              |  23 +-
 src/views/Compendium/Monsters.vue          | 361 +++++++++++----------
 6 files changed, 493 insertions(+), 332 deletions(-)

diff --git a/src/components/CopyContent.vue b/src/components/CopyContent.vue
index 224b1e8a..3e39733f 100644
--- a/src/components/CopyContent.vue
+++ b/src/components/CopyContent.vue
@@ -28,7 +28,12 @@
 			:error="!!noResult"
 			:error-message="noResult"
 		>
-			<button v-if="copy_resource === 'srd'" slot="before" class="btn btn" @click="show_filter = !show_filter">
+			<button
+				v-if="copy_resource === 'srd'"
+				slot="before"
+				class="btn btn"
+				@click="show_filter = !show_filter"
+			>
 				<q-icon name="fas fa-filter" size="xs" />
 			</button>
 			<button slot="append" class="btn btn-sm btn-clear" @click="search()">
@@ -38,10 +43,7 @@
 		<q-slide-transition v-if="copy_resource === 'srd'">
 			<div v-show="show_filter" class="filter">
 				<h3>Filter {{ type }}s</h3>
-				<hk-filter 
-					v-model="filter" 
-					:type="type"
-					@change="search()" />
+				<hk-filter v-model="filter" :type="type" @change="search()" />
 			</div>
 		</q-slide-transition>
 		<q-list :dark="$store.getters.theme === 'dark'">
@@ -71,14 +73,14 @@
 		</q-list>
 		<q-pagination
 			v-if="copy_resource === 'srd' && totalPages > 1"
-      v-model="page"
-      :max="totalPages"
+			v-model="page"
+			:max="totalPages"
 			:max-pages="5"
 			flat
 			direction-links
 			class="mt-3"
 			@input="fetchApiContent()"
-    />
+		/>
 	</div>
 </template>
 
@@ -233,26 +235,24 @@ export default {
 				data = this.fetch_api_spells;
 			}
 
-			await data(
-				{ 
-					pageNumber: this.page,
-					pageSize: this.pageSize,
-					query: { 
-						search: this.query, 
-						...this.filter 
-					} 
-				}).then((result) => {
-					if (result.meta.count === 0) {
-						this.noResult = 'Nothing found for "' + this.query + '"';
-						this.totalPages = 0;
-					} else {
-						this.noResult = "";
-						this.searchResults = result.results;
-						this.totalPages = Math.ceil(result.meta.count / this.pageSize);
-					}
+			await data({
+				pageNumber: this.page,
+				pageSize: this.pageSize,
+				query: {
+					search: this.query,
+					...this.filter,
+				},
+			}).then((result) => {
+				if (result.meta.count === 0) {
+					this.noResult = 'Nothing found for "' + this.query + '"';
+					this.totalPages = 0;
+				} else {
+					this.noResult = "";
+					this.searchResults = result.results;
+					this.totalPages = Math.ceil(result.meta.count / this.pageSize);
 				}
-			);
-	},
+			});
+		},
 
 		/**
 		 * Emit the selected result
diff --git a/src/components/drawers/Transform.vue b/src/components/drawers/Transform.vue
index 6e8c6224..8f82e49e 100644
--- a/src/components/drawers/Transform.vue
+++ b/src/components/drawers/Transform.vue
@@ -1,74 +1,134 @@
 <template>
-	<div class="pb-5">
-		<h2>
+	<div>
+		<h2 class="mb-1">
 			Transform <span class="blue">{{ entity.name }}</span>
 		</h2>
 		<button v-if="entity.transformed" @click="remove()" autofocus class="btn btn-block bg-red">
 			Remove transformation
 		</button>
-		<ValidationObserver v-else v-slot="{ handleSubmit }">
-			<q-form @submit="handleSubmit(edit)">
-				<div class="row q-col-gutter-md">
-					<div class="col">
-						<ValidationProvider
-							rules="between:1,99|required"
-							name="AC"
-							v-slot="{ errors, invalid, validated }"
-						>
-							<q-input
-								:dark="$store.getters.theme === 'dark'"
-								square
-								filled
-								label="Armor class"
-								autocomplete="off"
-								autofocus
-								type="number"
-								class="mb-2"
-								v-model="transAc"
-								min="1"
-								max="99"
-								:error="invalid && validated"
-								:error-message="errors[0]"
-							/>
-						</ValidationProvider>
-					</div>
+		<template v-else>
+			<small class="mb-3 d-block">
+				Transform the entity into another creature. You can use this for a druid's Wild Shape, or
+				for the Polymorph spell. Damage and healing is handled as the Player's Handbook describes it
+				should work for Wild Shape (phb 67).
+			</small>
+			<ValidationObserver v-slot="{ handleSubmit }">
+				<div class="mb-2">Manual transform</div>
+				<q-form @submit="handleSubmit(edit)">
+					<div class="row q-col-gutter-md">
+						<div class="col">
+							<ValidationProvider
+								rules="between:1,99|required"
+								name="AC"
+								v-slot="{ errors, invalid, validated }"
+							>
+								<q-input
+									:dark="$store.getters.theme === 'dark'"
+									square
+									filled
+									label="Armor class"
+									autocomplete="off"
+									autofocus
+									type="number"
+									class="mb-2"
+									v-model="transAc"
+									min="1"
+									max="99"
+									:error="invalid && validated"
+									:error-message="errors[0]"
+								/>
+							</ValidationProvider>
+						</div>
 
-					<div class="col">
-						<ValidationProvider
-							rules="between:1,9999|required"
-							name="HP"
-							v-slot="{ errors, invalid, validated }"
-						>
-							<q-input
-								:dark="$store.getters.theme === 'dark'"
-								square
-								filled
-								label="Hit points"
-								autocomplete="off"
-								type="number"
-								min="1"
-								max="9999"
-								v-model="transHp"
-								:error="invalid && validated"
-								:error-message="errors[0]"
-							/>
-						</ValidationProvider>
+						<div class="col">
+							<ValidationProvider
+								rules="between:1,9999|required"
+								name="HP"
+								v-slot="{ errors, invalid, validated }"
+							>
+								<q-input
+									:dark="$store.getters.theme === 'dark'"
+									square
+									filled
+									label="Hit points"
+									autocomplete="off"
+									type="number"
+									min="1"
+									max="9999"
+									v-model="transHp"
+									:error="invalid && validated"
+									:error-message="errors[0]"
+								/>
+							</ValidationProvider>
+						</div>
 					</div>
-				</div>
-				<q-btn no-caps label="Transform" class="full-width mb-3" color="primary" type="submit" />
+					<q-btn no-caps label="Transform" class="full-width mb-3" color="primary" type="submit" />
+				</q-form>
+			</ValidationObserver>
+
+			<div class="my-2">Select to transform</div>
+			<div class="d-flex justify-content-betweeen items-center gap-2 mb-2">
+				<hk-input
+					v-model="search"
+					:label="`Search ${types?.includes('Beast') ? 'beasts' : 'monsters'}`"
+					class="full-width"
+					clearable
+					@blur="updateFilter"
+					@keydown.enter="updateFilter"
+					@clear="updateFilter"
+				/>
+				<hk-select
+					v-model="cr_filter"
+					:options="crs"
+					class="full-width"
+					label="Challenge rating"
+					clearable
+					@input="updateFilter"
+				/>
+			</div>
+			<div class="mb-2 d-flex justify-content-between">
+				Select {{ types?.includes("Beast") ? "beast" : "monster" }}
+				<a v-if="types?.includes('Beast')" @click="clearTypes">Show all monsters</a>
+			</div>
+			<hk-loader v-if="loading" />
+			<q-list v-else :dark="$store.getters.theme === 'dark'">
+				<q-item v-for="(result, index) in beasts" :key="index" class="bg-neutral-8">
+					<q-item-section class="truncate">
+						{{ result.name.capitalizeEach() }}
+					</q-item-section>
+					<q-item-section class="text-right" avatar>
+						{{ displayCR(result.challenge_rating) }}
+					</q-item-section>
+					<q-item-section avatar>
+						<a class="btn btn-sm bg-neutral-5 ml-2" @click="transform(result.url)">
+							<i aria-hidden="true" class="fas fa-paw" />
+						</a>
+					</q-item-section>
+				</q-item>
+			</q-list>
+			<div v-if="!pagination.rowsNumber" class="red">
+				No {{ types?.includes("Beast") ? "beasts" : "monsters" }} found
+			</div>
 
-				<small>
-					Transform the entity into another creature. You can use this for a druid's Wild Shape, or
-					for the Polymorph spell. Damage and healing is handled as the Player's Handbook describes
-					it should work for Wild Shape (phb 67).
-				</small>
-			</q-form>
-		</ValidationObserver>
+			<q-pagination
+				v-if="!loading && pagination.rowsNumber > pagination.rowsPerPage"
+				class="mt-3"
+				v-model="pagination.page"
+				:max="Math.ceil(pagination.rowsNumber / pagination.rowsPerPage)"
+				:max-pages="5"
+				color="dark"
+				:direction-links="true"
+				:boundary-links="true"
+				@input="fetchMonsters"
+			/>
+		</template>
 	</div>
 </template>
 
 <script>
 import { mapActions } from "vuex";
+import { displayCR } from "src/utils/generalFunctions";
+import { range } from "lodash";
 
 export default {
 	name: "Transform",
@@ -79,12 +139,67 @@ export default {
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
-			transAc: "",
-			transHp: "",
+			transAc: null,
+			transHp: null,
+			beasts: [],
+			pagination: {
+				sortBy: "challenge_rating",
+				descending: false,
+				page: 1,
+				rowsPerPage: 15,
+				rowsNumber: 0,
+			},
+			cr_filter: null,
+			search: null,
+			types: ["Beast"],
+			displayCR,
+			loading: true,
 		};
 	},
+	computed: {
+		crs() {
+			const cr = [0, 0.125, 0.25, 0.5];
+			const max = this.types?.includes("Beast") ? 9 : 31;
+			return [...cr, ...range(1, max)];
+		},
+		query() {
+			return {
+				search: this.search,
+				types: this.types,
+				challenge_ratings:
+					this.cr_filter !== null ? { min: this.cr_filter, max: this.cr_filter } : null,
+			};
+		},
+	},
 	methods: {
 		...mapActions(["setDrawer", "transform_entity"]),
+		...mapActions("api_monsters", ["fetch_monsters", "fetch_monster"]),
+		async fetchMonsters() {
+			await this.fetch_monsters({
+				pageNumber: this.pagination.page,
+				pageSize: this.pagination.rowsPerPage,
+				query: this.query,
+				fields: ["name", "challenge_rating", "url"],
+				sortBy: this.pagination.sortBy,
+				descending: this.pagination.descending,
+			}).then((result) => {
+				this.$set(this.pagination, "rowsNumber", result.meta.count);
+				this.beasts = result.results;
+				this.loading = false;
+			});
+		},
+		async transform(url) {
+			const beast = await this.fetch_monster(url);
+			this.transform_entity({
+				key: this.entity.key,
+				entity: {
+					ac: beast.armor_class,
+					maxHp: beast.hit_points,
+					curHp: beast.hit_points,
+				},
+			});
+			this.setDrawer(false);
+		},
 		edit() {
 			let transform = {
 				ac: parseInt(this.transAc),
@@ -105,6 +220,17 @@ export default {
 			});
 			this.entity.transformed = false;
 		},
+		clearTypes() {
+			this.types = [];
+			this.updateFilter();
+		},
+		updateFilter() {
+			this.pagination.page = 1;
+			this.fetchMonsters();
+		},
+	},
+	async mounted() {
+		await this.fetchMonsters();
 	},
 };
 </script>
diff --git a/src/components/hk-components/hk-select.vue b/src/components/hk-components/hk-select.vue
index 2fde892e..4777775e 100644
--- a/src/components/hk-components/hk-select.vue
+++ b/src/components/hk-components/hk-select.vue
@@ -26,7 +26,7 @@ export default {
 	name: "hk-select",
 	props: {
 		value: {
-			type: [String, Array],
+			type: [String, Array, Number],
 		},
 		filled: {
 			type: Boolean,
diff --git a/src/services/api/monsters.js b/src/services/api/monsters.js
index 932ffb23..e13513ff 100644
--- a/src/services/api/monsters.js
+++ b/src/services/api/monsters.js
@@ -4,72 +4,83 @@ import { range } from "lodash";
 const MONSTERS_REF = "/monsters";
 
 export class monsterServices {
-  constructor() {
-    this.HK = axios.create({
-      baseURL: process.env.VUE_APP_HK_API_ROOT
-    });
-  }
+	constructor() {
+		this.HK = axios.create({
+			baseURL: process.env.VUE_APP_HK_API_ROOT,
+		});
+	}
 
-  async getMonsters(query, pageNumber = 1, pageSize = 15, fields=["ALL"], sortBy = "name", descending=false) {
-    const skip = (pageNumber - 1)*pageSize;
-    const fieldsString = fields.join(" ");
-    let params = `?skip=${skip}&limit=${pageSize}&fields=${fieldsString}`;
+	async getMonsters(
+		query,
+		pageNumber = 1,
+		pageSize = 15,
+		fields = ["ALL"],
+		sortBy = "name",
+		descending = false
+	) {
+		const skip = (pageNumber - 1) * pageSize;
+		const fieldsString = fields.join(" ");
+		let params = `?skip=${skip}&limit=${pageSize}&fields=${fieldsString}`;
 
-    if(sortBy) {
-      params += `&sort=${sortBy}${descending ? ":desc" : ""}`;
-    }
-    
-    if(query) {
-      const queryParams = [];
-      
-      if(query.search) {
-        queryParams.push(`name=${query.search}`);
-      }
-      if(query.types && query.types.length) {
-        for(const type of query.types) {
-          queryParams.push(`type[]=${type}`);
-        }
-      }
-      if(query.sizes && query.sizes.length) {
-        for(const size of query.sizes) {
-          queryParams.push(`size[]=${size}`);
-        }
-      }
-      if(query.environments && query.environments.length) {
-        for(const environment of query.environments) {
-          queryParams.push(`environment[]=${environment}`);
-        }
-      }
-      if(query.alignments && query.alignments.length) {
-        for(const alignment of query.alignments) {
-          queryParams.push(`alignment[]=${alignment}`);
-        }
-      }
-      if(query.challenge_ratings) {
-        let challenge_ratings = range(query.challenge_ratings.min, query.challenge_ratings.max+1);
-        if(query.challenge_ratings.min === 0) {
-          challenge_ratings = challenge_ratings.concat([0.125, 0.25, 0.5]);
-        }
-        for(const cr of challenge_ratings) {
-          queryParams.push(`challenge_rating[]=${cr}`);
-        }
-      }
+		if (sortBy) {
+			params += `&sort=${sortBy}${descending ? ":desc" : ""}`;
+		}
 
-      params += `&${queryParams.join("&")}`;
-    }
-    
-    return this.HK.get(MONSTERS_REF + params).then((response) => {
-      return response.data;
-    }).catch((error) => {
-      throw error;
-    });
-  }
+		if (query) {
+			const queryParams = [];
 
-  async getMonster(id) {
-    return this.HK.get(`${MONSTERS_REF}/${id}`).then((response) => {
-      return response.data;
-    }).catch((error) => {
-      throw error;
-    });
-  }
-}
\ No newline at end of file
+			if (query.search) {
+				queryParams.push(`name=${query.search}`);
+			}
+			if (query.types && query.types.length) {
+				for (const type of query.types) {
+					queryParams.push(`type[]=${type}`);
+				}
+			}
+			if (query.sizes && query.sizes.length) {
+				for (const size of query.sizes) {
+					queryParams.push(`size[]=${size}`);
+				}
+			}
+			if (query.environments && query.environments.length) {
+				for (const environment of query.environments) {
+					queryParams.push(`environment[]=${environment}`);
+				}
+			}
+			if (query.alignments && query.alignments.length) {
+				for (const alignment of query.alignments) {
+					queryParams.push(`alignment[]=${alignment}`);
+				}
+			}
+			if (query.challenge_ratings) {
+				let challenge_ratings = range(query.challenge_ratings.min, query.challenge_ratings.max + 1);
+				if (query.challenge_ratings.min === 0) {
+					challenge_ratings = challenge_ratings.concat([0.125, 0.25, 0.5]);
+				}
+				for (const cr of challenge_ratings) {
+					queryParams.push(`challenge_rating[]=${cr}`);
+				}
+			}
+
+			params += `&${queryParams.join("&")}`;
+		}
+
+		return this.HK.get(MONSTERS_REF + params)
+			.then((response) => {
+				return response.data;
+			})
+			.catch((error) => {
+				throw error;
+			});
+	}
+
+	async getMonster(id) {
+		return this.HK.get(`${MONSTERS_REF}/${id}`)
+			.then((response) => {
+				return response.data;
+			})
+			.catch((error) => {
+				throw error;
+			});
+	}
+}
diff --git a/src/utils/generalFunctions.js b/src/utils/generalFunctions.js
index e3bb4bac..500f83f8 100644
--- a/src/utils/generalFunctions.js
+++ b/src/utils/generalFunctions.js
@@ -50,6 +50,10 @@ export function calc_skill_mod(
 	return parseInt(mod) + parseInt(bonus);
 }
 
+export function displayCR(cr) {
+	return cr == 0.125 ? "1/8" : cr == 0.25 ? "1/4" : cr == 0.5 ? "1/2" : cr;
+}
+
 /**
  * Downloads a JSON file
  *
@@ -189,15 +193,18 @@ export function comparePlayerToCharacter(sync_character, player) {
  * @param {string} url
  */
 export async function extensionInstalled() {
-
 	const sendMessage = new Promise((resolve) => {
-		chrome?.runtime?.sendMessage(character_sync_id, { request_content: ["version"] }, (response) => {
-			if (response) {
-				resolve(response.version);
-			} else {
-				return undefined;
+		chrome?.runtime?.sendMessage(
+			character_sync_id,
+			{ request_content: ["version"] },
+			(response) => {
+				if (response) {
+					resolve(response.version);
+				} else {
+					return undefined;
+				}
 			}
-		});
+		);
 	});
 	const timeout = new Promise((resolve) => {
 		setTimeout(resolve, 100, undefined);
@@ -269,7 +276,7 @@ export function urlType(url) {
 }
 
 export function generateYoutubeEmbedUrl(url) {
-	const regex = /(v=|embed\/|\.be\/|v\/)(?<id>[^&|/?]{11})/i
+	const regex = /(v=|embed\/|\.be\/|v\/)(?<id>[^&|/?]{11})/i;
 	const { id } = regex.exec(url).groups;
 
 	return `https://www.youtube-nocookie.com/embed/${id}`;
diff --git a/src/views/Compendium/Monsters.vue b/src/views/Compendium/Monsters.vue
index 7e8b8124..e5212e57 100644
--- a/src/views/Compendium/Monsters.vue
+++ b/src/views/Compendium/Monsters.vue
@@ -3,16 +3,24 @@
 		<div slot="header" class="card-header">
 			<h1><i aria-hidden="true" class="fas fa-dragon"></i> Monsters</h1>
 			<span class="neutral-3">
-				Resource <a class="btn btn-sm btn-clear" href="https://media.wizards.com/2016/downloads/DND/SRD-OGL_V5.1.pdf" target="_blank" rel="noopener">SRD 5.1</a>
+				Resource
+				<a
+					class="btn btn-sm btn-clear"
+					href="https://media.wizards.com/2016/downloads/DND/SRD-OGL_V5.1.pdf"
+					target="_blank"
+					rel="noopener"
+					>SRD 5.1</a
+				>
 			</span>
 		</div>
 		<div class="card-body">
-			<q-input 
-				:dark="$store.getters.theme !== 'light'" 
+			<q-input
+				:dark="$store.getters.theme !== 'light'"
 				v-model="search"
-				borderless 
-				filled square
-				debounce="300" 
+				borderless
+				filled
+				square
+				debounce="300"
 				clearable
 				placeholder="Search"
 				@keyup.enter="filterMonsters"
@@ -24,22 +32,27 @@
 				<q-btn slot="after" color="primary" no-caps @click="filter_dialog = true">
 					Filter
 					<i class="fas fa-filter ml-2" aria-hidden="true" />
-					<q-badge v-if="Object.keys(filter).length" floating rounded color="red" :label="Object.keys(filter).length" />
+					<q-badge
+						v-if="Object.keys(filter).length"
+						floating
+						rounded
+						color="red"
+						:label="Object.keys(filter).length"
+					/>
 				</q-btn>
 			</q-input>
 			<p v-if="!loading && pagination.rowsNumber === 0" class="red">
-				Nothing found 
-				<template v-if="query.search">
-					for "{{ query.search }}"
-				</template>
+				Nothing found
+				<template v-if="query.search"> for "{{ query.search }}" </template>
 				<template v-if="filter.types?.length">
-					with a type of {{ filter.types.join(" or ")}}
+					with a type of {{ filter.types.join(" or ") }}
 				</template>
 				<template v-if="filter.sizes?.length">
-					{{ filter.types?.length ? "and" : "with" }} a size {{ filter.sizes.join(" or ")}}
+					{{ filter.types?.length ? "and" : "with" }} a size {{ filter.sizes.join(" or ") }}
 				</template>
 				<template v-if="filter.challenge_ratings?.min > 0 || filter.challenge_ratings?.max < 30">
-					{{ filter.types?.length || filter.sizes?.length ? "and" : "with" }} a CR between {{ filter.challenge_ratings.min }} and {{  filter.challenge_ratings.max }}
+					{{ filter.types?.length || filter.sizes?.length ? "and" : "with" }} a CR between
+					{{ filter.challenge_ratings.min }} and {{ filter.challenge_ratings.max }}
 				</template>
 			</p>
 			<q-table
@@ -58,7 +71,7 @@
 			>
 				<div slot="no-data" />
 				<hk-loader slot="loading" name="monsters" />
-				
+
 				<template v-slot:header="props">
 					<q-tr :props="props">
 						<q-th
@@ -97,8 +110,12 @@
 							<template v-else>{{ col.value }}</template>
 						</q-td>
 						<q-td auto-width>
-							<a  @click="props.expand = !props.expand" class="neutral-2">
-								<i aria-hidden="true" class="fas" :class="props.expand ? 'fa-chevron-up' : 'fa-chevron-down'" />
+							<a @click="props.expand = !props.expand" class="neutral-2">
+								<i
+									aria-hidden="true"
+									class="fas"
+									:class="props.expand ? 'fa-chevron-up' : 'fa-chevron-down'"
+								/>
 							</a>
 						</q-td>
 					</q-tr>
@@ -133,164 +150,164 @@
 </template>
 
 <script>
-	import ViewMonster from "src/components/compendium/Monster.vue";
-	import { monsterMixin } from "src/mixins/monster.js";
-	import { mapActions } from "vuex";
-	import _ from  "lodash";
+import ViewMonster from "src/components/compendium/Monster.vue";
+import { monsterMixin } from "src/mixins/monster.js";
+import { mapActions } from "vuex";
+import { displayCR } from "src/utils/generalFunctions";
+import _ from "lodash";
 
-	export default {
-		name: "Monsters",
-		mixins: [monsterMixin],
-		components: {
-			ViewMonster
-		},
-		data() {
-			return {
-				monsters: [],
-				filter_dialog: false,
-				filter: {},
-				search: "",
-				query: null,
-				pagination: {
-					sortBy: "name",
-					descending: false,
-					page: 1,
-					rowsPerPage: 15,
-					rowsNumber: 0
+export default {
+	name: "Monsters",
+	mixins: [monsterMixin],
+	components: {
+		ViewMonster,
+	},
+	data() {
+		return {
+			monsters: [],
+			filter_dialog: false,
+			filter: {},
+			search: "",
+			query: null,
+			pagination: {
+				sortBy: "name",
+				descending: false,
+				page: 1,
+				rowsPerPage: 15,
+				rowsNumber: 0,
+			},
+			columns: [
+				{
+					name: "challenge_rating",
+					label: "CR",
+					field: "challenge_rating",
+					align: "left",
+					headerStyle: "min-width: 70px;",
+					style: "font-weight: bold;",
+					sortable: true,
+					format: (val) => this.cr_label(val),
+				},
+				{
+					name: "name",
+					label: "Name",
+					field: "name",
+					sortable: true,
+					align: "left",
+					classes: "truncate-cell",
+					format: (val) => val.capitalizeEach(),
+				},
+				{
+					name: "type",
+					label: "Type",
+					field: "type",
+					align: "left",
+					sortable: true,
 				},
-				columns: [
-					{
-						name: "challenge_rating",
-						label: "CR",
-						field: "challenge_rating",
-						align: "left",
-						headerStyle: "min-width: 70px;",
-						style: "font-weight: bold;",
-						sortable: true,
-						format: val => this.cr_label(val)
-					},
-					{
-						name: "name",
-						label: "Name",
-						field: "name",
-						sortable: true,
-						align: "left",
-						classes: "truncate-cell",
-						format: val => val.capitalizeEach()
-					},
-					{
-						name: "type",
-						label: "Type",
-						field: "type",
-						align: "left",
-						sortable: true
-					},
-					{
-						name: "size",
-						label: "Size",
-						field: "size",
-						align: "left",
-						headerStyle: "min-width: 80px;",
-						sortable: true
-					},
-					{
-						name: "alignment",
-						label: "Alignment",
-						field: "alignment",
-						style: "white-space: nowrap;",
-						headerStyle: "min-width: 115;",
-						align: "left",
-						sortable: true
-					},
-					{
-						name: "environment",
-						label: "Environment",
-						field: "environment",
-						style: "white-space: nowrap;",
-						align: "left",
-					}
-				],
-				loading: true,
-				width: 0,
+				{
+					name: "size",
+					label: "Size",
+					field: "size",
+					align: "left",
+					headerStyle: "min-width: 80px;",
+					sortable: true,
+				},
+				{
+					name: "alignment",
+					label: "Alignment",
+					field: "alignment",
+					style: "white-space: nowrap;",
+					headerStyle: "min-width: 115;",
+					align: "left",
+					sortable: true,
+				},
+				{
+					name: "environment",
+					label: "Environment",
+					field: "environment",
+					style: "white-space: nowrap;",
+					align: "left",
+				},
+			],
+			loading: true,
+			width: 0,
+			cr_label: displayCR,
+		};
+	},
+	computed: {
+		challenge_ratings() {
+			let crs = [];
+			for (const cr in this.monster_challenge_rating) {
+				crs.push(Number(cr));
 			}
+			return crs.sort(function (a, b) {
+				return a - b;
+			});
 		},
-		computed: {
-			challenge_ratings() {
-				let crs = [];
-				for(const cr in this.monster_challenge_rating) {
-					crs.push(Number(cr));
-				}
-				return crs.sort(function(a, b){return a-b});
-			},
-			type_options() {
-				return this.monster_types.map(type => { return { label: type, value: type } });
-			},
-			visibleColumns() {
-				switch (true) {
-					case this.width > 700:
-						return  ["challenge_rating", "name", "type", "size", "alignment", "environment"];
-					case this.width > 620:
-						return  ["challenge_rating", "name", "type", "size", "alignment"];
-					case this.width > 500:
-						return  ["challenge_rating", "name", "type", "size"];
-					case this.width > 450:
-						return  ["challenge_rating", "name", "type",];
-					default:
-						return ["challenge_rating", "name"];
-				}
-			},
+		type_options() {
+			return this.monster_types.map((type) => {
+				return { label: type, value: type };
+			});
 		},
-		methods: {
-			...mapActions("api_monsters", ["fetch_monsters"]),
-			cr_label(val) {
-				return (val == 0.125) ? "1/8" : 
-					(val == 0.25) ? "1/4" :
-					(val == 0.5) ? "1/2" :
-					val;
-			},
-			setFilter() {
-				this.filter_dialog = false;
-				this.filterMonsters();
-			},
-			clearFilter() {
-				this.filter_dialog = false;
-				this.$set(this, "filter", {});
-				this.filterMonsters();
-			},
-			filterMonsters() {
-				this.loading = true;
-				this.monsters = [];
-				this.pagination.page = 1;
-				this.query = {
-					search: this.search,
-					...this.filter
-				}
-				this.fetchMonsters();
-			},
-			request(req) {
-				this.pagination = req.pagination;
-				this.fetchMonsters();		
-			},
-			async fetchMonsters() {
-				await this.fetch_monsters({
-					pageNumber: this.pagination.page,
-					pageSize: this.pagination.rowsPerPage,
-					query: this.query,
-					fields: ["name", "type", "challenge_rating", "size", "environment", "alignment", "url"],
-					sortBy: this.pagination.sortBy,
-					descending: this.pagination.descending
-				}).then(result => {
-					this.pagination.rowsNumber = result.meta.count;
-					this.monsters = result.results;
-					this.loading = false;
-				});
-			},
-			setSize(e) {
-				this.width = e.width;
-			},
+		visibleColumns() {
+			switch (true) {
+				case this.width > 700:
+					return ["challenge_rating", "name", "type", "size", "alignment", "environment"];
+				case this.width > 620:
+					return ["challenge_rating", "name", "type", "size", "alignment"];
+				case this.width > 500:
+					return ["challenge_rating", "name", "type", "size"];
+				case this.width > 450:
+					return ["challenge_rating", "name", "type"];
+				default:
+					return ["challenge_rating", "name"];
+			}
+		},
+	},
+	methods: {
+		...mapActions("api_monsters", ["fetch_monsters"]),
+		setFilter() {
+			this.filter_dialog = false;
+			this.filterMonsters();
+		},
+		clearFilter() {
+			this.filter_dialog = false;
+			this.$set(this, "filter", {});
+			this.filterMonsters();
+		},
+		filterMonsters() {
+			this.loading = true;
+			this.monsters = [];
+			this.pagination.page = 1;
+			this.query = {
+				search: this.search,
+				...this.filter,
+			};
+			this.fetchMonsters();
+		},
+		request(req) {
+			this.pagination = req.pagination;
+			this.fetchMonsters();
+		},
+		async fetchMonsters() {
+			await this.fetch_monsters({
+				pageNumber: this.pagination.page,
+				pageSize: this.pagination.rowsPerPage,
+				query: this.query,
+				fields: ["name", "type", "challenge_rating", "size", "environment", "alignment", "url"],
+				sortBy: this.pagination.sortBy,
+				descending: this.pagination.descending,
+			}).then((result) => {
+				this.pagination.rowsNumber = result.meta.count;
+				this.monsters = result.results;
+				this.loading = false;
+			});
+		},
+		setSize(e) {
+			this.width = e.width;
 		},
-		async mounted() {
-			await this.fetchMonsters();
-		}
-	}
-</script>
\ No newline at end of file
+	},
+	async mounted() {
+		await this.fetchMonsters();
+	},
+};
+</script>

From 65fe029499ca86b8deff45f86480a0bdfa815e4f Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 26 Apr 2024 17:05:33 +0200
Subject: [PATCH 08/24] Transform from DM Screen

---
 src/boot/hk-components.js                     |   2 +
 src/components/drawers/Transform.vue          | 145 ++----------------
 src/components/drawers/party/Transform.vue    | 119 ++++++++------
 .../hk-components/hk-transform-select.vue     | 136 ++++++++++++++++
 4 files changed, 220 insertions(+), 182 deletions(-)
 create mode 100644 src/components/hk-components/hk-transform-select.vue

diff --git a/src/boot/hk-components.js b/src/boot/hk-components.js
index 24640ea8..0acf3985 100644
--- a/src/boot/hk-components.js
+++ b/src/boot/hk-components.js
@@ -25,6 +25,7 @@ import HkActionRollsTable from "../components/hk-components/hk-action-rolls/hk-a
 import HkActionRollScaling from "../components/hk-components/hk-action-rolls/hk-action-roll-scaling";
 import HkPane from "../components/hk-components/hk-pane";
 import HkFilter from "../components/hk-components/hk-filter";
+import HkTransformSelect from "../components/hk-components/hk-transform-select";
 
 export default async ({ Vue }) => {
 	Vue.component("hk-input", HkInput);
@@ -54,4 +55,5 @@ export default async ({ Vue }) => {
 	Vue.component("hk-action-roll-scaling", HkActionRollScaling);
 	Vue.component("hk-pane", HkPane);
 	Vue.component("hk-filter", HkFilter);
+	Vue.component("hk-transform-select", HkTransformSelect);
 };
diff --git a/src/components/drawers/Transform.vue b/src/components/drawers/Transform.vue
index 8f82e49e..2902617b 100644
--- a/src/components/drawers/Transform.vue
+++ b/src/components/drawers/Transform.vue
@@ -14,7 +14,7 @@
 			</small>
 			<ValidationObserver v-slot="{ handleSubmit }">
 				<div class="mb-2">Manual transform</div>
-				<q-form @submit="handleSubmit(edit)">
+				<q-form @submit="handleSubmit(edit())">
 					<div class="row q-col-gutter-md">
 						<div class="col">
 							<ValidationProvider
@@ -66,69 +66,13 @@
 				</q-form>
 			</ValidationObserver>
 
-			<div class="my-2">Select to transform</div>
-			<div class="d-flex justify-content-betweeen items-center gap-2 mb-2">
-				<hk-input
-					v-model="search"
-					:label="`Search ${types?.includes('Beast') ? 'beasts' : 'monsters'}`"
-					class="full-width"
-					clearable
-					@blur="updateFilter"
-					@keydown.enter="updateFilter"
-					@clear="updateFilter"
-				/>
-				<hk-select
-					v-model="cr_filter"
-					:options="crs"
-					class="full-width"
-					label="Challenge rating"
-					clearable
-					@input="updateFilter"
-				/>
-			</div>
-			<div class="mb-2 d-flex justify-content-between">
-				Select {{ types?.includes("Beast") ? "beast" : "monster" }}
-				<a v-if="types?.includes('Beast')" @click="clearTypes">Show all monsters</a>
-			</div>
-			<hk-loader v-if="loading" />
-			<q-list v-else :dark="$store.getters.theme === 'dark'">
-				<q-item v-for="(result, index) in beasts" :key="index" class="bg-neutral-8">
-					<q-item-section class="truncate">
-						{{ result.name.capitalizeEach() }}
-					</q-item-section>
-					<q-item-section class="text-right" avatar>
-						{{ displayCR(result.challenge_rating) }}
-					</q-item-section>
-					<q-item-section avatar>
-						<a class="btn btn-sm bg-neutral-5 ml-2" @click="transform(result.url)">
-							<i aria-hidden="true" class="fas fa-paw" />
-						</a>
-					</q-item-section>
-				</q-item>
-			</q-list>
-			<div v-if="!pagination.rowsNumber" class="red">
-				No {{ types?.includes("Beast") ? "beasts" : "monsters" }} found
-			</div>
-
-			<q-pagination
-				v-if="!loading && pagination.rowsNumber > pagination.rowsPerPage"
-				class="mt-3"
-				v-model="pagination.page"
-				:max="Math.ceil(pagination.rowsNumber / pagination.rowsPerPage)"
-				:max-pages="5"
-				color="dark"
-				:direction-links="true"
-				:boundary-links="true"
-				@input="fetchMonsters"
-			/>
+			<hk-transform-select @select="edit" />
 		</template>
 	</div>
 </template>
 
 <script>
 import { mapActions } from "vuex";
-import { displayCR } from "src/utils/generalFunctions";
-import { range } from "lodash";
 
 export default {
 	name: "Transform",
@@ -141,72 +85,22 @@ export default {
 			encounterId: this.$route.params.encid,
 			transAc: null,
 			transHp: null,
-			beasts: [],
-			pagination: {
-				sortBy: "challenge_rating",
-				descending: false,
-				page: 1,
-				rowsPerPage: 15,
-				rowsNumber: 0,
-			},
-			cr_filter: null,
-			search: null,
-			types: ["Beast"],
-			displayCR,
-			loading: true,
 		};
 	},
-	computed: {
-		crs() {
-			const cr = [0, 0.125, 0.25, 0.5];
-			const max = this.types?.includes("Beast") ? 9 : 31;
-			return [...cr, ...range(1, max)];
-		},
-		query() {
-			return {
-				search: this.search,
-				types: this.types,
-				challenge_ratings:
-					this.cr_filter !== null ? { min: this.cr_filter, max: this.cr_filter } : null,
-			};
-		},
-	},
 	methods: {
 		...mapActions(["setDrawer", "transform_entity"]),
-		...mapActions("api_monsters", ["fetch_monsters", "fetch_monster"]),
-		async fetchMonsters() {
-			await this.fetch_monsters({
-				pageNumber: this.pagination.page,
-				pageSize: this.pagination.rowsPerPage,
-				query: this.query,
-				fields: ["name", "challenge_rating", "url"],
-				sortBy: this.pagination.sortBy,
-				descending: this.pagination.descending,
-			}).then((result) => {
-				this.$set(this.pagination, "rowsNumber", result.meta.count);
-				this.beasts = result.results;
-				this.loading = false;
-			});
-		},
-		async transform(url) {
-			const beast = await this.fetch_monster(url);
-			this.transform_entity({
-				key: this.entity.key,
-				entity: {
-					ac: beast.armor_class,
-					maxHp: beast.hit_points,
-					curHp: beast.hit_points,
-				},
-			});
-			this.setDrawer(false);
-		},
-		edit() {
-			let transform = {
-				ac: parseInt(this.transAc),
-				maxHp: parseInt(this.transHp),
-				curHp: parseInt(this.transHp),
-			};
-
+		edit(beast) {
+			const transform = beast
+				? {
+						ac: beast.armor_class,
+						maxHp: beast.hit_points,
+						curHp: beast.hit_points,
+				  }
+				: {
+						ac: parseInt(this.transAc),
+						maxHp: parseInt(this.transHp),
+						curHp: parseInt(this.transHp),
+				  };
 			this.transform_entity({
 				key: this.entity.key,
 				entity: transform,
@@ -220,17 +114,6 @@ export default {
 			});
 			this.entity.transformed = false;
 		},
-		clearTypes() {
-			this.types = [];
-			this.updateFilter();
-		},
-		updateFilter() {
-			this.pagination.page = 1;
-			this.fetchMonsters();
-		},
-	},
-	async mounted() {
-		await this.fetchMonsters();
 	},
 };
 </script>
diff --git a/src/components/drawers/party/Transform.vue b/src/components/drawers/party/Transform.vue
index cd43f976..12ef419d 100644
--- a/src/components/drawers/party/Transform.vue
+++ b/src/components/drawers/party/Transform.vue
@@ -1,17 +1,28 @@
 <template>
 	<div class="pb-5">
-		<h2>Transform</h2>
-		
+		<h2 class="mb-2">Transform</h2>
+		<small class="d-block mb-2">
+			Transform the entity into another creature. You can use this for a druid's Wild Shape, or for
+			the Polymorph spell. Damage and healing is handled as the Player's Handbook describes it
+			should work for Wild Shape (phb 67).
+		</small>
+
 		<ValidationObserver v-slot="{ handleSubmit }">
-			<q-form @submit="handleSubmit(edit)">
+			<q-form @submit="handleSubmit(edit())">
 				<div class="row q-col-gutter-md mb-2">
 					<div class="col">
-						<ValidationProvider rules="between:1,99|required" name="AC" v-slot="{ errors, invalid, validated }">
-							<q-input 
-								:dark="$store.getters.theme === 'dark'" filled square
+						<ValidationProvider
+							rules="between:1,99|required"
+							name="AC"
+							v-slot="{ errors, invalid, validated }"
+						>
+							<q-input
+								:dark="$store.getters.theme === 'dark'"
+								filled
+								square
 								label="Armor class"
 								autocomplete="off"
-								type="number" 
+								type="number"
 								min="1"
 								max="99"
 								v-model="transAc"
@@ -20,11 +31,17 @@
 							/>
 						</ValidationProvider>
 					</div>
-					
+
 					<div class="col">
-						<ValidationProvider rules="between:1,9999|required" name="HP" v-slot="{ errors, invalid, validated }">
-							<q-input 
-								:dark="$store.getters.theme === 'dark'" filled square
+						<ValidationProvider
+							rules="between:1,9999|required"
+							name="HP"
+							v-slot="{ errors, invalid, validated }"
+						>
+							<q-input
+								:dark="$store.getters.theme === 'dark'"
+								filled
+								square
 								label="Hit points"
 								autocomplete="off"
 								type="number"
@@ -39,51 +56,51 @@
 				</div>
 				<q-btn no-caps label="Save" class="full-width" color="primary" type="submit" />
 			</q-form>
+
+			<hk-transform-select @select="edit" />
 		</ValidationObserver>
-		<div class="mt-3">
-			<small>
-				Transform the entity into another creature. You can use this for a druid's Wild Shape, or for the Polymorph spell. 
-				Damage and healing is handled as the Player's Handbook describes it should work for Wild Shape (phb 67).
-			</small>
-		</div>
 	</div>
 </template>
 
 <script>
-	import { mapActions } from "vuex";
+import { mapActions } from "vuex";
 
-	export default {
-		name: 'Transform',
-		props: [
-			'data',
-		],
-		data() {
-			return {
-				userId: this.$store.getters.user.uid,
-				campaignId: this.$route.params.campid,
-				entityKey: this.data,
-				transHp: undefined,
-				transAc: undefined
-			}
+export default {
+	name: "Transform",
+	props: ["data"],
+	data() {
+		return {
+			userId: this.$store.getters.user.uid,
+			campaignId: this.$route.params.campid,
+			entityKey: this.data,
+			transHp: undefined,
+			transAc: undefined,
+		};
+	},
+	methods: {
+		...mapActions("campaigns", ["update_campaign_entity"]),
+		edit(beast) {
+			const transform = beast
+				? {
+						ac: beast.armor_class,
+						maxHp: beast.hit_points,
+						curHp: beast.hit_points,
+				  }
+				: {
+						ac: parseInt(this.transAc),
+						maxHp: parseInt(this.transHp),
+						curHp: parseInt(this.transHp),
+				  };
+			this.update_campaign_entity({
+				uid: this.userId,
+				campaignId: this.campaignId,
+				type: "players",
+				id: this.entityKey,
+				property: "transformed",
+				value: transform,
+			});
+			this.$emit("close");
 		},
-		methods: {
-			...mapActions("campaigns", ["update_campaign_entity"]),
-			edit() {
-				const transform = {
-					ac: parseInt(this.transAc),
-					maxHp: parseInt(this.transHp),
-					curHp: parseInt(this.transHp)
-				}
-				this.update_campaign_entity({ 
-					uid: this.userId, 
-					campaignId: this.campaignId, 
-					type: "players",
-					id: this.entityKey,
-					property: "transformed",
-					value: transform
-				});
-				this.$emit('close');
-			}
-		}
-	};
+	},
+};
 </script>
diff --git a/src/components/hk-components/hk-transform-select.vue b/src/components/hk-components/hk-transform-select.vue
new file mode 100644
index 00000000..0dbc7fd0
--- /dev/null
+++ b/src/components/hk-components/hk-transform-select.vue
@@ -0,0 +1,136 @@
+<template>
+	<div>
+		<div class="mb-2">Select to transform</div>
+		<div class="d-flex justify-content-betweeen items-center gap-2 mb-2">
+			<hk-input
+				v-model="search"
+				:label="`Search ${types?.includes('Beast') ? 'beasts' : 'monsters'}`"
+				class="full-width"
+				clearable
+				@blur="updateFilter"
+				@keydown.enter="updateFilter"
+				@clear="updateFilter"
+			/>
+			<q-select
+				v-model="cr_filter"
+				:dark="$store.getters.theme === 'dark'"
+				filled
+				square
+				:options="crs"
+				class="full-width"
+				label="Challenge rating"
+				clearable
+				@input="updateFilter"
+			/>
+		</div>
+		<div class="mb-2 d-flex justify-content-between">
+			Select {{ types?.includes("Beast") ? "beast" : "monster" }}
+			<a v-if="types?.includes('Beast')" @click="clearTypes">Show all monsters</a>
+		</div>
+		<hk-loader v-if="loading" />
+		<q-list v-else :dark="$store.getters.theme === 'dark'">
+			<q-item v-for="(result, index) in beasts" :key="index" class="bg-neutral-8">
+				<q-item-section class="truncate">
+					{{ result.name.capitalizeEach() }}
+				</q-item-section>
+				<q-item-section class="text-right" avatar>
+					{{ displayCR(result.challenge_rating) }}
+				</q-item-section>
+				<q-item-section avatar>
+					<a class="btn btn-sm bg-neutral-5 ml-2" @click="select(result.url)">
+						<i aria-hidden="true" class="fas fa-paw" />
+					</a>
+				</q-item-section>
+			</q-item>
+		</q-list>
+		<div v-if="!pagination.rowsNumber" class="red">
+			No {{ types?.includes("Beast") ? "beasts" : "monsters" }} found
+		</div>
+
+		<q-pagination
+			v-if="!loading && pagination.rowsNumber > pagination.rowsPerPage"
+			class="mt-3"
+			v-model="pagination.page"
+			:max="Math.ceil(pagination.rowsNumber / pagination.rowsPerPage)"
+			:max-pages="5"
+			color="dark"
+			:direction-links="true"
+			:boundary-links="true"
+			@input="fetchMonsters"
+		/>
+	</div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import { displayCR } from "src/utils/generalFunctions";
+import { range } from "lodash";
+
+export default {
+	name: "hk-select",
+	data() {
+		return {
+			beasts: [],
+			pagination: {
+				sortBy: "challenge_rating",
+				descending: false,
+				page: 1,
+				rowsPerPage: 15,
+				rowsNumber: 0,
+			},
+			cr_filter: null,
+			search: null,
+			types: ["Beast"],
+			loading: true,
+			displayCR,
+		};
+	},
+	computed: {
+		crs() {
+			const cr = [0, 0.125, 0.25, 0.5];
+			const max = this.types?.includes("Beast") ? 9 : 31;
+			return [...cr, ...range(1, max)];
+		},
+		query() {
+			return {
+				search: this.search,
+				types: this.types,
+				challenge_ratings:
+					this.cr_filter !== null ? { min: this.cr_filter, max: this.cr_filter } : null,
+			};
+		},
+	},
+	methods: {
+		...mapActions("api_monsters", ["fetch_monsters", "fetch_monster"]),
+		async fetchMonsters() {
+			await this.fetch_monsters({
+				pageNumber: this.pagination.page,
+				pageSize: this.pagination.rowsPerPage,
+				query: this.query,
+				fields: ["name", "challenge_rating", "url"],
+				sortBy: this.pagination.sortBy,
+				descending: this.pagination.descending,
+			}).then((result) => {
+				this.$set(this.pagination, "rowsNumber", result.meta.count);
+				this.beasts = result.results;
+				this.loading = false;
+			});
+		},
+		clearTypes() {
+			this.types = [];
+			this.updateFilter();
+		},
+		updateFilter() {
+			this.pagination.page = 1;
+			this.fetchMonsters();
+		},
+		async select(url) {
+			const beast = await this.fetch_monster(url);
+			this.$emit("select", beast);
+		},
+	},
+	async mounted() {
+		await this.fetchMonsters();
+	},
+};
+</script>

From 6577da8927bbfb671124415c4876a954891c0186 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 26 Apr 2024 17:34:08 +0200
Subject: [PATCH 09/24] Make transform reactive on dm screen

---
 src/components/drawers/EditPlayer.vue      | 8 +++++---
 src/components/drawers/party/Transform.vue | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/drawers/EditPlayer.vue b/src/components/drawers/EditPlayer.vue
index 99e9c699..732dd395 100644
--- a/src/components/drawers/EditPlayer.vue
+++ b/src/components/drawers/EditPlayer.vue
@@ -4,7 +4,7 @@
 	<div class="pb-5" v-if="entity && !demo">
 		<h2 class="d-flex justify-content-between">
 			<span>Edit {{ playerBase.character_name }}</span>
-			<a @click="setTransform = !setTransform">
+			<a v-if="!entity.transformed" @click="setTransform = !setTransform">
 				<i aria-hidden="true" v-if="setTransform" class="fas fa-times red"></i>
 				<i aria-hidden="true" v-else class="fas fa-paw-claws green"></i>
 				<q-tooltip anchor="top middle" self="center middle"> Transform </q-tooltip>
@@ -15,7 +15,7 @@
 			>Remove transformation</a
 		>
 
-		<Transform :data="entityKey" @close="closeTransform" v-if="setTransform" />
+		<Transform v-if="setTransform" :data="entityKey" @close="closeTransform" />
 
 		<template v-else>
 			<!-- DEATH SAVING THROWS -->
@@ -512,7 +512,8 @@ export default {
 				value,
 			});
 		},
-		closeTransform() {
+		closeTransform(beast) {
+			this.entity.transformed = beast;
 			this.setTransform = false;
 		},
 		removeTransform() {
@@ -524,6 +525,7 @@ export default {
 				property: "transformed",
 				value: null,
 			});
+			this.entity.transformed = null;
 		},
 		stabilize() {
 			this.stabilize_entity({
diff --git a/src/components/drawers/party/Transform.vue b/src/components/drawers/party/Transform.vue
index 12ef419d..bc2710d5 100644
--- a/src/components/drawers/party/Transform.vue
+++ b/src/components/drawers/party/Transform.vue
@@ -99,7 +99,7 @@ export default {
 				property: "transformed",
 				value: transform,
 			});
-			this.$emit("close");
+			this.$emit("close", beast);
 		},
 	},
 };

From 275becb12969ef961286ca889f3ddbe076fee79e Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 26 Apr 2024 17:35:23 +0200
Subject: [PATCH 10/24] fix smelly code

---
 src/components/campaign/Players.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/campaign/Players.vue b/src/components/campaign/Players.vue
index 343e6bac..3f00a13c 100644
--- a/src/components/campaign/Players.vue
+++ b/src/components/campaign/Players.vue
@@ -463,11 +463,7 @@
 import { mapGetters, mapActions } from "vuex";
 import { experience } from "src/mixins/experience.js";
 import { currencyMixin } from "src/mixins/currency.js";
-import {
-	extensionInstalled,
-	comparePlayerToCharacter,
-	getCharacterSyncCharacter,
-} from "src/utils/generalFunctions";
+import { extensionInstalled, comparePlayerToCharacter } from "src/utils/generalFunctions";
 
 export default {
 	name: "Players",

From e6f0ba86cea774463a316d2e21c8fb9b59698e39 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Mon, 6 May 2024 17:49:58 +0200
Subject: [PATCH 11/24] Save creation date in user object

---
 src/views/Pages/SignUp.vue        | 187 ++++++++++++++++--------------
 src/views/profile/SetUsername.vue | 114 +++++++++---------
 2 files changed, 155 insertions(+), 146 deletions(-)

diff --git a/src/views/Pages/SignUp.vue b/src/views/Pages/SignUp.vue
index 3d587f7e..51e987f2 100644
--- a/src/views/Pages/SignUp.vue
+++ b/src/views/Pages/SignUp.vue
@@ -1,67 +1,63 @@
-	<template>
+<template>
 	<div class="login-container">
 		<div id="login">
-			<img class="logo" src="../../assets/_img/logo/logo-cyan.svg" alt="Shieldmaiden"/>
+			<img class="logo" src="../../assets/_img/logo/logo-cyan.svg" alt="Shieldmaiden" />
 			<h2 class="mt-3">Create an account</h2>
-			<p v-if="error" class="red"><i aria-hidden="true" class="fas fa-exclamation-triangle"></i> {{ error }}</p>
-					
-			<button class="google mt-2" @click="googleSignIn()">
-				Sign up with Google
-			</button>
-			<hr>
+			<p v-if="error" class="red">
+				<i aria-hidden="true" class="fas fa-exclamation-triangle"></i> {{ error }}
+			</p>
+
+			<button class="google mt-2" @click="googleSignIn()">Sign up with Google</button>
+			<hr />
 			<ValidationObserver v-slot="{ handleSubmit, valid }">
 				<q-form v-if="!loading" @submit="handleSubmit(signUp)">
+					<h4 class="text-center neutral-2">With email and password</h4>
 
-					<h4 class="text-center neutral-2">
-						With email and password
-					</h4>
-					
-					<ValidationProvider 
-						rules="required|email" 
-						name="Email" 
-						v-slot="{ errors, invalid, validated}"
+					<ValidationProvider
+						rules="required|email"
+						name="Email"
+						v-slot="{ errors, invalid, validated }"
 					>
 						<hk-input
-							autocomplete="username" 
+							autocomplete="username"
 							class="email mb-2"
-							type="email" 
-							label="Email" 
+							type="email"
+							label="Email"
 							v-model="email"
 							:error="invalid && validated"
 							:error-message="errors[0]"
 						/>
 					</ValidationProvider>
 
-					<ValidationProvider 
+					<ValidationProvider
 						rules="required|alpha_num|max:20|min:3|username"
-						name="Username" 
+						name="Username"
 						v-slot="{ errors, invalid, validated }"
 					>
-						<hk-input 
-							type="text" 
+						<hk-input
+							type="text"
 							class="mb-2"
-							label="Username" 
+							label="Username"
 							maxlength="20"
 							minlength="3"
 							v-model="username"
 							:error="invalid && validated"
 							:error-message="errors[0]"
 						/>
-					
 					</ValidationProvider>
 
 					<ValidationProvider
 						rules="required"
 						vid="password"
 						name="Password"
-						v-slot="{ errors, invalid, validated}"
+						v-slot="{ errors, invalid, validated }"
 					>
 						<hk-input
-							autocomplete="new-password" 
+							autocomplete="new-password"
 							class="mb-2"
 							type="password"
-							placeholder="Password" 
-							v-model="password" 
+							placeholder="Password"
+							v-model="password"
 							name="password"
 							:error="invalid && validated"
 							:error-message="errors[0]"
@@ -71,13 +67,13 @@
 					<ValidationProvider
 						rules="required|confirmed:password"
 						name="Confirm Password"
-						v-slot="{ errors, invalid, validated}"
+						v-slot="{ errors, invalid, validated }"
 					>
 						<hk-input
 							autocomplete="new-password"
 							class="mb-2"
-							type="password" 
-							placeholder="Confirm Password" 
+							type="password"
+							placeholder="Confirm Password"
 							v-model="confirm_password"
 							name="confirm-password"
 							:error="invalid && validated"
@@ -85,7 +81,14 @@
 						/>
 					</ValidationProvider>
 
-					<q-btn no-caps label="Sign Up" class="full-width" color="primary" type="submit" :disabled="!valid" />
+					<q-btn
+						no-caps
+						label="Sign Up"
+						class="full-width"
+						color="primary"
+						type="submit"
+						:disabled="!valid"
+					/>
 				</q-form>
 				<hk-loader v-else prefix="Signing you up" noBackground />
 			</ValidationObserver>
@@ -94,67 +97,71 @@
 </template>
 
 <script>
-	import { db, firebase, auth } from 'src/firebase';
-	import { mapActions } from 'vuex';
+import { db, firebase, auth } from "src/firebase";
+import { mapActions } from "vuex";
 
-	export default {
-		data: function() {
-			return {
-				email: undefined,
-				password: undefined,
-				confirm_password: undefined,
-				username: undefined,
-				error: undefined,
-				loading: false,
+export default {
+	data: function () {
+		return {
+			email: undefined,
+			password: undefined,
+			confirm_password: undefined,
+			username: undefined,
+			error: undefined,
+			loading: false,
+		};
+	},
+	preFetch({ store, redirect }) {
+		if (store.getters.user) {
+			redirect("/content");
+		}
+	},
+	methods: {
+		...mapActions(["reinitialize", "setUser", "setUserInfo"]),
+		async createUser(uid) {
+			let user = {
+				username: this.username,
+				email: this.email,
+				created: firebase.database.ServerValue.TIMESTAMP,
 			};
-		},
-		preFetch({ store, redirect }) {
-			if(store.getters.user) {
-				redirect('/content');
-			}
-		},
-		methods: {
-			...mapActions(["reinitialize", "setUser", "setUserInfo"]),
-			async createUser(uid) {
-				let user = {
-					username: this.username,
-					email: this.email
-				}
 
-				await db.ref(`users/${uid}`).update(user);
+			await db.ref(`users/${uid}`).update(user);
 
-				//Save searchable results in search_user
-				await db.ref(`search_users`).child(uid).set({
-					username: this.username.toLowerCase(),
-					email: this.email.toLowerCase()
-				});
-					
-			},
-			signUp: function() {
-				this.loading = true
-				auth.createUserWithEmailAndPassword(this.email, this.password).then(
-					// eslint-disable-next-line
-					async result => {
-						await this.createUser(result.user.uid);
-						await this.setUser(result.user);
-						await this.setUserInfo();
-						await this.reinitialize();
-						this.$router.replace("/content");
-					},
-					err => {
-						this.error = err.message;
-						this.loading = false;
-					});
-			},
-			googleSignIn() {
-				const provider = new firebase.auth.GoogleAuthProvider();
+			//Save searchable results in search_user
+			await db.ref(`search_users`).child(uid).set({
+				username: this.username.toLowerCase(),
+				email: this.email.toLowerCase(),
+			});
+		},
+		signUp: function () {
+			this.loading = true;
+			auth.createUserWithEmailAndPassword(this.email, this.password).then(
+				// eslint-disable-next-line
+				async (result) => {
+					await this.createUser(result.user.uid);
+					await this.setUser(result.user);
+					await this.setUserInfo();
+					await this.reinitialize();
+					this.$router.replace("/content");
+				},
+				(err) => {
+					this.error = err.message;
+					this.loading = false;
+				}
+			);
+		},
+		googleSignIn() {
+			const provider = new firebase.auth.GoogleAuthProvider();
 
-				auth.signInWithPopup(provider).then(() => {
-					this.$router.replace('/set-username');
-				}).catch((err) => {
+			auth
+				.signInWithPopup(provider)
+				.then(() => {
+					this.$router.replace("/set-username");
+				})
+				.catch((err) => {
 					this.error = err.message;
 				});
-			},
-		}
-	};
-</script>
\ No newline at end of file
+		},
+	},
+};
+</script>
diff --git a/src/views/profile/SetUsername.vue b/src/views/profile/SetUsername.vue
index 38724a9f..9c19ff83 100644
--- a/src/views/profile/SetUsername.vue
+++ b/src/views/profile/SetUsername.vue
@@ -3,25 +3,30 @@
 		<template v-if="!userInfo || !userInfo.username">
 			<hk-card header="Username">
 				<div class="card-body">
-					<h3>
-						Thank you for creating a <strong>Shieldmaiden</strong> account!</h3>
+					<h3>Thank you for creating a <strong>Shieldmaiden</strong> account!</h3>
 					<p>To continue, please first enter a username.</p>
-					<ValidationProvider rules="required|alpha_num|min:3|max:20|username" name="Username" v-slot="{ errors, invalid, validated }">
-						<q-input 
-							:dark="$store.getters.theme === 'dark'" filled square
-							type="text" 
+					<ValidationProvider
+						rules="required|alpha_num|min:3|max:20|username"
+						name="Username"
+						v-slot="{ errors, invalid, validated }"
+					>
+						<q-input
+							:dark="$store.getters.theme === 'dark'"
+							filled
+							square
+							type="text"
 							class="mb-2"
 							autocomplete="off"
-							label="Username" 
+							label="Username"
 							maxlength="20"
 							minlength="3"
 							v-model="username"
 							:error="invalid && validated"
 							:error-message="errors[0]"
 						/>
-						<button 
-							class="btn btn-block" 
-							:class="{'disabled': check === 'unavailable' || invalid }" 
+						<button
+							class="btn btn-block"
+							:class="{ disabled: check === 'unavailable' || invalid }"
 							@click="setUsername(!invalid)"
 						>
 							Save
@@ -34,57 +39,54 @@
 </template>
 
 <script>
-	import { db } from 'src/firebase'	
-	import { mapActions, mapGetters } from 'vuex'
+import { db, firebase } from "src/firebase";
+import { mapActions, mapGetters } from "vuex";
 
 export default {
-		name: 'Username',
-		data() {
-			return {
-				username: undefined,
-				check: 'available',
-			}
-		},
-		preFetch({ store, redirect }) {
-      if(!store.getters.user) {
-				redirect('/sign-in');
-			} else if (store.getters.userInfo.username) {
-				redirect('/profile')
-			}
-		},
-		computed: {
-			...mapGetters([
-				'user',
-				'userInfo',
-				'poster',
-			])
-		},
-		methods: {
-			...mapActions([ 'reinitialize' ]),
-			async setUsername(valid) {
-				if (valid && this.check === "available") {
-					let user = {
-						username: this.username,
-						email: this.user.email
-					}
+	name: "Username",
+	data() {
+		return {
+			username: undefined,
+			check: "available",
+		};
+	},
+	preFetch({ store, redirect }) {
+		if (!store.getters.user) {
+			redirect("/sign-in");
+		} else if (store.getters.userInfo.username) {
+			redirect("/profile");
+		}
+	},
+	computed: {
+		...mapGetters(["user", "userInfo", "poster"]),
+	},
+	methods: {
+		...mapActions(["reinitialize"]),
+		async setUsername(valid) {
+			if (valid && this.check === "available") {
+				let user = {
+					username: this.username,
+					created: firebase.database.ServerValue.TIMESTAMP,
+					email: this.user.email,
+				};
 
-					db.ref(`users/${this.user.uid}`).update(user);
+				db.ref(`users/${this.user.uid}`).update(user);
 
-					//Save searchable results in search_user
-					db.ref(`search_users`).child(this.user.uid).set({
-						username: this.username.toLowerCase(),
-						email: this.user.email.toLowerCase()
-					});
+				//Save searchable results in search_user
+				db.ref(`search_users`).child(this.user.uid).set({
+					username: this.username.toLowerCase(),
+					email: this.user.email.toLowerCase(),
+				});
 
-					this.$snotify.success('Username saved.', 'Critical hit!', {
-						position: "centerTop"
-					});
-					await this.reinitialize();
-					this.$router.replace('/profile');
-				}
+				this.$snotify.success("Username saved.", "Critical hit!", {
+					position: "centerTop",
+				});
+				await this.reinitialize();
+				this.$router.replace("/profile");
 			}
-		}
-	}
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
@@ -96,4 +98,4 @@ export default {
 		max-width: 250px;
 	}
 }
-</style>
\ No newline at end of file
+</style>

From 78170c3529f4f1cceee95854759a86083298c25a Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Mon, 6 May 2024 17:50:50 +0200
Subject: [PATCH 12/24] Give legacy tier if there is no create or it is before
 a specific date

---
 src/store/modules/user.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 1017b81c..20292430 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -93,9 +93,6 @@ const user_actions = {
 						? user_info.patreon_email.toLowerCase()
 						: user_info.email.toLowerCase();
 
-					// User always basic reward tier
-					let path = `tiers/basic`;
-
 					// Use firebase serverTimeOffset to get the date from the server and not the client.
 					// https://firebase.google.com/docs/database/web/offline-capabilities#clock-skew
 					let time_ms = 0;
@@ -112,6 +109,11 @@ const user_actions = {
 						);
 
 					const server_time = new Date(time_ms).toISOString();
+					const legacy_date = new Date(2024, 4, 7).getTime();
+
+					// User always basic reward tier
+					let path =
+						!user_info.created || user_info.created < legacy_date ? `tiers/legacy` : `tiers/basic`;
 
 					// If user has voucher use this
 					if (user_info.voucher) {
@@ -504,14 +506,13 @@ const user_actions = {
 			const services = await dispatch("get_user_services");
 			try {
 				await services.deleteSoundboardLink(uid, key);
-				commit("DELETE_SOUNDBOARD_LINK",  key);
+				commit("DELETE_SOUNDBOARD_LINK", key);
 				return;
 			} catch (error) {
 				throw error;
 			}
 		}
 	},
-
 };
 
 const user_mutations = {

From bda35abf8e6797f49419081c6f00c1a7e5e61cd0 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Mon, 6 May 2024 18:39:19 +0200
Subject: [PATCH 13/24] Check tier price, not name

---
 src/components/ContentSideRight.vue           |  11 +-
 src/components/Tiers.vue                      |   2 +-
 src/components/campaign/Players.vue           |   4 +-
 src/components/campaign/share/index.vue       |  17 +-
 src/components/campaign/soundBoard/Board.vue  |  53 ++--
 src/components/combat/Finished.vue            |   2 +-
 src/components/drawers/CharacterSync.vue      | 174 ++++++-----
 src/components/encounters/General.vue         |  10 +-
 src/components/encounters/Overview.vue        |   2 +-
 .../hk-components/hk-image-uploader.vue       | 281 +++++++++---------
 .../UserContent/Campaigns/EditCampaign.vue    |   4 +-
 src/views/UserContent/Items/Items.vue         | 195 ++++++------
 src/views/UserContent/ManageContent.vue       |   2 +-
 src/views/UserContent/Npcs/Npcs.vue           |  18 +-
 src/views/UserContent/Players/EditPlayer.vue  |  12 +-
 src/views/UserContent/Players/index.vue       |  10 +-
 src/views/UserContent/Reminders/index.vue     |   2 +-
 src/views/UserContent/Spells/Spells.vue       |  12 +-
 src/views/profile/Profile.vue                 |   8 +-
 19 files changed, 424 insertions(+), 395 deletions(-)

diff --git a/src/components/ContentSideRight.vue b/src/components/ContentSideRight.vue
index 9d764679..8023682c 100644
--- a/src/components/ContentSideRight.vue
+++ b/src/components/ContentSideRight.vue
@@ -2,7 +2,6 @@
 	<div class="content-side">
 		<Tutorial v-if="show_tutorial" vertical />
 
-
 		<hk-card v-if="$route.path.startsWith('/content/players')">
 			<div class="card-header" slot="header">
 				<span>
@@ -14,7 +13,7 @@
 				<p>
 					Sync your player's character sheets from other resources in
 					<span class="whitespace-nowrap">Shieldmaiden</span
-					><span v-if="tier.name === 'Free'" class="neutral-3"> *</span>.
+					><span v-if="tier.price === 'Free'" class="neutral-3"> *</span>.
 				</p>
 
 				<button
@@ -30,7 +29,7 @@
 				</button>
 			</div>
 			<small
-				v-if="tier.name === 'Free'"
+				v-if="tier.price === 'Free'"
 				slot="footer"
 				class="card-footer justify-content-start neutral-3"
 				>* <router-link to="/patreon" class="mx-1">Subscription</router-link> for Shieldmaiden
@@ -92,7 +91,7 @@
 			</div>
 			<div slot="footer" v-if="tier.name !== 'Deity'">
 				<router-link to="/patreon" class="btn btn-block btn-square bg-patreon-red">
-					Upgrade
+					{{ tier.price === "Free" ? "Subscribe" : "Upgrade" }}
 				</router-link>
 			</div>
 		</hk-card>
@@ -117,7 +116,7 @@
 					target="_blank"
 				>
 					Checkout HBC <hk-icon icon="fas fa-external-link" class="ml-2" />
-					</a>
+				</a>
 			</div>
 		</hk-card>
 
@@ -194,7 +193,7 @@ export default {
 					name: "Facebook",
 					icon: "fab fa-facebook-f",
 					url: "https://www.facebook.com/shieldmaidenapp",
-				}
+				},
 			],
 		};
 	},
diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index abf958b0..34a1365d 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -4,7 +4,7 @@
 			<hk-card-deck>
 				<hk-card
 					:header="t.name"
-					v-for="(t, key) in tiers"
+					v-for="(t, key) in tiers.filter((item) => item.name !== 'Legacy')"
 					:key="key"
 					:class="{ current: t.name == tier.name }"
 				>
diff --git a/src/components/campaign/Players.vue b/src/components/campaign/Players.vue
index 3f00a13c..20171cae 100644
--- a/src/components/campaign/Players.vue
+++ b/src/components/campaign/Players.vue
@@ -36,7 +36,7 @@
 					</button>
 					<button
 						v-if="
-							tier.name !== 'Free' &&
+							tier.price !== 'Free' &&
 							sync_characters &&
 							players &&
 							Object.keys(sync_characters).length &&
@@ -341,7 +341,7 @@
 							</template>
 						</div>
 						<div class="col actions" :key="'actions-' + key" v-if="viewerIsUser">
-							<template v-if="tier.name !== 'Free' && extensionInstalled">
+							<template v-if="tier.price !== 'Free' && extensionInstalled">
 								<button
 									v-if="
 										players[key].sync_character && players[key].sync_character in sync_characters
diff --git a/src/components/campaign/share/index.vue b/src/components/campaign/share/index.vue
index 12d19023..02a2142a 100644
--- a/src/components/campaign/share/index.vue
+++ b/src/components/campaign/share/index.vue
@@ -2,7 +2,7 @@
 	<div v-if="!campaign.sharing" class="full-height">
 		<div v-if="!broadcast.live" class="not-live">
 			<p>Go live to share with your players</p>
-			<div 
+			<div
 				class="live pointer"
 				@click="
 					setDrawer({
@@ -10,7 +10,8 @@
 						type: 'drawers/Broadcast',
 						data: { campaign_id: campaignId, private: campaign.private },
 					})
-				">
+				"
+			>
 				Go live
 			</div>
 		</div>
@@ -172,15 +173,19 @@
 			</q-tab-panel>
 
 			<q-tab-panel name="weather">
-				<Weather v-model="weather" class="pb-4" :disabled="tier.name === 'Free'" />
+				<Weather v-model="weather" class="pb-4" :disabled="tier.price === 'Free'" />
 				<div class="actions">
-					<template v-if="tier.name !== 'Free'">
+					<template v-if="tier.price !== 'Free'">
 						<button class="btn bg-neutral-5" @click="clearWeather">Clear</button>
 						<button class="btn" :disabled="isEmpty(weather)" @click="setWeather">Set</button>
 					</template>
 					<template v-else>
-						<button v-if="!isEmpty(weather)" class="btn bg-neutral-5" @click="clearWeather">Clear</button>
-						<router-link v-else to="/patreon" class="btn bg-patreon-red">Get a subscription</router-link>
+						<button v-if="!isEmpty(weather)" class="btn bg-neutral-5" @click="clearWeather">
+							Clear
+						</button>
+						<router-link v-else to="/patreon" class="btn bg-patreon-red"
+							>Get a subscription</router-link
+						>
 					</template>
 				</div>
 			</q-tab-panel>
diff --git a/src/components/campaign/soundBoard/Board.vue b/src/components/campaign/soundBoard/Board.vue
index d28bb5f4..0e72f7de 100644
--- a/src/components/campaign/soundBoard/Board.vue
+++ b/src/components/campaign/soundBoard/Board.vue
@@ -1,22 +1,17 @@
 <template>
 	<div class="soundboard">
-		<hk-input 
-			v-model="search" 
-			dense 
-			label="Search"
-			class="mb-2"
-			clearable>
+		<hk-input v-model="search" dense label="Search" class="mb-2" clearable>
 			<q-icon slot="prepend" name="search" />
 		</hk-input>
 		<p class="red" v-if="!filtered.length">Nothing found</p>
-		<transition-group 
+		<transition-group
 			tag="div"
 			name="board"
 			class="board"
 			enter-active-class="animated animate__flipInX"
 			leave-active-class="animated animate__flipOutX"
 		>
-			<template v-for="(sound) in filtered">
+			<template v-for="sound in filtered">
 				<a
 					v-if="sound.url"
 					:key="`${sound.type}-${sound.key}`"
@@ -31,10 +26,11 @@
 						alt="sound board button background"
 						class="board__button-logo"
 					/>
-					<button 
-						v-if="edit && !sound.hk" 
+					<button
+						v-if="edit && !sound.hk"
 						class="btn btn-sm bg-neutral-5 board__button-delete"
-						@click.stop="delete_soundboard_link(sound.key)">
+						@click.stop="delete_soundboard_link(sound.key)"
+					>
 						<hk-icon icon="fas fa-trash-alt red" />
 					</button>
 					<hk-icon v-else-if="!sound.image" :icon="sound.icon" class="board__button-icon" />
@@ -50,11 +46,7 @@
 		</transition-group>
 
 		<div class="soundboard__actions">
-			<router-link
-				v-if="tier.name === 'Free'"
-				class="btn btn-block bg-patreon-red"
-				to="/patreon"
-			>
+			<router-link v-if="tier.price === 'Free'" class="btn btn-block bg-patreon-red" to="/patreon">
 				Add custom links
 			</router-link>
 			<template v-else>
@@ -318,19 +310,28 @@ export default {
 			const links = this.soundboard || [];
 			const board = links.concat(this.hk_links);
 
-			return board.filter((link) => link.type === this.type)
+			return board
+				.filter((link) => link.type === this.type)
 				.map((item) => ({ ...item, icon: this.getIcon(item.url) }));
 		},
 		filtered() {
-			return this.search ? this.board.filter((link) => link.name?.toLowerCase().includes(this.search.toLowerCase())) : this.board;
-		}
+			return this.search
+				? this.board.filter((link) => link.name?.toLowerCase().includes(this.search.toLowerCase()))
+				: this.board;
+		},
 	},
 	async mounted() {
 		await this.get_soundboard();
 		this.loading = false;
 	},
 	methods: {
-		...mapActions(["play_music", "play_ambience", "get_soundboard", "add_soundboard_link", "delete_soundboard_link"]),
+		...mapActions([
+			"play_music",
+			"play_ambience",
+			"get_soundboard",
+			"add_soundboard_link",
+			"delete_soundboard_link",
+		]),
 		getIcon(url, type) {
 			switch (true) {
 				case urlType(url) === "youtube":
@@ -392,13 +393,17 @@ export default {
 			transition: all 0.3s ease-in-out;
 			gap: 0;
 			padding-top: 10px;
-	
+
 			&-title {
 				position: absolute;
 				bottom: 0;
 				padding: 8px 4px 3px 4px;
 				width: 100%;
-				background: linear-gradient(180deg, rgba(215,215,215,0) 0%, rgba(0,0,0,0.7511379551820728) 100%);
+				background: linear-gradient(
+					180deg,
+					rgba(215, 215, 215, 0) 0%,
+					rgba(0, 0, 0, 0.7511379551820728) 100%
+				);
 				border-bottom-left-radius: 8px;
 				border-bottom-right-radius: 8px;
 				z-index: 10;
@@ -422,7 +427,7 @@ export default {
 				border-radius: inherit;
 				top: 0;
 				bottom: 0;
-	
+
 				img {
 					transition: all 0.1s ease-in-out;
 					width: 100%;
@@ -436,7 +441,7 @@ export default {
 			}
 			&:hover {
 				box-shadow: 0px 0px 8px 4px #0000006c;
-	
+
 				.board__button-bg {
 					img {
 						transform: scale(1.1);
diff --git a/src/components/combat/Finished.vue b/src/components/combat/Finished.vue
index bd65db77..5a7104d9 100644
--- a/src/components/combat/Finished.vue
+++ b/src/components/combat/Finished.vue
@@ -2,7 +2,7 @@
 	<div class="content">
 		<h2 class="head">Encounter finished</h2>
 		<div class="container">
-			<q-slide-transition v-if="!tier || tier.name === 'Free'">
+			<q-slide-transition v-if="!tier || tier.price === 'Free'">
 				<a
 					v-show="patreon"
 					href="https://www.patreon.com/join/shieldmaidenapp"
diff --git a/src/components/drawers/CharacterSync.vue b/src/components/drawers/CharacterSync.vue
index 8ccbff95..0b23060e 100644
--- a/src/components/drawers/CharacterSync.vue
+++ b/src/components/drawers/CharacterSync.vue
@@ -3,19 +3,13 @@
 		<h3>Character Sync</h3>
 		<div v-if="browser !== 'Chrome'" class="red mb-2">
 			Google
-			<a
-				href="https://chrome.google.com"
-				target="_blank"
-				rel="noopener"
-			>Chrome</a>
+			<a href="https://chrome.google.com" target="_blank" rel="noopener">Chrome</a>
 			is needed for this feature to work.
 		</div>
 
 		<!-- No extension -->
 		<template v-if="!extensionVersion">
-			<p>
-				A Google Chrome Extension is needed to Sync your characters from other resources.
-			</p>
+			<p>A Google Chrome Extension is needed to Sync your characters from other resources.</p>
 			<a
 				class="btn btn-block"
 				:href="`https://chrome.google.com/webstore/detail/dd-character-sync/${extension_id}`"
@@ -28,24 +22,17 @@
 
 		<!-- Version too low -->
 		<template v-if="extensionVersion < '0.2.1'">
-			<strong class="orange">Version too low</strong> <span class="neutral-3"> (0.2.1 or higher required)</span>
-			<p>
-				A newer version of the <strong>D&D Character Sync</strong> extension is required
-			</p>
+			<strong class="orange">Version too low</strong>
+			<span class="neutral-3"> (0.2.1 or higher required)</span>
+			<p>A newer version of the <strong>D&D Character Sync</strong> extension is required</p>
 			<div class="extension-icon mb-1" />
-			- Right click on the extension's icon<br/>
-			- Click <strong>Manage extension</strong> and then the <strong>Update</strong> button
-			- Refresh this page
+			- Right click on the extension's icon<br />
+			- Click <strong>Manage extension</strong> and then the <strong>Update</strong> button -
+			Refresh this page
 		</template>
 
 		<!-- Has extension and correct version -->
-		<q-stepper
-			v-else
-			:dark="$store.getters.theme === 'dark'"
-			v-model="step"
-			vertical
-			animated
-		>
+		<q-stepper v-else :dark="$store.getters.theme === 'dark'" v-model="step" vertical animated>
 			<q-step
 				v-for="({ title, description, icon }, i) in steps"
 				:name="i"
@@ -63,86 +50,97 @@
 
 				<q-stepper-navigation>
 					<q-btn v-if="step > 0" label="Previous" no-caps @click="previous" class="mr-1" />
-					<q-btn color="primary" label="Next" no-caps @click="next" v-if="step < steps.length - 1" />
+					<q-btn
+						color="primary"
+						label="Next"
+						no-caps
+						@click="next"
+						v-if="step < steps.length - 1"
+					/>
 				</q-stepper-navigation>
 			</q-step>
 		</q-stepper>
-		<template v-if="tier.name === 'Free'">
-			<hr>
+		<template v-if="tier.price === 'Free'">
+			<hr />
 			<p>This feature is only available with a subscription.</p>
-			<router-link to="/patreon" class="btn btn-block bg-patreon-red">Get a subscription</router-link>
+			<router-link to="/patreon" class="btn btn-block bg-patreon-red"
+				>Get a subscription</router-link
+			>
 		</template>
 	</q-no-ssr>
 </template>
 
 <script>
-	import { extensionInstalled } from "src/utils/generalFunctions";
-	import { browserDetect } from 'src/functions';
-	import { mapGetters } from "vuex";
-	import { character_sync_id } from "src/utils/generalConstants";
+import { extensionInstalled } from "src/utils/generalFunctions";
+import { browserDetect } from "src/functions";
+import { mapGetters } from "vuex";
+import { character_sync_id } from "src/utils/generalConstants";
 
-	export default {
-		name: 'CharacterSync',
-		data() {
-    	return {
-				extensionVersion: false,
-				extension_id: character_sync_id,
-				browser: browserDetect(),
-				step: 0,
-				steps: [
-					{
-						title: "Store Characters",
-						description: "First store at least one character in the <strong>D&D Character Sync</strong> extension.<br/>"+
-							"Open the extension and follow the steps to sync. With the extension you can save any character you want, also those of your players.",
-						icon: "fas fa-download"
-					},
-					{
-						title: "Link a Character",
-						description: "<p>Link a Character from the extension to a Player in Shieldmaiden.<br/>"+
-							'If you now revisit your player overview, there are <button class="btn btn-sm bg-neutral-5"><i class="fas fa-link" aria-hidden="true"></i></button> '+
-							'buttons next to each player to link a character with <span class="neutral-3">*</span>.</p>'+
-							'<small class="neutral-3">* Only if you have a Shieldmaiden subscription</small>',
-						icon: "fas fa-link"
-					},
-					{
-						title: "Sync Character",
-						description: "<p>Now that you linked a character to your player, you can sync the stats from the extension "+
-						'to Shieldmaiden with one click on the <button class="btn btn-sm bg-neutral-5"><i class="fas fa-sync-alt" aria-hidden="true"></i></button> button.</p>'+
+export default {
+	name: "CharacterSync",
+	data() {
+		return {
+			extensionVersion: false,
+			extension_id: character_sync_id,
+			browser: browserDetect(),
+			step: 0,
+			steps: [
+				{
+					title: "Store Characters",
+					description:
+						"First store at least one character in the <strong>D&D Character Sync</strong> extension.<br/>" +
+						"Open the extension and follow the steps to sync. With the extension you can save any character you want, also those of your players.",
+					icon: "fas fa-download",
+				},
+				{
+					title: "Link a Character",
+					description:
+						"<p>Link a Character from the extension to a Player in Shieldmaiden.<br/>" +
+						'If you now revisit your player overview, there are <button class="btn btn-sm bg-neutral-5"><i class="fas fa-link" aria-hidden="true"></i></button> ' +
+						'buttons next to each player to link a character with <span class="neutral-3">*</span>.</p>' +
+						'<small class="neutral-3">* Only if you have a Shieldmaiden subscription</small>',
+					icon: "fas fa-link",
+				},
+				{
+					title: "Sync Character",
+					description:
+						"<p>Now that you linked a character to your player, you can sync the stats from the extension " +
+						'to Shieldmaiden with one click on the <button class="btn btn-sm bg-neutral-5"><i class="fas fa-sync-alt" aria-hidden="true"></i></button> button.</p>' +
 						"Every time changes are made to the original character sheet, it has to be revisited to update it in the extension, then the Sync button in Shieldmaiden must be used to update the player again.",
-						icon: "fas fa-sync-alt"
-					}
-				]
-			}
-		},
-		computed: {
-			...mapGetters(["tier"]),
+					icon: "fas fa-sync-alt",
+				},
+			],
+		};
+	},
+	computed: {
+		...mapGetters(["tier"]),
+	},
+	methods: {
+		previous() {
+			this.step--;
 		},
-		methods: {
-			previous() {
-				this.step--;
-			},
-			next() {
-				this.step++;
-			}
+		next() {
+			this.step++;
 		},
-		async mounted() {
-			this.extensionVersion = await extensionInstalled();
-		}
-	};
+	},
+	async mounted() {
+		this.extensionVersion = await extensionInstalled();
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-	.q-stepper {
-		border: none;
-		padding: 0;
-	}
-	.extension-icon {
-		border-radius: 25px;
-		margin-top: 15px;
-		height: 50px;
-		width: 165px;
-		background-size: contain;
-		background-repeat: no-repeat;
-		background-image: url("../../assets/_img/CharacterSyncExtensionIcon.webp");
-	}
+.q-stepper {
+	border: none;
+	padding: 0;
+}
+.extension-icon {
+	border-radius: 25px;
+	margin-top: 15px;
+	height: 50px;
+	width: 165px;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-image: url("../../assets/_img/CharacterSyncExtensionIcon.webp");
+}
 </style>
diff --git a/src/components/encounters/General.vue b/src/components/encounters/General.vue
index d2f9fbc0..609730e9 100644
--- a/src/components/encounters/General.vue
+++ b/src/components/encounters/General.vue
@@ -65,7 +65,7 @@
 				</ValidationProvider>
 
 				<hk-background-select
-					v-if="demo || (tier && tier.name !== 'Free')"
+					v-if="demo || (tier && tier.price !== 'Free')"
 					v-model="editableEncounter.hk_background"
 					label="Background"
 					:disable="!!editableEncounter.background"
@@ -101,7 +101,7 @@
 								<hk-popover
 									slot="append"
 									header="Custom background"
-									v-if="demo || (tier && tier.name !== 'Free')"
+									v-if="demo || (tier && tier.price !== 'Free')"
 								>
 									<i class="fas fa-info-circle" aria-hidden="true" />
 									<template #content>
@@ -113,7 +113,7 @@
 					</div>
 				</ValidationProvider>
 
-				<template v-if="demo || (tier && tier.name !== 'Free')">
+				<template v-if="demo || (tier && tier.price !== 'Free')">
 					<h3>
 						Background effects
 						<q-icon name="fas fa-eye" class="blue ml-1 pointer" @click="image = true">
@@ -132,7 +132,7 @@
 					</q-icon>
 				</div>
 
-				<hk-card v-if="!demo && (!tier || tier.name === 'Free')">
+				<hk-card v-if="!demo && (!tier || tier.price === 'Free')">
 					<div slot="header" class="card-header">
 						<span>
 							<i class="fas fa-cloud-showers" aria-hidden="true" />
@@ -167,7 +167,7 @@
 			</q-form>
 		</ValidationObserver>
 
-		<q-dialog v-if="demo || (tier && tier.name !== 'Free')" v-model="image" full-height full-width>
+		<q-dialog v-if="demo || (tier && tier.price !== 'Free')" v-model="image" full-height full-width>
 			<q-card :dark="$store.getters.theme === 'dark'">
 				<q-toolbar class="bg-neutral-9">
 					<div>Background preview</div>
diff --git a/src/components/encounters/Overview.vue b/src/components/encounters/Overview.vue
index 5490f8be..64688709 100644
--- a/src/components/encounters/Overview.vue
+++ b/src/components/encounters/Overview.vue
@@ -260,7 +260,7 @@
 				</template>
 				<hk-loader v-else />
 			</hk-card>
-			<hk-card v-if="demo || (tier && tier.name === 'Free')" class="background-effects">
+			<hk-card v-if="demo || (tier && tier.price === 'Free')" class="background-effects">
 				<video
 					slot="image"
 					class="video"
diff --git a/src/components/hk-components/hk-image-uploader.vue b/src/components/hk-components/hk-image-uploader.vue
index d8747d9a..019fb51f 100644
--- a/src/components/hk-components/hk-image-uploader.vue
+++ b/src/components/hk-components/hk-image-uploader.vue
@@ -6,16 +6,14 @@
 					Add avatar
 					<q-btn icon="close" no-caps flat dense @click="cancel" />
 				</div>
-				<div 
-					v-if="current_avatar"
-					class="current-avatar"
-				>
+				<div v-if="current_avatar" class="current-avatar">
 					<div class="d-flex justify-content-start items-center">
-						<div 
-							class="img" 
-							:style="{ 
-								backgroundImage: `url('${current_avatar}')` 
-							}"/>
+						<div
+							class="img"
+							:style="{
+								backgroundImage: `url('${current_avatar}')`,
+							}"
+						/>
 						Current avatar
 					</div>
 					<button class="btn btn-sm bg-neutral-5 my-2" @click="clear">
@@ -24,21 +22,21 @@
 				</div>
 				<div class="card-body">
 					<q-form>
-						<div v-if="tier && tier.name !== 'Free'">
+						<div v-if="tier && tier.price !== 'Free'">
 							<div class="label">
 								Crop and upload image
 								<div v-if="using_crop">
 									<hk-popover class="mr-2" header="Cropping">
 										<i class="fas fa-info-circle" aria-hidden="true" />
 										<template #content>
-											You can use scroll to <em>zoom</em> and <em>position</em> <br/>
+											You can use scroll to <em>zoom</em> and <em>position</em> <br />
 											the image by dragging it.
 										</template>
 									</hk-popover>
-									<q-btn  no-caps flat dense icon="close" size="sm" @click="stopCrop" class="red" />
+									<q-btn no-caps flat dense icon="close" size="sm" @click="stopCrop" class="red" />
 								</div>
 							</div>
-							<croppa 
+							<croppa
 								v-model="crop"
 								:width="250"
 								:height="250"
@@ -52,42 +50,45 @@
 							/>
 							<div v-if="using_crop" class="d-flex justify-content-center">
 								<q-btn no-caps flat icon="fas fa-undo" @click="crop.rotate(-1)" size="sm">
-									<q-tooltip anchor="top middle" self="center middle">
-										Rotate
-									</q-tooltip>
+									<q-tooltip anchor="top middle" self="center middle"> Rotate </q-tooltip>
 								</q-btn>
 								<q-btn no-caps flat icon="fas fa-arrow-up" @click="crop.flipY()" size="sm">
-									<q-tooltip anchor="top middle" self="center middle">
-										Flip Y
-									</q-tooltip>
+									<q-tooltip anchor="top middle" self="center middle"> Flip Y </q-tooltip>
 								</q-btn>
 								<q-btn no-caps flat icon="fas fa-arrow-right" @click="crop.flipX()" size="sm">
-									<q-tooltip anchor="top middle" self="center middle">
-										Flip X
-									</q-tooltip>
+									<q-tooltip anchor="top middle" self="center middle"> Flip X </q-tooltip>
 								</q-btn>
 							</div>
 						</div>
 						<div v-else-if="tier">
-							<p>
-								Do you want to <strong>crop</strong> and <strong>upload</strong> avatars?
-							</p>
+							<p>Do you want to <strong>crop</strong> and <strong>upload</strong> avatars?</p>
 
-							<a class="btn btn-block bg-patreon-red" href="https://www.patreon.com/join/shieldmaidenapp" rel="noopener" target="_blank">
-							<i class="fab fa-patreon black" aria-hidden="true" />
+							<a
+								class="btn btn-block bg-patreon-red"
+								href="https://www.patreon.com/join/shieldmaidenapp"
+								rel="noopener"
+								target="_blank"
+							>
+								<i class="fab fa-patreon black" aria-hidden="true" />
 								Support us on Patreon
 							</a>
 						</div>
 						<template v-if="!using_crop">
 							<hr />
 							Enter an image url
-							<ValidationProvider rules="url|max:2000" name="Avatar" v-slot="{ errors, invalid, validated }">
-								<q-input 
-									:dark="$store.getters.theme === 'dark'" filled square
+							<ValidationProvider
+								rules="url|max:2000"
+								name="Avatar"
+								v-slot="{ errors, invalid, validated }"
+							>
+								<q-input
+									:dark="$store.getters.theme === 'dark'"
+									filled
+									square
 									label="Image URL"
-									autocomplete="off"  
-									type="text" 
-									v-model="url" 
+									autocomplete="off"
+									type="text"
+									v-model="url"
 									maxLength="2000"
 									:error="invalid && validated"
 									:error-message="errors[0]"
@@ -113,125 +114,125 @@
 </template>
 
 <script>
-	import { mapGetters } from "vuex";
-	import hkPopover from './hk-popover.vue';
+import { mapGetters } from "vuex";
+import hkPopover from "./hk-popover.vue";
 
-	export default {
-  components: { hkPopover },
-		name: "hk-image-uploader",
-		props: {
-			avatar: {
-				type: String,
-			},
-			storage_avatar: {
-				type: String,
-			},
-			preview_new_upload: {
-				type: String
-			},
-			width: {
-				type: Number,
-				default: 60
-			},
-			height: {
-				type: Number,
-				default: 60
-			},
+export default {
+	components: { hkPopover },
+	name: "hk-image-uploader",
+	props: {
+		avatar: {
+			type: String,
 		},
-		data() {
-			return {
-				using_crop: false,
-				url: this.avatar || undefined,
-				crop: {}
-			}
+		storage_avatar: {
+			type: String,
+		},
+		preview_new_upload: {
+			type: String,
+		},
+		width: {
+			type: Number,
+			default: 60,
+		},
+		height: {
+			type: Number,
+			default: 60,
+		},
+	},
+	data() {
+		return {
+			using_crop: false,
+			url: this.avatar || undefined,
+			crop: {},
+		};
+	},
+	computed: {
+		...mapGetters(["tier"]),
+		current_avatar() {
+			return this.preview_new_upload || this.storage_avatar || this.avatar;
+		},
+	},
+	methods: {
+		startCrop() {
+			this.using_crop = true;
+		},
+		stopCrop() {
+			this.crop.remove();
+			this.using_crop = false;
 		},
-		computed: {
-			...mapGetters(["tier"]),
-			current_avatar() {
-				return this.preview_new_upload || this.storage_avatar || this.avatar;
+		acceptAvatar(valid) {
+			if (this.using_crop) {
+				this.acceptCrop();
+			} else {
+				this.acceptUrl(valid);
 			}
 		},
-		methods: {
-			startCrop() {
-				this.using_crop = true;
-			},
-			stopCrop() {
-				this.crop.remove();
-				this.using_crop = false;
-			},
-			acceptAvatar(valid) {
-				if(this.using_crop) {
-					this.acceptCrop();
-				} else {
-					this.acceptUrl(valid);
-				}
-			},
-			async acceptCrop() {
-				const img = new Image(); // Create a new blank image
+		async acceptCrop() {
+			const img = new Image(); // Create a new blank image
 
-				// Set the cropped image as the src for the blank image
-				img.src = this.crop.generateDataUrl("image/webp");
+			// Set the cropped image as the src for the blank image
+			img.src = this.crop.generateDataUrl("image/webp");
 
-				// Resize the image to given dimensions and emit the blob + dataUrl
-				// The blob can be uploaded to firebase
-				// The dataUrl can be used to show a preview
-				img.onload = () => {
-					const canvas = document.createElement('canvas');
-					canvas.width = this.width;
-					canvas.height = this.height;
-					const ctx = canvas.getContext('2d');
-					ctx.drawImage(img, 0, 0, this.width, this.height);
-	
-					canvas.toBlob((blob) => {
-						this.$emit("crop", { blob: blob, dataUrl: canvas.toDataURL() });
-					}, "image/webp");
-				}
-			},
-			acceptUrl(valid) {
-				if(valid) {
-					this.$emit("url", this.url);
-				}
-			},
-			cancel() {
-				this.$emit("cancel");
-			},
-			clear() {
-				this.$emit("clear");
+			// Resize the image to given dimensions and emit the blob + dataUrl
+			// The blob can be uploaded to firebase
+			// The dataUrl can be used to show a preview
+			img.onload = () => {
+				const canvas = document.createElement("canvas");
+				canvas.width = this.width;
+				canvas.height = this.height;
+				const ctx = canvas.getContext("2d");
+				ctx.drawImage(img, 0, 0, this.width, this.height);
+
+				canvas.toBlob((blob) => {
+					this.$emit("crop", { blob: blob, dataUrl: canvas.toDataURL() });
+				}, "image/webp");
+			};
+		},
+		acceptUrl(valid) {
+			if (valid) {
+				this.$emit("url", this.url);
 			}
-		}
-	}
+		},
+		cancel() {
+			this.$emit("cancel");
+		},
+		clear() {
+			this.$emit("clear");
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-	.label {
-		display: flex;
-		justify-content: space-between;
-		margin-bottom: 5px;
-		align-items: center;
-		line-height: 25px;
-		padding-right: 8px;
+.label {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 5px;
+	align-items: center;
+	line-height: 25px;
+	padding-right: 8px;
 
-		.hk-popover i {
-			vertical-align: -1px;
-		}
+	.hk-popover i {
+		vertical-align: -1px;
 	}
-	.current-avatar {
-		background-color: $neutral-7;
-		border-bottom: solid 1px $neutral-5;
-		display: flex;
-		justify-content: space-between;
-		padding-right: 0.5rem;
+}
+.current-avatar {
+	background-color: $neutral-7;
+	border-bottom: solid 1px $neutral-5;
+	display: flex;
+	justify-content: space-between;
+	padding-right: 0.5rem;
 
-		.img {
-			margin-right: 10px;
-			border: solid 1px $neutral-3;
-			background-size: cover;
-			background-position: center top;
-			color: $neutral-2;
-			background-color: $neutral-9;
-			border-radius: 0;
-			width: 47px;
-			height: 47px;
-		}
+	.img {
+		margin-right: 10px;
+		border: solid 1px $neutral-3;
+		background-size: cover;
+		background-position: center top;
+		color: $neutral-2;
+		background-color: $neutral-9;
+		border-radius: 0;
+		width: 47px;
+		height: 47px;
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/views/UserContent/Campaigns/EditCampaign.vue b/src/views/UserContent/Campaigns/EditCampaign.vue
index 4212d5b2..15103a1f 100644
--- a/src/views/UserContent/Campaigns/EditCampaign.vue
+++ b/src/views/UserContent/Campaigns/EditCampaign.vue
@@ -36,7 +36,7 @@
 						/>
 
 						<hk-background-select
-							v-if="tier && tier.name !== 'Free'"
+							v-if="tier && tier.price !== 'Free'"
 							v-model="editCampaign.hk_background"
 							label="Background"
 							:disable="!!editCampaign.background"
@@ -86,7 +86,7 @@
 										<hk-popover
 											slot="append"
 											header="Custom background"
-											v-if="tier && tier.name !== 'Free'"
+											v-if="tier && tier.price !== 'Free'"
 										>
 											<i class="fas fa-info-circle" aria-hidden="true" />
 											<template #content>
diff --git a/src/views/UserContent/Items/Items.vue b/src/views/UserContent/Items/Items.vue
index 21774561..69576cb4 100644
--- a/src/views/UserContent/Items/Items.vue
+++ b/src/views/UserContent/Items/Items.vue
@@ -4,16 +4,15 @@
 			<ContentHeader type="items" />
 
 			<div class="card-body" v-if="!loading_items">
-				<p class="neutral-2">
-					These are your custom Items that you can use in your campaigns.
-				</p>
+				<p class="neutral-2">These are your custom Items that you can use in your campaigns.</p>
 				<template v-if="items.length">
 					<q-input
-						:dark="$store.getters.theme !== 'light'" 
+						:dark="$store.getters.theme !== 'light'"
 						v-model="search"
-						borderless 
-						filled square
-						debounce="300" 
+						borderless
+						filled
+						square
+						debounce="300"
 						clearable
 						placeholder="Search"
 					>
@@ -34,7 +33,6 @@
 						wrap-cells
 					>
 						<template v-slot:body-cell="props">
-
 							<q-td
 								v-if="props.col.name === 'image'"
 								class="avatar"
@@ -56,28 +54,34 @@
 								<div class="text-right d-flex justify-content-end">
 									<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
 										<i aria-hidden="true" class="fas fa-pencil" />
-										<q-tooltip anchor="top middle" self="center middle">
-											Edit
-										</q-tooltip>
+										<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
 									</router-link>
-									<a class="btn btn-sm bg-neutral-5 ml-2" @click="confirmDelete($event, props.key, props.row)">
+									<a
+										class="btn btn-sm bg-neutral-5 ml-2"
+										@click="confirmDelete($event, props.key, props.row)"
+									>
 										<i aria-hidden="true" class="fas fa-trash-alt" />
-										<q-tooltip anchor="top middle" self="center middle">
-											Delete
-										</q-tooltip>
+										<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
 									</a>
 								</div>
 							</q-td>
 						</template>
-						<div slot="no-data" />	
+						<div slot="no-data" />
 					</q-table>
 				</template>
-				<template >
-				</template>
-				<router-link v-if="!overencumbered && !items.length" to="/content/items/add-item" class="btn btn-lg bg-neutral-5">
+				<template> </template>
+				<router-link
+					v-if="!overencumbered && !items.length"
+					to="/content/items/add-item"
+					class="btn btn-lg bg-neutral-5"
+				>
 					<i aria-hidden="true" class="fas fa-plus green mr-1" /> Create your first item
 				</router-link>
-				<router-link v-else-if="tier.name === 'Free'" class="btn bg-neutral-8 btn-block" to="/patreon">
+				<router-link
+					v-else-if="tier.price === 'Free'"
+					class="btn bg-neutral-8 btn-block"
+					to="/patreon"
+				>
 					Get more item slots
 				</router-link>
 			</div>
@@ -87,85 +91,90 @@
 </template>
 
 <script>
-	import { mapGetters, mapActions } from 'vuex';
-	import ContentHeader from "src/components/userContent/ContentHeader";
+import { mapGetters, mapActions } from "vuex";
+import ContentHeader from "src/components/userContent/ContentHeader";
 
-	export default {
-		name: 'Items',
-		components: {
-			ContentHeader
-		},
-		data() {
-			return {
-				userId: this.$store.getters.user.uid,
-				loading_items: true,
-				search: "",
-				
-				columns: [
-					{
-						name: "image",
-						label: "",
-						field: "image",
-						align: "left",
-					},
-					{
-						name: "name",
-						label: "Name",
-						field: "name",
-						sortable: true,
-						align: "left",
-						classes: "truncate-cell",
-						format: val => val.capitalizeEach()
-					},
+export default {
+	name: "Items",
+	components: {
+		ContentHeader,
+	},
+	data() {
+		return {
+			userId: this.$store.getters.user.uid,
+			loading_items: true,
+			search: "",
+
+			columns: [
+				{
+					name: "image",
+					label: "",
+					field: "image",
+					align: "left",
+				},
+				{
+					name: "name",
+					label: "Name",
+					field: "name",
+					sortable: true,
+					align: "left",
+					classes: "truncate-cell",
+					format: (val) => val.capitalizeEach(),
+				},
+				{
+					name: "actions",
+					label: "",
+					align: "right",
+				},
+			],
+		};
+	},
+	computed: {
+		...mapGetters(["tier", "overencumbered"]),
+		...mapGetters("items", ["items"]),
+	},
+	async mounted() {
+		await this.get_items();
+		this.loading_items = false;
+	},
+	methods: {
+		...mapActions("items", ["get_items", "delete_item"]),
+		confirmDelete(e, key, item) {
+			//Instantly delete when shift is held
+			if (e.shiftKey) {
+				this.deleteItem(key);
+			} else {
+				this.$snotify.error(
+					"Are you sure you want to delete " +
+						item.name +
+						"? It will also remove it from the campaign inventories it is linked to.",
+					"Delete item",
 					{
-						name: "actions",
-						label: "",
-						align: "right"
-					}
-				],
-			}
-		},
-		computed: {
-			...mapGetters([
-				'tier',
-				'overencumbered',
-			]),
-			...mapGetters("items", ["items"]),
-		},
-		async mounted() {
-			await this.get_items();
-			this.loading_items = false;
-		},
-		methods: {
-			...mapActions("items", ["get_items", "delete_item"]),
-			confirmDelete(e, key, item) {
-				//Instantly delete when shift is held
-				if(e.shiftKey) {
-					this.deleteItem(key);
-				} else {
-					this.$snotify.error('Are you sure you want to delete ' + item.name + '? It will also remove it from the campaign inventories it is linked to.', 'Delete item', {
 						timeout: false,
 						buttons: [
 							{
-								text: 'Yes', action: (toast) => { 
-								this.deleteItem(key)
-								this.$snotify.remove(toast.id); 
-								}, 
-								bold: false
+								text: "Yes",
+								action: (toast) => {
+									this.deleteItem(key);
+									this.$snotify.remove(toast.id);
+								},
+								bold: false,
 							},
 							{
-								text: 'No', action: (toast) => { 
-									this.$snotify.remove(toast.id); 
-								}, 
-								bold: true
+								text: "No",
+								action: (toast) => {
+									this.$snotify.remove(toast.id);
+								},
+								bold: true,
 							},
-						]
-					});
-				}
-			},
-			deleteItem(key) {
-				this.delete_item(key);
+						],
+					}
+				);
 			}
-		}
-	}
-</script>
\ No newline at end of file
+		},
+		deleteItem(key) {
+			this.delete_item(key);
+		},
+	},
+};
+</script>
diff --git a/src/views/UserContent/ManageContent.vue b/src/views/UserContent/ManageContent.vue
index c26d5f42..32a91cd0 100644
--- a/src/views/UserContent/ManageContent.vue
+++ b/src/views/UserContent/ManageContent.vue
@@ -8,7 +8,7 @@
 				</p>
 				<router-link to="/patreon" class="btn btn-block btn-lg bg-neutral-9 mt-2">
 					<i aria-hidden="true" class="fab fa-patreon patreon-red mr-2" />
-					{{ tier.name === "Free" ? "Get" : "Upgrade" }} subscription
+					{{ tier.price === "Free" ? "Get" : "Upgrade" }} subscription
 				</router-link>
 			</template>
 
diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index c423a1d5..b55a7de7 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -56,16 +56,17 @@
 									:key="col.name"
 									:props="props"
 									:auto-width="col.name !== 'name'"
-									:style="col.name === 'avatar' && avatar(props.row) ? `background-image: url('${avatar(props.row)}')` : ''"
+									:style="
+										col.name === 'avatar' && avatar(props.row)
+											? `background-image: url('${avatar(props.row)}')`
+											: ''
+									"
 								>
 									<template v-if="col.name === 'avatar'">
 										<i aria-hidden="true" v-if="!avatar(props.row)" class="hki-monster" />
 									</template>
 									<template v-else-if="col.name !== 'actions'">
-										<router-link
-											v-if="col.name === 'name'"
-											:to="`${$route.path}/${props.key}`"
-										>
+										<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.key}`">
 											{{ col.value }}
 										</router-link>
 										<template v-else>
@@ -73,7 +74,10 @@
 										</template>
 									</template>
 									<div v-else class="text-right d-flex justify-content-between">
-										<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
+										<router-link
+											class="btn btn-sm bg-neutral-5"
+											:to="`${$route.path}/${props.key}`"
+										>
 											<i aria-hidden="true" class="fas fa-pencil" />
 											<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
 										</router-link>
@@ -106,7 +110,7 @@
 					<i aria-hidden="true" class="fas fa-plus green mr-1" /> Create your first NPC
 				</router-link>
 				<router-link
-					v-else-if="tier.name === 'Free'"
+					v-else-if="tier.price === 'Free'"
 					class="btn bg-neutral-8 btn-block"
 					to="/patreon"
 				>
diff --git a/src/views/UserContent/Players/EditPlayer.vue b/src/views/UserContent/Players/EditPlayer.vue
index 61468445..59aa47b4 100644
--- a/src/views/UserContent/Players/EditPlayer.vue
+++ b/src/views/UserContent/Players/EditPlayer.vue
@@ -82,7 +82,7 @@
 									/>
 
 									<!-- Character Sync -->
-									<template v-if="tier.name !== 'Free'">
+									<template v-if="tier.price !== 'Free'">
 										<div v-if="player.sync_character">
 											<q-input
 												:dark="$store.getters.theme === 'dark'"
@@ -254,7 +254,9 @@
 												:error-message="errors[0]"
 											>
 												<q-icon slot="prepend" name="fas fa-heart" />
-												<q-tooltip anchor="top middle" self="center middle">Maximum Hit Points</q-tooltip>
+												<q-tooltip anchor="top middle" self="center middle"
+													>Maximum Hit Points</q-tooltip
+												>
 											</q-input>
 										</ValidationProvider>
 									</div>
@@ -304,7 +306,9 @@
 												:error-message="errors[0]"
 											>
 												<q-icon slot="prepend" name="fas fa-hand-holding-magic" />
-												<q-tooltip anchor="top middle" self="center middle">Spell save DC</q-tooltip>
+												<q-tooltip anchor="top middle" self="center middle"
+													>Spell save DC</q-tooltip
+												>
 											</q-input>
 										</ValidationProvider>
 									</div>
@@ -696,7 +700,7 @@
 		</q-dialog>
 
 		<!-- LINK CHARACTER -->
-		<q-dialog v-if="tier.name !== 'Free'" v-model="link_dialog">
+		<q-dialog v-if="tier.price !== 'Free'" v-model="link_dialog">
 			<hk-link-character @link="linkCharacter" />
 		</q-dialog>
 	</div>
diff --git a/src/views/UserContent/Players/index.vue b/src/views/UserContent/Players/index.vue
index 2d530794..86d9e324 100644
--- a/src/views/UserContent/Players/index.vue
+++ b/src/views/UserContent/Players/index.vue
@@ -38,7 +38,11 @@
 								:key="col.name"
 								:props="props"
 								:auto-width="col.name !== 'name'"
-								:style="col.name === 'avatar' && avatar(props.row) ? `background-image: url('${avatar(props.row)}')` : ''"
+								:style="
+									col.name === 'avatar' && avatar(props.row)
+										? `background-image: url('${avatar(props.row)}')`
+										: ''
+								"
 							>
 								<template v-if="col.name === 'avatar'">
 									<i aria-hidden="true" v-if="!avatar(props.row)" class="hki-player" />
@@ -52,7 +56,7 @@
 									</template>
 								</template>
 								<div v-else class="text-right d-flex justify-content-end">
-									<template v-if="tier.name !== 'Free' && Object.keys(sync_characters).length">
+									<template v-if="tier.price !== 'Free' && Object.keys(sync_characters).length">
 										<button
 											v-if="
 												!props.row.sync_character || !(props.row.sync_character in sync_characters)
@@ -129,7 +133,7 @@
 				<i aria-hidden="true" class="fas fa-plus green mr-1" /> Create your first player
 			</router-link>
 			<router-link
-				v-else-if="tier.name === 'Free'"
+				v-else-if="tier.price === 'Free'"
 				class="btn bg-neutral-8 btn-block"
 				to="/patreon"
 			>
diff --git a/src/views/UserContent/Reminders/index.vue b/src/views/UserContent/Reminders/index.vue
index c78d712f..ed7466d6 100644
--- a/src/views/UserContent/Reminders/index.vue
+++ b/src/views/UserContent/Reminders/index.vue
@@ -66,7 +66,7 @@
 				<i aria-hidden="true" class="fas fa-plus green"></i> Create your first reminder
 			</router-link>
 			<router-link
-				v-else-if="tier.name === 'Free'"
+				v-else-if="tier.price === 'Free'"
 				class="btn bg-neutral-8 btn-block"
 				to="/patreon"
 			>
diff --git a/src/views/UserContent/Spells/Spells.vue b/src/views/UserContent/Spells/Spells.vue
index 4b2dcc54..673e7759 100644
--- a/src/views/UserContent/Spells/Spells.vue
+++ b/src/views/UserContent/Spells/Spells.vue
@@ -57,10 +57,7 @@
 									:auto-width="col.name !== 'name'"
 								>
 									<template v-if="col.name !== 'actions'">
-										<router-link
-											v-if="col.name === 'name'"
-											:to="`${$route.path}/${props.key}`"
-										>
+										<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.key}`">
 											{{ col.value }}
 										</router-link>
 										<template v-else>
@@ -68,7 +65,10 @@
 										</template>
 									</template>
 									<div v-else class="d-flex justify-content-end">
-										<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
+										<router-link
+											class="btn btn-sm bg-neutral-5"
+											:to="`${$route.path}/${props.key}`"
+										>
 											<i aria-hidden="true" class="fas fa-pencil" />
 											<q-tooltip anchor="top middle" self="center middle">Edit</q-tooltip>
 										</router-link>
@@ -101,7 +101,7 @@
 					<i aria-hidden="true" class="fas fa-plus green mr-1" /> Create your first Spell
 				</router-link>
 				<router-link
-					v-else-if="tier.name === 'Free'"
+					v-else-if="tier.price === 'Free'"
 					class="btn bg-neutral-8 btn-block"
 					to="/patreon"
 				>
diff --git a/src/views/profile/Profile.vue b/src/views/profile/Profile.vue
index 16153485..aa34c03e 100644
--- a/src/views/profile/Profile.vue
+++ b/src/views/profile/Profile.vue
@@ -7,7 +7,7 @@
 				<hk-card header="Your subscription">
 					<div class="card-body">
 						<!-- HAS A SUBSCRIPTION -->
-						<template v-if="tier && tier.name !== 'Free'">
+						<template v-if="tier && tier.price !== 'Free'">
 							<!-- PATRON -->
 							<div v-if="userInfo.patron">
 								<h3>
@@ -61,11 +61,11 @@
 						<h3 class="mb-1">
 							Subscription tier: <span class="patreon-red">{{ tier.name }}</span>
 						</h3>
-						<p v-if="tier.name == 'Deity'" class="neutral-2">You have unlimited power.</p>
+						<p v-if="tier.name === 'Deity'" class="neutral-2">You have unlimited power.</p>
 
 						<Tier />
 						<router-link
-							v-if="tier.name === 'Free'"
+							v-if="tier.price === 'Free'"
 							class="btn btn-block bg-patreon-red mt-4"
 							to="/patreon"
 						>
@@ -110,7 +110,7 @@
 					<div class="card-body">
 						<Content />
 						<router-link
-							v-if="tier.name != 'Deity'"
+							v-if="tier.name !== 'Deity'"
 							class="btn btn-block bg-neutral-5 mt-3"
 							to="/patreon"
 						>

From dc86d310b92556e39b51a5380a4e170767ca9950 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Mon, 6 May 2024 21:16:57 +0200
Subject: [PATCH 14/24] Import content only for patrons

---
 src/components/Sidebar.vue                    |  2 +-
 src/components/Tiers.vue                      |  3 +
 src/components/userContent/Tier.vue           |  3 +
 src/views/Pages/Patreon.vue                   | 69 ++++++++++++-------
 src/views/UserContent/ImportContent/index.vue | 32 ++++++---
 5 files changed, 71 insertions(+), 38 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 7ffde8aa..5af3996d 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -358,7 +358,7 @@ export default {
 					name: "Facebook",
 					icon: "fab fa-facebook",
 					url: "https://www.facebook.com/shieldmaidenapp",
-				}
+				},
 			],
 		};
 	},
diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index 34a1365d..cbd394d8 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -147,6 +147,9 @@ export default {
 				background: {
 					title: "Background effects",
 				},
+				import: {
+					title: "Import content",
+				},
 				storage: {
 					title: "Storage",
 				},
diff --git a/src/components/userContent/Tier.vue b/src/components/userContent/Tier.vue
index 0a630cb5..e795299c 100644
--- a/src/components/userContent/Tier.vue
+++ b/src/components/userContent/Tier.vue
@@ -86,6 +86,9 @@ export default {
 				background: {
 					title: "Background effects",
 				},
+				import: {
+					title: "Import content",
+				},
 				storage: {
 					title: "Storage",
 				},
diff --git a/src/views/Pages/Patreon.vue b/src/views/Pages/Patreon.vue
index 4cbf2a68..fd4563d1 100644
--- a/src/views/Pages/Patreon.vue
+++ b/src/views/Pages/Patreon.vue
@@ -4,30 +4,47 @@
 			<div class="content">
 				<h1 class="text-center">Get a Shieldmaiden subscription</h1>
 				<p class="text-center">
-					We use Patreon for our subscriptions. Once you make a choice, 
-					you will be redirected to <a class="patreon-red" href="https://www.patreon.com/shieldmaidenapp" target="_blank" rel="noopener">Patreon</a> to finish payment.<br/>
+					We use Patreon for our subscriptions. Once you make a choice, you will be redirected to
+					<a
+						class="patreon-red"
+						href="https://www.patreon.com/shieldmaidenapp"
+						target="_blank"
+						rel="noopener"
+						>Patreon</a
+					>
+					to finish payment.<br />
+					Make sure that you use the <strong>same emailadres</strong> for both your Patreon and
+					Shieldmaiden account.
 				</p>
+
 				<Tiers class="mb-4" />
 				<hk-card header="Why do you have to pay?">
 					<div class="card-body">
 						<p>
-							We wish we could offer the app for free. This is why we do have a free tier 
-							that should be sufficient for most users. If you manage your data well, 
-							you can get complete use out of our app without having to pay anything. 
-							All the features we develop will always be accessible for all users, without cost. You only pay for more storage.<br/>
-							Unfortunately creating an app brings some costs with it. 
-							We need to invest a lot of time in maintaining and expanding the app. 
-							And there are the costs of hosting Shieldmaiden, as our user base expands, the costs increase.
+							We wish we could offer the app for free. This is why we do have a free tier that
+							should be sufficient for most users. All the essential features will always be
+							accessible for all users, without cost. You only pay for more storage and quality of
+							life features.<br />
+							Unfortunately creating an app brings some costs with it. We need to invest a lot of
+							time in maintaining and expanding the app. And there are the costs of hosting
+							Shieldmaiden, as our user base expands, the costs increase.
 						</p>
 
 						<h2>Building together</h2>
 						<p>
-							Our goal is not to earn money, our goal is to create an initiative tracker that is useful for the entire community. <br/>
-							To reach this goal, we will need support. This is why we have set up a Patreon. 
-							This way you can help us in achieving this goal and benefit from the extra's that come with it.
+							Our goal is not to earn money, our goal is to create a D&D initiative tracker that is
+							useful for the entire community. <br />
+							To reach this goal, we will need support. This is why we have set up a Patreon. This
+							way you can help us in achieving this goal and benefit from the extra's that come with
+							it.
 						</p>
 
-						<a class="btn bg-patreon-red btn-block" href="https://www.patreon.com/shieldmaidenapp" target="_blank" rel="noopener">
+						<a
+							class="btn bg-patreon-red btn-block"
+							href="https://www.patreon.com/shieldmaidenapp"
+							target="_blank"
+							rel="noopener"
+						>
 							<i aria-hidden="true" class="fab fa-patreon black"></i> Support us
 						</a>
 					</div>
@@ -39,16 +56,16 @@
 </template>
 
 <script>
-	import Tiers from 'src/components/Tiers.vue'
-	import Footer from 'src/components/Footer.vue'
+import Tiers from "src/components/Tiers.vue";
+import Footer from "src/components/Footer.vue";
 
-	export default {
-		name: 'Patreon',
-		components: {
-			Tiers,
-			Footer
-		}
-	}
+export default {
+	name: "Patreon",
+	components: {
+		Tiers,
+		Footer,
+	},
+};
 </script>
 
 <style lang="scss" scoped>
@@ -60,9 +77,9 @@
 	grid-template-columns: auto;
 	grid-template-rows: 3fr 1fr;
 	grid-gap: 0;
-	grid-template-areas: 
-	"container"
-	"footer";
+	grid-template-areas:
+		"container"
+		"footer";
 
 	h1 {
 		margin-bottom: 40px;
@@ -76,4 +93,4 @@
 		margin-bottom: 40px;
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/UserContent/ImportContent/index.vue b/src/views/UserContent/ImportContent/index.vue
index 65f75a02..7f9a10c4 100644
--- a/src/views/UserContent/ImportContent/index.vue
+++ b/src/views/UserContent/ImportContent/index.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="d-flex justify-center">
-		<hk-card header="Shieldmaiden">
+	<div v-if="tier.price !== 'Free'" class="d-flex justify-center">
+		<hk-card header="Shieldmaiden" class="select">
 			<div class="card-body">
 				<p>Import a Shieldmaiden export</p>
 			</div>
@@ -8,7 +8,7 @@
 				<router-link to="/content/import/hk_import" class="btn btn-block">Select</router-link>
 			</div>
 		</hk-card>
-		<hk-card header="Convert Old" class="disabled">
+		<hk-card header="Convert Old" class="disabled select">
 			<div class="card-body">
 				<p>Convert your old exports to new format</p>
 			</div>
@@ -16,7 +16,7 @@
 				<button class="btn btn-block">Select</button>
 			</div>
 		</hk-card>
-		<hk-card header="External Source" class="disabled">
+		<hk-card header="External Source" class="disabled select">
 			<div class="card-body">
 				<p>Import from an external source</p>
 			</div>
@@ -24,7 +24,7 @@
 				<button class="btn btn-block">Select</button>
 			</div>
 		</hk-card>
-		<hk-card header="Sync Extension" class="disabled">
+		<hk-card header="Sync Extension" class="disabled select">
 			<div class="card-body">
 				<p>Import from the HK Content Sync Extension</p>
 			</div>
@@ -33,21 +33,31 @@
 			</div>
 		</hk-card>
 	</div>
+	<hk-card v-else header="Import content">
+		<div class="card-body d-flex flex-col justify-center text-center">
+			<h2>With a subscription you can import Shieldmaiden content created by others.</h2>
+			<p>
+				Content creators can export their entire one shots or campaigns from Shieldmaiden and you
+				will be able to import them including all encounters and monsters.
+			</p>
+			<router-link to="/patreon" class="btn btn-lg mt-2">Get a subscription</router-link>
+		</div>
+	</hk-card>
 </template>
 
 <script>
-export default {
-	name: "manage-content",
+import { mapGetters } from "vuex";
 
-	data() {
-		return {};
+export default {
+	name: "import-content",
+	computed: {
+		...mapGetters(["tier"]),
 	},
-	computed: {},
 };
 </script>
 
 <style lang="scss" scoped>
-.hk-card {
+.hk-card.select {
 	max-width: 200px;
 	margin: 10px;
 	user-select: none;

From 62a937f47e517f55bec5cb70620302b5e14a6e73 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Wed, 8 May 2024 10:30:00 +0200
Subject: [PATCH 15/24] Added benefit explanations

---
 src/views/Pages/AboutUs.vue | 592 +++++++++++++++++++-----------------
 src/views/Pages/Patreon.vue |  45 ++-
 2 files changed, 355 insertions(+), 282 deletions(-)

diff --git a/src/views/Pages/AboutUs.vue b/src/views/Pages/AboutUs.vue
index 208eb1f9..8edc52dd 100644
--- a/src/views/Pages/AboutUs.vue
+++ b/src/views/Pages/AboutUs.vue
@@ -6,160 +6,191 @@
 			</div>
 			<div class="card-body">
 				<p>
-					Shieldmaiden is created by two experienced Dungeons & Dragons players from Amsterdam. 
-					We were missing an encounter tracker that tended to all our needs, so we decided to build one ourselves.<br/> 
-					After some positive feedback from our fellow D&D players, we decided to share it with the public in Februari 2019.<br/>
+					As a DM, preparing and running combat encounters can be time consuming, challenging and
+					stressful. Shieldmaiden (formerly known as Harmless Key) stream lines combat leaving you
+					with more time to focus on the story you want to tell with an encounter.<br />
+					Shieldmaiden makes combat a breeze by keeping track of everything a DM needs during
+					combat, from hit points, initiative and AC, to concentration checks, conditions and
+					surprise rounds. Making combat faster, more accurate and hassle-free.
+				</p>
+				<p>
+					Shieldmaiden is created by two experienced Dungeons & Dragons players from Amsterdam. We
+					were missing an encounter tracker that tended to all our needs, so we decided to build one
+					ourselves.<br />
+					After some positive feedback from our fellow D&D players, we decided to share it with the
+					public in February 2019.<br />
 					Since then we've been improving and expending a lot and this is still going on.
 				</p>
-				<h3 class="mb-5">
-					We hope you get as much use out of Shieldmaiden as we do.
-				</h3>
-				<h2 class="written">Meet the team</h2>
-				<hk-card-deck class="mb-3">
-					<hk-card header="The Harmless">
-						<div class="card-body sheet">
-							<div class="character harm">
-								<div class="d-flex justify-content-start items-center">
-									<div class="img" :style="{'background-image': 'url(' + require('src/assets/_img/harm.jpg') + ')'}"></div>
-									<div>
-										Harm Manders<br/>
-										<small><i aria-hidden="true" class="neutral-3">Male human developer</i><br/>
-										<i>Level {{ getAge('1992-03-29') }}</i></small>
-									</div>
-								</div>
-								<div class="initiative text-center">
-									Proficiency 
-									<div class="score">+5</div>
-								</div>
-							</div>
-							<div class="row q-col-gutter-md">
-								<div class="col">
-									<h3>Abillity Scores</h3>
-									<ul class="abillities">
-										<li>Assembly <span class="score">10</span></li>
-										<li>CSS <span class="score">18</span></li>
-										<li>JS <span class="score">15</span></li>
-										<li>PHP <span class="score">12</span></li>
-										<li>Python <span class="score">19</span></li>
-										<li>R <span class="score">11</span></li>
-									</ul>
-								</div>
-								<div class="col">
-									<h3>Skills</h3>
-									<ul class="skills">
-										<hk-roll 
-											v-for="{skill, score, proficient} of skills.harm"
-											:key="skill"
-											:roll="{
-												d: 20, 
-												n: 1, 
-												m: score,
-												title: `${skill} check`,
-												entity_name: 'Harm', 
-												notify: true
-											}"
-										>
-											<li>
-												<span class="skill">
-													<i aria-hidden="true" :class="proficient ? 'fas' : 'far'" class="fa-circle mr-1" /> 
-													{{ skill }}
-												</span> 
-												<span class="score">
-													{{ score > 0 ? `+${score}` : score }}
-												</span>
-											</li>
-										</hk-roll>
-									</ul>
-								</div>
+				<h3 class="mb-0">We hope you get as much use out of Shieldmaiden as we do.</h3>
+			</div>
+		</hk-card>
+
+		<h2 class="written">Meet the team</h2>
+		<hk-card-deck>
+			<hk-card header="The Harmless">
+				<div class="card-body sheet">
+					<div class="character harm">
+						<div class="d-flex justify-content-start items-center">
+							<div
+								class="img"
+								:style="{ 'background-image': 'url(' + require('src/assets/_img/harm.jpg') + ')' }"
+							></div>
+							<div>
+								Harm Manders<br />
+								<small
+									><i aria-hidden="true" class="neutral-3">Male human developer</i><br />
+									<i>Level {{ getAge("1992-03-29") }}</i></small
+								>
 							</div>
 						</div>
-					</hk-card>
-					<hk-card header="The Key">
-						<div class="card-body sheet">
-							<div class="character key">
-								<div class="d-flex justify-content-start items-center">
-									<div class="img" :style="{'background-image': 'url(' + require('src/assets/_img/key.jpg') + ')'}"></div>
-									<div>
-										Key Roos<br/>
-										<small><i aria-hidden="true" class="neutral-3">Male human developer</i><br/>
-										<i>Level {{ getAge('1987-06-11') }}</i></small>
-									</div>
-								</div>
-								<div class="initiative text-center">
-									Proficiency 
-									<div class="score">+5</div>
-								</div>
-							</div>
-							<div class="row q-col-gutter-md">
-								<div class="col">
-									<h3>Abillity Scores</h3>
-									<ul class="abillities">
-										<li>Assembly <span class="score">9</span></li>
-										<li>CSS <span class="score">18</span></li>
-										<li>JS <span class="score">18</span></li>
-										<li>PHP <span class="score">14</span></li>
-										<li>Python <span class="score">10</span></li>
-										<li>R <span class="score">11</span></li>
-									</ul>
-								</div>
-								<div class="col">
-									<h3>Skills</h3>
-									<ul class="skills">
-										<hk-roll 
-											v-for="{skill, score, proficient} of skills.key"
-											:key="skill"
-											:roll="{
-												d: 20, 
-												n: 1, 
-												m: score,
-												title: `${skill} check`,
-												entity_name: 'Key', 
-												notify: true
-											}"
-										>
-											<li>
-												<span class="skill">
-													<i aria-hidden="true" :class="proficient ? 'fas' : 'far'" class="fa-circle mr-1" /> 
-													{{ skill }}
-												</span> 
-												<span class="score">
-													{{ score > 0 ? `+${score}` : score }}
-												</span>
-											</li>
-										</hk-roll>
-									</ul>
-								</div>
+						<div class="initiative text-center">
+							Proficiency
+							<div class="score">+5</div>
+						</div>
+					</div>
+					<div class="row q-col-gutter-md">
+						<div class="col">
+							<h3>Ability Scores</h3>
+							<ul class="abillities">
+								<li>Assembly <span class="score">10</span></li>
+								<li>CSS <span class="score">18</span></li>
+								<li>JS <span class="score">15</span></li>
+								<li>PHP <span class="score">12</span></li>
+								<li>Python <span class="score">19</span></li>
+								<li>R <span class="score">11</span></li>
+							</ul>
+						</div>
+						<div class="col">
+							<h3>Skills</h3>
+							<ul class="skills">
+								<hk-roll
+									v-for="{ skill, score, proficient } of skills.harm"
+									class="full-width"
+									:key="skill"
+									:roll="{
+										d: 20,
+										n: 1,
+										m: score,
+										title: `${skill} check`,
+										entity_name: 'Harm',
+										notify: true,
+									}"
+								>
+									<li>
+										<span class="skill">
+											<i
+												aria-hidden="true"
+												:class="proficient ? 'fas' : 'far'"
+												class="fa-circle mr-1"
+											/>
+											{{ skill }}
+										</span>
+										<span class="score">
+											{{ score > 0 ? `+${score}` : score }}
+										</span>
+									</li>
+								</hk-roll>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</hk-card>
+			<hk-card header="The Key">
+				<div class="card-body sheet">
+					<div class="character key">
+						<div class="d-flex justify-content-start items-center">
+							<div
+								class="img"
+								:style="{ 'background-image': 'url(' + require('src/assets/_img/key.jpg') + ')' }"
+							></div>
+							<div>
+								Key Roos<br />
+								<small
+									><i aria-hidden="true" class="neutral-3">Male human developer</i><br />
+									<i>Level {{ getAge("1987-06-11") }}</i></small
+								>
 							</div>
 						</div>
-					</hk-card>
-				</hk-card-deck>
-			</div>
-		</hk-card>
-
+						<div class="initiative text-center">
+							Proficiency
+							<div class="score">+5</div>
+						</div>
+					</div>
+					<div class="row q-col-gutter-md">
+						<div class="col">
+							<h3>Ability Scores</h3>
+							<ul class="abillities">
+								<li>Assembly <span class="score">9</span></li>
+								<li>CSS <span class="score">19</span></li>
+								<li>JS <span class="score">18</span></li>
+								<li>PHP <span class="score">14</span></li>
+								<li>Python <span class="score">10</span></li>
+								<li>R <span class="score">11</span></li>
+							</ul>
+						</div>
+						<div class="col">
+							<h3>Skills</h3>
+							<ul class="skills">
+								<hk-roll
+									v-for="{ skill, score, proficient } of skills.key"
+									class="full-width"
+									:key="skill"
+									:roll="{
+										d: 20,
+										n: 1,
+										m: score,
+										title: `${skill} check`,
+										entity_name: 'Key',
+										notify: true,
+									}"
+								>
+									<li>
+										<span class="skill">
+											<i
+												aria-hidden="true"
+												:class="proficient ? 'fas' : 'far'"
+												class="fa-circle mr-1"
+											/>
+											{{ skill }}
+										</span>
+										<span class="score">
+											{{ score > 0 ? `+${score}` : score }}
+										</span>
+									</li>
+								</hk-roll>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</hk-card>
+		</hk-card-deck>
 
 		<hk-card header="Special thanks">
 			<div class="card-body text-center">
 				<h2 class="written">Patrick Teunissen</h2>
 				<h3>For designing our logo!</h3>
-				<p class="mb-4">Patrick was nice enough to lend us his time and design the awesome logo for us.<br/>We couldn't be happier!</p>
+				<p class="mb-4">
+					Patrick was nice enough to lend us his time and design the awesome logo for us.<br />We
+					couldn't be happier!
+				</p>
 				<div class="row q-col-gutter-md">
-					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height:120px;">
-						<img class="icon" src="../../assets/_img/logo/logo-icon-green.svg"/>
+					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height: 120px">
+						<img class="icon" src="../../assets/_img/logo/logo-icon-green.svg" />
 					</div>
-					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height:120px;">
-						<img class="icon" src="../../assets/_img/logo/logo-icon-blue.svg"/>
+					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height: 120px">
+						<img class="icon" src="../../assets/_img/logo/logo-icon-blue.svg" />
 					</div>
-					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height:120px;">
-						<img class="icon" src="../../assets/_img/logo/logo-icon-red.svg"/>
+					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height: 120px">
+						<img class="icon" src="../../assets/_img/logo/logo-icon-red.svg" />
 					</div>
-					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height:120px;">
-						<img class="icon" src="../../assets/_img/logo/logo-icon-orange.svg"/>
+					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height: 120px">
+						<img class="icon" src="../../assets/_img/logo/logo-icon-orange.svg" />
 					</div>
-					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height:120px;">
-						<img class="icon" src="../../assets/_img/logo/logo-icon-cyan.svg"/>
+					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height: 120px">
+						<img class="icon" src="../../assets/_img/logo/logo-icon-cyan.svg" />
 					</div>
-					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height:120px;">
-						<img class="icon" src="../../assets/_img/logo/logo-icon-yellow.svg"/>
+					<div class="col-4 col-sm-2 d-flex justify-content-center" style="height: 120px">
+						<img class="icon" src="../../assets/_img/logo/logo-icon-yellow.svg" />
 					</div>
 				</div>
 			</div>
@@ -168,167 +199,166 @@
 </template>
 
 <script>
-	export default {
-		name: 'home',
-		data() {
-			return {
-				skills: {
-					harm: [
-						{
-							skill: "Bug creation",
-							score: 5,
-							proficient: true
-						},
-						{
-							skill: "Bug fixing",
-							score: 2
-						}
-					],
-					key: [
-						{
-							skill: "Complaining",
-							score: 8,
-							proficient: true
-						},
-						{
-							skill: "Guitar",
-							score: 1
-						},
-						{
-							skill: "Drinking",
-							score: 4
-						},
-						{
-							skill: "Sleeping",
-							score: -2
-						},
-					]
-				}
-			}
-		},
-		methods: {
-			getAge(dateString) {
-				var today = new Date();
-				var birthDate = new Date(dateString);
-				var age = today.getFullYear() - birthDate.getFullYear();
-				var m = today.getMonth() - birthDate.getMonth();
-				if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
-						age--;
-				}
-				return age;
+export default {
+	name: "home",
+	data() {
+		return {
+			skills: {
+				harm: [
+					{
+						skill: "Bug creation",
+						score: 5,
+						proficient: true,
+					},
+					{
+						skill: "Bug fixing",
+						score: 2,
+					},
+				],
+				key: [
+					{
+						skill: "Complaining",
+						score: 8,
+						proficient: true,
+					},
+					{
+						skill: "Guitar",
+						score: 1,
+					},
+					{
+						skill: "Drinking",
+						score: 4,
+					},
+					{
+						skill: "Sleeping",
+						score: -2,
+					},
+				],
+			},
+		};
+	},
+	methods: {
+		getAge(dateString) {
+			var today = new Date();
+			var birthDate = new Date(dateString);
+			var age = today.getFullYear() - birthDate.getFullYear();
+			var m = today.getMonth() - birthDate.getMonth();
+			if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+				age--;
 			}
+			return age;
 		},
-	}
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-		h1 {
-			font-size: 25px;
-		}
+h1 {
+	font-size: 25px;
+}
 
-		p {
-			font-size: 17px;
-			line-height: 30px;
-			margin-bottom: 40px;
-		}
+p {
+	font-size: 17px;
+	line-height: 30px;
+	margin-bottom: 40px;
+}
 
-		.icon {
-			width: 100px;
-		}
-		.written {
-			font-family: $text-written;	
-			font-size: 30px;
-		}
+.icon {
+	width: 100px;
+}
+.written {
+	font-family: $text-written;
+	font-size: 30px;
+}
 
-		.hk-card {
-			.sheet {
-				.character {
-					display: flex;
-					justify-content: space-between;
-					border: solid 1px $neutral-5;
-					padding: 10px;
-					border-radius: $border-radius;
-					align-items: center;
-					background-color: $neutral-9;
-					margin-bottom: 20px;
+.hk-card {
+	.sheet {
+		.character {
+			display: flex;
+			justify-content: space-between;
+			border: solid 1px $neutral-5;
+			padding: 10px;
+			border-radius: $border-radius;
+			align-items: center;
+			background-color: $neutral-9;
+			margin-bottom: 20px;
 
-					.img {
-						border: solid 1px $neutral-2;
-						width: 80px;
-						height: 80px;
-						background-position: center top;
-						background-size: cover;
-						margin-right: 20px;
-						border-radius: $border-radius-small;
-						filter: grayscale(100%);
-					}
-					.initiative {
-						padding-right: 10px;
-						.score {
-							margin-left: -10px;
-							font-size: 40px;
-							line-height: 40px;
-							font-family: $text-written;	
-						}
-					}
+			.img {
+				border: solid 1px $neutral-2;
+				width: 80px;
+				height: 80px;
+				background-position: center top;
+				background-size: cover;
+				margin-right: 20px;
+				border-radius: $border-radius-small;
+				filter: grayscale(100%);
+			}
+			.initiative {
+				padding-right: 10px;
+				.score {
+					margin-left: -10px;
+					font-size: 40px;
+					line-height: 40px;
+					font-family: $text-written;
 				}
+			}
+		}
 
-				ul {
-					padding: 0;
-					list-style: none;
+		ul {
+			padding: 0;
+			list-style: none;
 
+			.advantage {
+				.score {
+					color: $green;
+				}
+			}
+			.disadvantage {
+				.score {
+					color: $red;
+				}
+			}
+			&.skills {
+				li {
+					display: flex;
+					justify-content: space-between;
+					padding: 5px 8px;
+					line-height: 20px;
+					background-color: $neutral-7;
+					margin-bottom: 2px;
+					cursor: pointer;
+					user-select: none;
 
-					.advantage {
-						.score {
-							color: $green;
-						}
+					.skill {
+						font-size: 13px;
 					}
-					.disadvantage {
-						.score {
-							color: $red;
-						}
+					.score {
+						font-family: $text-written;
 					}
-					&.skills {
-						li {
-							display: flex;
-							justify-content: space-between;
-							padding: 5px 8px;
-							line-height: 20px;
-							background-color: $neutral-7;
-							margin-bottom: 2px;
-							cursor: pointer;
-							user-select: none;
-
-							.skill {
-								font-size: 13px;
-							}
-							.score {
-								font-family: $text-written;	
-							}
-						}
-					}
-					&.abillities {
-						li {
-							display: flex;
-							justify-content: space-between;
-							text-transform: uppercase;
-							line-height: 40px;
-							margin-bottom: 2px;
-							background-color: $neutral-8;
-							padding-left: 10px;
+				}
+			}
+			&.abillities {
+				li {
+					display: flex;
+					justify-content: space-between;
+					text-transform: uppercase;
+					line-height: 40px;
+					margin-bottom: 2px;
+					background-color: $neutral-8;
+					padding-left: 10px;
 
-							span.score {
-								font-size: 25px;
-								width: 45px;
-								text-align: center;
-								display: inline-block;
-								background-color: $neutral-9;
-								font-family: $text-written;	
-								// border: solid 1px $neutral-4;
-							}
-						}
+					span.score {
+						font-size: 25px;
+						width: 45px;
+						text-align: center;
+						display: inline-block;
+						background-color: $neutral-9;
+						font-family: $text-written;
+						// border: solid 1px $neutral-4;
 					}
 				}
 			}
 		}
-</style>
\ No newline at end of file
+	}
+}
+</style>
diff --git a/src/views/Pages/Patreon.vue b/src/views/Pages/Patreon.vue
index fd4563d1..bc7f221b 100644
--- a/src/views/Pages/Patreon.vue
+++ b/src/views/Pages/Patreon.vue
@@ -13,11 +13,48 @@
 						>Patreon</a
 					>
 					to finish payment.<br />
-					Make sure that you use the <strong>same emailadres</strong> for both your Patreon and
+					Make sure that you use the <strong>same email-address</strong> for both your Patreon and
 					Shieldmaiden account.
 				</p>
 
 				<Tiers class="mb-4" />
+
+				<hk-card header="About the benefits">
+					<div class="card-body">
+						<h2>Character Sync</h2>
+						<p>
+							You will be able to sync your players characters with external online character sheets
+							from D&D Beyond and Dice Cloud using the
+							<a
+								:href="`https://chrome.google.com/webstore/detail/dd-character-sync/${extension_id}`"
+								target="_blank"
+								rel="noopener"
+								>Character Sync Chrome Extension</a
+							>. This way you won't have manually update your players, but you can simply click a
+							button.<br />
+							<router-link to="/tools/character-sync">More about Character Sync</router-link>
+						</p>
+						<h2>Avatar crop & upload</h2>
+						<p>
+							For both players and NPCs you can upload an image and crop it to your liking. Without
+							a subscription you have to reference an online image to use as an avatar.
+						</p>
+						<h2>Background effects</h2>
+						<p>
+							With our background effect you can create more atmosphere on the public initiative
+							list that you share with your players. With effects like rain and fog your players
+							will be immersed in your games even more than before.<br />
+							<router-link to="/weather-demo">Check out all background effects</router-link>
+						</p>
+						<h2>Import content</h2>
+						<p>
+							You can import any Shieldmaiden content directly into your account. If a friend or a
+							content creator you follow has offered an export of an export of a Campaign from
+							Shieldmaiden, you can import it including all the monsters, spells and encounters and
+							you will be able to directly run it yourself.
+						</p>
+					</div>
+				</hk-card>
 				<hk-card header="Why do you have to pay?">
 					<div class="card-body">
 						<p>
@@ -58,6 +95,7 @@
 <script>
 import Tiers from "src/components/Tiers.vue";
 import Footer from "src/components/Footer.vue";
+import { character_sync_id } from "src/utils/generalConstants";
 
 export default {
 	name: "Patreon",
@@ -65,6 +103,11 @@ export default {
 		Tiers,
 		Footer,
 	},
+	data() {
+		return {
+			extension_id: character_sync_id,
+		};
+	},
 };
 </script>
 

From 2a32ea199e7e64aa76f82fa4158fdffe38579d14 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 10 May 2024 14:21:01 +0200
Subject: [PATCH 16/24] Tiers updated

---
 src/components/Header.vue     |   6 +
 src/components/Sidebar.vue    |  17 ++-
 src/components/Tiers.vue      | 219 ++++++++++++++++++----------------
 src/store/modules/user.js     |   2 +-
 src/views/profile/Profile.vue |   3 +
 5 files changed, 141 insertions(+), 106 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 55ba24ee..3c6062ad 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -147,6 +147,12 @@
 										></q-item-section>
 										<q-item-section>Profile</q-item-section>
 									</q-item>
+									<q-item clickable v-close-popup to="/patreon">
+										<q-item-section avatar
+											><i aria-hidden="true" class="fas fa-coins"></i
+										></q-item-section>
+										<q-item-section>Subscription</q-item-section>
+									</q-item>
 									<q-item clickable v-close-popup to="/content">
 										<q-item-section avatar
 											><i aria-hidden="true" class="fas fa-treasure-chest"></i
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 5af3996d..8da02b56 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -194,7 +194,22 @@
 					</q-list>
 					<hr />
 				</template>
-
+				<q-list @click="setSideSmallScreen(false)">
+					<q-item clickable v-ripple to="/patreon">
+						<q-item-section avatar>
+							<i aria-hidden="true" class="fas fa-coins" />
+						</q-item-section>
+						<q-item-section class="title">Subscription</q-item-section>
+						<q-tooltip
+							v-if="$store.getters.side_collapsed"
+							anchor="center right"
+							self="center left"
+						>
+							Subscription
+						</q-tooltip>
+					</q-item>
+				</q-list>
+				<hr />
 				<q-list @click="setSideSmallScreen(false)">
 					<q-item clickable v-ripple to="/tools">
 						<q-item-section avatar>
diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index cbd394d8..fedee4c3 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -2,114 +2,119 @@
 	<div>
 		<div v-if="tier && !loading">
 			<hk-card-deck>
-				<hk-card
-					:header="t.name"
-					v-for="(t, key) in tiers.filter((item) => item.name !== 'Legacy')"
-					:key="key"
-					:class="{ current: t.name == tier.name }"
-				>
-					<div class="card-body">
-						<div class="top">
-							<h2>{{ t.price }}</h2>
-							<em v-if="t.price == 'Free'" class="neutral-3 sub">forever</em>
-							<em v-else class="neutral-3 sub">per month</em>
+				<template v-for="(t, key) in tiers">
+					<hk-card
+						v-if="!legacy_tiers.includes(t['.key'])"
+						:key="key"
+						:class="{ current: t.name == tier.name }"
+					>
+						<div slot="header" class="card-header flex-col items-start">
+							<strong>{{ t.name }}</strong>
+							<span class="neutral-2">{{ t.description }}</span>
 						</div>
-						<ul>
-							<li v-for="(benefit, key) in benefits" :key="key">
-								<i
-									v-if="typeof t.benefits[key] === 'boolean'"
-									aria-hidden="true"
-									class="fas"
-									:class="t.benefits[key] ? 'fa-check green' : 'fa-times neutral-3'"
-								/>
-								<template v-else>
-									<i
-										aria-hidden="true"
-										v-if="t.benefits[key] === 'infinite'"
-										class="green far fa-infinity"
-									/>
-									<strong v-else :class="t.benefits[key] === '-' ? 'neutral-3' : 'green'">{{
-										t.benefits[key]
-									}}</strong>
-								</template>
-								<span>
-									{{ benefit.title }}
-									<span v-if="key === 'character_sync'" class="neutral-3">*</span>
-								</span>
-							</li>
-						</ul>
-						<ul class="storage">
-							<li v-for="storage_type in storage" :key="storage_type">
-								<template v-if="storage_type == 'campaigns'">
-									<i
-										aria-hidden="true"
-										v-if="t.benefits[storage_type] == 'infinite'"
-										class="green far fa-infinity"
-									/>
-									<span v-else class="green">{{ t.benefits[storage_type] }}</span> Campaign slots
-								</template>
-								<template v-if="storage_type == 'encounters'">
-									<i
-										aria-hidden="true"
-										v-if="t.benefits[storage_type] == 'infinite'"
-										class="green far fa-infinity"
-									/>
-									<span v-else class="green">{{ t.benefits[storage_type] }}</span>
-									<span>Encounter slots <span class="neutral-3">(per campaign)</span></span>
-								</template>
-								<template v-if="storage_type == 'players'">
-									<i
-										aria-hidden="true"
-										v-if="t.benefits[storage_type] == 'infinite'"
-										class="green far fa-infinity"
-									/>
-									<span v-else class="green">{{ t.benefits[storage_type] }}</span> Player slots
-								</template>
-								<template v-if="storage_type == 'npcs'">
+						<div class="card-body">
+							<div class="top">
+								<h2>{{ t.price }}</h2>
+								<em v-if="t.price === 'Free'" class="neutral-2 sub">forever</em>
+								<em v-else class="neutral-2 sub">per month</em>
+							</div>
+							<ul>
+								<li v-for="(benefit, key) in benefits" :key="key">
 									<i
+										v-if="typeof t.benefits[key] === 'boolean'"
 										aria-hidden="true"
-										v-if="t.benefits[storage_type] == 'infinite'"
-										class="green far fa-infinity"
+										class="fas"
+										:class="t.benefits[key] ? 'fa-check green' : 'fa-times neutral-3'"
 									/>
-									<span v-else class="green">{{ t.benefits[storage_type] }}</span> NPC slots
-								</template>
-								<template v-if="storage_type == 'spells'">
-									<i
-										aria-hidden="true"
-										v-if="t.benefits[storage_type] == 'infinite'"
-										class="green far fa-infinity"
-									/>
-									<span v-else class="green">{{ t.benefits[storage_type] }}</span> Spell slots
-								</template>
-								<template v-if="storage_type == 'items'">
-									<i
-										aria-hidden="true"
-										v-if="t.benefits[storage_type] == 'infinite'"
-										class="green far fa-infinity"
-									/>
-									<span v-else class="green">{{ t.benefits[storage_type] }}</span> Item slots
-								</template>
-								<template v-if="storage_type == 'reminders'">
-									<i
-										aria-hidden="true"
-										v-if="t.benefits[storage_type] == 'infinite'"
-										class="green far fa-infinity"
-									/>
-									<span v-else class="green">{{ t.benefits[storage_type] }}</span> Reminder slots
-								</template>
-							</li>
-						</ul>
-					</div>
-					<div slot="footer" v-if="t.price != 'Free'">
-						<a
-							:href="'https://www.patreon.com/join/shieldmaidenapp/checkout?rid=' + t['.key']"
-							target="_blank"
-							rel="noopener"
-							class="btn btn-block btn-square bg-patreon-red"
-							>Join {{ t.price }} tier</a
-						>
-					</div>
-				</hk-card>
+									<template v-else>
+										<i
+											aria-hidden="true"
+											v-if="t.benefits[key] === 'infinite'"
+											class="green far fa-infinity"
+										/>
+										<strong v-else :class="t.benefits[key] === '-' ? 'neutral-3' : 'green'">{{
+											t.benefits[key]
+										}}</strong>
+									</template>
+									<span>
+										{{ benefit.title }}
+										<span v-if="key === 'character_sync'" class="neutral-3">*</span>
+									</span>
+								</li>
+							</ul>
+							<ul class="storage">
+								<li v-for="storage_type in storage" :key="storage_type">
+									<template v-if="storage_type == 'campaigns'">
+										<i
+											aria-hidden="true"
+											v-if="t.benefits[storage_type] == 'infinite'"
+											class="green far fa-infinity"
+										/>
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Campaign slots
+									</template>
+									<template v-if="storage_type == 'encounters'">
+										<i
+											aria-hidden="true"
+											v-if="t.benefits[storage_type] == 'infinite'"
+											class="green far fa-infinity"
+										/>
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span>
+										<span>Encounter slots <span class="neutral-3">(per campaign)</span></span>
+									</template>
+									<template v-if="storage_type == 'players'">
+										<i
+											aria-hidden="true"
+											v-if="t.benefits[storage_type] == 'infinite'"
+											class="green far fa-infinity"
+										/>
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Player slots
+									</template>
+									<template v-if="storage_type == 'npcs'">
+										<i
+											aria-hidden="true"
+											v-if="t.benefits[storage_type] == 'infinite'"
+											class="green far fa-infinity"
+										/>
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> NPC slots
+									</template>
+									<template v-if="storage_type == 'spells'">
+										<i
+											aria-hidden="true"
+											v-if="t.benefits[storage_type] == 'infinite'"
+											class="green far fa-infinity"
+										/>
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Spell slots
+									</template>
+									<template v-if="storage_type == 'items'">
+										<i
+											aria-hidden="true"
+											v-if="t.benefits[storage_type] == 'infinite'"
+											class="green far fa-infinity"
+										/>
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Item slots
+									</template>
+									<template v-if="storage_type == 'reminders'">
+										<i
+											aria-hidden="true"
+											v-if="t.benefits[storage_type] == 'infinite'"
+											class="green far fa-infinity"
+										/>
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Reminder slots
+									</template>
+								</li>
+							</ul>
+						</div>
+						<div slot="footer" v-if="t.price != 'Free'">
+							<a
+								:href="'https://www.patreon.com/join/shieldmaidenapp/checkout?rid=' + t['.key']"
+								target="_blank"
+								rel="noopener"
+								class="btn btn-block btn-square bg-patreon-red"
+								>Join {{ t.price }} tier</a
+							>
+						</div>
+					</hk-card>
+				</template>
 			</hk-card-deck>
 			<small class="d-block text-center">
 				<span class="neutral-3">*</span> Character Sync requires <strong>Chrome</strong> as your
@@ -154,6 +159,7 @@ export default {
 					title: "Storage",
 				},
 			},
+			legacy_tiers: ["legacy", "3403110"],
 			storage: ["campaigns", "encounters", "players", "npcs", "spells", "reminders", "items"],
 		};
 	},
@@ -176,6 +182,11 @@ export default {
 	&.current {
 		border-color: $patreon-red !important;
 	}
+	.card-header {
+		strong {
+			font-size: 18px;
+		}
+	}
 	.card-body {
 		padding: 0;
 
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 20292430..2d327813 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -109,7 +109,7 @@ const user_actions = {
 						);
 
 					const server_time = new Date(time_ms).toISOString();
-					const legacy_date = new Date(2024, 4, 7).getTime();
+					const legacy_date = new Date(2024, 4, 15).getTime();
 
 					// User always basic reward tier
 					let path =
diff --git a/src/views/profile/Profile.vue b/src/views/profile/Profile.vue
index aa34c03e..b13ab9c3 100644
--- a/src/views/profile/Profile.vue
+++ b/src/views/profile/Profile.vue
@@ -62,6 +62,9 @@
 							Subscription tier: <span class="patreon-red">{{ tier.name }}</span>
 						</h3>
 						<p v-if="tier.name === 'Deity'" class="neutral-2">You have unlimited power.</p>
+						<p v-if="tier.name === 'Legacy'" class="neutral-2">
+							The legacy tier is for anyone who created an account before the 15th of May 2024
+						</p>
 
 						<Tier />
 						<router-link

From 40ef3eacf41bbadabc5138685b11590d9dee9bff Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 10 May 2024 14:43:01 +0200
Subject: [PATCH 17/24] Hide import buttons for free tiers

---
 src/views/UserContent/Npcs/Npcs.vue     | 5 +++--
 src/views/UserContent/Spells/Spells.vue | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index b55a7de7..6a79b5a8 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -4,15 +4,16 @@
 			<ContentHeader type="npcs">
 				<ExportUserContent
 					slot="actions-left"
-					class="btn-sm bg-neutral-5"
+					class="btn-sm bg-neutral-5 mr-2"
 					content-type="npc"
 					:content-id="npcIds"
 				>
 					<span>Export</span>
 				</ExportUserContent>
 				<button
+					v-if="tier.price !== 'Free'"
 					slot="actions-right"
-					class="btn btn-sm bg-neutral-5 mx-2"
+					class="btn btn-sm bg-neutral-5 mr-2"
 					@click="import_dialog = true"
 				>
 					Import
diff --git a/src/views/UserContent/Spells/Spells.vue b/src/views/UserContent/Spells/Spells.vue
index 673e7759..00c948cd 100644
--- a/src/views/UserContent/Spells/Spells.vue
+++ b/src/views/UserContent/Spells/Spells.vue
@@ -4,15 +4,16 @@
 			<ContentHeader type="spells">
 				<ExportUserContent
 					slot="actions-left"
-					class="btn-sm bg-neutral-5"
+					class="btn-sm bg-neutral-5 mr-2"
 					content-type="spell"
 					:content-id="spellIds"
 				>
 					<span>Export</span>
 				</ExportUserContent>
 				<button
+					v-if="tier.price !== 'Free'"
 					slot="actions-right"
-					class="btn btn-sm bg-neutral-5 mx-2"
+					class="btn btn-sm bg-neutral-5 mr-2"
 					@click="import_dialog = true"
 				>
 					Import

From d829b412ac8e191db734728118f62f5febf26144 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 10 May 2024 15:10:39 +0200
Subject: [PATCH 18/24] Close dialog doesn't submit

---
 src/components/campaign/resources/Notes.vue  |  3 +-
 src/components/campaign/soundBoard/Board.vue | 55 +++++++++++---------
 src/views/UserContent/Encounters/index.vue   |  4 +-
 3 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/components/campaign/resources/Notes.vue b/src/components/campaign/resources/Notes.vue
index 0042d139..8996f833 100644
--- a/src/components/campaign/resources/Notes.vue
+++ b/src/components/campaign/resources/Notes.vue
@@ -76,7 +76,7 @@
 								</ValidationProvider>
 							</div>
 							<div slot="footer" class="card-footer d-flex justify-content-end">
-								<q-btn v-close-popup class="mr-1" no-caps type="cancel">Cancel</q-btn>
+								<q-btn v-close-popup class="mr-1" no-caps>Cancel</q-btn>
 								<q-btn color="primary" type="submit" no-caps label="Add note" :disabled="!valid" />
 							</div>
 						</hk-card>
@@ -128,4 +128,3 @@ export default {
 	},
 };
 </script>
-
diff --git a/src/components/campaign/soundBoard/Board.vue b/src/components/campaign/soundBoard/Board.vue
index d28bb5f4..fc3734e6 100644
--- a/src/components/campaign/soundBoard/Board.vue
+++ b/src/components/campaign/soundBoard/Board.vue
@@ -1,22 +1,17 @@
 <template>
 	<div class="soundboard">
-		<hk-input 
-			v-model="search" 
-			dense 
-			label="Search"
-			class="mb-2"
-			clearable>
+		<hk-input v-model="search" dense label="Search" class="mb-2" clearable>
 			<q-icon slot="prepend" name="search" />
 		</hk-input>
 		<p class="red" v-if="!filtered.length">Nothing found</p>
-		<transition-group 
+		<transition-group
 			tag="div"
 			name="board"
 			class="board"
 			enter-active-class="animated animate__flipInX"
 			leave-active-class="animated animate__flipOutX"
 		>
-			<template v-for="(sound) in filtered">
+			<template v-for="sound in filtered">
 				<a
 					v-if="sound.url"
 					:key="`${sound.type}-${sound.key}`"
@@ -31,10 +26,11 @@
 						alt="sound board button background"
 						class="board__button-logo"
 					/>
-					<button 
-						v-if="edit && !sound.hk" 
+					<button
+						v-if="edit && !sound.hk"
 						class="btn btn-sm bg-neutral-5 board__button-delete"
-						@click.stop="delete_soundboard_link(sound.key)">
+						@click.stop="delete_soundboard_link(sound.key)"
+					>
 						<hk-icon icon="fas fa-trash-alt red" />
 					</button>
 					<hk-icon v-else-if="!sound.image" :icon="sound.icon" class="board__button-icon" />
@@ -50,11 +46,7 @@
 		</transition-group>
 
 		<div class="soundboard__actions">
-			<router-link
-				v-if="tier.name === 'Free'"
-				class="btn btn-block bg-patreon-red"
-				to="/patreon"
-			>
+			<router-link v-if="tier.name === 'Free'" class="btn btn-block bg-patreon-red" to="/patreon">
 				Add custom links
 			</router-link>
 			<template v-else>
@@ -102,7 +94,7 @@
 								</div>
 							</div>
 							<div slot="footer" class="card-footer">
-								<q-btn v-close-popup class="mr-1" no-caps type="cancel">Cancel</q-btn>
+								<q-btn v-close-popup class="mr-1" no-caps>Cancel</q-btn>
 								<q-btn no-caps label="Add" color="primary" type="submit" />
 							</div>
 						</hk-card>
@@ -318,19 +310,28 @@ export default {
 			const links = this.soundboard || [];
 			const board = links.concat(this.hk_links);
 
-			return board.filter((link) => link.type === this.type)
+			return board
+				.filter((link) => link.type === this.type)
 				.map((item) => ({ ...item, icon: this.getIcon(item.url) }));
 		},
 		filtered() {
-			return this.search ? this.board.filter((link) => link.name?.toLowerCase().includes(this.search.toLowerCase())) : this.board;
-		}
+			return this.search
+				? this.board.filter((link) => link.name?.toLowerCase().includes(this.search.toLowerCase()))
+				: this.board;
+		},
 	},
 	async mounted() {
 		await this.get_soundboard();
 		this.loading = false;
 	},
 	methods: {
-		...mapActions(["play_music", "play_ambience", "get_soundboard", "add_soundboard_link", "delete_soundboard_link"]),
+		...mapActions([
+			"play_music",
+			"play_ambience",
+			"get_soundboard",
+			"add_soundboard_link",
+			"delete_soundboard_link",
+		]),
 		getIcon(url, type) {
 			switch (true) {
 				case urlType(url) === "youtube":
@@ -392,13 +393,17 @@ export default {
 			transition: all 0.3s ease-in-out;
 			gap: 0;
 			padding-top: 10px;
-	
+
 			&-title {
 				position: absolute;
 				bottom: 0;
 				padding: 8px 4px 3px 4px;
 				width: 100%;
-				background: linear-gradient(180deg, rgba(215,215,215,0) 0%, rgba(0,0,0,0.7511379551820728) 100%);
+				background: linear-gradient(
+					180deg,
+					rgba(215, 215, 215, 0) 0%,
+					rgba(0, 0, 0, 0.7511379551820728) 100%
+				);
 				border-bottom-left-radius: 8px;
 				border-bottom-right-radius: 8px;
 				z-index: 10;
@@ -422,7 +427,7 @@ export default {
 				border-radius: inherit;
 				top: 0;
 				bottom: 0;
-	
+
 				img {
 					transition: all 0.1s ease-in-out;
 					width: 100%;
@@ -436,7 +441,7 @@ export default {
 			}
 			&:hover {
 				box-shadow: 0px 0px 8px 4px #0000006c;
-	
+
 				.board__button-bg {
 					img {
 						transform: scale(1.1);
diff --git a/src/views/UserContent/Encounters/index.vue b/src/views/UserContent/Encounters/index.vue
index 9372c73d..87e7f338 100644
--- a/src/views/UserContent/Encounters/index.vue
+++ b/src/views/UserContent/Encounters/index.vue
@@ -319,7 +319,7 @@
 							/>
 						</div>
 						<div slot="footer" class="card-footer d-flex justify-content-end">
-							<q-btn v-close-popup class="mr-1" no-caps type="cancel">Cancel</q-btn>
+							<q-btn v-close-popup class="mr-1" no-caps>Cancel</q-btn>
 							<q-btn color="primary" type="submit" no-caps label="Add encounter" />
 						</div>
 					</hk-card>
@@ -352,7 +352,7 @@
 							/>
 						</div>
 						<div slot="footer" class="card-footer d-flex justify-content-end">
-							<q-btn v-close-popup class="mr-1" no-caps type="cancel">Cancel</q-btn>
+							<q-btn v-close-popup class="mr-1" no-caps>Cancel</q-btn>
 							<q-btn color="primary" type="submit" no-caps label="Add encounter" />
 						</div>
 					</hk-card>

From 4c22c7585b4901b1712234211600380ade8682cd Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 10 May 2024 16:01:54 +0200
Subject: [PATCH 19/24] New Noble tier

---
 src/components/Tiers.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index fedee4c3..e5ef2a16 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -50,7 +50,7 @@
 											v-if="t.benefits[storage_type] == 'infinite'"
 											class="green far fa-infinity"
 										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Campaign slots
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Campaigns
 									</template>
 									<template v-if="storage_type == 'encounters'">
 										<i
@@ -59,7 +59,7 @@
 											class="green far fa-infinity"
 										/>
 										<span v-else class="green">{{ t.benefits[storage_type] }}</span>
-										<span>Encounter slots <span class="neutral-3">(per campaign)</span></span>
+										<span>Encounters <span class="neutral-3">(per campaign)</span></span>
 									</template>
 									<template v-if="storage_type == 'players'">
 										<i
@@ -67,7 +67,7 @@
 											v-if="t.benefits[storage_type] == 'infinite'"
 											class="green far fa-infinity"
 										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Player slots
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Players
 									</template>
 									<template v-if="storage_type == 'npcs'">
 										<i
@@ -75,7 +75,7 @@
 											v-if="t.benefits[storage_type] == 'infinite'"
 											class="green far fa-infinity"
 										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> NPC slots
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> NPCs
 									</template>
 									<template v-if="storage_type == 'spells'">
 										<i
@@ -83,7 +83,7 @@
 											v-if="t.benefits[storage_type] == 'infinite'"
 											class="green far fa-infinity"
 										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Spell slots
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Spells
 									</template>
 									<template v-if="storage_type == 'items'">
 										<i
@@ -91,7 +91,7 @@
 											v-if="t.benefits[storage_type] == 'infinite'"
 											class="green far fa-infinity"
 										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Item slots
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Items
 									</template>
 									<template v-if="storage_type == 'reminders'">
 										<i
@@ -99,7 +99,7 @@
 											v-if="t.benefits[storage_type] == 'infinite'"
 											class="green far fa-infinity"
 										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Reminder slots
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Reminders
 									</template>
 								</li>
 							</ul>
@@ -159,7 +159,7 @@ export default {
 					title: "Storage",
 				},
 			},
-			legacy_tiers: ["legacy", "3403110"],
+			legacy_tiers: ["legacy", "3403110", "3403128"],
 			storage: ["campaigns", "encounters", "players", "npcs", "spells", "reminders", "items"],
 		};
 	},

From bfa93ba4d2ecba2655a5a092754b65e6a8b44676 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 10 May 2024 21:15:46 +0200
Subject: [PATCH 20/24] New Deity tier

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

diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index e5ef2a16..420dc253 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -159,7 +159,7 @@ export default {
 					title: "Storage",
 				},
 			},
-			legacy_tiers: ["legacy", "3403110", "3403128"],
+			legacy_tiers: ["legacy", "3403110", "3403128", "3403171"],
 			storage: ["campaigns", "encounters", "players", "npcs", "spells", "reminders", "items"],
 		};
 	},

From 782620e1418aa85f973414aab833756881f97a99 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sun, 12 May 2024 14:51:59 +0200
Subject: [PATCH 21/24] Replaced structuredClone with old school JSON
 parse/stringify

---
 src/views/UserContent/Encounters/index.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/views/UserContent/Encounters/index.vue b/src/views/UserContent/Encounters/index.vue
index 87e7f338..7b6e8e36 100644
--- a/src/views/UserContent/Encounters/index.vue
+++ b/src/views/UserContent/Encounters/index.vue
@@ -526,17 +526,20 @@ export default {
 		async dialogCloneEncounter(key) {
 			this.clone = true;
 			this.cloneEncounterData.key = key;
-			this.cloneEncounterData.ogEncounter = structuredClone(
-				await this.get_encounter({
-					uid: this.user.uid,
-					campaignId: this.campaignId,
-					id: key,
-				})
+			const ogEncounter = JSON.parse(
+				JSON.stringify(
+					await this.get_encounter({
+						uid: this.user.uid,
+						campaignId: this.campaignId,
+						id: key,
+					})
+				)
 			);
-			this.cloneEncounterData.name = structuredClone(this.cloneEncounterData.ogEncounter.name);
+			this.cloneEncounterData.ogEncounter = ogEncounter;
+			this.cloneEncounterData.name = ogEncounter.name;
 		},
 		async cloneEncounter() {
-			const encounter = structuredClone(this.cloneEncounterData.ogEncounter);
+			const encounter = this.cloneEncounterData.ogEncounter;
 			encounter.name = this.cloneEncounterData.name;
 			const new_id = await this.add_encounter({
 				campaignId: this.campaignId,

From 63b4f8ed31b5a34cf40bf2852f3d3ae2e5a7a79c Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sun, 12 May 2024 15:20:49 +0200
Subject: [PATCH 22/24] Minor tiers template improvement

---
 src/components/Tiers.vue | 75 ++++++++++------------------------------
 1 file changed, 18 insertions(+), 57 deletions(-)

diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index 420dc253..ee9ae16c 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -44,63 +44,18 @@
 							</ul>
 							<ul class="storage">
 								<li v-for="storage_type in storage" :key="storage_type">
-									<template v-if="storage_type == 'campaigns'">
-										<i
-											aria-hidden="true"
-											v-if="t.benefits[storage_type] == 'infinite'"
-											class="green far fa-infinity"
-										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Campaigns
-									</template>
-									<template v-if="storage_type == 'encounters'">
-										<i
-											aria-hidden="true"
-											v-if="t.benefits[storage_type] == 'infinite'"
-											class="green far fa-infinity"
-										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span>
-										<span>Encounters <span class="neutral-3">(per campaign)</span></span>
-									</template>
-									<template v-if="storage_type == 'players'">
-										<i
-											aria-hidden="true"
-											v-if="t.benefits[storage_type] == 'infinite'"
-											class="green far fa-infinity"
-										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Players
-									</template>
-									<template v-if="storage_type == 'npcs'">
-										<i
-											aria-hidden="true"
-											v-if="t.benefits[storage_type] == 'infinite'"
-											class="green far fa-infinity"
-										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> NPCs
-									</template>
-									<template v-if="storage_type == 'spells'">
-										<i
-											aria-hidden="true"
-											v-if="t.benefits[storage_type] == 'infinite'"
-											class="green far fa-infinity"
-										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Spells
-									</template>
-									<template v-if="storage_type == 'items'">
-										<i
-											aria-hidden="true"
-											v-if="t.benefits[storage_type] == 'infinite'"
-											class="green far fa-infinity"
-										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Items
-									</template>
-									<template v-if="storage_type == 'reminders'">
-										<i
-											aria-hidden="true"
-											v-if="t.benefits[storage_type] == 'infinite'"
-											class="green far fa-infinity"
-										/>
-										<span v-else class="green">{{ t.benefits[storage_type] }}</span> Reminders
-									</template>
+									<i
+										aria-hidden="true"
+										v-if="t.benefits[storage_type] == 'infinite'"
+										class="green far fa-infinity"
+									/>
+									<span v-else class="green">{{ t.benefits[storage_type] }}</span>
+									<span>
+										{{ storageType(storage_type, t.benefits[storage_type]) }}
+										<span v-if="storage_type === 'encounters'" class="neutral-3">
+											(per campaign)
+										</span>
+									</span>
 								</li>
 							</ul>
 						</div>
@@ -174,6 +129,12 @@ export default {
 	computed: {
 		...mapGetters(["tier"]),
 	},
+	methods: {
+		storageType(type, count) {
+			type === "npcs" ? type.slice(0, -1).toUpperCase() : type.slice(0, -1).capitalize();
+			return count === "infinite" || count > 1 ? `${type}s` : type;
+		},
+	},
 };
 </script>
 

From 290ac85da7c082a003c99c7e35aea19c875067bf Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Tue, 14 May 2024 19:54:21 +0200
Subject: [PATCH 23/24] Exclude old tiers from admin voucher functions

---
 src/components/Admin/User.vue | 418 ++++++++++++++++++----------------
 src/components/Sidebar.vue    |   6 +-
 src/components/Tiers.vue      |   7 +-
 src/utils/generalConstants.js | 151 +++++++-----
 src/views/Admin/Vouchers.vue  |   3 +-
 5 files changed, 327 insertions(+), 258 deletions(-)

diff --git a/src/components/Admin/User.vue b/src/components/Admin/User.vue
index f312c77a..b74735ad 100644
--- a/src/components/Admin/User.vue
+++ b/src/components/Admin/User.vue
@@ -3,42 +3,48 @@
 		<hk-card>
 			<div class="card-header">
 				<span>
-					<i aria-hidden="true" :class="{ 'green': status.state == 'online', 'neutral-3': status.state == 'offline' }" class="fas fa-circle"></i>
+					<i
+						aria-hidden="true"
+						:class="{ green: status.state == 'online', 'neutral-3': status.state == 'offline' }"
+						class="fas fa-circle"
+					></i>
 					{{ user.username }}
 				</span>
 				<router-link :to="'/user/' + id">
-					<div class="live" :class="{ 'active': broadcast.live }">Live</div>
+					<div class="live" :class="{ active: broadcast.live }">Live</div>
 				</router-link>
 			</div>
 			<div class="card-body">
 				<p>{{ user.email }}</p>
 				<p v-if="user.patreon_email">patron: {{ user.patreon_email }}</p>
-				<p><i aria-hidden="true" class="neutral-3">{{ id }}</i></p>
+				<p>
+					<i aria-hidden="true" class="neutral-3">{{ id }}</i>
+				</p>
 			</div>
 		</hk-card>
 
 		<hk-card-deck class="mb-3">
 			<hk-card header="DM Data">
 				<div class="card-body data">
-					<span class="type">Campaigns: </span> 
+					<span class="type">Campaigns: </span>
 					<template v-if="campaigns['.value']">{{ campaigns[".value"] }}</template>
-					<template v-else>0</template><br/>
-					
-					<span class="type">Players: </span> 
+					<template v-else>0</template><br />
+
+					<span class="type">Players: </span>
 					<template v-if="players['.value']">{{ players[".value"] }}</template>
-					<template v-else>0</template><br/>
+					<template v-else>0</template><br />
 
-					<span class="type">NPC's: </span> 
+					<span class="type">NPC's: </span>
 					<template v-if="npcs['.value']">{{ npcs[".value"] }}</template>
-					<template v-else>0</template><br/>
+					<template v-else>0</template><br />
 
 					<span class="type">Items: </span>
 					<template v-if="items['.value']">{{ items[".value"] }}</template>
-					<template v-else>0</template><br/>
+					<template v-else>0</template><br />
 
 					<span class="type">Reminders: </span>
 					<template v-if="reminders['.value']">{{ reminders[".value"] }}</template>
-					<template v-else>0</template><br/>
+					<template v-else>0</template><br />
 				</div>
 			</hk-card>
 			<hk-card header="Following">
@@ -57,7 +63,7 @@
 							{{ character.character_name }}
 						</li>
 					</ul>
-					<div v-else class="loader"> <span>Loading characters...</span></div>
+					<div v-else class="loader"><span>Loading characters...</span></div>
 				</div>
 			</hk-card>
 		</hk-card-deck>
@@ -65,7 +71,10 @@
 		<hk-card header="User info">
 			<div class="card-body">
 				<q-select
-					:dark="$store.getters.theme === 'dark'" filled square multiple
+					:dark="$store.getters.theme === 'dark'"
+					filled
+					square
+					multiple
 					label="contribute"
 					class="mb-3"
 					:options="contributes"
@@ -76,10 +85,13 @@
 				<h3>Link a Patreon account</h3>
 
 				<q-input
-					:dark="$store.getters.theme === 'dark'" filled square
+					:dark="$store.getters.theme === 'dark'"
+					filled
+					square
 					type="email"
 					label="Patreon Email"
-					v-model="user.patreon_email">
+					v-model="user.patreon_email"
+				>
 					<template #after>
 						<a class="btn" @click="setPatronEmail()">Save</a>
 					</template>
@@ -92,27 +104,36 @@
 				<h3>Gift user a subscription</h3>
 				<ValidationObserver v-slot="{ valid }">
 					<q-form>
-						<q-select 
-							:dark="$store.getters.theme === 'dark'" filled square
+						<q-select
+							:dark="$store.getters.theme === 'dark'"
+							filled
+							square
 							emit-value
 							map-options
 							label="Tier"
 							v-model="voucher.id"
-							:options="Object.values(tiers)"
+							:options="Object.values(tiers).filter((tier) => !legacy_tiers.includes(tier['.key']))"
 							option-label="name"
 							option-value=".key"
 						>
 						</q-select>
-						
+
 						<q-option-group
 							:dark="$store.getters.theme === 'dark'"
 							v-model="duration"
 							:options="duration_options"
 						/>
 
-						<ValidationProvider v-if="duration === 'date'" rules="required" name="Date" v-slot="{ errors, invalid, validated }">
-							<q-input 	
-								:dark="$store.getters.theme === 'dark'" filled square
+						<ValidationProvider
+							v-if="duration === 'date'"
+							rules="required"
+							name="Date"
+							v-slot="{ errors, invalid, validated }"
+						>
+							<q-input
+								:dark="$store.getters.theme === 'dark'"
+								filled
+								square
 								label="Date"
 								type="text"
 								placeholder="mm/dd/yyyy"
@@ -123,11 +144,13 @@
 							/>
 						</ValidationProvider>
 
-						<q-input 
-							:dark="$store.getters.theme === 'dark'" filled square
+						<q-input
+							:dark="$store.getters.theme === 'dark'"
+							filled
+							square
 							label="Message"
-							v-model="voucher.message" 
-							name="message" 
+							v-model="voucher.message"
+							name="message"
 							class="mb-2"
 							autogrow
 						/>
@@ -140,191 +163,196 @@
 </template>
 
 <script>
-	import { db } from 'src/firebase'
+import { db } from "src/firebase";
+import { legacy_tiers } from "src/utils/generalConstants";
 
-	export default {
-		name: 'Condition',
-		props: ['id'],
-		data() {
-			return {
-				loading: true,
-				loading_characters: true,
-				duration: 'date',
-				characters: {},
-				user: undefined,
-				duration_options: [
-					{
-						value: 'date',
-						label: 'Till date'
-					},
-					{
-						value: 'infinite',
-						label: 'Till cancelled'
-					}
-				],
-				contributes: [
-					"monsters",
-					"spells",
-					"character-builder"
-				]
-			}
-		},
-		firebase() {
-			return {
-				status: {
-					source: db.ref(`status/${this.id}`),
-					asObject: true,
-				},
-				broadcast: {
-					source: db.ref(`broadcast/${this.id}`),
-					asObject: true
-				},
-				tiers: db.ref('tiers').orderByChild('order'),
-				campaigns: {
-					source: db.ref(`search_campaigns/${this.id}/metadata/count`),
-					asObject: true
-				},
-				players: {
-					source: db.ref(`search_players/${this.id}/metadata/count`),
-					asObject: true
+export default {
+	name: "AdminUser",
+	props: ["id"],
+	data() {
+		return {
+			loading: true,
+			loading_characters: true,
+			duration: "date",
+			characters: {},
+			user: undefined,
+			legacy_tiers,
+			duration_options: [
+				{
+					value: "date",
+					label: "Till date",
 				},
-				npcs: {
-					source: db.ref(`search_npcs/${this.id}/metadata/count`),
-					asObject: true
+				{
+					value: "infinite",
+					label: "Till cancelled",
 				},
-				items: {
-					source: db.ref(`search_items/${this.id}/metadata/count`),
-					asObject: true
-				},
-				reminders: {
-					source: db.ref(`search_reminders/${this.id}/metadata/count`),
-					asObject: true
-				} 
+			],
+			contributes: ["monsters", "spells", "character-builder"],
+		};
+	},
+	firebase() {
+		return {
+			status: {
+				source: db.ref(`status/${this.id}`),
+				asObject: true,
+			},
+			broadcast: {
+				source: db.ref(`broadcast/${this.id}`),
+				asObject: true,
+			},
+			tiers: db.ref("tiers").orderByChild("order"),
+			campaigns: {
+				source: db.ref(`search_campaigns/${this.id}/metadata/count`),
+				asObject: true,
+			},
+			players: {
+				source: db.ref(`search_players/${this.id}/metadata/count`),
+				asObject: true,
+			},
+			npcs: {
+				source: db.ref(`search_npcs/${this.id}/metadata/count`),
+				asObject: true,
+			},
+			items: {
+				source: db.ref(`search_items/${this.id}/metadata/count`),
+				asObject: true,
+			},
+			reminders: {
+				source: db.ref(`search_reminders/${this.id}/metadata/count`),
+				asObject: true,
+			},
+		};
+	},
+	mounted() {
+		var characters_ref = db.ref(`character_control/${this.id}`);
+		characters_ref.on("value", async (snapshot) => {
+			let characters = snapshot.val();
+
+			//Get Players
+			for (let key in snapshot.val()) {
+				let userId = characters[key].user;
+				characters[key].character_name = undefined;
+
+				let getPlayer = db.ref(`players/${userId}/${key}/character_name`);
+				getPlayer.on("value", (result) => {
+					characters[key].character_name = result.val();
+				});
 			}
-		},
-		mounted() {
-			var characters_ref = db.ref(`character_control/${this.id}`);
-			characters_ref.on('value', async (snapshot) => {
-				let characters = snapshot.val();
-				
-				//Get Players
-				for(let key in snapshot.val()) {
-					let userId = characters[key].user;
-					characters[key].character_name = undefined;
+			this.characters = characters;
+			this.loading_characters = false;
+		});
 
-					let getPlayer = db.ref(`players/${userId}/${key}/character_name`);
-					getPlayer.on('value', (result) => {
-						characters[key].character_name = result.val()
-					});
-				}
-				this.characters = characters;
-				this.loading_characters = false;
-			});
+		var user_ref = db.ref(`users/${this.id}`);
+		user_ref.on("value", async (snapshot) => {
+			let user = snapshot.val();
 
-			var user_ref = db.ref(`users/${this.id}`);
-			user_ref.on('value', async (snapshot) => {
-				let user = snapshot.val();
-				
-				let followed = {};
-				for(let key in user.follow) {
-					let getFollowed = db.ref(`users/${key}/username`);
+			let followed = {};
+			for (let key in user.follow) {
+				let getFollowed = db.ref(`users/${key}/username`);
 
-					await getFollowed.on('value', (result) => {			
-						followed[key] = result.val()
-					});
-				}
-				user.followed = followed;
-				this.user = user;
-				this.loading = false;
-			});
+				await getFollowed.on("value", (result) => {
+					followed[key] = result.val();
+				});
+			}
+			user.followed = followed;
+			this.user = user;
+			this.loading = false;
+		});
+	},
+	computed: {
+		tiersArray() {
+			let array = [];
+			for (const value of Object.values(this.tiers)) {
+				array.push({
+					value: value[".key"],
+					label: value.name,
+				});
+			}
+			return array;
 		},
-		computed: {
-			tiersArray() {
-				let array = [];
-				for(const value of Object.values(this.tiers)) {
-					array.push({
-						value: value['.key'],
-						label: value.name
-					});
-				}
-				return array;
-			},
-			voucher() {
-				if (this.user.voucher) {
-					return this.user.voucher
-				} else {
-					return {}
-				}
-			}				
+		voucher() {
+			if (this.user.voucher) {
+				return this.user.voucher;
+			} else {
+				return {};
+			}
 		},
-		methods: {
-			setVoucher(valid) {
-				if (valid) {
-					if(this.voucher.id === 'basic') {
-						db.ref(`users/${this.id}/voucher`).remove()
-					}
-					else {
-						if(this.duration === 'infinite') {
-							delete this.voucher.date
-						}
-						db.ref(`users/${this.id}/voucher`).set(this.voucher)
+	},
+	methods: {
+		setVoucher(valid) {
+			if (valid) {
+				if (this.voucher.id === "basic") {
+					db.ref(`users/${this.id}/voucher`).remove();
+				} else {
+					if (this.duration === "infinite") {
+						delete this.voucher.date;
 					}
-					this.$snotify.success('Voucher given.', 'Voucher set!', {
-						position: "rightTop"
-					});
+					db.ref(`users/${this.id}/voucher`).set(this.voucher);
 				}
-			},
-			setPatronEmail() {
-				if (this.user.patreon_email == "") {
-					db.ref(`users/${this.id}/patreon_email`).remove()	
-				}
-				else {
-					db.ref(`users/${this.id}/patreon_email`).set(this.user.patreon_email)
-				}
-				this.$snotify.success('Patreon email linked.', 'Saved!', {
-					position: "rightTop"
+				this.$snotify.success("Voucher given.", "Voucher set!", {
+					position: "rightTop",
 				});
-			},
-			setContribute(value) {
-				value = (!value) ? null : value;
-				db.ref(`users/${this.id}/contribute`).set(value);
+			}
+		},
+		setPatronEmail() {
+			if (this.user.patreon_email == "") {
+				db.ref(`users/${this.id}/patreon_email`).remove();
+			} else {
+				db.ref(`users/${this.id}/patreon_email`).set(this.user.patreon_email);
+			}
+			this.$snotify.success("Patreon email linked.", "Saved!", {
+				position: "rightTop",
+			});
+		},
+		setContribute(value) {
+			value = !value ? null : value;
+			db.ref(`users/${this.id}/contribute`).set(value);
 
-				this.$snotify.success('Contribute set.', 'Saved!', {
-					position: "rightTop"
-				});
-			},
-			makeDate(input) {
-				let monthNames = [
-					"January", "February", "March",
-					"April", "May", "June", "July",
-					"August", "September", "October",
-					"November", "December"
-				];
+			this.$snotify.success("Contribute set.", "Saved!", {
+				position: "rightTop",
+			});
+		},
+		makeDate(input) {
+			let monthNames = [
+				"January",
+				"February",
+				"March",
+				"April",
+				"May",
+				"June",
+				"July",
+				"August",
+				"September",
+				"October",
+				"November",
+				"December",
+			];
 
-				let d = new Date(input)
-				let hours = (d.getHours() < 10) ? '0'+d.getHours() : d.getHours();
-				let minutes = (d.getMinutes() < 10) ? '0'+d.getMinutes() : d.getMinutes();
-				let seconds = (d.getSeconds() < 10) ? '0'+d.getSeconds() : d.getSeconds();
+			let d = new Date(input);
+			let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
+			let minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
+			let seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
 
-				let time = hours + ":" + minutes + ":" + seconds;
-				let date = d.getDate() + " " + monthNames[d.getMonth()] + " " + d.getFullYear();
-				
-				return date + " - " + time;
-			},
-		}
-	}
+			let time = hours + ":" + minutes + ":" + seconds;
+			let date = d.getDate() + " " + monthNames[d.getMonth()] + " " + d.getFullYear();
+
+			return date + " - " + time;
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-	h1, h2 {
-		margin-bottom: 5px !important;
-	}
-	.data {
-		line-height: 25px;
+h1,
+h2 {
+	margin-bottom: 5px !important;
+}
+.data {
+	line-height: 25px;
 
-		.type {
-			display: inline-block;
-			width: 150px;
-		}
+	.type {
+		display: inline-block;
+		width: 150px;
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 8da02b56..52eb6e3a 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -195,11 +195,13 @@
 					<hr />
 				</template>
 				<q-list @click="setSideSmallScreen(false)">
-					<q-item clickable v-ripple to="/patreon">
+					<q-item clickable to="/patreon">
 						<q-item-section avatar>
 							<i aria-hidden="true" class="fas fa-coins" />
 						</q-item-section>
-						<q-item-section class="title">Subscription</q-item-section>
+						<q-item-section>
+							<q-btn no-caps color="primary" to="/patreon" class="full-width"> Subscription </q-btn>
+						</q-item-section>
 						<q-tooltip
 							v-if="$store.getters.side_collapsed"
 							anchor="center right"
diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index ee9ae16c..eb05c7af 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -1,12 +1,12 @@
 <template>
 	<div>
-		<div v-if="tier && !loading">
+		<div v-if="!loading">
 			<hk-card-deck>
 				<template v-for="(t, key) in tiers">
 					<hk-card
 						v-if="!legacy_tiers.includes(t['.key'])"
 						:key="key"
-						:class="{ current: t.name == tier.name }"
+						:class="{ current: t.name === tier?.name }"
 					>
 						<div slot="header" class="card-header flex-col items-start">
 							<strong>{{ t.name }}</strong>
@@ -90,6 +90,7 @@
 <script>
 import { mapGetters } from "vuex";
 import { db } from "src/firebase";
+import { legacy_tiers } from "src/utils/generalConstants";
 
 export default {
 	name: "Tiers",
@@ -114,7 +115,7 @@ export default {
 					title: "Storage",
 				},
 			},
-			legacy_tiers: ["legacy", "3403110", "3403128", "3403171"],
+			legacy_tiers,
 			storage: ["campaigns", "encounters", "players", "npcs", "spells", "reminders", "items"],
 		};
 	},
diff --git a/src/utils/generalConstants.js b/src/utils/generalConstants.js
index bd5c8a8c..14d1d06b 100644
--- a/src/utils/generalConstants.js
+++ b/src/utils/generalConstants.js
@@ -241,7 +241,8 @@ export const rules = Object.freeze([
 		name: "Dash",
 		url: "dash",
 		caption: "Double movement speed",
-		description: "Gain extra movement speed for the current turn. "+
+		description:
+			"Gain extra movement speed for the current turn. " +
 			"The increase equals your speed, after applying modifiers.",
 		src: "phb 192",
 	},
@@ -258,8 +259,9 @@ export const rules = Object.freeze([
 		name: "Dodge",
 		url: "dodge",
 		caption: "Increase defenses",
-		description: "Until the end of your next turn, any attack roll made against you has disadvantage if you can see the attacker, "+
-			"and you make Dexterity saving throws with advantage.\n\n"+
+		description:
+			"Until the end of your next turn, any attack roll made against you has disadvantage if you can see the attacker, " +
+			"and you make Dexterity saving throws with advantage.\n\n" +
 			"You lose this benefit if you are incapacitated or if your speed drops to 0.",
 		src: "phb 192",
 	},
@@ -268,9 +270,10 @@ export const rules = Object.freeze([
 		name: "Grapple",
 		url: "grapple",
 		caption: "Grab a creature",
-		description: "You can use the attack action to grapple a creature. If you're able to make multiple attacks on a turn, this replaces one of them.\n"+
-			"The target of the grapple must be no more than one size larger than you and must be within your reach.\n"+
-			"Using at least one free hand, you try to grapple the target by making a grapple check: a Strength (Athletics) check contested by the target's Strength (Athletics) or Dexterity (Acrobatics) check (the target chooses the ability to use).\n\n"+
+		description:
+			"You can use the attack action to grapple a creature. If you're able to make multiple attacks on a turn, this replaces one of them.\n" +
+			"The target of the grapple must be no more than one size larger than you and must be within your reach.\n" +
+			"Using at least one free hand, you try to grapple the target by making a grapple check: a Strength (Athletics) check contested by the target's Strength (Athletics) or Dexterity (Acrobatics) check (the target chooses the ability to use).\n\n" +
 			"If you succeed, the target gains the condition *grappled*",
 		src: "phb 195",
 	},
@@ -279,8 +282,9 @@ export const rules = Object.freeze([
 		name: "Help",
 		url: "help",
 		caption: "Grant an ally advantage",
-		description: "The target gains advantage on the next ability check it makes to perform the task you are helping with.\n\n"+
-			"Alternatively, the target gains advantage on the next attack roll against a creature within 5 feet of you.\n\n"+
+		description:
+			"The target gains advantage on the next ability check it makes to perform the task you are helping with.\n\n" +
+			"Alternatively, the target gains advantage on the next attack roll against a creature within 5 feet of you.\n\n" +
 			"The advantage lasts until the start of *your* next turn.",
 		src: "phb 192",
 	},
@@ -289,9 +293,10 @@ export const rules = Object.freeze([
 		name: "Hide",
 		url: "hide",
 		caption: "Attempt to hide",
-		description: "Make a Dexterity (Stealth) check in an attempt to hide.\n"+
-			"Until you are discovered or you stop hiding, the check's result is contested by the Wisdom (Perception) check of any creature that actively searches for signs of presence.\n"+
-			"A creature notices you even if it isn't searching unless your Stealth check is higher than it's *Passive Perception*.\n"+
+		description:
+			"Make a Dexterity (Stealth) check in an attempt to hide.\n" +
+			"Until you are discovered or you stop hiding, the check's result is contested by the Wisdom (Perception) check of any creature that actively searches for signs of presence.\n" +
+			"A creature notices you even if it isn't searching unless your Stealth check is higher than it's *Passive Perception*.\n" +
 			"You can't hide from a create that can see you. You must have total cover, be in a heavily obscured area, be invisible, or otherwise block the enemy's vision.\n\n",
 		src: "phb 192",
 	},
@@ -300,8 +305,9 @@ export const rules = Object.freeze([
 		name: "Shove",
 		url: "shove",
 		caption: "Push a creature",
-		description: "Make a Strength (Athletics) check, contested by the creature's Strength (Athletics) or Dexterity (Acrobatics) check"+
-			"to shove a creature, either to knock it prone or push it 5 feet away from you.\n\n"+
+		description:
+			"Make a Strength (Athletics) check, contested by the creature's Strength (Athletics) or Dexterity (Acrobatics) check" +
+			"to shove a creature, either to knock it prone or push it 5 feet away from you.\n\n" +
 			"If you're able to make multiple attacks with the Attack action, the shove replaces one of them.",
 		src: "phb 195",
 	},
@@ -310,7 +316,8 @@ export const rules = Object.freeze([
 		name: "Escape",
 		url: "escape",
 		caption: "Escape a grapple",
-		description: "To escape a grapple, you must succeed on a Strength (Athletics) or Dexterity (Acrobatics) check contested by the grappler's Strength (Athletics) check.",
+		description:
+			"To escape a grapple, you must succeed on a Strength (Athletics) or Dexterity (Acrobatics) check contested by the grappler's Strength (Athletics) check.",
 		src: "phb 195",
 	},
 	{
@@ -318,10 +325,11 @@ export const rules = Object.freeze([
 		name: "Ready",
 		url: "ready",
 		caption: "Choose a trigger and action",
-		description: "Decide what perceivable circumstance will trigger your reaction and choose the action you will take in response to the trigger.\n\n"+
-			"When the trigger occurs, you can either use your reaction to execute your readied action, or ignore the trigger."+
-			"When you ready a spell, you cast it as normal but hold its energy, which you release with you reaction when the trigger occurs."+ 
-			"Therefore you lose the spell slot or points once the spell is readied.\n"+
+		description:
+			"Decide what perceivable circumstance will trigger your reaction and choose the action you will take in response to the trigger.\n\n" +
+			"When the trigger occurs, you can either use your reaction to execute your readied action, or ignore the trigger." +
+			"When you ready a spell, you cast it as normal but hold its energy, which you release with you reaction when the trigger occurs." +
+			"Therefore you lose the spell slot or points once the spell is readied.\n" +
 			"To be readied, a spell must have a casting time of 1 action, and holding onto the spell's magic requires concentration.",
 		src: "phb 193",
 	},
@@ -330,7 +338,8 @@ export const rules = Object.freeze([
 		name: "Search",
 		url: "search",
 		caption: "Attempt to find something",
-		description: "Depending on the nature of the search, you might let the player make either a Wisdom (Perception) check or an Intelligence (Investigation) check.",
+		description:
+			"Depending on the nature of the search, you might let the player make either a Wisdom (Perception) check or an Intelligence (Investigation) check.",
 		src: "phb 193",
 	},
 	{
@@ -338,7 +347,8 @@ export const rules = Object.freeze([
 		name: "Use an Object",
 		url: "use-an-object",
 		caption: "Interact",
-		description: "You can interact with one object for free during your turn (such as drawing a weapon, or opening a door)."+
+		description:
+			"You can interact with one object for free during your turn (such as drawing a weapon, or opening a door)." +
 			"If you want to interact with a second object, you use this action.",
 		src: "phb 193",
 	},
@@ -354,8 +364,9 @@ export const rules = Object.freeze([
 		name: "Offhand Attack",
 		url: "offhand-attack",
 		caption: "Attack with your offhand",
-		description: "Perform a single attack with a different light melee weapon that you're holding in the other hand.\n\n"+
-			"Only usable if you take *Attack* action and attack with a light melee weapon that you're holding in one hand.\n\n"+
+		description:
+			"Perform a single attack with a different light melee weapon that you're holding in the other hand.\n\n" +
+			"Only usable if you take *Attack* action and attack with a light melee weapon that you're holding in one hand.\n\n" +
 			"You don't add your ability modifier to the damage of the bonus attack, unless that modifier is negative.",
 		src: "phb 195",
 	},
@@ -364,7 +375,8 @@ export const rules = Object.freeze([
 		name: "Cast a Spell",
 		url: "cast-a-spell-bonus-action",
 		caption: "Cast time of 1 bonus action",
-		description: "You can't cast a spell with your action and a different spell with your bonus action in the same turn, unless the action is used to cast a cantrip.",
+		description:
+			"You can't cast a spell with your action and a different spell with your bonus action in the same turn, unless the action is used to cast a cantrip.",
 		src: "phb 192",
 	},
 	{
@@ -379,8 +391,9 @@ export const rules = Object.freeze([
 		name: "Opportunity Attack",
 		url: "opportunity-attack",
 		caption: "Enemy leaves your reach",
-		description: "When an enemy leaves your reach, you can use your *reaction* to make one melee attack against that enemy.\n\n"+
-			"The attack interrupts the provoking creature's movement, occurring right before the creature leaves your reach.\n\n"+
+		description:
+			"When an enemy leaves your reach, you can use your *reaction* to make one melee attack against that enemy.\n\n" +
+			"The attack interrupts the provoking creature's movement, occurring right before the creature leaves your reach.\n\n" +
 			"Creatures don't provoke opportunity attacks when they teleport or when someone or something moves them without using their movement, action or reaction.",
 		src: "phb 195",
 	},
@@ -404,11 +417,12 @@ export const rules = Object.freeze([
 		name: "Move",
 		url: "move",
 		caption: "Move a distance up to your speed",
-		description: "If you have more than one speed, such as your walking speed and flying speed, you can switch back and forth between your speeds during your move."+
-			"Whenever you switch, subtract the moved distance from the new speed."+
-			"You can move through a non-hostile creature's space.\n\n"+
-			"You can move through a hostile creature's space only if the creature is at least two sizes larger or smaller than you.\n\n"+
-			"Another creature's space is difficult terrain for you.\n\n"+
+		description:
+			"If you have more than one speed, such as your walking speed and flying speed, you can switch back and forth between your speeds during your move." +
+			"Whenever you switch, subtract the moved distance from the new speed." +
+			"You can move through a non-hostile creature's space.\n\n" +
+			"You can move through a hostile creature's space only if the creature is at least two sizes larger or smaller than you.\n\n" +
+			"Another creature's space is difficult terrain for you.\n\n" +
 			"Whether a creature is friendly or hostile, you can't willingly end your move in its space.",
 		src: "phb 190",
 	},
@@ -417,7 +431,8 @@ export const rules = Object.freeze([
 		name: "Stand Up",
 		url: "stand-up",
 		caption: "Half your movement speed",
-		description: "Use half your movement speed to stand up.\n\n"+
+		description:
+			"Use half your movement speed to stand up.\n\n" +
 			"You can't stand up if you don't have enough movement left or if your speed is 0.",
 		src: "phb 190",
 	},
@@ -426,7 +441,8 @@ export const rules = Object.freeze([
 		name: "Grapple Move",
 		url: "grapple-move",
 		caption: "Speed halved",
-		description: "Drag or carry a grappled creature with you.\n\n"+
+		description:
+			"Drag or carry a grappled creature with you.\n\n" +
 			"If you move while grappling another creature, your speed is halved, unless the creature is two or more sizes smaller than you.",
 		src: "phb 195",
 	},
@@ -435,7 +451,8 @@ export const rules = Object.freeze([
 		name: "High Jump",
 		url: "high-jump",
 		caption: "3 + strength modifier",
-		description: "You leap into the air a number of feet equal to **3 + you strength modifier** if you move at least 10 feet on foot immediately before the jump."+
+		description:
+			"You leap into the air a number of feet equal to **3 + you strength modifier** if you move at least 10 feet on foot immediately before the jump." +
 			"When you make a standing high jump, you can jump only half that much.",
 		src: "phb 182",
 	},
@@ -444,7 +461,8 @@ export const rules = Object.freeze([
 		name: "Long Jump",
 		url: "long-jump",
 		caption: "Strength score in feet",
-		description: "You cover a number of feet up to your **Strength score** if you move at least 10 feet on foot immediately before the jump.\n\n"+
+		description:
+			"You cover a number of feet up to your **Strength score** if you move at least 10 feet on foot immediately before the jump.\n\n" +
 			"When you make a standing long jump, you can leap half that distance.",
 		src: "phb 182",
 	},
@@ -453,7 +471,8 @@ export const rules = Object.freeze([
 		name: "Climb",
 		url: "climb",
 		caption: "Double movement cost",
-		description: "Each foot of movement costs one extra foot (two extra in difficult terrain) when you're climbing, swimming, or crawling.\n\n"+
+		description:
+			"Each foot of movement costs one extra foot (two extra in difficult terrain) when you're climbing, swimming, or crawling.\n\n" +
 			"The climb may involve a Strength (Athletics) check if it is difficult.",
 		src: "phb 182",
 	},
@@ -462,7 +481,8 @@ export const rules = Object.freeze([
 		name: "Swim",
 		url: "swim",
 		caption: "Double movement cost",
-		description: "Each foot of movement costs one extra foot (two extra in difficult terrain) when you're swimming, climbing or crawling.\n\n",
+		description:
+			"Each foot of movement costs one extra foot (two extra in difficult terrain) when you're swimming, climbing or crawling.\n\n",
 		src: "phb 182",
 	},
 	{
@@ -470,7 +490,8 @@ export const rules = Object.freeze([
 		name: "Crawl",
 		url: "crawl",
 		caption: "Double movement cost",
-		description: "Each foot of movement costs one extra foot (two extra in difficult terrain) when you're crawling, climbing or swimming.",
+		description:
+			"Each foot of movement costs one extra foot (two extra in difficult terrain) when you're crawling, climbing or swimming.",
 		src: "phb 182",
 	},
 	{
@@ -478,7 +499,8 @@ export const rules = Object.freeze([
 		name: "Drop Prone",
 		url: "drop-prone",
 		caption: "Free",
-		description: "You can drop prone without using any of your speed. You will gain the *Prone* condition.\n\n"+
+		description:
+			"You can drop prone without using any of your speed. You will gain the *Prone* condition.\n\n" +
 			"To move while prone, you must crawl.",
 		src: "phb 190",
 	},
@@ -487,7 +509,8 @@ export const rules = Object.freeze([
 		name: "Improvise",
 		url: "improvise",
 		caption: "Perform a stunt you imagine",
-		description: "When a player wants to perform a kind of movement not detailed in the rules, "+
+		description:
+			"When a player wants to perform a kind of movement not detailed in the rules, " +
 			"you decide whether this is possible and what kind of roll needs to made, if any, to succeed the movement.",
 	},
 	{
@@ -495,7 +518,8 @@ export const rules = Object.freeze([
 		name: "Difficult Terrain",
 		url: "difficult-terrain",
 		caption: "Double movement cost",
-		description: "You move at half speed in difficult terrain, moving 1 foot in difficult terrain costs 2 feet of speed.",
+		description:
+			"You move at half speed in difficult terrain, moving 1 foot in difficult terrain costs 2 feet of speed.",
 		src: "phb 182",
 	},
 	{
@@ -503,7 +527,8 @@ export const rules = Object.freeze([
 		name: "Lightly Obscured",
 		url: "lightly-obscured",
 		caption: "Disadvantage on perception",
-		description: "*Dim light, patchy fog, moderate foliage*\n\n"+
+		description:
+			"*Dim light, patchy fog, moderate foliage*\n\n" +
 			"Creatures have **disadvantage on Wisdom (Perception)** checks that rely on sight.",
 		src: "phb 183",
 	},
@@ -512,7 +537,8 @@ export const rules = Object.freeze([
 		name: "Heavily Obscured",
 		url: "heavily-obscured",
 		caption: "Effectively blind",
-		description: "*Darkness, opaque fog, dense foliage*\n\n"+
+		description:
+			"*Darkness, opaque fog, dense foliage*\n\n" +
 			"A creature in a heavily obscured area effectively suffers from the **blinded condition**",
 		src: "phb 183",
 	},
@@ -521,7 +547,8 @@ export const rules = Object.freeze([
 		name: "Bright Light",
 		url: "bright-light",
 		caption: "Normal vision",
-		description: "Gloomy days still provide bright light, as do torches, lanterns, fires and other sources of illumination within a specific radius.",
+		description:
+			"Gloomy days still provide bright light, as do torches, lanterns, fires and other sources of illumination within a specific radius.",
 		src: "phb 183",
 	},
 	{
@@ -529,8 +556,9 @@ export const rules = Object.freeze([
 		name: "Dim Light",
 		url: "dim-light",
 		caption: "Lightly obscured",
-		description: "Creates a **lightly obscured** area.\n\n"+
-			"An area of dim light is usually a boundary between a source of bright light and surrounding darkness.\n\n"+
+		description:
+			"Creates a **lightly obscured** area.\n\n" +
+			"An area of dim light is usually a boundary between a source of bright light and surrounding darkness.\n\n" +
 			"The soft light of twilight and dawn also counts as dim light. A particularly brilliant full moon might bathe the land in dim light.",
 		src: "phb 183",
 	},
@@ -539,7 +567,8 @@ export const rules = Object.freeze([
 		name: "Darkness",
 		url: "darkness",
 		caption: "Heavily obscured",
-		description: "Creates a **heavily obscured** area.\n\n"+
+		description:
+			"Creates a **heavily obscured** area.\n\n" +
 			"Characters face darkness outdoors at night (even most moonlit nights), within the confines of an unlit dungeon or a subterranean vault, or in an area of magical darkness.",
 		src: "phb 183",
 	},
@@ -548,7 +577,8 @@ export const rules = Object.freeze([
 		name: "Blindsight",
 		url: "blindsight",
 		caption: "Perceive without sight",
-		description: "Creatures without eyes, such as oozes, and creatures with echolocation or heightened senses, such as bats and true dragons, have this sense.",
+		description:
+			"Creatures without eyes, such as oozes, and creatures with echolocation or heightened senses, such as bats and true dragons, have this sense.",
 		src: "phb ",
 	},
 	{
@@ -556,8 +586,9 @@ export const rules = Object.freeze([
 		name: "Darkvision",
 		url: "darkvision",
 		caption: "Limited vision in darkness",
-		description: "A creature with Darkvision can see better in the dark or low light conditions, within a certain radius.\n\n"+
-			"Within a specified range, a creature with darkvision can **see in darkness as if the darkness were dim light**, so areas of darkness are only lightly obscured as far as that creature is concerned.\n\n"+
+		description:
+			"A creature with Darkvision can see better in the dark or low light conditions, within a certain radius.\n\n" +
+			"Within a specified range, a creature with darkvision can **see in darkness as if the darkness were dim light**, so areas of darkness are only lightly obscured as far as that creature is concerned.\n\n" +
 			"However, the creature can't discern color in darkness, only shades of gray.",
 		src: "phb 183",
 	},
@@ -566,8 +597,9 @@ export const rules = Object.freeze([
 		name: "Truesight",
 		url: "truesight",
 		caption: "See in darkness",
-		description: "A creature with truesight can see everything in its true form, independent of the environment"+
-		"A creature with truesight can, out to a specific range, see in normal and magical darkness, see invisible creatures and objects, automatically detect visual illusions and succeed on saving throws against them, and perceives the original form of a shapechanger or a creature that is transformed by magic.",
+		description:
+			"A creature with truesight can see everything in its true form, independent of the environment" +
+			"A creature with truesight can, out to a specific range, see in normal and magical darkness, see invisible creatures and objects, automatically detect visual illusions and succeed on saving throws against them, and perceives the original form of a shapechanger or a creature that is transformed by magic.",
 		src: "phb 184",
 	},
 	{
@@ -575,8 +607,9 @@ export const rules = Object.freeze([
 		name: "Half Cover",
 		url: "half-cover",
 		caption: "+2 AC and DEX saving throws",
-		description: "A target with half cover has a **+2 bonus to AC and Dexterity saving throws**.\n\n"+
-			"The obstacle might be a low wall, a large piece of furniture, a narrow tree trunk, or a creature, whether that creature is an enemy or a friend.\n\n"+
+		description:
+			"A target with half cover has a **+2 bonus to AC and Dexterity saving throws**.\n\n" +
+			"The obstacle might be a low wall, a large piece of furniture, a narrow tree trunk, or a creature, whether that creature is an enemy or a friend.\n\n" +
 			"If a target is behind multiple sources of cover, only the most protective degree of cover applies",
 		src: "phb 196",
 	},
@@ -585,8 +618,9 @@ export const rules = Object.freeze([
 		name: "Three-quarters Cover",
 		url: "three-quarters-cover",
 		caption: "+5 AC and DEX saving throws",
-		description: "A target with three-quarters cover has a **+5 bonus to AC and Dexterity saving throws**.\n\n"+
-			"The obstacle might be a portcullis, an arrow slit, or a thick tree trunk.\n\n"+
+		description:
+			"A target with three-quarters cover has a **+5 bonus to AC and Dexterity saving throws**.\n\n" +
+			"The obstacle might be a portcullis, an arrow slit, or a thick tree trunk.\n\n" +
 			"If a target is behind multiple sources of cover, only the most protective degree of cover applies",
 		src: "phb 196",
 	},
@@ -595,8 +629,9 @@ export const rules = Object.freeze([
 		name: "Full Cover",
 		url: "full-cover",
 		caption: "Can't be targeted directly",
-		description: "A target with total cover can't be targeted directly by an attack or a spell, although some spells can reach such a target by including it in an area of effect.\n\n"+
-			"A target has total cover if it is completely concealed by an obstacle."+
+		description:
+			"A target with total cover can't be targeted directly by an attack or a spell, although some spells can reach such a target by including it in an area of effect.\n\n" +
+			"A target has total cover if it is completely concealed by an obstacle." +
 			"If a target is behind multiple sources of cover, only the most protective degree of cover applies",
 		src: "phb 196",
 	},
@@ -743,3 +778,5 @@ export const live_initiative_texts = Object.freeze([
 			"that is perfect for your games. You decide what you want to show to or hide from your players.",
 	},
 ]);
+
+export const legacy_tiers = Object.freeze(["legacy", "3403110", "3403128", "3403171"]);
diff --git a/src/views/Admin/Vouchers.vue b/src/views/Admin/Vouchers.vue
index 7af483da..41ad22dc 100644
--- a/src/views/Admin/Vouchers.vue
+++ b/src/views/Admin/Vouchers.vue
@@ -151,6 +151,7 @@
 <script>
 import { voucherService } from "src/services/vouchers";
 import { monsterMixin } from "src/mixins/monster";
+import { legacy_tiers } from "src/utils/generalConstants";
 
 export default {
 	name: "GenerateSearchTable",
@@ -210,7 +211,7 @@ export default {
 			let tier_list = this.tiers;
 			tier_list.sort((a, b) => a.order - b.order);
 			return tier_list
-				.filter((tier) => tier.order > 0)
+				.filter((tier) => tier.order > 0 && !legacy_tiers.includes(tier.id))
 				.map((tier) => ({ label: tier.name, value: tier.id }));
 		},
 		loading() {

From 193080cb5b39be9ad36bda314a4c6267173498a6 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Wed, 15 May 2024 11:01:20 +0200
Subject: [PATCH 24/24] version bump

---
 package-lock.json        | 4 ++--
 package.json             | 2 +-
 src/components/Tiers.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8733c3ba..9baf7c30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "shieldmaiden",
-	"version": "2.24.6",
+	"version": "2.25.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "shieldmaiden",
-			"version": "2.24.6",
+			"version": "2.25.0",
 			"dependencies": {
 				"@octokit/rest": "^19.0.5",
 				"@quasar/extras": "^1.16.11",
diff --git a/package.json b/package.json
index b4f89136..f935f45e 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "2.24.6",
+	"version": "2.25.0",
 	"name": "shieldmaiden",
 	"description": "A Dungeons and Dragons Combat Tracker",
 	"productName": "Shieldmaiden",
diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index eb05c7af..3eb943ae 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -132,7 +132,7 @@ export default {
 	},
 	methods: {
 		storageType(type, count) {
-			type === "npcs" ? type.slice(0, -1).toUpperCase() : type.slice(0, -1).capitalize();
+			type = type === "npcs" ? type.slice(0, -1).toUpperCase() : type.slice(0, -1).capitalize();
 			return count === "infinite" || count > 1 ? `${type}s` : type;
 		},
 	},