feat: Refactor ui steps as promises

source/code/ui.js

@@ -1,37 +1,7 @@
 let introDelay = 6;
 let hintDelay = 1;
 
-const intro = {
+const intro = document.getElementById('intro');
-	element: document.getElementById('intro'),
-	delay: introDelay * 1000,
-	show() {
-		if (typeof this.timeoutId === 'number') {
-			this.cancel();
-		}
-
-		console.info("Intro begin.");
-		this.element.classList.replace('op_hide', 'op_show');
-
-		this.timeoutId = setTimeout(
-			() => {
-				this.dismiss();
-			},
-			this.delay
-		)
-	},
-	dismiss() {
-		this.element.classList.replace('op_show', 'op_hide');
-		this.timeoutId = undefined;
-
-		this.element.addEventListener('transitionend', () => {
-			console.info("Intro fin.");
-			agree();
-		});
-	},
-	cancel() {
-		clearTimeout(this.timeoutId);
-	}
-};
 const agreement = document.getElementById('agreement');
 const hint = {
 	element: document.getElementById('hint'),
@@ -62,8 +32,6 @@ const hint = {
 window.addEventListener('click', () => hint.show());
 window.addEventListener('keydown', () => hint.show());
 
-if (intro.element) intro.show();
-
 function agree() {
 	if (agreement) {
 		console.info("Agreement show.");
@@ -75,3 +43,71 @@ function agree() {
 		}, introDelay * 1000)
 	}
 }
+
+function init() {
+	return new Promise((resolve) => {
+		console.log('Init');
+		resolve();
+	});
+}
+
+function showIntro() {
+	const el = intro;
+	const dy = introDelay * 1000;
+
+	return new Promise((resolve, reject) => {
+		if (el) {
+			console.info("Intro begin.");
+			el.classList.replace('op_hide', 'op_show');
+
+			setTimeout(
+				() => {
+					el.classList.replace('op_show', 'op_hide');
+
+					el.addEventListener('transitionend', () => {
+						console.info("Intro fin.");
+						resolve("Intro fin.");
+					});
+				},
+				dy
+			);
+		} else {
+			reject('No intro available.');
+		}
+	})
+}
+
+function showAgreement() {
+	const el = agreement;
+	const dy = introDelay * 1000;
+
+	return new Promise((resolve, reject) => {
+		if (el) {
+			console.info("Agreement show.");
+			el.classList.replace('op_hide', 'op_show');
+
+			setTimeout(
+				() => {
+					el.classList.replace('op_show', 'op_hide');
+
+					el.addEventListener('transitionend', () => {
+						console.info("Agreement closed.");
+						resolve("closed");
+					});
+				},
+				dy
+			)
+		} else {
+			reject('No agreement today.');
+		}
+	})
+}
+
+init()
+	.then(showIntro)
+	.catch(er => console.error(er))
+	.then(showAgreement)
+	.catch(er => console.error(er))
+	.finally(() => {
+		console.debug('Init end.');
+	});