From 1bca6634b31f1e18e8d29233a1502914ae284e2b Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 15 Jul 2022 18:21:08 +1000
Subject: Show tutorial-open icon when tut-pane auto-closes

---
 src/App.vue                     | 21 +++++++++++++++++----
 src/components/icon/EduIcon.vue | 13 +++++++++++++
 2 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/components/icon/EduIcon.vue

diff --git a/src/App.vue b/src/App.vue
index 21a4789..f0574bb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,7 +21,7 @@
 		</icon-button>
 	</div>
 	<!-- Content area -->
-	<div class="grow min-h-0 flex flex-col" ref="contentArea">
+	<div class="grow min-h-0 flex flex-col relative" ref="contentArea">
 		<div :style="tutPaneContainerStyles" class="z-10"> <!-- Used to slide-in/out the tutorial pane -->
 			<transition name="fade">
 				<tutorial-pane v-if="tutPaneOpen" :style="tutPaneStyles"
@@ -46,6 +46,12 @@
 					@info-click="onInfoClick"/>
 			</div>
 		</div>
+		<transition name="fade">
+			<icon-button v-if="!tutPaneOpen && !uiOpts.tutorialSkip" @click="onStartTutorial"
+				:size="45" :style="buttonStyles" class="absolute bottom-2 right-2 z-10 shadow-[0_0_2px_black]">
+				<edu-icon/>
+			</icon-button>
+		</transition>
 	</div>
 	<!-- Modals -->
 	<transition name="fade">
@@ -94,6 +100,7 @@ import PlayIcon from './components/icon/PlayIcon.vue';
 import PauseIcon from './components/icon/PauseIcon.vue';
 import SettingsIcon from './components/icon/SettingsIcon.vue';
 import HelpIcon from './components/icon/HelpIcon.vue';
+import EduIcon from './components/icon/EduIcon.vue';
 // Other
 	// Note: Import paths lack a .ts or .js because .ts makes vue-tsc complain, and .js makes vite complain
 import {TolNode, TolMap} from './tol';
@@ -799,7 +806,8 @@ export default defineComponent({
 			}
 		},
 		onTutorialSkip(){
-			localStorage.setItem('UI tutorialSkip', String(true));
+			this.uiOpts.tutorialSkip = true;
+			this.onSettingChg('UI', 'tutorialSkip');
 		},
 		onTutStageChg(triggerAction: Action | null){
 			this.tutWelcome = false;
@@ -807,7 +815,12 @@ export default defineComponent({
 		},
 		onTutPaneClose(){
 			this.tutPaneOpen = false;
-			this.tutWelcome = false;
+			if (this.tutWelcome){
+				this.tutWelcome = false;
+			} else if (this.uiOpts.tutorialSkip == false){
+				this.uiOpts.tutorialSkip = true;
+				this.onSettingChg('UI', 'tutorialSkip');
+			}
 			this.uiOpts.disabledActions.clear();
 			this.updateAreaDims();
 			this.relayoutWithCollapse(true, true);
@@ -1121,7 +1134,7 @@ export default defineComponent({
 	},
 	components: {
 		TolTile, TutorialPane, AncestryBar,
-		IconButton, SearchIcon, PlayIcon, PauseIcon, SettingsIcon, HelpIcon,
+		IconButton, SearchIcon, PlayIcon, PauseIcon, SettingsIcon, HelpIcon, EduIcon,
 		TileInfoModal, SearchModal, SettingsModal, HelpModal, LoadingModal,
 	},
 });
diff --git a/src/components/icon/EduIcon.vue b/src/components/icon/EduIcon.vue
new file mode 100644
index 0000000..e46f2a6
--- /dev/null
+++ b/src/components/icon/EduIcon.vue
@@ -0,0 +1,13 @@
+<template>
+<svg viewBox="0 0 512 512">
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
+		d="M32 192L256 64l224 128-224 128L32 192z"/>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
+		d="M112 240v128l144 80 144-80V240M480 368V192M256 320v128"/>
+</svg>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
-- 
cgit v1.2.3