From 214bf396b7a946dcfc69dcfd768d3a5b21e0f4da Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 6 Jul 2022 20:04:03 +1000
Subject: During tutorial, avoid disabling actions the user has already used

For auto-mode and search, enable prerequisite actions when used
---
 src/App.vue                     | 38 +++++++++++++++++++-------------------
 src/components/HelpModal.vue    |  8 ++++----
 src/components/Tile.vue         |  6 +++---
 src/components/TutorialPane.vue |  7 ++++---
 4 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5c7bbf2..994b2ad 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,7 @@
 	<div :style="tutPaneContainerStyles" class="z-10"> <!-- Used to slide-in/out the tutorial pane -->
 		<transition name="fade" @after-enter="tutPaneInTransition = false" @after-leave="tutPaneInTransition = false">
 			<tutorial-pane v-if="tutPaneOpen" :style="tutPaneStyles"
-				:uiOpts="uiOpts" :triggerFlag="tutTriggerFlag" :skipWelcome="!tutWelcome"
+				:actionsDone="actionsDone" :triggerFlag="tutTriggerFlag" :skipWelcome="!tutWelcome" :uiOpts="uiOpts"
 				@close="onTutPaneClose" @skip="onTutorialSkip" @stage-chg="onTutStageChg"/>
 		</transition>
 	</div>
@@ -68,7 +68,7 @@
 	</transition>
 	<!-- Overlay used to capture clicks during auto mode, etc -->
 	<div :style="{visibility: modeRunning != null ? 'visible' : 'hidden'}"
-		class="absolute left-0 top-0 w-full h-full" @click="modeRunning = null"></div>
+		class="absolute left-0 top-0 w-full h-full z-20" @click="modeRunning = null"></div>
 </div>
 </template>
 
@@ -152,6 +152,7 @@ export default defineComponent({
 			tutWelcome: !uiOpts.tutorialSkip,
 			tutTriggerAction: null as Action | null, // Used to advance tutorial upon user-actions
 			tutTriggerFlag: false,
+			actionsDone: new Set() as Set<Action>, // Used to avoid disabling actions the user has already seen
 			// Options
 			lytOpts: lytOpts,
 			uiOpts: uiOpts,
@@ -509,9 +510,9 @@ export default defineComponent({
 				console.log('WARNING: Unexpected search event while search/auto mode is running')
 				return;
 			}
-			if (this.isDisabled('expand') || this.isDisabled('expandToView') || this.isDisabled('unhideAncestor')){
-				console.log('INFO: Ignored search action due to disabled expand/expandToView');
-				return;
+			const prereqActions = ['expand', 'expandToView', 'unhideAncestor'];
+			if (this.isDisabled(...prereqActions)){
+				prereqActions.forEach(a => this.uiOpts.disabledActions.delete(a));
 			}
 			//
 			this.searchOpen = false;
@@ -602,10 +603,9 @@ export default defineComponent({
 			if (this.isDisabled('autoMode')){
 				return;
 			}
-			if (this.isDisabled('expand') || this.isDisabled('collapse') ||
-				this.isDisabled('expandToView') || this.isDisabled('unhideAncestor')){
-				console.log('INFO: Ignored auto-mode action due to disabled expand/collapse/etc');
-				return;
+			const prereqActions = ['expand', 'collapse', 'expandToView', 'unhideAncestor'];
+			if (this.isDisabled(...prereqActions)){
+				prereqActions.forEach(a => this.uiOpts.disabledActions.delete(a));
 			}
 			//
 			this.resetMode();
@@ -782,16 +782,16 @@ export default defineComponent({
 			}
 		},
 		handleActionForTutorial(action: Action): void {
-			if (!this.tutPaneOpen){
-				return;
-			}
-			// Close welcome message on first action
-			if (this.tutWelcome){
-				this.onTutPaneClose();
-			}
-			// Tell TutorialPane if trigger-action was done
-			if (this.tutTriggerAction == action){
-				this.tutTriggerFlag = !this.tutTriggerFlag;
+			this.actionsDone.add(action);
+			if (this.tutPaneOpen){
+				// Close welcome message on first action
+				if (this.tutWelcome){
+					this.onTutPaneClose();
+				}
+				// Tell TutorialPane if trigger-action was done
+				if (this.tutTriggerAction == action){
+					this.tutTriggerFlag = !this.tutTriggerFlag;
+				}
 			}
 		},
 		// For the loading-indicator
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);
 					}
 				}
-- 
cgit v1.2.3