Separate modal

1 files changed, 24 insertions, 47 deletions

diff --git a/app/main.js b/app/main.js
index 3c9b637..c8a10a3 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,4 +1,5 @@
-import { Dom, DomOptions, Widgets } from "dom";
+// main.js
+import { Dom, DomOptions, Modal, Widgets } from "dom";
 import { ColorParameter, MapEl } from "map";
 import {
 	DataProvider,
@@ -32,10 +33,8 @@ export class App {
 	#stats;
 	/** @type {HTMLElement} */
 	#controls;
-	/** @type {HTMLDialogElement|null} */
+	/** @type {Modal|null} */
 	#modal = null;
-	/** @type {number | undefined} */
-	#modalTimer = undefined;
 	/** @type {boolean} */
 	#persistent = false;
 	/** @type {string} */
@@ -80,7 +79,7 @@ export class App {
 			onHouseClick: (houseId, persistent) => this.#showHouseModal(houseId, persistent),
 			onHouseHover: (houseId, hide) => {
 				if (hide) {
-					this.#hideModal();
+					this.#modal?.hide();
 				} else {
 					this.#showHouseModal(houseId, false);
 				}
@@ -409,11 +408,12 @@ export class App {
 			this.#map.setModalPersistence(persistent);
 		}
 
-		// Remove existing modal
-		this.#modal?.remove();
+		// Hide existing modal
+		this.#modal?.hide();
 
-		// Create new modal
-		this.#modal = Widgets.buildModal(
+		this.#modal = new Modal(
+			house,
+			persistent,
 			{
 				left: "auto",
 				maxHeight: "80vh",
@@ -423,47 +423,24 @@ export class App {
 				transform: "translateY(-50%)",
 				width: "90%",
 			},
-
-			() => this.#hideModal(),
+			() => {
+				this.#modal = null;
+				this.#persistent = false;
+				if (this.#map) {
+					this.#map.setModalPersistence(false);
+					this.#map.clearModalTimer();
+				}
+			},
+			() => {
+				if (this.#map) {
+					this.#map.clearModalTimer();
+				}
+			},
 		);
-		Object.assign(this.#modal.style);
 
-		// Add hover grace period listeners
-		this.#modal.addEventListener("mouseenter", () => {
-			clearTimeout(this.#modalTimer);
-			if (this.#map) {
-				this.#map.clearModalTimer();
-			}
-		});
-
-		this.#modal.addEventListener("mouseleave", () => {
-			if (!this.#persistent) {
-				this.#modalTimer = setTimeout(() => this.#hideModal(), 200);
-			}
-		});
-
-		this.#modal.appendChild(Widgets.buildModalContent(house));
-		document.body.appendChild(this.#modal);
-
-		if (persistent) {
-			this.#modal.showModal();
-		} else {
-			this.#modal.show();
-		}
+		document.body.appendChild(this.#modal.render());
+		this.#modal.show();
 	}
-
-	#hideModal() {
-		this.#modal?.close();
-		this.#modal?.remove();
-		this.#modal = null;
-		this.#persistent = false;
-		clearTimeout(this.#modalTimer);
-		if (this.#map) {
-			this.#map.setModalPersistence(false);
-			this.#map.clearModalTimer();
-		}
-	}
-
 	/**
 	 * Load data and initialize application
 	 * @param {HTMLElement} loading