diff options
| -rw-r--r-- | src/components/TutorialPane.vue | 117 |
1 files changed, 94 insertions, 23 deletions
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index 97bb4cd..e027857 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -11,6 +11,7 @@ export default defineComponent({ data(){ return { stage: 0, + maxStage: 10, }; }, computed: { @@ -25,13 +26,30 @@ export default defineComponent({ color: this.uiOpts.tutorialPaneTextColor, }; }, + tutContentStyles(): Record<string,string> { + return { + padding: '0 0.5cm', + maxWidth: '15cm', + margin: '0 auto', + fontSize: 'small', + overflow: 'auto', + }; + }, + buttonStyles(): Record<string,string> { + return { + display: 'block', + padding: '8px 16px', + borderRadius: '5px', + backgroundColor: '#292524', + }; + }, }, methods: { - onCloseClick(evt: Event){ - this.$emit('tutorial-close'); + onPrevClick(){ + this.stage = Math.max(1, this.stage - 1); }, - onTutorialStart(){ - console.log("Start tutorial"); + onNextClick(){ + this.stage = Math.min(this.maxStage, this.stage + 1); }, }, components: {CloseIcon, }, @@ -40,31 +58,84 @@ export default defineComponent({ </script> <template> -<div :style="styles"> - <close-icon @click.stop="onCloseClick" ref="closeIcon" - class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/> - <div v-if="stage == 0" class="h-full flex flex-col justify-evenly"> - <h1 class="px-4 text-center text-xl font-bold">Welcome</h1> - <div class="px-4 max-w-[15cm] mx-auto text-sm"> +<div :style="styles" class="flex flex-col justify-evenly"> + <template v-if="stage == 0"> + <div :style="tutContentStyles"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. </div> <div class="w-full flex justify-evenly"> - <div> - <button class="w-full h-full px-4 py-2 rounded bg-stone-800 hover:bg-stone-700" - @click="onTutorialStart"> - Start Tutorial - </button> - </div> - <div> - <button class="w-full h-full px-4 py-2 rounded bg-stone-800 hover:bg-stone-700" - @click="onCloseClick"> - Continue - </button> - </div> + <button :style="buttonStyles" class="hover:brightness-125" @click="stage = 1"> + Start Tutorial + </button> + <button :style="buttonStyles" class="hover:brightness-125" @click="$emit('tutorial-close')"> + Continue + </button> + </div> + </template> + <template v-if="stage > 0"> + <div v-if="stage == 1" :style="tutContentStyles"> + Click/touch on the tile to expand it and see it's children. <br/> + A green title means the tile has children. Orange and red mean 100+ or 1000+ children. + If a clicked tile won't fit on screen, expansion fails. + There is a way around this, which we'll describe later. + </div> + <div v-else-if="stage == 2" :style="tutContentStyles"> + You can keep expanding tiles, and they are repositioned to try and save space, + while still trying to maintain a stable layout, to avoid disorientation. + </div> + <div v-else-if="stage == 3" :style="tutContentStyles"> + Click on an expanded tile's header to shrink it, hiding it's children + You can keep exploring the tree this way, expanding and collapsing tiles as needed, + to better show the groups you're interested in. + </div> + <div v-else-if="stage == 4" :style="tutContentStyles"> + Eventually, you might run out of screen space, and be unable to go deeper. + Click and hold on a tile to make it fill the view, and move it's + ancestors to a sidebar. You can do the same thing on an expanded tile's header. + </div> + <div v-else-if="stage == 5" :style="tutContentStyles"> + Click on a tile in the sidebar to bring it back into the main view. + In this way, you can explore as deeply as you want, occasionally jumping back + upward to explore a different ancestral branch. + </div> + <div v-else-if="stage == 6" :style="tutContentStyles"> + Each tile has an info icon on the bottom right. Clicking on this brings up + information about the corresponding biological taxon. <br/> + A similar icon appears at the right end of each expanded-tile header. + </div> + <div v-else-if="stage == 7" :style="tutContentStyles"> + The search icon allows for finding a particular tile, and bringing it into view. + To stop the traversal, just click anywhere on screen. + </div> + <div v-else-if="stage == 8" :style="tutContentStyles"> + The play icon enables 'auto mode', which continuously expands/collapses + random tiles, until you click to make it stop. + </div> + <div v-else-if="stage == 9" :style="tutContentStyles"> + The settings icon allows for adjusting the layout, among other things. + <ul class="list-disc"> + <li>The animation speed can be slowed down if you find the tile-repositioning hard to follow.</li> + <li>The 'reduced tree' setting replaces the original tree with a simplified version.</li> + </ul> + </div> + <div v-else-if="stage == 10" :style="tutContentStyles"> + And finally, the help icon provides summarised usage information. + </div> + <div class="w-full flex justify-evenly"> + <button :style="buttonStyles" + :disabled="stage < 2" :class="stage < 2 ? ['brightness-75'] : ['hover:brightness-125']" + @click="onPrevClick"> + Previous + </button> + <button :style="buttonStyles" + :disabled="stage == maxStage" :class="stage == maxStage ? ['brightness-75'] : ['hover:brightness-125']" + @click="onNextClick"> + Next + </button> </div> - </div> + </template> </div> </template> |