diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 15 | ||||
| -rw-r--r-- | src/components/HelpModal.vue | 12 | ||||
| -rw-r--r-- | src/components/IntroModal.vue | 68 | ||||
| -rw-r--r-- | src/lib.ts | 2 | ||||
| -rw-r--r-- | src/store.ts | 2 |
5 files changed, 89 insertions, 10 deletions
diff --git a/src/App.vue b/src/App.vue index f807836..c258b0d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -60,6 +60,9 @@ <help-modal v-if="helpOpen" :vert="vert" @close="helpOpen = false"/> </transition> <transition name="fade"> + <intro-modal v-if="showIntro" :vert="vert" @close="onCloseIntro"/> + </transition> + <transition name="fade"> <loading-modal v-if="loadingMsg != null" :msg="loadingMsg"/> </transition> </div> @@ -74,6 +77,7 @@ import InfoModal from './components/InfoModal.vue'; import SearchModal from './components/SearchModal.vue'; import SettingsModal from './components/SettingsModal.vue'; import HelpModal from './components/HelpModal.vue'; +import IntroModal from './components/IntroModal.vue'; import LoadingModal from './components/LoadingModal.vue'; import IconButton from './components/IconButton.vue'; @@ -421,6 +425,17 @@ function onSettingChg(option: string){ const helpOpen = ref(false); +// ========== For intro modal ========== + +const showIntro = ref(!store.introSkip); +function onCloseIntro(){ + showIntro.value = false; + if (store.introSkip == false){ + store.introSkip = true; + store.save('introSkip'); + } +} + // ========== For loading modal ========== const SERVER_WAIT_MSG = 'Loading data'; diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 64df474..0aed405 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -5,12 +5,6 @@ <close-icon @click.stop="onClose" ref="closeRef" class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/> <h1 class="text-center text-xl sm:text-2xl font-bold pt-2 pb-1">Help</h1> - <p class="px-4 pb-1"> - This is an interactive historical timeline, displaying events from - {{dateToDisplayStr(MIN_DATE)}} to {{dateToDisplayStr(MAX_DATE)}}. - {{touchDevice ? 'Drag the screen' : 'Scroll or press ' + (vert ? 'up/down': 'left/right')}} to pan. - {{touchDevice ? 'Pinch' : 'Hold shift'}} to zoom. - </p> <div class="flex flex-col gap-2 p-2"> <s-collapsible :class="scClasses"> <template #summary="slotProps"> @@ -30,8 +24,8 @@ class="border border-stone-300 rounded mx-auto md:mx-0 md:shrink-0"/> <p> Events are shown as labelled images. Blue borders indicate - discovery events. This allows distinctions like between when a planet was discovered - and when it was formed. + discovery events. This is so that events like the discovery of Andromeda + don't look the same as the event of its creation. </p> <p> Events are linked to points on the timeline that match their 'start date'. @@ -306,7 +300,7 @@ import SCollapsible from './SCollapsible.vue'; import CloseIcon from './icon/CloseIcon.vue'; import DownIcon from './icon/DownIcon.vue'; -import {MIN_DATE, MAX_DATE, MIN_CAL_YEAR, dateToDisplayStr} from '../lib'; +import {MIN_DATE, MAX_DATE, MIN_CAL_YEAR, dateToDisplayStr, dateToYearStr} from '../lib'; import {useStore} from '../store'; const rootRef = ref(null as HTMLDivElement | null) diff --git a/src/components/IntroModal.vue b/src/components/IntroModal.vue new file mode 100644 index 0000000..fc79ed0 --- /dev/null +++ b/src/components/IntroModal.vue @@ -0,0 +1,68 @@ +<template> +<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose" ref="rootRef"> + <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 + max-w-[80%] w-2/3 min-w-[8cm] md:w-[12cm] max-h-[80%]" :style="styles"> + <close-icon @click.stop="onClose" ref="closeRef" + class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/> + + <h1 class="text-center text-xl font-bold pt-2 pb-1 md:text-2xl md:pt-3"> + Welcome + </h1> + + <div class="px-4 py-2 md:p-3"> + <p> + This is an interactive historical timeline, displaying events from + {{dateToDisplayStr(MIN_DATE)}} to {{dateToYearStr(MAX_DATE)}}. + </p> + <ul class="list-disc pl-4 pt-2"> + <li v-if="touchDevice"> + <span class="font-bold">Drag the screen</span> to move the timeline + </li> + <li v-else> + <span class="font-bold">Scroll</span> or + <span class="font-bold">press {{vert ? 'up and down': 'left and right'}}</span> + to move the timeline + </li> + <li> + <span class="font-bold">{{touchDevice ? 'Pinch' : 'Hold shift'}}</span> to zoom in and out + </li> + <li> + {{touchDevice ? 'Tap' : 'Click'}} the help button for more details + </li> + </ul> + </div> + </div> +</div> +</template> + +<script setup lang="ts"> +import {ref, computed} from 'vue'; + +import CloseIcon from './icon/CloseIcon.vue'; +import {MIN_DATE, MAX_DATE, dateToDisplayStr, dateToYearStr} from '../lib'; +import {useStore} from '../store'; + +const rootRef = ref(null as HTMLDivElement | null); +const closeRef = ref(null as typeof CloseIcon | null); + +const store = useStore(); +const touchDevice = computed(() => store.touchDevice) + +const props = defineProps({ + vert: {type: Boolean, required: true}, +}); + +const emit = defineEmits(['close']); + +function onClose(evt: Event){ + if (evt.target == rootRef.value || closeRef.value!.$el.contains(evt.target)){ + emit('close'); + } +} + +const styles = computed(() => ({ + backgroundColor: store.color.bgAlt, + borderRadius: store.borderRadius + 'px', + overflow: 'visible auto', +})); +</script> @@ -493,7 +493,7 @@ export function jsonToImgInfo(json: ImgInfoJson | null): ImgInfo | null { // ========== For timeline dates/data ========== -export const MIN_DATE = new YearDate(-13.8e9); +export const MIN_DATE = new YearDate(-14e9); export const MAX_DATE = new CalDate(2030, 1, 1); // (Same as in /backend/hist_data/cal.py) diff --git a/src/store.ts b/src/store.ts index 4436211..dbc798c 100644 --- a/src/store.ts +++ b/src/store.ts @@ -50,6 +50,7 @@ export type StoreState = { work: boolean, discovery: boolean, }, + introSkip: boolean, // Other initialStartDate: HistDate, // Must be after MIN_DATE (from lib.ts) @@ -136,6 +137,7 @@ function getDefaultState(): StoreState { work: true, discovery: true, }, + introSkip: false, // Other initialStartDate: new CalDate(1500, 1, 1), |