last player initiative delay

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);
 			}
 		},
 	},

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>