From 16503a01759bc4f3a930c957367b972b8e9c17cb Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 23 May 2022 21:23:11 +1000
Subject: Make tutorial disable features until introduced

Also add tutorial finish button and close icon
---
 src/components/TutorialPane.vue | 76 +++++++++++++++++++++++++++++------------
 1 file changed, 54 insertions(+), 22 deletions(-)

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

diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index e027857..37c5832 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
+import {EnabledFeatures} from '../lib';
 
 export default defineComponent({
 	props: {
@@ -26,7 +27,7 @@ export default defineComponent({
 				color: this.uiOpts.tutorialPaneTextColor,
 			};
 		 },
-		 tutContentStyles(): Record<string,string> {
+		 contentStyles(): Record<string,string> {
 			return {
 				padding: '0 0.5cm',
 				maxWidth: '15cm',
@@ -45,95 +46,126 @@ export default defineComponent({
 		 },
 	},
 	methods: {
+		onStartTutorial(){
+			this.stage = 1;
+			this.sendEnabledFeatures();
+		},
 		onPrevClick(){
 			this.stage = Math.max(1, this.stage - 1);
+			this.sendEnabledFeatures();
 		},
 		onNextClick(){
 			this.stage = Math.min(this.maxStage, this.stage + 1);
+			this.sendEnabledFeatures();
+		},
+		onClose(){
+			this.$emit('set-enabled-features', new EnabledFeatures());
+			this.$emit('tutorial-close');
+		},
+		sendEnabledFeatures(){
+			let x = new EnabledFeatures();
+			switch (this.stage){
+				case  1:
+				case  2: x.collapse = false;
+				case  3: x.expandToView = false;
+				case  4: x.unhideAncestor = false;
+				case  5: x.infoIcon = false;
+				case  6: x.search = false;
+				case  7: x.autoMode = false;
+				case  8: x.settings = false;
+				case  9: x.help = false;
+				case 10:
+			}
+			this.$emit('set-enabled-features', x);
 		},
 	},
 	components: {CloseIcon, },
-	emits: ['tutorial-close', ],
+	emits: ['tutorial-close', 'set-enabled-features', ],
 });
 </script>
 
 <template>
 <div :style="styles" class="flex flex-col justify-evenly">
+	<close-icon @click.stop="onClose"
+		class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
 	<template v-if="stage == 0">
-		<div :style="tutContentStyles">
+		<h2 class="text-center">Welcome</h2>
+		<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.
 		</div>
 		<div class="w-full flex justify-evenly">
-			<button :style="buttonStyles" class="hover:brightness-125" @click="stage = 1">
+			<button :style="buttonStyles" class="hover:brightness-125" @click="onStartTutorial">
 				Start Tutorial
 			</button>
-			<button :style="buttonStyles" class="hover:brightness-125" @click="$emit('tutorial-close')">
+			<button :style="buttonStyles" class="hover:brightness-125" @click="onClose">
 				Continue
 			</button>
 		</div>
 	</template>
-	<template v-if="stage > 0">
-		<div v-if="stage == 1" :style="tutContentStyles">
+	<template v-else>
+		<h2 class="text-center">Tutorial</h2>
+		<!-- Text content -->
+		<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.
 		</div>
-		<div v-else-if="stage == 2" :style="tutContentStyles">
+		<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.
 		</div>
-		<div v-else-if="stage == 3" :style="tutContentStyles">
+		<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.
 		</div>
-		<div v-else-if="stage == 4" :style="tutContentStyles">
+		<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.
 		</div>
-		<div v-else-if="stage == 5" :style="tutContentStyles">
+		<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.
 		</div>
-		<div v-else-if="stage == 6" :style="tutContentStyles">
+		<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.
 		</div>
-		<div v-else-if="stage == 7" :style="tutContentStyles">
+		<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.
 		</div>
-		<div v-else-if="stage == 8" :style="tutContentStyles">
+		<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.
 		</div>
-		<div v-else-if="stage == 9" :style="tutContentStyles">
+		<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="tutContentStyles">
+		<div v-else-if="stage == 10" :style="contentStyles">
 			And finally, the help icon provides summarised usage information.
 		</div>
+		<!-- Buttons -->
 		<div class="w-full flex justify-evenly">
 			<button :style="buttonStyles"
-				:disabled="stage < 2" :class="stage < 2 ? ['brightness-75'] : ['hover:brightness-125']"
+				:disabled="stage == 1" :class="stage == 1 ? ['brightness-75'] : ['hover:brightness-125']"
 				@click="onPrevClick">
-				Previous
+				Prev
 			</button>
-			<button :style="buttonStyles"
-				:disabled="stage == maxStage" :class="stage == maxStage ? ['brightness-75'] : ['hover:brightness-125']"
-				@click="onNextClick">
-				Next
+			<button :style="buttonStyles" class="hover:brightness-125"
+				@click="(stage != maxStage) ? onNextClick() : onClose()">
+				{{stage != maxStage ? 'Next' : 'Finish'}}
 			</button>
 		</div>
 	</template>
-- 
cgit v1.2.3