Hide buttons and info-icons during parts of tutorial

2 files changed, 27 insertions, 16 deletions

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index c0a9ca0..33eb62f 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -483,7 +483,7 @@ export default defineComponent({
 		@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
 		<template v-if="!hasCompoundImage">
 			<h1 :style="leafHeaderStyles">{{displayName}}</h1>
-			<info-icon :style="infoIconStyles"
+			<info-icon v-if="!uiOpts.disabledActions.has('tileInfo')" :style="infoIconStyles"
 				class="text-white/10 hover:text-white hover:cursor-pointer"
 				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
 		</template>
@@ -491,7 +491,7 @@ export default defineComponent({
 			<div :style="leafFirstImgStyles" class="col-start-1 row-start-1"></div>
 			<div :style="leafSecondImgStyles" class="col-start-1 row-start-1"></div>
 			<h1 :style="leafHeaderStyles" class="col-start-1 row-start-1 z-10">{{displayName}}</h1>
-			<info-icon :style="infoIconStyles"
+			<info-icon v-if="!uiOpts.disabledActions.has('tileInfo')" :style="infoIconStyles"
 				class="col-start-1 row-start-1 z-10 text-white/10 hover:text-white hover:cursor-pointer"
 				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
 		</template>
@@ -500,7 +500,8 @@ export default defineComponent({
 		<div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
 			@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
 			<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
-			<info-icon :style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer"
+			<info-icon v-if="!uiOpts.disabledActions.has('tileInfo')"
+				:style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer"
 				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
 		</div>
 		<div :style="sepSweptAreaStyles" ref="sepSweptArea" :class="sepSweptAreaHideEdgeClass">
@@ -508,7 +509,8 @@ export default defineComponent({
 				:style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
 				@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
 				<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
-				<info-icon :style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer"
+				<info-icon v-if="!uiOpts.disabledActions.has('tileInfo')"
+					:style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer"
 					@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
 			</div>
 			<transition name="fadein">
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index d34456d..5e6c1c0 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -47,37 +47,46 @@ export default defineComponent({
 	methods: {
 		onStartTutorial(){
 			this.stage = 1;
-			this.sendEnabledFeatures();
+			this.setEnabledFeatures();
 		},
 		onPrevClick(){
 			this.stage = Math.max(1, this.stage - 1);
-			this.sendEnabledFeatures();
+			this.setEnabledFeatures();
 		},
 		onNextClick(){
 			this.stage = Math.min(this.maxStage, this.stage + 1);
-			this.sendEnabledFeatures();
+			this.setEnabledFeatures();
 		},
 		onClose(){
 			this.$emit('close');
 		},
-		sendEnabledFeatures(){
+		setEnabledFeatures(){
 			const stageActions = [
 				null,
 				'expand', 'expand', 'collapse', 'expandToView', 'unhideAncestor',
-				'tileInfo', 'search', 'autoMode', 'settings', 'help'
+				'tileInfo', 'search', 'autoMode', 'settings', 'help',
 			] as (Action | null)[];
-			let disabledActions = new Set() as Set<Action>;
-			for (let i = this.stage + 1; i < this.maxStage; i++){
-				disabledActions.add(stageActions[i] as Action);
+			let disabledActions = this.uiOpts.disabledActions;
+			let currentAction = stageActions[this.stage];
+			for (let i = 1; i <= this.maxStage; i++){
+				let action = stageActions[i];
+				if (i <= this.stage){
+					if (disabledActions.has(action)){
+						disabledActions.delete(action);
+					}
+				} else {
+					if (!disabledActions.has(action) && action != currentAction){
+						disabledActions.add(action);
+					}
+				}
 			}
-			disabledActions.delete(stageActions[this.stage] as Action);
-			let triggerAction = stageActions[this.stage] as Action;
-			this.$emit('stage-chg', disabledActions, triggerAction);
+			let triggerAction = currentAction;
+			this.$emit('stage-chg', triggerAction);
 		},
 	},
 	created(){
 		if (this.skipWelcome){
-			this.sendEnabledFeatures();
+			this.setEnabledFeatures();
 		}
 	},
 	components: {CloseIcon, RButton, },