Update build and sticky notes

src/application.js

@@ -91,7 +91,7 @@ const UPDATE_INTERVAL = 1000 / 60; // 60 FPS
 const AFK_TIME = isDebug() ? 0 : 1000 * 5;
 const PET_BOOST_DURATION = 1000 * 60 * 5;
 const PET_MENU_COOLDOWN = 1000;
-const URL_CHECK_INTERVAL = 250;
+const URL_CHECK_INTERVAL = 150;
 const HOP_DELAY = 500;
 
 // Random event chances per tick
@@ -348,31 +348,6 @@ Promise.all([
 			return;
 		}
 
-		// Preload font
-		const MONOCRAFT_SRC = "https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf";
-		const fontLink = document.createElement("link");
-		fontLink.rel = "stylesheet";
-		fontLink.href = `url(${MONOCRAFT_SRC}) format('opentype')`;
-		document.head.appendChild(fontLink);
-
-		// Add stylesheet font-face
-		const fontFace = `
-			@font-face {
-				font-family: 'Monocraft';
-				src: url(${MONOCRAFT_SRC}) format('opentype');
-				font-weight: normal;
-				font-style: normal;
-			}
-		`;
-
-		try {
-			const fontStyle = document.createElement("style");
-			fontStyle.textContent = fontFace;
-			document.head.appendChild(fontStyle);
-		} catch (e) {
-			error("Failed to load font: " + e);
-		}
-
 		load().then(onLoad);
 	}
 

src/shared.js

@@ -96,6 +96,7 @@ export function makeDraggable(element, parent = true, callback = () => { }, page
 		offsetX = touch.clientX - elementToMove.offsetLeft;
 		offsetY = touch.clientY - elementToMove.offsetTop;
 		e.preventDefault();
+		e.stopPropagation();
 	});
 
 	document.addEventListener("mouseup", (e) => {
@@ -136,8 +137,9 @@ export function makeDraggable(element, parent = true, callback = () => { }, page
 /**
  * @param {() => void} func
  * @param {Element} [closeButton]
+ * @param {boolean} [allowEscape] Whether to allow closing with the Escape key
  */
-export function makeClosable(func, closeButton) {
+export function makeClosable(func, closeButton, allowEscape = true) {
 	if (closeButton) {
 		onClick(closeButton, func);
 	}
@@ -145,7 +147,7 @@ export function makeClosable(func, closeButton) {
 		if (closeButton && !document.body.contains(closeButton)) {
 			return;
 		}
-		if (e.key === "Escape") {
+		if (allowEscape && e.key === "Escape") {
 			func();
 		}
 	});

src/stickyNotes.js

@@ -41,6 +41,9 @@ export class StickyNote {
 export function renderStickyNote(stickyNote, page, onSave, onDelete) {
 	const noteElement = makeElement("birb-window");
 	noteElement.classList.add("birb-sticky-note");
+	const color = getColor(stickyNote.id);
+	noteElement.style.setProperty("--birb-highlight", color);
+	noteElement.style.setProperty("--birb-border-color", color);
 	
 	// Create header
 	const header = makeElement("birb-window-header");
@@ -77,7 +80,7 @@ export function renderStickyNote(stickyNote, page, onSave, onDelete) {
 				onDelete();
 				noteElement.remove();
 			}
-		}, closeButton);
+		}, closeButton, false);
 	}
 
 	if (textarea && textarea instanceof HTMLTextAreaElement) {
@@ -144,3 +147,14 @@ export function createNewStickyNote(stickyNotes, onSave, onDelete) {
 	stickyNotes.push(stickyNote);
 	onSave();
 }
+
+/**
+ * Get a color based on the mod of the sticky note ID
+ * @param {string} id
+ * @returns {string} A color hex code
+ */
+function getColor(id) {
+	const colors = ["#ff8baa", "#79bcff", "#d18bff", "#6de192", "#ffd17c", "#ffb37c", "#ff7c7c"];
+	const index = parseInt(id, 10) % colors.length;
+	return colors[index];
+}

src/stylesheet.css

@@ -1,3 +1,10 @@
+@font-face {
+	font-family: 'Monocraft';
+	src: url("__MONOCRAFT_SRC__") format('opentype');
+	font-weight: normal;
+	font-style: normal;
+}
+
 :root {
 	--birb-border-size: 2px;
 	--birb-neg-border-size: calc(var(--birb-border-size) * -1);
@@ -318,6 +325,17 @@
 .birb-sticky-note {
 	position: absolute;
 	box-sizing: border-box;
+	animation: fade-in 0.15s ease-in;
+}
+
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
 }
 
 .birb-sticky-note > .birb-window-content {
@@ -340,5 +358,6 @@
 }
 
 .birb-sticky-note-input:focus {
-	outline: none;
+	outline: none !important;
+	box-shadow: none !important;
 }