From c040a5764ed70e1b9f4c0ff1b603a0e32ee8d549 Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 19 May 2023 16:06:34 +0200
Subject: [PATCH 01/24] Run encounter in test mode

---
 src/components/combat/Targets.vue             | 425 ++++++++++--------
 src/components/combat/Turns.vue               | 334 ++++++++------
 src/components/slides/encounter/TestMode.vue  |  21 +
 src/router/routes.js                          |  11 +
 src/store/modules/runEncounter.js             | 149 +++---
 src/views/RunEncounter.vue                    |   4 +-
 .../UserContent/Encounters/Edit/index.vue     | 310 +++++++------
 7 files changed, 719 insertions(+), 535 deletions(-)
 create mode 100644 src/components/slides/encounter/TestMode.vue

diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index e8ff0266a..86b60b493 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -1,54 +1,66 @@
 <template>
 	<div id="targets" class="bg-neutral-6-transparent">
-		<h2 
-			class="componentHeader d-flex justify-content-between" 
-			:class="{ shadow : setShadow > 0 }">
+		<h2 class="componentHeader d-flex justify-content-between" :class="{ shadow: setShadow > 0 }">
 			<span>
-				<i aria-hidden="true" class="fas fa-helmet-battle"></i> Targets ({{ _targets.length }})
+				<i aria-hidden="true" class="fas fa-helmet-battle" /> Targets ({{ _targets.length }})
 			</span>
-			<a @click="setSlide({show: true, type: 'slides/encounter/AddNpc'})"
-				v-shortkey="['a']" @shortkey="setSlide({show: true, type: 'slides/encounter/AddNpc'})"
-				class="btn btn-sm bg-neutral-5">
-				<i aria-hidden="true" class="fas fa-plus green"></i>
+			<button
+				@click="test ? null : setSlide({ show: true, type: 'slides/encounter/AddNpc' })"
+				v-shortkey="['a']"
+				@shortkey="test ? null : setSlide({ show: true, type: 'slides/encounter/AddNpc' })"
+				class="btn btn-sm bg-neutral-5"
+				:class="{ disabled: test }"
+			>
+				<i aria-hidden="true" class="fas fa-plus green" />
 				<span class="ml-1">
 					Add
 					<span v-if="!showKeybinds" class="d-none d-sm-inline">[a]</span>
 				</span>
-			</a>
+				<q-tooltip v-if="test" anchor="top middle" self="center middle"
+					>Unavailable in test mode</q-tooltip
+				>
+			</button>
 		</h2>
-		<q-scroll-area :dark="$store.getters.theme === 'dark'" :thumb-style="{ width: '5px'}" v-on:scroll="shadow()" ref="scroll">
-			<div v-shortkey="{
-				downSingle: ['arrowdown'], 
-				downMultiple: ['shift', 'arrowdown'],
-				upSingle: ['arrowup'], 
-				upMultiple: ['shift', 'arrowup']
-				}" 
+		<q-scroll-area
+			:dark="$store.getters.theme === 'dark'"
+			:thumb-style="{ width: '5px' }"
+			v-on:scroll="shadow()"
+			ref="scroll"
+		>
+			<div
+				v-shortkey="{
+					downSingle: ['arrowdown'],
+					downMultiple: ['shift', 'arrowdown'],
+					upSingle: ['arrowup'],
+					upMultiple: ['shift', 'arrowup'],
+				}"
 				@shortkey="cycle_target"
 			>
-				<template v-for="{group, targets} in groups">
+				<template v-for="{ group, targets } in groups">
 					<h2 :key="`header-${group}`" v-if="group !== 'active' && targets.length > 0">
-						<i aria-hidden="true" v-if="group === 'down'" class="fas fa-skull-crossbones red" /> {{ group.capitalize() }} ({{ targets.length }})
+						<i aria-hidden="true" v-if="group === 'down'" class="fas fa-skull-crossbones red" />
+						{{ group.capitalize() }} ({{ targets.length }})
 					</h2>
 					<transition-group
 						:key="group"
-						tag="ul" 
+						tag="ul"
 						class="targets"
 						:class="`${group}_targets`"
-						name="group" 
-						enter-active-class="animated animate__fadeInUp" 
+						name="group"
+						enter-active-class="animated animate__fadeInUp"
 						leave-active-class="animated animate__fadeOutDown"
 					>
-						<li 
+						<li
 							v-for="(entity, i) in targets"
-							class="d-flex justify-content-between" 
-							:key="entity.key" 
-							:class="{ 
-								'targeted': targeted.includes(entity.key), 
-								'top': _active[0].key === entity.key && encounter.turn !== 0
+							class="d-flex justify-content-between"
+							:key="entity.key"
+							:class="{
+								targeted: targeted.includes(entity.key),
+								top: _active[0].key === entity.key && encounter.turn !== 0,
 							}"
 						>
-							<span 
-								class="topinfo d-flex justify-content-between" 
+							<span
+								class="topinfo d-flex justify-content-between"
 								v-if="group === 'active' && _active[0].key == entity.key && encounter.turn != 0"
 							>
 								Top of the round
@@ -68,45 +80,56 @@
 								</div>
 							</span>
 
-							<div class="target" 
-								v-touch-hold.mouse="event => selectTarget(event, 'multi', entity.key)"
+							<div
+								class="target"
+								v-touch-hold.mouse="(event) => selectTarget(event, 'multi', entity.key)"
 								@click="selectTarget($event, 'single', entity.key)"
-								v-shortkey="[i]" @shortkey="set_targeted({ type: 'single', key: entity.key })">
+								v-shortkey="[i]"
+								@shortkey="set_targeted({ type: 'single', key: entity.key })"
+							>
 								<TargetItem :item="entity.key" :i="i" :initiative="true" :showReminders="true" />
 							</div>
 
 							<div v-if="!entity.active" class="d-flex">
-								<a class="btn btn-sm btn-clear mx-1" 
+								<a
+									class="btn btn-sm btn-clear mx-1"
 									v-if="entity.addNextRound"
-									v-on:click.stop="add_next_round({key: entity.key, action: 'tag', value: false})">
-									<i aria-hidden="true" class="fas fa-check green"></i>
+									v-on:click.stop="add_next_round({ key: entity.key, action: 'tag', value: false })"
+								>
+									<i aria-hidden="true" class="fas fa-check green" />
 									<q-tooltip anchor="top middle" self="center middle">
 										Will be added next round
 									</q-tooltip>
 								</a>
-								<a class="btn btn-sm btn-clear mx-1" 
+								<a
+									class="btn btn-sm btn-clear mx-1"
 									v-if="!entity.addNextRound"
-									v-on:click.stop="add_next_round({key: entity.key, action: 'tag', value: true})">
-									<i aria-hidden="true" class="fas fa-check neutral-2"></i>
+									v-on:click.stop="add_next_round({ key: entity.key, action: 'tag', value: true })"
+								>
+									<i aria-hidden="true" class="fas fa-check neutral-2" />
 									<q-tooltip anchor="top middle" self="center middle">
 										Click to add next round
 									</q-tooltip>
 								</a>
-								<a class="btn btn-sm bg-neutral-5" 
-									@click="add_next_round({key: entity.key, action: 'set'})">
-									<i aria-hidden="true" class="fas fa-arrow-up"></i>
-									<q-tooltip anchor="top middle" self="center middle">
-										Add now
-									</q-tooltip>
+								<a
+									class="btn btn-sm bg-neutral-5"
+									@click="add_next_round({ key: entity.key, action: 'set' })"
+								>
+									<i aria-hidden="true" class="fas fa-arrow-up" />
+									<q-tooltip anchor="top middle" self="center middle"> Add now </q-tooltip>
 								</a>
 							</div>
 							<a class="options">
-								<i aria-hidden="true" class="fal fa-ellipsis-v"></i>
-								<q-popup-proxy :dark="$store.getters.theme === 'dark'" anchor="bottom right" self="top right" :breakpoint="576">
+								<i aria-hidden="true" class="fal fa-ellipsis-v" />
+								<q-popup-proxy
+									:dark="$store.getters.theme === 'dark'"
+									anchor="bottom right"
+									self="top right"
+									:breakpoint="576"
+								>
 									<target-menu :entity="entity" />
 								</q-popup-proxy>
 							</a>
-
 						</li>
 					</transition-group>
 				</template>
@@ -116,155 +139,173 @@
 </template>
 
 <script>
-	import _ from 'lodash';
-	import { mapGetters, mapActions } from 'vuex';
-	import TargetItem from 'src/components/combat/TargetItem.vue';
-	import TargetMenu from 'src/components/combat/TargetMenu.vue';
+import _ from "lodash";
+import { mapGetters, mapActions } from "vuex";
+import TargetItem from "src/components/combat/TargetItem.vue";
+import TargetMenu from "src/components/combat/TargetMenu.vue";
 
-	export default {
-		name: 'Targets',
-		components: {TargetItem, TargetMenu},
-		props: ['_active','_idle'],
-		data() {
-			return {
-				userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
-				currentTarget: {},
-				setShadow: 0
+export default {
+	name: "Targets",
+	components: { TargetItem, TargetMenu },
+	props: ["_active", "_idle"],
+	data() {
+		return {
+			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
+			currentTarget: {},
+			setShadow: 0,
+		};
+	},
+	computed: {
+		...mapGetters([
+			"campaignId",
+			"encounterId",
+			"encounter",
+			"entities",
+			"targeted",
+			"userSettings",
+			"test",
+		]),
+		groups() {
+			return [
+				{
+					group: "active",
+					targets: this._targets,
+				},
+				{
+					group: "idle",
+					targets: this._idle,
+				},
+				{
+					group: "down",
+					targets: this._down,
+				},
+			];
+		},
+		_targets: function () {
+			let t = this.encounter.turn;
+			let turns = Object.keys(this._active);
+			let order = turns.slice(t).concat(turns.slice(0, t));
+			return Array.from(order, (i) => this._active[i]);
+		},
+		_down: function () {
+			return _.chain(this.entities)
+				.filter(function (entity, key) {
+					entity.key = key;
+					return !!entity.down;
+				})
+				.orderBy(function (entity) {
+					return parseInt(entity.initiative);
+				}, "desc")
+				.value();
+		},
+		//Count NPC's that are down but still in active list
+		_activeDown: function () {
+			return _.chain(this._targets)
+				.filter(function (entity) {
+					return entity.curHp == 0 && entity.entityType == "npc";
+				})
+				.sortBy("name", "desc")
+				.value();
+		},
+		_addedNextRound: function () {
+			return _.chain(this._idle)
+				.filter(function (entity) {
+					return !!entity.addNextRound;
+				})
+				.sortBy("name", "desc")
+				.value();
+		},
+		showKeybinds() {
+			return this.userSettings && this.userSettings.general
+				? this.userSettings.general.keyBinds
+				: undefined;
+		},
+	},
+	methods: {
+		...mapActions([
+			"setSlide",
+			"set_hidden",
+			"set_targeted",
+			"set_stable",
+			"remove_entity",
+			"add_next_round",
+		]),
+		setHidden(key, hidden) {
+			if (key) {
+				this.set_hidden({
+					key: key,
+					hidden: hidden,
+				});
+			} else {
+				this.$snotify.error("Select a target", "Hide entity", {});
 			}
 		},
-		computed: {
-			...mapGetters([
-				'campaignId',
-				'encounterId',
-				'encounter',
-				'entities',
-				'targeted',
-				'userSettings'
-			]),
-			groups() {
-				return [
-					{ 
-						group: "active",
-						targets: this._targets
-					},
-					{
-						group: "idle",
-						targets: this._idle
-					},
-					{
-						group: "down",
-						targets: this._down
-					}
-				]
-			},
-			_targets: function() {
-				let t = this.encounter.turn
-				let turns = Object.keys(this._active)
-				let order = turns.slice(t).concat(turns.slice(0,t))
-				return Array.from(order, i => this._active[i])
-			},
-			_down: function() {
-				return _.chain(this.entities)
-					.filter(function(entity, key) {
-						entity.key = key
-						return !!entity.down;
-					})
-					.orderBy(function(entity){
-						return parseInt(entity.initiative)
-					} , 'desc')
-					.value()
-			},
-			//Count NPC's that are down but still in active list
-			_activeDown: function() {
-				return _.chain(this._targets)
-					.filter(function(entity) {
-						return entity.curHp == 0 && entity.entityType == 'npc';
-					})
-					.sortBy('name' , 'desc')
-					.value()
-			},
-			_addedNextRound: function() {
-				return _.chain(this._idle)
-					.filter(function(entity) {
-						return !!entity.addNextRound;
-					})
-					.sortBy('name' , 'desc')
-					.value()
-			},
-			showKeybinds() {
-				return (this.userSettings && this.userSettings.general) ? this.userSettings.general.keyBinds : undefined;
-			},
+		shadow() {
+			this.setShadow = this.$refs.scroll.scrollPosition;
 		},
-		methods: {
-			...mapActions([
-				'setSlide',
-				'set_hidden',
-				'set_targeted',
-				'set_stable',
-				'remove_entity',
-				'add_next_round',
-			]),
-			setHidden(key, hidden) {
-				if(key) {
-					this.set_hidden({
-						key: key,
-						hidden: hidden
-					})
-				} else {
-					this.$snotify.error('Select a target', 'Hide entity', {
-					});
-				}
-			},
-			shadow() {
-				this.setShadow = this.$refs.scroll.scrollPosition;
-			},
-			remove(key, name) {
-				this.$snotify.error('Are you sure you want to remove "' + name + '" from this encounter?', 'Delete character', {
+		remove(key, name) {
+			this.$snotify.error(
+				'Are you sure you want to remove "' + name + '" from this encounter?',
+				"Delete character",
+				{
 					buttons: [
-						{ text: 'Yes', action: (toast) => { this.remove_entity(key); this.$snotify.remove(toast.id); }, bold: false},
-						{ text: 'No', action: (toast) => { this.$snotify.remove(toast.id); }, bold: true},
-					]
-				});
-			},
-			selectTarget(e, type, key) {
-				type = (e.shiftKey) ? "multi" : type;
-				//Select the target
-				this.set_targeted({
-					type,
-					key
-				});
-			},
-			cycle_target(event) {
-				const lastSelected = this.targeted[this.targeted.length - 1];
-				const type = (event.srcKey === 'upSingle' || event.srcKey === 'downSingle') ? "single" : "multi"; //Multitarget or not
-				//Create array with keys of all targets
-				const targetsArray = this._targets.map((item) => {
-					return item.key;
-				});
-				const current = targetsArray.indexOf(lastSelected); //Set the target from where we're gonna select the next
-
-				let index;
-				//Select the next target, either up or down based on the key that's pressed
-				if((event.srcKey === 'downSingle' || event.srcKey === 'downMultiple')) {
-					index = ((current + 1) < this._targets.length) ? current + 1 : 0;
-				} else {
-					index = ((current - 1) < 0) ? targetsArray.length - 1 : current - 1;
+						{
+							text: "Yes",
+							action: (toast) => {
+								this.remove_entity(key);
+								this.$snotify.remove(toast.id);
+							},
+							bold: false,
+						},
+						{
+							text: "No",
+							action: (toast) => {
+								this.$snotify.remove(toast.id);
+							},
+							bold: true,
+						},
+					],
 				}
-				const target = targetsArray[index];
+			);
+		},
+		selectTarget(e, type, key) {
+			type = e.shiftKey ? "multi" : type;
+			//Select the target
+			this.set_targeted({
+				type,
+				key,
+			});
+		},
+		cycle_target(event) {
+			const lastSelected = this.targeted[this.targeted.length - 1];
+			const type =
+				event.srcKey === "upSingle" || event.srcKey === "downSingle" ? "single" : "multi"; //Multitarget or not
+			//Create array with keys of all targets
+			const targetsArray = this._targets.map((item) => {
+				return item.key;
+			});
+			const current = targetsArray.indexOf(lastSelected); //Set the target from where we're gonna select the next
 
-				//Select the target
-				this.set_targeted({
-					type,
-					key: target
-				});
-				
+			let index;
+			//Select the next target, either up or down based on the key that's pressed
+			if (event.srcKey === "downSingle" || event.srcKey === "downMultiple") {
+				index = current + 1 < this._targets.length ? current + 1 : 0;
+			} else {
+				index = current - 1 < 0 ? targetsArray.length - 1 : current - 1;
 			}
+			const target = targetsArray[index];
+
+			//Select the target
+			this.set_targeted({
+				type,
+				key: target,
+			});
 		},
-	}
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-
 #targets {
 	grid-area: targets;
 	overflow: hidden;
@@ -285,7 +326,7 @@
 			line-height: 31px;
 
 			&.shadow {
-				box-shadow: 0 0 10px rgba(0,0,0, 0.9); 
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
 			}
 		}
 	}
@@ -314,7 +355,7 @@
 	}
 }
 .q-scrollarea {
-	padding:0 0 30px 0;
+	padding: 0 0 30px 0;
 	height: calc(100% - 55px);
 }
 ul.targets {
@@ -357,13 +398,15 @@ ul.targets {
 	}
 }
 .targets-move {
-  transition: transform .6s;
+	transition: transform 0.6s;
 }
-.fadeInUp, .fadeInDown {
-	animation-delay: .6s;
+.fadeInUp,
+.fadeInDown {
+	animation-delay: 0.6s;
 }
 @media only screen and (max-width: 576px) {
-	#targets, .q-scrollarea {
+	#targets,
+	.q-scrollarea {
 		overflow: visible !important;
 		padding-bottom: 0;
 
@@ -374,4 +417,4 @@ ul.targets {
 		}
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index 2ed37aec1..780b0c28f 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -12,41 +12,80 @@
 						</q-item>
 						<q-separator />
 						<q-item
-							v-if="!demo" clickable v-close-popup
-							@click="setSlide({
-								show: true,
-								type: 'slides/Broadcast',
-								data: {
-									campaign_id: $route.params.campid,
-									encounter_id: $route.params.encid
-								}
-							})"
+							v-if="!demo && !test"
+							clickable
+							v-close-popup
+							@click="
+								setSlide({
+									show: true,
+									type: 'slides/Broadcast',
+									data: {
+										campaign_id: $route.params.campid,
+										encounter_id: $route.params.encid,
+									},
+								})
+							"
 						>
 							<q-item-section avatar>
-								<i aria-hidden="true" class="far fa-dot-circle" :class="{ red: broadcast.live === $route.params.campid }" />
+								<i
+									aria-hidden="true"
+									class="far fa-dot-circle"
+									:class="{ red: broadcast.live === $route.params.campid }"
+								/>
 							</q-item-section>
 							<q-item-section>
 								{{ broadcast.live !== $route.params.campid ? "Go live" : "Stop broadcast" }}
 							</q-item-section>
 						</q-item>
-						<q-item v-if="encounter.audio" clickable v-close-popup @click="open_audio_link(encounter.audio)">
-							<q-item-section avatar><q-icon :class="audio_icons[audio_link_type].icon" :style="`color:${audio_icons[audio_link_type].color};`"></q-icon></q-item-section>
+						<q-item
+							v-if="encounter.audio"
+							clickable
+							v-close-popup
+							@click="open_audio_link(encounter.audio)"
+						>
+							<q-item-section avatar
+								><q-icon
+									:class="audio_icons[audio_link_type].icon"
+									:style="`color:${audio_icons[audio_link_type].color};`"
+								></q-icon
+							></q-item-section>
 							<q-item-section>Audio Link</q-item-section>
 						</q-item>
-						<q-item v-if="!demo" clickable v-close-popup @click="setSlide({show: true, type: 'settings/Encounter'})">
+						<q-item
+							v-if="!demo"
+							clickable
+							v-close-popup
+							@click="setSlide({ show: true, type: 'settings/Encounter' })"
+						>
 							<q-item-section avatar><i aria-hidden="true" class="fas fa-cogs" /></q-item-section>
 							<q-item-section>Settings</q-item-section>
 						</q-item>
-						<q-item v-if="!demo" clickable v-close-popup @click="setSlide({show: true, type: 'settings/TrackEncounter'})">
-							<q-item-section avatar><i aria-hidden="true" class="fas fa-desktop" /></q-item-section>
+						<q-item
+							v-if="!demo && !test"
+							clickable
+							v-close-popup
+							@click="setSlide({ show: true, type: 'settings/TrackEncounter' })"
+						>
+							<q-item-section avatar
+								><i aria-hidden="true" class="fas fa-desktop"
+							/></q-item-section>
 							<q-item-section>Public initiative settings</q-item-section>
 						</q-item>
-						<q-item clickable v-close-popup v-if="demo"  @click="$router.replace('/tools/encounter-builder/build-encounter')">
-							<q-item-section avatar><i aria-hidden="true" class="fas fa-hammer-war" /></q-item-section>
+						<q-item
+							clickable
+							v-close-popup
+							v-if="demo"
+							@click="$router.replace('/tools/encounter-builder/build-encounter')"
+						>
+							<q-item-section avatar
+								><i aria-hidden="true" class="fas fa-hammer-war"
+							/></q-item-section>
 							<q-item-section>Build encounter</q-item-section>
 						</q-item>
 						<q-item clickable v-close-popup v-if="demo" @click="reset_demo()">
-							<q-item-section avatar><i aria-hidden="true" class="far fa-sync-alt" /></q-item-section>
+							<q-item-section avatar
+								><i aria-hidden="true" class="far fa-sync-alt"
+							/></q-item-section>
 							<q-item-section>Reset encounter</q-item-section>
 						</q-item>
 						<q-item clickable v-close-popup @click="confirmFinish()">
@@ -54,8 +93,10 @@
 							<q-item-section>Finish encounter</q-item-section>
 						</q-item>
 						<q-separator />
-						<q-item clickable v-close-popup @click="$router.replace(demo ? `/` : `/content/campaigns/${$route.params.campid}`)">
-							<q-item-section avatar><i aria-hidden="true" class="fas fa-chevron-left" /></q-item-section>
+						<q-item clickable v-close-popup @click="$router.replace(leaveRoute)">
+							<q-item-section avatar
+								><i aria-hidden="true" class="fas fa-chevron-left"
+							/></q-item-section>
 							<q-item-section>Leave encounter</q-item-section>
 						</q-item>
 					</q-list>
@@ -70,12 +111,11 @@
 			<a
 				class="handler neutral-2"
 				@click="prevTurn()"
-				v-shortkey="['shift', 'arrowleft']" @shortkey="prevTurn()"
+				v-shortkey="['shift', 'arrowleft']"
+				@shortkey="prevTurn()"
 			>
 				<i aria-hidden="true" class="fas fa-step-backward" />
-				<q-tooltip anchor="top middle" self="center middle">
-					Previous turn
-				</q-tooltip>
+				<q-tooltip anchor="top middle" self="center middle"> Previous turn </q-tooltip>
 			</a>
 
 			<template v-if="encounter.round">
@@ -86,24 +126,23 @@
 				<div>
 					<div class="header">Turn</div>
 					<div class="number">
-						{{ encounter.turn + 1 }}<span class="neutral-3"><span class="neutral-4">/</span>{{ active_len }}</span>
+						{{ encounter.turn + 1
+						}}<span class="neutral-3"><span class="neutral-4">/</span>{{ active_len }}</span>
 					</div>
 				</div>
 			</template>
 
-			<a class="handler neutral-2"
+			<a
+				class="handler neutral-2"
 				@click="nextTurn()"
-				v-shortkey="['shift', 'arrowright']" @shortkey="nextTurn()">
+				v-shortkey="['shift', 'arrowright']"
+				@shortkey="nextTurn()"
+			>
 				<i aria-hidden="true" class="fas fa-step-forward" />
-				<q-tooltip anchor="top middle" self="center middle">
-					Next turn
-				</q-tooltip>
+				<q-tooltip anchor="top middle" self="center middle"> Next turn </q-tooltip>
 			</a>
 		</div>
-		<div v-else>
-			Set Initiative
-		</div>
-
+		<div v-else>Set Initiative</div>
 
 		<div class="d-flex justify-content-end center">
 			<span v-if="encounter.round > 0" class="timer">
@@ -113,26 +152,41 @@
 
 			<!-- BROADCASTING -->
 			<span
-				v-if="!demo"
-				@click="setSlide({
-					show: true,
-					type: 'slides/Broadcast',
-					data: {
-						campaign_id: $route.params.campid,
-						encounter_id: $route.params.encid
-					}
-				})"
+				v-if="!demo && !test"
+				@click="
+					setSlide({
+						show: true,
+						type: 'slides/Broadcast',
+						data: {
+							campaign_id: $route.params.campid,
+							encounter_id: $route.params.encid,
+						},
+					})
+				"
 				class="live"
-				:class="{'active': broadcast.live === $route.params.campid }"
+				:class="{ active: broadcast.live === $route.params.campid }"
 			>
-					{{ broadcast.live === $route.params.campid ? "" : "go" }} live
+				{{ broadcast.live === $route.params.campid ? "" : "go" }} live
 			</span>
+			<button
+				v-if="test"
+				class="btn btn-sm bg-orange"
+				@click="
+					setSlide({
+						show: true,
+						type: 'slides/encounter/TestMode',
+					})
+				"
+			>
+				<i class="fas fa-flask mr-1" aria-hidden="true" />
+				Test mode
+			</button>
 
 			<template v-if="encounter.round > 0">
 				<div
 					v-if="requests && Object.keys(requests).length"
 					class="requests d-none d-md-block"
-					@click="setSlide({show: true, type: 'combat/side/Requests'})"
+					@click="setSlide({ show: true, type: 'combat/side/Requests' })"
 				>
 					<i aria-hidden="true" class="fas fa-bell" />
 					<div class="notifications bg-red white animated zoomIn">
@@ -141,10 +195,13 @@
 				</div>
 
 				<div
-					class="info" @click="setSlide({
-						show: true,
-						type: 'combat/side/Side'
-					})"
+					class="info"
+					@click="
+						setSlide({
+							show: true,
+							type: 'combat/side/Side',
+						})
+					"
 				>
 					<i aria-hidden="true" class="fas fa-bars" />
 				</div>
