From 25e633fe44d7bd84c566090188ea2c9a82449c69 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 27 Jun 2022 03:58:55 +1000
Subject: Clean up code in TutorialPane

Also simply tutorial instructions
---
 src/components/TutorialPane.vue | 146 ++++++++++++++++++----------------------
 1 file changed, 64 insertions(+), 82 deletions(-)

(limited to 'src/components/TutorialPane.vue')

diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index fdebc8b..fe877ef 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -1,20 +1,25 @@
 <script lang="ts">
+
 import {defineComponent, PropType} from 'vue';
+import RButton from './RButton.vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import {Action, UiOptions} from '../lib';
-import RButton from './RButton.vue';
 
 export default defineComponent({
 	props: {
-		uiOpts: {type: Object as PropType<UiOptions>, required: true},
-		triggerFlag: {type: Boolean, required: true},
 		skipWelcome: {type: Boolean, default: false},
-		height: {type: String, default: 'auto'},
+		triggerFlag: {type: Boolean, required: true},
+			// Used to indicate that a tutorial-requested 'trigger' action has been done
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	data(){
 		return {
-			stage: this.skipWelcome ? 1 : 0,
-			maxStage: 10,
+			stage: 0, // Indicates the current step of the tutorial (stage 0 is the welcome message)
+			lastStage: 9,
+			stageActions: [ // Specifies, for stages 1+, when actions are introduced (null means none)
+				'expand', 'collapse', 'expandToView', 'unhideAncestor',
+				'tileInfo', 'search', 'autoMode', 'settings', 'help',
+			] as (Action | null)[],
 		};
 	},
 	computed: {
@@ -22,7 +27,6 @@ export default defineComponent({
 			return {
 				backgroundColor: this.uiOpts.bgColorDark,
 				color: this.uiOpts.textColor,
-				height: this.height,
 			};
 		 },
 		 contentStyles(): Record<string,string> {
@@ -30,14 +34,42 @@ export default defineComponent({
 				padding: '0 0.5cm',
 				maxWidth: '15cm',
 				margin: '0 auto',
-				fontSize: 'small',
 				overflow: 'auto',
 			};
 		 },
+		 buttonStyles(): Record<string,string> {
+			return {
+				color: this.uiOpts.textColor,
+				backgroundColor: this.uiOpts.bgColor,
+			};
+		 },
 	},
 	watch: {
+		stage(newVal, oldVal){
+			// Update disabled actions
+			let disabledActions = this.uiOpts.disabledActions;
+			if (this.stage == 0){
+				disabledActions.clear();
+				return;
+			}
+			let currentAction = null as null | Action;
+			for (let i = 0; i < this.lastStage; i++){
+				let action = this.stageActions[i];
+				if (action != null){
+					if (i < this.stage){
+						currentAction = action;
+						disabledActions.delete(action);
+					} else {
+						disabledActions.add(action);
+					}
+				}
+			}
+			// Notify of new trigger-action
+			this.$emit('stage-chg', currentAction);
+		},
+		// Called when a trigger-action is done, and advances to the next stage
 		triggerFlag(){
-			if (this.stage < this.maxStage){
+			if (this.stage < this.lastStage){
 				this.onNextClick();
 			} else {
 				this.onClose();
@@ -47,7 +79,6 @@ export default defineComponent({
 	methods: {
 		onStartTutorial(){
 			this.stage = 1;
-			this.setEnabledFeatures();
 		},
 		onSkipTutorial(){
 			this.$emit('skip');
@@ -55,42 +86,17 @@ export default defineComponent({
 		},
 		onPrevClick(){
 			this.stage = Math.max(1, this.stage - 1);
-			this.setEnabledFeatures();
 		},
 		onNextClick(){
-			this.stage = Math.min(this.maxStage, this.stage + 1);
-			this.setEnabledFeatures();
+			this.stage = Math.min(this.stage + 1, this.lastStage);
 		},
 		onClose(){
 			this.$emit('close');
 		},
-		setEnabledFeatures(){
-			const stageActions = [
-				null,
-				'expand', 'expand', 'collapse', 'expandToView', 'unhideAncestor',
-				'tileInfo', 'search', 'autoMode', 'settings', 'help',
-			] as (Action | null)[];
-			let disabledActions = this.uiOpts.disabledActions;
-			let currentAction = stageActions[this.stage];
-			for (let i = 1; i <= this.maxStage; i++){
-				let action = stageActions[i] as Action;
-				if (i <= this.stage){
-					if (disabledActions.has(action)){
-						disabledActions.delete(action);
-					}
-				} else {
-					if (!disabledActions.has(action) && action != currentAction){
-						disabledActions.add(action);
-					}
-				}
-			}
-			let triggerAction = currentAction;
-			this.$emit('stage-chg', triggerAction);
-		},
 	},
 	created(){
 		if (this.skipWelcome){
-			this.setEnabledFeatures();
+			this.stage += 1;
 		}
 	},
 	components: {CloseIcon, RButton, },
@@ -101,82 +107,58 @@ export default defineComponent({
 <template>
 <div :style="styles" class="p-2 flex flex-col justify-between">
 	<div class="flex">
-		<h2 class="text-center mb-2">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2>
+		<h2 class="text-center mb-2 mx-auto">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2>
 		<close-icon @click.stop="onClose"
-			class="block ml-auto w-6 h-6 hover:cursor-pointer"/>
+			class="block w-6 h-6 hover:cursor-pointer"/>
 	</div>
 	<template v-if="stage == 0">
 		<div :style="contentStyles">
-			Lorem ipsum dolor sit amet, consectetur adipiscing
-			elit, sed do eiusmod tempor incididunt ut labore
-			et dolore magna aliqua. Ut enim ad minim veniam,
-			quis nostrud exercitation ullamco.
+			This page provides a visualisation of the biological Tree of Life.
+			It was made using data from OTOL, EOL, and Wikipedia.
+			For more project information, click here.
 		</div>
 		<div class="w-full flex justify-evenly mt-2">
-			<r-button class="bg-stone-800 text-white" @click="onStartTutorial">
-				Start Tutorial
-			</r-button>
-			<r-button class="bg-stone-800 text-white" @click="onSkipTutorial">
-				Skip
-			</r-button>
+			<r-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</r-button>
+			<r-button :style="buttonStyles" @click="onSkipTutorial">Skip</r-button>
 		</div>
 	</template>
 	<template v-else>
 		<div v-if="stage == 1" :style="contentStyles">
-			Click/touch on the tile to expand it and see it's children. <br/>
-			A green title means the tile has children. Orange and red mean 100+ or 1000+ children.
-				If a clicked tile won't fit on screen, expansion fails.
-				There is a way around this, which we'll describe later.
+			Clicking/touching a tile expands it and shows it's children.
 		</div>
 		<div v-else-if="stage == 2" :style="contentStyles">
-			You can keep expanding tiles, and they are repositioned to try and save space,
-				while still trying to maintain a stable layout, to avoid disorientation.
+			Clicking on an expanded tile's header shrinks it back.
 		</div>
 		<div v-else-if="stage == 3" :style="contentStyles">
-			Click on an expanded tile's header to shrink it, hiding it's children
-			You can keep exploring the tree this way, expanding and collapsing tiles as needed,
-			to better show the groups you're interested in.
+			Clicking and holding on a tile makes it fill the view, and moves it's
+				ancestors to a sidebar. The same thing applies for an expanded tile's header.
 		</div>
 		<div v-else-if="stage == 4" :style="contentStyles">
-			Eventually, you might run out of screen space, and be unable to go deeper.
-			Click and hold on a tile to make it fill the view, and move it's
-				ancestors to a sidebar. You can do the same thing on an expanded tile's header.
+			Clicking on a tile in the sidebar brings it back into the main view.
 		</div>
 		<div v-else-if="stage == 5" :style="contentStyles">
-			Click on a tile in the sidebar to bring it back into the main view.
-			In this way, you can explore as deeply as you want, occasionally jumping back
-				upward to explore a different ancestral branch.
+			Clicking on the icon at a tile's bottom-right, or at the right of
+				an expanded tile's header, brings up more information.
 		</div>
 		<div v-else-if="stage == 6" :style="contentStyles">
-			Each tile has an info icon on the bottom right. Clicking on this brings up
-				information about the corresponding biological taxon. <br/>
-			A similar icon appears at the right end of each expanded-tile header.
+			You can search using the icon at the top-right. Alternatively, press Ctrl-F.
 		</div>
 		<div v-else-if="stage == 7" :style="contentStyles">
-			The search icon allows for finding a particular tile, and bringing it into view.
-			To stop the traversal, just click anywhere on screen.
+			You can use the play icon to enable 'Auto Mode'.
 		</div>
 		<div v-else-if="stage == 8" :style="contentStyles">
-			The play icon enables 'auto mode', which continuously expands/collapses
-				random tiles, until you click to make it stop.
+			The settings icon allows adjusting the layout, animation speed, etc.
 		</div>
 		<div v-else-if="stage == 9" :style="contentStyles">
-			The settings icon allows for adjusting the layout, among other things.
-			<ul class="list-disc">
-				<li>The animation speed can be slowed down if you find the tile-repositioning hard to follow.</li>
-				<li>The 'reduced tree' setting replaces the original tree with a simplified version.</li>
-			</ul>
-		</div>
-		<div v-else-if="stage == 10" :style="contentStyles">
-			And finally, the help icon provides summarised usage information.
+			And finally, the help icon provides more information.
 		</div>
 		<!-- Buttons -->
 		<div class="w-full flex justify-evenly mt-2">
-			<r-button :disabled="stage == 1" class="bg-stone-800 text-white" @click="onPrevClick">
+			<r-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick">
 				Prev
 			</r-button>
-			<r-button class="bg-stone-800 text-white" @click="(stage != maxStage) ? onNextClick() : onClose()">
-				{{stage != maxStage ? 'Next' : 'Finish'}}
+			<r-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()">
+				{{stage != lastStage ? 'Next' : 'Finish'}}
 			</r-button>
 		</div>
 	</template>
-- 
cgit v1.2.3