From 4b3e2dee521dbd3ced6a1c74a09bdad7e4f93a1d Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 23 May 2022 18:41:20 +1000
Subject: Add tutorial stages, with prev/next buttons

---
 src/components/TutorialPane.vue | 117 ++++++++++++++++++++++++++++++++--------
 1 file changed, 94 insertions(+), 23 deletions(-)

diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 97bb4cd..e027857 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -11,6 +11,7 @@ export default defineComponent({
 	data(){
 		return {
 			stage: 0,
+			maxStage: 10,
 		};
 	},
 	computed: {
@@ -25,13 +26,30 @@ export default defineComponent({
 				color: this.uiOpts.tutorialPaneTextColor,
 			};
 		 },
+		 tutContentStyles(): Record<string,string> {
+			return {
+				padding: '0 0.5cm',
+				maxWidth: '15cm',
+				margin: '0 auto',
+				fontSize: 'small',
+				overflow: 'auto',
+			};
+		 },
+		 buttonStyles(): Record<string,string> {
+			return {
+				display: 'block',
+				padding: '8px 16px',
+				borderRadius: '5px',
+				backgroundColor: '#292524',
+			};
+		 },
 	},
 	methods: {
-		onCloseClick(evt: Event){
-			this.$emit('tutorial-close');
+		onPrevClick(){
+			this.stage = Math.max(1, this.stage - 1);
 		},
-		onTutorialStart(){
-			console.log("Start tutorial");
+		onNextClick(){
+			this.stage = Math.min(this.maxStage, this.stage + 1);
 		},
 	},
 	components: {CloseIcon, },
@@ -40,31 +58,84 @@ export default defineComponent({
 </script>
 
 <template>
-<div :style="styles">
-	<close-icon @click.stop="onCloseClick" ref="closeIcon"
-		class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
-	<div v-if="stage == 0" class="h-full flex flex-col justify-evenly">
-		<h1 class="px-4 text-center text-xl font-bold">Welcome</h1>
-		<div class="px-4 max-w-[15cm] mx-auto text-sm">
+<div :style="styles" class="flex flex-col justify-evenly">
+	<template v-if="stage == 0">
+		<div :style="tutContentStyles">
 			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">
-			<div>
-				<button class="w-full h-full px-4 py-2 rounded bg-stone-800 hover:bg-stone-700"
-					@click="onTutorialStart">
-					Start Tutorial
-				</button>
-			</div>
-			<div>
-				<button class="w-full h-full px-4 py-2 rounded bg-stone-800 hover:bg-stone-700"
-					@click="onCloseClick">
-					Continue
-				</button>
-			</div>
+			<button :style="buttonStyles" class="hover:brightness-125" @click="stage = 1">
+				Start Tutorial
+			</button>
+			<button :style="buttonStyles" class="hover:brightness-125" @click="$emit('tutorial-close')">
+				Continue
+			</button>
+		</div>
+	</template>
+	<template v-if="stage > 0">
+		<div v-if="stage == 1" :style="tutContentStyles">
+			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">
+			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">
+			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">
+			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">
+			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">
+			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">
+			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">
+			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">
+			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">
+			And finally, the help icon provides summarised usage information.
+		</div>
+		<div class="w-full flex justify-evenly">
+			<button :style="buttonStyles"
+				:disabled="stage < 2" :class="stage < 2 ? ['brightness-75'] : ['hover:brightness-125']"
+				@click="onPrevClick">
+				Previous
+			</button>
+			<button :style="buttonStyles"
+				:disabled="stage == maxStage" :class="stage == maxStage ? ['brightness-75'] : ['hover:brightness-125']"
+				@click="onNextClick">
+				Next
+			</button>
 		</div>
-	</div>
+	</template>
 </div>
 </template>
-- 
cgit v1.2.3