From ddb38fc873d6bbce5a69d059237374e6ab23422f Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 25 Jan 2023 19:39:09 +1100
Subject: Add intro modal

---
 src/App.vue                   | 15 ++++++++++
 src/components/HelpModal.vue  | 12 ++------
 src/components/IntroModal.vue | 68 +++++++++++++++++++++++++++++++++++++++++++
 src/lib.ts                    |  2 +-
 src/store.ts                  |  2 ++
 5 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 src/components/IntroModal.vue

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index f807836..c258b0d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,6 +59,9 @@
 	<transition name="fade">
 		<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>
@@ -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>
diff --git a/src/lib.ts b/src/lib.ts
index 1067119..bb76739 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -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),
-- 
cgit v1.2.3