From c2f8a84645dbb0d3159ad5b3831d0597854690ce Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 23 May 2022 22:23:53 +1000
Subject: Add help modal button that opens tutorial

Needed to add code for skipping tutorial pane's welcome message.
Also fixed small unwanted click-propagation bug in SettingsModal.
---
 src/App.vue                      | 24 +++++++++++++++++-------
 src/components/HelpModal.vue     |  9 ++++++++-
 src/components/SettingsModal.vue |  2 +-
 src/components/TutorialPane.vue  | 10 ++++++++--
 4 files changed, 34 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 5fdd279..2fdf0e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -109,6 +109,7 @@ export default defineComponent({
 			searchOpen: false,
 			settingsOpen: false,
 			tutorialOpen: true,
+			tutorialFirstRun: true,
 			enabledFeatures: new EnabledFeatures(),
 			// For search and auto-mode
 			modeRunning: false,
@@ -586,8 +587,16 @@ export default defineComponent({
 			this.helpOpen = true;
 		},
 		// For tutorial events
+		onStartTutorial(){
+			if (this.tutorialOpen == false){
+				this.tutorialOpen = true;
+				tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.lytOpts,
+					{allowCollapse: true, layoutMap: this.layoutMap});
+			}
+		},
 		onTutorialClose(){
 			this.tutorialOpen = false;
+			this.tutorialFirstRun = false;
 			this.enabledFeatures = new EnabledFeatures();
 			tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.lytOpts,
 				{allowCollapse: true, layoutMap: this.layoutMap});
@@ -689,7 +698,8 @@ export default defineComponent({
 		:pos="ancestryBarPos" :dims="ancestryBarDims" :nodes="detachedAncestors"
 		:tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts"
 		@detached-ancestor-click="onDetachedAncestorClick" @info-icon-click="onInfoIconClick"/>
-	<tutorial-pane v-if="tutorialOpen" :pos="[0,0]" :dims="tutorialPaneDims" :uiOpts="uiOpts"
+	<tutorial-pane v-if="tutorialOpen"
+		:skipWelcome="!tutorialFirstRun" :pos="[0,0]" :dims="tutorialPaneDims" :uiOpts="uiOpts"
 		@tutorial-close="onTutorialClose" @set-enabled-features="onSetEnabledFeatures"/>
 	<!-- Icons -->
 	<search-icon @click="onSearchIconClick"
@@ -705,19 +715,19 @@ export default defineComponent({
 		class="absolute bottom-[6px] right-[6px] w-[18px] h-[18px]
 			text-white/40 hover:text-white hover:cursor-pointer"/>
 	<!-- Modals -->
-	<transition name="fade">
-		<search-modal v-if="searchOpen" :tolMap="tolMap" :uiOpts="uiOpts" ref="searchModal"
-			@search-close="searchOpen = false" @search-node="onSearchNode" @info-icon-click="onInfoIconClick"/>
-	</transition>
 	<transition name="fade">
 		<tile-info-modal v-if="infoModalNodeName != null"
 			:nodeName="infoModalNodeName" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts"
 			@info-modal-close="infoModalNodeName = null"/>
 	</transition>
 	<transition name="fade">
-		<help-modal v-if="helpOpen" :uiOpts="uiOpts" @help-modal-close="helpOpen = false"/>
+		<search-modal v-if="searchOpen" :tolMap="tolMap" :uiOpts="uiOpts" ref="searchModal"
+			@search-close="searchOpen = false" @search-node="onSearchNode" @info-icon-click="onInfoIconClick"/>
+	</transition>
+	<transition name="fade">
+		<help-modal v-if="helpOpen" :uiOpts="uiOpts"
+			@help-modal-close="helpOpen = false" @start-tutorial="onStartTutorial"/>
 	</transition>
-	<!-- Settings -->
 	<settings-modal v-if="settingsOpen" :lytOpts="lytOpts" :uiOpts="uiOpts"
 		@settings-close="settingsOpen = false"
 		@layout-option-change="onLayoutOptionChange" @tree-change="onTreeChange"/>
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 539d3dc..8b29a90 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -13,9 +13,13 @@ export default defineComponent({
 				this.$emit('help-modal-close');
 			}
 		},
+		onStartTutorial(){
+			this.$emit('start-tutorial');
+			this.$emit('help-modal-close');
+		},
 	},
 	components: {CloseIcon, },
-	emits: ['help-modal-close', ],
+	emits: ['help-modal-close', 'start-tutorial', ],
 });
 </script>
 
@@ -46,6 +50,9 @@ export default defineComponent({
 			in culpa qui officia deserunt mollit anim id
 			est laborum.
 		</div>
+		<button class="block bg-stone-700 text-white px-4 py-2 rounded" @click.stop="onStartTutorial">
+			Start Tutorial
+		</button>
 	</div>
 </div>
 </template>
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 5f3b3c4..4af08c5 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -47,7 +47,7 @@ export default defineComponent({
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onCloseClick">
 	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 max-h-[80%]
 		p-3 bg-stone-50 visible rounded-md shadow shadow-black">
-		<close-icon @click="onCloseClick" ref="closeIcon"
+		<close-icon @click.stop="onCloseClick" ref="closeIcon"
 			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" />
 		<h1 class="text-xl font-bold mb-2">Settings</h1>
 		<hr class="border-stone-400"/>
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 37c5832..82ef628 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -5,13 +5,14 @@ import {EnabledFeatures} from '../lib';
 
 export default defineComponent({
 	props: {
+		skipWelcome: {type: Boolean, default: false},
 		pos: {type: Array as unknown as PropType<[number,number]>, required: true},
 		dims: {type: Array as unknown as PropType<[number,number]>, required: true},
 		uiOpts: {type: Object, required: true},
 	},
 	data(){
 		return {
-			stage: 0,
+			stage: this.skipWelcome ? 1 : 0,
 			maxStage: 10,
 		};
 	},
@@ -79,6 +80,11 @@ export default defineComponent({
 			this.$emit('set-enabled-features', x);
 		},
 	},
+	created(){
+		if (this.skipWelcome){
+			this.sendEnabledFeatures();
+		}
+	},
 	components: {CloseIcon, },
 	emits: ['tutorial-close', 'set-enabled-features', ],
 });
@@ -101,7 +107,7 @@ export default defineComponent({
 				Start Tutorial
 			</button>
 			<button :style="buttonStyles" class="hover:brightness-125" @click="onClose">
-				Continue
+				Close
 			</button>
 		</div>
 	</template>
-- 
cgit v1.2.3