During tutorial, avoid disabling actions the user has already used

For auto-mode and search, enable prerequisite actions when used

3 files changed, 11 insertions, 10 deletions

diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 6cdd521..4f35564 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -53,7 +53,7 @@
 				<template #content>
 					<div :class="contentClasses">
 						<p>
-							Tilo attempts to display the Tree of Life by representing nodes with tiles,
+							Tilo displays the Tree of Life by representing nodes with tiles,
 							and placing tiles within other tiles to show structure.
 						</p>
 						<img src="/treeWithTiles.jpg" alt="Tree and tile-layout comparison"
@@ -62,7 +62,7 @@
 							Within a tile's header:
 							<ul class="list-disc pl-4">
 								<li>
-									The color denotes the number of children.
+									The color denotes the number of child tiles.
 									White means zero,
 									<span style="color: limegreen">green</span> means 1+,
 									<span style="color: darkorange">orange</span> means 10+,
@@ -407,8 +407,8 @@
 				</template>
 			</s-collapsible>
 		</div>
-		<s-button v-if="!tutOpen" class="mx-auto mb-2"
-			:style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial">
+		<s-button class="mx-auto mb-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
+			:disabled="tutOpen" @click.stop="onStartTutorial">
 			Start Tutorial
 		</s-button>
 	</div>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index ab1538f..9c9fdfa 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -33,7 +33,7 @@
 					@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
 			</div>
 			<transition name="fadein">
-				<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70 z-20"></div>
+				<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 rounded-[inherit] bg-amber-500/70 z-20"/>
 			</transition>
 		</div>
 		<tile v-for="child in visibleChildren" :key="child.name"
@@ -43,7 +43,7 @@
 			@info-click="onInnerInfoIconClick"/>
 	</div>
 	<transition name="fadein">
-		<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70"></div>
+		<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 rounded-[inherit] bg-amber-500/70"/>
 	</transition>
 </div>
 </template>
@@ -355,7 +355,7 @@ export default defineComponent({
 			};
 		},
 		infoIconClasses(): string {
-			return 'text-white/20 hover:text-white hover:cursor-pointer';
+			return 'text-white/30 hover:text-white hover:cursor-pointer';
 		},
 		// For watching layoutNode data
 		pos(){
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 7667f60..3593a79 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -38,7 +38,7 @@
 			</span>
 		</div>
 		<div v-else-if="stage == 7" :style="contentStyles">
-			{{touchDevice ? 'Tap' : 'Click'}} the play icon to start Auto Mode
+			{{touchDevice ? 'Tap' : 'Click'}} the play icon to traverse the tree automatically
 		</div>
 		<div v-else-if="stage == 8" :style="contentStyles">
 			{{touchDevice ? 'Tap' : 'Click'}} the settings icon
@@ -75,9 +75,10 @@ import {Action, UiOptions} from '../lib';
 
 export default defineComponent({
 	props: {
-		skipWelcome: {type: Boolean, default: false},
+		actionsDone: {type: Object as PropType<Set<Action>>, required: true}, // Used to avoid disabling actions already seen
 		triggerFlag: {type: Boolean, required: true},
 			// Used to indicate that a tutorial-requested 'trigger' action has been done
+		skipWelcome: {type: Boolean, default: false},
 		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	data(){
@@ -122,7 +123,7 @@ export default defineComponent({
 			// If starting tutorial, disable 'all' actions
 			if (newVal == 1 && !this.disabledOnce){
 				for (let action of this.stageActions){
-					if (action != null){
+					if (action != null && !this.actionsDone.has(action)){
 						this.uiOpts.disabledActions.add(action);
 					}
 				}