diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 24 | ||||
| -rw-r--r-- | src/components/HelpModal.vue | 9 | ||||
| -rw-r--r-- | src/components/SettingsModal.vue | 2 | ||||
| -rw-r--r-- | src/components/TutorialPane.vue | 10 |
4 files changed, 34 insertions, 11 deletions
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" @@ -706,18 +716,18 @@ export default defineComponent({ 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> |