diff options
Diffstat (limited to 'src/components/TutorialPane.vue')
| -rw-r--r-- | src/components/TutorialPane.vue | 123 |
1 files changed, 61 insertions, 62 deletions
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index 243ee33..88e1c66 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -1,5 +1,65 @@ -<script lang="ts"> +<template> +<div :style="styles" class="p-2 flex flex-col justify-between"> + <div class="flex"> + <h2 class="text-center mb-2 mx-auto">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2> + <close-icon @click.stop="onClose" + class="block w-6 h-6 hover:cursor-pointer"/> + </div> + <template v-if="stage == 0"> + <div :style="contentStyles"> + This page provides a visualisation of the biological Tree of Life. + It was made using data from OTOL, EOL, and Wikipedia. + For more project information, click here. + </div> + <div class="w-full flex justify-evenly mt-2"> + <s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button> + <s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button> + </div> + </template> + <template v-else> + <div v-if="stage == 1" :style="contentStyles"> + Clicking/touching a tile expands it and shows it's children. + </div> + <div v-else-if="stage == 2" :style="contentStyles"> + Clicking on an expanded tile's header shrinks it back. + </div> + <div v-else-if="stage == 3" :style="contentStyles"> + Clicking and holding on a tile makes it fill the view, and moves it's + ancestors to a sidebar. The same thing applies for an expanded tile's header. + </div> + <div v-else-if="stage == 4" :style="contentStyles"> + Clicking on a tile in the sidebar brings it back into the main view. + </div> + <div v-else-if="stage == 5" :style="contentStyles"> + Clicking on the icon at a tile's bottom-right, or at the right of + an expanded tile's header, brings up more information. + </div> + <div v-else-if="stage == 6" :style="contentStyles"> + You can search using the icon at the top-right. Alternatively, press Ctrl-F. + </div> + <div v-else-if="stage == 7" :style="contentStyles"> + You can use the play icon to enable 'Auto Mode'. + </div> + <div v-else-if="stage == 8" :style="contentStyles"> + The settings icon allows adjusting the layout, animation speed, etc. + </div> + <div v-else-if="stage == 9" :style="contentStyles"> + And finally, the help icon provides more information. + </div> + <!-- Buttons --> + <div class="w-full flex justify-evenly mt-2"> + <s-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick"> + Prev + </s-button> + <s-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()"> + {{stage != lastStage ? 'Next' : 'Finish'}} + </s-button> + </div> + </template> +</div> +</template> +<script lang="ts"> import {defineComponent, PropType} from 'vue'; import SButton from './SButton.vue'; import CloseIcon from './icon/CloseIcon.vue'; @@ -103,64 +163,3 @@ export default defineComponent({ emits: ['close', 'stage-chg', 'skip', ], }); </script> - -<template> -<div :style="styles" class="p-2 flex flex-col justify-between"> - <div class="flex"> - <h2 class="text-center mb-2 mx-auto">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2> - <close-icon @click.stop="onClose" - class="block w-6 h-6 hover:cursor-pointer"/> - </div> - <template v-if="stage == 0"> - <div :style="contentStyles"> - This page provides a visualisation of the biological Tree of Life. - It was made using data from OTOL, EOL, and Wikipedia. - For more project information, click here. - </div> - <div class="w-full flex justify-evenly mt-2"> - <s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button> - <s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button> - </div> - </template> - <template v-else> - <div v-if="stage == 1" :style="contentStyles"> - Clicking/touching a tile expands it and shows it's children. - </div> - <div v-else-if="stage == 2" :style="contentStyles"> - Clicking on an expanded tile's header shrinks it back. - </div> - <div v-else-if="stage == 3" :style="contentStyles"> - Clicking and holding on a tile makes it fill the view, and moves it's - ancestors to a sidebar. The same thing applies for an expanded tile's header. - </div> - <div v-else-if="stage == 4" :style="contentStyles"> - Clicking on a tile in the sidebar brings it back into the main view. - </div> - <div v-else-if="stage == 5" :style="contentStyles"> - Clicking on the icon at a tile's bottom-right, or at the right of - an expanded tile's header, brings up more information. - </div> - <div v-else-if="stage == 6" :style="contentStyles"> - You can search using the icon at the top-right. Alternatively, press Ctrl-F. - </div> - <div v-else-if="stage == 7" :style="contentStyles"> - You can use the play icon to enable 'Auto Mode'. - </div> - <div v-else-if="stage == 8" :style="contentStyles"> - The settings icon allows adjusting the layout, animation speed, etc. - </div> - <div v-else-if="stage == 9" :style="contentStyles"> - And finally, the help icon provides more information. - </div> - <!-- Buttons --> - <div class="w-full flex justify-evenly mt-2"> - <s-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick"> - Prev - </s-button> - <s-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()"> - {{stage != lastStage ? 'Next' : 'Finish'}} - </s-button> - </div> - </template> -</div> -</template> |