diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-06-24 16:02:17 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-06-24 16:02:17 +1000 |
| commit | f8fb0af9aaacf96bb82fab006cc4bf32565fd61c (patch) | |
| tree | b9a64808ee7dae1b8fde109071b67b2d52543578 /src | |
| parent | e034e2ea9e74cf6f01ea4f978a3fb61e019c7d4b (diff) | |
Enable skipping tutorial on startup
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 16 | ||||
| -rw-r--r-- | src/components/TutorialPane.vue | 10 |
2 files changed, 18 insertions, 8 deletions
diff --git a/src/App.vue b/src/App.vue index 5144f50..5505b8b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -95,6 +95,7 @@ function getDefaultUiOpts(){ tutorialPaneSz: 200, tutorialPaneBgColor: '#1c1917', tutorialPaneTextColor: 'white', + tutorialSkip: false, // Timing related tileChgDuration: 300, //ms (for tile move/expand/collapse) clickHoldDuration: 400, //ms (duration after mousedown when a click-and-hold is recognised) @@ -109,6 +110,8 @@ export default defineComponent({ data(){ let layoutTree = initLayoutTree(initialTolMap, "", 0); layoutTree.hidden = true; + let lytOpts = this.getLytOpts(); + let uiOpts = this.getUiOpts(); return { tolMap: initialTolMap, layoutTree: layoutTree, @@ -120,8 +123,8 @@ export default defineComponent({ helpOpen: false, searchOpen: false, settingsOpen: false, - tutorialOpen: true, - welcomeOpen: true, + tutorialOpen: !uiOpts.tutorialSkip, + welcomeOpen: !uiOpts.tutorialSkip, ancestryBarInTransition: false, tutTriggerAction: null as Action | null, tutTriggerFlag: false, @@ -133,8 +136,8 @@ export default defineComponent({ autoPrevAction: null as AutoAction | null, // Used to help prevent action cycles autoPrevActionFail: false, // Used to avoid re-trying a failed expand/collapse // Options - lytOpts: this.getLytOpts(), - uiOpts: this.getUiOpts(), + lytOpts: lytOpts, + uiOpts: uiOpts, // For layout and resize-handling mainAreaDims: [0, 0] as [number, number], tileAreaDims: [0, 0] as [number, number], @@ -684,6 +687,9 @@ export default defineComponent({ } }, 100); }, + onTutorialSkip(){ + localStorage.setItem('ui tutorialSkip', String(true)); + }, onTutStageChg(triggerAction: Action | null){ this.welcomeOpen = false; this.tutTriggerAction = triggerAction; @@ -926,7 +932,7 @@ export default defineComponent({ <transition name="fade" @after-enter="tutPaneTransitionEnd" @after-leave="tutPaneTransitionEnd"> <tutorial-pane v-if="tutorialOpen" :height="uiOpts.tutorialPaneSz + 'px'" :uiOpts="uiOpts" :triggerFlag="tutTriggerFlag" :skipWelcome="!welcomeOpen" - @close="onTutorialClose" @stage-chg="onTutStageChg"/> + @close="onTutorialClose" @skip="onTutorialSkip" @stage-chg="onTutStageChg"/> </transition> </div> <div :class="['flex', mainAreaDims[0] > mainAreaDims[1] ? 'flex-row' : 'flex-col', 'grow', 'min-h-0']" ref="mainArea"> diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index 5e6c1c0..3cc1eb6 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -49,6 +49,10 @@ export default defineComponent({ this.stage = 1; this.setEnabledFeatures(); }, + onSkipTutorial(){ + this.$emit('skip'); + this.$emit('close'); + }, onPrevClick(){ this.stage = Math.max(1, this.stage - 1); this.setEnabledFeatures(); @@ -90,7 +94,7 @@ export default defineComponent({ } }, components: {CloseIcon, RButton, }, - emits: ['close', 'stage-chg', ], + emits: ['close', 'stage-chg', 'skip', ], }); </script> @@ -112,8 +116,8 @@ export default defineComponent({ <r-button class="bg-stone-800 text-white" @click="onStartTutorial"> Start Tutorial </r-button> - <r-button class="bg-stone-800 text-white" @click="onClose"> - Close + <r-button class="bg-stone-800 text-white" @click="onSkipTutorial"> + Skip </r-button> </div> </template> |