Use double-taps on mobile

2 files changed, 30 insertions, 11 deletions

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 73a818a..15b1b48 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -425,17 +425,34 @@ export default defineComponent({
 		// Click handling
 		onMouseDown(): void {
 			this.highlight = false;
-			clearTimeout(this.clickHoldTimer);
-			this.clickHoldTimer = setTimeout(() => {
-				this.clickHoldTimer = 0;
-				this.onClickHold();
-			}, this.uiOpts.clickHoldDuration);
+			if (!this.uiOpts.useDblClick){
+				// Wait for a mouseup or click-hold
+				clearTimeout(this.clickHoldTimer);
+				this.clickHoldTimer = setTimeout(() => {
+					this.clickHoldTimer = 0;
+					this.onClickHold();
+				}, this.uiOpts.clickHoldDuration);
+			} else {
+				// Wait for or recognise a double-click
+				if (this.clickHoldTimer == 0){
+					this.clickHoldTimer = setTimeout(() => {
+						this.clickHoldTimer = 0;
+						this.onClick();
+					}, this.uiOpts.clickHoldDuration);
+				} else {
+					clearTimeout(this.clickHoldTimer)
+					this.clickHoldTimer = 0;
+					this.onDblClick();
+				}
+			}
 		},
 		onMouseUp(): void {
-			if (this.clickHoldTimer > 0){
-				clearTimeout(this.clickHoldTimer);
-				this.clickHoldTimer = 0;
-				this.onClick();
+			if (!this.uiOpts.useDblClick){
+				if (this.clickHoldTimer > 0){
+					clearTimeout(this.clickHoldTimer);
+					this.clickHoldTimer = 0;
+					this.onClick();
+				}
 			}
 		},
 		onClick(): void {
@@ -453,6 +470,9 @@ export default defineComponent({
 			}
 			this.$emit(this.isLeaf ? 'leaf-click-held' : 'nonleaf-click-held', this.layoutNode);
 		},
+		onDblClick(): void {
+			this.onClickHold();
+		},
 		onInfoIconClick(evt: Event): void {
 			this.$emit('info-click', this.layoutNode.name);
 		},
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 88e1c66..894d834 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -8,8 +8,7 @@
 	<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.
+			It is unfinished, and is just here for testing.
 		</div>
 		<div class="w-full flex justify-evenly mt-2">
 			<s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button>