From b8c42a2171bd1a09b30a9501bc605561cf6ef9a6 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sat, 1 Jun 2024 15:59:07 +0200
Subject: [PATCH 01/55] Tutorial for build encounter

---
 src/components/demo/TutorialPopover.vue | 131 ++++++++++++++++++++++++
 src/components/encounters/Entities.vue  |  43 +++++++-
 src/components/encounters/index.vue     |  11 +-
 src/css/styles.scss                     |  11 +-
 src/store/index.js                      |   2 +
 src/store/modules/tutorial.js           |  87 ++++++++++++++++
 6 files changed, 278 insertions(+), 7 deletions(-)
 create mode 100644 src/components/demo/TutorialPopover.vue
 create mode 100644 src/store/modules/tutorial.js

diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
new file mode 100644
index 00000000..b57581ce
--- /dev/null
+++ b/src/components/demo/TutorialPopover.vue
@@ -0,0 +1,131 @@
+<template>
+	<q-menu
+		v-model="show"
+		:dark="$store.getters.theme === 'dark'"
+		:anchor="anchor"
+		:self="self"
+		persistent
+		no-parent-event
+	>
+		<hk-card class="tutorial" no-margin>
+			<q-linear-progress size="5" color="info" :value="progress(tutorial, step)" />
+			<div class="p-2">
+				<div class="tutorial__header">
+					{{ steps.indexOf(step) + 1 }}/{{ steps.length }} {{ name }}
+				</div>
+				<div class="tutorial__title">
+					{{ current_step.title }}
+				</div>
+				<p v-html="current_step.description" />
+				<div class="d-flex justify-content-end items-center gap-1">
+					<button class="btn btn-sm bg-yellow black" @click="nextStep(tutorial)">
+						Next <hk-icon icon="fas fa-chevron-right" />
+					</button>
+				</div>
+			</div>
+		</hk-card>
+	</q-menu>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+	name: "TutorialPopover",
+	props: {
+		tutorial: {
+			type: String,
+			default: "run",
+		},
+		step: {
+			type: String,
+		},
+		position: {
+			type: String,
+			default: "bottom",
+		},
+	},
+	data() {
+		return {
+			stepSetter: undefined,
+		};
+	},
+	computed: {
+		...mapGetters("tutorial", [
+			"get_step",
+			"get_progress",
+			"progress",
+			"get_order",
+			"get_tutorial",
+		]),
+		current_step() {
+			return this.get_step(this.tutorial, this.step);
+		},
+		anchor() {
+			switch (this.position) {
+				case "bottom":
+					return "bottom middle";
+				case "top":
+					return "top middle";
+				case "left":
+					return "center left";
+				case "right":
+					return "center right";
+				default:
+					return "bottom middle";
+			}
+		},
+		self() {
+			switch (this.position) {
+				case "bottom":
+					return "top middle";
+				case "top":
+					return "bottom middle";
+				case "left":
+					return "center right";
+				case "right":
+					return "center left";
+				default:
+					return "top middle";
+			}
+		},
+		show: {
+			get() {
+				return this.stepSetter !== undefined
+					? this.stepSetter
+					: this.get_progress(this.tutorial) === this.step;
+			},
+			set(newVal) {
+				this.stepSetter = newVal;
+			},
+		},
+		name() {
+			return this.get_tutorial(this.tutorial)?.name;
+		},
+		steps() {
+			return this.get_order(this.tutorial) || [];
+		},
+	},
+	methods: {
+		...mapActions("tutorial", ["nextStep"]),
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.tutorial {
+	max-width: 200px;
+	font-size: 14px;
+	line-height: normal;
+	background: $yellow-light;
+	color: $black;
+	border: none;
+
+	&__header {
+		margin-bottom: 10px;
+	}
+	&__title {
+		font-weight: bold;
+	}
+}
+</style>
diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index d1448e2d..dcbde1e4 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -45,9 +45,15 @@
 			</p>
 			<hr />
 		</template>
-		<button v-else class="btn btn-block mb-3" @click="player_dialog = true">
+		<button
+			v-else
+			class="btn btn-block mb-3"
+			:class="{ 'step-highlight': get_progress('build') === 'add-players' }"
+			@click="player_dialog = true"
+		>
 			<i class="fas fa-user-plus" aria-hidden="true" />
 			Add players
+			<TutorialPopover tutorial="build" step="add-players" />
 		</button>
 
 		<!-- MONSTERS -->
@@ -149,6 +155,12 @@
 											Add with rolled HP
 										</q-tooltip>
 									</a>
+									<TutorialPopover
+										v-if="props.rowIndex === 0"
+										tutorial="build"
+										position="right"
+										step="add-monsters"
+									/>
 								</div>
 							</div>
 							<template v-else>
@@ -247,7 +259,11 @@
 							:props="props"
 							:auto-width="col.name !== 'name'"
 						>
-							<div v-if="col.name === 'actions'" class="monster-actions">
+							<div
+								v-if="col.name === 'actions'"
+								class="monster-actions"
+								:class="{ 'step-highlight': get_progress('build') === 'add-monsters' }"
+							>
 								<q-input
 									:dark="$store.getters.theme === 'dark'"
 									filled
@@ -280,6 +296,12 @@
 										Add with rolled HP
 									</q-tooltip>
 								</a>
+								<TutorialPopover
+									v-if="props.rowIndex === 0"
+									tutorial="build"
+									position="right"
+									step="add-monsters"
+								/>
 							</div>
 							<span v-else-if="col.name === 'environment'">
 								{{ col.value?.[0]?.capitalize() }}
@@ -415,8 +437,9 @@ import { mapActions, mapGetters } from "vuex";
 
 import { dice } from "src/mixins/dice.js";
 import { general } from "src/mixins/general.js";
-import ViewMonster from "src/components/compendium/Monster.vue";
 import { uuid } from "src/utils/generalFunctions";
+import ViewMonster from "src/components/compendium/Monster.vue";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "Entities",
@@ -441,6 +464,7 @@ export default {
 	mixins: [general, dice],
 	components: {
 		ViewMonster,
+		TutorialPopover,
 	},
 	data() {
 		return {
@@ -556,6 +580,7 @@ export default {
 	computed: {
 		...mapGetters(["content_count"]),
 		...mapGetters("npcs", ["npcs", "npc_count"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_progress"]),
 		monster_resource: {
 			get() {
 				const resource = this.npc_count ? "custom" : "srd";
@@ -607,6 +632,7 @@ export default {
 		...mapActions("npcs", ["get_npcs", "get_npc"]),
 		...mapActions("players", ["get_players", "get_player"]),
 		...mapActions("encounters", ["add_player_encounter", "add_npc_encounter"]),
+		...mapActions("tutorial", ["nextStep"]),
 		player_avatar(player) {
 			return player.storage_avatar || player.avatar;
 		},
@@ -771,6 +797,11 @@ export default {
 					});
 				} else {
 					this.add_demo_entity(entity);
+
+					// Next step of tutorial
+					if (this.follow_tutorial && this.get_progress("build") === "add-monsters") {
+						this.nextStep("build");
+					}
 				}
 			}
 
@@ -800,6 +831,11 @@ export default {
 					};
 					this.add_demo_entity(entity);
 					this.player = {};
+
+					// Next step of tutorial
+					if (this.follow_tutorial && this.get_progress("build") === "add-players") {
+						this.nextStep("build");
+					}
 				}
 			}
 
@@ -870,6 +906,7 @@ input[type="number"]::-webkit-inner-spin-button {
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
+	border-radius: $border-radius;
 
 	.multi_nr {
 		width: 45px;
diff --git a/src/components/encounters/index.vue b/src/components/encounters/index.vue
index 0e089f68..f63bb69a 100644
--- a/src/components/encounters/index.vue
+++ b/src/components/encounters/index.vue
@@ -15,9 +15,15 @@
 			<h1 class="written mb-0 flex-grow truncate">
 				{{ demo ? "Encounter builder for D&D" : encounter.name }}
 			</h1>
-			<button class="btn" :disabled="!validEncounter" @click="runEncounter">
+			<button
+				class="btn"
+				:disabled="!validEncounter"
+				:class="{ 'step-highlight': get_progress('build') === 'start' }"
+				@click="runEncounter"
+			>
 				{{ demo ? "Run" : "Test" }} encounter
 				<i class="fas ml-2" :class="demo ? 'fa-sword rotate' : 'fa-flask'" aria-hidden="true" />
+				<TutorialPopover tutorial="build" step="start" />
 			</button>
 		</div>
 		<div class="wrapper">
@@ -80,6 +86,7 @@ import Overview from "./Overview.vue";
 import General from "./General.vue";
 import { mapGetters, mapActions } from "vuex";
 import SignedIn from "src/components/userContent/SignedIn.vue";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "EditEncounter",
@@ -90,6 +97,7 @@ export default {
 		Overview,
 		General,
 		SignedIn,
+		TutorialPopover,
 	},
 	data() {
 		return {
@@ -108,6 +116,7 @@ export default {
 	computed: {
 		...mapGetters(["overencumbered"]),
 		...mapGetters("encounters", ["demo_encounter"]),
+		...mapGetters("tutorial", ["get_progress"]),
 		tabs() {
 			let tabs = {
 				entities: { name: "entities", label: "Entities", icon: "fas fa-helmet-battle" },
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 6d966234..a9432c46 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -865,6 +865,11 @@ html body {
 		}
 	}
 
+	.step-highlight {
+		outline: $yellow-light solid 2px;
+		outline-offset: 2px;
+	}
+
 	.hk-layout {
 		min-height: calc(100vh - #{$header-height});
 		display: grid;
@@ -984,9 +989,9 @@ html body {
 
 	.truncate-cell {
 		white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 1px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		max-width: 1px;
 	}
 	.truncate {
 		white-space: nowrap;
diff --git a/src/store/index.js b/src/store/index.js
index 150caf5d..44c4ddb2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import general from "./modules/general";
+import tutorial from "./modules/tutorial";
 import tips from "./modules/tips";
 import { run_encounter } from "./modules/runEncounter";
 import user from "./modules/user";
@@ -33,6 +34,7 @@ export default function () {
 	return new Vuex.Store({
 		modules: {
 			general: general,
+			tutorial: tutorial,
 			tips: tips,
 			user: user,
 			encounter: run_encounter,
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
new file mode 100644
index 00000000..3f6f2636
--- /dev/null
+++ b/src/store/modules/tutorial.js
@@ -0,0 +1,87 @@
+import Vue from "vue";
+
+const tutorial_state = () => ({
+	follow_tutorial: true,
+	build: {
+		name: "Build encounter",
+		steps: {
+			"add-players": {
+				title: "Add players",
+				description: "Let's start with adding some players to your encounter.",
+			},
+			"add-monsters": {
+				title: "Add monsters",
+				description:
+					"<p>Now let's give those players a challenge by adding some monsters.</p> The plus buttons adds them with average hit point, the D20 button rolls the hit points.",
+			},
+			start: {
+				title: "Ready to go!",
+				description: "If you added at least 1 player and 1 monster, you can start your encounter.",
+			},
+		},
+	},
+	run: {
+		name: "Run encounter",
+		steps: {},
+	},
+	order: {
+		build: ["add-players", "add-monsters", "start"],
+		run: ["player-initiative", "monster-initiative"],
+	},
+	progress: {
+		build: "add-players",
+		run: "player-initiative",
+	},
+});
+
+const tutorial_getters = {
+	follow_tutorial: (state) => {
+		return state.follow_tutorial;
+	},
+	get_tutorial: (state) => (tutorial) => {
+		return state[tutorial];
+	},
+	get_order: (state) => (tutorial) => {
+		return state.order[tutorial];
+	},
+	get_step: (state) => (tutorial, step) => {
+		return state[tutorial]?.steps[step];
+	},
+	get_progress: (state) => (tutorial) => {
+		return state.progress[tutorial];
+	},
+	progress: (state) => (tutorial, step) => {
+		const order = state.order[tutorial];
+		const index = order?.indexOf(step) || 0;
+		return (index + 1) / order?.length;
+	},
+};
+
+const tutorial_actions = {
+	stopTutorial({ commit }) {
+		commit("STOP_TUTORIAL");
+	},
+	nextStep({ state, commit }, tutorial) {
+		const order = state.order[tutorial];
+		const index = parseInt(order.indexOf(state.progress[tutorial]) + 1);
+		const next = order[index.max(order.length)];
+		commit("SET_PROGRESS", { tutorial, next });
+	},
+};
+
+const tutorial_mutations = {
+	STOP_TUTORIAL(state) {
+		Vue.set(state, "follow_tutorial", false);
+	},
+	SET_PROGRESS(state, { tutorial, next }) {
+		Vue.set(state.progress, tutorial, next);
+	},
+};
+
+export default {
+	namespaced: true,
+	state: tutorial_state,
+	getters: tutorial_getters,
+	actions: tutorial_actions,
+	mutations: tutorial_mutations,
+};

From af866ddc8759bc06b5d1d676f091ed681d9b6364 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 7 Jun 2024 11:27:50 +0200
Subject: [PATCH 02/55] Started with tutorial overview

---
 src/components/demo/TutorialPopover.vue | 24 +++++++--
 src/components/drawers/Tutorial.vue     | 65 +++++++++++++++++++++++++
 src/components/encounters/Entities.vue  | 13 +++--
 src/components/encounters/index.vue     | 45 ++++++++++++-----
 4 files changed, 129 insertions(+), 18 deletions(-)
 create mode 100644 src/components/drawers/Tutorial.vue

diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index b57581ce..abcf9147 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -11,14 +11,22 @@
 			<q-linear-progress size="5" color="info" :value="progress(tutorial, step)" />
 			<div class="p-2">
 				<div class="tutorial__header">
-					{{ steps.indexOf(step) + 1 }}/{{ steps.length }} {{ name }}
+					<span> {{ steps.indexOf(step) + 1 }}/{{ steps.length }} {{ name }} </span>
+					<span class="p-1 pointer" @click="stop">
+						<hk-icon icon="fas fa-times-circle" />
+						<q-tooltip anchor="top middle" self="bottom middle">Stop tutorial</q-tooltip>
+					</span>
 				</div>
 				<div class="tutorial__title">
 					{{ current_step.title }}
 				</div>
 				<p v-html="current_step.description" />
 				<div class="d-flex justify-content-end items-center gap-1">
-					<button class="btn btn-sm bg-yellow black" @click="nextStep(tutorial)">
+					<button
+						v-if="steps.indexOf(step) + 1 !== steps.length"
+						class="btn btn-sm bg-yellow black"
+						@click="nextStep(tutorial)"
+					>
 						Next <hk-icon icon="fas fa-chevron-right" />
 					</button>
 				</div>
@@ -52,6 +60,7 @@ export default {
 	},
 	computed: {
 		...mapGetters("tutorial", [
+			"follow_tutorial",
 			"get_step",
 			"get_progress",
 			"progress",
@@ -93,7 +102,7 @@ export default {
 			get() {
 				return this.stepSetter !== undefined
 					? this.stepSetter
-					: this.get_progress(this.tutorial) === this.step;
+					: this.follow_tutorial && this.get_progress(this.tutorial) === this.step;
 			},
 			set(newVal) {
 				this.stepSetter = newVal;
@@ -107,7 +116,11 @@ export default {
 		},
 	},
 	methods: {
-		...mapActions("tutorial", ["nextStep"]),
+		...mapActions("tutorial", ["nextStep", "stopTutorial"]),
+		stop() {
+			this.stopTutorial();
+			this.show = false;
+		},
 	},
 };
 </script>
@@ -123,6 +136,9 @@ export default {
 
 	&__header {
 		margin-bottom: 10px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 	}
 	&__title {
 		font-weight: bold;
diff --git a/src/components/drawers/Tutorial.vue b/src/components/drawers/Tutorial.vue
new file mode 100644
index 00000000..9d73c784
--- /dev/null
+++ b/src/components/drawers/Tutorial.vue
@@ -0,0 +1,65 @@
+<template>
+	<div>
+		<q-stepper v-model="current_step" :dark="$store.getters.theme === 'dark'" vertical animated>
+			<q-step
+				v-for="({ name, description }, i) in steps"
+				:name="i"
+				:title="name"
+				done-icon="fas fa-check white"
+				done-color="positive"
+				:done="step > i"
+				:key="`step-${i}`"
+			>
+				<div v-html="description" />
+				<q-stepper-navigation>
+					<q-btn color="primary" label="Show me" no-caps />
+				</q-stepper-navigation>
+			</q-step>
+		</q-stepper>
+	</div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+	name: "TutorialPopover",
+	props: {
+		data: {
+			type: String,
+			default: "run",
+		},
+	},
+	data() {
+		return {
+			tutorial: this.data,
+			stepSetter: undefined,
+		};
+	},
+	computed: {
+		...mapGetters("tutorial", [
+			"follow_tutorial",
+			"get_step",
+			"get_progress",
+			"progress",
+			"get_order",
+			"get_tutorial",
+		]),
+		current_step() {
+			return this.get_step(this.tutorial, this.step);
+		},
+		steps() {
+			return this.get_tutorial(this.tutorial);
+		},
+	},
+	methods: {
+		...mapActions("tutorial", ["nextStep", "stopTutorial"]),
+		stop() {
+			this.stopTutorial();
+			this.show = false;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index dcbde1e4..cd9879c1 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -48,7 +48,7 @@
 		<button
 			v-else
 			class="btn btn-block mb-3"
-			:class="{ 'step-highlight': get_progress('build') === 'add-players' }"
+			:class="{ 'step-highlight': follow_tutorial && get_progress('build') === 'add-players' }"
 			@click="player_dialog = true"
 		>
 			<i class="fas fa-user-plus" aria-hidden="true" />
@@ -122,7 +122,12 @@
 								v-else-if="col.name === 'actions'"
 								class="text-right d-flex justify-content-between"
 							>
-								<div class="monster-actions">
+								<div
+									class="monster-actions"
+									:class="{
+										'step-highlight': follow_tutorial && get_progress('build') === 'add-monsters',
+									}"
+								>
 									<q-input
 										:dark="$store.getters.theme === 'dark'"
 										filled
@@ -262,7 +267,9 @@
 							<div
 								v-if="col.name === 'actions'"
 								class="monster-actions"
-								:class="{ 'step-highlight': get_progress('build') === 'add-monsters' }"
+								:class="{
+									'step-highlight': follow_tutorial && get_progress('build') === 'add-monsters',
+								}"
 							>
 								<q-input
 									:dark="$store.getters.theme === 'dark'"
diff --git a/src/components/encounters/index.vue b/src/components/encounters/index.vue
index f63bb69a..f4029b6e 100644
--- a/src/components/encounters/index.vue
+++ b/src/components/encounters/index.vue
@@ -15,16 +15,38 @@
 			<h1 class="written mb-0 flex-grow truncate">
 				{{ demo ? "Encounter builder for D&D" : encounter.name }}
 			</h1>
-			<button
-				class="btn"
-				:disabled="!validEncounter"
-				:class="{ 'step-highlight': get_progress('build') === 'start' }"
-				@click="runEncounter"
-			>
-				{{ demo ? "Run" : "Test" }} encounter
-				<i class="fas ml-2" :class="demo ? 'fa-sword rotate' : 'fa-flask'" aria-hidden="true" />
-				<TutorialPopover tutorial="build" step="start" />
-			</button>
+			<div>
+				<transition
+					v-if="demo"
+					name="slide"
+					enter-active-class="animated animate__slideInRight"
+					leave-active-class="animated animate__slideOutRight"
+				>
+					<button
+						v-show="!follow_tutorial"
+						class="btn bg-yellow-light black mr-2"
+						@click="
+							setDrawer({
+								show: true,
+								type: 'drawers/Tutorial',
+								data: 'build',
+							})
+						"
+					>
+						<hk-icon icon="fas fa-exclamation" />
+					</button>
+				</transition>
+				<button
+					class="btn"
+					:disabled="!validEncounter"
+					:class="{ 'step-highlight': follow_tutorial && get_progress('build') === 'start' }"
+					@click="runEncounter"
+				>
+					{{ demo ? "Run" : "Test" }} encounter
+					<i class="fas ml-2" :class="demo ? 'fa-sword rotate' : 'fa-flask'" aria-hidden="true" />
+					<TutorialPopover tutorial="build" step="start" />
+				</button>
+			</div>
 		</div>
 		<div class="wrapper">
 			<hk-card>
@@ -116,7 +138,7 @@ export default {
 	computed: {
 		...mapGetters(["overencumbered"]),
 		...mapGetters("encounters", ["demo_encounter"]),
-		...mapGetters("tutorial", ["get_progress"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_progress"]),
 		tabs() {
 			let tabs = {
 				entities: { name: "entities", label: "Entities", icon: "fas fa-helmet-battle" },
@@ -169,6 +191,7 @@ export default {
 		this.loading = false;
 	},
 	methods: {
+		...mapActions(["setDrawer"]),
 		...mapActions("campaigns", ["get_campaign"]),
 		...mapActions("encounters", ["get_encounter", "set_demo_encounter"]),
 		...mapActions("players", ["get_player"]),

From f28b10bdaff930e58dacf24adbc361db1cf91ed9 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 14 Jun 2024 12:50:07 +0200
Subject: [PATCH 03/55] New tutorial setup

---
 src/components/demo/TutorialPopover.vue | 32 ++++------
 src/components/drawers/Tutorial.vue     | 11 +---
 src/components/encounters/Entities.vue  | 18 +++---
 src/components/encounters/index.vue     |  4 +-
 src/store/modules/tutorial.js           | 79 +++++++++++++++----------
 5 files changed, 71 insertions(+), 73 deletions(-)

diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index abcf9147..daad98ca 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -8,25 +8,21 @@
 		no-parent-event
 	>
 		<hk-card class="tutorial" no-margin>
-			<q-linear-progress size="5" color="info" :value="progress(tutorial, step)" />
+			<!-- <q-linear-progress size="5" color="info" :value="progress(tutorial, step)" /> -->
 			<div class="p-2">
-				<div class="tutorial__header">
+				<!-- <div class="tutorial__header">
 					<span> {{ steps.indexOf(step) + 1 }}/{{ steps.length }} {{ name }} </span>
 					<span class="p-1 pointer" @click="stop">
 						<hk-icon icon="fas fa-times-circle" />
 						<q-tooltip anchor="top middle" self="bottom middle">Stop tutorial</q-tooltip>
 					</span>
-				</div>
+				</div> -->
 				<div class="tutorial__title">
 					{{ current_step.title }}
 				</div>
 				<p v-html="current_step.description" />
 				<div class="d-flex justify-content-end items-center gap-1">
-					<button
-						v-if="steps.indexOf(step) + 1 !== steps.length"
-						class="btn btn-sm bg-yellow black"
-						@click="nextStep(tutorial)"
-					>
+					<button class="btn btn-sm bg-yellow black" @click="completeStep(tutorial)">
 						Next <hk-icon icon="fas fa-chevron-right" />
 					</button>
 				</div>
@@ -59,16 +55,10 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters("tutorial", [
-			"follow_tutorial",
-			"get_step",
-			"get_progress",
-			"progress",
-			"get_order",
-			"get_tutorial",
-		]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_current_step", "get_step", "get_tutorial"]),
+		...mapActions(["current"]),
 		current_step() {
-			return this.get_step(this.tutorial, this.step);
+			return this.get_current_step(this.tutorial);
 		},
 		anchor() {
 			switch (this.position) {
@@ -102,7 +92,7 @@ export default {
 			get() {
 				return this.stepSetter !== undefined
 					? this.stepSetter
-					: this.follow_tutorial && this.get_progress(this.tutorial) === this.step;
+					: this.follow_tutorial && this.get_step(this.tutorial, this.step);
 			},
 			set(newVal) {
 				this.stepSetter = newVal;
@@ -111,12 +101,12 @@ export default {
 		name() {
 			return this.get_tutorial(this.tutorial)?.name;
 		},
-		steps() {
-			return this.get_order(this.tutorial) || [];
+		entity_type() {
+			return this.current.entityType === "player" ? "player" : "monster";
 		},
 	},
 	methods: {
-		...mapActions("tutorial", ["nextStep", "stopTutorial"]),
+		...mapActions("tutorial", ["completeStep", "stopTutorial"]),
 		stop() {
 			this.stopTutorial();
 			this.show = false;
diff --git a/src/components/drawers/Tutorial.vue b/src/components/drawers/Tutorial.vue
index 9d73c784..97102c60 100644
--- a/src/components/drawers/Tutorial.vue
+++ b/src/components/drawers/Tutorial.vue
@@ -37,14 +37,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters("tutorial", [
-			"follow_tutorial",
-			"get_step",
-			"get_progress",
-			"progress",
-			"get_order",
-			"get_tutorial",
-		]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step", "get_tutorial"]),
 		current_step() {
 			return this.get_step(this.tutorial, this.step);
 		},
@@ -53,7 +46,7 @@ export default {
 		},
 	},
 	methods: {
-		...mapActions("tutorial", ["nextStep", "stopTutorial"]),
+		...mapActions("tutorial", ["completeStep", "stopTutorial"]),
 		stop() {
 			this.stopTutorial();
 			this.show = false;
diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index cd9879c1..cc71d051 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -48,7 +48,7 @@
 		<button
 			v-else
 			class="btn btn-block mb-3"
-			:class="{ 'step-highlight': follow_tutorial && get_progress('build') === 'add-players' }"
+			:class="{ 'step-highlight': follow_tutorial && get_step('build', 'add-players') }"
 			@click="player_dialog = true"
 		>
 			<i class="fas fa-user-plus" aria-hidden="true" />
@@ -125,7 +125,7 @@
 								<div
 									class="monster-actions"
 									:class="{
-										'step-highlight': follow_tutorial && get_progress('build') === 'add-monsters',
+										'step-highlight': follow_tutorial && get_step('build', 'add-monsters'),
 									}"
 								>
 									<q-input
@@ -268,7 +268,7 @@
 								v-if="col.name === 'actions'"
 								class="monster-actions"
 								:class="{
-									'step-highlight': follow_tutorial && get_progress('build') === 'add-monsters',
+									'step-highlight': follow_tutorial && get_step('build', 'add-monsters'),
 								}"
 							>
 								<q-input
@@ -587,7 +587,7 @@ export default {
 	computed: {
 		...mapGetters(["content_count"]),
 		...mapGetters("npcs", ["npcs", "npc_count"]),
-		...mapGetters("tutorial", ["follow_tutorial", "get_progress"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		monster_resource: {
 			get() {
 				const resource = this.npc_count ? "custom" : "srd";
@@ -639,7 +639,7 @@ export default {
 		...mapActions("npcs", ["get_npcs", "get_npc"]),
 		...mapActions("players", ["get_players", "get_player"]),
 		...mapActions("encounters", ["add_player_encounter", "add_npc_encounter"]),
-		...mapActions("tutorial", ["nextStep"]),
+		...mapActions("tutorial", ["completeStep"]),
 		player_avatar(player) {
 			return player.storage_avatar || player.avatar;
 		},
@@ -806,8 +806,8 @@ export default {
 					this.add_demo_entity(entity);
 
 					// Next step of tutorial
-					if (this.follow_tutorial && this.get_progress("build") === "add-monsters") {
-						this.nextStep("build");
+					if (this.follow_tutorial && this.get_step("build", "add-monsters")) {
+						this.completeStep("build");
 					}
 				}
 			}
@@ -840,8 +840,8 @@ export default {
 					this.player = {};
 
 					// Next step of tutorial
-					if (this.follow_tutorial && this.get_progress("build") === "add-players") {
-						this.nextStep("build");
+					if (this.follow_tutorial && this.get_step("build", "add-players")) {
+						this.completeStep("build");
 					}
 				}
 			}
diff --git a/src/components/encounters/index.vue b/src/components/encounters/index.vue
index f4029b6e..f0a9ed72 100644
--- a/src/components/encounters/index.vue
+++ b/src/components/encounters/index.vue
@@ -39,7 +39,7 @@
 				<button
 					class="btn"
 					:disabled="!validEncounter"
-					:class="{ 'step-highlight': follow_tutorial && get_progress('build') === 'start' }"
+					:class="{ 'step-highlight': follow_tutorial && get_step('build', 'start') }"
 					@click="runEncounter"
 				>
 					{{ demo ? "Run" : "Test" }} encounter
@@ -138,7 +138,7 @@ export default {
 	computed: {
 		...mapGetters(["overencumbered"]),
 		...mapGetters("encounters", ["demo_encounter"]),
-		...mapGetters("tutorial", ["follow_tutorial", "get_progress"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		tabs() {
 			let tabs = {
 				entities: { name: "entities", label: "Entities", icon: "fas fa-helmet-battle" },
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 3f6f2636..11d0428c 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -4,33 +4,55 @@ const tutorial_state = () => ({
 	follow_tutorial: true,
 	build: {
 		name: "Build encounter",
-		steps: {
-			"add-players": {
+		steps: [
+			{
+				key: "add-players",
 				title: "Add players",
 				description: "Let's start with adding some players to your encounter.",
+				completed: false,
 			},
-			"add-monsters": {
+			{
+				key: "add-monsters",
 				title: "Add monsters",
 				description:
 					"<p>Now let's give those players a challenge by adding some monsters.</p> The plus buttons adds them with average hit point, the D20 button rolls the hit points.",
+				completed: false,
 			},
-			start: {
+			{
+				key: "start",
 				title: "Ready to go!",
 				description: "If you added at least 1 player and 1 monster, you can start your encounter.",
+				completed: false,
 			},
-		},
+		],
+	},
+	initiative: {
+		name: "Initiative",
+		steps: [],
 	},
 	run: {
 		name: "Run encounter",
-		steps: {},
-	},
-	order: {
-		build: ["add-players", "add-monsters", "start"],
-		run: ["player-initiative", "monster-initiative"],
-	},
-	progress: {
-		build: "add-players",
-		run: "player-initiative",
+		steps: [
+			{ id: "target", name: "Target", desc: "Select Target", completed: false },
+			{
+				id: "action",
+				branch: {
+					player: {
+						steps: [
+							{ id: "damage-type", name: "Type", desc: "Select Damage Type", completed: false },
+							{ id: "apply", name: "Apply", desc: "Select Apply", completed: false },
+						],
+					},
+					monster: {
+						steps: [
+							{ id: "roll", name: "Roll", desc: "Roll", completed: false },
+							{ id: "apply", name: "Apply", desc: "Apply", completed: false },
+						],
+					},
+				},
+			},
+			{ id: "next", name: "Next", desc: "Next Turn", completed: false },
+		],
 	},
 });
 
@@ -41,19 +63,14 @@ const tutorial_getters = {
 	get_tutorial: (state) => (tutorial) => {
 		return state[tutorial];
 	},
-	get_order: (state) => (tutorial) => {
-		return state.order[tutorial];
-	},
-	get_step: (state) => (tutorial, step) => {
-		return state[tutorial]?.steps[step];
+	get_current_step: (state) => (tutorial) => {
+		return state[tutorial]?.steps.find((step) => !step.completed);
 	},
-	get_progress: (state) => (tutorial) => {
-		return state.progress[tutorial];
+	get_current_step_index: (state) => (tutorial) => {
+		return state[tutorial]?.steps.findIndex((step) => !step.completed);
 	},
-	progress: (state) => (tutorial, step) => {
-		const order = state.order[tutorial];
-		const index = order?.indexOf(step) || 0;
-		return (index + 1) / order?.length;
+	get_step: (_state, getters) => (tutorial, step) => {
+		return getters.get_current_step(tutorial)?.key === step;
 	},
 };
 
@@ -61,11 +78,9 @@ const tutorial_actions = {
 	stopTutorial({ commit }) {
 		commit("STOP_TUTORIAL");
 	},
-	nextStep({ state, commit }, tutorial) {
-		const order = state.order[tutorial];
-		const index = parseInt(order.indexOf(state.progress[tutorial]) + 1);
-		const next = order[index.max(order.length)];
-		commit("SET_PROGRESS", { tutorial, next });
+	completeStep({ commit, getters }, tutorial) {
+		const index = getters.get_current_step_index(tutorial);
+		commit("SET_COMPLETE", { tutorial, index });
 	},
 };
 
@@ -73,8 +88,8 @@ const tutorial_mutations = {
 	STOP_TUTORIAL(state) {
 		Vue.set(state, "follow_tutorial", false);
 	},
-	SET_PROGRESS(state, { tutorial, next }) {
-		Vue.set(state.progress, tutorial, next);
+	SET_COMPLETE(state, { tutorial, index }) {
+		Vue.set(state[tutorial].steps[index], "completed", true);
 	},
 };
 

From 3fd419607d95d6844a0729291de6bff4373090a2 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 14 Jun 2024 13:31:15 +0200
Subject: [PATCH 04/55] Recursive branching function

---
 src/store/modules/tutorial.js | 47 +++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 11d0428c..d9837814 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -33,25 +33,26 @@ const tutorial_state = () => ({
 	run: {
 		name: "Run encounter",
 		steps: [
-			{ id: "target", name: "Target", desc: "Select Target", completed: false },
+			{ key: "target", name: "Target", desc: "Select Target", completed: false },
 			{
-				id: "action",
+				key: "action",
+				completed: false,
 				branch: {
 					player: {
 						steps: [
-							{ id: "damage-type", name: "Type", desc: "Select Damage Type", completed: false },
-							{ id: "apply", name: "Apply", desc: "Select Apply", completed: false },
+							{ key: "damage-type", name: "Type", desc: "Select Damage Type", completed: false },
+							{ key: "apply", name: "Apply", desc: "Select Apply", completed: false },
 						],
 					},
 					monster: {
 						steps: [
-							{ id: "roll", name: "Roll", desc: "Roll", completed: false },
-							{ id: "apply", name: "Apply", desc: "Apply", completed: false },
+							{ key: "roll", name: "Roll", desc: "Roll", completed: false },
+							{ key: "apply", name: "Apply", desc: "Apply", completed: false },
 						],
 					},
 				},
 			},
-			{ id: "next", name: "Next", desc: "Next Turn", completed: false },
+			{ key: "next", name: "Next", desc: "Next Turn", completed: false },
 		],
 	},
 });
@@ -63,9 +64,12 @@ const tutorial_getters = {
 	get_tutorial: (state) => (tutorial) => {
 		return state[tutorial];
 	},
-	get_current_step: (state) => (tutorial) => {
-		return state[tutorial]?.steps.find((step) => !step.completed);
-	},
+	get_current_step:
+		(state) =>
+		(tutorial, active_branch = undefined) => {
+			const steps = state[tutorial].steps;
+			return get_active_step(steps, active_branch);
+		},
 	get_current_step_index: (state) => (tutorial) => {
 		return state[tutorial]?.steps.findIndex((step) => !step.completed);
 	},
@@ -74,6 +78,29 @@ const tutorial_getters = {
 	},
 };
 
+const get_active_step = (steps, active_branch = undefined) => {
+	const active_steps = steps.filter((step) => !step.completed);
+	if (active_steps.length === 0) {
+		return undefined;
+	}
+	// Pop first active step from active steps list;
+	const current_step = active_steps.shift();
+	// Not branching step so return step.
+	if (!current_step.branch) {
+		return current_step;
+	}
+	// Branch
+	if (!current.branch.hasOwnProperty(active_branch)) {
+		return undefined;
+	}
+	const sub_step = get_active_step(current_step.branch[active_branch].steps);
+	if (sub_step) {
+		return sub_step;
+	}
+	// All sub steps are completed so pop next active step.
+	return active_steps.shift();
+};
+
 const tutorial_actions = {
 	stopTutorial({ commit }) {
 		commit("STOP_TUTORIAL");

From 83689660357162e8e2b6ccb348dd2645cdd83e58 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 14 Jun 2024 13:33:08 +0200
Subject: [PATCH 05/55] Set initiative tutorial for players

---
 src/components/combat/initiative/Players.vue | 23 ++++++++++---
 src/components/demo/TutorialPopover.vue      |  1 +
 src/store/modules/tutorial.js                | 36 +++++++++++++++-----
 3 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/components/combat/initiative/Players.vue b/src/components/combat/initiative/Players.vue
index 4ac2636f..c8c05f85 100644
--- a/src/components/combat/initiative/Players.vue
+++ b/src/components/combat/initiative/Players.vue
@@ -27,10 +27,7 @@
 					>
 						<i aria-hidden="true" class="fas fa-pencil"></i>
 					</a>
-					<q-input
-						:dark="$store.getters.theme === 'dark'"
-						filled
-						square
+					<hk-input
 						dense
 						type="number"
 						class="ml-2 player-initiative"
@@ -40,26 +37,42 @@
 						name="playerInit"
 						placeholder="0"
 						:autofocus="index === 0"
+						:class="{ 'step-highlight': follow_tutorial && get_step('initiative', 'players') }"
+						@input="setInitiative(entity.key, entity.initiative)"
 						@focus="$event.target.select()"
-						@input="set_initiative({ key: entity.key, initiative: entity.initiative })"
 					/>
 				</div>
 			</li>
+			<TutorialPopover tutorial="initiative" step="players" position="right" :offset="[10, 0]" />
 		</ul>
 	</div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from "vuex";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "SetInitiativePlayer",
+	components: {
+		TutorialPopover,
+	},
 	props: ["players"],
 	computed: {
 		...mapGetters(["campaignId", "encounterId", "entities", "path"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 	},
 	methods: {
 		...mapActions(["setDrawer", "set_initiative"]),
+		...mapActions("tutorial", ["completeStep"]),
+		setInitiative(key, initiative) {
+			this.set_initiative({ key, initiative });
+
+			// If initiative has been set for all players, complete the tutorial step
+			if (!this.players.find((player) => !player.initiative)) {
+				this.completeStep("initiative");
+			}
+		},
 	},
 };
 </script>
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index daad98ca..d20a3106 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -1,6 +1,7 @@
 <template>
 	<q-menu
 		v-model="show"
+		v-bind="$attrs"
 		:dark="$store.getters.theme === 'dark'"
 		:anchor="anchor"
 		:self="self"
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 11d0428c..f0350154 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -28,30 +28,50 @@ const tutorial_state = () => ({
 	},
 	initiative: {
 		name: "Initiative",
-		steps: [],
+		steps: [
+			{
+				key: "players",
+				title: "Player initiative",
+				description:
+					"<p>Your players will want to roll their own initiative, therefore we input it manually here.</p> Use tab to skip to the next player.",
+				completed: false,
+			},
+			{
+				key: "monsters",
+				title: "Monster initiative",
+				description: "Monster initiative can be rolled individually or all at once with one click.",
+				completed: false,
+			},
+			{
+				key: "start",
+				title: "Start combat!",
+				description: "With the turn order decided, you can start the encounter!",
+				completed: false,
+			},
+		],
 	},
 	run: {
 		name: "Run encounter",
 		steps: [
-			{ id: "target", name: "Target", desc: "Select Target", completed: false },
+			{ key: "target", name: "Target", desc: "Select Target", completed: false },
 			{
-				id: "action",
+				key: "action",
 				branch: {
 					player: {
 						steps: [
-							{ id: "damage-type", name: "Type", desc: "Select Damage Type", completed: false },
-							{ id: "apply", name: "Apply", desc: "Select Apply", completed: false },
+							{ key: "damage-type", name: "Type", desc: "Select Damage Type", completed: false },
+							{ key: "apply", name: "Apply", desc: "Select Apply", completed: false },
 						],
 					},
 					monster: {
 						steps: [
-							{ id: "roll", name: "Roll", desc: "Roll", completed: false },
-							{ id: "apply", name: "Apply", desc: "Apply", completed: false },
+							{ key: "roll", name: "Roll", desc: "Roll", completed: false },
+							{ key: "apply", name: "Apply", desc: "Apply", completed: false },
 						],
 					},
 				},
 			},
-			{ id: "next", name: "Next", desc: "Next Turn", completed: false },
+			{ key: "next", name: "Next", desc: "Next Turn", completed: false },
 		],
 	},
 });

From 6a7d1acb962304b330eb2ddc7c03cf3b7952a667 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 14 Jun 2024 15:15:54 +0200
Subject: [PATCH 06/55] Finish set initiative tutorial

---
 src/components/combat/Turns.vue              |  9 ++-
 src/components/combat/initiative/NPCs.vue    | 59 ++++++++++++++------
 src/components/combat/initiative/Players.vue |  5 +-
 src/components/combat/initiative/index.vue   |  8 ++-
 src/components/encounters/Entities.vue       |  4 +-
 src/components/encounters/index.vue          |  2 +-
 6 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index ab235980..905fd7c2 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -226,8 +226,9 @@
 				</span>
 				<button
 					class="btn ml-2"
-					@click="startEncounter()"
+					:class="{ 'step-highlight': follow_tutorial && get_step('initiative', 'start') }"
 					v-shortkey="['shift', 'arrowright']"
+					@click="startEncounter()"
 					@shortkey="startEncounter()"
 				>
 					Start
@@ -235,6 +236,7 @@
 						encounter <i aria-hidden="true" class="fas fa-arrow-right" />
 					</span>
 					<q-tooltip anchor="top middle" self="center middle">Start [shift] + [>]</q-tooltip>
+					<TutorialPopover tutorial="initiative" step="start" :offset="[0, 10]" />
 				</button>
 			</template>
 		</div>
@@ -245,9 +247,13 @@
 import { mapActions, mapGetters } from "vuex";
 import { remindersMixin } from "src/mixins/reminders";
 import { audio } from "src/mixins/audio";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "Turns",
+	components: {
+		TutorialPopover,
+	},
 	mixins: [remindersMixin, audio],
 	props: ["active_len", "current", "next", "settings"],
 	data() {
@@ -257,6 +263,7 @@ export default {
 	},
 	computed: {
 		...mapGetters(["encounter", "broadcast", "requests", "test", "demo"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		timer() {
 			return this.settings ? this.settings.timer : 0;
 		},
diff --git a/src/components/combat/initiative/NPCs.vue b/src/components/combat/initiative/NPCs.vue
index 53da1d23..d62a7b84 100644
--- a/src/components/combat/initiative/NPCs.vue
+++ b/src/components/combat/initiative/NPCs.vue
@@ -36,16 +36,13 @@
 						<i aria-hidden="true" class="fas fa-info"></i>
 						<q-tooltip anchor="top middle" self="center middle"> Show info </q-tooltip>
 					</a>
-					<q-input
-						:dark="$store.getters.theme === 'dark'"
-						filled
-						square
+					<hk-input
+						v-model="entity.initiative"
 						dense
 						type="number"
 						class="ml-3"
 						min="0"
 						max="99"
-						v-model="entity.initiative"
 						name="npcInit"
 						@input="set_initiative({ key: entity.key, initiative: entity.initiative })"
 						placeholder="0"
@@ -57,18 +54,28 @@
 								:tooltip="`1d20 + ${calcMod(entity.dexterity)}`"
 								@roll="rollMonster($event.e, entity.key, entity, $event.advantage_disadvantage)"
 							>
-								<a>
+								<a
+									:class="{
+										'step-highlight': follow_tutorial && get_step('initiative', 'monsters'),
+									}"
+								>
 									<q-icon size="small" name="fas fa-dice-d20" />
 								</a>
 							</hk-roll>
 						</template>
-					</q-input>
+					</hk-input>
 				</div>
 			</li>
+			<TutorialPopover tutorial="initiative" step="monsters" position="right" :offset="[10, 0]" />
 		</ul>
 		<hk-roll class="full-width" @roll="selected.length === 0 ? rollAll($event) : rollGroup($event)">
-			<button class="btn btn-block full-width roll-all">
-				<i aria-hidden="true" class="fas fa-dice-d20"></i> Roll
+			<button
+				class="btn btn-block full-width roll-all"
+				:class="{
+					'step-highlight': follow_tutorial && get_step('initiative', 'monsters'),
+				}"
+			>
+				<i aria-hidden="true" class="fas fa-dice-d20" /> Roll
 				{{ selected.length === 0 ? "all" : "selected" }}
 			</button>
 		</hk-roll>
@@ -79,9 +86,13 @@
 import { mapGetters, mapActions } from "vuex";
 import { dice } from "src/mixins/dice.js";
 import { general } from "src/mixins/general.js";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "SetInitiativeNPC",
+	components: {
+		TutorialPopover,
+	},
 	mixins: [general, dice],
 	props: ["npcs"],
 	data() {
@@ -92,12 +103,14 @@ export default {
 	},
 	computed: {
 		...mapGetters(["encounterId", "broadcast"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		share() {
 			return (this.broadcast.shares && this.broadcast.shares.includes("initiative_rolls")) || false;
 		},
 	},
 	methods: {
 		...mapActions(["setDrawer", "set_initiative"]),
+		...mapActions("tutorial", ["completeStep"]),
 		rollMonster(e, key, entity, advantage_disadvantage) {
 			const advantage_object = advantage_disadvantage ? advantage_disadvantage : {};
 			let roll = this.rollD(
@@ -112,10 +125,7 @@ export default {
 				this.share ? { encounter_id: this.encounterId, entity_key: key } : null
 			);
 			entity.initiative = roll.total;
-			this.set_initiative({
-				key: key,
-				initiative: entity.initiative,
-			});
+			this.setInitiative(key, entity.initiative);
 		},
 		rollAll(e) {
 			for (let i in this.npcs) {
@@ -151,13 +161,18 @@ export default {
 				entity = this.npcs[npc_indx];
 				entity.initiative = roll;
 
-				this.set_initiative({
-					key: entity.key,
-					initiative: entity.initiative,
-				});
+				this.setInitiative(entity.key, entity.initiative);
 			}
 			this.selected = [];
 		},
+		setInitiative(key, initiative) {
+			this.set_initiative({ key, initiative });
+
+			// If initiative has been set for all monsters, complete the tutorial step
+			if (!this.npcs.find((npc) => !npc.initiative) && this.get_step("initiative", "monsters")) {
+				this.completeStep("initiative");
+			}
+		},
 	},
 };
 </script>
@@ -173,6 +188,16 @@ ul.entities {
 		.actions {
 			align-items: center;
 			padding: 0;
+
+			a {
+				margin: 0;
+				border-radius: $border-radius;
+				padding: 0 5px;
+
+				i {
+					margin-top: -5px;
+				}
+			}
 		}
 	}
 }
diff --git a/src/components/combat/initiative/Players.vue b/src/components/combat/initiative/Players.vue
index c8c05f85..02546ff1 100644
--- a/src/components/combat/initiative/Players.vue
+++ b/src/components/combat/initiative/Players.vue
@@ -69,7 +69,10 @@ export default {
 			this.set_initiative({ key, initiative });
 
 			// If initiative has been set for all players, complete the tutorial step
-			if (!this.players.find((player) => !player.initiative)) {
+			if (
+				!this.players.find((player) => !player.initiative) &&
+				this.get_step("initiative", "players")
+			) {
 				this.completeStep("initiative");
 			}
 		},
diff --git a/src/components/combat/initiative/index.vue b/src/components/combat/initiative/index.vue
index 75deab26..9d08837b 100644
--- a/src/components/combat/initiative/index.vue
+++ b/src/components/combat/initiative/index.vue
@@ -131,7 +131,10 @@
 				<NPCs :npcs="_npcs" />
 			</q-tab-panel>
 			<q-tab-panel name="overview">
-				<a class="btn btn-block mb-3" @click="set_turn({ turn: 0, round: 1 })"> Start encounter </a>
+				<a class="btn btn-block mb-3" @click="set_turn({ turn: 0, round: 1 })">
+					Start encounter
+					<TutorialPopover tutorial="initiative" step="start" :offset="[0, 10]" />
+				</a>
 				<Overview :active="_active" :idle="_idle" />
 			</q-tab-panel>
 		</q-tab-panels>
@@ -146,6 +149,7 @@ import Turns from "src/components/combat/Turns.vue";
 import Players from "./Players.vue";
 import NPCs from "./NPCs.vue";
 import Overview from "./Overview.vue";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "SetInitiative",
@@ -155,6 +159,7 @@ export default {
 		Players,
 		NPCs,
 		Overview,
+		TutorialPopover,
 	},
 	data() {
 		return {
@@ -187,6 +192,7 @@ export default {
 	},
 	computed: {
 		...mapGetters(["campaignId", "encounterId", "encounter", "entities", "path"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		_players: function () {
 			return _.chain(this.entities)
 				.filter(function (entity, key) {
diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index cc71d051..d216b7b2 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -53,7 +53,7 @@
 		>
 			<i class="fas fa-user-plus" aria-hidden="true" />
 			Add players
-			<TutorialPopover tutorial="build" step="add-players" />
+			<TutorialPopover tutorial="build" step="add-players" :offset="[0, 10]" />
 		</button>
 
 		<!-- MONSTERS -->
@@ -165,6 +165,7 @@
 										tutorial="build"
 										position="right"
 										step="add-monsters"
+										:offset="[10, 0]"
 									/>
 								</div>
 							</div>
@@ -308,6 +309,7 @@
 									tutorial="build"
 									position="right"
 									step="add-monsters"
+									:offset="[10, 0]"
 								/>
 							</div>
 							<span v-else-if="col.name === 'environment'">
diff --git a/src/components/encounters/index.vue b/src/components/encounters/index.vue
index f0a9ed72..2c3c3a9c 100644
--- a/src/components/encounters/index.vue
+++ b/src/components/encounters/index.vue
@@ -44,7 +44,7 @@
 				>
 					{{ demo ? "Run" : "Test" }} encounter
 					<i class="fas ml-2" :class="demo ? 'fa-sword rotate' : 'fa-flask'" aria-hidden="true" />
-					<TutorialPopover tutorial="build" step="start" />
+					<TutorialPopover tutorial="build" step="start" :offset="[0, 10]" />
 				</button>
 			</div>
 		</div>

From 4fd9ea6d90978b7d4515ccc48b6053c56f997e8b Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 14 Jun 2024 15:25:12 +0200
Subject: [PATCH 07/55] Tutorial only in demo

---
 src/components/combat/Turns.vue              |  4 ++--
 src/components/combat/initiative/NPCs.vue    |  4 ++--
 src/components/combat/initiative/Players.vue | 14 +++++++++++---
 src/components/encounters/index.vue          |  4 ++--
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index 905fd7c2..9bde3ba6 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -226,7 +226,7 @@
 				</span>
 				<button
 					class="btn ml-2"
-					:class="{ 'step-highlight': follow_tutorial && get_step('initiative', 'start') }"
+					:class="{ 'step-highlight': demo && follow_tutorial && get_step('initiative', 'start') }"
 					v-shortkey="['shift', 'arrowright']"
 					@click="startEncounter()"
 					@shortkey="startEncounter()"
@@ -236,7 +236,7 @@
 						encounter <i aria-hidden="true" class="fas fa-arrow-right" />
 					</span>
 					<q-tooltip anchor="top middle" self="center middle">Start [shift] + [>]</q-tooltip>
-					<TutorialPopover tutorial="initiative" step="start" :offset="[0, 10]" />
+					<TutorialPopover v-if="demo" tutorial="initiative" step="start" :offset="[0, 10]" />
 				</button>
 			</template>
 		</div>
diff --git a/src/components/combat/initiative/NPCs.vue b/src/components/combat/initiative/NPCs.vue
index d62a7b84..fa30aadc 100644
--- a/src/components/combat/initiative/NPCs.vue
+++ b/src/components/combat/initiative/NPCs.vue
@@ -72,7 +72,7 @@
 			<button
 				class="btn btn-block full-width roll-all"
 				:class="{
-					'step-highlight': follow_tutorial && get_step('initiative', 'monsters'),
+					'step-highlight': demo && follow_tutorial && get_step('initiative', 'monsters'),
 				}"
 			>
 				<i aria-hidden="true" class="fas fa-dice-d20" /> Roll
@@ -102,7 +102,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters(["encounterId", "broadcast"]),
+		...mapGetters(["encounterId", "broadcast", "demo"]),
 		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		share() {
 			return (this.broadcast.shares && this.broadcast.shares.includes("initiative_rolls")) || false;
diff --git a/src/components/combat/initiative/Players.vue b/src/components/combat/initiative/Players.vue
index 02546ff1..3048ee68 100644
--- a/src/components/combat/initiative/Players.vue
+++ b/src/components/combat/initiative/Players.vue
@@ -37,13 +37,21 @@
 						name="playerInit"
 						placeholder="0"
 						:autofocus="index === 0"
-						:class="{ 'step-highlight': follow_tutorial && get_step('initiative', 'players') }"
+						:class="{
+							'step-highlight': demo && follow_tutorial && get_step('initiative', 'players'),
+						}"
 						@input="setInitiative(entity.key, entity.initiative)"
 						@focus="$event.target.select()"
 					/>
 				</div>
 			</li>
-			<TutorialPopover tutorial="initiative" step="players" position="right" :offset="[10, 0]" />
+			<TutorialPopover
+				v-if="demo"
+				tutorial="initiative"
+				step="players"
+				position="right"
+				:offset="[10, 0]"
+			/>
 		</ul>
 	</div>
 </template>
@@ -59,7 +67,7 @@ export default {
 	},
 	props: ["players"],
 	computed: {
-		...mapGetters(["campaignId", "encounterId", "entities", "path"]),
+		...mapGetters(["campaignId", "encounterId", "entities", "path", "demo"]),
 		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 	},
 	methods: {
diff --git a/src/components/encounters/index.vue b/src/components/encounters/index.vue
index 2c3c3a9c..cea1a498 100644
--- a/src/components/encounters/index.vue
+++ b/src/components/encounters/index.vue
@@ -39,12 +39,12 @@
 				<button
 					class="btn"
 					:disabled="!validEncounter"
-					:class="{ 'step-highlight': follow_tutorial && get_step('build', 'start') }"
+					:class="{ 'step-highlight': demo && follow_tutorial && get_step('build', 'start') }"
 					@click="runEncounter"
 				>
 					{{ demo ? "Run" : "Test" }} encounter
 					<i class="fas ml-2" :class="demo ? 'fa-sword rotate' : 'fa-flask'" aria-hidden="true" />
-					<TutorialPopover tutorial="build" step="start" :offset="[0, 10]" />
+					<TutorialPopover v-if="demo" tutorial="build" step="start" :offset="[0, 10]" />
 				</button>
 			</div>
 		</div>

From 7f699174657fdcd08650b1badd5395153453f030 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 14 Jun 2024 16:06:05 +0200
Subject: [PATCH 08/55] Branched complete steps added

---
 src/components/demo/TutorialPopover.vue | 16 +++---
 src/store/modules/tutorial.js           | 69 +++++++++++++++++++------
 2 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index d20a3106..93d9c3d9 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -19,12 +19,12 @@
 					</span>
 				</div> -->
 				<div class="tutorial__title">
-					{{ current_step.title }}
+					{{ current_step?.title }}
 				</div>
-				<p v-html="current_step.description" />
+				<p v-html="current_step?.description" />
 				<div class="d-flex justify-content-end items-center gap-1">
-					<button class="btn btn-sm bg-yellow black" @click="completeStep(tutorial)">
-						Next <hk-icon icon="fas fa-chevron-right" />
+					<button class="btn btn-sm bg-yellow black" @click="completeStep({ tutorial, branch })">
+						{{ branch }} Next <hk-icon icon="fas fa-chevron-right" />
 					</button>
 				</div>
 			</div>
@@ -45,6 +45,9 @@ export default {
 		step: {
 			type: String,
 		},
+		branch: {
+			type: String,
+		},
 		position: {
 			type: String,
 			default: "bottom",
@@ -59,7 +62,7 @@ export default {
 		...mapGetters("tutorial", ["follow_tutorial", "get_current_step", "get_step", "get_tutorial"]),
 		...mapActions(["current"]),
 		current_step() {
-			return this.get_current_step(this.tutorial);
+			return this.get_current_step(this.tutorial, this.branch);
 		},
 		anchor() {
 			switch (this.position) {
@@ -91,9 +94,10 @@ export default {
 		},
 		show: {
 			get() {
+				console.log("In computed tutorial show", this.step, this.branch);
 				return this.stepSetter !== undefined
 					? this.stepSetter
-					: this.follow_tutorial && this.get_step(this.tutorial, this.step);
+					: this.follow_tutorial && this.get_step(this.tutorial, this.step, this.branch);
 			},
 			set(newVal) {
 				this.stepSetter = newVal;
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index febc169f..9fe58b83 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -53,26 +53,31 @@ const tutorial_state = () => ({
 	run: {
 		name: "Run encounter",
 		steps: [
-			{ key: "target", name: "Target", desc: "Select Target", completed: false },
+			{ key: "target", title: "Target", description: "Select Target", completed: false },
 			{
 				key: "action",
 				completed: false,
 				branch: {
 					player: {
 						steps: [
-							{ key: "damage-type", name: "Type", desc: "Select Damage Type", completed: false },
-							{ key: "apply", name: "Apply", desc: "Select Apply", completed: false },
+							{
+								key: "damage-type",
+								title: "Type",
+								description: "Select Damage Type",
+								completed: false,
+							},
+							{ key: "apply", title: "Apply", description: "Select Apply", completed: false },
 						],
 					},
 					monster: {
 						steps: [
-							{ key: "roll", name: "Roll", desc: "Roll", completed: false },
-							{ key: "apply", name: "Apply", desc: "Apply", completed: false },
+							{ key: "action:roll", title: "Roll", description: "Roll", completed: false },
+							{ key: "action:apply", title: "Apply", description: "Apply", completed: false },
 						],
 					},
 				},
 			},
-			{ key: "next", name: "Next", desc: "Next Turn", completed: false },
+			{ key: "next", title: "Next", description: "Next Turn", completed: false },
 		],
 	},
 });
@@ -90,12 +95,20 @@ const tutorial_getters = {
 			const steps = state[tutorial].steps;
 			return get_active_step(steps, active_branch);
 		},
+	get_current_step_path: (state) => (tutorial, active_branch) => {
+		const steps = state[tutorial].steps;
+		return get_active_step_path(steps, [], active_branch);
+	},
 	get_current_step_index: (state) => (tutorial) => {
 		return state[tutorial]?.steps.findIndex((step) => !step.completed);
 	},
-	get_step: (_state, getters) => (tutorial, step) => {
-		return getters.get_current_step(tutorial)?.key === step;
-	},
+	get_step:
+		(_state, getters) =>
+		(tutorial, step, branch = undefined) => {
+			const current_step = getters.get_current_step(tutorial, branch);
+			const at_step = current_step?.key === step;
+			return at_step;
+		},
 };
 
 const get_active_step = (steps, active_branch = undefined) => {
@@ -110,7 +123,7 @@ const get_active_step = (steps, active_branch = undefined) => {
 		return current_step;
 	}
 	// Branch
-	if (!current.branch.hasOwnProperty(active_branch)) {
+	if (!current_step.branch.hasOwnProperty(active_branch)) {
 		return undefined;
 	}
 	const sub_step = get_active_step(current_step.branch[active_branch].steps);
@@ -121,13 +134,31 @@ const get_active_step = (steps, active_branch = undefined) => {
 	return active_steps.shift();
 };
 
+const get_active_step_path = (steps, path, active_branch = undefined) => {
+	const active_step_index = steps.findIndex((step) => !step.completed);
+	if (active_step_index === undefined) {
+		return undefined;
+	}
+	path = path.concat(active_step_index);
+	const current_step = steps[active_step_index];
+	// Base case
+	if (!current_step.branch) {
+		return path;
+	}
+	// Branch > Recursion
+	if (!current_step.branch.hasOwnProperty(active_branch)) {
+		return undefined;
+	}
+	return get_active_step_path(current_step.branch[active_branch].steps, path);
+};
+
 const tutorial_actions = {
 	stopTutorial({ commit }) {
 		commit("STOP_TUTORIAL");
 	},
-	completeStep({ commit, getters }, tutorial) {
-		const index = getters.get_current_step_index(tutorial);
-		commit("SET_COMPLETE", { tutorial, index });
+	completeStep({ commit, getters }, { tutorial, branch }) {
+		const path = getters.get_current_step_path(tutorial, branch);
+		commit("SET_COMPLETE", { tutorial, path, branch });
 	},
 };
 
@@ -135,8 +166,16 @@ const tutorial_mutations = {
 	STOP_TUTORIAL(state) {
 		Vue.set(state, "follow_tutorial", false);
 	},
-	SET_COMPLETE(state, { tutorial, index }) {
-		Vue.set(state[tutorial].steps[index], "completed", true);
+	SET_COMPLETE(state, { tutorial, path, branch }) {
+		let step_reference = state[tutorial];
+		while (path.length) {
+			if (step_reference.branch) {
+				step_reference = step_reference.branch[branch];
+			}
+			const next_idx = path.shift();
+			step_reference = step_reference.steps[next_idx];
+		}
+		Vue.set(step_reference, "completed", true);
 	},
 };
 

From 529bcbd4cf26b8d62682f05ce0d9af4dbb4c6636 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 14 Jun 2024 16:06:25 +0200
Subject: [PATCH 09/55] Target Tutorial

---
 src/components/combat/Targets.vue | 192 ++++++++++++++++--------------
 1 file changed, 100 insertions(+), 92 deletions(-)

diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index 0b02c128..c8c956b1 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -37,105 +37,112 @@
 				}"
 				@shortkey="cycle_target"
 			>
-				<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 }})
-					</h2>
-					<transition-group
-						:key="group"
-						tag="ul"
-						class="targets"
-						:class="`${group}_targets`"
-						name="group"
-						enter-active-class="animated animate__fadeInUp"
-						leave-active-class="animated animate__fadeOutDown"
-					>
-						<li
-							v-for="(entity, i) in targets"
-							class="d-flex justify-content-between target-li"
-							:key="entity.key"
-							:class="{
-								targeted: targeted.includes(entity.key),
-								top: _active[0].key === entity.key && encounter.turn !== 0,
-							}"
-							tabindex="0"
-							@keydown.space="selectTarget($event, 'single', entity.key)"
+				<div>
+					<TutorialPopover tutorial="run" step="target" />
+
+					<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 }})
+						</h2>
+
+						<transition-group
+							:key="group"
+							tag="ul"
+							class="targets"
+							:class="`${group}_targets`"
+							name="group"
+							enter-active-class="animated animate__fadeInUp"
+							leave-active-class="animated animate__fadeOutDown"
 						>
-							<span
-								class="topinfo d-flex justify-content-between"
-								v-if="group === 'active' && _active[0].key == entity.key && encounter.turn != 0"
+							<li
+								v-for="(entity, i) in targets"
+								class="d-flex justify-content-between target-li"
+								:key="entity.key"
+								:class="{
+									targeted: targeted.includes(entity.key),
+									top: _active[0].key === entity.key && encounter.turn !== 0,
+								}"
+								tabindex="0"
+								@keydown.space="selectTarget($event, 'single', entity.key)"
 							>
-								Top of the round
-								<div>
-									<span class="green" v-if="Object.keys(_addedNextRound).length > 0">
-										+ {{ Object.keys(_addedNextRound).length }}
+								<span
+									class="topinfo d-flex justify-content-between"
+									v-if="group === 'active' && _active[0].key == entity.key && encounter.turn != 0"
+								>
+									Top of the round
+									<div>
+										<span class="green" v-if="Object.keys(_addedNextRound).length > 0">
+											+ {{ Object.keys(_addedNextRound).length }}
+											<q-tooltip anchor="top middle" self="center middle">
+												Added next round
+											</q-tooltip>
+										</span>
+										<span class="red" v-if="Object.keys(_activeDown).length > 0">
+											<span class="neutral-3 mx-1">|</span>- {{ Object.keys(_activeDown).length }}
+											<q-tooltip anchor="top middle" self="center middle">
+												Removed next round
+											</q-tooltip>
+										</span>
+									</div>
+								</span>
+								<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 })"
+								>
+									<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"
+										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" />
 										<q-tooltip anchor="top middle" self="center middle">
-											Added next round
+											Will be added next round
 										</q-tooltip>
-									</span>
-									<span class="red" v-if="Object.keys(_activeDown).length > 0">
-										<span class="neutral-3 mx-1">|</span>- {{ Object.keys(_activeDown).length }}
+									</a>
+									<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" />
 										<q-tooltip anchor="top middle" self="center middle">
-											Removed next round
+											Click to add next round
 										</q-tooltip>
-									</span>
+									</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" />
+										<q-tooltip anchor="top middle" self="center middle"> Add now </q-tooltip>
+									</a>
 								</div>
-							</span>
-
-							<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 })"
-							>
-								<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"
-									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" />
-									<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"
-									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" />
-									<q-tooltip anchor="top middle" self="center middle">
-										Click to add next round
-									</q-tooltip>
+								<a class="options">
+									<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>
-								<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" />
-								<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>
+							</li>
+						</transition-group>
+					</template>
+				</div>
 			</div>
 		</q-scroll-area>
 	</div>
@@ -146,10 +153,11 @@ 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 TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "Targets",
-	components: { TargetItem, TargetMenu },
+	components: { TargetItem, TargetMenu, TutorialPopover },
 	props: ["_active", "_idle"],
 	data() {
 		return {

From 61cf0dd06c1c1ee3307a45ebc13111b81d4bdb13 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 14 Jun 2024 16:06:35 +0200
Subject: [PATCH 10/55] Monster Roll Action tuorial

---
 src/components/combat/actions/Roll.vue | 29 ++++++++++++++++++--------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index 06a2eff0..8ca753d4 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -206,15 +206,24 @@
 											action.action_list[0].rolls.length
 										"
 									>
-										<hk-roll-action
-											:ref="action_index"
-											:action="action"
-											:tooltip="`Roll ${action.name}`"
-											@roll="startRoll(...arguments, action_index, action, type)"
-											:disabled="!checkAvailable(type, action_index, action)"
-										>
-											<span class="roll-button" />
-										</hk-roll-action>
+										<div>
+											<TutorialPopover
+												v-if="action_index == 0"
+												tutorial="run"
+												step="action:roll"
+												branch="monster"
+												position="right"
+											/>
+											<hk-roll-action
+												:ref="action_index"
+												:action="action"
+												:tooltip="`Roll ${action.name}`"
+												@roll="startRoll(...arguments, action_index, action, type)"
+												:disabled="!checkAvailable(type, action_index, action)"
+											>
+												<span class="roll-button" />
+											</hk-roll-action>
+										</div>
 									</q-item-section>
 									<!-- Spend limited actions that can't be rolled -->
 									<q-item-section
@@ -308,12 +317,14 @@ import { damage_type_icons } from "src/utils/generalConstants";
 import { runEncounter } from "src/mixins/runEncounter.js";
 import Projectiles from "./Projectiles";
 import { isNil } from "lodash";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "Roll",
 	mixins: [setHP, runEncounter],
 	components: {
 		Projectiles,
+		TutorialPopover,
 	},
 	props: ["current"],
 	data() {

From 4e346f09ab597c210277037471ae9ab108bd5293 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 14 Jun 2024 16:06:41 +0200
Subject: [PATCH 11/55] Turns tutorial

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

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index 9bde3ba6..8413e96e 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -148,6 +148,7 @@
 				v-shortkey="['shift', 'arrowright']"
 				@shortkey="nextTurn()"
 			>
+				<TutorialPopover tutorial="run" step="next" position="right" />
 				<i aria-hidden="true" class="fas fa-step-forward" />
 				<q-tooltip anchor="top middle" self="center middle">Next turn [shift] + [>]</q-tooltip>
 			</a>

From e53db49333398754818078a09bfccdb2d8bc77eb Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 14 Jun 2024 16:17:57 +0200
Subject: [PATCH 12/55] Stop and continue Tutorial

---
 src/components/combat/Turns.vue              | 20 +++++++++++
 src/components/combat/initiative/NPCs.vue    |  2 +-
 src/components/combat/initiative/Players.vue |  2 +-
 src/components/demo/TutorialPopover.vue      | 23 ++++---------
 src/components/drawers/Tutorial.vue          | 36 +++++++++++++-------
 src/components/encounters/Entities.vue       |  4 +--
 src/store/modules/tutorial.js                | 10 +++---
 7 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index 8413e96e..ca15aae4 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -192,6 +192,26 @@
 				<i class="fas fa-flask mr-1" aria-hidden="true" />
 				Test mode
 			</button>
+			<transition
+				v-if="demo"
+				name="slide"
+				enter-active-class="animated animate__slideInRight"
+				leave-active-class="animated animate__slideOutRight"
+			>
+				<button
+					v-show="!follow_tutorial"
+					class="btn bg-yellow-light black"
+					@click="
+						setDrawer({
+							show: true,
+							type: 'drawers/Tutorial',
+							data: encounter.round > 0 ? 'run' : 'initiative',
+						})
+					"
+				>
+					<hk-icon icon="fas fa-exclamation" />
+				</button>
+			</transition>
 
 			<template v-if="encounter.round > 0">
 				<div
diff --git a/src/components/combat/initiative/NPCs.vue b/src/components/combat/initiative/NPCs.vue
index fa30aadc..ee2ab0b2 100644
--- a/src/components/combat/initiative/NPCs.vue
+++ b/src/components/combat/initiative/NPCs.vue
@@ -170,7 +170,7 @@ export default {
 
 			// If initiative has been set for all monsters, complete the tutorial step
 			if (!this.npcs.find((npc) => !npc.initiative) && this.get_step("initiative", "monsters")) {
-				this.completeStep("initiative");
+				this.completeStep({ tutorial: "initiative" });
 			}
 		},
 	},
diff --git a/src/components/combat/initiative/Players.vue b/src/components/combat/initiative/Players.vue
index 3048ee68..542b81ab 100644
--- a/src/components/combat/initiative/Players.vue
+++ b/src/components/combat/initiative/Players.vue
@@ -81,7 +81,7 @@ export default {
 				!this.players.find((player) => !player.initiative) &&
 				this.get_step("initiative", "players")
 			) {
-				this.completeStep("initiative");
+				this.completeStep({ tutorial: "initiative" });
 			}
 		},
 	},
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 93d9c3d9..d0a0c008 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -11,13 +11,13 @@
 		<hk-card class="tutorial" no-margin>
 			<!-- <q-linear-progress size="5" color="info" :value="progress(tutorial, step)" /> -->
 			<div class="p-2">
-				<!-- <div class="tutorial__header">
-					<span> {{ steps.indexOf(step) + 1 }}/{{ steps.length }} {{ name }} </span>
+				<div class="tutorial__header">
+					<span>{{ name }}</span>
 					<span class="p-1 pointer" @click="stop">
 						<hk-icon icon="fas fa-times-circle" />
 						<q-tooltip anchor="top middle" self="bottom middle">Stop tutorial</q-tooltip>
 					</span>
-				</div> -->
+				</div>
 				<div class="tutorial__title">
 					{{ current_step?.title }}
 				</div>
@@ -92,16 +92,8 @@ export default {
 					return "top middle";
 			}
 		},
-		show: {
-			get() {
-				console.log("In computed tutorial show", this.step, this.branch);
-				return this.stepSetter !== undefined
-					? this.stepSetter
-					: this.follow_tutorial && this.get_step(this.tutorial, this.step, this.branch);
-			},
-			set(newVal) {
-				this.stepSetter = newVal;
-			},
+		show() {
+			return this.follow_tutorial && this.get_step(this.tutorial, this.step, this.branch);
 		},
 		name() {
 			return this.get_tutorial(this.tutorial)?.name;
@@ -111,10 +103,9 @@ export default {
 		},
 	},
 	methods: {
-		...mapActions("tutorial", ["completeStep", "stopTutorial"]),
+		...mapActions("tutorial", ["completeStep", "toggleTutorial"]),
 		stop() {
-			this.stopTutorial();
-			this.show = false;
+			this.toggleTutorial();
 		},
 	},
 };
diff --git a/src/components/drawers/Tutorial.vue b/src/components/drawers/Tutorial.vue
index 97102c60..976de2d1 100644
--- a/src/components/drawers/Tutorial.vue
+++ b/src/components/drawers/Tutorial.vue
@@ -1,18 +1,24 @@
 <template>
 	<div>
+		<button v-if="!follow_tutorial" class="btn btn-block mb-3" @click="toggle">
+			Continue tutorial
+		</button>
+		<h3>{{ full_tutorial.name }}</h3>
 		<q-stepper v-model="current_step" :dark="$store.getters.theme === 'dark'" vertical animated>
 			<q-step
-				v-for="({ name, description }, i) in steps"
+				v-for="({ title, description }, i) in full_tutorial.steps"
 				:name="i"
-				:title="name"
+				:title="title"
 				done-icon="fas fa-check white"
+				icon="fas fa-exclamation white"
+				active-icon="fas fa-exclamation white"
 				done-color="positive"
-				:done="step > i"
+				:done="current_step > i"
 				:key="`step-${i}`"
 			>
 				<div v-html="description" />
 				<q-stepper-navigation>
-					<q-btn color="primary" label="Show me" no-caps />
+					<q-btn color="primary" label="Show me" no-caps @click="toggle" />
 				</q-stepper-navigation>
 			</q-step>
 		</q-stepper>
@@ -37,22 +43,28 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters("tutorial", ["follow_tutorial", "get_step", "get_tutorial"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_current_step_index", "get_tutorial"]),
 		current_step() {
-			return this.get_step(this.tutorial, this.step);
+			return this.get_current_step_index(this.tutorial);
 		},
-		steps() {
+		full_tutorial() {
 			return this.get_tutorial(this.tutorial);
 		},
 	},
 	methods: {
-		...mapActions("tutorial", ["completeStep", "stopTutorial"]),
-		stop() {
-			this.stopTutorial();
-			this.show = false;
+		...mapActions(["setDrawer"]),
+		...mapActions("tutorial", ["completeStep", "toggleTutorial"]),
+		toggle() {
+			this.setDrawer({ show: false });
+			this.toggleTutorial();
 		},
 	},
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.q-stepper {
+	border: none;
+	padding: 0;
+}
+</style>
diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index d216b7b2..2e327188 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -809,7 +809,7 @@ export default {
 
 					// Next step of tutorial
 					if (this.follow_tutorial && this.get_step("build", "add-monsters")) {
-						this.completeStep("build");
+						this.completeStep({ tutorial: "build" });
 					}
 				}
 			}
@@ -843,7 +843,7 @@ export default {
 
 					// Next step of tutorial
 					if (this.follow_tutorial && this.get_step("build", "add-players")) {
-						this.completeStep("build");
+						this.completeStep({ tutorial: "build" });
 					}
 				}
 			}
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 9fe58b83..2954d6a5 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -27,7 +27,7 @@ const tutorial_state = () => ({
 		],
 	},
 	initiative: {
-		name: "Initiative",
+		name: "Setting initiative",
 		steps: [
 			{
 				key: "players",
@@ -153,8 +153,8 @@ const get_active_step_path = (steps, path, active_branch = undefined) => {
 };
 
 const tutorial_actions = {
-	stopTutorial({ commit }) {
-		commit("STOP_TUTORIAL");
+	toggleTutorial({ state, commit }) {
+		commit("SET_TUTORIAL", !state.follow_tutorial);
 	},
 	completeStep({ commit, getters }, { tutorial, branch }) {
 		const path = getters.get_current_step_path(tutorial, branch);
@@ -163,8 +163,8 @@ const tutorial_actions = {
 };
 
 const tutorial_mutations = {
-	STOP_TUTORIAL(state) {
-		Vue.set(state, "follow_tutorial", false);
+	SET_TUTORIAL(state, payload) {
+		Vue.set(state, "follow_tutorial", payload);
 	},
 	SET_COMPLETE(state, { tutorial, path, branch }) {
 		let step_reference = state[tutorial];

From 75c49f2fa028cc27b3cb45b70628ebf572fb6db4 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 14 Jun 2024 17:07:59 +0200
Subject: [PATCH 13/55] Targeting and manual input player tutorial steps

---
 src/components/combat/Targets.vue             | 202 +++++++++---------
 src/components/combat/Turns.vue               |   2 +-
 .../combat/actions/custom/Manual.vue          |  38 +++-
 src/components/demo/TutorialPopover.vue       |   2 +-
 src/components/drawers/Tutorial.vue           |   8 +-
 src/components/encounters/index.vue           |   2 +-
 src/css/styles.scss                           |   2 +-
 src/store/modules/tutorial.js                 |  16 +-
 8 files changed, 157 insertions(+), 115 deletions(-)

diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index c8c956b1..7b31bdab 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -37,112 +37,112 @@
 				}"
 				@shortkey="cycle_target"
 			>
-				<div>
-					<TutorialPopover tutorial="run" step="target" />
+				<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 }})
+					</h2>
 
-					<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 }})
-						</h2>
-
-						<transition-group
-							:key="group"
-							tag="ul"
-							class="targets"
-							:class="`${group}_targets`"
-							name="group"
-							enter-active-class="animated animate__fadeInUp"
-							leave-active-class="animated animate__fadeOutDown"
+					<transition-group
+						:key="group"
+						tag="ul"
+						class="targets"
+						:class="`${group}_targets`"
+						name="group"
+						enter-active-class="animated animate__fadeInUp"
+						leave-active-class="animated animate__fadeOutDown"
+					>
+						<li
+							v-for="(entity, i) in targets"
+							class="d-flex justify-content-between target-li"
+							:key="entity.key"
+							:class="{
+								targeted: targeted.includes(entity.key),
+								top: _active[0].key === entity.key && encounter.turn !== 0,
+								'step-highlight': i > 0 && demo && follow_tutorial && get_step('run', 'target'),
+							}"
+							tabindex="0"
+							@keydown.space="selectTarget($event, 'single', entity.key)"
 						>
-							<li
-								v-for="(entity, i) in targets"
-								class="d-flex justify-content-between target-li"
-								:key="entity.key"
-								:class="{
-									targeted: targeted.includes(entity.key),
-									top: _active[0].key === entity.key && encounter.turn !== 0,
-								}"
-								tabindex="0"
-								@keydown.space="selectTarget($event, 'single', entity.key)"
+							<span
+								class="topinfo d-flex justify-content-between"
+								v-if="group === 'active' && _active[0].key == entity.key && encounter.turn != 0"
 							>
-								<span
-									class="topinfo d-flex justify-content-between"
-									v-if="group === 'active' && _active[0].key == entity.key && encounter.turn != 0"
-								>
-									Top of the round
-									<div>
-										<span class="green" v-if="Object.keys(_addedNextRound).length > 0">
-											+ {{ Object.keys(_addedNextRound).length }}
-											<q-tooltip anchor="top middle" self="center middle">
-												Added next round
-											</q-tooltip>
-										</span>
-										<span class="red" v-if="Object.keys(_activeDown).length > 0">
-											<span class="neutral-3 mx-1">|</span>- {{ Object.keys(_activeDown).length }}
-											<q-tooltip anchor="top middle" self="center middle">
-												Removed next round
-											</q-tooltip>
-										</span>
-									</div>
-								</span>
-								<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 })"
-								>
-									<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"
-										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" />
+								Top of the round
+								<div>
+									<span class="green" v-if="Object.keys(_addedNextRound).length > 0">
+										+ {{ Object.keys(_addedNextRound).length }}
 										<q-tooltip anchor="top middle" self="center middle">
-											Will be added next round
+											Added next round
 										</q-tooltip>
-									</a>
-									<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" />
+									</span>
+									<span class="red" v-if="Object.keys(_activeDown).length > 0">
+										<span class="neutral-3 mx-1">|</span>- {{ Object.keys(_activeDown).length }}
 										<q-tooltip anchor="top middle" self="center middle">
-											Click to add next round
+											Removed 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" />
-										<q-tooltip anchor="top middle" self="center middle"> Add now </q-tooltip>
-									</a>
+									</span>
 								</div>
-								<a class="options">
-									<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>
+							</span>
+							<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 })"
+							>
+								<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"
+									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" />
+									<q-tooltip anchor="top middle" self="center middle">
+										Will be added next round
+									</q-tooltip>
 								</a>
-							</li>
-						</transition-group>
-					</template>
-				</div>
+								<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" />
+									<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" />
+									<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" />
+								<q-popup-proxy
+									:dark="$store.getters.theme === 'dark'"
+									anchor="bottom right"
+									self="top right"
+									:breakpoint="576"
+								>
+									<target-menu :entity="entity" />
+								</q-popup-proxy>
+							</a>
+							<TutorialPopover
+								v-if="group === 'active' && i === 1"
+								tutorial="run"
+								step="target"
+								position="right"
+								:offset="[10, 0]"
+							/>
+						</li>
+					</transition-group>
+				</template>
 			</div>
 		</q-scroll-area>
 	</div>
@@ -175,7 +175,9 @@ export default {
 			"targeted",
 			"userSettings",
 			"test",
+			"demo",
 		]),
+		...mapGetters("tutorial", ["get_step", "follow_tutorial"]),
 		groups() {
 			return [
 				{
@@ -236,6 +238,7 @@ export default {
 			"remove_entity",
 			"add_next_round",
 		]),
+		...mapActions("tutorial", ["completeStep"]),
 		setHidden(key, hidden) {
 			if (key) {
 				this.set_hidden({
@@ -281,6 +284,11 @@ export default {
 				type,
 				key,
 			});
+
+			// When an entity is targeted, complete the tutorial step
+			if (this.get_step("run", "target")) {
+				this.completeStep({ tutorial: "run" });
+			}
 		},
 		cycle_target(event) {
 			const lastSelected = this.targeted[this.targeted.length - 1];
diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index ca15aae4..f157c227 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -205,7 +205,7 @@
 						setDrawer({
 							show: true,
 							type: 'drawers/Tutorial',
-							data: encounter.round > 0 ? 'run' : 'initiative',
+							data: { tutorial: encounter.round > 0 ? 'run' : 'initiative' },
 						})
 					"
 				>
diff --git a/src/components/combat/actions/custom/Manual.vue b/src/components/combat/actions/custom/Manual.vue
index b539bd78..f46bdbb6 100644
--- a/src/components/combat/actions/custom/Manual.vue
+++ b/src/components/combat/actions/custom/Manual.vue
@@ -28,17 +28,23 @@
 						name="Manual Input"
 						min="0"
 						class="manual-input"
-						@keypress="submitManual($event, !invalid)"
+						:class="{
+							'step-highlight':
+								demo && follow_tutorial && get_step('run', 'action:player:manual', 'player'),
+						}"
 						autocomplete="off"
 						:autofocus="autofocus"
 						:error="invalid && validated"
 						:error-message="errors[0]"
+						@keypress="submitManual($event, !invalid)"
 					/>
 					<button
 						class="btn dmg bg-red white"
-						:class="{ disabled: invalid || manualAmount === '' }"
-						@click="setManual('damage', !invalid)"
+						:class="{
+							disabled: invalid || manualAmount === '',
+						}"
 						tabindex="-1"
+						@click="setManual('damage', !invalid)"
 					>
 						Attack
 						<i aria-hidden="true" class="hki-sword-break ml-3" />
@@ -46,7 +52,9 @@
 					</button>
 					<button
 						class="btn heal bg-green white"
-						:class="{ disabled: invalid || manualAmount === '' }"
+						:class="{
+							disabled: invalid || manualAmount === '',
+						}"
 						@click="setManual('healing', !invalid)"
 						tabindex="-1"
 					>
@@ -54,6 +62,12 @@
 						<i aria-hidden="true" class="hki-heal" />
 						<q-tooltip anchor="center right" self="center left">[shift] + [enter]</q-tooltip>
 					</button>
+					<TutorialPopover
+						step="action:player:manual"
+						branch="player"
+						position="right"
+						:offset="[10, 0]"
+					/>
 				</div>
 			</ValidationProvider>
 
@@ -108,12 +122,16 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import { setHP } from "src/mixins/HpManipulations.js";
 import { damage_types, damage_type_icons } from "src/utils/generalConstants";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "Manual",
+	components: {
+		TutorialPopover,
+	},
 	mixins: [setHP],
 	props: ["current", "autofocus"],
 	data() {
@@ -143,7 +161,8 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters(["entities", "targeted"]),
+		...mapGetters(["entities", "targeted", "demo"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		multiplier: {
 			get() {
 				let returnValue = {};
@@ -197,6 +216,7 @@ export default {
 		},
 	},
 	methods: {
+		...mapActions("tutorial", ["completeStep"]),
 		checkDefenses(target) {
 			const entity = JSON.parse(JSON.stringify(this.entities[target]));
 			for (const [key, defense] of Object.entries(this.defenses)) {
@@ -283,6 +303,12 @@ export default {
 				this.crit = false;
 				this.$refs.input.blur();
 			}
+
+			console.log("complete step");
+			// If a value is applied, complete the tutorial step
+			if (this.get_step("run", "action:player:manual", "player")) {
+				this.completeStep({ tutorial: "run", branch: "player" });
+			}
 		},
 	},
 };
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index d0a0c008..e821c283 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -24,7 +24,7 @@
 				<p v-html="current_step?.description" />
 				<div class="d-flex justify-content-end items-center gap-1">
 					<button class="btn btn-sm bg-yellow black" @click="completeStep({ tutorial, branch })">
-						{{ branch }} Next <hk-icon icon="fas fa-chevron-right" />
+						Next <hk-icon icon="fas fa-chevron-right" />
 					</button>
 				</div>
 			</div>
diff --git a/src/components/drawers/Tutorial.vue b/src/components/drawers/Tutorial.vue
index 976de2d1..5e9bad3f 100644
--- a/src/components/drawers/Tutorial.vue
+++ b/src/components/drawers/Tutorial.vue
@@ -32,13 +32,15 @@ export default {
 	name: "TutorialPopover",
 	props: {
 		data: {
-			type: String,
-			default: "run",
+			type: Object,
+			default: () => {
+				return { tutorial: "run" };
+			},
 		},
 	},
 	data() {
 		return {
-			tutorial: this.data,
+			tutorial: this.data.tutorial,
 			stepSetter: undefined,
 		};
 	},
diff --git a/src/components/encounters/index.vue b/src/components/encounters/index.vue
index cea1a498..4f9032df 100644
--- a/src/components/encounters/index.vue
+++ b/src/components/encounters/index.vue
@@ -29,7 +29,7 @@
 							setDrawer({
 								show: true,
 								type: 'drawers/Tutorial',
-								data: 'build',
+								data: { tutorial: 'build' },
 							})
 						"
 					>
diff --git a/src/css/styles.scss b/src/css/styles.scss
index a9432c46..5f676418 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -2284,7 +2284,7 @@ html body {
 
 	// Q-INPUT FIELDS
 	.manual-input {
-		height: 110px;
+		height: 90px;
 		font-size: 50px;
 
 		.q-field {
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 2954d6a5..7cd01512 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -53,7 +53,13 @@ const tutorial_state = () => ({
 	run: {
 		name: "Run encounter",
 		steps: [
-			{ key: "target", title: "Target", description: "Select Target", completed: false },
+			{
+				key: "target",
+				title: "Target entities",
+				description:
+					"<p>Click on an entity to target it.</p> <strong>TIP!</strong> You can select multiple targets at once by holding shift and clicking.",
+				completed: false,
+			},
 			{
 				key: "action",
 				completed: false,
@@ -61,12 +67,12 @@ const tutorial_state = () => ({
 					player: {
 						steps: [
 							{
-								key: "damage-type",
-								title: "Type",
-								description: "Select Damage Type",
+								key: "action:player:manual",
+								title: "Input value",
+								description:
+									"<p>Input the amount of damage or healing you want to apply to the target(s).</p> Use the <strong>Attack</strong> [Enter] button to damage your targets or the <strong>Heal</strong> [Shift + Enter] button to heal them.",
 								completed: false,
 							},
-							{ key: "apply", title: "Apply", description: "Select Apply", completed: false },
 						],
 					},
 					monster: {

From c9f2aa61520bae4361fc7485bffe4da2b16acb77 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 14 Jun 2024 17:32:58 +0200
Subject: [PATCH 14/55] Branch track if started

---
 src/components/combat/actions/Roll.vue |  2 +-
 src/store/modules/tutorial.js          | 28 ++++++++++++++++++++++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index 8ca753d4..2ab1de6d 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -210,7 +210,7 @@
 											<TutorialPopover
 												v-if="action_index == 0"
 												tutorial="run"
-												step="action:roll"
+												step="action:monster:roll"
 												branch="monster"
 												position="right"
 											/>
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 7cd01512..a1b6bd4c 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -77,8 +77,25 @@ const tutorial_state = () => ({
 					},
 					monster: {
 						steps: [
-							{ key: "action:roll", title: "Roll", description: "Roll", completed: false },
-							{ key: "action:apply", title: "Apply", description: "Apply", completed: false },
+							{
+								key: "action:monster:roll",
+								title: "Roll action",
+								description:
+									"<p>Select an action you want to roll and click the <strong>D20</strong> to automatically roll the action.</p>",
+								completed: false,
+							},
+							{
+								key: "action:player:to-hit",
+								title: "Hit or Miss",
+								description: "<p></p>",
+								completed: false,
+							},
+							{
+								key: "action:player:apply",
+								title: "Apply the value",
+								description: "<p>Apply the rolled damage</p>",
+								completed: false,
+							},
 						],
 					},
 				},
@@ -119,6 +136,7 @@ const tutorial_getters = {
 
 const get_active_step = (steps, active_branch = undefined) => {
 	const active_steps = steps.filter((step) => !step.completed);
+	console.log("Active steps:", active_steps);
 	if (active_steps.length === 0) {
 		return undefined;
 	}
@@ -126,10 +144,15 @@ const get_active_step = (steps, active_branch = undefined) => {
 	const current_step = active_steps.shift();
 	// Not branching step so return step.
 	if (!current_step.branch) {
+		console.log("No branch:", current_step);
+
 		return current_step;
 	}
 	// Branch
 	if (!current_step.branch.hasOwnProperty(active_branch)) {
+		if (current_step.started) {
+			return active_steps.shift();
+		}
 		return undefined;
 	}
 	const sub_step = get_active_step(current_step.branch[active_branch].steps);
@@ -176,6 +199,7 @@ const tutorial_mutations = {
 		let step_reference = state[tutorial];
 		while (path.length) {
 			if (step_reference.branch) {
+				Vue.set(step_reference, "started", true);
 				step_reference = step_reference.branch[branch];
 			}
 			const next_idx = path.shift();

From 35b3dd3666882299bf4e5a228dc98799545b07ef Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 14 Jun 2024 17:52:59 +0200
Subject: [PATCH 15/55] path skip started branches

---
 src/store/modules/tutorial.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index a1b6bd4c..eeb76333 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -136,7 +136,6 @@ const tutorial_getters = {
 
 const get_active_step = (steps, active_branch = undefined) => {
 	const active_steps = steps.filter((step) => !step.completed);
-	console.log("Active steps:", active_steps);
 	if (active_steps.length === 0) {
 		return undefined;
 	}
@@ -144,8 +143,6 @@ const get_active_step = (steps, active_branch = undefined) => {
 	const current_step = active_steps.shift();
 	// Not branching step so return step.
 	if (!current_step.branch) {
-		console.log("No branch:", current_step);
-
 		return current_step;
 	}
 	// Branch
@@ -176,6 +173,9 @@ const get_active_step_path = (steps, path, active_branch = undefined) => {
 	}
 	// Branch > Recursion
 	if (!current_step.branch.hasOwnProperty(active_branch)) {
+		if (current_step.started) {
+			return (path[path.length - 1] += 1);
+		}
 		return undefined;
 	}
 	return get_active_step_path(current_step.branch[active_branch].steps, path);

From 8768cd6ad2437e971b23a489c44d1687d95c9817 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sat, 15 Jun 2024 12:47:28 +0200
Subject: [PATCH 16/55] added next step

---
 src/components/combat/Turns.vue               | 22 ++++++++++---------
 .../combat/actions/custom/Manual.vue          |  1 -
 src/components/combat/initiative/NPCs.vue     |  2 +-
 src/store/modules/tutorial.js                 | 16 ++++++++++++--
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index f157c227..dafbe009 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -117,15 +117,13 @@
 		<!-- TURNS & ROUNDS -->
 		<div class="round-info d-flex justify-content-center" v-if="encounter.round > 0">
 			<a
-				class="handler neutral-2"
+				class="handler neutral-2 mr-2 px-2"
 				@click="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 [shift] + [&lt;]</q-tooltip
-				>
+				<q-tooltip anchor="top middle" self="center middle">Previous turn [shift] + [←]</q-tooltip>
 			</a>
 
 			<template v-if="encounter.round">
@@ -143,14 +141,17 @@
 			</template>
 
 			<a
-				class="handler neutral-2"
-				@click="nextTurn()"
+				class="handler neutral-2 ml-2 px-2"
+				:class="{
+					'step-highlight': demo && follow_tutorial && get_step('run', 'next'),
+				}"
 				v-shortkey="['shift', 'arrowright']"
+				@click="nextTurn()"
 				@shortkey="nextTurn()"
 			>
-				<TutorialPopover tutorial="run" step="next" position="right" />
 				<i aria-hidden="true" class="fas fa-step-forward" />
-				<q-tooltip anchor="top middle" self="center middle">Next turn [shift] + [>]</q-tooltip>
+				<q-tooltip anchor="top middle" self="center middle">Next turn [shift] + [→]</q-tooltip>
+				<TutorialPopover step="next" :offset="[0, 10]" />
 			</a>
 		</div>
 		<div v-else>Set Initiative</div>
@@ -256,7 +257,7 @@
 					<span class="ml-1 d-none d-md-inline">
 						encounter <i aria-hidden="true" class="fas fa-arrow-right" />
 					</span>
-					<q-tooltip anchor="top middle" self="center middle">Start [shift] + [>]</q-tooltip>
+					<q-tooltip anchor="top middle" self="center middle">Start [shift] + [->]</q-tooltip>
 					<TutorialPopover v-if="demo" tutorial="initiative" step="start" :offset="[0, 10]" />
 				</button>
 			</template>
@@ -307,6 +308,7 @@ export default {
 			"set_finished",
 			"reset_demo",
 		]),
+		...mapActions("tutorial", ["completeStep"]),
 		startEncounter() {
 			this.set_turn({ turn: 0, round: 1 });
 			this.checkReminders(this.next, "startTurn");
@@ -405,8 +407,8 @@ export default {
 
 	.handler {
 		font-size: 25px;
-		padding: 0 20px;
 		line-height: 40px;
+		border-radius: $border-radius;
 
 		&:hover {
 			color: $blue !important;
diff --git a/src/components/combat/actions/custom/Manual.vue b/src/components/combat/actions/custom/Manual.vue
index f46bdbb6..e122e825 100644
--- a/src/components/combat/actions/custom/Manual.vue
+++ b/src/components/combat/actions/custom/Manual.vue
@@ -304,7 +304,6 @@ export default {
 				this.$refs.input.blur();
 			}
 
-			console.log("complete step");
 			// If a value is applied, complete the tutorial step
 			if (this.get_step("run", "action:player:manual", "player")) {
 				this.completeStep({ tutorial: "run", branch: "player" });
diff --git a/src/components/combat/initiative/NPCs.vue b/src/components/combat/initiative/NPCs.vue
index ee2ab0b2..6d55a26f 100644
--- a/src/components/combat/initiative/NPCs.vue
+++ b/src/components/combat/initiative/NPCs.vue
@@ -56,7 +56,7 @@
 							>
 								<a
 									:class="{
-										'step-highlight': follow_tutorial && get_step('initiative', 'monsters'),
+										'step-highlight': demo && follow_tutorial && get_step('initiative', 'monsters'),
 									}"
 								>
 									<q-icon size="small" name="fas fa-dice-d20" />
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index eeb76333..e440fb39 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -100,7 +100,18 @@ const tutorial_state = () => ({
 					},
 				},
 			},
-			{ key: "next", title: "Next", description: "Next Turn", completed: false },
+			{
+				key: "next",
+				title: "Next turn",
+				description: "When the current entity is finished, go to the next turn.",
+				completed: false,
+			},
+			{
+				key: "opportunity",
+				title: "Opportunity attack",
+				description: "When the current entity is finished, go to the next turn.",
+				completed: false,
+			},
 		],
 	},
 });
@@ -174,7 +185,8 @@ const get_active_step_path = (steps, path, active_branch = undefined) => {
 	// Branch > Recursion
 	if (!current_step.branch.hasOwnProperty(active_branch)) {
 		if (current_step.started) {
-			return (path[path.length - 1] += 1);
+			path[path.length - 1] += 1;
+			return path;
 		}
 		return undefined;
 	}

From bff4c48da80ace80a0842034076737837408cdbd Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 18 Jun 2024 09:06:04 +0000
Subject: [PATCH 17/55] Bump ws from 6.2.2 to 6.2.3

Bumps [ws](https://github.com/websockets/ws) from 6.2.2 to 6.2.3.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](https://github.com/websockets/ws/compare/6.2.2...6.2.3)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9fbc3774..06dc96ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19912,9 +19912,9 @@
 			}
 		},
 		"node_modules/webpack-dev-server/node_modules/ws": {
-			"version": "6.2.2",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-			"integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+			"integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
 			"dev": true,
 			"dependencies": {
 				"async-limiter": "~1.0.0"
@@ -21013,9 +21013,9 @@
 			}
 		},
 		"node_modules/ws": {
-			"version": "7.5.9",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-			"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+			"version": "7.5.10",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
 			"dev": true,
 			"engines": {
 				"node": ">=8.3.0"
@@ -37176,9 +37176,9 @@
 					}
 				},
 				"ws": {
-					"version": "6.2.2",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-					"integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+					"version": "6.2.3",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+					"integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
 					"dev": true,
 					"requires": {
 						"async-limiter": "~1.0.0"
@@ -37732,9 +37732,9 @@
 			}
 		},
 		"ws": {
-			"version": "7.5.9",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-			"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+			"version": "7.5.10",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
 			"dev": true,
 			"requires": {}
 		},

From ba7a4b5cd77ba8a67fd253aa1287e7876987f5a2 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 18 Jun 2024 09:06:06 +0000
Subject: [PATCH 18/55] Bump @grpc/grpc-js from 1.9.14 to 1.10.9

Bumps [@grpc/grpc-js](https://github.com/grpc/grpc-node) from 1.9.14 to 1.10.9.
- [Release notes](https://github.com/grpc/grpc-node/releases)
- [Commits](https://github.com/grpc/grpc-node/compare/@grpc/grpc-js@1.9.14...@grpc/grpc-js@1.10.9)

---
updated-dependencies:
- dependency-name: "@grpc/grpc-js"
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 64 +++++++++++++++++++++++++++++------------------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9fbc3774..7daea399 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2617,25 +2617,25 @@
 			"dev": true
 		},
 		"node_modules/@grpc/grpc-js": {
-			"version": "1.9.14",
-			"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.14.tgz",
-			"integrity": "sha512-nOpuzZ2G3IuMFN+UPPpKrC6NsLmWsTqSsm66IRfnBt1D4pwTqE27lmbpcPM+l2Ua4gE7PfjRHI6uedAy7hoXUw==",
+			"version": "1.10.9",
+			"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.10.9.tgz",
+			"integrity": "sha512-5tcgUctCG0qoNyfChZifz2tJqbRbXVO9J7X6duFcOjY3HUNCxg5D0ZCK7EP9vIcZ0zRpLU9bWkyCqVCLZ46IbQ==",
 			"dependencies": {
-				"@grpc/proto-loader": "^0.7.8",
-				"@types/node": ">=12.12.47"
+				"@grpc/proto-loader": "^0.7.13",
+				"@js-sdsl/ordered-map": "^4.4.2"
 			},
 			"engines": {
-				"node": "^8.13.0 || >=10.10.0"
+				"node": ">=12.10.0"
 			}
 		},
 		"node_modules/@grpc/grpc-js/node_modules/@grpc/proto-loader": {
-			"version": "0.7.10",
-			"resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.10.tgz",
-			"integrity": "sha512-CAqDfoaQ8ykFd9zqBDn4k6iWT9loLAlc2ETmDFS9JCD70gDcnA4L3AFEo2iV7KyAtAAHFW9ftq1Fz+Vsgq80RQ==",
+			"version": "0.7.13",
+			"resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.13.tgz",
+			"integrity": "sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==",
 			"dependencies": {
 				"lodash.camelcase": "^4.3.0",
 				"long": "^5.0.0",
-				"protobufjs": "^7.2.4",
+				"protobufjs": "^7.2.5",
 				"yargs": "^17.7.2"
 			},
 			"bin": {
@@ -2664,9 +2664,9 @@
 			"integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
 		},
 		"node_modules/@grpc/grpc-js/node_modules/protobufjs": {
-			"version": "7.2.6",
-			"resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.6.tgz",
-			"integrity": "sha512-dgJaEDDL6x8ASUZ1YqWciTRrdOuYNzoOf27oHNfdyvKqHr5i0FV7FSLU+aIeFjyFgVxrpTOtQUi0BLLBymZaBw==",
+			"version": "7.3.2",
+			"resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.3.2.tgz",
+			"integrity": "sha512-RXyHaACeqXeqAKGLDl68rQKbmObRsTIn4TYVUUug1KfS47YWCo5MacGITEryugIgZqORCvJWEk4l449POg5Txg==",
 			"hasInstallScript": true,
 			"dependencies": {
 				"@protobufjs/aspromise": "^1.1.2",
@@ -2834,6 +2834,15 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@js-sdsl/ordered-map": {
+			"version": "4.4.2",
+			"resolved": "https://registry.npmjs.org/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz",
+			"integrity": "sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/js-sdsl"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -22987,22 +22996,22 @@
 			"dev": true
 		},
 		"@grpc/grpc-js": {
-			"version": "1.9.14",
-			"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.14.tgz",
-			"integrity": "sha512-nOpuzZ2G3IuMFN+UPPpKrC6NsLmWsTqSsm66IRfnBt1D4pwTqE27lmbpcPM+l2Ua4gE7PfjRHI6uedAy7hoXUw==",
+			"version": "1.10.9",
+			"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.10.9.tgz",
+			"integrity": "sha512-5tcgUctCG0qoNyfChZifz2tJqbRbXVO9J7X6duFcOjY3HUNCxg5D0ZCK7EP9vIcZ0zRpLU9bWkyCqVCLZ46IbQ==",
 			"requires": {
-				"@grpc/proto-loader": "^0.7.8",
-				"@types/node": ">=12.12.47"
+				"@grpc/proto-loader": "^0.7.13",
+				"@js-sdsl/ordered-map": "^4.4.2"
 			},
 			"dependencies": {
 				"@grpc/proto-loader": {
-					"version": "0.7.10",
-					"resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.10.tgz",
-					"integrity": "sha512-CAqDfoaQ8ykFd9zqBDn4k6iWT9loLAlc2ETmDFS9JCD70gDcnA4L3AFEo2iV7KyAtAAHFW9ftq1Fz+Vsgq80RQ==",
+					"version": "0.7.13",
+					"resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.13.tgz",
+					"integrity": "sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==",
 					"requires": {
 						"lodash.camelcase": "^4.3.0",
 						"long": "^5.0.0",
-						"protobufjs": "^7.2.4",
+						"protobufjs": "^7.2.5",
 						"yargs": "^17.7.2"
 					}
 				},
@@ -23022,9 +23031,9 @@
 					"integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
 				},
 				"protobufjs": {
-					"version": "7.2.6",
-					"resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.6.tgz",
-					"integrity": "sha512-dgJaEDDL6x8ASUZ1YqWciTRrdOuYNzoOf27oHNfdyvKqHr5i0FV7FSLU+aIeFjyFgVxrpTOtQUi0BLLBymZaBw==",
+					"version": "7.3.2",
+					"resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.3.2.tgz",
+					"integrity": "sha512-RXyHaACeqXeqAKGLDl68rQKbmObRsTIn4TYVUUug1KfS47YWCo5MacGITEryugIgZqORCvJWEk4l449POg5Txg==",
 					"requires": {
 						"@protobufjs/aspromise": "^1.1.2",
 						"@protobufjs/base64": "^1.1.2",
@@ -23157,6 +23166,11 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"@js-sdsl/ordered-map": {
+			"version": "4.4.2",
+			"resolved": "https://registry.npmjs.org/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz",
+			"integrity": "sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw=="
+		},
 		"@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

From b8dc2ac2c99a6adcc7a0121a7da37f20723e7566 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Tue, 18 Jun 2024 11:22:44 +0200
Subject: [PATCH 19/55] configure dependabot to target develop branch

---
 .github/dependabot.yml | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .github/dependabot.yml

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000..272baf8f
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,7 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    target-branch: "develop"
\ No newline at end of file

From 7746c5d2ba67bd2a2bfcabe04058af954b52c3f0 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 21 Jun 2024 14:29:59 +0200
Subject: [PATCH 20/55] Complete monster action tutorial

---
 src/components/combat/actions/Roll.vue        |  26 +-
 src/components/drawers/Tutorial.vue           |   6 +-
 src/components/encounters/General.vue         |   4 +-
 .../hk-components/hk-rolls/hk-single-roll.vue | 295 ++++++++++++------
 src/store/modules/tutorial.js                 |  35 ++-
 5 files changed, 255 insertions(+), 111 deletions(-)

diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index 2ab1de6d..c43e86df 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -197,7 +197,6 @@
 										</q-item-label>
 									</q-item-section>
 									<q-item-section
-										avatar
 										v-if="
 											action.action_list &&
 											action.action_list[0] &&
@@ -205,14 +204,24 @@
 											action.action_list[0].rolls &&
 											action.action_list[0].rolls.length
 										"
+										avatar
 									>
-										<div>
+										<div
+											class="roll-wrapper"
+											:class="{
+												'step-highlight':
+													demo &&
+													follow_tutorial &&
+													get_step('run', 'action:monster:roll', 'monster'),
+											}"
+										>
 											<TutorialPopover
 												v-if="action_index == 0"
 												tutorial="run"
 												step="action:monster:roll"
 												branch="monster"
 												position="right"
+												:offset="[20, 0]"
 											/>
 											<hk-roll-action
 												:ref="action_index"
@@ -346,7 +355,8 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters(["encounter", "targeted"]),
+		...mapGetters(["encounter", "targeted", "demo"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		tab: {
 			get() {
 				let tab = "actions";
@@ -369,6 +379,7 @@ export default {
 	methods: {
 		...mapActions(["setActionRoll", "set_limitedUses"]),
 		...mapActions("campaigns", ["set_share"]),
+		...mapActions("tutorial", ["completeStep"]),
 		focusButton(i) {
 			const button = this.$refs[i]?.[0]?.$el;
 			button?.focus();
@@ -401,6 +412,10 @@ export default {
 				option: this.rollObject.option,
 			});
 			this.cancelRoll();
+
+			if (this.get_step("run", "action:monster:roll", "monster")) {
+				this.completeStep({ tutorial: "run", branch: "monster" });
+			}
 		},
 		cancelRoll() {
 			this.projectile_dialog = false;
@@ -467,6 +482,11 @@ h3 {
 .is-disabled {
 	opacity: 0.3;
 }
+.roll-wrapper {
+	border-radius: 50%;
+	padding: 5px;
+	margin: -10px;
+}
 .roll-button {
 	display: inline-block;
 	cursor: pointer;
diff --git a/src/components/drawers/Tutorial.vue b/src/components/drawers/Tutorial.vue
index 5e9bad3f..573e9d75 100644
--- a/src/components/drawers/Tutorial.vue
+++ b/src/components/drawers/Tutorial.vue
@@ -1,8 +1,9 @@
 <template>
 	<div>
-		<button v-if="!follow_tutorial" class="btn btn-block mb-3" @click="toggle">
-			Continue tutorial
+		<button v-if="!follow_tutorial" class="btn bg-neutral-5 mb-3 mr-1" @click="reset">
+			Reset tutorial
 		</button>
+		<button v-if="!follow_tutorial" class="btn mb-3" @click="toggle">Continue tutorial</button>
 		<h3>{{ full_tutorial.name }}</h3>
 		<q-stepper v-model="current_step" :dark="$store.getters.theme === 'dark'" vertical animated>
 			<q-step
@@ -60,6 +61,7 @@ export default {
 			this.setDrawer({ show: false });
 			this.toggleTutorial();
 		},
+		reset() {},
 	},
 };
 </script>
diff --git a/src/components/encounters/General.vue b/src/components/encounters/General.vue
index 54e9da57..b4fe4802 100644
--- a/src/components/encounters/General.vue
+++ b/src/components/encounters/General.vue
@@ -16,8 +16,8 @@
 
 				<template v-if="demo">
 					<p>
-						If you create an account, you can add atmosphere to your encounters, to let players
-						immerse even.
+						If you create an account, you can add atmosphere to your encounters, to let your players
+						immerse even more.
 					</p>
 					<q-list class="mb-3">
 						<q-item class="bg-neutral-8">
diff --git a/src/components/hk-components/hk-rolls/hk-single-roll.vue b/src/components/hk-components/hk-rolls/hk-single-roll.vue
index d1cae046..43592c20 100644
--- a/src/components/hk-components/hk-rolls/hk-single-roll.vue
+++ b/src/components/hk-components/hk-rolls/hk-single-roll.vue
@@ -59,104 +59,133 @@
 					v-for="(action, action_index) in roll.actions"
 					:key="`action-${index}-${action_index}`"
 				>
-					<!-- TO HIT ROLL -->
-					<template v-if="action.toHit">
-						<div class="toHit">
-							<div>
-								To hit:
-								<span class="advantage" v-if="action.toHit.ignored">
-									<span v-html="advantage(action.toHit.advantage_disadvantage)" />
-									<span class="ignored neutral-4">
-										{{ action.toHit.ignored }}
-									</span> </span
-								>{{ action.toHit.throwsTotal }}
-								<template v-if="parseInt(action.toHit.mod) !== 0">
-									{{
-										parseInt(action.toHit.mod) > 0
-											? `+ ${parseInt(action.toHit.mod)}`
-											: `- ${Math.abs(action.toHit.mod)}`
-									}}
-								</template>
-							</div>
-							<transition
-								v-if="action.toHit.throwsTotal == 1"
-								:name="`${roll.key}`"
-								enter-active-class="animated animate__hinge"
-								appear
-							>
-								<div class="total crit red">
-									Crit
-									<b><hk-animated-integer :value="1" onMount /></b>
+					<div>
+						<!-- TO HIT ROLL -->
+						<template v-if="action.toHit">
+							<div class="toHit">
+								<div>
+									To hit:
+									<span class="advantage" v-if="action.toHit.ignored">
+										<span v-html="advantage(action.toHit.advantage_disadvantage)" />
+										<span class="ignored neutral-4">
+											{{ action.toHit.ignored }}
+										</span> </span
+									>{{ action.toHit.throwsTotal }}
+									<template v-if="parseInt(action.toHit.mod) !== 0">
+										{{
+											parseInt(action.toHit.mod) > 0
+												? `+ ${parseInt(action.toHit.mod)}`
+												: `- ${Math.abs(action.toHit.mod)}`
+										}}
+									</template>
 								</div>
-							</transition>
-							<transition
-								v-else-if="action.toHit.throwsTotal == 20"
-								name="heartBeat"
-								enter-active-class="animated animate__heartBeat"
-								appear
-							>
-								<div class="total crit green">
-									Crit
-									<b><hk-animated-integer :value="20" onMount /></b>
+								<transition
+									v-if="action.toHit.throwsTotal == 1"
+									:name="`${roll.key}`"
+									enter-active-class="animated animate__hinge"
+									appear
+								>
+									<div class="total crit red">
+										Crit
+										<b><hk-animated-integer :value="1" onMount /></b>
+									</div>
+								</transition>
+								<transition
+									v-else-if="action.toHit.throwsTotal == 20"
+									name="heartBeat"
+									enter-active-class="animated animate__heartBeat"
+									appear
+								>
+									<div class="total crit green">
+										Crit
+										<b><hk-animated-integer :value="20" onMount /></b>
+									</div>
+								</transition>
+								<div v-else class="total">
+									<hk-animated-integer :value="action.toHit.total" onMount />
 								</div>
-							</transition>
-							<div v-else class="total">
-								<hk-animated-integer :value="action.toHit.total" onMount />
 							</div>
-						</div>
-						<q-btn-toggle
-							v-model="hitOrMiss[action_index]"
-							class="mb-3 neutral-1"
-							spread
-							no-caps
-							:dark="$store.getters.theme === 'dark'"
-							dense
-							toggle-color="primary"
-							color="neutral-9"
-							:options="[
-								{ label: 'Hit', value: 'hit' },
-								{ label: 'Miss', value: 'miss' },
-							]"
-							@keydown.enter="shortkeyApply"
-							@keydown.backspace="removeRoll(index)"
-						/>
-					</template>
+							<q-btn-toggle
+								v-model="hitOrMiss[action_index]"
+								class="mb-3 neutral-1"
+								spread
+								no-caps
+								:dark="$store.getters.theme === 'dark'"
+								dense
+								toggle-color="primary"
+								color="neutral-9"
+								:options="[
+									{ label: 'Hit', value: 'hit' },
+									{ label: 'Miss', value: 'miss' },
+								]"
+								:class="{
+									'step-highlight':
+										demo && follow_tutorial && get_step('run', 'action:monster:to-hit', 'monster'),
+								}"
+								@keydown.enter="shortkeyApply"
+								@keydown.backspace="removeRoll(index)"
+								@click="
+									get_step('run', 'action:monster:to-hit', 'monster')
+										? completeStep({ tutorial: 'run', branch: 'monster' })
+										: null
+								"
+							/>
+						</template>
 
-					<!-- SAVING THROW -->
-					<template v-if="action.type === 'save'">
-						<div class="toHit" v-if="action.save_ability || action.save_dc">
-							<div v-if="action.save_ability">{{ action.save_ability.capitalize() }} save</div>
-							<div v-if="action.save_dc">
-								<span class="neutral-2">DC</span>
-								<span
-									class="total"
-									:class="{
-										green: savingThrowResult[action_index] === 'fail',
-										red: savingThrowResult[action_index] === 'save',
-									}"
-								>
-									{{ action.save_dc }}
-								</span>
+						<!-- SAVING THROW -->
+						<template v-if="action.type === 'save'">
+							<div class="toHit" v-if="action.save_ability || action.save_dc">
+								<div v-if="action.save_ability">{{ action.save_ability.capitalize() }} save</div>
+								<div v-if="action.save_dc">
+									<span class="neutral-2">DC</span>
+									<span
+										class="total"
+										:class="{
+											green: savingThrowResult[action_index] === 'fail',
+											red: savingThrowResult[action_index] === 'save',
+										}"
+									>
+										{{ action.save_dc }}
+									</span>
+								</div>
 							</div>
-						</div>
-						<q-btn-toggle
-							v-model="savingThrowResult[action_index]"
-							class="mb-3 neutral-1"
-							spread
-							no-caps
-							:dark="$store.getters.theme === 'dark'"
-							dense
-							square
-							toggle-color="primary"
-							color="neutral-9"
-							:options="[
-								{ label: 'Fail', value: 'fail' },
-								{ label: 'Save', value: 'save' },
-							]"
-							@keydown.enter="shortkeyApply"
-							@keydown.backspace="removeRoll(index)"
+							<q-btn-toggle
+								v-model="savingThrowResult[action_index]"
+								class="mb-3 neutral-1"
+								spread
+								no-caps
+								:dark="$store.getters.theme === 'dark'"
+								dense
+								square
+								toggle-color="primary"
+								color="neutral-9"
+								:options="[
+									{ label: 'Fail', value: 'fail' },
+									{ label: 'Save', value: 'save' },
+								]"
+								:class="{
+									'step-highlight':
+										demo && follow_tutorial && get_step('run', 'action:monster:to-hit', 'monster'),
+								}"
+								@keydown.enter="shortkeyApply"
+								@keydown.backspace="removeRoll(index)"
+								@click="
+									get_step('run', 'action:monster:to-hit', 'monster')
+										? completeStep({ tutorial: 'run', branch: 'monster' })
+										: null
+								"
+							/>
+						</template>
+
+						<TutorialPopover
+							v-if="index === 0"
+							tutorial="run"
+							step="action:monster:to-hit"
+							branch="monster"
+							position="right"
+							:offset="[15, 0]"
 						/>
-					</template>
+					</div>
 
 					<!-- DAMAGE / HEALING ROLLS -->
 					<q-list :dark="$store.getters.theme === 'dark'" square :class="`accordion`">
@@ -166,6 +195,15 @@
 							:dark="$store.getters.theme === 'dark'"
 							switch-toggle-side
 							:group="`rolled-${index}`"
+							:class="{
+								'step-highlight':
+									demo && follow_tutorial && get_step('run', 'action:monster:details', 'monster'),
+							}"
+							@click="
+								get_step('run', 'action:monster:details', 'monster')
+									? completeStep({ tutorial: 'run', branch: 'monster' })
+									: null
+							"
 						>
 							<template #header>
 								<q-item-section v-if="action.type === 'healing'">
@@ -175,7 +213,15 @@
 									</span>
 								</q-item-section>
 								<q-item-section v-else>
-									<div class="defenses">
+									<div
+										class="defenses"
+										:class="{
+											'step-highlight':
+												demo &&
+												follow_tutorial &&
+												get_step('run', 'action:monster:defenses', 'monster'),
+										}"
+									>
 										<div
 											v-for="({ name }, key) in defenses"
 											:key="key"
@@ -201,18 +247,34 @@
 											</span>
 											{{ rolled.damage_type }}
 										</span>
+										<TutorialPopover
+											v-if="index === 0"
+											tutorial="run"
+											step="action:monster:defenses"
+											branch="monster"
+											position="left"
+											:offset="[15, 0]"
+										/>
 									</div>
 								</q-item-section>
 								<q-item-section avatar :class="action.type === 'healing' ? 'green' : 'red'">
 									<q-item-label>
-										<b
+										<strong
 											><hk-animated-integer :value="totalRollValue(action, action_index, rolled)"
-										/></b>
+										/></strong>
 									</q-item-label>
 									<q-tooltip anchor="top middle" self="center middle">
 										{{ rolled.rollResult.roll }}
 									</q-tooltip>
 								</q-item-section>
+								<TutorialPopover
+									v-if="index === 0"
+									tutorial="run"
+									step="action:monster:details"
+									branch="monster"
+									position="right"
+									:offset="[10, 0]"
+								/>
 							</template>
 							<div class="accordion-body">
 								<div>
@@ -310,7 +372,7 @@
 								<!-- Special events -->
 								<div
 									v-if="
-										rolled.special &&
+										rolled.special?.length &&
 										(savingThrowResult[action_index] === 'fail' ||
 											hitOrMiss[action_index] === 'hit')
 									"
@@ -333,7 +395,7 @@
 					</q-list>
 
 					<!-- TOTAL OF THE ACTION -->
-					<div class="total-action-damage" v-if="roll.actions.length > 1">
+					<div v-if="roll.actions.length > 1" class="total-action-damage">
 						<div>Total {{ action.type === "healing" ? "healing" : "damage" }}</div>
 						<div class="total" :class="action.type === 'healing' ? 'green' : 'red'">
 							<hk-animated-integer :value="totalActionValue(action, action_index)" onMount />
@@ -413,7 +475,15 @@
 				</div>
 			</div>
 
-			<div slot="footer" class="card-footer" v-if="roll.target">
+			<div
+				v-if="roll.target"
+				slot="footer"
+				class="card-footer"
+				:class="{
+					'step-highlight':
+						demo && follow_tutorial && get_step('run', 'action:monster:apply', 'monster'),
+				}"
+			>
 				<q-btn
 					color="neutral-9"
 					class="full-width neutral-1"
@@ -438,19 +508,32 @@
 				<q-btn color="neutral-9" class="full-width neutral-1" no-caps @click="removeRoll(index)">
 					<i aria-hidden="true" class="fas fa-times" />
 				</q-btn>
+
+				<TutorialPopover
+					v-if="index === 0"
+					tutorial="run"
+					step="action:monster:apply"
+					branch="monster"
+					position="right"
+					:offset="[10, 0]"
+				/>
 			</div>
 		</hk-card>
 	</div>
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import { damage_types, damage_type_icons } from "src/utils/generalConstants";
 import { dice } from "src/mixins/dice";
 import { setHP } from "src/mixins/HpManipulations";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
 export default {
 	name: "hk-single-roll",
+	components: {
+		TutorialPopover,
+	},
 	props: {
 		value: {
 			type: Object,
@@ -500,6 +583,7 @@ export default {
 		};
 	},
 	computed: {
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		roll() {
 			return this.value;
 		},
@@ -553,6 +637,7 @@ export default {
 	},
 	methods: {
 		...mapActions(["removeActionRoll", "edit_entity_prop"]),
+		...mapActions("tutorial", ["completeStep"]),
 		checkHitOrMiss() {
 			this.roll.actions.forEach((action, index) => {
 				if (action.toHit) {
@@ -698,6 +783,9 @@ export default {
 					});
 				}
 			}
+			if (this.get_step("run", "action:monster:apply", "monster")) {
+				this.completeStep({ tutorial: "run", branch: "monster" });
+			}
 			// Remove the roll
 			this.removeRoll(this.index);
 		},
@@ -760,6 +848,9 @@ export default {
 			} else {
 				this.$set(this.resistances, type, resistance);
 			}
+			if (this.get_step("run", "action:monster:defenses", "monster")) {
+				this.completeStep({ tutorial: "run", branch: "monster" });
+			}
 			this.$forceUpdate();
 		},
 		reroll(e, roll, throw_index, crit) {
@@ -913,6 +1004,7 @@ export default {
 			grid-column-gap: 5px;
 			user-select: none;
 			line-height: 28px;
+			border-radius: $border-radius;
 
 			.type {
 				padding-left: 10px;
@@ -1006,6 +1098,11 @@ export default {
 	.card-footer {
 		padding: 0;
 
+		&.step-highlight {
+			margin: 4px;
+			border-radius: 2px;
+		}
+
 		.q-btn {
 			border-radius: 0;
 		}
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index e440fb39..2192eb0a 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -81,19 +81,44 @@ const tutorial_state = () => ({
 								key: "action:monster:roll",
 								title: "Roll action",
 								description:
-									"<p>Select an action you want to roll and click the <strong>D20</strong> to automatically roll the action.</p>",
+									"Select an action you want to roll and click the <strong>D20</strong> to automatically roll the action.",
 								completed: false,
 							},
 							{
-								key: "action:player:to-hit",
+								key: "action:monster:to-hit",
 								title: "Hit or Miss",
-								description: "<p></p>",
+								description:
+									"<p>We automatically determine if your roll was a hit or miss, based on the target's AC. You can always turn a hit into miss manually.</p>" +
+									"<p>For Saving Throw actions you have to manually set it as a success or fail.</p>" +
+									"This does not apply for <strong>healing</strong> actions.",
+								completed: false,
+							},
+							{
+								key: "action:monster:defenses",
+								title: "Defenses",
+								description:
+									"<p>With the <strong>V</strong>ulnerable, <strong>R</strong>esistent and <strong>I</strong>mmune buttons you can update a target's defenses for the damage type of the current attack.</p>" +
+									"<p>Monsters and Players can have their defenses set before hand, but it can always be overruled for any roll you make.<p>" +
+									"This does not apply for <strong>healing</strong> actions.",
 								completed: false,
 							},
 							{
-								key: "action:player:apply",
+								key: "action:monster:details",
+								title: "Roll details",
+								description:
+									"<p>Click on the row to show details about the roll.</p>" +
+									"<strong>TIP</strong> From the details you can  reroll any die you want.",
+								completed: false,
+							},
+							{
+								key: "action:monster:apply",
 								title: "Apply the value",
-								description: "<p>Apply the rolled damage</p>",
+								description:
+									"<p>Apply the total value of the roll to the target.</p>" +
+									"<strong>Full</strong> Apply to total value.<br/>" +
+									"<strong>Half</strong> Apply half of the total value (rounded down).<br/>" +
+									"<strong>Double</strong> Apply the total value multiplied by 2.<br/>" +
+									'<strong><i class="fas fa-times"></i></strong> Do not apply the value.',
 								completed: false,
 							},
 						],

From 69c00c0f199333c967e4ebd534e1836b3d01dfc3 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 21 Jun 2024 15:32:48 +0200
Subject: [PATCH 21/55] branching with transition logic

---
 src/components/combat/Turns.vue               |   7 +
 src/components/combat/actions/Roll.vue        |   2 +-
 .../combat/actions/custom/Manual.vue          |  12 +-
 src/components/demo/TutorialPopover.vue       |  13 +-
 src/store/modules/tutorial.js                 | 147 +++++++++++-------
 5 files changed, 113 insertions(+), 68 deletions(-)

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index dafbe009..8b8e1cc5 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -149,6 +149,13 @@
 				@click="nextTurn()"
 				@shortkey="nextTurn()"
 			>
+				<TutorialPopover
+					tutorial="run"
+					step="action:next"
+					:branch="current.entityType === 'player' ? 'player' : 'monster'"
+					:transition="true"
+					position="right"
+				/>
 				<i aria-hidden="true" class="fas fa-step-forward" />
 				<q-tooltip anchor="top middle" self="center middle">Next turn [shift] + [→]</q-tooltip>
 				<TutorialPopover step="next" :offset="[0, 10]" />
diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index c43e86df..dbc9a458 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -218,7 +218,7 @@
 											<TutorialPopover
 												v-if="action_index == 0"
 												tutorial="run"
-												step="action:monster:roll"
+												step="roll"
 												branch="monster"
 												position="right"
 												:offset="[20, 0]"
diff --git a/src/components/combat/actions/custom/Manual.vue b/src/components/combat/actions/custom/Manual.vue
index e122e825..dbcfcfe8 100644
--- a/src/components/combat/actions/custom/Manual.vue
+++ b/src/components/combat/actions/custom/Manual.vue
@@ -29,8 +29,7 @@
 						min="0"
 						class="manual-input"
 						:class="{
-							'step-highlight':
-								demo && follow_tutorial && get_step('run', 'action:player:manual', 'player'),
+							'step-highlight': demo && follow_tutorial && get_step('run', 'manual', 'player'),
 						}"
 						autocomplete="off"
 						:autofocus="autofocus"
@@ -62,12 +61,7 @@
 						<i aria-hidden="true" class="hki-heal" />
 						<q-tooltip anchor="center right" self="center left">[shift] + [enter]</q-tooltip>
 					</button>
-					<TutorialPopover
-						step="action:player:manual"
-						branch="player"
-						position="right"
-						:offset="[10, 0]"
-					/>
+					<TutorialPopover step="manual" branch="player" position="right" :offset="[10, 0]" />
 				</div>
 			</ValidationProvider>
 
@@ -305,7 +299,7 @@ export default {
 			}
 
 			// If a value is applied, complete the tutorial step
-			if (this.get_step("run", "action:player:manual", "player")) {
+			if (this.get_step("run", "manual", "player")) {
 				this.completeStep({ tutorial: "run", branch: "player" });
 			}
 		},
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index e821c283..62675f2d 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -48,6 +48,10 @@ export default {
 		branch: {
 			type: String,
 		},
+		transition: {
+			type: Boolean,
+			default: false,
+		},
 		position: {
 			type: String,
 			default: "bottom",
@@ -62,7 +66,8 @@ export default {
 		...mapGetters("tutorial", ["follow_tutorial", "get_current_step", "get_step", "get_tutorial"]),
 		...mapActions(["current"]),
 		current_step() {
-			return this.get_current_step(this.tutorial, this.branch);
+			const step = this.get_current_step(this.tutorial, this.branch, this.transition);
+			return step;
 		},
 		anchor() {
 			switch (this.position) {
@@ -93,7 +98,11 @@ export default {
 			}
 		},
 		show() {
-			return this.follow_tutorial && this.get_step(this.tutorial, this.step, this.branch);
+			console.log("TUTORIAL CURRENT STEP", this.step, this.current_step);
+			return (
+				this.follow_tutorial &&
+				this.get_step(this.tutorial, this.step, this.branch, this.transition)
+			);
 		},
 		name() {
 			return this.get_tutorial(this.tutorial)?.name;
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 2192eb0a..ae000cf9 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -51,7 +51,8 @@ const tutorial_state = () => ({
 		],
 	},
 	run: {
-		name: "Run encounter",
+		title: "Run encounter",
+		completed: false,
 		steps: [
 			{
 				key: "target",
@@ -65,9 +66,10 @@ const tutorial_state = () => ({
 				completed: false,
 				branch: {
 					player: {
+						completed: false,
 						steps: [
 							{
-								key: "action:player:manual",
+								key: "manual",
 								title: "Input value",
 								description:
 									"<p>Input the amount of damage or healing you want to apply to the target(s).</p> Use the <strong>Attack</strong> [Enter] button to damage your targets or the <strong>Heal</strong> [Shift + Enter] button to heal them.",
@@ -76,9 +78,10 @@ const tutorial_state = () => ({
 						],
 					},
 					monster: {
+						completed: false,
 						steps: [
 							{
-								key: "action:monster:roll",
+								key: "roll",
 								title: "Roll action",
 								description:
 									"Select an action you want to roll and click the <strong>D20</strong> to automatically roll the action.",
@@ -123,14 +126,15 @@ const tutorial_state = () => ({
 							},
 						],
 					},
+					transition: {
+						completed: false,
+						depends_on: ["monster", "player"],
+						steps: [
+							{ key: "action:next", title: "Next", description: "Next Turn", completed: false },
+						],
+					},
 				},
 			},
-			{
-				key: "next",
-				title: "Next turn",
-				description: "When the current entity is finished, go to the next turn.",
-				completed: false,
-			},
 			{
 				key: "opportunity",
 				title: "Opportunity attack",
@@ -150,72 +154,66 @@ const tutorial_getters = {
 	},
 	get_current_step:
 		(state) =>
-		(tutorial, active_branch = undefined) => {
+		(tutorial, active_branch = undefined, transition = false) => {
 			const steps = state[tutorial].steps;
-			return get_active_step(steps, active_branch);
+			// const path = `#${tutorial}`;
+			const path = "";
+			return get_active_step(steps, path, active_branch, transition).step;
 		},
 	get_current_step_path: (state) => (tutorial, active_branch) => {
 		const steps = state[tutorial].steps;
-		return get_active_step_path(steps, [], active_branch);
+		// const path = `#${tutorial}`;
+		const path = "";
+		return get_active_step(steps, path, active_branch).path;
 	},
 	get_current_step_index: (state) => (tutorial) => {
 		return state[tutorial]?.steps.findIndex((step) => !step.completed);
 	},
 	get_step:
 		(_state, getters) =>
-		(tutorial, step, branch = undefined) => {
-			const current_step = getters.get_current_step(tutorial, branch);
+		(tutorial, step, branch = undefined, transition = false) => {
+			const current_step = getters.get_current_step(tutorial, branch, transition);
 			const at_step = current_step?.key === step;
 			return at_step;
 		},
 };
-
-const get_active_step = (steps, active_branch = undefined) => {
+const get_active_step = (steps, path, active_branch, transition) => {
 	const active_steps = steps.filter((step) => !step.completed);
 	if (active_steps.length === 0) {
-		return undefined;
+		return { step: undefined, path };
 	}
 	// Pop first active step from active steps list;
 	const current_step = active_steps.shift();
+	path += `.${current_step.key}`;
+
 	// Not branching step so return step.
 	if (!current_step.branch) {
-		return current_step;
-	}
-	// Branch
-	if (!current_step.branch.hasOwnProperty(active_branch)) {
-		if (current_step.started) {
-			return active_steps.shift();
-		}
-		return undefined;
-	}
-	const sub_step = get_active_step(current_step.branch[active_branch].steps);
-	if (sub_step) {
-		return sub_step;
+		return { step: current_step, path };
 	}
-	// All sub steps are completed so pop next active step.
-	return active_steps.shift();
+	// Branching
+	const { branch_steps, branch_key } = get_branch_steps(
+		current_step.branch,
+		active_branch,
+		transition
+	);
+	path += `<${branch_key}`;
+	return get_active_step(branch_steps, path, active_branch, transition);
 };
 
-const get_active_step_path = (steps, path, active_branch = undefined) => {
-	const active_step_index = steps.findIndex((step) => !step.completed);
-	if (active_step_index === undefined) {
-		return undefined;
+const get_branch_steps = (branches, active_branch, transition) => {
+	let branch_steps = [];
+	if (!branches.hasOwnProperty(active_branch)) {
+		return { branch_steps, branch_key: undefined };
 	}
-	path = path.concat(active_step_index);
-	const current_step = steps[active_step_index];
-	// Base case
-	if (!current_step.branch) {
-		return path;
-	}
-	// Branch > Recursion
-	if (!current_step.branch.hasOwnProperty(active_branch)) {
-		if (current_step.started) {
-			path[path.length - 1] += 1;
-			return path;
+	if (branches[active_branch].completed) {
+		if (transition) {
+			branch_steps = branches.transition.completed ? [] : branches.transition.steps;
+			return { branch_steps, branch_key: "transition" };
 		}
-		return undefined;
+		return { branch_steps, branch_key: active_branch };
 	}
-	return get_active_step_path(current_step.branch[active_branch].steps, path);
+	branch_steps = branches[active_branch].steps;
+	return { branch_steps, branch_key: active_branch };
 };
 
 const tutorial_actions = {
@@ -223,8 +221,9 @@ const tutorial_actions = {
 		commit("SET_TUTORIAL", !state.follow_tutorial);
 	},
 	completeStep({ commit, getters }, { tutorial, branch }) {
+		// path = run.action<player.
 		const path = getters.get_current_step_path(tutorial, branch);
-		commit("SET_COMPLETE", { tutorial, path, branch });
+		commit("SET_COMPLETE", { tutorial, path });
 	},
 };
 
@@ -232,20 +231,56 @@ const tutorial_mutations = {
 	SET_TUTORIAL(state, payload) {
 		Vue.set(state, "follow_tutorial", payload);
 	},
-	SET_COMPLETE(state, { tutorial, path, branch }) {
+	SET_COMPLETE(state, { tutorial, path }) {
 		let step_reference = state[tutorial];
-		while (path.length) {
-			if (step_reference.branch) {
-				Vue.set(step_reference, "started", true);
-				step_reference = step_reference.branch[branch];
+		let branch_reference = {};
+		let failsafe = 0;
+		while (path.length && failsafe < 10) {
+			failsafe += 1;
+			const { key, type, path: next_path } = next_path_step(path);
+			path = next_path;
+			switch (type) {
+				case "root":
+					break;
+				case "branch":
+					branch_reference = step_reference.branch[key];
+					step_reference = step_reference.branch[key];
+					break;
+				case "step":
+					const indx = step_reference.steps.findIndex((step) => step.key === key);
+					step_reference = step_reference.steps[indx];
+					break;
 			}
-			const next_idx = path.shift();
-			step_reference = step_reference.steps[next_idx];
 		}
 		Vue.set(step_reference, "completed", true);
+		if (branch_reference.completed === false && branch_completed(branch_reference)) {
+			branch_reference.completed = true;
+		}
 	},
 };
 
+const branch_completed = (branch_reference) => {
+	// if all steps are completed filter length == false
+	return branch_reference.steps.filter((step) => step.completed === false).length === 0;
+};
+
+const next_path_step = (path) => {
+	const reg = /^(?<type_sym>[#<.])(?<key>\w+)/;
+	const match = reg.exec(path);
+	if (match === null) {
+		return false;
+	}
+	const { key, type_sym } = match.groups;
+	const repl_reg = new RegExp(`${type_sym}${key}`, "g");
+	const sym2type = {
+		"#": "root",
+		"<": "branch",
+		".": "step",
+	};
+	path = path.replace(repl_reg, "");
+	return { key, type: sym2type[type_sym], path };
+};
+
 export default {
 	namespaced: true,
 	state: tutorial_state,

From a003cf0e3dc2240253d5bdb25edaef04b53fafcf Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 21 Jun 2024 18:23:42 +0200
Subject: [PATCH 22/55] complete branches

---
 src/components/combat/actions/Roll.vue        |  6 ++--
 .../hk-components/hk-rolls/hk-single-roll.vue | 34 ++++++++-----------
 src/store/modules/tutorial.js                 | 25 ++++++++++----
 3 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index dbc9a458..e9ef59b1 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -210,9 +210,7 @@
 											class="roll-wrapper"
 											:class="{
 												'step-highlight':
-													demo &&
-													follow_tutorial &&
-													get_step('run', 'action:monster:roll', 'monster'),
+													demo && follow_tutorial && get_step('run', 'roll', 'monster'),
 											}"
 										>
 											<TutorialPopover
@@ -413,7 +411,7 @@ export default {
 			});
 			this.cancelRoll();
 
-			if (this.get_step("run", "action:monster:roll", "monster")) {
+			if (this.get_step("run", "roll", "monster")) {
 				this.completeStep({ tutorial: "run", branch: "monster" });
 			}
 		},
diff --git a/src/components/hk-components/hk-rolls/hk-single-roll.vue b/src/components/hk-components/hk-rolls/hk-single-roll.vue
index 43592c20..6e6a2a81 100644
--- a/src/components/hk-components/hk-rolls/hk-single-roll.vue
+++ b/src/components/hk-components/hk-rolls/hk-single-roll.vue
@@ -119,13 +119,12 @@
 									{ label: 'Miss', value: 'miss' },
 								]"
 								:class="{
-									'step-highlight':
-										demo && follow_tutorial && get_step('run', 'action:monster:to-hit', 'monster'),
+									'step-highlight': demo && follow_tutorial && get_step('run', 'to-hit', 'monster'),
 								}"
 								@keydown.enter="shortkeyApply"
 								@keydown.backspace="removeRoll(index)"
 								@click="
-									get_step('run', 'action:monster:to-hit', 'monster')
+									get_step('run', 'to-hit', 'monster')
 										? completeStep({ tutorial: 'run', branch: 'monster' })
 										: null
 								"
@@ -164,13 +163,12 @@
 									{ label: 'Save', value: 'save' },
 								]"
 								:class="{
-									'step-highlight':
-										demo && follow_tutorial && get_step('run', 'action:monster:to-hit', 'monster'),
+									'step-highlight': demo && follow_tutorial && get_step('run', 'to-hit', 'monster'),
 								}"
 								@keydown.enter="shortkeyApply"
 								@keydown.backspace="removeRoll(index)"
 								@click="
-									get_step('run', 'action:monster:to-hit', 'monster')
+									get_step('run', 'to-hit', 'monster')
 										? completeStep({ tutorial: 'run', branch: 'monster' })
 										: null
 								"
@@ -180,7 +178,7 @@
 						<TutorialPopover
 							v-if="index === 0"
 							tutorial="run"
-							step="action:monster:to-hit"
+							step="to-hit"
 							branch="monster"
 							position="right"
 							:offset="[15, 0]"
@@ -196,11 +194,10 @@
 							switch-toggle-side
 							:group="`rolled-${index}`"
 							:class="{
-								'step-highlight':
-									demo && follow_tutorial && get_step('run', 'action:monster:details', 'monster'),
+								'step-highlight': demo && follow_tutorial && get_step('run', 'details', 'monster'),
 							}"
 							@click="
-								get_step('run', 'action:monster:details', 'monster')
+								get_step('run', 'details', 'monster')
 									? completeStep({ tutorial: 'run', branch: 'monster' })
 									: null
 							"
@@ -217,9 +214,7 @@
 										class="defenses"
 										:class="{
 											'step-highlight':
-												demo &&
-												follow_tutorial &&
-												get_step('run', 'action:monster:defenses', 'monster'),
+												demo && follow_tutorial && get_step('run', 'defenses', 'monster'),
 										}"
 									>
 										<div
@@ -250,7 +245,7 @@
 										<TutorialPopover
 											v-if="index === 0"
 											tutorial="run"
-											step="action:monster:defenses"
+											step="defenses"
 											branch="monster"
 											position="left"
 											:offset="[15, 0]"
@@ -270,7 +265,7 @@
 								<TutorialPopover
 									v-if="index === 0"
 									tutorial="run"
-									step="action:monster:details"
+									step="details"
 									branch="monster"
 									position="right"
 									:offset="[10, 0]"
@@ -480,8 +475,7 @@
 				slot="footer"
 				class="card-footer"
 				:class="{
-					'step-highlight':
-						demo && follow_tutorial && get_step('run', 'action:monster:apply', 'monster'),
+					'step-highlight': demo && follow_tutorial && get_step('run', 'apply', 'monster'),
 				}"
 			>
 				<q-btn
@@ -512,7 +506,7 @@
 				<TutorialPopover
 					v-if="index === 0"
 					tutorial="run"
-					step="action:monster:apply"
+					step="apply"
 					branch="monster"
 					position="right"
 					:offset="[10, 0]"
@@ -783,7 +777,7 @@ export default {
 					});
 				}
 			}
-			if (this.get_step("run", "action:monster:apply", "monster")) {
+			if (this.get_step("run", "apply", "monster")) {
 				this.completeStep({ tutorial: "run", branch: "monster" });
 			}
 			// Remove the roll
@@ -848,7 +842,7 @@ export default {
 			} else {
 				this.$set(this.resistances, type, resistance);
 			}
-			if (this.get_step("run", "action:monster:defenses", "monster")) {
+			if (this.get_step("run", "defenses", "monster")) {
 				this.completeStep({ tutorial: "run", branch: "monster" });
 			}
 			this.$forceUpdate();
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index ae000cf9..a97950f8 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -64,6 +64,7 @@ const tutorial_state = () => ({
 			{
 				key: "action",
 				completed: false,
+				depends_on: ["monster", "player"],
 				branch: {
 					player: {
 						completed: false,
@@ -88,7 +89,7 @@ const tutorial_state = () => ({
 								completed: false,
 							},
 							{
-								key: "action:monster:to-hit",
+								key: "to-hit",
 								title: "Hit or Miss",
 								description:
 									"<p>We automatically determine if your roll was a hit or miss, based on the target's AC. You can always turn a hit into miss manually.</p>" +
@@ -97,7 +98,7 @@ const tutorial_state = () => ({
 								completed: false,
 							},
 							{
-								key: "action:monster:defenses",
+								key: "defenses",
 								title: "Defenses",
 								description:
 									"<p>With the <strong>V</strong>ulnerable, <strong>R</strong>esistent and <strong>I</strong>mmune buttons you can update a target's defenses for the damage type of the current attack.</p>" +
@@ -106,7 +107,7 @@ const tutorial_state = () => ({
 								completed: false,
 							},
 							{
-								key: "action:monster:details",
+								key: "details",
 								title: "Roll details",
 								description:
 									"<p>Click on the row to show details about the roll.</p>" +
@@ -114,7 +115,7 @@ const tutorial_state = () => ({
 								completed: false,
 							},
 							{
-								key: "action:monster:apply",
+								key: "apply",
 								title: "Apply the value",
 								description:
 									"<p>Apply the total value of the roll to the target.</p>" +
@@ -128,7 +129,6 @@ const tutorial_state = () => ({
 					},
 					transition: {
 						completed: false,
-						depends_on: ["monster", "player"],
 						steps: [
 							{ key: "action:next", title: "Next", description: "Next Turn", completed: false },
 						],
@@ -223,6 +223,7 @@ const tutorial_actions = {
 	completeStep({ commit, getters }, { tutorial, branch }) {
 		// path = run.action<player.
 		const path = getters.get_current_step_path(tutorial, branch);
+		// console.log("Complete step:", tutorial, branch, path);
 		commit("SET_COMPLETE", { tutorial, path });
 	},
 };
@@ -232,8 +233,10 @@ const tutorial_mutations = {
 		Vue.set(state, "follow_tutorial", payload);
 	},
 	SET_COMPLETE(state, { tutorial, path }) {
+		// console.log("SET COMPLETE", tutorial, path);
 		let step_reference = state[tutorial];
 		let branch_reference = {};
+		let branch_root = {};
 		let failsafe = 0;
 		while (path.length && failsafe < 10) {
 			failsafe += 1;
@@ -243,6 +246,7 @@ const tutorial_mutations = {
 				case "root":
 					break;
 				case "branch":
+					branch_root = step_reference;
 					branch_reference = step_reference.branch[key];
 					step_reference = step_reference.branch[key];
 					break;
@@ -256,6 +260,9 @@ const tutorial_mutations = {
 		if (branch_reference.completed === false && branch_completed(branch_reference)) {
 			branch_reference.completed = true;
 		}
+		if (branch_root.completed === false && all_branches_completed(branch_root)) {
+			branch_root.completed = true;
+		}
 	},
 };
 
@@ -264,8 +271,14 @@ const branch_completed = (branch_reference) => {
 	return branch_reference.steps.filter((step) => step.completed === false).length === 0;
 };
 
+const all_branches_completed = (branch_root) => {
+	return branch_root.depends_on.every((branch) => {
+		return branch_root.branch[branch].completed;
+	});
+};
+
 const next_path_step = (path) => {
-	const reg = /^(?<type_sym>[#<.])(?<key>\w+)/;
+	const reg = /^(?<type_sym>[#<.])(?<key>[\w-_]+)/;
 	const match = reg.exec(path);
 	if (match === null) {
 		return false;

From d3544a8ac3d2632f7b05dcea819280607b72cb79 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 11:41:45 +0200
Subject: [PATCH 23/55] Add more button on add player popup

---
 src/components/encounters/Entities.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index 2e327188..d9b0e11e 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -422,12 +422,22 @@
 									/>
 								</ValidationProvider>
 							</div>
-							<div slot="footer" class="card-footer">
+							<div slot="footer" class="card-footer d-flex justify-content-between">
 								<q-btn flat no-caps v-close-popup label="Cancel" />
+								<q-btn
+									type="submit"
+									label="Add more"
+									class="ml-1"
+									no-caps
+									flat
+									color="primary"
+									:disable="!valid"
+								/>
 								<q-btn
 									type="submit"
 									label="Add"
 									class="ml-1"
+									v-close-popup
 									no-caps
 									color="primary"
 									:disable="!valid"

From 399b93afd4ae73b8cb25a93dba01d503d0e6c4dc Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 11:47:20 +0200
Subject: [PATCH 24/55] completed after is better name

---
 src/store/modules/tutorial.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index a97950f8..c5ff38dd 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -64,7 +64,7 @@ const tutorial_state = () => ({
 			{
 				key: "action",
 				completed: false,
-				depends_on: ["monster", "player"],
+				completed_after: ["monster", "player"],
 				branch: {
 					player: {
 						completed: false,
@@ -272,7 +272,7 @@ const branch_completed = (branch_reference) => {
 };
 
 const all_branches_completed = (branch_root) => {
-	return branch_root.depends_on.every((branch) => {
+	return branch_root.completed_after.every((branch) => {
 		return branch_root.branch[branch].completed;
 	});
 };

From 33d489d3e28314c892fc2fc589faeb45d540af67 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 11:48:16 +0200
Subject: [PATCH 25/55] remove console

---
 src/components/demo/TutorialPopover.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 62675f2d..c58d6bc2 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -98,7 +98,6 @@ export default {
 			}
 		},
 		show() {
-			console.log("TUTORIAL CURRENT STEP", this.step, this.current_step);
 			return (
 				this.follow_tutorial &&
 				this.get_step(this.tutorial, this.step, this.branch, this.transition)

From f46e16e8e1fbd6deee2b9ebff632e5678e48c98e Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 12:24:15 +0200
Subject: [PATCH 26/55] No next button

---
 src/components/combat/Turns.vue         | 13 ++++++++++---
 src/components/demo/TutorialPopover.vue | 10 +++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index 8b8e1cc5..fe3f20ca 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -143,7 +143,8 @@
 			<a
 				class="handler neutral-2 ml-2 px-2"
 				:class="{
-					'step-highlight': demo && follow_tutorial && get_step('run', 'next'),
+					'step-highlight':
+						demo && follow_tutorial && get_step('run', 'next', tutorial_branch, true),
 				}"
 				v-shortkey="['shift', 'arrowright']"
 				@click="nextTurn()"
@@ -151,10 +152,12 @@
 			>
 				<TutorialPopover
 					tutorial="run"
-					step="action:next"
-					:branch="current.entityType === 'player' ? 'player' : 'monster'"
+					step="next"
+					:branch="tutorial_branch"
 					:transition="true"
 					position="right"
+					:no_button="true"
+					:offset="[10, 0]"
 				/>
 				<i aria-hidden="true" class="fas fa-step-forward" />
 				<q-tooltip anchor="top middle" self="center middle">Next turn [shift] + [→]</q-tooltip>
@@ -265,6 +268,7 @@
 						encounter <i aria-hidden="true" class="fas fa-arrow-right" />
 					</span>
 					<q-tooltip anchor="top middle" self="center middle">Start [shift] + [->]</q-tooltip>
+
 					<TutorialPopover v-if="demo" tutorial="initiative" step="start" :offset="[0, 10]" />
 				</button>
 			</template>
@@ -305,6 +309,9 @@ export default {
 			}
 			return `/content/campaigns/${this.$route.params.campid}`;
 		},
+		tutorial_branch() {
+			return this.current.entityType === "player" ? "player" : "monster";
+		},
 	},
 	methods: {
 		...mapActions([
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index c58d6bc2..80653753 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -23,7 +23,11 @@
 				</div>
 				<p v-html="current_step?.description" />
 				<div class="d-flex justify-content-end items-center gap-1">
-					<button class="btn btn-sm bg-yellow black" @click="completeStep({ tutorial, branch })">
+					<button
+						v-if="!no_button"
+						class="btn btn-sm bg-yellow black"
+						@click="completeStep({ tutorial, branch })"
+					>
 						Next <hk-icon icon="fas fa-chevron-right" />
 					</button>
 				</div>
@@ -56,6 +60,10 @@ export default {
 			type: String,
 			default: "bottom",
 		},
+		no_button: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {

From 3f0ebc1dcc2f38e57e140c385f7d1de84b9dfeaf Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 12:24:27 +0200
Subject: [PATCH 27/55] next turn tutorial description

---
 src/store/modules/tutorial.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index c5ff38dd..c4112501 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -130,7 +130,14 @@ const tutorial_state = () => ({
 					transition: {
 						completed: false,
 						steps: [
-							{ key: "action:next", title: "Next", description: "Next Turn", completed: false },
+							{
+								key: "next",
+								title: "Next Turn",
+								description:
+									"<p>Go to the next turn using the <strong><i class='fas fa-step-forward'></i></strong> button or using the shortcut: [shift]+[→]</p>" +
+									"",
+								completed: false,
+							},
 						],
 					},
 				},

From 1e164af37aed394fc04148f3fe935c04c8b12917 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 12:39:11 +0200
Subject: [PATCH 28/55] demo overlay not blocking content

---
 src/components/combat/DemoOverlay.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/combat/DemoOverlay.vue b/src/components/combat/DemoOverlay.vue
index 5925700c..dc9276d5 100644
--- a/src/components/combat/DemoOverlay.vue
+++ b/src/components/combat/DemoOverlay.vue
@@ -9,7 +9,7 @@
 							Reset
 						</q-tooltip>
 					</a>
-					Demo Encounter 
+					Demo Encounter
 				</h3>
 				<button class="btn btn-clear" @click="showInfo = false">
 					<i aria-hidden="true" class="fas fa-times neutral-4" />
@@ -19,7 +19,7 @@
 				<div v-if="!user">
 					<p>
 						Thanks for trying out our demo encounter!<br/>
-						This demo has all the functionality our combat tracker has. 
+						This demo has all the functionality our combat tracker has.
 						If you <strong>create an account</strong> you can make your own encounters and run them just like this, but with your custom content.<br/>
 					</p>
 					<h3>
@@ -56,12 +56,13 @@
 		},
 		methods: {
 			...mapActions(["reset_demo"])
-		}		
+		}
 	}
 </script>
 
 <style lang="scss" scoped>
 .demo {
+  pointer-events: none;
 	position: fixed;
 	margin: 0 15px;
 	bottom: 0;
@@ -70,8 +71,9 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	
+
 	.banner {
+    pointer-events: all;
 		padding: 25px;
 		box-shadow: 0px 0px 15px $black;
 		max-width: 800px;
@@ -102,7 +104,7 @@
 
 		i {
 				transition: transform .5s linear;
-		}    
+		}
 		&.show {
 			i {
 					transform: rotate(180deg);
@@ -123,4 +125,4 @@
 			}
 		}
 	}
-</style>
\ No newline at end of file
+</style>

From 13a8e1e7dcfc79317a94745409b44ed0747547da Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 12:39:31 +0200
Subject: [PATCH 29/55] Info text for next turn step

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

diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index c4112501..3fe4a925 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -135,7 +135,7 @@ const tutorial_state = () => ({
 								title: "Next Turn",
 								description:
 									"<p>Go to the next turn using the <strong><i class='fas fa-step-forward'></i></strong> button or using the shortcut: [shift]+[→]</p>" +
-									"",
+									"<em><small>(This tutorial step stays active until next step is reached)</small></em>",
 								completed: false,
 							},
 						],

From f7aa53a831521de31b4a67c507928caa6397c8c1 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 12:48:20 +0200
Subject: [PATCH 30/55] 1px border for tips

---
 src/components/hk-components/hk-tip.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/hk-components/hk-tip.vue b/src/components/hk-components/hk-tip.vue
index 004ff2a4..e6662ca4 100644
--- a/src/components/hk-components/hk-tip.vue
+++ b/src/components/hk-components/hk-tip.vue
@@ -65,7 +65,8 @@ export default {
 	.tip {
 		display: flex;
 		justify-content: space-between;
-		border-left: solid 8px $yellow;
+    border:solid 1px $yellow;
+		border-left-width: 8px;
 		padding: 5px;
 		background-color: rgba(0, 0, 0, .2);
 		margin-bottom: 20px;
@@ -103,4 +104,4 @@ export default {
 			color: $green-light !important;
 		}
 	}
-</style>
\ No newline at end of file
+</style>

From 82781743e4860b899f47705fbc301901ab6e306e Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 28 Jun 2024 12:57:11 +0200
Subject: [PATCH 31/55] Targeting as requirement for certain steps

---
 src/components/combat/Targeted.vue      | 29 +++++++++--
 src/components/combat/Targets.vue       |  2 +-
 src/components/demo/TutorialPopover.vue | 48 +++++++++++++++---
 src/store/modules/tutorial.js           | 66 ++++++++++++++++++++++---
 4 files changed, 124 insertions(+), 21 deletions(-)

diff --git a/src/components/combat/Targeted.vue b/src/components/combat/Targeted.vue
index de664746..e97db37d 100644
--- a/src/components/combat/Targeted.vue
+++ b/src/components/combat/Targeted.vue
@@ -21,12 +21,15 @@
 				@focus="focusOptions"
 			>
 				<button
-					v-for="({ key, method, icon, tooltip }, i) in display_options"
+					v-for="({ key, method, icon, tooltip, step }, i) in display_options"
 					ref="options"
 					tabindex="-1"
 					class="option"
 					:key="`option-${i}`"
 					v-shortkey="key"
+					:class="{
+						'step-highlight': step && demo && follow_tutorial && get_step('run', step),
+					}"
 					@click="method"
 					@shortkey="method"
 					@keydown.left="cycleOptions(i, 'left')"
@@ -34,6 +37,14 @@
 				>
 					<i aria-hidden="true" class="fas" :class="icon" />
 					<q-tooltip anchor="top middle" self="center middle">{{ tooltip }}</q-tooltip>
+
+					<TutorialPopover
+						v-if="step"
+						tutorial="run"
+						:step="step"
+						position="bottom"
+						:offset="[0, 10]"
+					/>
 				</button>
 			</div>
 		</h2>
@@ -55,7 +66,7 @@
 						<div class="health">
 							<TargetItem :item="key" />
 							<a class="clear" @click="set_targeted({ type: 'untarget', key })">
-								<i aria-hidden="true" class="fas fa-times red"></i>
+								<hk-icon icon="fas fa-times red" />
 								<q-tooltip anchor="top middle" self="center middle"> Untarget </q-tooltip>
 							</a>
 						</div>
@@ -147,6 +158,7 @@ import { abilities } from "src/utils/generalConstants";
 import TargetItem from "src/components/combat/TargetItem.vue";
 import TargetInfo from "src/components/combat/TargetInfo.vue";
 import { experience } from "src/mixins/experience.js";
+import TutorialPopover from "../demo/TutorialPopover.vue";
 
 export default {
 	name: "Targeted",
@@ -154,6 +166,7 @@ export default {
 	components: {
 		TargetItem,
 		TargetInfo,
+		TutorialPopover,
 	},
 	data() {
 		return {
@@ -166,6 +179,7 @@ export default {
 					key: ["shift", "d"],
 					icon: "fa-swords",
 					tooltip: "[shift]+[d] Out of turn damage/healing",
+					step: "opportunity",
 				},
 				{
 					option: "conditions",
@@ -173,6 +187,7 @@ export default {
 					key: ["c"],
 					icon: "fa-flame",
 					tooltip: "[c] Conditions",
+					step: "conditions",
 				},
 				{
 					option: "reminders",
@@ -181,13 +196,16 @@ export default {
 					key: ["m"],
 					icon: "fa-stopwatch",
 					tooltip: "[m] Reminders",
+					step: "reminders",
 				},
 				{
 					option: "transform",
-					method: () => this.setDrawer({ show: true, type: "drawers/Transform", data: this.target }),
+					method: () =>
+						this.setDrawer({ show: true, type: "drawers/Transform", data: this.target }),
 					key: ["t"],
 					icon: "fa-paw-claws",
 					tooltip: "[t] Transform",
+					step: "transform",
 				},
 				{
 					option: "hide",
@@ -202,12 +220,14 @@ export default {
 					key: ["e"],
 					icon: "fa-pencil",
 					tooltip: "[e] Edit",
+					step: "edit",
 				},
 			],
 		};
 	},
 	computed: {
-		...mapGetters(["encounterId", "entities", "turn", "targeted", "broadcast"]),
+		...mapGetters(["encounterId", "entities", "turn", "targeted", "broadcast", "demo"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		shares() {
 			return this.broadcast.shares || [];
 		},
@@ -240,6 +260,7 @@ export default {
 			"set_targetReminder",
 			"set_hidden",
 		]),
+		...mapActions("tutorial", ["completeStep"]),
 		focusOptions() {
 			this.$refs.options[0].focus();
 		},
diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index 7b31bdab..6f3b7124 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -136,7 +136,7 @@
 							<TutorialPopover
 								v-if="group === 'active' && i === 1"
 								tutorial="run"
-								step="target"
+								requirement="target"
 								position="right"
 								:offset="[10, 0]"
 							/>
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 80653753..fb6edf16 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -64,6 +64,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		requirement: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -71,10 +75,18 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters("tutorial", ["follow_tutorial", "get_current_step", "get_step", "get_tutorial"]),
-		...mapActions(["current"]),
+		...mapGetters("tutorial", [
+			"follow_tutorial",
+			"get_current_step",
+			"get_step",
+			"get_tutorial",
+			"get_requirement",
+		]),
+		...mapGetters(["current", "targeted"]),
 		current_step() {
-			const step = this.get_current_step(this.tutorial, this.branch, this.transition);
+			const step = this.requirement
+				? this.get_requirement(this.tutorial, this.requirement)
+				: this.get_current_step(this.tutorial, this.branch, this.transition);
 			return step;
 		},
 		anchor() {
@@ -105,14 +117,34 @@ export default {
 					return "top middle";
 			}
 		},
+		requirement_met() {
+			switch (this.requirement) {
+				case "target":
+					return !!this.targeted?.length;
+				default:
+					return false;
+			}
+		},
 		show() {
-			return (
-				this.follow_tutorial &&
-				this.get_step(this.tutorial, this.step, this.branch, this.transition)
-			);
+			let show_step = this.requirement
+				? false
+				: this.get_step(this.tutorial, this.step, this.branch, this.transition);
+
+			// If we are in a requirement popover we need to check if this requirement is needed for the current step
+			if (this.requirement && !this.requirement_met) {
+				const requirement = this.get_requirement(this.tutorial, this.requirement);
+				for (const path of requirement.required_for) {
+					const [step, branch] = path.split(".");
+					if (this.get_step(this.tutorial, step, branch)) {
+						show_step = true;
+						break;
+					}
+				}
+			}
+			return this.follow_tutorial && show_step;
 		},
 		name() {
-			return this.get_tutorial(this.tutorial)?.name;
+			return this.get_tutorial(this.tutorial)?.title;
 		},
 		entity_type() {
 			return this.current.entityType === "player" ? "player" : "monster";
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 3fe4a925..51ae648b 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -54,13 +54,6 @@ const tutorial_state = () => ({
 		title: "Run encounter",
 		completed: false,
 		steps: [
-			{
-				key: "target",
-				title: "Target entities",
-				description:
-					"<p>Click on an entity to target it.</p> <strong>TIP!</strong> You can select multiple targets at once by holding shift and clicking.",
-				completed: false,
-			},
 			{
 				key: "action",
 				completed: false,
@@ -145,10 +138,64 @@ const tutorial_state = () => ({
 			{
 				key: "opportunity",
 				title: "Opportunity attack",
-				description: "When the current entity is finished, go to the next turn.",
+				description:
+					"<p>You can perform an out of turn action at any time during a round.</p>" +
+					"<p>This can be useful for opportunity attacks and legendary actions.</p>" +
+					'For these out of turn actions you first select the target(s) and then click the <strong><i class="fas fa-swords"></i></strong> button. You then select who performs the action.',
+				completed: false,
+			},
+			{
+				key: "conditions",
+				title: "Conditions",
+				description:
+					'You can apply conditions to your target(s) using the <strong><i class="fas fa-flame"></i></strong> button.',
+				completed: false,
+			},
+			{
+				key: "reminders",
+				title: "Reminders",
+				description:
+					"<p>Reminders will notify you when an event is triggered on a target.<p>" +
+					"<p>You can be notified when a <strong>concentrating</strong> target takes damage for instance.<p>" +
+					'You can apply reminders to your target(s) using the <strong><i class="fas fa-stopwatch"></i></strong> button.',
+				completed: false,
+			},
+			{
+				key: "transform",
+				title: "Transform",
+				description:
+					'<p>You can transform a target into another entity using the <strong><i class="fas fa-paw"></i></strong> button.</p>' +
+					"This can used for a druid's <strong>Wildshape</strong> or on the target of a <strong>Polymorph</strong> spell.",
+				completed: false,
+			},
+			{
+				key: "edit",
+				title: "Edit entity",
+				description:
+					"You can manually edit an entity to update their base values, or give them <strong>Armor class bonus</strong>, <strong>Maximum hit points modifier</strong> and <strong>Temporary hit points</strong>",
 				completed: false,
 			},
 		],
+		requirements: {
+			target: {
+				key: "target",
+				title: "Target entities",
+				description:
+					"<p>Click on an entity to target it.</p>" +
+					"<p>Most of the actions you can perform require at least one target.</p>" +
+					"<strong>TIP!</strong> You can select multiple targets at once by holding shift and clicking.",
+				completed: false,
+				required_for: [
+					"roll.monster",
+					"manual.player",
+					"opportunity",
+					"conditions",
+					"reminders",
+					"transform",
+					"edit",
+				],
+			},
+		},
 	},
 });
 
@@ -183,6 +230,9 @@ const tutorial_getters = {
 			const at_step = current_step?.key === step;
 			return at_step;
 		},
+	get_requirement: (state) => (tutorial, requirement) => {
+		return state[tutorial].requirements[requirement];
+	},
 };
 const get_active_step = (steps, path, active_branch, transition) => {
 	const active_steps = steps.filter((step) => !step.completed);

From 3bd7f03d6e9d0a4a608afaf6ac41df6902828cba Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 14:46:46 +0200
Subject: [PATCH 32/55] provide targets with current for tutorials

---
 src/components/combat/Targets.vue       |  6 +++++-
 src/components/demo/TutorialPopover.vue | 16 ++++++----------
 src/store/modules/tutorial.js           | 14 +++++++-------
 src/views/RunEncounter.vue              |  1 +
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index 6f3b7124..4d444db6 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -137,6 +137,7 @@
 								v-if="group === 'active' && i === 1"
 								tutorial="run"
 								requirement="target"
+                :branch="tutorial_branch"
 								position="right"
 								:offset="[10, 0]"
 							/>
@@ -158,7 +159,7 @@ import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 export default {
 	name: "Targets",
 	components: { TargetItem, TargetMenu, TutorialPopover },
-	props: ["_active", "_idle"],
+	props: ["current", "_active", "_idle"],
 	data() {
 		return {
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
@@ -228,6 +229,9 @@ export default {
 				.sortBy("name", "desc")
 				.value();
 		},
+    tutorial_branch() {
+			return this.current.entityType === "player" ? "player" : "monster";
+		},
 	},
 	methods: {
 		...mapActions([
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index fb6edf16..0da35929 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -82,7 +82,7 @@ export default {
 			"get_tutorial",
 			"get_requirement",
 		]),
-		...mapGetters(["current", "targeted"]),
+		...mapGetters(["targeted"]),
 		current_step() {
 			const step = this.requirement
 				? this.get_requirement(this.tutorial, this.requirement)
@@ -126,16 +126,15 @@ export default {
 			}
 		},
 		show() {
-			let show_step = this.requirement
-				? false
-				: this.get_step(this.tutorial, this.step, this.branch, this.transition);
+      let show_step = this.requirement
+      ? false
+      : this.get_step(this.tutorial, this.step, this.branch, this.transition);
 
 			// If we are in a requirement popover we need to check if this requirement is needed for the current step
 			if (this.requirement && !this.requirement_met) {
 				const requirement = this.get_requirement(this.tutorial, this.requirement);
-				for (const path of requirement.required_for) {
-					const [step, branch] = path.split(".");
-					if (this.get_step(this.tutorial, step, branch)) {
+				for (const {step, branch, transition} of requirement.required_for) {
+					if (this.get_step(this.tutorial, step,this.branch, transition)) {
 						show_step = true;
 						break;
 					}
@@ -146,9 +145,6 @@ export default {
 		name() {
 			return this.get_tutorial(this.tutorial)?.title;
 		},
-		entity_type() {
-			return this.current.entityType === "player" ? "player" : "monster";
-		},
 	},
 	methods: {
 		...mapActions("tutorial", ["completeStep", "toggleTutorial"]),
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 51ae648b..7efbd2aa 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -186,13 +186,13 @@ const tutorial_state = () => ({
 					"<strong>TIP!</strong> You can select multiple targets at once by holding shift and clicking.",
 				completed: false,
 				required_for: [
-					"roll.monster",
-					"manual.player",
-					"opportunity",
-					"conditions",
-					"reminders",
-					"transform",
-					"edit",
+					{ step: "roll", branch: "monster", transition: true },
+					{ step: "manual", branch: "player", transition: true },
+					{ step: "opportunity" },
+					{ step: "conditions" },
+					{ step: "reminders" },
+					{ step: "transform" },
+					{ step: "edit" },
 				],
 			},
 		},
diff --git a/src/views/RunEncounter.vue b/src/views/RunEncounter.vue
index 7ea51050..74a7be03 100644
--- a/src/views/RunEncounter.vue
+++ b/src/views/RunEncounter.vue
@@ -57,6 +57,7 @@
 							ref="targets"
 							tabindex="0"
 							class="pane"
+              :current="_active[encounter.turn]"
 							:_active="_active"
 							:_idle="_idle"
 							:class="{ focused: focused_pane === 'targets' }"

From c28b08d84c88710cf8fe9c495cd3331f9cb8220c Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 15:23:23 +0200
Subject: [PATCH 33/55] Restructure requirement met functie

---
 src/components/demo/TutorialPopover.vue | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 0da35929..3f6a25e6 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -126,21 +126,22 @@ export default {
 			}
 		},
 		show() {
-      let show_step = this.requirement
-      ? false
-      : this.get_step(this.tutorial, this.step, this.branch, this.transition);
+			if (!this.follow_tutorial) {
+				return false;
+			}
+
+			if (!this.requirement) {
+				return this.get_step(this.tutorial, this.step, this.branch, this.transition);
+			}
 
 			// If we are in a requirement popover we need to check if this requirement is needed for the current step
-			if (this.requirement && !this.requirement_met) {
-				const requirement = this.get_requirement(this.tutorial, this.requirement);
-				for (const {step, branch, transition} of requirement.required_for) {
-					if (this.get_step(this.tutorial, step,this.branch, transition)) {
-						show_step = true;
-						break;
-					}
-				}
+			if (this.requirement_met) {
+				return false;
 			}
-			return this.follow_tutorial && show_step;
+			const requirement = this.get_requirement(this.tutorial, this.requirement);
+			return requirement.required_for.some(({ step, branch, transition }) =>
+				this.get_step(this.tutorial, step, this.branch, transition)
+			);
 		},
 		name() {
 			return this.get_tutorial(this.tutorial)?.title;

From 6a09f5c86c90f4a7d30fd7e438d45d645dcfe743 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 15:24:27 +0200
Subject: [PATCH 34/55] overlay toggle clickable

---
 src/components/combat/DemoOverlay.vue | 79 +++++++++++++--------------
 1 file changed, 39 insertions(+), 40 deletions(-)

diff --git a/src/components/combat/DemoOverlay.vue b/src/components/combat/DemoOverlay.vue
index dc9276d5..473a166e 100644
--- a/src/components/combat/DemoOverlay.vue
+++ b/src/components/combat/DemoOverlay.vue
@@ -5,9 +5,7 @@
 				<h3 class="d-flex items-center mb-0 gap-2">
 					<a class="btn btn-sm bg-neutral-5" @click="reset_demo()">
 						<i aria-hidden="true" class="far fa-sync-alt"></i>
-						<q-tooltip anchor="top middle" self="center middle">
-							Reset
-						</q-tooltip>
+						<q-tooltip anchor="top middle" self="center middle"> Reset </q-tooltip>
 					</a>
 					Demo Encounter
 				</h3>
@@ -18,16 +16,16 @@
 			<div class="content d-flex justify-content-between items-center gap-2">
 				<div v-if="!user">
 					<p>
-						Thanks for trying out our demo encounter!<br/>
-						This demo has all the functionality our combat tracker has.
-						If you <strong>create an account</strong> you can make your own encounters and run them just like this, but with your custom content.<br/>
+						Thanks for trying out our demo encounter!<br />
+						This demo has all the functionality our combat tracker has. If you
+						<strong>create an account</strong> you can make your own encounters and run them just
+						like this, but with your custom content.<br />
 					</p>
-					<h3>
-						Create your personal account now and run your D&D encounters smoother than ever.
-					</h3>
+					<h3>Create your personal account now and run your D&D encounters smoother than ever.</h3>
 				</div>
 				<span v-else>
-					Now that you've created an account you can start a campaign and run your custom encounters from there.
+					Now that you've created an account you can start a campaign and run your custom encounters
+					from there.
 				</span>
 				<div class="button">
 					<router-link v-if="!user" to="/sign-up" class="btn btn-lg">Create Account</router-link>
@@ -42,27 +40,27 @@
 </template>
 
 <script>
-	import  { mapActions, mapGetters } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 
-	export default {
-		name: 'DemoOverlay',
-		data () {
-			return {
-				showInfo: true
-			}
-		},
-		computed: {
-			...mapGetters(["user"]),
-		},
-		methods: {
-			...mapActions(["reset_demo"])
-		}
-	}
+export default {
+	name: "DemoOverlay",
+	data() {
+		return {
+			showInfo: true,
+		};
+	},
+	computed: {
+		...mapGetters(["user"]),
+	},
+	methods: {
+		...mapActions(["reset_demo"]),
+	},
+};
 </script>
 
 <style lang="scss" scoped>
 .demo {
-  pointer-events: none;
+	pointer-events: none;
 	position: fixed;
 	margin: 0 15px;
 	bottom: 0;
@@ -73,7 +71,7 @@
 	align-items: center;
 
 	.banner {
-    pointer-events: all;
+		pointer-events: all;
 		padding: 25px;
 		box-shadow: 0px 0px 15px $black;
 		max-width: 800px;
@@ -88,6 +86,7 @@
 		}
 	}
 	.toggle {
+		pointer-events: all;
 		position: fixed;
 		bottom: 20px;
 		right: 20px;
@@ -95,34 +94,34 @@
 		width: 50px;
 		z-index: 97;
 		text-align: center;
-		transition: right .5s linear;
+		transition: right 0.5s linear;
 		display: block;
 		cursor: pointer;
 		line-height: 50px;
-		color:$neutral-1 !important;
+		color: $neutral-1 !important;
 		border-radius: 50%;
 
 		i {
-				transition: transform .5s linear;
+			transition: transform 0.5s linear;
 		}
 		&.show {
 			i {
-					transform: rotate(180deg);
+				transform: rotate(180deg);
 			}
 		}
 	}
 }
 @media only screen and (max-width: 576px) {
-		.demo {
-			.banner {
-				.content {
-					flex-direction: column;
-				}
-			}
-			.toggle {
-				bottom: 70px;
-				right: 10px;
+	.demo {
+		.banner {
+			.content {
+				flex-direction: column;
 			}
 		}
+		.toggle {
+			bottom: 70px;
+			right: 10px;
+		}
 	}
+}
 </style>

From edb90742482b2307f24cd0534f51029df1a02376 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 16:39:35 +0200
Subject: [PATCH 35/55] use gamestate for current entity

---
 src/components/combat/Turns.vue | 12 +++++++++++-
 src/store/modules/tutorial.js   | 16 +++++++++++++++-
 src/views/RunEncounter.vue      |  2 +-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index fe3f20ca..f12bce99 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -322,7 +322,8 @@ export default {
 			"set_finished",
 			"reset_demo",
 		]),
-		...mapActions("tutorial", ["completeStep"]),
+		...mapActions("tutorial", ["completeStep", "setGameState"]),
+
 		startEncounter() {
 			this.set_turn({ turn: 0, round: 1 });
 			this.checkReminders(this.next, "startTurn");
@@ -380,6 +381,15 @@ export default {
 			this.set_finished();
 		},
 	},
+	watch: {
+		current: {
+			handler(newVal, _) {
+				const entity_type = newVal.entityType === "player" ? "player" : "monster";
+				console.log("Current changed", entity_type);
+				this.setGameState({ game_state_key: "current_entity_type", value: entity_type });
+			},
+		},
+	},
 };
 </script>
 
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 7efbd2aa..19b795f3 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -2,6 +2,9 @@ import Vue from "vue";
 
 const tutorial_state = () => ({
 	follow_tutorial: true,
+	game_state: {
+		current_entity_type: undefined,
+	},
 	build: {
 		name: "Build encounter",
 		steps: [
@@ -206,9 +209,14 @@ const tutorial_getters = {
 	get_tutorial: (state) => (tutorial) => {
 		return state[tutorial];
 	},
+	get_game_state: (state) => (game_state_key) => {
+		return state.game_state[game_state_key];
+	},
 	get_current_step:
-		(state) =>
+		(state, getters) =>
 		(tutorial, active_branch = undefined, transition = false) => {
+			// console.log("get current step ", active_branch);
+			// console.log("gamestate branch", getters.get_game_state("current_entity_type"));
 			const steps = state[tutorial].steps;
 			// const path = `#${tutorial}`;
 			const path = "";
@@ -283,12 +291,18 @@ const tutorial_actions = {
 		// console.log("Complete step:", tutorial, branch, path);
 		commit("SET_COMPLETE", { tutorial, path });
 	},
+	setGameState({ commit }, { game_state_key, value }) {
+		commit("SET_GAME_STATE", { game_state_key, value });
+	},
 };
 
 const tutorial_mutations = {
 	SET_TUTORIAL(state, payload) {
 		Vue.set(state, "follow_tutorial", payload);
 	},
+	SET_GAME_STATE(state, { game_state_key, value }) {
+		Vue.set(state.game_state, game_state_key, value);
+	},
 	SET_COMPLETE(state, { tutorial, path }) {
 		// console.log("SET COMPLETE", tutorial, path);
 		let step_reference = state[tutorial];
diff --git a/src/views/RunEncounter.vue b/src/views/RunEncounter.vue
index 74a7be03..4b15f522 100644
--- a/src/views/RunEncounter.vue
+++ b/src/views/RunEncounter.vue
@@ -57,7 +57,7 @@
 							ref="targets"
 							tabindex="0"
 							class="pane"
-              :current="_active[encounter.turn]"
+							:current="_active[encounter.turn]"
 							:_active="_active"
 							:_idle="_idle"
 							:class="{ focused: focused_pane === 'targets' }"

From 9c502db6c13503b9eb6fb851a681798574061dd6 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 28 Jun 2024 16:56:03 +0200
Subject: [PATCH 36/55] Highlight targets when targeting is required

---
 src/components/combat/Targets.vue       | 15 +++++----------
 src/components/demo/TutorialPopover.vue | 17 ++---------------
 src/store/modules/runEncounter.js       |  6 +++++-
 src/store/modules/tutorial.js           | 17 +++++++++++++++++
 4 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index 4d444db6..18639fd3 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -59,7 +59,7 @@
 							:class="{
 								targeted: targeted.includes(entity.key),
 								top: _active[0].key === entity.key && encounter.turn !== 0,
-								'step-highlight': i > 0 && demo && follow_tutorial && get_step('run', 'target'),
+								'step-highlight': i > 0 && demo && follow_tutorial && get_required('run', 'target'),
 							}"
 							tabindex="0"
 							@keydown.space="selectTarget($event, 'single', entity.key)"
@@ -137,7 +137,7 @@
 								v-if="group === 'active' && i === 1"
 								tutorial="run"
 								requirement="target"
-                :branch="tutorial_branch"
+								:branch="tutorial_branch"
 								position="right"
 								:offset="[10, 0]"
 							/>
@@ -178,7 +178,7 @@ export default {
 			"test",
 			"demo",
 		]),
-		...mapGetters("tutorial", ["get_step", "follow_tutorial"]),
+		...mapGetters("tutorial", ["get_required", "follow_tutorial"]),
 		groups() {
 			return [
 				{
@@ -229,7 +229,7 @@ export default {
 				.sortBy("name", "desc")
 				.value();
 		},
-    tutorial_branch() {
+		tutorial_branch() {
 			return this.current.entityType === "player" ? "player" : "monster";
 		},
 	},
@@ -288,16 +288,11 @@ export default {
 				type,
 				key,
 			});
-
-			// When an entity is targeted, complete the tutorial step
-			if (this.get_step("run", "target")) {
-				this.completeStep({ tutorial: "run" });
-			}
 		},
 		cycle_target(event) {
 			const lastSelected = this.targeted[this.targeted.length - 1];
 			const type =
-				event.srcKey === "upSingle" || event.srcKey === "downSingle" ? "single" : "multi"; //Multitarget or not
+				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;
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 3f6a25e6..0b04df01 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -81,6 +81,7 @@ export default {
 			"get_step",
 			"get_tutorial",
 			"get_requirement",
+			"get_required",
 		]),
 		...mapGetters(["targeted"]),
 		current_step() {
@@ -117,14 +118,6 @@ export default {
 					return "top middle";
 			}
 		},
-		requirement_met() {
-			switch (this.requirement) {
-				case "target":
-					return !!this.targeted?.length;
-				default:
-					return false;
-			}
-		},
 		show() {
 			if (!this.follow_tutorial) {
 				return false;
@@ -135,13 +128,7 @@ export default {
 			}
 
 			// If we are in a requirement popover we need to check if this requirement is needed for the current step
-			if (this.requirement_met) {
-				return false;
-			}
-			const requirement = this.get_requirement(this.tutorial, this.requirement);
-			return requirement.required_for.some(({ step, branch, transition }) =>
-				this.get_step(this.tutorial, step, this.branch, transition)
-			);
+			return this.get_required(this.tutorial, this.requirement);
 		},
 		name() {
 			return this.get_tutorial(this.tutorial)?.title;
diff --git a/src/store/modules/runEncounter.js b/src/store/modules/runEncounter.js
index 50dbbee1..3f2accac 100644
--- a/src/store/modules/runEncounter.js
+++ b/src/store/modules/runEncounter.js
@@ -1098,7 +1098,7 @@ const run_encounter_actions = {
 	 * @param {string} type single, multi, untarget
 	 * @param {string} key Entity key, all
 	 */
-	set_targeted({ state, commit }, { type, key }) {
+	set_targeted({ state, commit, dispatch }, { type, key }) {
 		let targeted = state.targeted;
 
 		//Untarget
@@ -1131,6 +1131,10 @@ const run_encounter_actions = {
 				targeted = [];
 			}
 		}
+
+		// set targeted in tutorial game state
+		dispatch("tutorial/setGameState", { game_state_key: "targeted", value: !!targeted?.length });
+
 		commit("SET_TARGETED", targeted);
 	},
 
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 19b795f3..6b99c26c 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -241,6 +241,23 @@ const tutorial_getters = {
 	get_requirement: (state) => (tutorial, requirement) => {
 		return state[tutorial].requirements[requirement];
 	},
+	get_required: (_state, getters) => (tutorial, requirement) => {
+		if (getters.requirement_met(requirement)) {
+			return false;
+		}
+		const requirement_step = getters.get_requirement(tutorial, requirement);
+		return requirement_step.required_for.some(({ step, branch, transition }) =>
+			getters.get_step(tutorial, step, branch, transition)
+		);
+	},
+	requirement_met: (state) => (requirement) => {
+		switch (requirement) {
+			case "target":
+				return state.game_state.targeted;
+			default:
+				return false;
+		}
+	},
 };
 const get_active_step = (steps, path, active_branch, transition) => {
 	const active_steps = steps.filter((step) => !step.completed);

From d4b0a3b4d07eadf17f7b1b246f2bf1fa9f92b936 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 17:16:55 +0200
Subject: [PATCH 37/55] remove branch

---
 src/components/combat/Targets.vue             |  1 -
 src/components/combat/Turns.vue               | 12 ++++-----
 src/components/combat/actions/Roll.vue        |  4 +--
 .../combat/actions/custom/Manual.vue          |  4 +--
 src/components/demo/TutorialPopover.vue       |  4 +--
 .../hk-components/hk-rolls/hk-single-roll.vue | 13 +++------
 src/store/modules/tutorial.js                 | 27 +++++++++----------
 7 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index 18639fd3..0f5cc1ed 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -137,7 +137,6 @@
 								v-if="group === 'active' && i === 1"
 								tutorial="run"
 								requirement="target"
-								:branch="tutorial_branch"
 								position="right"
 								:offset="[10, 0]"
 							/>
diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index f12bce99..c92abc11 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -143,8 +143,7 @@
 			<a
 				class="handler neutral-2 ml-2 px-2"
 				:class="{
-					'step-highlight':
-						demo && follow_tutorial && get_step('run', 'next', tutorial_branch, true),
+					'step-highlight': demo && follow_tutorial && get_step('run', 'next', true),
 				}"
 				v-shortkey="['shift', 'arrowright']"
 				@click="nextTurn()"
@@ -153,15 +152,13 @@
 				<TutorialPopover
 					tutorial="run"
 					step="next"
-					:branch="tutorial_branch"
-					:transition="true"
 					position="right"
 					:no_button="true"
 					:offset="[10, 0]"
 				/>
 				<i aria-hidden="true" class="fas fa-step-forward" />
 				<q-tooltip anchor="top middle" self="center middle">Next turn [shift] + [→]</q-tooltip>
-				<TutorialPopover step="next" :offset="[0, 10]" />
+				<TutorialPopover tutorial="initiative" step="next" :offset="[0, 10]" />
 			</a>
 		</div>
 		<div v-else>Set Initiative</div>
@@ -310,6 +307,7 @@ export default {
 			return `/content/campaigns/${this.$route.params.campid}`;
 		},
 		tutorial_branch() {
+			console.log("Tutorial branch", this.current.entityType);
 			return this.current.entityType === "player" ? "player" : "monster";
 		},
 	},
@@ -383,11 +381,11 @@ export default {
 	},
 	watch: {
 		current: {
-			handler(newVal, _) {
+			handler(newVal) {
 				const entity_type = newVal.entityType === "player" ? "player" : "monster";
-				console.log("Current changed", entity_type);
 				this.setGameState({ game_state_key: "current_entity_type", value: entity_type });
 			},
+			immediate: true,
 		},
 	},
 };
diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index e9ef59b1..edecbafc 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -209,15 +209,13 @@
 										<div
 											class="roll-wrapper"
 											:class="{
-												'step-highlight':
-													demo && follow_tutorial && get_step('run', 'roll', 'monster'),
+												'step-highlight': demo && follow_tutorial && get_step('run', 'roll'),
 											}"
 										>
 											<TutorialPopover
 												v-if="action_index == 0"
 												tutorial="run"
 												step="roll"
-												branch="monster"
 												position="right"
 												:offset="[20, 0]"
 											/>
diff --git a/src/components/combat/actions/custom/Manual.vue b/src/components/combat/actions/custom/Manual.vue
index dbcfcfe8..a2450ca8 100644
--- a/src/components/combat/actions/custom/Manual.vue
+++ b/src/components/combat/actions/custom/Manual.vue
@@ -29,7 +29,7 @@
 						min="0"
 						class="manual-input"
 						:class="{
-							'step-highlight': demo && follow_tutorial && get_step('run', 'manual', 'player'),
+							'step-highlight': demo && follow_tutorial && get_step('run', 'manual'),
 						}"
 						autocomplete="off"
 						:autofocus="autofocus"
@@ -61,7 +61,7 @@
 						<i aria-hidden="true" class="hki-heal" />
 						<q-tooltip anchor="center right" self="center left">[shift] + [enter]</q-tooltip>
 					</button>
-					<TutorialPopover step="manual" branch="player" position="right" :offset="[10, 0]" />
+					<TutorialPopover step="manual" position="right" :offset="[10, 0]" />
 				</div>
 			</ValidationProvider>
 
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 0b04df01..15e7f5c3 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -87,7 +87,7 @@ export default {
 		current_step() {
 			const step = this.requirement
 				? this.get_requirement(this.tutorial, this.requirement)
-				: this.get_current_step(this.tutorial, this.branch, this.transition);
+				: this.get_current_step(this.tutorial, this.transition);
 			return step;
 		},
 		anchor() {
@@ -124,7 +124,7 @@ export default {
 			}
 
 			if (!this.requirement) {
-				return this.get_step(this.tutorial, this.step, this.branch, this.transition);
+				return this.get_step(this.tutorial, this.step, this.transition);
 			}
 
 			// If we are in a requirement popover we need to check if this requirement is needed for the current step
diff --git a/src/components/hk-components/hk-rolls/hk-single-roll.vue b/src/components/hk-components/hk-rolls/hk-single-roll.vue
index 6e6a2a81..80049223 100644
--- a/src/components/hk-components/hk-rolls/hk-single-roll.vue
+++ b/src/components/hk-components/hk-rolls/hk-single-roll.vue
@@ -179,7 +179,6 @@
 							v-if="index === 0"
 							tutorial="run"
 							step="to-hit"
-							branch="monster"
 							position="right"
 							:offset="[15, 0]"
 						/>
@@ -194,10 +193,10 @@
 							switch-toggle-side
 							:group="`rolled-${index}`"
 							:class="{
-								'step-highlight': demo && follow_tutorial && get_step('run', 'details', 'monster'),
+								'step-highlight': demo && follow_tutorial && get_step('run', 'details'),
 							}"
 							@click="
-								get_step('run', 'details', 'monster')
+								get_step('run', 'details')
 									? completeStep({ tutorial: 'run', branch: 'monster' })
 									: null
 							"
@@ -213,8 +212,7 @@
 									<div
 										class="defenses"
 										:class="{
-											'step-highlight':
-												demo && follow_tutorial && get_step('run', 'defenses', 'monster'),
+											'step-highlight': demo && follow_tutorial && get_step('run', 'defenses'),
 										}"
 									>
 										<div
@@ -246,7 +244,6 @@
 											v-if="index === 0"
 											tutorial="run"
 											step="defenses"
-											branch="monster"
 											position="left"
 											:offset="[15, 0]"
 										/>
@@ -266,7 +263,6 @@
 									v-if="index === 0"
 									tutorial="run"
 									step="details"
-									branch="monster"
 									position="right"
 									:offset="[10, 0]"
 								/>
@@ -475,7 +471,7 @@
 				slot="footer"
 				class="card-footer"
 				:class="{
-					'step-highlight': demo && follow_tutorial && get_step('run', 'apply', 'monster'),
+					'step-highlight': demo && follow_tutorial && get_step('run', 'apply'),
 				}"
 			>
 				<q-btn
@@ -507,7 +503,6 @@
 					v-if="index === 0"
 					tutorial="run"
 					step="apply"
-					branch="monster"
 					position="right"
 					:offset="[10, 0]"
 				/>
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 6b99c26c..c9d1c8f8 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -214,18 +214,18 @@ const tutorial_getters = {
 	},
 	get_current_step:
 		(state, getters) =>
-		(tutorial, active_branch = undefined, transition = false) => {
-			// console.log("get current step ", active_branch);
-			// console.log("gamestate branch", getters.get_game_state("current_entity_type"));
+		(tutorial, transition = false) => {
 			const steps = state[tutorial].steps;
 			// const path = `#${tutorial}`;
 			const path = "";
+			const active_branch = getters.get_game_state("current_entity_type");
 			return get_active_step(steps, path, active_branch, transition).step;
 		},
-	get_current_step_path: (state) => (tutorial, active_branch) => {
+	get_current_step_path: (state, getters) => (tutorial) => {
 		const steps = state[tutorial].steps;
 		// const path = `#${tutorial}`;
 		const path = "";
+		const active_branch = getters.get_game_state("current_entity_type");
 		return get_active_step(steps, path, active_branch).path;
 	},
 	get_current_step_index: (state) => (tutorial) => {
@@ -233,8 +233,9 @@ const tutorial_getters = {
 	},
 	get_step:
 		(_state, getters) =>
-		(tutorial, step, branch = undefined, transition = false) => {
-			const current_step = getters.get_current_step(tutorial, branch, transition);
+		(tutorial, step, transition = false) => {
+			const current_step = getters.get_current_step(tutorial, transition);
+			console.log("GET STEP:", current_step?.key, transition);
 			const at_step = current_step?.key === step;
 			return at_step;
 		},
@@ -288,11 +289,11 @@ const get_branch_steps = (branches, active_branch, transition) => {
 		return { branch_steps, branch_key: undefined };
 	}
 	if (branches[active_branch].completed) {
-		if (transition) {
-			branch_steps = branches.transition.completed ? [] : branches.transition.steps;
-			return { branch_steps, branch_key: "transition" };
-		}
-		return { branch_steps, branch_key: active_branch };
+		// if (transition) {
+		branch_steps = branches.transition.completed ? [] : branches.transition.steps;
+		return { branch_steps, branch_key: "transition" };
+		// }
+		// return { branch_steps, branch_key: active_branch };
 	}
 	branch_steps = branches[active_branch].steps;
 	return { branch_steps, branch_key: active_branch };
@@ -303,9 +304,7 @@ const tutorial_actions = {
 		commit("SET_TUTORIAL", !state.follow_tutorial);
 	},
 	completeStep({ commit, getters }, { tutorial, branch }) {
-		// path = run.action<player.
-		const path = getters.get_current_step_path(tutorial, branch);
-		// console.log("Complete step:", tutorial, branch, path);
+		const path = getters.get_current_step_path(tutorial);
 		commit("SET_COMPLETE", { tutorial, path });
 	},
 	setGameState({ commit }, { game_state_key, value }) {

From ee005b073b8a670e2c45035ebed693ee37bb0b6c Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 17:24:07 +0200
Subject: [PATCH 38/55] remove branch from completeStep

---
 src/components/combat/Turns.vue               |  4 +-
 src/components/combat/actions/Roll.vue        |  2 +-
 .../combat/actions/custom/Manual.vue          |  2 +-
 src/components/demo/TutorialPopover.vue       |  4 +-
 .../hk-components/hk-rolls/hk-single-roll.vue | 18 ++------
 src/store/modules/tutorial.js                 | 46 +++++++------------
 6 files changed, 28 insertions(+), 48 deletions(-)

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index c92abc11..119ef5a8 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -143,7 +143,7 @@
 			<a
 				class="handler neutral-2 ml-2 px-2"
 				:class="{
-					'step-highlight': demo && follow_tutorial && get_step('run', 'next', true),
+					'step-highlight': demo && follow_tutorial && get_step('run', 'next'),
 				}"
 				v-shortkey="['shift', 'arrowright']"
 				@click="nextTurn()"
@@ -382,7 +382,7 @@ export default {
 	watch: {
 		current: {
 			handler(newVal) {
-				const entity_type = newVal.entityType === "player" ? "player" : "monster";
+				const entity_type = newVal?.entityType === "player" ? "player" : "monster";
 				this.setGameState({ game_state_key: "current_entity_type", value: entity_type });
 			},
 			immediate: true,
diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index edecbafc..c500f4df 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -410,7 +410,7 @@ export default {
 			this.cancelRoll();
 
 			if (this.get_step("run", "roll", "monster")) {
-				this.completeStep({ tutorial: "run", branch: "monster" });
+				this.completeStep({ tutorial: "run" });
 			}
 		},
 		cancelRoll() {
diff --git a/src/components/combat/actions/custom/Manual.vue b/src/components/combat/actions/custom/Manual.vue
index a2450ca8..a929da24 100644
--- a/src/components/combat/actions/custom/Manual.vue
+++ b/src/components/combat/actions/custom/Manual.vue
@@ -300,7 +300,7 @@ export default {
 
 			// If a value is applied, complete the tutorial step
 			if (this.get_step("run", "manual", "player")) {
-				this.completeStep({ tutorial: "run", branch: "player" });
+				this.completeStep({ tutorial: "run" });
 			}
 		},
 	},
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 15e7f5c3..cbbdef2f 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -26,7 +26,7 @@
 					<button
 						v-if="!no_button"
 						class="btn btn-sm bg-yellow black"
-						@click="completeStep({ tutorial, branch })"
+						@click="completeStep({ tutorial })"
 					>
 						Next <hk-icon icon="fas fa-chevron-right" />
 					</button>
@@ -87,7 +87,7 @@ export default {
 		current_step() {
 			const step = this.requirement
 				? this.get_requirement(this.tutorial, this.requirement)
-				: this.get_current_step(this.tutorial, this.transition);
+				: this.get_current_step(this.tutorial);
 			return step;
 		},
 		anchor() {
diff --git a/src/components/hk-components/hk-rolls/hk-single-roll.vue b/src/components/hk-components/hk-rolls/hk-single-roll.vue
index 80049223..0be3e9de 100644
--- a/src/components/hk-components/hk-rolls/hk-single-roll.vue
+++ b/src/components/hk-components/hk-rolls/hk-single-roll.vue
@@ -124,9 +124,7 @@
 								@keydown.enter="shortkeyApply"
 								@keydown.backspace="removeRoll(index)"
 								@click="
-									get_step('run', 'to-hit', 'monster')
-										? completeStep({ tutorial: 'run', branch: 'monster' })
-										: null
+									get_step('run', 'to-hit', 'monster') ? completeStep({ tutorial: 'run' }) : null
 								"
 							/>
 						</template>
@@ -168,9 +166,7 @@
 								@keydown.enter="shortkeyApply"
 								@keydown.backspace="removeRoll(index)"
 								@click="
-									get_step('run', 'to-hit', 'monster')
-										? completeStep({ tutorial: 'run', branch: 'monster' })
-										: null
+									get_step('run', 'to-hit', 'monster') ? completeStep({ tutorial: 'run' }) : null
 								"
 							/>
 						</template>
@@ -195,11 +191,7 @@
 							:class="{
 								'step-highlight': demo && follow_tutorial && get_step('run', 'details'),
 							}"
-							@click="
-								get_step('run', 'details')
-									? completeStep({ tutorial: 'run', branch: 'monster' })
-									: null
-							"
+							@click="get_step('run', 'details') ? completeStep({ tutorial: 'run' }) : null"
 						>
 							<template #header>
 								<q-item-section v-if="action.type === 'healing'">
@@ -773,7 +765,7 @@ export default {
 				}
 			}
 			if (this.get_step("run", "apply", "monster")) {
-				this.completeStep({ tutorial: "run", branch: "monster" });
+				this.completeStep({ tutorial: "run" });
 			}
 			// Remove the roll
 			this.removeRoll(this.index);
@@ -838,7 +830,7 @@ export default {
 				this.$set(this.resistances, type, resistance);
 			}
 			if (this.get_step("run", "defenses", "monster")) {
-				this.completeStep({ tutorial: "run", branch: "monster" });
+				this.completeStep({ tutorial: "run" });
 			}
 			this.$forceUpdate();
 		},
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index c9d1c8f8..77be2d35 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -212,15 +212,13 @@ const tutorial_getters = {
 	get_game_state: (state) => (game_state_key) => {
 		return state.game_state[game_state_key];
 	},
-	get_current_step:
-		(state, getters) =>
-		(tutorial, transition = false) => {
-			const steps = state[tutorial].steps;
-			// const path = `#${tutorial}`;
-			const path = "";
-			const active_branch = getters.get_game_state("current_entity_type");
-			return get_active_step(steps, path, active_branch, transition).step;
-		},
+	get_current_step: (state, getters) => (tutorial) => {
+		const steps = state[tutorial].steps;
+		// const path = `#${tutorial}`;
+		const path = "";
+		const active_branch = getters.get_game_state("current_entity_type");
+		return get_active_step(steps, path, active_branch).step;
+	},
 	get_current_step_path: (state, getters) => (tutorial) => {
 		const steps = state[tutorial].steps;
 		// const path = `#${tutorial}`;
@@ -231,14 +229,11 @@ const tutorial_getters = {
 	get_current_step_index: (state) => (tutorial) => {
 		return state[tutorial]?.steps.findIndex((step) => !step.completed);
 	},
-	get_step:
-		(_state, getters) =>
-		(tutorial, step, transition = false) => {
-			const current_step = getters.get_current_step(tutorial, transition);
-			console.log("GET STEP:", current_step?.key, transition);
-			const at_step = current_step?.key === step;
-			return at_step;
-		},
+	get_step: (_state, getters) => (tutorial, step) => {
+		const current_step = getters.get_current_step(tutorial);
+		const at_step = current_step?.key === step;
+		return at_step;
+	},
 	get_requirement: (state) => (tutorial, requirement) => {
 		return state[tutorial].requirements[requirement];
 	},
@@ -260,7 +255,7 @@ const tutorial_getters = {
 		}
 	},
 };
-const get_active_step = (steps, path, active_branch, transition) => {
+const get_active_step = (steps, path, active_branch) => {
 	const active_steps = steps.filter((step) => !step.completed);
 	if (active_steps.length === 0) {
 		return { step: undefined, path };
@@ -274,26 +269,19 @@ const get_active_step = (steps, path, active_branch, transition) => {
 		return { step: current_step, path };
 	}
 	// Branching
-	const { branch_steps, branch_key } = get_branch_steps(
-		current_step.branch,
-		active_branch,
-		transition
-	);
+	const { branch_steps, branch_key } = get_branch_steps(current_step.branch, active_branch);
 	path += `<${branch_key}`;
-	return get_active_step(branch_steps, path, active_branch, transition);
+	return get_active_step(branch_steps, path, active_branch);
 };
 
-const get_branch_steps = (branches, active_branch, transition) => {
+const get_branch_steps = (branches, active_branch) => {
 	let branch_steps = [];
 	if (!branches.hasOwnProperty(active_branch)) {
 		return { branch_steps, branch_key: undefined };
 	}
 	if (branches[active_branch].completed) {
-		// if (transition) {
 		branch_steps = branches.transition.completed ? [] : branches.transition.steps;
 		return { branch_steps, branch_key: "transition" };
-		// }
-		// return { branch_steps, branch_key: active_branch };
 	}
 	branch_steps = branches[active_branch].steps;
 	return { branch_steps, branch_key: active_branch };
@@ -303,7 +291,7 @@ const tutorial_actions = {
 	toggleTutorial({ state, commit }) {
 		commit("SET_TUTORIAL", !state.follow_tutorial);
 	},
-	completeStep({ commit, getters }, { tutorial, branch }) {
+	completeStep({ commit, getters }, { tutorial }) {
 		const path = getters.get_current_step_path(tutorial);
 		commit("SET_COMPLETE", { tutorial, path });
 	},

From cf323737fc2f0ec10f6b01ee97a11963f5e79aa8 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 28 Jun 2024 17:53:13 +0200
Subject: [PATCH 39/55] overflow visible

---
 src/components/combat/actions/Actions.vue     | 22 ++++++++++++++-----
 .../combat/actions/custom/index.vue           | 10 ++++++++-
 src/store/modules/tutorial.js                 |  1 -
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/combat/actions/Actions.vue b/src/components/combat/actions/Actions.vue
index 14f8625d..bee1749a 100644
--- a/src/components/combat/actions/Actions.vue
+++ b/src/components/combat/actions/Actions.vue
@@ -123,8 +123,13 @@
 					</q-tooltip>
 				</q-tab>
 			</q-tabs>
-			<q-tab-panels v-model="tab" class="bg-transparent">
-				<q-tab-panel :name="name" v-for="{ name } in tabs" :key="`panel-${name}`">
+			<q-tab-panels v-model="tab" class="bg-transparent overflow-visible">
+				<q-tab-panel
+					:name="name"
+					class="overflow-visible"
+					v-for="{ name } in tabs"
+					:key="`panel-${name}`"
+				>
 					<Custom
 						v-if="name === 'manual'"
 						:current="entitiesList[doneBy]"
@@ -295,12 +300,11 @@ export default {
 .modes {
 	&::v-deep {
 		.q-tabs {
-			
 			&__content {
 				padding: 10px;
 				margin: -10px;
 				gap: 0.5rem;
-				
+
 				.q-tab {
 					border: solid 1px transparent;
 					border-radius: $border-radius;
@@ -315,10 +319,18 @@ export default {
 	}
 }
 
-
 .q-tab-panel {
 	padding: 15px 0 0 0 !important;
 }
+.overflow-visible {
+	overflow: visible;
+	&::v-deep {
+		.q-panel {
+			overflow: visible;
+		}
+	}
+}
+
 .img {
 	display: block;
 	width: 35px;
diff --git a/src/components/combat/actions/custom/index.vue b/src/components/combat/actions/custom/index.vue
index 4a5d6712..c6124218 100644
--- a/src/components/combat/actions/custom/index.vue
+++ b/src/components/combat/actions/custom/index.vue
@@ -10,7 +10,7 @@
 			/>
 		</q-tabs>
 
-		<q-tab-panels v-model="tab" class="bg-transparent">
+		<q-tab-panels v-model="tab" class="bg-transparent overflow-visible">
 			<q-tab-panel :name="name" v-for="{ name } in tabs" :key="`panel-${name}`">
 				<Manual v-if="name === 'manual'" :current="current" :autofocus="autofocus" />
 				<CustomRoll v-if="name === 'roll'" :current="current" />
@@ -46,4 +46,12 @@ export default {
 .q-tab-panel {
 	padding: 15px 0;
 }
+.overflow-visible {
+	overflow: visible;
+	&::v-deep {
+		.q-panel {
+			overflow: visible;
+		}
+	}
+}
 </style>
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 77be2d35..19430701 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -308,7 +308,6 @@ const tutorial_mutations = {
 		Vue.set(state.game_state, game_state_key, value);
 	},
 	SET_COMPLETE(state, { tutorial, path }) {
-		// console.log("SET COMPLETE", tutorial, path);
 		let step_reference = state[tutorial];
 		let branch_reference = {};
 		let branch_root = {};

From 8075002ae47a9c7f2cce2605ea7ece7979880ca3 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sun, 30 Jun 2024 22:13:00 +0200
Subject: [PATCH 40/55] Show dialog at the end of the run tutorial

---
 .../combat/TutorialFinishedDialog.vue         | 39 +++++++++++++++++++
 src/components/combat/actions/Roll.vue        | 21 +++++-----
 src/store/modules/tutorial.js                 | 10 ++++-
 src/views/RunEncounter.vue                    |  3 ++
 4 files changed, 62 insertions(+), 11 deletions(-)
 create mode 100644 src/components/combat/TutorialFinishedDialog.vue

diff --git a/src/components/combat/TutorialFinishedDialog.vue b/src/components/combat/TutorialFinishedDialog.vue
new file mode 100644
index 00000000..f7a3f4f1
--- /dev/null
+++ b/src/components/combat/TutorialFinishedDialog.vue
@@ -0,0 +1,39 @@
+<template>
+	<q-dialog v-model="tutorial_finished" persistent>
+		<hk-card header="Thanks for trying our demo">
+			<div class="card-body text-center">
+				<h3>We hope you were impressed by the possibilities</h3>
+				<p>
+					This is exactly how you can run your custom created encounters in our app, with your own
+					players, and monsters from the SRD or created by you.
+				</p>
+				<p>Create a free account to use our tools to their full extend</p>
+				<router-link to="/sign-up" class="btn btn-lg btn-block">Create account</router-link>
+			</div>
+			<div slot="footer" class="card-footer">
+				<button class="btn bg-neutral-5" @click="resetTutorial">Reset tutorial</button>
+			</div>
+		</hk-card>
+	</q-dialog>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+	name: "TutorialFinished",
+	data() {
+		return {};
+	},
+	computed: {
+		...mapGetters(["demo"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
+		tutorial_finished() {
+			return this.demo && this.follow_tutorial && this.get_step("run", "finished");
+		},
+	},
+	methods: {
+		...mapActions("tutorial", ["resetTutorial"]),
+	},
+};
+</script>
diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index c500f4df..96e4a48e 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -482,6 +482,18 @@ h3 {
 	border-radius: 50%;
 	padding: 5px;
 	margin: -10px;
+
+	&::v-deep {
+		.hk-roll {
+			padding: 10px;
+			margin: -10px;
+			border-radius: 50%;
+
+			&:focus {
+				background: $neutral-5;
+			}
+		}
+	}
 }
 .roll-button {
 	display: inline-block;
@@ -494,15 +506,6 @@ h3 {
 	vertical-align: -5px;
 	user-select: none;
 }
-.hk-roll {
-	padding: 10px;
-	margin: -10px;
-	border-radius: 50%;
-
-	&:focus {
-		background: $neutral-5;
-	}
-}
 .advantage .roll-button:hover,
 .advantage.hk-roll:focus .roll-button {
 	background-image: url("../../../assets/_img/logo/logo-icon-no-shield-green.svg");
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 19430701..16caa577 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -6,7 +6,7 @@ const tutorial_state = () => ({
 		current_entity_type: undefined,
 	},
 	build: {
-		name: "Build encounter",
+		title: "Build encounter",
 		steps: [
 			{
 				key: "add-players",
@@ -30,7 +30,7 @@ const tutorial_state = () => ({
 		],
 	},
 	initiative: {
-		name: "Setting initiative",
+		title: "Setting initiative",
 		steps: [
 			{
 				key: "players",
@@ -178,6 +178,11 @@ const tutorial_state = () => ({
 					"You can manually edit an entity to update their base values, or give them <strong>Armor class bonus</strong>, <strong>Maximum hit points modifier</strong> and <strong>Temporary hit points</strong>",
 				completed: false,
 			},
+			{
+				key: "finished",
+				title: "Tutorial finished",
+				completed: false,
+			},
 		],
 		requirements: {
 			target: {
@@ -298,6 +303,7 @@ const tutorial_actions = {
 	setGameState({ commit }, { game_state_key, value }) {
 		commit("SET_GAME_STATE", { game_state_key, value });
 	},
+	resetTutorial({ state, commit }) {},
 };
 
 const tutorial_mutations = {
diff --git a/src/views/RunEncounter.vue b/src/views/RunEncounter.vue
index 4b15f522..b7707a13 100644
--- a/src/views/RunEncounter.vue
+++ b/src/views/RunEncounter.vue
@@ -108,6 +108,7 @@
 			</template>
 		</div>
 		<DemoOverlay v-if="demo" />
+		<TutorialFinishedDialog v-if="demo" />
 		<q-dialog v-model="demo_dialog" persistent>
 			<hk-card header="Create custom content">
 				<div class="card-body text-center">
@@ -146,6 +147,7 @@ import Side from "src/components/combat/side/Side.vue";
 import SetInitiative from "src/components/combat/initiative";
 import OverEncumbered from "src/components/userContent/OverEncumbered.vue";
 import DemoOverlay from "src/components/combat/DemoOverlay.vue";
+import TutorialFinishedDialog from "src/components/combat/TutorialFinishedDialog.vue";
 
 export default {
 	name: "RunEncounter",
@@ -162,6 +164,7 @@ export default {
 		SetInitiative,
 		OverEncumbered,
 		DemoOverlay,
+		TutorialFinishedDialog,
 	},
 	mixins: [audio],
 	data() {

From 3321a6bb3c4b709f349873829027c38f9b41de10 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 5 Jul 2024 13:32:36 +0200
Subject: [PATCH 41/55] Hide next buttons and show action to perform

---
 src/components/demo/TutorialPopover.vue | 59 +++++++++++++++++--------
 src/components/encounters/index.vue     |  2 +-
 src/css/styles.scss                     |  1 -
 src/store/modules/tutorial.js           | 22 ++++++++-
 4 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index cbbdef2f..7e90dfb3 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -1,5 +1,5 @@
 <template>
-	<q-menu
+	<q-popup-proxy
 		v-model="show"
 		v-bind="$attrs"
 		:dark="$store.getters.theme === 'dark'"
@@ -22,18 +22,24 @@
 					{{ current_step?.title }}
 				</div>
 				<p v-html="current_step?.description" />
-				<div class="d-flex justify-content-end items-center gap-1">
-					<button
-						v-if="!no_button"
-						class="btn btn-sm bg-yellow black"
-						@click="completeStep({ tutorial })"
-					>
-						Next <hk-icon icon="fas fa-chevron-right" />
-					</button>
+				<div class="d-flex justify-content-between items-center gap-1">
+					<div class="tutorial__action" v-html="current_step.action" />
+					<div>
+						<button
+							v-if="current_step.next"
+							class="btn btn-sm bg-yellow black d-none d-md-block"
+							@click="completeStep({ tutorial })"
+						>
+							Next <hk-icon icon="fas fa-chevron-right" />
+						</button>
+						<button class="btn btn-sm bg-yellow black d-block d-md-none" @click="hideOrNext">
+							{{ current_step.next ? "Next" : "Hide" }}
+						</button>
+					</div>
 				</div>
 			</div>
 		</hk-card>
-	</q-menu>
+	</q-popup-proxy>
 </template>
 
 <script>
@@ -118,17 +124,26 @@ export default {
 					return "top middle";
 			}
 		},
-		show() {
-			if (!this.follow_tutorial) {
-				return false;
-			}
+		show: {
+			get() {
+				if (this.stepSetter !== undefined) {
+					return this.stepSetter;
+				}
 
-			if (!this.requirement) {
-				return this.get_step(this.tutorial, this.step, this.transition);
-			}
+				if (!this.follow_tutorial) {
+					return false;
+				}
+
+				if (!this.requirement) {
+					return this.get_step(this.tutorial, this.step, this.transition);
+				}
 
-			// If we are in a requirement popover we need to check if this requirement is needed for the current step
-			return this.get_required(this.tutorial, this.requirement);
+				// If we are in a requirement popover we need to check if this requirement is needed for the current step
+				return this.get_required(this.tutorial, this.requirement);
+			},
+			set(newVal) {
+				this.stepSetter = newVal;
+			},
 		},
 		name() {
 			return this.get_tutorial(this.tutorial)?.title;
@@ -139,6 +154,9 @@ export default {
 		stop() {
 			this.toggleTutorial();
 		},
+		hideOrNext() {
+			this.current_step.next ? this.completeStep() : (this.show = false);
+		},
 	},
 };
 </script>
@@ -161,5 +179,8 @@ export default {
 	&__title {
 		font-weight: bold;
 	}
+	&__action {
+		font-weight: bold;
+	}
 }
 </style>
diff --git a/src/components/encounters/index.vue b/src/components/encounters/index.vue
index 4f9032df..d5f64899 100644
--- a/src/components/encounters/index.vue
+++ b/src/components/encounters/index.vue
@@ -12,7 +12,7 @@
 		<SignedIn v-if="user && demo" />
 		<div class="d-flex justify-between items-center gap-1 mb-3">
 			<slot />
-			<h1 class="written mb-0 flex-grow truncate">
+			<h1 class="written mb-0 flex-grow truncate d-none d-md-flex">
 				{{ demo ? "Encounter builder for D&D" : encounter.name }}
 			</h1>
 			<div>
diff --git a/src/css/styles.scss b/src/css/styles.scss
index b78370cf..74699e2b 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -1369,7 +1369,6 @@ html body {
 		border-radius: $border-radius-small;
 		background: $blue;
 		color: $neutral-1;
-		display: inline-block;
 		font-weight: 400;
 		text-align: center;
 		vertical-align: middle;
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 16caa577..494c344a 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -12,6 +12,7 @@ const tutorial_state = () => ({
 				key: "add-players",
 				title: "Add players",
 				description: "Let's start with adding some players to your encounter.",
+				action: "Click Add players",
 				completed: false,
 			},
 			{
@@ -19,12 +20,15 @@ const tutorial_state = () => ({
 				title: "Add monsters",
 				description:
 					"<p>Now let's give those players a challenge by adding some monsters.</p> The plus buttons adds them with average hit point, the D20 button rolls the hit points.",
+				action: 'Click <i class="fas fa-plus"></i> or <i class="fas fa-dice-d20"></i>',
 				completed: false,
 			},
 			{
 				key: "start",
 				title: "Ready to go!",
-				description: "If you added at least 1 player and 1 monster, you can start your encounter.",
+				description:
+					"You can add as many monsters and players as you like. When you're ready, you can start the encounter.",
+				action: "Click Run encounter",
 				completed: false,
 			},
 		],
@@ -37,18 +41,21 @@ const tutorial_state = () => ({
 				title: "Player initiative",
 				description:
 					"<p>Your players will want to roll their own initiative, therefore we input it manually here.</p> Use tab to skip to the next player.",
+				action: "Enter initiative",
 				completed: false,
 			},
 			{
 				key: "monsters",
 				title: "Monster initiative",
 				description: "Monster initiative can be rolled individually or all at once with one click.",
+				action: "Click Roll all",
 				completed: false,
 			},
 			{
 				key: "start",
 				title: "Start combat!",
 				description: "With the turn order decided, you can start the encounter!",
+				action: "Click Start encounter",
 				completed: false,
 			},
 		],
@@ -70,6 +77,7 @@ const tutorial_state = () => ({
 								title: "Input value",
 								description:
 									"<p>Input the amount of damage or healing you want to apply to the target(s).</p> Use the <strong>Attack</strong> [Enter] button to damage your targets or the <strong>Heal</strong> [Shift + Enter] button to heal them.",
+								action: "Enter value and click Attack or Heal",
 								completed: false,
 							},
 						],
@@ -82,6 +90,7 @@ const tutorial_state = () => ({
 								title: "Roll action",
 								description:
 									"Select an action you want to roll and click the <strong>D20</strong> to automatically roll the action.",
+								action: "Click the button",
 								completed: false,
 							},
 							{
@@ -91,6 +100,7 @@ const tutorial_state = () => ({
 									"<p>We automatically determine if your roll was a hit or miss, based on the target's AC. You can always turn a hit into miss manually.</p>" +
 									"<p>For Saving Throw actions you have to manually set it as a success or fail.</p>" +
 									"This does not apply for <strong>healing</strong> actions.",
+								next: true,
 								completed: false,
 							},
 							{
@@ -100,6 +110,7 @@ const tutorial_state = () => ({
 									"<p>With the <strong>V</strong>ulnerable, <strong>R</strong>esistent and <strong>I</strong>mmune buttons you can update a target's defenses for the damage type of the current attack.</p>" +
 									"<p>Monsters and Players can have their defenses set before hand, but it can always be overruled for any roll you make.<p>" +
 									"This does not apply for <strong>healing</strong> actions.",
+								next: true,
 								completed: false,
 							},
 							{
@@ -108,6 +119,7 @@ const tutorial_state = () => ({
 								description:
 									"<p>Click on the row to show details about the roll.</p>" +
 									"<strong>TIP</strong> From the details you can  reroll any die you want.",
+								next: true,
 								completed: false,
 							},
 							{
@@ -119,6 +131,7 @@ const tutorial_state = () => ({
 									"<strong>Half</strong> Apply half of the total value (rounded down).<br/>" +
 									"<strong>Double</strong> Apply the total value multiplied by 2.<br/>" +
 									'<strong><i class="fas fa-times"></i></strong> Do not apply the value.',
+								action: "Click Full, Half or Double",
 								completed: false,
 							},
 						],
@@ -132,6 +145,7 @@ const tutorial_state = () => ({
 								description:
 									"<p>Go to the next turn using the <strong><i class='fas fa-step-forward'></i></strong> button or using the shortcut: [shift]+[→]</p>" +
 									"<em><small>(This tutorial step stays active until next step is reached)</small></em>",
+								action: 'Click <i class="fas fa-step-forward"></i>',
 								completed: false,
 							},
 						],
@@ -145,6 +159,7 @@ const tutorial_state = () => ({
 					"<p>You can perform an out of turn action at any time during a round.</p>" +
 					"<p>This can be useful for opportunity attacks and legendary actions.</p>" +
 					'For these out of turn actions you first select the target(s) and then click the <strong><i class="fas fa-swords"></i></strong> button. You then select who performs the action.',
+				next: true,
 				completed: false,
 			},
 			{
@@ -152,6 +167,7 @@ const tutorial_state = () => ({
 				title: "Conditions",
 				description:
 					'You can apply conditions to your target(s) using the <strong><i class="fas fa-flame"></i></strong> button.',
+				next: true,
 				completed: false,
 			},
 			{
@@ -161,6 +177,7 @@ const tutorial_state = () => ({
 					"<p>Reminders will notify you when an event is triggered on a target.<p>" +
 					"<p>You can be notified when a <strong>concentrating</strong> target takes damage for instance.<p>" +
 					'You can apply reminders to your target(s) using the <strong><i class="fas fa-stopwatch"></i></strong> button.',
+				next: true,
 				completed: false,
 			},
 			{
@@ -169,6 +186,7 @@ const tutorial_state = () => ({
 				description:
 					'<p>You can transform a target into another entity using the <strong><i class="fas fa-paw"></i></strong> button.</p>' +
 					"This can used for a druid's <strong>Wildshape</strong> or on the target of a <strong>Polymorph</strong> spell.",
+				next: true,
 				completed: false,
 			},
 			{
@@ -176,6 +194,7 @@ const tutorial_state = () => ({
 				title: "Edit entity",
 				description:
 					"You can manually edit an entity to update their base values, or give them <strong>Armor class bonus</strong>, <strong>Maximum hit points modifier</strong> and <strong>Temporary hit points</strong>",
+				next: true,
 				completed: false,
 			},
 			{
@@ -193,6 +212,7 @@ const tutorial_state = () => ({
 					"<p>Most of the actions you can perform require at least one target.</p>" +
 					"<strong>TIP!</strong> You can select multiple targets at once by holding shift and clicking.",
 				completed: false,
+				action: "Click a target",
 				required_for: [
 					{ step: "roll", branch: "monster", transition: true },
 					{ step: "manual", branch: "player", transition: true },

From 3b8955bf6d38cbe2f7fb235227913e15dad3a6e3 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 5 Jul 2024 12:32:56 +0200
Subject: [PATCH 42/55] get progress

---
 src/components/demo/TutorialPopover.vue |  5 +++++
 src/store/modules/tutorial.js           | 27 +++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 7e90dfb3..11a3c382 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -13,6 +13,7 @@
 			<div class="p-2">
 				<div class="tutorial__header">
 					<span>{{ name }}</span>
+					<div>{{ progress.completed++ }} / {{ progress.total }}</div>
 					<span class="p-1 pointer" @click="stop">
 						<hk-icon icon="fas fa-times-circle" />
 						<q-tooltip anchor="top middle" self="bottom middle">Stop tutorial</q-tooltip>
@@ -88,6 +89,7 @@ export default {
 			"get_tutorial",
 			"get_requirement",
 			"get_required",
+			"get_tutorial_progress",
 		]),
 		...mapGetters(["targeted"]),
 		current_step() {
@@ -96,6 +98,9 @@ export default {
 				: this.get_current_step(this.tutorial);
 			return step;
 		},
+		progress() {
+			return this.get_tutorial_progress(this.tutorial);
+		},
 		anchor() {
 			switch (this.position) {
 				case "bottom":
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 494c344a..8906a48c 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -279,6 +279,10 @@ const tutorial_getters = {
 				return false;
 		}
 	},
+	get_tutorial_progress: (state, getters) => (tutorial) => {
+		const steps = state[tutorial].steps;
+		return count_steps(steps);
+	},
 };
 const get_active_step = (steps, path, active_branch) => {
 	const active_steps = steps.filter((step) => !step.completed);
@@ -312,6 +316,29 @@ const get_branch_steps = (branches, active_branch) => {
 	return { branch_steps, branch_key: active_branch };
 };
 
+const count_steps = (steps) => {
+	const step_counts = steps.reduce(
+		(counts, step) => {
+			if (!step.branch) {
+				counts.completed += step.completed;
+				counts.total += 1;
+			} else {
+				const branch_steps = step.completed_after.reduce(
+					(all_steps, branch_name) => all_steps.concat(step.branch[branch_name].steps),
+					[]
+				);
+				const { completed, total } = get_completed_steps(branch_steps);
+				counts.completed += completed;
+				counts.total += total;
+			}
+
+			return counts;
+		},
+		{ completed: 0, total: 0 }
+	);
+	return step_counts;
+};
+
 const tutorial_actions = {
 	toggleTutorial({ state, commit }) {
 		commit("SET_TUTORIAL", !state.follow_tutorial);

From dac95bb8e18d1d2c0b845cd7f953423b3bbdce28 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 5 Jul 2024 13:33:23 +0200
Subject: [PATCH 43/55] Added progress bar

---
 src/components/demo/TutorialPopover.vue | 7 +++++--
 src/css/styles.scss                     | 7 +++++++
 src/css/variables.scss                  | 2 ++
 src/store/modules/tutorial.js           | 2 +-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 11a3c382..c588706b 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -9,11 +9,11 @@
 		no-parent-event
 	>
 		<hk-card class="tutorial" no-margin>
-			<!-- <q-linear-progress size="5" color="info" :value="progress(tutorial, step)" /> -->
+			<q-linear-progress size="7px" color="yellow-dark" :value="progress_frac" />
 			<div class="p-2">
 				<div class="tutorial__header">
+					<div>{{ progress.completed + 1 }} / {{ progress.total }}</div>
 					<span>{{ name }}</span>
-					<div>{{ progress.completed++ }} / {{ progress.total }}</div>
 					<span class="p-1 pointer" @click="stop">
 						<hk-icon icon="fas fa-times-circle" />
 						<q-tooltip anchor="top middle" self="bottom middle">Stop tutorial</q-tooltip>
@@ -101,6 +101,9 @@ export default {
 		progress() {
 			return this.get_tutorial_progress(this.tutorial);
 		},
+		progress_frac() {
+			return this.progress.completed / this.progress.total;
+		},
 		anchor() {
 			switch (this.position) {
 				case "bottom":
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 74699e2b..03c2cd93 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -307,6 +307,13 @@ html body {
 			fill: $yellow-light !important;
 		}
 	}
+	.yellow-dark,
+	.text-yellow-dark {
+		color: $yellow-dark !important;
+		path {
+			fill: $yellow-dark !important;
+		}
+	}
 
 	.copper {
 		color: $copper !important;
diff --git a/src/css/variables.scss b/src/css/variables.scss
index e09fbe79..f50a28a8 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -40,6 +40,7 @@
 	--orange-light: #db815e;
 	--red-light: #c45e66;
 	--yellow-light: #e2da5f;
+	--yellow-dark: #87801b;
 
 	--copper: #e76d3b;
 	--silver: #dbdbdb;
@@ -136,6 +137,7 @@ $green-light: var(--green-light);
 $orange-light: var(--orange-light);
 $red-light: var(--red-light);
 $yellow-light: var(--yellow-light);
+$yellow-dark: var(--yellow-dark);
 
 $copper: var(--copper);
 $silver: var(--silver);
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 8906a48c..25cf1871 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -327,7 +327,7 @@ const count_steps = (steps) => {
 					(all_steps, branch_name) => all_steps.concat(step.branch[branch_name].steps),
 					[]
 				);
-				const { completed, total } = get_completed_steps(branch_steps);
+				const { completed, total } = count_steps(branch_steps);
 				counts.completed += completed;
 				counts.total += total;
 			}

From 1d5cad18feda461bbee67baa4bdb31612eb34836 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 5 Jul 2024 14:01:34 +0200
Subject: [PATCH 44/55] reset tutorials

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

diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 25cf1871..4990d2b6 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -1,10 +1,6 @@
 import Vue from "vue";
 
-const tutorial_state = () => ({
-	follow_tutorial: true,
-	game_state: {
-		current_entity_type: undefined,
-	},
+const TUTORIALS = {
 	build: {
 		title: "Build encounter",
 		steps: [
@@ -225,6 +221,16 @@ const tutorial_state = () => ({
 			},
 		},
 	},
+};
+
+const tutorial_state = () => ({
+	follow_tutorial: true,
+	game_state: {
+		current_entity_type: undefined,
+	},
+	build: TUTORIALS.build,
+	initiative: TUTORIALS.initiative,
+	run: TUTORIALS.run,
 });
 
 const tutorial_getters = {
@@ -350,13 +356,20 @@ const tutorial_actions = {
 	setGameState({ commit }, { game_state_key, value }) {
 		commit("SET_GAME_STATE", { game_state_key, value });
 	},
-	resetTutorial({ state, commit }) {},
+	resetTutorial({ commit }) {
+		Object.keys(TUTORIALS).forEach((tutorial_name) => {
+			commit("RESET_TUTORIAL", tutorial_name);
+		});
+	},
 };
 
 const tutorial_mutations = {
 	SET_TUTORIAL(state, payload) {
 		Vue.set(state, "follow_tutorial", payload);
 	},
+	RESET_TUTORIAL(state, tutorial_name) {
+		Vue.set(state, tutorial_name, TUTORIALS[tutorial_name]);
+	},
 	SET_GAME_STATE(state, { game_state_key, value }) {
 		Vue.set(state.game_state, game_state_key, value);
 	},

From 04fd2014b0dd1e7c6eb776249d1eecc4825a49b7 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 5 Jul 2024 14:05:47 +0200
Subject: [PATCH 45/55] complete step on targeted actions

---
 src/components/combat/Targeted.vue            | 37 +++++++++++++++----
 .../combat/TutorialFinishedDialog.vue         | 36 ++++++++++++++----
 src/components/demo/TutorialPopover.vue       |  3 +-
 3 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/components/combat/Targeted.vue b/src/components/combat/Targeted.vue
index 2c79daf3..07233f8e 100644
--- a/src/components/combat/Targeted.vue
+++ b/src/components/combat/Targeted.vue
@@ -175,7 +175,7 @@ export default {
 			options: [
 				{
 					option: "damage",
-					method: () => this.setDrawer({ show: true, type: "drawers/encounter/DamageHealing" }),
+					method: () => this.opportunityAttack(),
 					key: ["shift", "d"],
 					icon: "fa-swords",
 					tooltip: "[shift]+[d] Out of turn damage/healing",
@@ -183,7 +183,7 @@ export default {
 				},
 				{
 					option: "conditions",
-					method: () => this.setDrawer({ show: true, type: "drawers/encounter/Conditions" }),
+					method: () => this.setConditions(),
 					key: ["c"],
 					icon: "fa-flame",
 					tooltip: "[c] Conditions",
@@ -191,8 +191,7 @@ export default {
 				},
 				{
 					option: "reminders",
-					method: () =>
-						this.setDrawer({ show: true, type: "drawers/encounter/reminders/TargetReminders" }),
+					method: () => this.setReminders(),
 					key: ["m"],
 					icon: "fa-stopwatch",
 					tooltip: "[m] Reminders",
@@ -200,8 +199,7 @@ export default {
 				},
 				{
 					option: "transform",
-					method: () =>
-						this.setDrawer({ show: true, type: "drawers/Transform", data: this.target }),
+					method: () => this.transform(),
 					key: ["t"],
 					icon: "fa-paw-claws",
 					tooltip: "[t] Transform",
@@ -216,7 +214,7 @@ export default {
 				},
 				{
 					option: "edit",
-					method: () => this.setDrawer({ show: true, type: "drawers/encounter/EditEntity" }),
+					method: () => this.edit(),
 					key: ["e"],
 					icon: "fa-pencil",
 					tooltip: "[e] Edit",
@@ -332,6 +330,31 @@ export default {
 					: parseInt(this.modifier(entity[ability]));
 			return save > 0 ? `+${save}` : save;
 		},
+		completeTutorialStep(step) {
+			if (this.get_step("run", step)) {
+				this.completeStep({ tutorial: "run" });
+			}
+		},
+		opportunityAttack() {
+			this.setDrawer({ show: true, type: "drawers/encounter/DamageHealing" });
+			this.completeTutorialStep("opportunity");
+		},
+		setConditions() {
+			this.setDrawer({ show: true, type: "drawers/encounter/Conditions" });
+			this.completeTutorialStep("conditions");
+		},
+		setReminders() {
+			this.setDrawer({ show: true, type: "drawers/encounter/reminders/TargetReminders" });
+			this.completeTutorialStep("reminders");
+		},
+		transform() {
+			this.setDrawer({ show: true, type: "drawers/Transform", data: this.target });
+			this.completeTutorialStep("transform");
+		},
+		edit() {
+			this.setDrawer({ show: true, type: "drawers/encounter/EditEntity" });
+			this.completeTutorialStep("edit");
+		},
 	},
 };
 </script>
diff --git a/src/components/combat/TutorialFinishedDialog.vue b/src/components/combat/TutorialFinishedDialog.vue
index f7a3f4f1..57596827 100644
--- a/src/components/combat/TutorialFinishedDialog.vue
+++ b/src/components/combat/TutorialFinishedDialog.vue
@@ -1,13 +1,21 @@
 <template>
 	<q-dialog v-model="tutorial_finished" persistent>
-		<hk-card header="Thanks for trying our demo">
+		<hk-card>
+			<div class="card-header" slot="header">
+				Tutorial finished
+				<q-btn padding="sm" size="sm" no-caps icon="fas fa-times" flat @click="close" />
+			</div>
 			<div class="card-body text-center">
-				<h3>We hope you were impressed by the possibilities</h3>
+				<h3>Thanks for finishing our tutorial!</h3>
 				<p>
-					This is exactly how you can run your custom created encounters in our app, with your own
-					players, and monsters from the SRD or created by you.
+					We hope you're already impressed by the possibilities, but there is a lot more to
+					discover, we've only shown you the basics for now.
+				</p>
+				<p class="mb-4">
+					You can <a @click="close">close this dialog</a> and try out some features for yourself, or
+					you can create an account now and start using <strong>Shieldmaiden</strong> to it's full
+					potential.
 				</p>
-				<p>Create a free account to use our tools to their full extend</p>
 				<router-link to="/sign-up" class="btn btn-lg btn-block">Create account</router-link>
 			</div>
 			<div slot="footer" class="card-footer">
@@ -23,7 +31,9 @@ import { mapActions, mapGetters } from "vuex";
 export default {
 	name: "TutorialFinished",
 	data() {
-		return {};
+		return {
+			showSetter: undefined,
+		};
 	},
 	computed: {
 		...mapGetters(["demo"]),
@@ -31,9 +41,21 @@ export default {
 		tutorial_finished() {
 			return this.demo && this.follow_tutorial && this.get_step("run", "finished");
 		},
+		show: {
+			get() {
+				return this.showSetter !== undefined ? this.showSetter : this.tutorial_finished;
+			},
+			set(newVal) {
+				this.showSetter = newVal;
+			},
+		},
 	},
 	methods: {
-		...mapActions("tutorial", ["resetTutorial"]),
+		...mapActions("tutorial", ["resetTutorial", "toggleTutorial"]),
+		close() {
+			this.toggleTutorial();
+			this.show = false;
+		},
 	},
 };
 </script>
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index c588706b..1c218596 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -13,7 +13,7 @@
 			<div class="p-2">
 				<div class="tutorial__header">
 					<div>{{ progress.completed + 1 }} / {{ progress.total }}</div>
-					<span>{{ name }}</span>
+					<span class="flex-grow">{{ name }}</span>
 					<span class="p-1 pointer" @click="stop">
 						<hk-icon icon="fas fa-times-circle" />
 						<q-tooltip anchor="top middle" self="bottom middle">Stop tutorial</q-tooltip>
@@ -183,6 +183,7 @@ export default {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		gap: 5px;
 	}
 	&__title {
 		font-weight: bold;

From c1988cc20a89d1beaaa191618b73f7ac455713ac Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 5 Jul 2024 14:40:14 +0200
Subject: [PATCH 46/55] Added explanation steps to run encounter tutorial

---
 src/components/combat/Current.vue       | 17 ++++++++++++--
 src/components/combat/Targeted.vue      | 11 ++++++++-
 src/components/combat/Targets.vue       | 13 +++++++++--
 src/components/demo/TutorialPopover.vue |  2 +-
 src/store/modules/tutorial.js           | 31 ++++++++++++++++++++++++-
 5 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/src/components/combat/Current.vue b/src/components/combat/Current.vue
index 733c6b1f..359cbb19 100644
--- a/src/components/combat/Current.vue
+++ b/src/components/combat/Current.vue
@@ -1,5 +1,13 @@
 <template>
-	<div v-if="current" id="current" class="bg-neutral-6-transparent" @focus="$emit('focus')">
+	<div
+		v-if="current"
+		id="current"
+		class="bg-neutral-6-transparent"
+		:class="{
+			'step-highlight': demo && follow_tutorial && get_step('run', 'current'),
+		}"
+		@focus="$emit('focus')"
+	>
 		<h2 class="componentHeader" :class="{ shadow: setShadow > 0 }">
 			<span>
 				<i aria-hidden="true" v-if="current.hidden" class="fas fa-eye-slash red"></i>
@@ -41,6 +49,8 @@
 				<Actions :current="current" />
 			</div>
 		</q-scroll-area>
+
+		<TutorialPopover tutorial="run" step="current" position="right" :offset="[10, 0]" />
 	</div>
 </template>
 
@@ -54,6 +64,7 @@ import { dice } from "src/mixins/dice";
 import TargetItem from "src/components/combat/TargetItem.vue";
 import DeathSaves from "src/components/combat/DeathSaves.vue";
 import ViewEntity from "./ViewEntity.vue";
+import TutorialPopover from "../demo/TutorialPopover.vue";
 
 export default {
 	name: "Current",
@@ -65,6 +76,7 @@ export default {
 		TargetItem,
 		DeathSaves,
 		ViewEntity,
+		TutorialPopover,
 	},
 	props: ["current", "next", "settings"],
 	data() {
@@ -142,7 +154,8 @@ export default {
 		},
 	},
 	computed: {
-		...mapGetters(["entities", "round", "turn", "targeted", "show_monster_card"]),
+		...mapGetters(["entities", "round", "turn", "targeted", "show_monster_card", "demo"]),
+		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		showCard: {
 			get() {
 				const show = this.current.entityType === "npc" && this.show_monster_card ? true : false;
diff --git a/src/components/combat/Targeted.vue b/src/components/combat/Targeted.vue
index 07233f8e..eeae2ed3 100644
--- a/src/components/combat/Targeted.vue
+++ b/src/components/combat/Targeted.vue
@@ -1,5 +1,12 @@
 <template>
-	<div id="targeted" class="bg-neutral-6-transparent" @focus="$emit('focus')">
+	<div
+		id="targeted"
+		class="bg-neutral-6-transparent"
+		:class="{
+			'step-highlight': demo && follow_tutorial && get_step('run', 'targeted'),
+		}"
+		@focus="$emit('focus')"
+	>
 		<h2 class="componentHeader" :class="{ shadow: setShadow > 0 }">
 			<div class="d-flex justify-content-between">
 				<span><i aria-hidden="true" class="fas fa-crosshairs"></i> Targeted</span>
@@ -148,6 +155,8 @@
 				</div>
 			</div>
 		</q-scroll-area>
+
+		<TutorialPopover tutorial="run" position="right" step="targeted" :offset="[10, 0]" />
 	</div>
 </template>
 
diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index 0f5cc1ed..f83d2106 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -1,5 +1,12 @@
 <template>
-	<div id="targets" class="bg-neutral-6-transparent" @focus="$emit('focus')">
+	<div
+		id="targets"
+		class="bg-neutral-6-transparent"
+		:class="{
+			'step-highlight': demo && follow_tutorial && get_step('run', 'targets'),
+		}"
+		@focus="$emit('focus')"
+	>
 		<h2 class="componentHeader d-flex justify-content-between" :class="{ shadow: setShadow > 0 }">
 			<span>
 				<i aria-hidden="true" class="fas fa-helmet-battle" /> Targets ({{ _targets.length }})
@@ -145,6 +152,8 @@
 				</template>
 			</div>
 		</q-scroll-area>
+
+		<TutorialPopover tutorial="run" position="right" step="targets" :offset="[10, 0]" />
 	</div>
 </template>
 
@@ -177,7 +186,7 @@ export default {
 			"test",
 			"demo",
 		]),
-		...mapGetters("tutorial", ["get_required", "follow_tutorial"]),
+		...mapGetters("tutorial", ["get_required", "follow_tutorial", "get_step"]),
 		groups() {
 			return [
 				{
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 1c218596..9f13e7ca 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -102,7 +102,7 @@ export default {
 			return this.get_tutorial_progress(this.tutorial);
 		},
 		progress_frac() {
-			return this.progress.completed / this.progress.total;
+			return this.progress.completed / (this.progress.total - 1);
 		},
 		anchor() {
 			switch (this.position) {
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 4990d2b6..c1de032e 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -60,6 +60,35 @@ const TUTORIALS = {
 		title: "Run encounter",
 		completed: false,
 		steps: [
+			{
+				key: "current",
+				title: "Current entity",
+				description:
+					"<p>This panel shows the entity who's turn it currently is.</p>" +
+					"<p>From this panel you can perform actions with the current entity, like performing an attack or cast a spell.</p>" +
+					"We'll guide you through the action process in later steps.",
+				next: true,
+				completed: false,
+			},
+			{
+				key: "targets",
+				title: "Targeting",
+				description:
+					"<p>This panel shows the initiative list of the encounter. You can click on entities in the list to target them.</p>" +
+					"Actions of the current entity are performed on the targets you select here.",
+				next: true,
+				completed: false,
+			},
+			{
+				key: "targeted",
+				title: "Targeted entities",
+				description:
+					"<p>In this panel you see all entities you have currently targeted.</p>" +
+					"<p>From this panel you can perform some actions on the targets that are not initiated by the current entity.</p>" +
+					"You can roll ability checks, or saving throws, but also apply conditions or reminders to the targets.",
+				next: true,
+				completed: false,
+			},
 			{
 				key: "action",
 				completed: false,
@@ -181,7 +210,7 @@ const TUTORIALS = {
 				title: "Transform",
 				description:
 					'<p>You can transform a target into another entity using the <strong><i class="fas fa-paw"></i></strong> button.</p>' +
-					"This can used for a druid's <strong>Wildshape</strong> or on the target of a <strong>Polymorph</strong> spell.",
+					"This can be used for a druid's <strong>Wildshape</strong> or on the target of a <strong>Polymorph</strong> spell.",
 				next: true,
 				completed: false,
 			},

From a8de2aebfb5f1781f90234444ac453725f48d222 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 5 Jul 2024 14:47:57 +0200
Subject: [PATCH 47/55] advantage tip for roll

---
 src/store/modules/tutorial.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index c1de032e..40d06235 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -114,7 +114,8 @@ const TUTORIALS = {
 								key: "roll",
 								title: "Roll action",
 								description:
-									"Select an action you want to roll and click the <strong>D20</strong> to automatically roll the action.",
+									"<p>Select an action you want to roll and click the <strong>D20</strong> to automatically roll the action.<p>" +
+									"<strong>TIP!</strong> Targeted actions can be rolled with <strong>advantage</strong> by holding [shift] or with <strong>disadvantage</strong> by holding [ctrl].",
 								action: "Click the button",
 								completed: false,
 							},

From 6ac6b017656c57f6e4da11816f1f8f9b55fcd9a4 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 5 Jul 2024 14:48:56 +0200
Subject: [PATCH 48/55] Tutorial progress Drawer

---
 src/components/drawers/Tutorial.vue | 29 +++++++++++++++++----------
 src/store/modules/tutorial.js       | 31 ++++++++++++++++++++++++++---
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/components/drawers/Tutorial.vue b/src/components/drawers/Tutorial.vue
index 573e9d75..7abdda2b 100644
--- a/src/components/drawers/Tutorial.vue
+++ b/src/components/drawers/Tutorial.vue
@@ -1,20 +1,20 @@
 <template>
 	<div>
-		<button v-if="!follow_tutorial" class="btn bg-neutral-5 mb-3 mr-1" @click="reset">
+		<button v-if="!follow_tutorial" class="btn bg-neutral-5 mb-3 mr-1" @click="resetTutorial()">
 			Reset tutorial
 		</button>
 		<button v-if="!follow_tutorial" class="btn mb-3" @click="toggle">Continue tutorial</button>
-		<h3>{{ full_tutorial.name }}</h3>
+		<h3>{{ tutorial_title }}</h3>
 		<q-stepper v-model="current_step" :dark="$store.getters.theme === 'dark'" vertical animated>
 			<q-step
-				v-for="({ title, description }, i) in full_tutorial.steps"
+				v-for="({ title, completed, description }, i) in tutorial_progress"
 				:name="i"
 				:title="title"
 				done-icon="fas fa-check white"
 				icon="fas fa-exclamation white"
 				active-icon="fas fa-exclamation white"
 				done-color="positive"
-				:done="current_step > i"
+				:done="completed"
 				:key="`step-${i}`"
 			>
 				<div v-html="description" />
@@ -30,7 +30,7 @@
 import { mapActions, mapGetters } from "vuex";
 
 export default {
-	name: "TutorialPopover",
+	name: "TutorialDrawer",
 	props: {
 		data: {
 			type: Object,
@@ -46,22 +46,29 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters("tutorial", ["follow_tutorial", "get_current_step_index", "get_tutorial"]),
+		...mapGetters("tutorial", [
+			"follow_tutorial",
+			"get_current_step_index",
+			"get_tutorial",
+			"get_progress_steps",
+		]),
 		current_step() {
-			return this.get_current_step_index(this.tutorial);
+			return this.tutorial_progress.findIndex((step) => !step.completed);
 		},
-		full_tutorial() {
-			return this.get_tutorial(this.tutorial);
+		tutorial_title() {
+			return this.get_tutorial(this.tutorial)?.title;
+		},
+		tutorial_progress() {
+			return this.get_progress_steps(this.tutorial);
 		},
 	},
 	methods: {
 		...mapActions(["setDrawer"]),
-		...mapActions("tutorial", ["completeStep", "toggleTutorial"]),
+		...mapActions("tutorial", ["completeStep", "toggleTutorial", "resetTutorial"]),
 		toggle() {
 			this.setDrawer({ show: false });
 			this.toggleTutorial();
 		},
-		reset() {},
 	},
 };
 </script>
diff --git a/src/store/modules/tutorial.js b/src/store/modules/tutorial.js
index 40d06235..6f344be7 100644
--- a/src/store/modules/tutorial.js
+++ b/src/store/modules/tutorial.js
@@ -95,6 +95,9 @@ const TUTORIALS = {
 				completed_after: ["monster", "player"],
 				branch: {
 					player: {
+						title: "Player actions",
+						description:
+							"<p>Input the amount of damage or healing you want to apply to the target(s).</p> Use the <strong>Attack</strong> [Enter] button to damage your targets or the <strong>Heal</strong> [Shift + Enter] button to heal them.",
 						completed: false,
 						steps: [
 							{
@@ -108,6 +111,9 @@ const TUTORIALS = {
 						],
 					},
 					monster: {
+						title: "Monster actions",
+						description:
+							"Select an action you want to roll and click the <strong>D20</strong> to automatically roll the action.",
 						completed: false,
 						steps: [
 							{
@@ -315,10 +321,14 @@ const tutorial_getters = {
 				return false;
 		}
 	},
-	get_tutorial_progress: (state, getters) => (tutorial) => {
+	get_tutorial_progress: (state) => (tutorial) => {
 		const steps = state[tutorial].steps;
 		return count_steps(steps);
 	},
+	get_progress_steps: (state) => (tutorial) => {
+		const steps = state[tutorial].steps;
+		return steps_progress(steps);
+	},
 };
 const get_active_step = (steps, path, active_branch) => {
 	const active_steps = steps.filter((step) => !step.completed);
@@ -353,7 +363,7 @@ const get_branch_steps = (branches, active_branch) => {
 };
 
 const count_steps = (steps) => {
-	const step_counts = steps.reduce(
+	return steps.reduce(
 		(counts, step) => {
 			if (!step.branch) {
 				counts.completed += step.completed;
@@ -372,7 +382,22 @@ const count_steps = (steps) => {
 		},
 		{ completed: 0, total: 0 }
 	);
-	return step_counts;
+};
+
+const steps_progress = (steps) => {
+	return steps.reduce((progress, step) => {
+		if (!step.branch) {
+			const { title, completed, description } = step;
+			return progress.concat({ title, completed, description });
+		} else {
+			const branch_step_progress = step.completed_after.map((branch_name) => ({
+				title: step.branch[branch_name].title,
+				completed: step.branch[branch_name].completed,
+				description: step.branch[branch_name].description,
+			}));
+			return progress.concat(branch_step_progress);
+		}
+	}, []);
 };
 
 const tutorial_actions = {

From fb448cfd4bbfeca67633010e976c7a5cc3237812 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 5 Jul 2024 15:42:50 +0200
Subject: [PATCH 49/55] mobile tutorial check

---
 src/components/combat/Turns.vue         |   2 +-
 src/components/demo/TutorialPopover.vue |  41 +++++-
 src/components/drawers/Tutorial.vue     |  14 +-
 src/mixins/reminders.js                 | 163 ++++++++++++------------
 4 files changed, 135 insertions(+), 85 deletions(-)

diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index 119ef5a8..bef47b9e 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -234,7 +234,7 @@
 				</div>
 
 				<div
-					class="info"
+					class="info ml-2"
 					@click="
 						setDrawer({
 							show: true,
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index 9f13e7ca..afc8e649 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -1,5 +1,6 @@
 <template>
 	<q-popup-proxy
+		v-if="!isMobile"
 		v-model="show"
 		v-bind="$attrs"
 		:dark="$store.getters.theme === 'dark'"
@@ -41,6 +42,37 @@
 			</div>
 		</hk-card>
 	</q-popup-proxy>
+	<q-popup-proxy
+		v-else
+		v-model="show"
+		v-bind="$attrs"
+		:dark="$store.getters.theme === 'dark'"
+		:anchor="anchor"
+		:self="self"
+		persistent
+		no-parent-event
+	>
+		<hk-card class="tutorial" no-margin>
+			<div class="p-2">
+				<div class="tutorial__header">
+					<span class="flex-grow"></span>
+					<span class="p-1 pointer" @click="stop">
+						<hk-icon icon="fas fa-times-circle" />
+						<q-tooltip anchor="top middle" self="bottom middle">Stop tutorial</q-tooltip>
+					</span>
+				</div>
+				<div class="tutorial__title">Shieldmaiden.app works best on a larger screen</div>
+				<p>On larger screens a step by step tutorial is available</p>
+				<p>
+					Although the entire app is usable on a smaller screen, we recommend using a large screen
+					for your first time use.
+				</p>
+				<div class="d-flex justify-content-end items-center gap-1">
+					<button class="btn btn-sm bg-yellow black d-block d-md-none" @click="stop">Close</button>
+				</div>
+			</div>
+		</hk-card>
+	</q-popup-proxy>
 </template>
 
 <script>
@@ -92,6 +124,10 @@ export default {
 			"get_tutorial_progress",
 		]),
 		...mapGetters(["targeted"]),
+		isMobile() {
+			// This only works for real mobiles, not for small desktop screens
+			return this.$q.platform.is.mobile;
+		},
 		current_step() {
 			const step = this.requirement
 				? this.get_requirement(this.tutorial, this.requirement)
@@ -162,8 +198,11 @@ export default {
 		stop() {
 			this.toggleTutorial();
 		},
+		hide() {
+			this.show = false;
+		},
 		hideOrNext() {
-			this.current_step.next ? this.completeStep() : (this.show = false);
+			this.current_step.next ? this.completeStep() : this.hide();
 		},
 	},
 };
diff --git a/src/components/drawers/Tutorial.vue b/src/components/drawers/Tutorial.vue
index 7abdda2b..14795805 100644
--- a/src/components/drawers/Tutorial.vue
+++ b/src/components/drawers/Tutorial.vue
@@ -3,7 +3,9 @@
 		<button v-if="!follow_tutorial" class="btn bg-neutral-5 mb-3 mr-1" @click="resetTutorial()">
 			Reset tutorial
 		</button>
-		<button v-if="!follow_tutorial" class="btn mb-3" @click="toggle">Continue tutorial</button>
+		<button v-if="!follow_tutorial && !isMobile" class="btn mb-3" @click="toggle">
+			Continue tutorial
+		</button>
 		<h3>{{ tutorial_title }}</h3>
 		<q-stepper v-model="current_step" :dark="$store.getters.theme === 'dark'" vertical animated>
 			<q-step
@@ -19,7 +21,8 @@
 			>
 				<div v-html="description" />
 				<q-stepper-navigation>
-					<q-btn color="primary" label="Show me" no-caps @click="toggle" />
+					<q-btn v-if="!isMobile" color="primary" label="Show me" no-caps @click="toggle" />
+					<q-btn v-else color="primary" label="Next step" no-caps @click="next_step" />
 				</q-stepper-navigation>
 			</q-step>
 		</q-stepper>
@@ -52,6 +55,10 @@ export default {
 			"get_tutorial",
 			"get_progress_steps",
 		]),
+		isMobile() {
+			// This only works for real mobiles, not for small desktop screens
+			return this.$q.platform.is.mobile;
+		},
 		current_step() {
 			return this.tutorial_progress.findIndex((step) => !step.completed);
 		},
@@ -69,6 +76,9 @@ export default {
 			this.setDrawer({ show: false });
 			this.toggleTutorial();
 		},
+		next_step() {
+			this.completeStep({ tutorial: this.tutorial });
+		},
 	},
 };
 </script>
diff --git a/src/mixins/reminders.js b/src/mixins/reminders.js
index edbe8340..af9bcde2 100644
--- a/src/mixins/reminders.js
+++ b/src/mixins/reminders.js
@@ -1,49 +1,49 @@
-import { mapActions } from 'vuex';
+import { mapActions } from "vuex";
 
 export const remindersMixin = {
 	data() {
 		return {
 			premade: {
-				"concentration": {
+				concentration: {
 					".key": "concentratrion",
-					"action": "notify",
-					"color": "blue-light",
-					"title": "Concentrating",
-					"notify": "Target was concentrating. Roll to see if it keeps their concentration.",
-					"trigger": "damage"
+					action: "notify",
+					color: "blue-light",
+					title: "Concentrating",
+					notify: "Target was concentrating. Roll to see if it keeps their concentration.",
+					trigger: "damage",
 				},
-				"reaction": {
+				reaction: {
 					".key": "reaction",
-					"action": "remove",
-					"color": "red-light",
-					"title": "Reaction used",
-					"notify": "Reaction regained",
-					"trigger": "startTurn"
+					action: "remove",
+					color: "red-light",
+					title: "Reaction used",
+					notify: "Reaction regained",
+					trigger: "startTurn",
 				},
-				"surprised": {
+				surprised: {
 					".key": "surprised",
-					"action": "remove",
-					"color": "orange-light",
-					"title": "Is surprised",
-					"notify": "Is surprised",
-					"trigger": "startTurn"
-				}
-			}
-		}
+					action: "remove",
+					color: "orange-light",
+					title: "Is surprised",
+					notify: "Is surprised",
+					trigger: "startTurn",
+				},
+			},
+		};
 	},
 	methods: {
-		...mapActions([ 'set_targetReminder' ]),
-		checkReminders(target, trigger){
+		...mapActions(["set_targetReminder"]),
+		checkReminders(target, trigger) {
 			//Loop over all reminders
-			for(let key in target.reminders) {
+			for (let key in target?.reminders) {
 				//Check if the reminders trigger matches the current trigger
-				if(target.reminders[key].trigger === trigger) {
+				if (target?.reminders[key].trigger === trigger) {
 					//NOTIFY
 					this.__notify__(target, key);
 
-					if(target.reminders[key].action === 'remove') {
+					if (target?.reminders[key].action === "remove") {
 						this.set_targetReminder({
-							action: 'remove',
+							action: "remove",
 							entity: target.key,
 							key: key,
 						});
@@ -51,41 +51,41 @@ export const remindersMixin = {
 				}
 			}
 		},
-		timedReminders(target, direction){
-			for(let key in target.reminders) {
+		timedReminders(target, direction) {
+			for (let key in target?.reminders) {
 				let notify = false;
 				let update = false;
 
 				//TIMED REMINDERS
-				if(target.reminders[key].trigger === 'timed') {
+				if (target?.reminders[key].trigger === "timed") {
 					//Round went up
-					if(direction === 'up') {
-						if(target.reminders[key].rounds > 1) {
-							update = parseInt(target.reminders[key].rounds) - 1;
-						} else { 
-							notify = true; 
+					if (direction === "up") {
+						if (target?.reminders[key].rounds > 1) {
+							update = parseInt(target?.reminders[key].rounds) - 1;
+						} else {
+							notify = true;
 						}
 					} else {
-						update = parseInt(target.reminders[key].rounds) + 1;
+						update = parseInt(target?.reminders[key].rounds) + 1;
 					}
 				}
 				//UPDATE
-				if(update) {
+				if (update) {
 					this.set_targetReminder({
-						action: 'update-timer',
+						action: "update-timer",
 						entity: target.key,
 						key: key,
-						reminder: update
-					}); 
+						reminder: update,
+					});
 				}
 
 				// NOTIFY
-				if(notify) {
+				if (notify) {
 					this.__notify__(target, key);
-					
-					if(target.reminders[key].action === 'remove') {
+
+					if (target?.reminders[key].action === "remove") {
 						this.set_targetReminder({
-							action: 'remove',
+							action: "remove",
 							entity: target.key,
 							key: key,
 						});
@@ -95,59 +95,60 @@ export const remindersMixin = {
 		},
 		replaceReminderVariables(input, variables) {
 			let regexpr = /\[(\w+)\]/g;
-			input = input.replace(regexpr, function(result) {
-				let var_name = result.slice(1,-1);
+			input = input.replace(regexpr, function (result) {
+				let var_name = result.slice(1, -1);
 				return variables[var_name];
 			});
 			return input;
 		},
 		__notify__(target, key) {
-			let notify = target.reminders[key].notify;
-			let title = target.reminders[key].title;
-			
+			let notify = target?.reminders[key].notify;
+			let title = target?.reminders[key].title;
+
 			//Replace variables in title and message
-			if(target.reminders[key].selectedVars) {
-				notify = this.replaceReminderVariables(notify, target.reminders[key].selectedVars);
-				title = this.replaceReminderVariables(title, target.reminders[key].selectedVars);
+			if (target?.reminders[key].selectedVars) {
+				notify = this.replaceReminderVariables(notify, target?.reminders[key].selectedVars);
+				title = this.replaceReminderVariables(title, target?.reminders[key].selectedVars);
 			}
 
 			//Create buttons for notification
 			let buttons;
-			if(target.reminders[key].action !== 'remove') {
-				notify = notify !== undefined ? notify : 'Keep reminder?';
+			if (target?.reminders[key].action !== "remove") {
+				notify = notify !== undefined ? notify : "Keep reminder?";
 				buttons = [
-					{ 
-						text: 'Keep Reminder', 
-						action: (toast) => { 
-							this.$snotify.remove(toast.id); 
-						}, bold: false
+					{
+						text: "Keep Reminder",
+						action: (toast) => {
+							this.$snotify.remove(toast.id);
+						},
+						bold: false,
 					},
-					{ 
-						text: 'Remove', 
-						action: (toast) => { 
+					{
+						text: "Remove",
+						action: (toast) => {
 							this.set_targetReminder({
-								action: 'remove',
+								action: "remove",
 								entity: target.key,
 								key: key,
-							}); 
-							this.$snotify.remove(toast.id); 
-						}, bold: false
+							});
+							this.$snotify.remove(toast.id);
+						},
+						bold: false,
 					},
-				]
+				];
 			} else {
-				notify = target.reminders[key].notify !== undefined ? target.reminders[key].notify : 'Reminder removed';
-				buttons = '';
+				notify =
+					target?.reminders[key].notify !== undefined
+						? target?.reminders[key].notify
+						: "Reminder removed";
+				buttons = "";
 			}
 
 			// NOTIFICATION
-			this.$snotify.warning(
-				target.name + ': ' + notify,
-				title, 
-				{
-					timeout: 0,
-					buttons
-				}
-			);
-		}
-	}
-}
+			this.$snotify.warning(target.name + ": " + notify, title, {
+				timeout: 0,
+				buttons,
+			});
+		},
+	},
+};

From 58f45f08c65769ecec8d1a7c6e93518dcc35dbaa Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 5 Jul 2024 15:46:39 +0200
Subject: [PATCH 50/55] remove vue-gtag

---
 package-lock.json                | 15 ---------------
 package.json                     |  1 -
 src/boot/plugins.js              |  9 ---------
 src/components/CookieConsent.vue |  4 ----
 4 files changed, 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0b20974d..9967f106 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,6 @@
 				"vue-analytics": "^5.22.1",
 				"vue-cookies": "^1.8.4",
 				"vue-croppa": "^1.3.8",
-				"vue-gtag": "^1.16.1",
 				"vue-numeral-filter": "^2.2.0",
 				"vue-qr": "^4.0.9",
 				"vue-shortkey": "^3.1.7",
@@ -18954,14 +18953,6 @@
 				"node": ">=6.0.0"
 			}
 		},
-		"node_modules/vue-gtag": {
-			"version": "1.16.1",
-			"resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-1.16.1.tgz",
-			"integrity": "sha512-5vs0pSGxdqrfXqN1Qwt0ZFXG0iTYjRMu/saddc7QIC5yp+DKgjWQRpGYVa7Pq+KbThxwzzMfo0sGi7ISa6NowA==",
-			"peerDependencies": {
-				"vue": "^2.0.0"
-			}
-		},
 		"node_modules/vue-hot-reload-api": {
 			"version": "2.3.4",
 			"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -36021,12 +36012,6 @@
 				}
 			}
 		},
-		"vue-gtag": {
-			"version": "1.16.1",
-			"resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-1.16.1.tgz",
-			"integrity": "sha512-5vs0pSGxdqrfXqN1Qwt0ZFXG0iTYjRMu/saddc7QIC5yp+DKgjWQRpGYVa7Pq+KbThxwzzMfo0sGi7ISa6NowA==",
-			"requires": {}
-		},
 		"vue-hot-reload-api": {
 			"version": "2.3.4",
 			"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
diff --git a/package.json b/package.json
index e46f7d1b..04802abb 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
 		"vue-analytics": "^5.22.1",
 		"vue-cookies": "^1.8.4",
 		"vue-croppa": "^1.3.8",
-		"vue-gtag": "^1.16.1",
 		"vue-numeral-filter": "^2.2.0",
 		"vue-qr": "^4.0.9",
 		"vue-shortkey": "^3.1.7",
diff --git a/src/boot/plugins.js b/src/boot/plugins.js
index 36f05622..bd471b6a 100644
--- a/src/boot/plugins.js
+++ b/src/boot/plugins.js
@@ -1,6 +1,5 @@
 import VueFire from "vuefire";
 import VueCookies from "vue-cookies";
-import VueGtag from "vue-gtag";
 import numeral from "vue-numeral-filter";
 import "animate.css";
 import Croppa from "vue-croppa";
@@ -21,14 +20,6 @@ export default async ({ router, Vue }) => {
 
 	require("../functions.js");
 
-	Vue.use(
-		VueGtag,
-		{
-			config: { id: "G-KDSNCEK6X7" },
-			bootstrap: !!Cookies.get("cookie_consent"),
-		},
-		router
-	);
 	Vue.use(VueGtm, {
 		id: "GTM-5XJCCDMS",
 		queryParams: {},
diff --git a/src/components/CookieConsent.vue b/src/components/CookieConsent.vue
index a72cf043..98e67e3e 100644
--- a/src/components/CookieConsent.vue
+++ b/src/components/CookieConsent.vue
@@ -16,7 +16,6 @@
 
 <script>
 import { Cookies } from "quasar";
-import { bootstrap } from "vue-gtag";
 
 export default {
 	name: "CookieConsent",
@@ -36,9 +35,6 @@ export default {
 					Cookies.remove(cookie, { domain: ".shieldmaiden.app", path: "/" });
 				}
 			} else {
-				bootstrap().then((gtag) => {
-					console.log("bootstrapped", gtag);
-				});
 				this.$gtm.enable(true);
 			}
 			this.show_banner = false;

From 87699113708cf481096dc65ec85d4e22e9599f69 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 5 Jul 2024 16:13:59 +0200
Subject: [PATCH 51/55] Events on subscribe and account creation

---
 package-lock.json          | 12 ------------
 package.json               |  1 -
 src/App.vue                |  3 ---
 src/boot/plugins.js        |  2 +-
 src/components/Tiers.vue   | 12 ++++++++++++
 src/views/Pages/SignUp.vue | 18 ++++++++++++++++++
 6 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9967f106..e26937bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,6 @@
 				"splitpanes": "^2.4.1",
 				"vee-validate": "^3.4.14",
 				"vue": "2.7.16",
-				"vue-analytics": "^5.22.1",
 				"vue-cookies": "^1.8.4",
 				"vue-croppa": "^1.3.8",
 				"vue-numeral-filter": "^2.2.0",
@@ -18895,12 +18894,6 @@
 				"csstype": "^3.1.0"
 			}
 		},
-		"node_modules/vue-analytics": {
-			"version": "5.22.1",
-			"resolved": "https://registry.npmjs.org/vue-analytics/-/vue-analytics-5.22.1.tgz",
-			"integrity": "sha512-HPKQMN7gfcUqS5SxoO0VxqLRRSPkG1H1FqglsHccz6BatBatNtm/Vyy8brApktZxNCfnAkrSVDpxg3/FNDeOgQ==",
-			"deprecated": "Sorry but vue-analytics is no longer maintained. I would suggest you switch to vue-gtag, with love, the guy who made the package."
-		},
 		"node_modules/vue-cookies": {
 			"version": "1.8.4",
 			"resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.4.tgz",
@@ -35965,11 +35958,6 @@
 				"csstype": "^3.1.0"
 			}
 		},
-		"vue-analytics": {
-			"version": "5.22.1",
-			"resolved": "https://registry.npmjs.org/vue-analytics/-/vue-analytics-5.22.1.tgz",
-			"integrity": "sha512-HPKQMN7gfcUqS5SxoO0VxqLRRSPkG1H1FqglsHccz6BatBatNtm/Vyy8brApktZxNCfnAkrSVDpxg3/FNDeOgQ=="
-		},
 		"vue-cookies": {
 			"version": "1.8.4",
 			"resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.4.tgz",
diff --git a/package.json b/package.json
index 04802abb..9e345d3f 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
 		"splitpanes": "^2.4.1",
 		"vee-validate": "^3.4.14",
 		"vue": "2.7.16",
-		"vue-analytics": "^5.22.1",
 		"vue-cookies": "^1.8.4",
 		"vue-croppa": "^1.3.8",
 		"vue-numeral-filter": "^2.2.0",
diff --git a/src/App.vue b/src/App.vue
index 80c29799..b00f75fe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,7 +34,6 @@
 		<q-no-ssr>
 			<vue-snotify />
 			<HkRolls />
-			<CookieConsent />
 		</q-no-ssr>
 
 		<!-- Announcements -->
@@ -62,7 +61,6 @@ import { db } from "./firebase";
 import Header from "./components/Header.vue";
 import Sidebar from "./components/Sidebar.vue";
 import Drawer from "./components/Drawer.vue";
-import CookieConsent from "./components/CookieConsent.vue";
 import { mapActions, mapGetters } from "vuex";
 import HkRolls from "./components/hk-components/hk-rolls";
 import { general } from "./mixins/general";
@@ -78,7 +76,6 @@ export default {
 		navMain: Header,
 		Sidebar,
 		Drawer,
-		CookieConsent,
 		HkRolls,
 		Home,
 	},
diff --git a/src/boot/plugins.js b/src/boot/plugins.js
index bd471b6a..8c4dd98d 100644
--- a/src/boot/plugins.js
+++ b/src/boot/plugins.js
@@ -26,7 +26,7 @@ export default async ({ router, Vue }) => {
 		defer: false, // Script can be set to `defer` to speed up page load at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible). Defaults to false, so the script is loaded `async` by default
 		compatibility: false, // Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`
 		nonce: "2726c7f26c", // Will add `nonce` to the script tag
-		enabled: !!Cookies.get("cookie_consent"), // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
+		enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
 		debug: true, // Whether or not display console logs debugs (optional)
 		loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional)
 		vueRouter: router, // Pass the router instance to automatically sync with router (optional)
diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index 3eb943ae..52313217 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -65,6 +65,7 @@
 								target="_blank"
 								rel="noopener"
 								class="btn btn-block btn-square bg-patreon-red"
+								@click="selectTier(t)"
 								>Join {{ t.price }} tier</a
 							>
 						</div>
@@ -135,6 +136,17 @@ export default {
 			type = type === "npcs" ? type.slice(0, -1).toUpperCase() : type.slice(0, -1).capitalize();
 			return count === "infinite" || count > 1 ? `${type}s` : type;
 		},
+		selectTier(t) {
+			console.log(t.name);
+			this.$gtm.trackEvent({
+				event: "subscribe",
+				category: "Subscription",
+				action: "click",
+				label: "Started subscription process",
+				value: t.name,
+				noninteraction: false, // Optional
+			});
+		},
 	},
 };
 </script>
diff --git a/src/views/Pages/SignUp.vue b/src/views/Pages/SignUp.vue
index 38a9242c..2f4efecf 100644
--- a/src/views/Pages/SignUp.vue
+++ b/src/views/Pages/SignUp.vue
@@ -114,6 +114,16 @@ export default {
 					await this.setUser(result.user);
 					await this.setUserInfo();
 					await this.reinitialize();
+
+					this.$gtm.trackEvent({
+						event: "sign-up",
+						category: "Account",
+						action: "click",
+						label: "Created account",
+						value: "Email and Password",
+						noninteraction: false,
+					});
+
 					this.$router.replace("/content");
 				},
 				(err) => {
@@ -128,6 +138,14 @@ export default {
 			auth
 				.signInWithPopup(provider)
 				.then(() => {
+					this.$gtm.trackEvent({
+						event: "sign-up",
+						category: "Account",
+						action: "click",
+						label: "Created account",
+						value: "Google",
+						noninteraction: false,
+					});
 					this.$router.replace("/set-username");
 				})
 				.catch((err) => {

From f1e43e992e042f528c8f9d7722b0ed2c755ad80f Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 5 Jul 2024 16:46:45 +0200
Subject: [PATCH 52/55] ignore quasar app updates

---
 .github/dependabot.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 272baf8f..07e8a526 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -4,4 +4,6 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
-    target-branch: "develop"
\ No newline at end of file
+    target-branch: "develop"
+    ignore:
+      - dependency-name: "@quasar/app"

From dcb49178d2bb4a9520c8f9120d30cc8ca22adc34 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 5 Jul 2024 17:00:22 +0200
Subject: [PATCH 53/55] 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 e26937bf..0d2d2506 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "shieldmaiden",
-	"version": "2.27.4",
+	"version": "2.28.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "shieldmaiden",
-			"version": "2.27.4",
+			"version": "2.28.0",
 			"dependencies": {
 				"@gtm-support/vue2-gtm": "^1.3.0",
 				"@octokit/rest": "^19.0.5",
diff --git a/package.json b/package.json
index 9e345d3f..26cc8238 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "2.27.4",
+	"version": "2.28.0",
 	"name": "shieldmaiden",
 	"description": "A Dungeons and Dragons Combat Tracker",
 	"productName": "Shieldmaiden",

From 507967453839edf87776bf8983cf0e5bbcf1641c Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Fri, 5 Jul 2024 17:12:37 +0200
Subject: [PATCH 54/55] Turn of debug for gtag

---
 src/boot/plugins.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/boot/plugins.js b/src/boot/plugins.js
index 8c4dd98d..29fb3587 100644
--- a/src/boot/plugins.js
+++ b/src/boot/plugins.js
@@ -27,7 +27,7 @@ export default async ({ router, Vue }) => {
 		compatibility: false, // Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`
 		nonce: "2726c7f26c", // Will add `nonce` to the script tag
 		enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
-		debug: true, // Whether or not display console logs debugs (optional)
+		debug: false, // Whether or not display console logs debugs (optional)
 		loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional)
 		vueRouter: router, // Pass the router instance to automatically sync with router (optional)
 		ignoredViews: [], // Don't trigger events for specified router names (optional)

From a061c6483da8d16746cb56f00214fc6f7f7a917e Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Fri, 5 Jul 2024 17:16:29 +0200
Subject: [PATCH 55/55] last player initiative delay

---
 src/components/combat/initiative/Players.vue | 13 +++++++++++--
 src/components/demo/TutorialPopover.vue      |  8 ++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/combat/initiative/Players.vue b/src/components/combat/initiative/Players.vue
index 82096a3f..f7c01cb4 100644
--- a/src/components/combat/initiative/Players.vue
+++ b/src/components/combat/initiative/Players.vue
@@ -56,10 +56,15 @@ import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 export default {
 	name: "SetInitiativePlayer",
 	components: {
-        TargetAvatar,
+		TargetAvatar,
 		TutorialPopover,
 	},
 	props: ["players"],
+	data() {
+		return {
+			completed: false,
+		};
+	},
 	computed: {
 		...mapGetters(["campaignId", "encounterId", "entities", "path", "demo"]),
 		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
@@ -72,10 +77,14 @@ export default {
 
 			// If initiative has been set for all players, complete the tutorial step
 			if (
+				!this.completed &&
 				!this.players.find((player) => !player.initiative) &&
 				this.get_step("initiative", "players")
 			) {
-				this.completeStep({ tutorial: "initiative" });
+				this.completed = true;
+				setTimeout(() => {
+					this.completeStep({ tutorial: "initiative" });
+				}, 500);
 			}
 		},
 	},
diff --git a/src/components/demo/TutorialPopover.vue b/src/components/demo/TutorialPopover.vue
index afc8e649..aeba8309 100644
--- a/src/components/demo/TutorialPopover.vue
+++ b/src/components/demo/TutorialPopover.vue
@@ -13,8 +13,12 @@
 			<q-linear-progress size="7px" color="yellow-dark" :value="progress_frac" />
 			<div class="p-2">
 				<div class="tutorial__header">
-					<div>{{ progress.completed + 1 }} / {{ progress.total }}</div>
-					<span class="flex-grow">{{ name }}</span>
+					<small
+						><strong>
+							<span class="mr-2">{{ progress.completed + 1 }} / {{ progress.total }}</span>
+							<span class="flex-grow">{{ name }}</span>
+						</strong></small
+					>
 					<span class="p-1 pointer" @click="stop">
 						<hk-icon icon="fas fa-times-circle" />
 						<q-tooltip anchor="top middle" self="bottom middle">Stop tutorial</q-tooltip>