@@ -152,7 +209,7 @@
 
 			<template v-else>
 				<span class="d-none d-md-block">
-					<router-link v-if="!demo" :to="'/content/campaigns/' + $route.params.campid" class="btn bg-neutral-8 ml-2">
+					<router-link v-if="!demo" :to="leaveRoute" class="btn bg-neutral-8 ml-2">
 						<i aria-hidden="true" class="fas fa-arrow-left" />
 						Leave
 					</router-link>
@@ -169,84 +226,101 @@
 </template>
 
 <script>
-	import { mapActions, mapGetters } from "vuex";
-	import { remindersMixin } from "src/mixins/reminders";
-	import { audio } from "src/mixins/audio";
+import { mapActions, mapGetters } from "vuex";
+import { remindersMixin } from "src/mixins/reminders";
+import { audio } from "src/mixins/audio";
 
-	export default {
-		name: "Turns",
-		mixins: [remindersMixin, audio],
-		props: ["active_len", "current", "next", "settings"],
-		data () {
-			return {
-				demo: this.$route.name === "Demo",
-				userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined
-			}
+export default {
+	name: "Turns",
+	mixins: [remindersMixin, audio],
+	props: ["active_len", "current", "next", "settings"],
+	data() {
+		return {
+			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
+		};
+	},
+	computed: {
+		...mapGetters(["encounter", "broadcast", "requests", "test", "demo"]),
+		timer() {
+			return this.settings ? this.settings.timer : 0;
 		},
-		computed: {
-			...mapGetters([
-				"encounter",
-				"broadcast",
-				"requests"
-			]),
-			timer() {
-				return (this.settings) ? this.settings.timer : 0;
+		leaveRoute() {
+			if (this.demo) {
+				return "/";
 			}
+			if (this.test) {
+				return `/content/campaigns/${this.$route.params.campid}/${this.$route.params.encid}`;
+			}
+			return `/content/campaigns/${this.$route.params.campid}`;
+		},
+	},
+	methods: {
+		...mapActions([
+			"set_turn",
+			"update_round",
+			"set_targeted",
+			"setSlide",
+			"set_finished",
+			"reset_demo",
+		]),
+		startEncounter() {
+			this.set_turn({ turn: 0, round: 1 });
+			this.checkReminders(this.next, "startTurn");
 		},
-		methods: {
-			...mapActions([
-				"set_turn",
-				"update_round",
-				"set_targeted",
-				"setSlide",
-				"set_finished",
-				"reset_demo"
-			]),
-			startEncounter() {
-				this.set_turn({turn: 0, round: 1});
-				this.checkReminders(this.next, "startTurn");
-			},
-			nextTurn() {
-				let turn = this.encounter.turn + 1
-				let round = this.encounter.round
+		nextTurn() {
+			let turn = this.encounter.turn + 1;
+			let round = this.encounter.round;
 
-				if (turn >= this.active_len) {
-					turn = 0
-					round++
-					this.update_round()
-				}
-				this.set_turn({turn, round})
-				this.set_targeted({ type: "untarget", key: "all" });
-				this.checkReminders(this.current, "endTurn");
-			},
-			prevTurn() {
-				let turn = this.encounter.turn - 1
-				let round = this.encounter.round
-				if (turn < 0) {
-					turn = this.active_len - 1
-					round--
-				}
-				if (round === 0) {
-					turn = 0
-				}
-				this.set_turn({turn, round});
-				this.set_targeted({ type: "untarget", key: "all" });
-			},
-			confirmFinish() {
-				this.$snotify.error("Are you sure you want to finish the encounter?", "Finish Encounter", {
-					position: "centerCenter",
-					timeout: 0,
-					buttons: [
-						{ text: "Finish", action: (toast) => { this.finish(); this.$snotify.remove(toast.id); }, bold: false},
-						{ text: "Cancel", action: (toast) => { this.$snotify.remove(toast.id); }, bold: true},
-					]
-				});
-			},
-			finish() {
-				this.set_finished();
+			if (turn >= this.active_len) {
+				turn = 0;
+				round++;
+				this.update_round();
 			}
-		}
-	}
+			this.set_turn({ turn, round });
+			this.set_targeted({ type: "untarget", key: "all" });
+			this.checkReminders(this.current, "endTurn");
+		},
+		prevTurn() {
+			let turn = this.encounter.turn - 1;
+			let round = this.encounter.round;
+			if (turn < 0) {
+				turn = this.active_len - 1;
+				round--;
+			}
+			if (round === 0) {
+				turn = 0;
+			}
+			this.set_turn({ turn, round });
+			this.set_targeted({ type: "untarget", key: "all" });
+		},
+		confirmFinish() {
+			this.$snotify.error("Are you sure you want to finish the encounter?", "Finish Encounter", {
+				position: "centerCenter",
+				timeout: 0,
+				buttons: [
+					{
+						text: "Finish",
+						action: (toast) => {
+							this.finish();
+							this.$snotify.remove(toast.id);
+						},
+						bold: false,
+					},
+					{
+						text: "Cancel",
+						action: (toast) => {
+							this.$snotify.remove(toast.id);
+						},
+						bold: true,
+					},
+				],
+			});
+		},
+		finish() {
+			this.set_finished();
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
@@ -267,6 +341,13 @@
 	.live {
 		cursor: pointer;
 	}
+	.test {
+		font-size: 15px;
+		padding: 0 5px;
+		line-height: 28px;
+		background-color: $orange;
+		border-radius: $border-radius;
+	}
 	.edit {
 		font-size: 28px;
 
@@ -283,7 +364,6 @@
 		padding: 0 20px;
 		line-height: 40px;
 
-
 		&:hover {
 			color: $blue !important;
 		}
@@ -299,7 +379,8 @@
 			line-height: 30px;
 		}
 	}
-	.requests, .info {
+	.requests,
+	.info {
 		padding-top: 3px;
 		width: 26px;
 		margin: 0 15px;
@@ -340,7 +421,7 @@
 
 @media only screen and (max-width: 1000px) {
 	#turns {
-		.live { 
+		.live {
 			display: none;
 		}
 		.info {
@@ -386,5 +467,4 @@
 		}
 	}
 }
-
 </style>
diff --git a/src/components/slides/encounter/TestMode.vue b/src/components/slides/encounter/TestMode.vue
new file mode 100644
index 000000000..88ad1ba83
--- /dev/null
+++ b/src/components/slides/encounter/TestMode.vue
@@ -0,0 +1,21 @@
+<template>
+	<div>
+		<h2>Test Mode</h2>
+		<p>
+			In test mode you can freely perform any action in your encounter, without making changes to
+			the actual encounter.
+		</p>
+		<p>
+			The test encounter is basically a temporary copy of your encounter. It has a separate log and
+			damage meters. Anything you apply to an entity (damage, healing, bonuses, conditions,
+			reminders) is only applied in the copy.
+		</p>
+		<p>Test mode is an ideal way to test if your encounter is maybe too easy or too difficult.</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TestMode",
+};
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
index ffc6d4c9b..578e36e69 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1345,6 +1345,17 @@ const routes = [
 			description: "Run your encounter in Harmless Key, a Combat Tracker for D&D 5e.",
 		},
 	},
+	{
+		path: "/test-encounter/:campid/:encid",
+		name: "TestEncounter",
+		component: RunEncounter,
+		meta: {
+			title: "Test encounter",
+			requiresAuth: true,
+			sidebar: false,
+			description: "Test your encounter in Harmless Key, a Combat Tracker for D&D 5e.",
+		},
+	},
 	{
 		path: "/user/:userid",
 		name: "Follow user",
diff --git a/src/store/modules/runEncounter.js b/src/store/modules/runEncounter.js
index 75ecfee69..090e6706d 100644
--- a/src/store/modules/runEncounter.js
+++ b/src/store/modules/runEncounter.js
@@ -3,6 +3,7 @@ import { uuid } from "src/utils/generalFunctions";
 import { monsterMixin } from "src/mixins/monster";
 import { db } from "src/firebase";
 import Vue from "vue";
+import router from "src/router";
 
 const demoEncounter = {
 	name: "Demo Encounter",
@@ -114,6 +115,7 @@ const demoEncounter = {
 
 const getDefaultState = () => ({
 	demo: false,
+	test: false,
 	uid: undefined,
 	entities: {},
 	targeted: [],
@@ -131,6 +133,12 @@ const getDefaultState = () => ({
 const run_encounter_state = getDefaultState();
 
 const run_encounter_getters = {
+	test(state) {
+		return state.test;
+	},
+	demo(state) {
+		return state.demo;
+	},
 	entities(state) {
 		return state.entities;
 	},
@@ -175,7 +183,7 @@ const run_encounter_getters = {
 	},
 	log(state) {
 		//If there is a storage log, set it in the store
-		if (localStorage.getItem(state.encounterId)) {
+		if (localStorage.getItem(state.encounterId) && !state.test) {
 			state.log = JSON.parse(localStorage.getItem(state.encounterId));
 		}
 		return state.log;
@@ -196,12 +204,13 @@ const run_encounter_actions = {
 	 * @param {string} eid Encounter id
 	 * @param {boolean} demo Wether this is the demo encounter
 	 */
-	async init_Encounter({ commit, rootGetters, dispatch }, { cid, eid, demo }) {
+	async init_Encounter({ commit, rootGetters, dispatch }, { cid, eid, demo, test }) {
 		// Create the path to the encounter in firebase
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		const path = `${uid}/${cid}/${eid}`;
 
 		commit("SET_DEMO", demo);
+		commit("SET_TEST", test);
 		commit("SET_UID", uid);
 		commit("SET_CAMPAIGN_ID", cid);
 		commit("SET_ENCOUNTER_ID", eid);
@@ -217,6 +226,13 @@ const run_encounter_actions = {
 					campaignId: cid,
 					id: eid,
 				});
+
+				// For tests, set round to 0
+				if (test) {
+					encounter.round = 0;
+					encounter.turn = 1;
+				}
+
 				commit("SET_ENCOUNTER", encounter);
 
 				// Setup the requests connection
@@ -262,7 +278,7 @@ const run_encounter_actions = {
 		let entity = {
 			name: db_entity.name,
 			id: db_entity.id,
-			initiative: db_entity.initiative,
+			initiative: state.test ? null : db_entity.initiative,
 			entityType: db_entity.entityType,
 			maxHp: db_entity.maxHp,
 			ac: parseInt(db_entity.ac),
@@ -282,7 +298,7 @@ const run_encounter_actions = {
 		entity.color_label = db_entity.color_label ? db_entity.color_label : null;
 		entity.limited_uses = db_entity.limited_uses ? db_entity.limited_uses : {};
 
-		if (db_entity.meters) {
+		if (!state.test && db_entity.meters) {
 			entity.damage = db_entity.meters.damage ? db_entity.meters.damage : 0;
 			entity.healing = db_entity.meters.healing ? db_entity.meters.healing : 0;
 			entity.overkill = db_entity.meters.overkill ? db_entity.meters.overkill : 0;
@@ -311,9 +327,9 @@ const run_encounter_actions = {
 				//get the curHp,tempHP, AC Bonus & Dead/Stable + Death Saves from the campaign
 				if (campaignPlayer) {
 					entity.curHp = campaignPlayer.curHp;
-					entity.tempHp = campaignPlayer.tempHp;
-					entity.ac_bonus = campaignPlayer.ac_bonus;
-					entity.maxHpMod = campaignPlayer.maxHpMod;
+					entity.tempHp = state.test ? 0 : campaignPlayer.tempHp;
+					entity.ac_bonus = state.test ? 0 : campaignPlayer.ac_bonus;
+					entity.maxHpMod = state.test ? 0 : campaignPlayer.maxHpMod;
 					entity.saves = campaignPlayer.saves ? campaignPlayer.saves : {};
 					entity.stable = campaignPlayer.stable ? campaignPlayer.stable : false;
 					entity.dead = campaignPlayer.dead ? campaignPlayer.dead : false;
@@ -331,7 +347,7 @@ const run_encounter_actions = {
 				}
 
 				//get other values from the player
-				let db_player = !state.demo
+				const db_player = !state.demo
 					? await dispatch("players/get_player", { uid, id: key })
 					: db_entity;
 
@@ -344,7 +360,7 @@ const run_encounter_actions = {
 				entity.maxHp = entity.maxHpMod
 					? parseInt(db_player.maxHp + entity.maxHpMod)
 					: parseInt(db_player.maxHp);
-
+				entity.curHp = state.test ? entity.maxHp : entity.curHp;
 				entity.saving_throws = [];
 				// Ability scores
 				for (const ability of abilities) {
@@ -425,7 +441,6 @@ const run_encounter_actions = {
 					}
 
 					// Values from encounter
-					entity.curHp = parseInt(db_entity.curHp);
 					entity.tempHp = db_entity.tempHp;
 					entity.maxHpMod = db_entity.maxHpMod;
 					entity.ac_bonus = db_entity.ac_bonus;
@@ -433,6 +448,7 @@ const run_encounter_actions = {
 					entity.maxHp = entity.maxHpMod
 						? parseInt(db_entity.maxHp + entity.maxHpMod)
 						: parseInt(db_entity.maxHp);
+					entity.curHp = state.test ? parseInt(entity.maxHp) : parseInt(db_entity.curHp);
 					entity.settings = db_entity.settings;
 
 					if (db_entity.transformed) {
@@ -555,6 +571,7 @@ const run_encounter_actions = {
 					campaignId: state.campaignId,
 					encounterId: state.encounterId,
 					npc,
+					test: state.test,
 				},
 				{ root: true }
 			);
@@ -579,6 +596,7 @@ const run_encounter_actions = {
 					encounterId: state.encounterId,
 					playerId: id,
 					player: entity,
+					test: state.test,
 				},
 				{ root: true }
 			);
@@ -588,6 +606,24 @@ const run_encounter_actions = {
 		}
 	},
 
+	/**
+	 * Adds a player or companion during an encounter
+	 *
+	 * @param {id} id
+	 * @param {object} entity player or companion object
+	 */
+	add_entity_demo({ dispatch, rootGetters }, entity) {
+		//generate semi random id
+		const key = uuid();
+		if (rootGetters["encounters/demo_encounter"]) {
+			dispatch("encounters/add_demo_entity", { key, entity });
+		} else {
+			Vue.set(demoEncounter.entities, key, entity);
+		}
+
+		dispatch("add_entity", key);
+	},
+
 	/**
 	 * Update turn and round
 	 *
@@ -595,7 +631,7 @@ const run_encounter_actions = {
 	 * @param {integer} round
 	 */
 	async set_turn({ state, commit, dispatch }, { turn, round }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			for (const property of ["turn", "round"]) {
 				const value = property === "turn" ? turn : round;
 				await dispatch(
@@ -711,7 +747,7 @@ const run_encounter_actions = {
 			if (curHp > valueIncMod) {
 				curHp = valueIncMod;
 
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					if (entityType === "npc") {
 						const update_path = entity.transformed ? "set_transformed_prop" : "set_entity_prop";
 						await dispatch(
@@ -798,7 +834,7 @@ const run_encounter_actions = {
 				const newValue = hpType === "maxHp" ? maxHp : curHp;
 
 				// Save new curHp in firebase
-				if (hpType === "curHp" && !state.demo) {
+				if (hpType === "curHp" && !state.demo && !state.test) {
 					if (entityType === "npc") {
 						const update_path = entity.transformed ? "set_transformed_prop" : "set_entity_prop";
 						await dispatch(
@@ -836,7 +872,7 @@ const run_encounter_actions = {
 		}
 
 		// UPDATE FIREBASE
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			// Transformed
 			if (
 				["transformedMaxHp", "transformedCurHp", "transformedAc", "transformedMaxHpMod"].includes(
@@ -985,7 +1021,7 @@ const run_encounter_actions = {
 			}
 
 			//Save the new values in Firebase and the store
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/set_entity_meters",
 					{
@@ -1009,7 +1045,7 @@ const run_encounter_actions = {
 	 * @param {boolean} active active or not
 	 */
 	async set_active({ state, commit, dispatch }, { key, active }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_prop",
 				{
@@ -1032,7 +1068,7 @@ const run_encounter_actions = {
 	 * @param {boolean} hidden hidden or not
 	 */
 	async set_hidden({ state, commit, dispatch }, { key, hidden }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_prop",
 				{
@@ -1099,7 +1135,7 @@ const run_encounter_actions = {
 	async set_initiative({ commit, state, dispatch }, { key, initiative }) {
 		initiative = !initiative ? 0 : Number(initiative);
 
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_prop",
 				{
@@ -1125,7 +1161,7 @@ const run_encounter_actions = {
 
 			// Set NPCs with 0 hp as down
 			if (e.curHp <= 0 && e.entityType === "npc") {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					await dispatch(
 						"encounters/set_entity_prop",
 						{
@@ -1142,7 +1178,7 @@ const run_encounter_actions = {
 			}
 			// If an entity has more than 0 hp, but is marked as down, remove the down mark
 			if (e.curHp > 0 && e.down) {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					await dispatch(
 						"encounters/set_entity_prop",
 						{
@@ -1159,7 +1195,7 @@ const run_encounter_actions = {
 			}
 			// Check if the entity is not yet active, but needs to be added in the new round
 			if (e.addNextRound) {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					await dispatch(
 						"encounters/set_entity_prop",
 						{
@@ -1181,7 +1217,7 @@ const run_encounter_actions = {
 		if (action === "tag") {
 			commit("SET_ENTITY_PROPERTY", { key, prop: "addNextRound", value });
 		} else if (action === "set") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/set_entity_prop",
 					{
@@ -1227,7 +1263,7 @@ const run_encounter_actions = {
 			//if the damage was higher than the amount of tempHp, remove the tempHp
 			//Save the rest amount to put into transformed or curHp later
 			newHp = newHp <= 0 ? null : newHp;
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				//NPC tempHp is stored under encounter
 				if (type === "npcs") {
 					await dispatch(
@@ -1263,7 +1299,7 @@ const run_encounter_actions = {
 		else if (pool === "transformed") {
 			// Update the store
 			if (newHp <= 0) {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					if (type === "npcs") {
 						await dispatch(
 							"encounters/set_entity_prop",
@@ -1299,7 +1335,7 @@ const run_encounter_actions = {
 				commit("DELETE_ENTITY_PROPERTY", { key, prop: "transformedCurHp" });
 				commit("DELETE_ENTITY_PROPERTY", { key, prop: "transformedAc" });
 			} else {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					if (type === "npcs") {
 						await dispatch(
 							"encounters/set_transformed_prop",
@@ -1334,7 +1370,7 @@ const run_encounter_actions = {
 		//when target has no tempHp or is not transformed, set curHP
 		//Also put rest damage here
 		else {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				//NPC curHp is stored under encounter
 				if (type === "npcs") {
 					await dispatch(
@@ -1378,7 +1414,7 @@ const run_encounter_actions = {
 	 */
 	async set_condition({ state, commit, dispatch }, { action, key, condition, level }) {
 		const value = action === "remove" ? null : condition === "exhaustion" ? level : true;
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_condition",
 				{
@@ -1408,7 +1444,7 @@ const run_encounter_actions = {
 	async set_save({ state, commit, rootGetters, dispatch }, { key, check, index }) {
 		let type = state.entities[key].entityType + "s";
 		if (check == "reset") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				for (const property of ["stable", "saves"]) {
 					await dispatch(
 						"campaigns/update_campaign_entity",
@@ -1427,7 +1463,7 @@ const run_encounter_actions = {
 			commit("SET_ENTITY_PROPERTY", { key, prop: "saves", value: {} });
 			commit("SET_ENTITY_PROPERTY", { key, prop: "stable", value: false });
 		} else if (check === "unset") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/set_death_save",
 					{
@@ -1443,7 +1479,7 @@ const run_encounter_actions = {
 			commit("DELETE_SAVE", { key, index });
 		} else {
 			const i = parseInt(index + 1);
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/set_death_save",
 					{
@@ -1469,7 +1505,7 @@ const run_encounter_actions = {
 	async set_stable({ state, commit, rootGetters, dispatch }, { key, action }) {
 		let type = state.entities[key].entityType + "s";
 		if (action === "set") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/stabilize_entity",
 					{
@@ -1485,7 +1521,7 @@ const run_encounter_actions = {
 			commit("DELETE_ENTITY_PROPERTY", { key, prop: "dead" });
 			commit("SET_ENTITY_PROPERTY", { key, prop: "stable", value: true });
 		} else if (action === "unset") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/update_campaign_entity",
 					{
@@ -1511,7 +1547,7 @@ const run_encounter_actions = {
 	 * @param {any} value
 	 */
 	async set_entity_setting({ state, rootGetters, commit, dispatch }, { entityId, key, value }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_setting",
 				{
@@ -1534,7 +1570,7 @@ const run_encounter_actions = {
 	 * @param {string} entityId Entity key
 	 */
 	async clear_entity_settings({ state, rootGetters, commit, dispatch }, entityId) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/clear_entity_settings",
 				{
@@ -1558,7 +1594,7 @@ const run_encounter_actions = {
 	 */
 	async transform_entity({ state, rootGetters, commit, dispatch }, { key, entity, remove }) {
 		if (remove) {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				if (state.entities[key].entityType === "npc") {
 					await dispatch(
 						"encounters/set_entity_prop",
@@ -1604,7 +1640,7 @@ const run_encounter_actions = {
 			commit("DELETE_ENTITY_PROPERTY", { key, prop: "transformedCurHp" });
 			commit("DELETE_ENTITY_PROPERTY", { key, prop: "transformedAc" });
 		} else {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				if (state.entities[key].entityType === "npc") {
 					await dispatch(
 						"encounters/set_entity_prop",
@@ -1652,17 +1688,7 @@ const run_encounter_actions = {
 			commit("SET_ENTITY_PROPERTY", { key, prop: "transformedAc", value: entity.ac });
 		}
 	},
-	add_entity_demo({ dispatch, rootGetters }, entity) {
-		//generate semi random id
-		const key = uuid();
-		if (rootGetters["encounters/demo_encounter"]) {
-			dispatch("encounters/add_demo_entity", { key, entity });
-		} else {
-			Vue.set(demoEncounter.entities, key, entity);
-		}
 
-		dispatch("add_entity", key);
-	},
 	async remove_entity({ commit, state, dispatch }, key) {
 		// First untarget if targeted
 		const targeted = state.targeted.filter((target) => {
@@ -1671,7 +1697,7 @@ const run_encounter_actions = {
 		commit("SET_TARGETED", targeted);
 
 		// Then remove from encounter
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/delete_entity",
 				{
@@ -1696,7 +1722,7 @@ const run_encounter_actions = {
 		let type = state.entities[key].entityType + "s";
 		if (action === "revive") {
 			commit("SET_ENTITY_PROPERTY", { key, prop: "curHp", value: 1 });
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/revive_entity",
 					{
@@ -1725,7 +1751,7 @@ const run_encounter_actions = {
 			);
 		} else {
 			//SET DEAD
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/kill_entity",
 					{
@@ -1741,7 +1767,7 @@ const run_encounter_actions = {
 		}
 	},
 	async set_finished({ state, dispatch, commit }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/finish_encounter",
 				{
@@ -1767,7 +1793,7 @@ const run_encounter_actions = {
 		// Add a new reminder
 		if (action === "add") {
 			if (type === "premade") {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					await dispatch(
 						"encounters/set_reminder",
 						{
@@ -1783,7 +1809,7 @@ const run_encounter_actions = {
 				commit("SET_REMINDER", { entityKey: entity, key, reminder });
 			}
 			if (type === "custom") {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					key = await dispatch(
 						"encounters/add_reminder",
 						{
@@ -1804,7 +1830,7 @@ const run_encounter_actions = {
 
 		// Remove a reminder
 		else if (action === "remove") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/set_reminder",
 					{
@@ -1822,7 +1848,7 @@ const run_encounter_actions = {
 
 		// Update an existing reminder
 		else if (action === "update") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/set_reminder",
 					{
@@ -1840,7 +1866,7 @@ const run_encounter_actions = {
 
 		// Update only the rounds property
 		else if (action === "update-timer") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/update_reminder",
 					{
@@ -1864,7 +1890,7 @@ const run_encounter_actions = {
 	 * @param {string} id Request ID
 	 */
 	async delete_request({ state, rootGetters, commit, dispatch }, id) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/delete_request",
 				{
@@ -1950,10 +1976,13 @@ const run_encounter_actions = {
 };
 
 const run_encounter_mutations = {
-	//INITATIALIZE ENCOUNTER
+	//INITIALIZE ENCOUNTER
 	TRACK(state, value) {
 		Vue.set(state, "track", value);
 	},
+	SET_TEST(state, value) {
+		Vue.set(state, "test", value);
+	},
 	SET_DEMO(state, value) {
 		Vue.set(state, "demo", value);
 	},
@@ -2059,20 +2088,20 @@ const run_encounter_mutations = {
 		Vue.set(state, "show_monster_card", value);
 	},
 	SET_LOG(state, { action, value }) {
-		if (localStorage.getItem(state.encounterId) && Object.keys(state.log) == 0) {
+		if (!state.test && localStorage.getItem(state.encounterId) && Object.keys(state.log) == 0) {
 			state.log = JSON.parse(localStorage.getItem(state.encounterId));
 		}
 		if (action === "set") {
 			state.log.unshift(value);
 
 			const parsed = JSON.stringify(state.log);
-			if (!state.demo) localStorage.setItem(state.encounterId, parsed);
+			if (!state.demo && !state.test) localStorage.setItem(state.encounterId, parsed);
 		}
 		if (action == "unset") {
 			Vue.delete(state.log, value);
 
 			const parsed = JSON.stringify(state.log);
-			if (!state.demo) localStorage.setItem(state.encounterId, parsed);
+			if (!state.demo && !state.test) localStorage.setItem(state.encounterId, parsed);
 		}
 	},
 };
diff --git a/src/views/RunEncounter.vue b/src/views/RunEncounter.vue
index 12381098f..f3acc32d2 100644
--- a/src/views/RunEncounter.vue
+++ b/src/views/RunEncounter.vue
@@ -146,6 +146,7 @@ export default {
 		return {
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
 			demo: this.$route.name === "Demo",
+			test: this.$route.name === "TestEncounter",
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
 			target: undefined,
@@ -157,7 +158,7 @@ export default {
 		};
 	},
 	beforeMount() {
-		if (this.$route.name !== "Demo" && this.broadcast.live === this.campaignId) {
+		if (!this.demo && !this.test && this.broadcast.live === this.campaignId) {
 			this.setLiveEncounter(this.encounterId);
 		}
 	},
@@ -176,6 +177,7 @@ export default {
 			cid: this.campaignId,
 			eid: this.encounterId,
 			demo: this.demo,
+			test: this.test,
 		});
 		this.loading = false;
 	},
diff --git a/src/views/UserContent/Encounters/Edit/index.vue b/src/views/UserContent/Encounters/Edit/index.vue
index 59fc6ae2f..3e200d389 100644
--- a/src/views/UserContent/Encounters/Edit/index.vue
+++ b/src/views/UserContent/Encounters/Edit/index.vue
@@ -1,10 +1,7 @@
 <template>
 	<hk-card v-if="overencumbered && !demo" header="You're over encumbered">
 		<div class="card-body">
-			<p>
-				You can't edit an encounter when you are over encumbered, 
-				please resolve this first.
-			</p>
+			<p>You can't edit an encounter when you are over encumbered, please resolve this first.</p>
 
 			<router-link to="/content/manage" class="btn btn-lg btn-block bg-neutral-9">
 				Manage content
@@ -13,39 +10,35 @@
 	</hk-card>
 	<div v-else>
 		<SignedIn v-if="user && demo" />
-		<div v-if="demo" class="d-flex justify-between items-center mb-3">
+		<div class="d-flex justify-between items-center mb-3">
 			<h1 class="written mb-0">
-				Encounter builder for D&D
+				{{ demo ? "Encounter builder for D&D" : encounter.name }}
 			</h1>
 			<button class="btn" :disabled="!validEncounter" @click="runEncounter">
-				Run encounter
-				<i class="fas fa-sword ml-2 rotate" aria-hidden="true" />
+				{{ demo ? "Run" : "Test" }} encounter
+				<i class="fas ml-2" :class="demo ? 'fa-sword rotate' : 'fa-flask'" aria-hidden="true" />
 			</button>
 		</div>
 		<div class="wrapper">
 			<hk-card>
 				<template v-if="!loading">
 					<div class="tabs">
-						<q-tabs
-							v-model="tab"
-							dark
-							inline-label
-							align="justify"
-							:breakpoint="0"
-							no-caps
-						>
+						<q-tabs v-model="tab" dark inline-label align="justify" :breakpoint="0" no-caps>
 							<q-route-tab
-								exact replace
+								exact
+								replace
 								label="Back"
 								icon="fas fa-arrow-left"
 								class="pl-0"
 								name="back"
-								:to="demo ? `/tools/encounter-builder` : `/content/campaigns/${$route.params.campid}`"
+								:to="
+									demo ? `/tools/encounter-builder` : `/content/campaigns/${$route.params.campid}`
+								"
 							/>
-							<q-tab 
-								v-for="({name, icon, label}, index) in tabs"
-								:key="`tab-${index}`" 
-								:name="name" 
+							<q-tab
+								v-for="({ name, icon, label }, index) in tabs"
+								:key="`tab-${index}`"
+								:name="name"
 								:icon="icon"
 								:label="label"
 							/>
@@ -53,9 +46,9 @@
 					</div>
 					<q-tab-panels v-model="tab" class="bg-transparent">
 						<q-tab-panel name="entities">
-							<Entities 
-								:encounter="encounter" 
-								:campaign="campaign" 
+							<Entities
+								:encounter="encounter"
+								:campaign="campaign"
 								:campaign_players="campaign_players"
 								:add-players="addPlayersTriggered"
 							/>
@@ -75,10 +68,10 @@
 			</hk-card>
 
 			<!-- ENCOUNTER OVERVIEW -->
-			<Overview 
-				v-if="!loading" 
-				:encounter="encounter" 
-				:campaign="campaign" 
+			<Overview
+				v-if="!loading"
+				:encounter="encounter"
+				:campaign="campaign"
 				:campaign_players="campaign_players"
 				@add-players="trigger"
 			/>
@@ -90,154 +83,159 @@
 </template>
 
 <script>
-	import Loot from "./Loot.vue";
-	import Xp from "./Xp.vue";
-	import Entities from "./Entities.vue";
-	import Overview from "./Overview.vue";
-	import General from "./General.vue";
-	import { mapGetters, mapActions } from "vuex";
-	import SignedIn from "src/components/userContent/SignedIn.vue";
+import Loot from "./Loot.vue";
+import Xp from "./Xp.vue";
+import Entities from "./Entities.vue";
+import Overview from "./Overview.vue";
+import General from "./General.vue";
+import { mapGetters, mapActions } from "vuex";
+import SignedIn from "src/components/userContent/SignedIn.vue";
 
-	export default {
-		name: "EditEncounter",
-		components: {
-			Loot,
-			Xp,
-			Entities,
-			Overview,
-			General,
-			SignedIn,
-		},
-		data() {
-			return {
-				demo: this.$route.name === "ToolsBuildEncounter",
-				user: this.$store.getters ? this.$store.getters.user : undefined,
-				campaignId: this.$route.params.campid,
-				encounterId: this.$route.params.encid,
-				campaign: {},
-				encounter: {},
-				campaign_players: {},
-				addPlayersTriggered: false,
-				loading: true,
-				tab: "entities"
-			} 
+export default {
+	name: "EditEncounter",
+	components: {
+		Loot,
+		Xp,
+		Entities,
+		Overview,
+		General,
+		SignedIn,
+	},
+	data() {
+		return {
+			demo: this.$route.name === "ToolsBuildEncounter",
+			user: this.$store.getters ? this.$store.getters.user : undefined,
+			campaignId: this.$route.params.campid,
+			encounterId: this.$route.params.encid,
+			campaign: {},
+			encounter: {},
+			campaign_players: {},
+			addPlayersTriggered: false,
+			loading: true,
+			tab: "entities",
+		};
+	},
+	computed: {
+		...mapGetters(["overencumbered"]),
+		...mapGetters("encounters", ["demo_encounter"]),
+		tabs() {
+			let tabs = {
+				entities: { name: "entities", label: "Entities", icon: "fas fa-helmet-battle" },
+				general: { name: "general", label: "General", icon: "fas fa-sliders-h" },
+			};
+			if (!this.demo) {
+				tabs.loot = { name: "loot", label: "Loot", icon: "fas fa-treasure-chest" };
+			}
+			if (this.campaign.advancement === "experience") {
+				tabs.xp = { name: "xp", label: "XP", icon: "fas fa-sparkles" };
+			}
+			return tabs;
 		},
-		computed: {
-			...mapGetters([
-				"overencumbered"
-			]),
-			...mapGetters("encounters", ["demo_encounter"]),
-			tabs() {
-				let tabs = {
-					entities: { name: "entities", label: "Entities", icon: "fas fa-helmet-battle" },
-					general: { name: "general", label: "General", icon: "fas fa-sliders-h" }
-				}
-				if(!this.demo) {
-					tabs.loot = { name: "loot", label: "Loot", icon: "fas fa-treasure-chest" };
-				}
-				if(this.campaign.advancement === "experience") {
-					tabs.xp = { name: "xp", label: "XP", icon: "fas fa-sparkles" };
-				}
-				return tabs;
-			},
-			validEncounter() {
-				// A valid encounter has at least 1 player and 1 npc
-				if(!this.encounter.entities) {
-					return false;
-				}
-				return Object.values(this.encounter.entities).filter(entity => entity.entityType === "player").length 
-					&& Object.values(this.encounter.entities).filter(entity => entity.entityType === "npc").length
+		validEncounter() {
+			// A valid encounter has at least 1 player and 1 npc
+			if (!this.encounter.entities) {
+				return false;
 			}
+			return (
+				Object.values(this.encounter.entities).filter((entity) => entity.entityType === "player")
+					.length &&
+				Object.values(this.encounter.entities).filter((entity) => entity.entityType === "npc")
+					.length
+			);
 		},
-		async	mounted() {
-			if(!this.demo) {
-				this.campaign = await this.get_campaign({
-					uid: this.user.uid,
-					id: this.campaignId
-				})
+	},
+	async mounted() {
+		if (!this.demo) {
+			this.campaign = await this.get_campaign({
+				uid: this.user.uid,
+				id: this.campaignId,
+			});
+
+			this.encounter = await this.get_encounter({
+				uid: this.user.uid,
+				campaignId: this.campaignId,
+				id: this.encounterId,
+			});
 
-				this.encounter = await this.get_encounter({
+			for (const playerId in this.campaign.players) {
+				this.campaign_players[playerId] = await this.get_player({
 					uid: this.user.uid,
-					campaignId: this.campaignId, 
-					id: this.encounterId
+					id: playerId,
 				});
-
-				for (const playerId in this.campaign.players) {
-					this.campaign_players[playerId] = await this.get_player({ uid: this.user.uid, id: playerId })
-				}
-			} else {
-				this.encounter = this.demo_encounter || {};
 			}
+		} else {
+			this.encounter = this.demo_encounter || {};
+		}
 
-			this.loading = false;
+		this.loading = false;
+	},
+	methods: {
+		...mapActions("campaigns", ["get_campaign"]),
+		...mapActions("encounters", ["get_encounter", "set_demo_encounter"]),
+		...mapActions("players", ["get_player"]),
+		// Triggered from Overview component, to execute addAllPlayers() in Entities component
+		trigger() {
+			this.addPlayersTriggered = true;
 		},
-		methods: {
-			...mapActions("campaigns", ["get_campaign"]),
-			...mapActions("encounters", ["get_encounter", "set_demo_encounter"]),
-			...mapActions("players", ["get_player"]),
-			// Triggered from Overview component, to execute addAllPlayers() in Entities component
-			trigger() {
-				this.addPlayersTriggered = true;
-			},
-			async runEncounter() {
-				if(this.validEncounter) {
+		async runEncounter() {
+			if (this.validEncounter) {
+				if (this.demo) {
 					await this.set_demo_encounter(this.encounter);
-					this.$router.replace("/demo");
 				}
+				this.$router.replace(
+					this.demo ? "/demo" : `/test-encounter/${this.campaignId}/${this.encounterId}`
+				);
 			}
-		}
-	}
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
+.wrapper {
+	grid-gap: 10px;
+	display: grid;
+	grid-template-columns: 2fr 1fr;
+	grid-template-rows: 1fr;
+	grid-template-areas: "actions overview";
 
-	.wrapper {
-		grid-gap: 10px;
-		display: grid;
-		grid-template-columns: 2fr 1fr;
-		grid-template-rows: 1fr;
-		grid-template-areas: 
-		"actions overview";
-
-		.tabs {
-			background-color: $neutral-8;
-			border-bottom: 1px solid $neutral-6;
-		}
-		.encounter_actions {
-			grid-area: actions;
-			overflow-y: hidden;
+	.tabs {
+		background-color: $neutral-8;
+		border-bottom: 1px solid $neutral-6;
+	}
+	.encounter_actions {
+		grid-area: actions;
+		overflow-y: hidden;
 
-			.q-scrollarea {
-				background: $neutral-6 !important;
-				height: calc(100% - 30px) !important;
-			}
+		.q-scrollarea {
+			background: $neutral-6 !important;
+			height: calc(100% - 30px) !important;
 		}
 	}
-	ul.nav {
-		a.nav-link {
-			&.active {
-				background: $neutral-6 !important;
-			}
+}
+ul.nav {
+	a.nav-link {
+		&.active {
+			background: $neutral-6 !important;
 		}
 	}
-	h1 {
-		font-size: 20px;
-	}
-	.faded {
-		opacity: .3;
-	}
-	.rotate {
-		transform: rotate(45deg);
-		vertical-align: -1px;
-	}
+}
+h1 {
+	font-size: 20px;
+}
+.faded {
+	opacity: 0.3;
+}
+.rotate {
+	transform: rotate(45deg);
+	vertical-align: -1px;
+}
 
-	@media only screen and (max-width: 850px) {
-		.wrapper {
-			grid-template-columns: 1fr;
-			grid-template-areas: 
-			"actions";
-			overflow: visible !important;
-		}
+@media only screen and (max-width: 850px) {
+	.wrapper {
+		grid-template-columns: 1fr;
+		grid-template-areas: "actions";
+		overflow: visible !important;
 	}
-
-</style>
\ No newline at end of file
+}
+</style>

From e1f0580844d689f9a61490a0306de814ab5a9c5b Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 19 May 2023 16:28:02 +0200
Subject: [PATCH 02/24] Hide tips correctly

---
 src/App.vue                  |  2 ++
 src/store/modules/general.js |  2 --
 src/store/modules/tips.js    | 34 ++++++++++++++++++----------------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d62033b41..857ff894a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -278,6 +278,7 @@ export default {
 		await store.dispatch("initialize");
 	},
 	async mounted() {
+		this.setTips();
 		const cookies = document.cookie.split(";");
 
 		for (let cookie of cookies) {
@@ -318,6 +319,7 @@ export default {
 			"initialize",
 			"reinitialize",
 			"setUser",
+			"setTips",
 		]),
 		setSize(size) {
 			this.small_screen = size.width < 576;
diff --git a/src/store/modules/general.js b/src/store/modules/general.js
index e9bd04d63..472d651d0 100644
--- a/src/store/modules/general.js
+++ b/src/store/modules/general.js
@@ -45,8 +45,6 @@ export default {
 		async initialize({ state, dispatch, commit, rootGetters }) {
 			if (state.initialized) return;
 
-			dispatch("setTips");
-
 			// In main.js before the Vue instance is rendered
 			// it's checked if there is a firebase authorization present.
 			// Therefore we can check here with 'auth' if there is a user.
diff --git a/src/store/modules/tips.js b/src/store/modules/tips.js
index 8bb20ecbc..3f4224edf 100644
--- a/src/store/modules/tips.js
+++ b/src/store/modules/tips.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue from "vue";
 
 const tip_state = () => ({
 	tips: {},
@@ -6,12 +6,12 @@ const tip_state = () => ({
 
 const tip_getters = {
 	get_tip: (state, rootGetters) => (key) => {
-		if(rootGetters.user) {
+		if (rootGetters.user) {
 			return state.tips[rootGetters.user.uid] && key in state.tips[rootGetters.user.uid];
 		} else {
 			return key in state.tips;
 		}
-	}
+	},
 };
 
 const tip_actions = {
@@ -19,9 +19,9 @@ const tip_actions = {
 	 * Checks local storage for saved tips and sets them in the store
 	 */
 	setTips({ commit }) {
-		if(process.browser) {
+		if (process.browser) {
 			const storage = JSON.parse(localStorage.getItem("tips"));
-			const tips = (storage) ? storage : {};
+			const tips = storage ? storage : {};
 			commit("SET_TIPS", tips);
 		}
 	},
@@ -29,15 +29,15 @@ const tip_actions = {
 	/**
 	 * Adds the key of a tip to store and local storage
 	 * added tips are hidden from the user
-	 * 
-	 * Hidden tips are saved for every user that logs in through the same browser 
+	 *
+	 * Hidden tips are saved for every user that logs in through the same browser
 	 * and even for non logged in users
 	 */
 	set_tip({ commit, rootGetters, state }, key) {
 		let tips = state.tips;
 
-		if(rootGetters.user) {
-			if(!tips[rootGetters.user.uid]) {
+		if (rootGetters.user) {
+			if (!tips[rootGetters.user.uid]) {
 				tips[rootGetters.user.uid] = {};
 			}
 			tips[rootGetters.user.uid][key] = true;
@@ -46,16 +46,18 @@ const tip_actions = {
 		}
 		localStorage.setItem("tips", JSON.stringify(tips));
 		commit("SET_TIPS", tips);
-	}
+	},
 };
 
 const tip_mutations = {
-	SET_TIPS(state, payload) { Vue.set(state, "tips", payload); },
+	SET_TIPS(state, payload) {
+		Vue.set(state, "tips", payload);
+	},
 };
 
 export default {
-  state: tip_state,
-  getters: tip_getters,
-  actions: tip_actions,
-  mutations: tip_mutations
-}
\ No newline at end of file
+	state: tip_state,
+	getters: tip_getters,
+	actions: tip_actions,
+	mutations: tip_mutations,
+};

From 52eb26fc352c7e33fd347558122e8af9bb51550b Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 19 May 2023 16:29:35 +0200
Subject: [PATCH 03/24] Code smell resolved

---
 src/store/modules/runEncounter.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/modules/runEncounter.js b/src/store/modules/runEncounter.js
index 090e6706d..af5cd0a32 100644
--- a/src/store/modules/runEncounter.js
+++ b/src/store/modules/runEncounter.js
@@ -3,7 +3,6 @@ import { uuid } from "src/utils/generalFunctions";
 import { monsterMixin } from "src/mixins/monster";
 import { db } from "src/firebase";
 import Vue from "vue";
-import router from "src/router";
 
 const demoEncounter = {
 	name: "Demo Encounter",

From 828999d5b839470ad925aa34385448b7d0dac964 Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 19 May 2023 16:48:24 +0200
Subject: [PATCH 04/24] Don't save campaign damage meters in test mode

---
 src/mixins/HpManipulations.js | 160 +++++++++++++++++-----------------
 1 file changed, 79 insertions(+), 81 deletions(-)

diff --git a/src/mixins/HpManipulations.js b/src/mixins/HpManipulations.js
index 67d5ed8c4..5d881a293 100644
--- a/src/mixins/HpManipulations.js
+++ b/src/mixins/HpManipulations.js
@@ -6,7 +6,6 @@ export const setHP = {
 	mixins: [remindersMixin],
 	data() {
 		return {
-			demo: this.$route.name === "Demo",
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
 			campaignId: this.$route.params.campid,
 		};
@@ -20,7 +19,7 @@ export const setHP = {
 		};
 	},
 	computed: {
-		...mapGetters(["encounter"]),
+		...mapGetters(["encounter", "demo", "test"]),
 	},
 	methods: {
 		...mapActions(["set_save", "set_stable", "set_hp", "set_dead", "set_log", "set_meters"]),
@@ -171,43 +170,41 @@ export const setHP = {
 				over = config.undo !== true ? -config.undo : 0;
 			}
 
-			if (!this.demo) {
-				if (!config.undo) {
-					await this.set_meters({ key: current.key, type: "damage", amount }); //Damage done
-					await this.set_meters({ key: current.key, type: "overkill", amount: over }); //Over damage done
-					await this.set_meters({ key: target.key, type: "damageTaken", amount }); //Damage taken
-					await this.set_meters({ key: target.key, type: "overkillTaken", amount: over }); //Over damage taken
-
-					// Campaign wide damage meters (no need to go through store)
-					// Damage done by players
-					if (["player", "companion"].includes(current.entityType)) {
-						await this.damageMeters(current.key, "damage", amount, current.entityType); //Damage done
-						await this.damageMeters(current.key, "overkill", over, current.entityType); //Over damage done
-					}
+			if (!config.undo) {
+				await this.set_meters({ key: current.key, type: "damage", amount }); //Damage done
+				await this.set_meters({ key: current.key, type: "overkill", amount: over }); //Over damage done
+				await this.set_meters({ key: target.key, type: "damageTaken", amount }); //Damage taken
+				await this.set_meters({ key: target.key, type: "overkillTaken", amount: over }); //Over damage taken
+
+				// Campaign wide damage meters (no need to go through store)
+				// Damage done by players
+				if (["player", "companion"].includes(current.entityType)) {
+					await this.damageMeters(current.key, "damage", amount, current.entityType); //Damage done
+					await this.damageMeters(current.key, "overkill", over, current.entityType); //Over damage done
+				}
 
-					// Damage taken by players
-					if (["player", "companion"].includes(target.entityType)) {
-						await this.damageMeters(target.key, "damageTaken", amount, target.entityType); //damage taken
-						await this.damageMeters(target.key, "overkillTaken", over, target.entityType); //Over damage taken
-					}
+				// Damage taken by players
+				if (["player", "companion"].includes(target.entityType)) {
+					await this.damageMeters(target.key, "damageTaken", amount, target.entityType); //damage taken
+					await this.damageMeters(target.key, "overkillTaken", over, target.entityType); //Over damage taken
 				}
-				//To undo, run same function with opposite types
-				else {
-					await this.set_meters({ key: current.key, type: "healing", amount }); //Undo damage done
-					await this.set_meters({ key: current.key, type: "overhealing", amount: over }); //Undo Over damage done
-					await this.set_meters({ key: target.key, type: "healingTaken", amount }); //Undo damage taken
-					await this.set_meters({ key: target.key, type: "overhealingTaken", amount: over }); //Undo Over damage taken
-
-					// Campaign wide damage meters (no need to go through store)
-					// Undo damage done by players
-					if (["player", "companion"].includes(current.entityType)) {
-						await this.damageMeters(current.key, "healing", amount, current.entityType); //Undo Damage done
-						await this.damageMeters(current.key, "overhealing", over, current.entityType); //Undo Over damage done
-					}
-					if (["player", "companion"].includes(target.entityType)) {
-						await this.damageMeters(target.key, "healingTaken", amount, target.entityType); //Undo damage taken
-						await this.damageMeters(target.key, "overhealingTaken", over, target.entityType); //Undo Over damage taken
-					}
+			}
+			//To undo, run same function with opposite types
+			else {
+				await this.set_meters({ key: current.key, type: "healing", amount }); //Undo damage done
+				await this.set_meters({ key: current.key, type: "overhealing", amount: over }); //Undo Over damage done
+				await this.set_meters({ key: target.key, type: "healingTaken", amount }); //Undo damage taken
+				await this.set_meters({ key: target.key, type: "overhealingTaken", amount: over }); //Undo Over damage taken
+
+				// Campaign wide damage meters (no need to go through store)
+				// Undo damage done by players
+				if (["player", "companion"].includes(current.entityType)) {
+					await this.damageMeters(current.key, "healing", amount, current.entityType); //Undo Damage done
+					await this.damageMeters(current.key, "overhealing", over, current.entityType); //Undo Over damage done
+				}
+				if (["player", "companion"].includes(target.entityType)) {
+					await this.damageMeters(target.key, "healingTaken", amount, target.entityType); //Undo damage taken
+					await this.damageMeters(target.key, "overhealingTaken", over, target.entityType); //Undo Over damage taken
 				}
 			}
 		},
@@ -278,46 +275,45 @@ export const setHP = {
 			}
 
 			// Update the healing meters
-			if (!this.demo) {
-				if (!config.undo) {
-					// Meters for the encounter
-					await this.set_meters({ key: current.key, type: "healing", amount }); //Healing done
-					await this.set_meters({ key: current.key, type: "overhealing", amount: over }); //Over healing done
-					await this.set_meters({ key: target.key, type: "healingTaken", amount }); //Healing taken
-					await this.set_meters({ key: target.key, type: "overhealingTaken", amount: over }); //Over healing taken
-
-					// Campaign wide healing meters (no need to go through store)
-					// Healing done by players
-					if (["player", "companion"].includes(current.entityType)) {
-						await this.damageMeters(current.key, "healing", amount, current.entityType); //Healing done
-						await this.damageMeters(current.key, "overhealing", over, current.entityType); //Over healing done
-					}
 
-					// Healing taken by players
-					if (["player", "companion"].includes(target.entityType)) {
-						await this.damageMeters(target.key, "healingTaken", amount, target.entityType); //Healing taken
-						await this.damageMeters(target.key, "overhealingTaken", over, target.entityType); //Over healing taken
-					}
+			if (!config.undo) {
+				// Meters for the encounter
+				await this.set_meters({ key: current.key, type: "healing", amount }); //Healing done
+				await this.set_meters({ key: current.key, type: "overhealing", amount: over }); //Over healing done
+				await this.set_meters({ key: target.key, type: "healingTaken", amount }); //Healing taken
+				await this.set_meters({ key: target.key, type: "overhealingTaken", amount: over }); //Over healing taken
+
+				// Campaign wide healing meters (no need to go through store)
+				// Healing done by players
+				if (["player", "companion"].includes(current.entityType)) {
+					await this.damageMeters(current.key, "healing", amount, current.entityType); //Healing done
+					await this.damageMeters(current.key, "overhealing", over, current.entityType); //Over healing done
 				}
-				// To undo, run same function with opposite types
-				else {
-					await this.set_meters({ key: current.key, type: "damage", amount }); //Undo Healing done
-					await this.set_meters({ key: current.key, type: "overkill", amount: over }); //Undo Over Healing done
-					await this.set_meters({ key: target.key, type: "damageTaken", amount }); //Undo Healing taken
-					await this.set_meters({ key: target.key, type: "overkillTaken", amount: over }); //Undo Over Healing taken
-
-					// Campaign wide healing meters (no need to go through store)
-					// Undo healing done by players
-					if (["player", "companion"].includes(current.entityType)) {
-						await this.damageMeters(current.key, "damage", amount, current.entityType); //Undo Healing done
-						await this.damageMeters(current.key, "overkill", over, current.entityType); //Undo Over healing done
-					}
 
-					// Undo healing taken by players
-					if (["player", "companion"].includes(target.entityType)) {
-						await this.damageMeters(target.key, "damageTaken", amount, target.entityType); //Undo Healing taken
-						await this.damageMeters(target.key, "overkillTaken", over, target.entityType); //Undo overhealing taken
-					}
+				// Healing taken by players
+				if (["player", "companion"].includes(target.entityType)) {
+					await this.damageMeters(target.key, "healingTaken", amount, target.entityType); //Healing taken
+					await this.damageMeters(target.key, "overhealingTaken", over, target.entityType); //Over healing taken
+				}
+			}
+			// To undo, run same function with opposite types
+			else {
+				await this.set_meters({ key: current.key, type: "damage", amount }); //Undo Healing done
+				await this.set_meters({ key: current.key, type: "overkill", amount: over }); //Undo Over Healing done
+				await this.set_meters({ key: target.key, type: "damageTaken", amount }); //Undo Healing taken
+				await this.set_meters({ key: target.key, type: "overkillTaken", amount: over }); //Undo Over Healing taken
+
+				// Campaign wide healing meters (no need to go through store)
+				// Undo healing done by players
+				if (["player", "companion"].includes(current.entityType)) {
+					await this.damageMeters(current.key, "damage", amount, current.entityType); //Undo Healing done
+					await this.damageMeters(current.key, "overkill", over, current.entityType); //Undo Over healing done
+				}
+
+				// Undo healing taken by players
+				if (["player", "companion"].includes(target.entityType)) {
+					await this.damageMeters(target.key, "damageTaken", amount, target.entityType); //Undo Healing taken
+					await this.damageMeters(target.key, "overkillTaken", over, target.entityType); //Undo overhealing taken
 				}
 			}
 		},
@@ -356,13 +352,15 @@ export const setHP = {
 			});
 		},
 		async damageMeters(key, type, amount, entityType) {
-			await this.update_damage_meters({
-				campaignId: this.campaignId,
-				entityType,
-				id: key,
-				property: type,
-				value: amount,
-			});
+			if (!this.demo && !this.test) {
+				await this.update_damage_meters({
+					campaignId: this.campaignId,
+					entityType,
+					id: key,
+					property: type,
+					value: amount,
+				});
+			}
 		},
 	},
 };

From c5bbc857be04ce44c51fc9bca1ee55625b85625f Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 19 May 2023 17:02:09 +0200
Subject: [PATCH 05/24] Fix missing avatars

---
 src/components/combat/actions/Actions.vue |  21 ++--
 src/components/combat/actions/Roll.vue    |   2 +-
 src/components/combat/side/Dmg.vue        | 134 +++++++++++-----------
 3 files changed, 79 insertions(+), 78 deletions(-)

diff --git a/src/components/combat/actions/Actions.vue b/src/components/combat/actions/Actions.vue
index b2db8a5d4..53b0df00b 100644
--- a/src/components/combat/actions/Actions.vue
+++ b/src/components/combat/actions/Actions.vue
@@ -25,12 +25,12 @@
 							>
 								<i
 									aria-hidden="true"
-									v-if="
-										['monster', 'player', 'companion', 'environment'].includes(
-											entitiesList[doneBy].img
-										)
-									"
-									:class="`hki-${entitiesList[doneBy].img}`"
+									v-if="!entitiesList[doneBy].img"
+									:class="`hki-${
+										entitiesList[doneBy].entityType === 'npc'
+											? 'monster'
+											: entitiesList[doneBy].entityType
+									}`"
 								/>
 							</span>
 						</q-item-section>
@@ -59,8 +59,10 @@
 							>
 								<i
 									aria-hidden="true"
-									v-if="['monster', 'player', 'companion', 'environment'].includes(scope.opt.img)"
-									:class="`hki-${scope.opt.img}`"
+									v-if="!scope.opt.img"
+									:class="`hki-${
+										scope.opt.entityType === 'npc' ? 'monster' : scope.opt.entityType
+									}`"
 								/>
 							</span>
 						</q-item-section>
@@ -187,7 +189,7 @@ export default {
 			active.unshift({
 				key: "environment",
 				name: "Environment",
-				img: "environment",
+				entityType: "environment",
 			});
 			return active;
 		},
@@ -196,7 +198,6 @@ export default {
 			list.environment = {
 				key: "environment",
 				name: "Environment",
-				img: "environment",
 				entityType: "environment",
 			};
 			return list;
diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index adffebd20..84aec0020 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -152,6 +152,7 @@
 
 
 
+
 														}}) </template
 													><template v-else>{{ roll.fixed_val }})</template>
 													{{ roll_index+1 &lt; action.action_list[0].rolls.length ? "+" : "" }}
@@ -320,7 +321,6 @@ export default {
 	data() {
 		return {
 			damage_type_icons: damage_type_icons,
-			demo: this.$route.name === "Demo",
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
diff --git a/src/components/combat/side/Dmg.vue b/src/components/combat/side/Dmg.vue
index b6fc6de6b..d86c5256d 100644
--- a/src/components/combat/side/Dmg.vue
+++ b/src/components/combat/side/Dmg.vue
@@ -6,20 +6,24 @@
 				<h3>{{ type.name.capitalize() }}</h3>
 				<ul>
 					<li v-for="(entity, index) in _meters[type.name]" :key="index" class="health">
-						<div 
-							class="img" 
+						<div
+							class="img"
 							:style="{
 								'background-image': 'url(' + entity.img + ')',
 								'border-color': entity.color_label ? entity.color_label : ``,
-								'color': entity.color_label ? entity.color_label : ``
+								color: entity.color_label ? entity.color_label : ``,
 							}"
 						>
-							<i aria-hidden="true" v-if="['monster', 'player', 'companion'].includes(entity.img)" :class="`hki-${entity.img}`" />
+							<i
+								aria-hidden="true"
+								v-if="!entity.img"
+								:class="`hki-${entity.entityType === 'npc' ? 'monster' : entity.entityType}`"
+							/>
 						</div>
-						<q-linear-progress 
-							size="30px" 
-							:color="type.name === 'damage' ? 'negative' : 'positive'" 
-							:value="percentage(entity[type.name], type.name)/100"
+						<q-linear-progress
+							size="30px"
+							:color="type.name === 'damage' ? 'negative' : 'positive'"
+							:value="percentage(entity[type.name], type.name) / 100"
 						>
 							<div class="info">
 								<span class="name">
@@ -30,10 +34,10 @@
 								</span>
 								<b class="numbers">
 									<template v-if="entity[type.name] < 10000">{{ entity[type.name] }}</template>
-									<template v-else>{{ entity[type.name] | numeral('0.0a') }}</template>
+									<template v-else>{{ entity[type.name] | numeral("0.0a") }}</template>
 									<template v-if="entity[type.over]">
 										(<template v-if="entity[type.over] < 10000">{{ entity[type.over] }} </template>
-										<template v-else>{{ entity[type.over] | numeral('0.0a') }} </template> 
+										<template v-else>{{ entity[type.over] | numeral("0.0a") }} </template>
 										<small>over</small>)
 									</template>
 								</b>
@@ -47,61 +51,58 @@
 </template>
 
 <script>
-	import _ from 'lodash'
-	import { mapGetters } from 'vuex'
+import _ from "lodash";
+import { mapGetters } from "vuex";
 
-	export default {
-		name: 'Dmg',
+export default {
+	name: "Dmg",
 
-		data() {
-			return {
-				types: {
-					'damage': { name: 'damage', over: 'overkill' },
-					'healing': { name: 'healing', over: 'overhealing'},
-				}
-			}
-		},
-		computed: {
-			...mapGetters([
-				'entities',
-			]),
-			_meters: function() {
-				return {
-					'damage': _.chain(this.entities)
-						.filter(function(entity, key) {
-							entity.key = key
-							return entity.damage > 0;
-						})
-						.orderBy(function(entity){
-							return parseInt(entity.damage)
-						} , 'desc')
-						.value(),
-					'healing': _.chain(this.entities)
-						.filter(function(entity, key) {
-							entity.key = key
-							return entity.healing > 0;
-						})
-						.orderBy(function(entity){
-							return parseInt(entity.healing)
-						} , 'desc')
-						.value()
-				}
+	data() {
+		return {
+			types: {
+				damage: { name: "damage", over: "overkill" },
+				healing: { name: "healing", over: "overhealing" },
 			},
+		};
+	},
+	computed: {
+		...mapGetters(["entities"]),
+		_meters: function () {
+			return {
+				damage: _.chain(this.entities)
+					.filter(function (entity, key) {
+						entity.key = key;
+						return entity.damage > 0;
+					})
+					.orderBy(function (entity) {
+						return parseInt(entity.damage);
+					}, "desc")
+					.value(),
+				healing: _.chain(this.entities)
+					.filter(function (entity, key) {
+						entity.key = key;
+						return entity.healing > 0;
+					})
+					.orderBy(function (entity) {
+						return parseInt(entity.healing);
+					}, "desc")
+					.value(),
+			};
 		},
-		methods: {
-			percentage(input, type) {
+	},
+	methods: {
+		percentage(input, type) {
+			var total = 0;
 
-				var total = 0;
-
-				for(var key in this._meters[type]) {
-					var amount = this._meters[type][key][type]
-					total = total + amount;
-				}
-				var percentage = Math.floor(input / total * 100)
-				return percentage;
-			},
+			for (var key in this._meters[type]) {
+				var amount = this._meters[type][key][type];
+				total = total + amount;
+			}
+			var percentage = Math.floor((input / total) * 100);
+			return percentage;
 		},
-	}
+	},
+};
 </script>
 
 <style lang="scss" scoped>
@@ -121,8 +122,7 @@ ul {
 		grid-template-columns: 30px 1fr;
 		grid-template-rows: auto;
 		grid-gap: 0;
-		grid-template-areas: 
-		"img hp-bar";
+		grid-template-areas: "img hp-bar";
 
 		margin-bottom: 1px;
 
@@ -133,7 +133,7 @@ ul {
 			background-repeat: no-repeat;
 			background-size: cover;
 			grid-area: img;
-			width: 30px; 
+			width: 30px;
 			height: 30px;
 			border: solid 1px transparent;
 			font-size: 22px;
@@ -142,7 +142,7 @@ ul {
 				vertical-align: 1px;
 			}
 		}
-		.q-linear-progress { 
+		.q-linear-progress {
 			height: 30px;
 			line-height: 30px;
 			background-color: $neutral-7;
@@ -157,10 +157,10 @@ ul {
 				grid-template-columns: auto max-content;
 				grid-template-rows: auto;
 				grid-gap: 0;
-				grid-template-areas: 
-				"name numbers";
+				grid-template-areas: "name numbers";
 
-				span.name, .numbers {
+				span.name,
+				.numbers {
 					color: $neutral-1;
 				}
 				.numbers {
@@ -170,7 +170,7 @@ ul {
 				span.name {
 					font-weight: bold !important;
 					padding-left: 5px;
-					white-space: nowrap; 
+					white-space: nowrap;
 					overflow: hidden;
 					text-overflow: ellipsis;
 				}

From acd6ce53651978fa9fc176911af753376fdb1c6d Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 19 May 2023 17:10:50 +0200
Subject: [PATCH 06/24] Fix Transform Slide in demo when not logged in

---
 src/components/slides/Transform.vue | 123 +++++++++++++++-------------
 1 file changed, 67 insertions(+), 56 deletions(-)

diff --git a/src/components/slides/Transform.vue b/src/components/slides/Transform.vue
index 95fcbf425..43f333f08 100644
--- a/src/components/slides/Transform.vue
+++ b/src/components/slides/Transform.vue
@@ -1,17 +1,27 @@
 <template>
 	<div class="pb-5">
-		<h2>Transform <span class="blue">{{ entity.name }}</span></h2>
-		<a v-if="entity.transformed" @click="remove()" class="btn btn-block bg-red">Remove transformation</a>
+		<h2>
+			Transform <span class="blue">{{ entity.name }}</span>
+		</h2>
+		<a v-if="entity.transformed" @click="remove()" class="btn btn-block bg-red"
+			>Remove transformation</a
+		>
 		<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
+						<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"
-								type="number" 
+								type="number"
 								class="mb-2"
 								v-model="transAc"
 								min="1"
@@ -21,14 +31,20 @@
 							/>
 						</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
+						<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" 
+								type="number"
 								min="1"
 								max="9999"
 								v-model="transHp"
@@ -37,13 +53,13 @@
 							/>
 						</ValidationProvider>
 					</div>
-
 				</div>
 				<q-btn no-caps label="Transform" class="full-width mb-3" color="primary" type="submit" />
 
 				<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).
+					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>
@@ -51,48 +67,43 @@
 </template>
 
 <script>
-	import { mapActions } from 'vuex'
+import { mapActions } from "vuex";
 
-	export default {
-		name: 'Transform',
-		props: [
-			'data',
-		],
-		data() {
-			return {
-				entity: this.data,
-				userId: this.$store.getters.user.uid,
-				campaignId: this.$route.params.campid,
-				encounterId: this.$route.params.encid,
-				transAc: '',
-				transHp: ''
-			}
-		},
-		methods: {
-			...mapActions([
-				'setSlide',
-				'transform_entity',
-			]),
-			edit() {
-					let transform = {
-						ac: parseInt(this.transAc),
-						maxHp: parseInt(this.transHp),
-						curHp: parseInt(this.transHp)
-					}
+export default {
+	name: "Transform",
+	props: ["data"],
+	data() {
+		return {
+			entity: this.data,
+			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
+			campaignId: this.$route.params.campid,
+			encounterId: this.$route.params.encid,
+			transAc: "",
+			transHp: "",
+		};
+	},
+	methods: {
+		...mapActions(["setSlide", "transform_entity"]),
+		edit() {
+			let transform = {
+				ac: parseInt(this.transAc),
+				maxHp: parseInt(this.transHp),
+				curHp: parseInt(this.transHp),
+			};
 
-					this.transform_entity({
-						key: this.entity.key,
-						entity: transform
-					})
-					this.setSlide(false);
-			},
-			remove() {
-				this.transform_entity({
-					key: this.entity.key,
-					remove: true
-				})
-				this.entity.transformed = false
-			},
-		}
-	};
+			this.transform_entity({
+				key: this.entity.key,
+				entity: transform,
+			});
+			this.setSlide(false);
+		},
+		remove() {
+			this.transform_entity({
+				key: this.entity.key,
+				remove: true,
+			});
+			this.entity.transformed = false;
+		},
+	},
+};
 </script>

From 9b05a276f4be13cecc6188cef7c599bd741c5fa3 Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 19 May 2023 17:23:57 +0200
Subject: [PATCH 07/24] Autoroll initiative in test encounter

---
 src/store/modules/runEncounter.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/store/modules/runEncounter.js b/src/store/modules/runEncounter.js
index af5cd0a32..d62a7613e 100644
--- a/src/store/modules/runEncounter.js
+++ b/src/store/modules/runEncounter.js
@@ -2,6 +2,7 @@ import { abilities, skills } from "src/utils/generalConstants";
 import { uuid } from "src/utils/generalFunctions";
 import { monsterMixin } from "src/mixins/monster";
 import { db } from "src/firebase";
+import { calc_mod } from "src/utils/generalFunctions";
 import Vue from "vue";
 
 const demoEncounter = {
@@ -277,7 +278,7 @@ const run_encounter_actions = {
 		let entity = {
 			name: db_entity.name,
 			id: db_entity.id,
-			initiative: state.test ? null : db_entity.initiative,
+			initiative: state.test ? 0 : db_entity.initiative,
 			entityType: db_entity.entityType,
 			maxHp: db_entity.maxHp,
 			ac: parseInt(db_entity.ac),
@@ -371,6 +372,11 @@ const run_encounter_actions = {
 					}
 				}
 
+				// In test mode auto roll initiative
+				if (state.test) {
+					entity.initiative = Math.ceil(Math.random() * 20) + (entity.initiative_bons || 0);
+				}
+
 				// Defenses
 				for (const defense of [
 					"damage_vulnerabilities",
@@ -491,6 +497,10 @@ const run_encounter_actions = {
 						entity[ability] = data_npc[ability];
 					}
 
+					if (state.test) {
+						entity.initiative = Math.ceil(Math.random() * 20) + calc_mod(entity.dexterity);
+					}
+
 					// Old NPC format values
 					if (data_npc.old) {
 						entity.speed = data_npc.speed;

From c9486771abf682f91dfe94b0699c99e9e6ba2ad6 Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 19 May 2023 17:56:11 +0200
Subject: [PATCH 08/24] Remove NPCs from import/export buttons

---
 src/views/UserContent/Npcs/Npcs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index fadbdc8c7..eb5c765e7 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -3,14 +3,14 @@
 		<hk-card>
 			<ContentHeader type="npcs">
 				<button slot="actions-left" class="btn btn-sm bg-neutral-5" @click="exportAll()">
-					Export NPCs
+					Export
 				</button>
 				<button
 					slot="actions-right"
 					class="btn btn-sm bg-neutral-5 mx-2"
 					@click="import_dialog = true"
 				>
-					Import NPCs
+					Import
 				</button>
 			</ContentHeader>
 

From 25de8230d494fd8b7cce50977a21a09ae63840ae Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 19 May 2023 18:10:39 +0200
Subject: [PATCH 09/24] Fetch all search content when list.length < count

---
 src/store/modules/userContent/items.js     | 199 ++++++++++---------
 src/store/modules/userContent/npcs.js      |   4 +-
 src/store/modules/userContent/players.js   |   4 +-
 src/store/modules/userContent/reminders.js | 216 +++++++++++----------
 src/store/modules/userContent/spells.js    |   4 +-
 5 files changed, 222 insertions(+), 205 deletions(-)

diff --git a/src/store/modules/userContent/items.js b/src/store/modules/userContent/items.js
index 48b40b468..a12fc7d5a 100644
--- a/src/store/modules/userContent/items.js
+++ b/src/store/modules/userContent/items.js
@@ -1,22 +1,19 @@
-import Vue from 'vue';
-import { itemServices } from "src/services/items"; 
+import Vue from "vue";
+import { itemServices } from "src/services/items";
 import _ from "lodash";
 
 // Converts a full item to a search_item
 const convert_item = (item) => {
-	const properties = [
-		"name",
-		"image"
-	];
+	const properties = ["name", "image"];
 	const returnItem = {};
-	
-	for(const prop of properties) {
-		if(item.hasOwnProperty(prop)) {
-			returnItem[prop] = (prop === "name") ? item[prop].toLowerCase() : item[prop];
+
+	for (const prop of properties) {
+		if (item.hasOwnProperty(prop)) {
+			returnItem[prop] = prop === "name" ? item[prop].toLowerCase() : item[prop];
 		}
 	}
 	return returnItem;
-}
+};
 
 const item_state = () => ({
 	item_services: null,
@@ -27,21 +24,27 @@ const item_state = () => ({
 
 const item_getters = {
 	items: (state) => {
-    // Convert object to sorted array
-    return _.chain(state.items)
-    .filter((item, key) => {
-      item.key = key;
-      return item;
-    }).orderBy("name", "asc").value();
-  },
-	item_services: (state) => { return state.item_services },
-	item_count: (state) => { return state.item_count },
+		// Convert object to sorted array
+		return _.chain(state.items)
+			.filter((item, key) => {
+				item.key = key;
+				return item;
+			})
+			.orderBy("name", "asc")
+			.value();
+	},
+	item_services: (state) => {
+		return state.item_services;
+	},
+	item_count: (state) => {
+		return state.item_count;
+	},
 };
 
 const item_actions = {
 	async get_item_services({ getters, commit }) {
 		if (getters.item_services === null || !Object.keys(getters.item_services).length) {
-			commit("SET_ITEM_SERVICES", new itemServices);
+			commit("SET_ITEM_SERVICES", new itemServices());
 		}
 		return getters.item_services;
 	},
@@ -51,16 +54,16 @@ const item_actions = {
 	 * Stores those items in items store
 	 * Returns an Array of items, ordered by name.
 	 */
-	async get_items({ state, rootGetters, dispatch, commit }) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		let items = (state.items) ? state.items : undefined;
+	async get_items({ state, getters, rootGetters, dispatch, commit }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		let items = state.items ? state.items : undefined;
 
-		if(!items && uid) {
+		if ((!items || getters.item_count > Object.keys(items).length) && uid) {
 			const services = await dispatch("get_item_services");
 			try {
 				items = await services.getItems(uid);
 				commit("SET_ITEMS", items || {});
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -72,30 +75,30 @@ const item_actions = {
 	 * Stores the count it in item_count
 	 */
 	async fetch_item_count({ rootGetters, commit, dispatch }) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		if(uid) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
 			const services = await dispatch("get_item_services");
 			try {
-				let count = await services.getItemCount(uid) || 0;
+				let count = (await services.getItemCount(uid)) || 0;
 				commit("SET_ITEM_COUNT", count);
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
 	},
 
 	async get_item({ state, commit, dispatch }, { uid, id }) {
-		let item = (state.cached_items[uid]) ? state.cached_items[uid][id] : undefined;
+		let item = state.cached_items[uid] ? state.cached_items[uid][id] : undefined;
 
 		// The item is not in the store and needs to be fetched from the database
-		if(!item) {
+		if (!item) {
 			const services = await dispatch("get_item_services");
 			try {
 				const item = await services.getItem(uid, id);
 				commit("SET_CACHED_ITEM", { uid, id, item });
 				return item;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -105,32 +108,32 @@ const item_actions = {
 	/**
 	 * Adds a newly created ITEM for a user
 	 * A user can only add ITEM's for themselves so we use the uid from the store
-	 * 
-	 * @param {object} item 
+	 *
+	 * @param {object} item
 	 * @returns {string} the id of the newly added item
 	 */
 	async add_item({ rootGetters, commit, dispatch }, item) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		const available_slots = rootGetters.tier.benefits.items;
 
-		if(uid) {
+		if (uid) {
 			const services = await dispatch("get_item_services");
 			const used_slots = await services.getItemCount(uid);
 
-			if(used_slots >= available_slots) {
+			if (used_slots >= available_slots) {
 				throw "Not enough slots";
 			}
 			try {
-					const search_item = convert_item(item);
-					const id = await services.addItem(uid, item, search_item);
-					commit("SET_ITEM", { id, search_item });
-					commit("SET_CACHED_ITEM", { uid, id, item });
-					
-					const new_count = await services.updateItemCount(uid, 1);
-					commit("SET_ITEM_COUNT", new_count);
-					dispatch("checkEncumbrance", "", { root: true });
-					return id;
-			} catch(error) {
+				const search_item = convert_item(item);
+				const id = await services.addItem(uid, item, search_item);
+				commit("SET_ITEM", { id, search_item });
+				commit("SET_CACHED_ITEM", { uid, id, item });
+
+				const new_count = await services.updateItemCount(uid, 1);
+				commit("SET_ITEM_COUNT", new_count);
+				dispatch("checkEncumbrance", "", { root: true });
+				return id;
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -140,13 +143,13 @@ const item_actions = {
 	 * Updates and existing item
 	 * It is possible to edit the item of another user (for companions)
 	 * therefore we send the uid from where the function is called
-	 * 
+	 *
 	 * @param {string} uid
-	 * @param {string} id 
-	 * @param {object} item 
+	 * @param {string} id
+	 * @param {object} item
 	 */
 	async edit_item({ commit, dispatch }, { uid, id, item }) {
-		if(uid) {
+		if (uid) {
 			const services = await dispatch("get_item_services");
 			try {
 				const search_item = convert_item(item);
@@ -154,7 +157,7 @@ const item_actions = {
 				commit("SET_ITEM", { id, search_item });
 				commit("SET_CACHED_ITEM", { uid, id, item });
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -163,12 +166,12 @@ const item_actions = {
 	/**
 	 * Deletes an existing item
 	 * A user can only delete their own item's so use uid from the store
-	 * 
-	 * @param {string} id 
+	 *
+	 * @param {string} id
 	 */
 	async delete_item({ rootGetters, commit, dispatch }, id) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		if(uid) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
 			const services = await dispatch("get_item_services");
 			try {
 				await services.deleteItem(uid, id);
@@ -179,56 +182,62 @@ const item_actions = {
 				commit("SET_ITEM_COUNT", new_count);
 				dispatch("checkEncumbrance", "", { root: true });
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
 	},
 
 	clear_item_store({ commit, rootGetters }) {
-    const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-    if(uid) {
-      commit("CLEAR_STORE");
-    }
-  }
-}
-
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
+			commit("CLEAR_STORE");
+		}
+	},
+};
 
 const item_mutations = {
-	SET_ITEM_SERVICES(state, payload) { Vue.set(state, "item_services", payload); },
-  SET_ITEM_COUNT(state, value) { Vue.set(state, "item_count", value); },
-  SET_ITEMS(state, value) { Vue.set(state, "items", value); },
-  SET_CACHED_ITEM(state, { uid, id, item }) { 
-    if(state.cached_items[uid]) {
-      Vue.set(state.cached_items[uid], id, item);
-    } else {
-      Vue.set(state.cached_items, uid, { [id]: item });
-    }
-  },
-  SET_ITEM(state, { id, search_item }) {
-    if(state.items) {
-      Vue.set(state.items, id, search_item);
-    } else {
-      Vue.set(state, "items", { [id]: search_item });
-    }
-  },
-  REMOVE_ITEM(state, id) { 
-    Vue.delete(state.items, id); },
-  REMOVE_CACHED_ITEM(state, { uid, id }) {
-    if(state.cached_items[uid]) {
-      Vue.delete(state.cached_items[uid], id);
-    }
-  },
+	SET_ITEM_SERVICES(state, payload) {
+		Vue.set(state, "item_services", payload);
+	},
+	SET_ITEM_COUNT(state, value) {
+		Vue.set(state, "item_count", value);
+	},
+	SET_ITEMS(state, value) {
+		Vue.set(state, "items", value);
+	},
+	SET_CACHED_ITEM(state, { uid, id, item }) {
+		if (state.cached_items[uid]) {
+			Vue.set(state.cached_items[uid], id, item);
+		} else {
+			Vue.set(state.cached_items, uid, { [id]: item });
+		}
+	},
+	SET_ITEM(state, { id, search_item }) {
+		if (state.items) {
+			Vue.set(state.items, id, search_item);
+		} else {
+			Vue.set(state, "items", { [id]: search_item });
+		}
+	},
+	REMOVE_ITEM(state, id) {
+		Vue.delete(state.items, id);
+	},
+	REMOVE_CACHED_ITEM(state, { uid, id }) {
+		if (state.cached_items[uid]) {
+			Vue.delete(state.cached_items[uid], id);
+		}
+	},
 	CLEAR_STORE(state) {
-    Vue.set(state, "items", undefined);
-    Vue.set(state, "item_count", 0);
-  }
-}
+		Vue.set(state, "items", undefined);
+		Vue.set(state, "item_count", 0);
+	},
+};
 
 export default {
 	namespaced: true,
 	state: item_state,
 	getters: item_getters,
-	actions: item_actions, 
+	actions: item_actions,
 	mutations: item_mutations,
-}
\ No newline at end of file
+};
diff --git a/src/store/modules/userContent/npcs.js b/src/store/modules/userContent/npcs.js
index 0a61fb131..c55b23ccf 100644
--- a/src/store/modules/userContent/npcs.js
+++ b/src/store/modules/userContent/npcs.js
@@ -53,11 +53,11 @@ const npc_actions = {
 	 * Fetches all the search_npcs for a user
 	 * and stores them in npcs
 	 */
-	async get_npcs({ state, rootGetters, dispatch, commit }) {
+	async get_npcs({ state, getters, rootGetters, dispatch, commit }) {
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		let npcs = state.npcs ? state.npcs : undefined;
 
-		if (!npcs && uid) {
+		if ((!npcs || getters.npc_count > Object.keys(npcs).length) && uid) {
 			const services = await dispatch("get_npc_services");
 			try {
 				npcs = await services.getNpcs(uid);
diff --git a/src/store/modules/userContent/players.js b/src/store/modules/userContent/players.js
index 8200c4d70..8361afbe5 100644
--- a/src/store/modules/userContent/players.js
+++ b/src/store/modules/userContent/players.js
@@ -123,11 +123,11 @@ const player_actions = {
 	 * Fetches all the search_players for a user
 	 * and stores them in players
 	 */
-	async get_players({ state, rootGetters, dispatch, commit }) {
+	async get_players({ state, getters, rootGetters, dispatch, commit }) {
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		let players = state.players ? state.players : undefined;
 
-		if (!players && uid) {
+		if ((!players || getters.player_count > Object.keys(players).length) && uid) {
 			const services = await dispatch("get_player_services");
 			try {
 				players = await services.getPlayers(uid);
diff --git a/src/store/modules/userContent/reminders.js b/src/store/modules/userContent/reminders.js
index 8075c9d14..321fd3ce3 100644
--- a/src/store/modules/userContent/reminders.js
+++ b/src/store/modules/userContent/reminders.js
@@ -1,46 +1,50 @@
-import Vue from 'vue';
-import { reminderServices } from "src/services/reminders"; 
+import Vue from "vue";
+import { reminderServices } from "src/services/reminders";
 import _ from "lodash";
 
 // Converts a full reminder to a search_reminder
 const convert_reminder = (reminder) => {
-	const properties = [
-		"title",
-	];
+	const properties = ["title"];
 	const returnReminder = {};
-	
-	for(const prop of properties) {
-		if(reminder.hasOwnProperty(prop)) {
+
+	for (const prop of properties) {
+		if (reminder.hasOwnProperty(prop)) {
 			returnReminder[prop] = reminder[prop];
 		}
 	}
 	return returnReminder;
-}
+};
 
 const reminder_state = () => ({
 	reminder_services: null,
 	cached_reminders: {},
 	reminder_count: 0,
-	reminders: undefined
+	reminders: undefined,
 });
 
 const reminder_getters = {
 	reminders: (state) => {
-    // Convert object to sorted array
-    return _.chain(state.reminders)
-    .filter((reminder, key) => {
-      reminder.key = key;
-      return reminder;
-    }).orderBy("name", "asc").value();
-  },
-	reminder_count: (state) => { return state.reminder_count },
-	reminder_services: (state) => { return state.reminder_services },
+		// Convert object to sorted array
+		return _.chain(state.reminders)
+			.filter((reminder, key) => {
+				reminder.key = key;
+				return reminder;
+			})
+			.orderBy("name", "asc")
+			.value();
+	},
+	reminder_count: (state) => {
+		return state.reminder_count;
+	},
+	reminder_services: (state) => {
+		return state.reminder_services;
+	},
 };
 
 const reminder_actions = {
 	async get_reminder_services({ getters, commit }) {
 		if (getters.reminder_services === null || !Object.keys(getters.reminder_services).length) {
-			commit("SET_REMINDER_SERVICES", new reminderServices);
+			commit("SET_REMINDER_SERVICES", new reminderServices());
 		}
 		return getters.reminder_services;
 	},
@@ -50,16 +54,16 @@ const reminder_actions = {
 	 * Stores those reminders in reminders store
 	 * Returns an Array of reminders, ordered by name.
 	 */
-	async get_reminders({ state, rootGetters, dispatch, commit }) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		let reminders = (state.reminders) ? state.reminders : undefined;
+	async get_reminders({ state, getters, rootGetters, dispatch, commit }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		let reminders = state.reminders ? state.reminders : undefined;
 
-		if(!reminders && uid) {
+		if ((!reminders || getters.reminder_count > Object.keys(reminders).length) && uid) {
 			const services = await dispatch("get_reminder_services");
 			try {
 				reminders = await services.getReminders(uid);
 				commit("SET_REMINDERS", reminders || {});
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -71,30 +75,30 @@ const reminder_actions = {
 	 * Stores the count it in reminder_count
 	 */
 	async fetch_reminder_count({ rootGetters, commit, dispatch }) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		if(uid) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
 			const services = await dispatch("get_reminder_services");
 			try {
-				let count = await services.getReminderCount(uid) || 0;
+				let count = (await services.getReminderCount(uid)) || 0;
 				commit("SET_REMINDER_COUNT", count);
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
 	},
 
 	async get_reminder({ state, commit, dispatch }, { uid, id }) {
-		let reminder = (state.cached_reminders[uid]) ? state.cached_reminders[uid][id] : undefined;
+		let reminder = state.cached_reminders[uid] ? state.cached_reminders[uid][id] : undefined;
 
 		// The reminder is not in the store and needs to be fetched from the database
-		if(!reminder) {
+		if (!reminder) {
 			const services = await dispatch("get_reminder_services");
 			try {
 				const reminder = await services.getReminder(uid, id);
 				commit("SET_CACHED_REMINDER", { uid, id, reminder });
 				return reminder;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -102,41 +106,41 @@ const reminder_actions = {
 	},
 
 	/**
-   * Gets all FULL Reminders from a USER
-   */
+	 * Gets all FULL Reminders from a USER
+	 */
 	async get_full_reminders({ state, rootGetters, commit, dispatch }) {
-    const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		let reminders = (state.cached_reminders[uid]) ? state.cached_reminders[uid] : {};
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		let reminders = state.cached_reminders[uid] ? state.cached_reminders[uid] : {};
 
-    if (Object.keys(reminders).length < state.reminder_count) {
-      const services = await dispatch("get_reminder_services");
+		if (Object.keys(reminders).length < state.reminder_count) {
+			const services = await dispatch("get_reminder_services");
 
-      try {
-        reminders = await services.getFullReminders(uid);
-        commit("SET_CACHED_REMINDERS", { uid, reminders })
-      } catch(error) {
+			try {
+				reminders = await services.getFullReminders(uid);
+				commit("SET_CACHED_REMINDERS", { uid, reminders });
+			} catch (error) {
 				throw error;
-      }
-    }
+			}
+		}
 		return reminders;
-  },
+	},
 
 	/**
 	 * Adds a newly created REMINDER for a user
 	 * A user can only add REMINDER's for themselves so we use the uid from the store
-	 * 
-	 * @param {object} reminder 
+	 *
+	 * @param {object} reminder
 	 * @returns {string} the id of the newly added reminder
 	 */
 	async add_reminder({ rootGetters, commit, dispatch }, reminder) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		const available_slots = rootGetters.tier.benefits.reminders;
 
-		if(uid) {
+		if (uid) {
 			const services = await dispatch("get_reminder_services");
 			const used_slots = await services.getReminderCount(uid);
 
-			if(used_slots >= available_slots) {
+			if (used_slots >= available_slots) {
 				throw "Not enough slots";
 			}
 			try {
@@ -149,7 +153,7 @@ const reminder_actions = {
 				commit("SET_REMINDER_COUNT", new_count);
 				dispatch("checkEncumbrance", "", { root: true });
 				return id;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -159,13 +163,13 @@ const reminder_actions = {
 	 * Updates and existing reminder
 	 * It is possible to edit the reminder of another user (for companions)
 	 * therefore we send the uid from where the function is called
-	 * 
+	 *
 	 * @param {string} uid
-	 * @param {string} id 
-	 * @param {object} reminder 
+	 * @param {string} id
+	 * @param {object} reminder
 	 */
 	async edit_reminder({ commit, dispatch }, { uid, id, reminder }) {
-		if(uid) {
+		if (uid) {
 			const services = await dispatch("get_reminder_services");
 			try {
 				const search_reminder = convert_reminder(reminder);
@@ -173,7 +177,7 @@ const reminder_actions = {
 				commit("SET_REMINDER", { id, search_reminder });
 				commit("SET_CACHED_REMINDER", { uid, id, reminder });
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -182,12 +186,12 @@ const reminder_actions = {
 	/**
 	 * Deletes an existing reminder
 	 * A user can only delete their own reminder's so use uid from the store
-	 * 
-	 * @param {string} id 
+	 *
+	 * @param {string} id
 	 */
 	async delete_reminder({ rootGetters, commit, dispatch }, id) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		if(uid) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
 			const services = await dispatch("get_reminder_services");
 			try {
 				await services.deleteReminder(uid, id);
@@ -196,63 +200,67 @@ const reminder_actions = {
 
 				const new_count = await services.updateReminderCount(uid, -1);
 				commit("SET_REMINDER_COUNT", new_count);
-				dispatch("checkEncumbrance", "", { root: true });	
+				dispatch("checkEncumbrance", "", { root: true });
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
 	},
 
 	clear_reminder_store({ commit, rootGetters }) {
-    const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-    if(uid) {
-      commit("CLEAR_STORE");
-    }
-  }
-}
-
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
+			commit("CLEAR_STORE");
+		}
+	},
+};
 
 const reminder_mutations = {
-	SET_REMINDER_SERVICES(state, payload) { Vue.set(state, "reminder_services", payload); },
-  SET_REMINDER_COUNT(state, value) { Vue.set(state, "reminder_count", value); },
-  SET_REMINDERS(state, value) { Vue.set(state, "reminders", value); },
+	SET_REMINDER_SERVICES(state, payload) {
+		Vue.set(state, "reminder_services", payload);
+	},
+	SET_REMINDER_COUNT(state, value) {
+		Vue.set(state, "reminder_count", value);
+	},
+	SET_REMINDERS(state, value) {
+		Vue.set(state, "reminders", value);
+	},
 	SET_CACHED_REMINDERS(state, { uid, reminders }) {
-    Vue.set(state.cached_reminders, uid, reminders);
-  },
-  SET_CACHED_REMINDER(state, { uid, id, reminder }) { 
-    if(state.cached_reminders[uid]) {
-      Vue.set(state.cached_reminders[uid], id, reminder);
-    } else {
-      Vue.set(state.cached_reminders, uid, { [id]: reminder });
-    }
-  },
-  SET_REMINDER(state, { id, search_reminder }) {
-    if(state.reminders) {
-      Vue.set(state.reminders, id, search_reminder);
-    } else {
-      Vue.set(state, "reminders", { [id]: search_reminder });
-    }
-  },
-  REMOVE_REMINDER(state, id) { 
-    Vue.delete(state.reminders, id); },
-  REMOVE_CACHED_REMINDER(state, { uid, id }) {
-    if(state.cached_reminders[uid]) {
-      Vue.delete(state.cached_reminders[uid], id);
-    }
-  },
+		Vue.set(state.cached_reminders, uid, reminders);
+	},
+	SET_CACHED_REMINDER(state, { uid, id, reminder }) {
+		if (state.cached_reminders[uid]) {
+			Vue.set(state.cached_reminders[uid], id, reminder);
+		} else {
+			Vue.set(state.cached_reminders, uid, { [id]: reminder });
+		}
+	},
+	SET_REMINDER(state, { id, search_reminder }) {
+		if (state.reminders) {
+			Vue.set(state.reminders, id, search_reminder);
+		} else {
+			Vue.set(state, "reminders", { [id]: search_reminder });
+		}
+	},
+	REMOVE_REMINDER(state, id) {
+		Vue.delete(state.reminders, id);
+	},
+	REMOVE_CACHED_REMINDER(state, { uid, id }) {
+		if (state.cached_reminders[uid]) {
+			Vue.delete(state.cached_reminders[uid], id);
+		}
+	},
 	CLEAR_STORE(state) {
-    Vue.set(state, "reminders", undefined);
-    Vue.set(state, "reminder_count", 0);
-  }
-}
-
-
+		Vue.set(state, "reminders", undefined);
+		Vue.set(state, "reminder_count", 0);
+	},
+};
 
 export default {
 	namespaced: true,
 	state: reminder_state,
 	getters: reminder_getters,
-	actions: reminder_actions, 
-	mutations: reminder_mutations
-}
\ No newline at end of file
+	actions: reminder_actions,
+	mutations: reminder_mutations,
+};
diff --git a/src/store/modules/userContent/spells.js b/src/store/modules/userContent/spells.js
index 76dbc9d3a..3b587db1c 100644
--- a/src/store/modules/userContent/spells.js
+++ b/src/store/modules/userContent/spells.js
@@ -54,11 +54,11 @@ const spell_actions = {
 	 * Stores those spells in spells store
 	 * Returns an Array of spells, ordered by name.
 	 */
-	async get_spells({ state, rootGetters, dispatch, commit }) {
+	async get_spells({ state, getters, rootGetters, dispatch, commit }) {
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		let spells = state.spells ? state.spells : undefined;
 
-		if (!spells && uid) {
+		if ((!spells || getters.spell_count > Object.keys(spells).length) && uid) {
 			const services = await dispatch("get_spell_services");
 			try {
 				spells = await services.getSpells(uid);

From 512d82934662d41e8799994f667e00db443ae3d8 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 19 May 2023 20:35:51 +0200
Subject: [PATCH 10/24] import npc with custom spells

---
 src/components/ImportContent.vue        | 131 +++++++++++++++++++++---
 src/services/spells.js                  |  27 +++++
 src/store/modules/userContent/spells.js |  32 ++++++
 3 files changed, 176 insertions(+), 14 deletions(-)

diff --git a/src/components/ImportContent.vue b/src/components/ImportContent.vue
index d2519625f..df9fdb92b 100644
--- a/src/components/ImportContent.vue
+++ b/src/components/ImportContent.vue
@@ -53,30 +53,30 @@
 		</template>
 		<hk-loader v-else-if="!parsed" prefix="Validating" :title="type_label" />
 		<div v-else-if="!importing">
-			<template v-for="type in Object.keys(imports)">
-				<div v-if="imports[type].length" class="mb-4" :key="type">
+			<template v-for="import_type in Object.keys(imports)">
+				<div v-if="imports[import_type].length" class="mb-4" :key="import_type">
 					<p>
 						Found
-						<span :class="type === 'unique' ? 'green' : 'orange'">
-							{{ imports[type].length }} {{ type === "unique" ? "new" : "duplicate" }}
+						<span :class="import_type === 'unique' ? 'green' : 'orange'">
+							{{ imports[import_type].length }} {{ import_type === "unique" ? "new" : "duplicate" }}
 						</span>
 						{{ type_label }}
 					</p>
 					<q-table
-						class="sticky-header-table mb-2"
+						class="sticky-header-table mb-2 no-table-margin"
 						:virtual-scroll-sticky-size-start="48"
 						:dark="$store.getters.theme !== 'light'"
 						flat
 						dense
 						square
-						:data="imports[type]"
+						:data="imports[import_type]"
 						:columns="columns"
 						row-key="index"
 						virtual-scroll
 						:pagination.sync="pagination"
 						:rows-per-page-options="[0]"
 						selection="multiple"
-						:selected.sync="selected[type]"
+						:selected.sync="selected[import_type]"
 						hide-bottom
 					>
 						<template v-slot:body-cell-invalid="props">
@@ -102,13 +102,70 @@
 						</template>
 					</q-table>
 					<q-toggle
-						v-if="type === 'duplicate'"
+						v-if="import_type === 'duplicate'"
 						v-model="overwrite"
 						label="Overwrite duplicates"
 						unchecked-icon="none"
 					/>
 				</div>
 			</template>
+			<template v-if="Object.values(custom_spells).length">
+				<p>
+					Found
+					<span class="yellow"> {{ Object.values(custom_spells).length }}</span>
+					Custom Spells
+					<q-toggle
+						v-model="import_custom_spells"
+						label="Import custom spells"
+						unchecked-icon="none"
+					/>
+				</p>
+				<template v-if="import_custom_spells">
+					<q-table
+						class="sticky-header-table mb-2 no-table-margin"
+						:virtual-scroll-sticky-size-start="48"
+						:dark="$store.getters.theme !== 'light'"
+						flat
+						dense
+						square
+						virtual-scroll
+						:pagination.sync="pagination"
+						:rows-per-page-options="[0]"
+						:data="Object.values(custom_spells)"
+						:columns="columns"
+						row-key="index"
+						hide-bottom
+					>
+						<template v-slot:body-cell-invalid="props">
+							<td class="text-right">
+								<hk-popover v-if="props.row.errors" header="Validation errors">
+									<q-icon name="error" class="red" />
+									<div slot="content">
+										<ol class="px-3">
+											<li
+												v-for="(error, i) in props.row.errors"
+												:key="`${props.row.index}-error-${i}`"
+												class="red"
+											>
+												<strong v-if="error.instancePath" class="neutral-1">
+													{{ error.instancePath }}
+												</strong>
+												{{ error.message.capitalize() }}
+											</li>
+										</ol>
+									</div>
+								</hk-popover>
+							</td>
+						</template>
+					</q-table>
+					<div v-if="Object.keys(this.custom_spells).length > this.availableSpellSlots">
+						Insufficient spell slots. You're trying to import
+						<strong class="red">{{ Object.keys(this.custom_spells).length }}</strong> spells,<br />
+						but have only <strong class="red">{{ availableSpellSlots }}</strong> slots available.
+						You can still import the selected NPCs if you deselect
+					</div>
+				</template>
+			</template>
 			<div v-if="importTotal > availableSlots">
 				Insufficient slots. You're trying to import
 				<strong class="red">{{ importTotal }}</strong> {{ type_label }},<br />
@@ -256,6 +313,9 @@ export default {
 			overwrite: true,
 			parsing: false,
 			parsed: false,
+			map_old_to_custom: {},
+			custom_spells: {},
+			import_custom_spells: true,
 			failed_imports: [],
 			importing: undefined,
 			imported: 0,
@@ -310,6 +370,11 @@ export default {
 				? Infinity
 				: this.tier.benefits[this.type] - this.content_count;
 		},
+		availableSpellSlots() {
+			return this.tier.benefits["spells"] === "infinite"
+				? Infinity
+				: this.tier.benefits["spells"] - this.spell_count;
+		},
 		importTotal() {
 			return !this.overwrite
 				? this.selected.unique.length + this.selected.duplicate.length
@@ -321,7 +386,14 @@ export default {
 	},
 	methods: {
 		...mapActions("npcs", ["add_npc", "edit_npc", "get_npcs", "get_npc"]),
-		...mapActions("spells", ["add_spell", "edit_spell", "get_spells", "get_spell"]),
+		...mapActions("spells", [
+			"add_spell",
+			"edit_spell",
+			"get_spells",
+			"get_spell",
+			"get_spell_id_by_name",
+			"reserve_spell_id",
+		]),
 		async getItem(id) {
 			return this.type === "npcs"
 				? this.get_npc({ uid: this.uid, id })
@@ -370,7 +442,7 @@ export default {
 				let checkable_item = item;
 				// Parse versatile to options for NPCs
 				if (this.type === "npcs") {
-					checkable_item = this.removeCustomSpells(item);
+					checkable_item = await this.parseCustomSpells(item);
 					checkable_item = this.versatileToOptions(item);
 				}
 
@@ -410,6 +482,21 @@ export default {
 			this.parsed = true;
 		},
 		async importData() {
+			// First check if there are custom spells from imported NPCs that need to be added.
+			if (
+				this.import_custom_spells &&
+				this.custom_spells &&
+				Object.keys(this.custom_spells).length <= this.availableSpellSlots
+			) {
+				for (const [key, spell] of Object.entries(this.custom_spells)) {
+					try {
+						await this.edit_spell({ id: key, spell: spell });
+					} catch (error) {
+						this.failed_imports.push(spell);
+					}
+				}
+			}
+
 			if (this.importTotal <= this.availableSlots) {
 				this.importing = this.selected.unique.length + this.selected.duplicate.length;
 				for (const item of this.selected.unique) {
@@ -532,19 +619,32 @@ export default {
 			}
 			return npc;
 		},
-		removeCustomSpells(npc) {
-			delete npc.custom_spells;
+		async parseCustomSpells(npc) {
+			for (const [old_key, spell] of Object.entries(npc.custom_spells)) {
+				// Check if there already is a spell with name
+				let spell_id = await this.get_spell_id_by_name({ name: spell.name });
+				if (!spell_id) {
+					// Generate a id for the spell so when we can link the spell in NPC to a future spell
+					const new_spell_id = await this.reserve_spell_id();
+					spell_id = new_spell_id;
+					this.$set(this.custom_spells, spell_id, spell);
+				}
+
+				this.map_old_to_custom[old_key] = spell_id;
+			}
+
 			for (const spell_list_type of ["caster_spells", "innate_spells"]) {
 				if (npc[spell_list_type]) {
 					const spell_list = Object.assign({}, npc[spell_list_type]);
 					for (const [spell_key, spell] of Object.entries(spell_list)) {
-						if (spell.custom) {
+						if (spell.custom && spell_key in this.map_old_to_custom) {
+							npc[spell_list_type][this.map_old_to_custom[spell_key]] = { ...spell };
 							delete npc[spell_list_type][spell_key];
 						}
 					}
 				}
 			}
-
+			delete npc.custom_spells;
 			return npc;
 		},
 	},
@@ -555,4 +655,7 @@ export default {
 .q-expansion-item {
 	background-color: $neutral-9;
 }
+.no-table-margin::v-deep table {
+	margin-bottom: 0;
+}
 </style>
diff --git a/src/services/spells.js b/src/services/spells.js
index 24f8b3908..dad9442c7 100644
--- a/src/services/spells.js
+++ b/src/services/spells.js
@@ -60,6 +60,20 @@ export class SpellServices {
 		}
 	}
 
+	async getSearchSpellByName(uid, name) {
+		try {
+			const spell = await SEARCH_SPELLS_REF.child(uid)
+				.child("results")
+				.orderByChild("name")
+				.equalTo(name)
+				.get();
+
+			return spell.val();
+		} catch (error) {
+			throw error;
+		}
+	}
+
 	/**
 	 * Adds an spell to the 'custom_spells' ref and the 'search_custom_spells' ref.
 	 * Also updates the count metadata in 'search_custom_spells'
@@ -128,6 +142,19 @@ export class SpellServices {
 		}
 	}
 
+	/**
+	 * Reserve an ID for a spell that might be stored in the future
+	 * Useful when you don't know yet if you want to store a spell, but want to be able to link to it
+	 * from different db entries
+	 *
+	 * E.g. New NPC has Custom Spells that need to be stored, but you store both NPC and Spell at same time.
+	 *
+	 * @param {String} uid ID of active user
+	 */
+	async reserveSpellId(uid) {
+		return (await SPELLS_REF.child(uid).push()).key;
+	}
+
 	/**
 	 * Update spell_count in the search table of search_spells
 	 *
diff --git a/src/store/modules/userContent/spells.js b/src/store/modules/userContent/spells.js
index 76dbc9d3a..d5fa5ae97 100644
--- a/src/store/modules/userContent/spells.js
+++ b/src/store/modules/userContent/spells.js
@@ -106,6 +106,23 @@ const spell_actions = {
 		return spell;
 	},
 
+	async get_spell_id_by_name({ rootGetters, dispatch }, { name }) {
+		console.log("store", name);
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
+			const services = await dispatch("get_spell_services");
+			try {
+				const spells = await services.getSearchSpellByName(uid, name);
+				if (spells === null) {
+					return null;
+				}
+				return Object.keys(spells)[0];
+			} catch (error) {
+				throw error;
+			}
+		}
+	},
+
 	/**
 	 * Adds a newly created SPELL for a user
 	 * A user can only add SPELLS for themselves so we use the uid from the store
@@ -189,6 +206,21 @@ const spell_actions = {
 		}
 	},
 
+	/**
+	 * Reserve Spell id for future usage
+	 */
+	async reserve_spell_id({ rootGetters, dispatch }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
+			const services = await dispatch("get_spell_services");
+			try {
+				return await services.reserveSpellId(uid);
+			} catch (error) {
+				throw error;
+			}
+		}
+	},
+
 	clear_spell_store({ commit, rootGetters }) {
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		if (uid) {

From 0bcc5da07ad103727efdf9be75aa0ffa608c8e76 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 19 May 2023 20:53:36 +0200
Subject: [PATCH 11/24] Clean spells before import

---
 src/components/ImportContent.vue        | 7 ++++++-
 src/store/modules/userContent/spells.js | 1 -
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ImportContent.vue b/src/components/ImportContent.vue
index df9fdb92b..e0c61eb20 100644
--- a/src/components/ImportContent.vue
+++ b/src/components/ImportContent.vue
@@ -443,7 +443,7 @@ export default {
 				// Parse versatile to options for NPCs
 				if (this.type === "npcs") {
 					checkable_item = await this.parseCustomSpells(item);
-					checkable_item = this.versatileToOptions(item);
+					checkable_item = this.versatileToOptions(checkable_item);
 				}
 
 				const valid = ajv.validate(this.schema, checkable_item);
@@ -488,8 +488,13 @@ export default {
 				this.custom_spells &&
 				Object.keys(this.custom_spells).length <= this.availableSpellSlots
 			) {
+				console.log("spells to add", this.custom_spells);
 				for (const [key, spell] of Object.entries(this.custom_spells)) {
 					try {
+						// TODO: use parse function to filter out spells
+						delete spell.key;
+						delete spell.updated;
+						delete spell.created;
 						await this.edit_spell({ id: key, spell: spell });
 					} catch (error) {
 						this.failed_imports.push(spell);
diff --git a/src/store/modules/userContent/spells.js b/src/store/modules/userContent/spells.js
index d5fa5ae97..767a5e19a 100644
--- a/src/store/modules/userContent/spells.js
+++ b/src/store/modules/userContent/spells.js
@@ -107,7 +107,6 @@ const spell_actions = {
 	},
 
 	async get_spell_id_by_name({ rootGetters, dispatch }, { name }) {
-		console.log("store", name);
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		if (uid) {
 			const services = await dispatch("get_spell_services");

From 38e2a64eb2f1d6db4ba88e8d004cf893cdce08eb Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 26 May 2023 11:08:46 +0200
Subject: [PATCH 12/24] Directly open live initiative in new tab

---
 src/components/PlayerLink.vue | 194 ++++++++++++++++++----------------
 1 file changed, 101 insertions(+), 93 deletions(-)

diff --git a/src/components/PlayerLink.vue b/src/components/PlayerLink.vue
index 51e93e902..e714845f4 100644
--- a/src/components/PlayerLink.vue
+++ b/src/components/PlayerLink.vue
@@ -2,28 +2,33 @@
 	<div>
 		<div class="share" :class="{ small: is_small }">
 			<div class="qr-wrapper" v-if="qr">
-				<vue-qr 
-					class="qr" 
-					:text="url" 
-					qid="playerLink" 
-					:size="120" 
+				<vue-qr
+					class="qr"
+					:text="url"
+					qid="playerLink"
+					:size="120"
 					:margin="5"
 					:logoSrc="require('src/assets/_img/logo/logo-icon-no-shield-cyan.svg')"
 					:logoScale="0.25"
 				/>
 			</div>
 			<div>
-				<h2 v-if="title" class="mb-2">Share live initiative list</h2>
-				<p class="neutral-2">
-					Let your players follow a live initiative list. 
-				</p>
+				<h2 v-if="title" class="mb-2">
+					<a :href="url" target="_blank" class="neutral-1">
+						Share live initiative list
+						<i class="fas fa-external-link blue ml-1" aria-hidden="true" />
+					</a>
+				</h2>
+				<p class="neutral-2">Let your players follow a live initiative list.</p>
 				<q-input
-					:dark="$store.getters.theme === 'dark'" filled square
+					:dark="$store.getters.theme === 'dark'"
+					filled
+					square
 					:value="url"
 					autocomplete="off"
 					type="text"
 				>
-					<hk-share 
+					<hk-share
 						title="Harmless Key"
 						text="Follow my campaigns on Harmless Key!"
 						:url="url"
@@ -33,109 +38,112 @@
 			</div>
 		</div>
 		<div class="mt-4 neutral-2" v-if="info">
-			Make sure your campaign is set to <span class="green">Public</span>, or your followers won't be able to see it.
-			Then click the <span class="live neutral-1">GO LIVE</span> icon in your campaign to share the initiative of the encounter that is active. You can stay live for your entire session, whenever you're not running an encounter, followers won't see what you're doing.
+			Make sure your campaign is set to <span class="green">Public</span>, or your followers won't
+			be able to see it. Then click the <span class="live neutral-1">GO LIVE</span> icon in your
+			campaign to share the initiative of the encounter that is active. You can stay live for your
+			entire session, whenever you're not running an encounter, followers won't see what you're
+			doing.
 		</div>
 		<q-resize-observer @resize="setSize" />
 	</div>
 </template>
 
 <script>
-	import VueQr from 'vue-qr';
-	
-	export default {
-		name: 'PlayerLink',
-		components: {
-			VueQr,
+import VueQr from "vue-qr";
+
+export default {
+	name: "PlayerLink",
+	components: {
+		VueQr,
+	},
+	props: {
+		qr: {
+			type: Boolean,
+			default: true,
 		},
-		props: {
-			qr: {
-				type: Boolean,
-				default: true
-			},
-			title: {
-				type: Boolean,
-				default: true
-			},
-			info: {
-				type: Boolean,
-				default: true
-			}
+		title: {
+			type: Boolean,
+			default: true,
 		},
-		data() {
-			return {
-				is_small: false,
-				showInfo: false,
-				url: "",
-			}
+		info: {
+			type: Boolean,
+			default: true,
 		},
-		computed: {
-			share_available() {
-				return process.browser && navigator.share !== undefined;
-			}
+	},
+	data() {
+		return {
+			is_small: false,
+			showInfo: false,
+			url: "",
+		};
+	},
+	computed: {
+		share_available() {
+			return process.browser && navigator.share !== undefined;
 		},
-		methods: {
-			setSize(size) {
-				let width = size.width;
-				let small = 450;
+	},
+	methods: {
+		setSize(size) {
+			let width = size.width;
+			let small = 450;
 
-				this.is_small = (width <= small) ? true : false;
+			this.is_small = width <= small ? true : false;
 
-				//sets new width on resize
-				this.width = width;
-			},		
+			//sets new width on resize
+			this.width = width;
 		},
-		beforeMount() {
-			this.url = window.origin + '/user/' + this.$store.getters.user.uid;
-		}
-	}
+	},
+	beforeMount() {
+		this.url = window.origin + "/user/" + this.$store.getters.user.uid;
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-	.share {
-		.copy {
-			word-break: break-all;
-		}
+.share {
+	.copy {
+		word-break: break-all;
+	}
 
-		&.small {
-			.qr-wrapper {
-				display: flex;
-				justify-content: center;
-				border: solid 1px $neutral-4;
-				width: 100%;
-				padding: 20px 0;
-				background-color: $neutral-9;
-				border-radius: $border-radius;
-				margin-bottom: 20px;
+	&.small {
+		.qr-wrapper {
+			display: flex;
+			justify-content: center;
+			border: solid 1px $neutral-4;
+			width: 100%;
+			padding: 20px 0;
+			background-color: $neutral-9;
+			border-radius: $border-radius;
+			margin-bottom: 20px;
 
-				.qr {
-					background-color: $neutral-1;
-					padding: 3px;
-					border-radius: $border-radius;
-				}
+			.qr {
+				background-color: $neutral-1;
+				padding: 3px;
+				border-radius: $border-radius;
 			}
 		}
 	}
-	.home {
-		.share {
-			display: grid;
-			grid-template-columns: auto 110px;
-			grid-template-areas: "text qr";
+}
+.home {
+	.share {
+		display: grid;
+		grid-template-columns: auto 110px;
+		grid-template-areas: "text qr";
 
-			.qr {
-				grid-area: qr;
-				border: none;
-			}
-			p {
-				margin-bottom: 10px;
-			}
-			h2 {
-				font-size: 25px;
-				font-family: $text-written;
-			}
-			small {
-				line-height: initial;
-			}
+		.qr {
+			grid-area: qr;
+			border: none;
+		}
+		p {
+			margin-bottom: 10px;
+		}
+		h2 {
+			font-size: 25px;
+			font-family: $text-written;
+		}
+		small {
+			line-height: initial;
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>

From c26d8df3d39c7ebf2a0a6d357c5d8e33798e22e1 Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 26 May 2023 11:12:56 +0200
Subject: [PATCH 13/24] Code smells resolved

---
 src/components/combat/side/Dmg.vue | 3 +--
 src/store/modules/runEncounter.js  | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/combat/side/Dmg.vue b/src/components/combat/side/Dmg.vue
index d86c5256d..63ef88a48 100644
--- a/src/components/combat/side/Dmg.vue
+++ b/src/components/combat/side/Dmg.vue
@@ -98,8 +98,7 @@ export default {
 				var amount = this._meters[type][key][type];
 				total = total + amount;
 			}
-			var percentage = Math.floor((input / total) * 100);
-			return percentage;
+			return Math.floor((input / total) * 100);
 		},
 	},
 };
diff --git a/src/store/modules/runEncounter.js b/src/store/modules/runEncounter.js
index d62a7613e..ac4f9f313 100644
--- a/src/store/modules/runEncounter.js
+++ b/src/store/modules/runEncounter.js
@@ -1,8 +1,7 @@
 import { abilities, skills } from "src/utils/generalConstants";
-import { uuid } from "src/utils/generalFunctions";
+import { uuid, calc_mod } from "src/utils/generalFunctions";
 import { monsterMixin } from "src/mixins/monster";
 import { db } from "src/firebase";
-import { calc_mod } from "src/utils/generalFunctions";
 import Vue from "vue";
 
 const demoEncounter = {

From af249fc16fe5856fb11597fa3cf0da168cb4553c Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 26 May 2023 11:30:26 +0200
Subject: [PATCH 14/24] Open live initiative from campaigns overview side

---
 src/components/ContentSideRight.vue | 452 +++++++++++++++-------------
 1 file changed, 241 insertions(+), 211 deletions(-)

diff --git a/src/components/ContentSideRight.vue b/src/components/ContentSideRight.vue
index b2b91b3e9..0ce06a19c 100644
--- a/src/components/ContentSideRight.vue
+++ b/src/components/ContentSideRight.vue
@@ -1,135 +1,160 @@
 <template>
-  <div class="content-side">
-    <Tutorial v-if="show_tutorial" vertical />
+	<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>
-          <i class="fas fa-sync-alt" aria-hidden="true" />
-          Character Sync
-        </span>
-      </div>
-      <div class="card-body text-center">
-        <p>
-          Sync your player's character sheets from other resources in 
-          <span class="whitespace-nowrap">Harmless Key</span><span v-if="tier.name === 'Free'" class="neutral-3"> *</span>.
-        </p>
-        
-        <button 
-          class="btn btn-block bg-green" 
-          @click="setSlide({
-            show: true,
-            type: 'slides/CharacterSync'
-          })">
-          <i class="fas fa-sync-alt" aria-hidden="true" /> Start Syncing
-        </button>
-        
-      </div>
-      <small v-if="tier.name === 'Free'" slot="footer" class="card-footer justify-content-start neutral-3">* <router-link to="/patreon" class="mx-1">Subscription</router-link> for Harmless Key required.</small>
-    </hk-card>
+		<hk-card v-if="$route.path.startsWith('/content/players')">
+			<div class="card-header" slot="header">
+				<span>
+					<i class="fas fa-sync-alt" aria-hidden="true" />
+					Character Sync
+				</span>
+			</div>
+			<div class="card-body text-center">
+				<p>
+					Sync your player's character sheets from other resources in
+					<span class="whitespace-nowrap">Harmless Key</span
+					><span v-if="tier.name === 'Free'" class="neutral-3"> *</span>.
+				</p>
 
-    <hk-card v-if="$route.path === '/content'" class="bg-neutral-9 overflow-hidden">
-      <hk-video />
-    </hk-card>
+				<button
+					class="btn btn-block bg-green"
+					@click="
+						setSlide({
+							show: true,
+							type: 'slides/CharacterSync',
+						})
+					"
+				>
+					<i class="fas fa-sync-alt" aria-hidden="true" /> Start Syncing
+				</button>
+			</div>
+			<small
+				v-if="tier.name === 'Free'"
+				slot="footer"
+				class="card-footer justify-content-start neutral-3"
+				>* <router-link to="/patreon" class="mx-1">Subscription</router-link> for Harmless Key
+				required.</small
+			>
+		</hk-card>
 
-    <!-- COMPENDIUM -->
-    <hk-card v-if="$route.path.split('/')[1] !== 'content'">
-      <div slot="header" class="card-header">
-        <h2><i aria-hidden="true" class="fas fa-swords mr-1" /> D&D Combat tracker</h2>
-      </div>
-      <div class="card-body overflow-x-hidden">
-        <hk-video />
-        <p class="neutral-2 mt-3 text-center">Try the most advanced initiative tracker on the internet.</p>
-        <router-link class="btn btn-block btn-sm bg-green" to="/demo">Demo encounter</router-link>
-      </div>
-    </hk-card>
+		<hk-card v-if="$route.path === '/content'" class="bg-neutral-9 overflow-hidden">
+			<hk-video />
+		</hk-card>
 
-    <!-- CAMPAIGNS -->
-    <hk-card v-if="$route.path === '/content/campaigns'">
-      <div slot="header" class="card-header">
-        <span>Share your adventures</span>
-        <a class="btn btn-sm bg-neutral-5" @click="setSlide({show: true, type: 'PlayerLink'})">
-          <i aria-hidden="true" class="fas fa-qrcode" />
-        </a>
-      </div>
-      <div class="card-body">
-       <PlayerLink :qr="false" :title="false" :info="false" />
-      </div>
-    </hk-card>
+		<!-- COMPENDIUM -->
+		<hk-card v-if="$route.path.split('/')[1] !== 'content'">
+			<div slot="header" class="card-header">
+				<h2><i aria-hidden="true" class="fas fa-swords mr-1" /> D&D Combat tracker</h2>
+			</div>
+			<div class="card-body overflow-x-hidden">
+				<hk-video />
+				<p class="neutral-2 mt-3 text-center">
+					Try the most advanced initiative tracker on the internet.
+				</p>
+				<router-link class="btn btn-block btn-sm bg-green" to="/demo">Demo encounter</router-link>
+			</div>
+		</hk-card>
 
-    <!-- HOMEBREW CREATION -->
-    <hk-card v-if="false">
-      <div 
-        slot="image"
-        class="card-image" 
-        :style="{ backgroundImage: `url(${require('src/assets/_img/homebrew-creation.webp')})`}"
-      >
-        <div class="image-title">Homebrew creation</div>
-      </div>
-      <div class="card-body">
-        <p class="text-center">Need a free adventure template, or help forming the basic idea of your adventure?</p>
-        <a class="btn btn-block btn-sm" href="http://homebrewcreation.com" rel="noopener" target="_blank">Start creating</a>
-      </div>
-    </hk-card>
+		<!-- CAMPAIGNS -->
+		<hk-card v-if="$route.path === '/content/campaigns'">
+			<div slot="header" class="card-header">
+				<a :href="`https://harmlesskey.com/user/${userId}`" target="_blank" class="neutral-1">
+					Share initiative
+					<i class="fas fa-external-link blue-light" aria-hidden="true" />
+				</a>
+				<a class="btn btn-sm bg-neutral-5" @click="setSlide({ show: true, type: 'PlayerLink' })">
+					<i aria-hidden="true" class="fas fa-qrcode" />
+				</a>
+			</div>
+			<div class="card-body">
+				<PlayerLink :qr="false" :title="false" :info="false" />
+			</div>
+		</hk-card>
 
-    <!-- SOCIAL -->
-    <hk-card small header="Join our community">
-      <div class="card-body">
-        <a class="btn btn-block bg-neutral-8 mb-3" href="https://discord.gg/fhmKBM7" target="_blank" rel="noopener">
-          <i aria-hidden="true" class="fab fa-discord discord-purple mr-2" /> Discord
-        </a>
-        <p class="neutral-2 text-center">
-          Join others on our Discord and be amongst the first to know about new updates.
-        </p>
-        <hr>
-        <div class="social d-flex justify-content-between">
-          <a 
-            v-for="{name, icon, url} in social_media" 
-            class="btn bg-neutral-8"
-            :class="{ 'btn-sm': width < 240 }"
-            :key="name"
-            :href="url" 
-            target="_blank" rel="noopener"
-          >
-            <i aria-hidden="true" :class="icon" />
-          </a>
-        </div>
-      </div>
-    </hk-card>
+		<!-- HOMEBREW CREATION -->
+		<hk-card v-if="false">
+			<div
+				slot="image"
+				class="card-image"
+				:style="{ backgroundImage: `url(${require('src/assets/_img/homebrew-creation.webp')})` }"
+			>
+				<div class="image-title">Homebrew creation</div>
+			</div>
+			<div class="card-body">
+				<p class="text-center">
+					Need a free adventure template, or help forming the basic idea of your adventure?
+				</p>
+				<a
+					class="btn btn-block btn-sm"
+					href="http://homebrewcreation.com"
+					rel="noopener"
+					target="_blank"
+					>Start creating</a
+				>
+			</div>
+		</hk-card>
 
-    <!-- SUBSCRIPTION -->
-    <hk-card v-if="user && tier && $route.path.split('/')[1] === 'content'" small>
-      <div slot="header" class="card-header">
-        Subscription
-        <hk-popover 
-          v-if="pending_payment"
-          header="Pending"
-          content="Your Patreon payment is pending, this might take a few minutes." 
-        >
-          Pending <i class="fas fa-sync ml-1 blue spin" aria-hidden="true" />
-        </hk-popover>
-        <strong v-else>{{ tier.name }}</strong>
-      </div>
-      <q-linear-progress 
-        v-if="tier.name !== 'Deity'"
-        :value="slots_used.used_slots / slots_used.available_slots"
-        color="neutral-4"
-        track-color="neutral-11"
-      />
-      <div>
-        <Tier />
-      </div>
-      <div slot="footer" v-if="tier.name !== 'Deity'">
-        <router-link 
-          to="/patreon" 
-          class="btn btn-block btn-square bg-patreon-red"
-        >
-          Upgrade
-        </router-link>
-      </div>
-    </hk-card>
-    <q-resize-observer @resize="setWidth"/>
-  </div>
+		<!-- SOCIAL -->
+		<hk-card small header="Join our community">
+			<div class="card-body">
+				<a
+					class="btn btn-block bg-neutral-8 mb-3"
+					href="https://discord.gg/fhmKBM7"
+					target="_blank"
+					rel="noopener"
+				>
+					<i aria-hidden="true" class="fab fa-discord discord-purple mr-2" /> Discord
+				</a>
+				<p class="neutral-2 text-center">
+					Join others on our Discord and be amongst the first to know about new updates.
+				</p>
+				<hr />
+				<div class="social d-flex justify-content-between">
+					<a
+						v-for="{ name, icon, url } in social_media"
+						class="btn bg-neutral-8"
+						:class="{ 'btn-sm': width < 240 }"
+						:key="name"
+						:href="url"
+						target="_blank"
+						rel="noopener"
+					>
+						<i aria-hidden="true" :class="icon" />
+					</a>
+				</div>
+			</div>
+		</hk-card>
+
+		<!-- SUBSCRIPTION -->
+		<hk-card v-if="user && tier && $route.path.split('/')[1] === 'content'" small>
+			<div slot="header" class="card-header">
+				Subscription
+				<hk-popover
+					v-if="pending_payment"
+					header="Pending"
+					content="Your Patreon payment is pending, this might take a few minutes."
+				>
+					Pending <i class="fas fa-sync ml-1 blue spin" aria-hidden="true" />
+				</hk-popover>
+				<strong v-else>{{ tier.name }}</strong>
+			</div>
+			<q-linear-progress
+				v-if="tier.name !== 'Deity'"
+				:value="slots_used.used_slots / slots_used.available_slots"
+				color="neutral-4"
+				track-color="neutral-11"
+			/>
+			<div>
+				<Tier />
+			</div>
+			<div slot="footer" v-if="tier.name !== 'Deity'">
+				<router-link to="/patreon" class="btn btn-block btn-square bg-patreon-red">
+					Upgrade
+				</router-link>
+			</div>
+		</hk-card>
+		<q-resize-observer @resize="setWidth" />
+	</div>
 </template>
 
 <script>
@@ -137,94 +162,99 @@ import { mapActions, mapGetters } from "vuex";
 import { extensionInstalled } from "src/utils/generalFunctions";
 
 export default {
-  name: "ContentSideRight",
-  props: {
-    page: String
-  },
-  components: {
-    PlayerLink: () => import("src/components/PlayerLink"),
-    HkVideo: () => import("src/components/hk-components/hk-video"),
-    Tier: () => import("src/components/userContent/Tier"),
-    Tutorial: () => import("src/components/userContent/Tutorial.vue"),
-  },
-  data() {
-    return {
-      width: 0,
-      hasExtension: false,
-      social_media: [
-					{
-						name: "Patreon",
-						icon: "fab fa-patreon patreon-red",
-						url: "https://www.patreon.com/harmlesskey"
-					},
-					{
-						name: "Instagram",
-						icon: "fab fa-instagram",
-						url: "https://www.instagram.com/harmlesskey"
-					},
-					{
-						name: "Twitter",
-						icon: "fab fa-twitter",
-						url: "https://twitter.com/KeyHarmless"
-					},
-					{
-						name: "Facebook",
-						icon: "fab fa-facebook-f",
-						url: "https://www.facebook.com/harmlesskey"
-					},
-					{
-						name: "Reddit",
-						icon: "fab fa-reddit-alien",
-						url: "https://www.reddit.com/r/HarmlessKey"
-					}
-				]
-    }
-  },
-  computed: {
-    ...mapGetters(["user", "tier", "slots_used", "userInfo", "content_count"]),
-    filtered_content() {
-      return this.content.filter(item => item.value !== this.page);
-    },
-    pending_payment() {
-      return this.userInfo && this.userInfo.patron && this.userInfo.patron.last_charge_status === "Pending";
-    },
-    show_tutorial() {
-      return this.$route.path.split('/')[1] === 'content' && 
-        this.$route.path !== "/content/campaigns" &&
-        this.content_count.campaigns &&
-        (!this.content_count.players || !this.content_count.encounters);
-    }
-  },
-  methods: {
-    ...mapActions([
-      "setSlide"
-    ]),
-    setWidth(size) {
-      this.width = size.width;
-    }
-  },
-  async mounted() {
-    if(this.$route.path.startsWith("/content/players")) {
-      this.hasExtension = await extensionInstalled();
-    }
-  }
-}
+	name: "ContentSideRight",
+	props: {
+		page: String,
+	},
+	components: {
+		PlayerLink: () => import("src/components/PlayerLink"),
+		HkVideo: () => import("src/components/hk-components/hk-video"),
+		Tier: () => import("src/components/userContent/Tier"),
+		Tutorial: () => import("src/components/userContent/Tutorial.vue"),
+	},
+	data() {
+		return {
+			width: 0,
+			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
+			hasExtension: false,
+			social_media: [
+				{
+					name: "Patreon",
+					icon: "fab fa-patreon patreon-red",
+					url: "https://www.patreon.com/harmlesskey",
+				},
+				{
+					name: "Instagram",
+					icon: "fab fa-instagram",
+					url: "https://www.instagram.com/harmlesskey",
+				},
+				{
+					name: "Twitter",
+					icon: "fab fa-twitter",
+					url: "https://twitter.com/KeyHarmless",
+				},
+				{
+					name: "Facebook",
+					icon: "fab fa-facebook-f",
+					url: "https://www.facebook.com/harmlesskey",
+				},
+				{
+					name: "Reddit",
+					icon: "fab fa-reddit-alien",
+					url: "https://www.reddit.com/r/HarmlessKey",
+				},
+			],
+		};
+	},
+	computed: {
+		...mapGetters(["user", "tier", "slots_used", "userInfo", "content_count"]),
+		filtered_content() {
+			return this.content.filter((item) => item.value !== this.page);
+		},
+		pending_payment() {
+			return (
+				this.userInfo &&
+				this.userInfo.patron &&
+				this.userInfo.patron.last_charge_status === "Pending"
+			);
+		},
+		show_tutorial() {
+			return (
+				this.$route.path.split("/")[1] === "content" &&
+				this.$route.path !== "/content/campaigns" &&
+				this.content_count.campaigns &&
+				(!this.content_count.players || !this.content_count.encounters)
+			);
+		},
+	},
+	methods: {
+		...mapActions(["setSlide"]),
+		setWidth(size) {
+			this.width = size.width;
+		},
+	},
+	async mounted() {
+		if (this.$route.path.startsWith("/content/players")) {
+			this.hasExtension = await extensionInstalled();
+		}
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-  .hk-card {
-    .card-image {
-      min-height: 100px;
-      display: flex;
-      align-items: center;
+.hk-card {
+	.card-image {
+		min-height: 100px;
+		display: flex;
+		align-items: center;
 
-      .image-title {
-        font-size: 30px;
-        line-height: 35px;
-        opacity: 1;
-        font-weight: bold;
-        text-shadow: 2px 2px 5px $black;
-      }
-    }
-  }
-</style>
\ No newline at end of file
+		.image-title {
+			font-size: 30px;
+			line-height: 35px;
+			opacity: 1;
+			font-weight: bold;
+			text-shadow: 2px 2px 5px $black;
+		}
+	}
+}
+</style>

From 9ccd397ea9c6e4bae510a7c0e6850bb5d47704f4 Mon Sep 17 00:00:00 2001
From: Unknown <keyroos@gmail.com>
Date: Fri, 26 May 2023 12:01:20 +0200
Subject: [PATCH 15/24] Demo variable was set in mixin and component itself

---
 src/components/combat/actions/custom/CustomRoll.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/combat/actions/custom/CustomRoll.vue b/src/components/combat/actions/custom/CustomRoll.vue
index 369e16c0d..86c52b2eb 100644
--- a/src/components/combat/actions/custom/CustomRoll.vue
+++ b/src/components/combat/actions/custom/CustomRoll.vue
@@ -116,7 +116,6 @@ export default {
 	data() {
 		return {
 			damage_types: damage_types,
-			demo: this.$route.name === "Demo",
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,

From b75e73d0b2f7af52c56655d0ad12bf965f6a9d74 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 2 Jun 2023 12:07:55 +0200
Subject: [PATCH 16/24] added a patreon link

---
 src/components/ImportContent.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ImportContent.vue b/src/components/ImportContent.vue
index e0c61eb20..eecda9857 100644
--- a/src/components/ImportContent.vue
+++ b/src/components/ImportContent.vue
@@ -162,8 +162,11 @@
 						Insufficient spell slots. You're trying to import
 						<strong class="red">{{ Object.keys(this.custom_spells).length }}</strong> spells,<br />
 						but have only <strong class="red">{{ availableSpellSlots }}</strong> slots available.
-						You can still import the selected NPCs if you deselect
 					</div>
+					<router-link class="btn btn-sm bg-patreon-red my-2" to="/patreon">
+						<i aria-hidden="true" class="fab fa-patreon white mr-1" />
+						Get more slots
+					</router-link>
 				</template>
 			</template>
 			<div v-if="importTotal > availableSlots">

From ab7b86bfd702e2e2400133efa99a61fdbc332eab Mon Sep 17 00:00:00 2001
From: Key <keyroos@gmail.com>
Date: Fri, 2 Jun 2023 12:20:06 +0200
Subject: [PATCH 17/24] Can't finish test encounter

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

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index 780b0c28f..2f5a83394 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -88,7 +88,7 @@
 							/></q-item-section>
 							<q-item-section>Reset encounter</q-item-section>
 						</q-item>
-						<q-item clickable v-close-popup @click="confirmFinish()">
+						<q-item v-if="!test" clickable v-close-popup @click="confirmFinish()">
 							<q-item-section avatar><i aria-hidden="true" class="fas fa-check" /></q-item-section>
 							<q-item-section>Finish encounter</q-item-section>
 						</q-item>

From 2bba062703f7ed12f435d765b153ef0dd1bcac4f Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 2 Jun 2023 12:27:26 +0200
Subject: [PATCH 18/24] wrap support button in available spell slots option

---
 src/components/ImportContent.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/ImportContent.vue b/src/components/ImportContent.vue
index eecda9857..75d44aebc 100644
--- a/src/components/ImportContent.vue
+++ b/src/components/ImportContent.vue
@@ -158,15 +158,18 @@
 							</td>
 						</template>
 					</q-table>
-					<div v-if="Object.keys(this.custom_spells).length > this.availableSpellSlots">
-						Insufficient spell slots. You're trying to import
-						<strong class="red">{{ Object.keys(this.custom_spells).length }}</strong> spells,<br />
-						but have only <strong class="red">{{ availableSpellSlots }}</strong> slots available.
-					</div>
-					<router-link class="btn btn-sm bg-patreon-red my-2" to="/patreon">
-						<i aria-hidden="true" class="fab fa-patreon white mr-1" />
-						Get more slots
-					</router-link>
+					<template v-if="Object.keys(this.custom_spells).length > this.availableSpellSlots">
+						<div>
+							Insufficient spell slots. You're trying to import
+							<strong class="red">{{ Object.keys(this.custom_spells).length }}</strong>
+							spells,<br />
+							but have only <strong class="red">{{ availableSpellSlots }}</strong> slots available.
+						</div>
+						<router-link class="btn btn-sm bg-patreon-red my-2" to="/patreon">
+							<i aria-hidden="true" class="fab fa-patreon white mr-1" />
+							Get more slots
+						</router-link>
+					</template>
 				</template>
 			</template>
 			<div v-if="importTotal > availableSlots">

From 388577c6008ccc61a8cac461a300255172738c20 Mon Sep 17 00:00:00 2001
From: Key <keyroos@gmail.com>
Date: Fri, 2 Jun 2023 13:01:05 +0200
Subject: [PATCH 19/24] Clear spell store on sign out

---
 src/store/modules/user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 4e69c8530..cae907eb9 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -390,7 +390,7 @@ const user_actions = {
 		await dispatch("npcs/clear_npc_store", {}, { root: true });
 		await dispatch("reminders/clear_reminder_store", {}, { root: true });
 		await dispatch("items/clear_item_store", {}, { root: true });
-		await dispatch("items/clear_spell_store", {}, { root: true });
+		await dispatch("spells/clear_spell_store", {}, { root: true });
 		await commit("CLEAR_USER", undefined);
 
 		// Sign out from firebase

From ec773725b4a4c0fcde798cbe29a68cabde74c6a3 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 2 Jun 2023 13:10:01 +0200
Subject: [PATCH 20/24] Added Leave Test mode button on Test Mode slide

---
 src/components/slides/encounter/TestMode.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/slides/encounter/TestMode.vue b/src/components/slides/encounter/TestMode.vue
index 88ad1ba83..6d582db82 100644
--- a/src/components/slides/encounter/TestMode.vue
+++ b/src/components/slides/encounter/TestMode.vue
@@ -11,6 +11,12 @@
 			reminders) is only applied in the copy.
 		</p>
 		<p>Test mode is an ideal way to test if your encounter is maybe too easy or too difficult.</p>
+		<router-link
+			:to="`/content/campaigns/${this.$route.params.campid}/${this.$route.params.encid}`"
+			class="btn btn-block btn-square bg-orange"
+		>
+			Leave Test Mode
+		</router-link>
 	</div>
 </template>
 

From 5c1abbaaadedfe0412fd505a1f895e50dae19afd Mon Sep 17 00:00:00 2001
From: Key <keyroos@gmail.com>
Date: Fri, 2 Jun 2023 13:45:10 +0200
Subject: [PATCH 21/24] update_spell_count function added to spell store

---
 src/store/modules/userContent/spells.js | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/store/modules/userContent/spells.js b/src/store/modules/userContent/spells.js
index 767a5e19a..a30a3fa05 100644
--- a/src/store/modules/userContent/spells.js
+++ b/src/store/modules/userContent/spells.js
@@ -146,9 +146,7 @@ const spell_actions = {
 				commit("SET_SPELL", { id, search_spell });
 				commit("SET_CACHED_SPELL", { uid, id, spell });
 
-				const new_count = await services.updateSpellCount(uid, 1);
-				commit("SET_SPELL_COUNT", new_count);
-				dispatch("checkEncumbrance", "", { root: true });
+				await dispatch("update_spell_count", 1);
 				return id;
 			} catch (error) {
 				throw error;
@@ -195,9 +193,7 @@ const spell_actions = {
 				commit("REMOVE_SPELL", id);
 				commit("REMOVE_CACHED_SPELL", { uid, id });
 
-				const new_count = await services.updateSpellCount(uid, -1);
-				commit("SET_SPELL_COUNT", new_count);
-				dispatch("checkEncumbrance", "", { root: true });
+				await dispatch("update_spell_count", -1);
 				return;
 			} catch (error) {
 				throw error;
@@ -205,6 +201,23 @@ const spell_actions = {
 		}
 	},
 
+	/**
+	 * Update spell count
+	 */
+	async update_spell_count({ rootGetters, dispatch, commit }, value) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
+			const services = await dispatch("get_spell_services");
+			try {
+				const new_count = await services.updateSpellCount(uid, value);
+				commit("SET_SPELL_COUNT", new_count);
+				dispatch("checkEncumbrance", "", { root: true });
+			} catch(error) {
+				throw(error);
+			}
+		}
+	},
+
 	/**
 	 * Reserve Spell id for future usage
 	 */

From 30029b6e2f20cd4759d58a671f352969c677aeff Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 2 Jun 2023 14:52:20 +0200
Subject: [PATCH 22/24] spell validation and import multiple npcs with spells

---
 src/components/ImportContent.vue        | 56 ++++++++++++++-----------
 src/services/spells.js                  | 15 +++++--
 src/store/modules/userContent/spells.js |  8 ++--
 src/views/UserContent/Npcs/Npcs.vue     |  2 +-
 4 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/components/ImportContent.vue b/src/components/ImportContent.vue
index 75d44aebc..86feb5b50 100644
--- a/src/components/ImportContent.vue
+++ b/src/components/ImportContent.vue
@@ -494,14 +494,10 @@ export default {
 				this.custom_spells &&
 				Object.keys(this.custom_spells).length <= this.availableSpellSlots
 			) {
-				console.log("spells to add", this.custom_spells);
 				for (const [key, spell] of Object.entries(this.custom_spells)) {
 					try {
 						// TODO: use parse function to filter out spells
-						delete spell.key;
-						delete spell.updated;
-						delete spell.created;
-						await this.edit_spell({ id: key, spell: spell });
+						await this.add_spell({ spell: spell, predefined_key: key });
 					} catch (error) {
 						this.failed_imports.push(spell);
 					}
@@ -631,31 +627,43 @@ export default {
 			return npc;
 		},
 		async parseCustomSpells(npc) {
-			for (const [old_key, spell] of Object.entries(npc.custom_spells)) {
-				// Check if there already is a spell with name
-				let spell_id = await this.get_spell_id_by_name({ name: spell.name });
-				if (!spell_id) {
-					// Generate a id for the spell so when we can link the spell in NPC to a future spell
-					const new_spell_id = await this.reserve_spell_id();
-					spell_id = new_spell_id;
-					this.$set(this.custom_spells, spell_id, spell);
-				}
+			if (npc.custom_spells) {
+				for (const [old_key, spell] of Object.entries(npc.custom_spells)) {
+					// Check if there already is a spell with name
+					delete spell.key;
+					delete spell.updated;
+					delete spell.created;
+					const valid = ajv.validate(spellSchema, spell);
+					if (!valid) {
+						spell.errors = ajv.errors;
+					}
+					// Check if spell is already known to importer
+					if (!Object.keys(this.map_old_to_custom).includes(old_key)) {
+						let spell_id = await this.get_spell_id_by_name({ name: spell.name });
+						if (!spell_id) {
+							// Generate a id for the spell so when we can link the spell in NPC to a future spell
+							const new_spell_id = await this.reserve_spell_id();
+							spell_id = new_spell_id;
+							this.$set(this.custom_spells, spell_id, spell);
+						}
 
-				this.map_old_to_custom[old_key] = spell_id;
-			}
+						this.map_old_to_custom[old_key] = spell_id;
+					}
+				}
 
-			for (const spell_list_type of ["caster_spells", "innate_spells"]) {
-				if (npc[spell_list_type]) {
-					const spell_list = Object.assign({}, npc[spell_list_type]);
-					for (const [spell_key, spell] of Object.entries(spell_list)) {
-						if (spell.custom && spell_key in this.map_old_to_custom) {
-							npc[spell_list_type][this.map_old_to_custom[spell_key]] = { ...spell };
-							delete npc[spell_list_type][spell_key];
+				for (const spell_list_type of ["caster_spells", "innate_spells"]) {
+					if (npc[spell_list_type]) {
+						const spell_list = Object.assign({}, npc[spell_list_type]);
+						for (const [spell_key, spell] of Object.entries(spell_list)) {
+							if (spell.custom && spell_key in this.map_old_to_custom) {
+								npc[spell_list_type][this.map_old_to_custom[spell_key]] = { ...spell };
+								delete npc[spell_list_type][spell_key];
+							}
 						}
 					}
 				}
+				delete npc.custom_spells;
 			}
-			delete npc.custom_spells;
 			return npc;
 		},
 	},
diff --git a/src/services/spells.js b/src/services/spells.js
index dad9442c7..2119a3ac7 100644
--- a/src/services/spells.js
+++ b/src/services/spells.js
@@ -84,18 +84,25 @@ export class SpellServices {
 	 * @param {Object} search_spell Compressed spell
 	 * @returns Key of the newly added spell
 	 */
-	async addSpell(uid, spell, search_spell) {
+	async addSpell(uid, spell, search_spell, predefined_key = undefined) {
 		try {
 			spell.name = spell.name.toLowerCase();
-			const newSpell = await SPELLS_REF.child(uid).push(spell);
 
 			spell.created = firebase.database.ServerValue.TIMESTAMP;
 			spell.updated = firebase.database.ServerValue.TIMESTAMP;
 
+			let spell_key = predefined_key;
+			if (predefined_key) {
+				await SPELLS_REF.child(uid).child(predefined_key).set(spell);
+			} else {
+				newSpell = await SPELLS_REF.child(uid).push(spell);
+				spell_key = newSpell.key;
+			}
+
 			// Update search_spells
-			SEARCH_SPELLS_REF.child(`${uid}/results/${newSpell.key}`).set(search_spell);
+			SEARCH_SPELLS_REF.child(`${uid}/results/${spell_key}`).set(search_spell);
 
-			return newSpell.key;
+			return spell_key;
 		} catch (error) {
 			throw error;
 		}
diff --git a/src/store/modules/userContent/spells.js b/src/store/modules/userContent/spells.js
index a30a3fa05..e4eb56539 100644
--- a/src/store/modules/userContent/spells.js
+++ b/src/store/modules/userContent/spells.js
@@ -129,7 +129,7 @@ const spell_actions = {
 	 * @param {object} spell
 	 * @returns {string} the id of the newly added spell
 	 */
-	async add_spell({ rootGetters, commit, dispatch }, spell) {
+	async add_spell({ rootGetters, commit, dispatch }, { spell, predefined_key }) {
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		const available_slots = rootGetters.tier.benefits.spells;
 
@@ -142,7 +142,7 @@ const spell_actions = {
 			}
 			try {
 				const search_spell = convert_spell(spell);
-				const id = await services.addSpell(uid, spell, search_spell);
+				const id = await services.addSpell(uid, spell, search_spell, predefined_key);
 				commit("SET_SPELL", { id, search_spell });
 				commit("SET_CACHED_SPELL", { uid, id, spell });
 
@@ -212,8 +212,8 @@ const spell_actions = {
 				const new_count = await services.updateSpellCount(uid, value);
 				commit("SET_SPELL_COUNT", new_count);
 				dispatch("checkEncumbrance", "", { root: true });
-			} catch(error) {
-				throw(error);
+			} catch (error) {
+				throw error;
 			}
 		}
 	},
diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index fadbdc8c7..81a955d0f 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -249,7 +249,7 @@ export default {
 			const all_npcs = await this.get_full_npcs();
 			for (const key in all_npcs) {
 				all_npcs[key].harmless_key = key;
-				this.addCustomSpellToExport(all_npcs[key]);
+				await this.addCustomSpellToExport(all_npcs[key]);
 			}
 
 			const json_export = Object.values(all_npcs);

From 26164c9907b2b3ad8a294fe8cdb2126274409471 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 2 Jun 2023 15:14:11 +0200
Subject: [PATCH 23/24] add spell fixed

---
 src/components/ImportContent.vue           | 2 +-
 src/services/spells.js                     | 2 +-
 src/store/modules/userContent/spells.js    | 1 +
 src/views/UserContent/Spells/EditSpell.vue | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/ImportContent.vue b/src/components/ImportContent.vue
index 86feb5b50..f52dd0bb1 100644
--- a/src/components/ImportContent.vue
+++ b/src/components/ImportContent.vue
@@ -406,7 +406,7 @@ export default {
 				: this.get_spell({ uid: this.uid, id });
 		},
 		async addItem(item) {
-			this.type === "npcs" ? await this.add_npc(item) : await this.add_spell(item);
+			this.type === "npcs" ? await this.add_npc(item) : await this.add_spell({ spell: item });
 		},
 		async editItem(id, item) {
 			this.type === "npcs"
diff --git a/src/services/spells.js b/src/services/spells.js
index 2119a3ac7..9802c94db 100644
--- a/src/services/spells.js
+++ b/src/services/spells.js
@@ -95,7 +95,7 @@ export class SpellServices {
 			if (predefined_key) {
 				await SPELLS_REF.child(uid).child(predefined_key).set(spell);
 			} else {
-				newSpell = await SPELLS_REF.child(uid).push(spell);
+				const newSpell = await SPELLS_REF.child(uid).push(spell);
 				spell_key = newSpell.key;
 			}
 
diff --git a/src/store/modules/userContent/spells.js b/src/store/modules/userContent/spells.js
index e4eb56539..0a43be4b3 100644
--- a/src/store/modules/userContent/spells.js
+++ b/src/store/modules/userContent/spells.js
@@ -141,6 +141,7 @@ const spell_actions = {
 				return "Not enough slots";
 			}
 			try {
+				console.log(spell);
 				const search_spell = convert_spell(spell);
 				const id = await services.addSpell(uid, spell, search_spell, predefined_key);
 				commit("SET_SPELL", { id, search_spell });
diff --git a/src/views/UserContent/Spells/EditSpell.vue b/src/views/UserContent/Spells/EditSpell.vue
index d42d8e43d..353adf7e6 100644
--- a/src/views/UserContent/Spells/EditSpell.vue
+++ b/src/views/UserContent/Spells/EditSpell.vue
@@ -163,7 +163,7 @@ export default {
 		},
 		addSpell() {
 			console.log(this.spell);
-			this.add_spell(this.spell)
+			this.add_spell({ spell: this.spell })
 				.then((key) => {
 					// Set the spellId, so we know there is an existing spell
 					// even though we are on the AddSpell route, this we won't create multiple when hitting save again

From 45906ad927de9d1846a6c88de3d9990f13b2901e Mon Sep 17 00:00:00 2001
From: Key <keyroos@gmail.com>
Date: Fri, 2 Jun 2023 15:29:49 +0200
Subject: [PATCH 24/24] Version bump

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d77d7bee5..6d43344d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "harmless_key",
-	"version": "2.14.5",
+	"version": "2.15.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "harmless_key",
-			"version": "2.14.5",
+			"version": "2.15.0",
 			"dependencies": {
 				"@octokit/rest": "^19.0.5",
 				"@quasar/extras": "^1.0.0",
diff --git a/package.json b/package.json
index 34bdb234c..a272bb97b 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "2.14.5",
+	"version": "2.15.0",
 	"name": "harmless_key",
 	"description": "A Dungeons and Dragons Combat Tracker",
 	"productName": "Harmless Key",