Remove duplicate code

src/birb.js

@@ -4,7 +4,11 @@ import Anim from './anim.js';
 import {
 	Directions,
 	isDebug,
-	setDebug
+	setDebug,
+	makeElement,
+	onClick,
+	makeDraggable,
+	makeClosable
 } from './shared.js';
 import {
 	SPRITE,
@@ -641,25 +645,6 @@ Promise.all([
 		save();
 	}
 
-	/**
-	 * Create an HTML element with the specified parameters
-	 * @param {string} className
-	 * @param {string} [textContent]
-	 * @param {string} [id]
-	 * @returns {HTMLElement}
-	 */
-	function makeElement(className, textContent, id) {
-		const element = document.createElement("div");
-		element.classList.add(className);
-		if (textContent) {
-			element.textContent = textContent;
-		}
-		if (id) {
-			element.id = id;
-		}
-		return element;
-	}
-
 	/**
 	 * Create a window element with header and content
 	 * @param {string} id
@@ -917,24 +902,6 @@ Promise.all([
 		centerElement(fieldGuide);
 	}
 
-	/**
-	 * @param {() => void} func
-	 * @param {Element} [closeButton]
-	 */
-	function makeClosable(func, closeButton) {
-		if (closeButton) {
-			onClick(closeButton, func);
-		}
-		document.addEventListener("keydown", (e) => {
-			if (closeButton && !document.body.contains(closeButton)) {
-				return;
-			}
-			if (e.key === "Escape") {
-				func();
-			}
-		});
-	}
-
 	function removeFieldGuide() {
 		const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID);
 		if (fieldGuide) {
@@ -956,97 +923,6 @@ Promise.all([
 		save();
 	}
 
-	/**
-	 * @param {Document|Element} element
-	 * @param {(e: Event) => void} action
-	 */
-	function onClick(element, action) {
-		element.addEventListener("click", (e) => action(e));
-		element.addEventListener("touchend", (e) => {
-			if (e instanceof TouchEvent === false) {
-				return;
-			} else if (element instanceof HTMLElement === false) {
-				return;
-			}
-			const touch = e.changedTouches[0];
-			const rect = element.getBoundingClientRect();
-			if (
-				touch.clientX >= rect.left &&
-				touch.clientX <= rect.right &&
-				touch.clientY >= rect.top &&
-				touch.clientY <= rect.bottom
-			) {
-				action(e);
-			}
-		});
-	}
-
-	/**
-	 * @param {HTMLElement|null} element The element to detect drag events on
-	 * @param {boolean} [parent] Whether to move the parent element when the child is dragged
-	 * @param {(top: number, left: number) => void} [callback] Callback for when element is moved
-	 */
-	function makeDraggable(element, parent = true, callback = () => { }) {
-		if (!element) {
-			return;
-		}
-
-		let isMouseDown = false;
-		let offsetX = 0;
-		let offsetY = 0;
-		let elementToMove = parent ? element.parentElement : element;
-
-		if (!elementToMove) {
-			error("Parent element not found");
-			return;
-		}
-
-		element.addEventListener("mousedown", (e) => {
-			isMouseDown = true;
-			offsetX = e.clientX - elementToMove.offsetLeft;
-			offsetY = e.clientY - elementToMove.offsetTop;
-		});
-
-		element.addEventListener("touchstart", (e) => {
-			isMouseDown = true;
-			const touch = e.touches[0];
-			offsetX = touch.clientX - elementToMove.offsetLeft;
-			offsetY = touch.clientY - elementToMove.offsetTop;
-			e.preventDefault();
-		});
-
-		document.addEventListener("mouseup", (e) => {
-			if (isMouseDown) {
-				callback(elementToMove.offsetTop, elementToMove.offsetLeft);
-				e.preventDefault();
-			}
-			isMouseDown = false;
-		});
-
-		document.addEventListener("touchend", (e) => {
-			if (isMouseDown) {
-				callback(elementToMove.offsetTop, elementToMove.offsetLeft);
-				e.preventDefault();
-			}
-			isMouseDown = false;
-		});
-
-		document.addEventListener("mousemove", (e) => {
-			if (isMouseDown) {
-				elementToMove.style.left = `${Math.max(0, e.clientX - offsetX)}px`;
-				elementToMove.style.top = `${Math.max(0, e.clientY - offsetY)}px`;
-			}
-		});
-
-		document.addEventListener("touchmove", (e) => {
-			if (isMouseDown) {
-				const touch = e.touches[0];
-				elementToMove.style.left = `${Math.max(0, touch.clientX - offsetX)}px`;
-				elementToMove.style.top = `${Math.max(0, touch.clientY - offsetY)}px`;
-			}
-		});
-	}
-
 	/**
 	 * @param {string[][]} array
 	 * @param {number} sprite