diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 21 | ||||
| -rw-r--r-- | src/components/icon/EduIcon.vue | 13 |
2 files changed, 30 insertions, 4 deletions
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> |