make desktop icons actually do things

Author: Tuggster

config.js

@@ -143,10 +143,26 @@ document.addEventListener("DOMContentLoaded", () => {
 
 LEADERBOARD_ID = "leaderboard";
 MINESWEEPER_ID = "minesweeper";
+NOTEPAD_ID = "notepad";
 
 const WINDOW_DEFAULTS = {
   [MINESWEEPER_ID]: {
     open: true,
     zIndex: WINDOW_Z_INDEX_STACK_START,
   },
 };
+
+// Desktop Actions
+
+const DESKTOP_CONFIG = {
+  ["desktop-open-minesweeper"]: {
+    clickHandler: (event) => {
+      setWindowVisibility(MINESWEEPER_ID, true);
+    },
+  },
+  ["desktop-open-notepad"]: {
+    clickHandler: (event) => {
+      setWindowVisibility(NOTEPAD_ID, true);
+    },
+  },
+};

desktop.js

@@ -36,20 +36,24 @@ window.addEventListener("mouseup", () => {
 });
 
 const didClickWindow = (element) => {
+  return !!findParentOfClass(element, "draggable");
+};
+
+const findParentOfClass = (element, classname) => {
   if (!element) {
-    return false;
+    return null;
   }
 
   if (!element.parentElement) {
-    return false;
+    return null;
   }
 
   const classList = element.classList;
-  if (!classList.contains("draggable")) {
-    return didClickWindow(element.parentElement);
+  if (!classList.contains(classname)) {
+    return findParentOfClass(element.parentElement, classname);
   }
 
-  return true;
+  return element;
 };
 
 const getSanePositions = () => {
@@ -129,12 +133,27 @@ window.addEventListener("mousedown", desktopClickHandler);
 
 // Doubleclick
 
-const desktopDoubleclickHandler = () => {};
+const desktopDoubleclickHandler = (event) => {
+  const target = event.target;
+
+  if (!target) {
+    return;
+  }
+
+  const parent = findParentOfClass(target, "icon");
+  const configItem = DESKTOP_CONFIG[parent.id];
+
+  if (!configItem) {
+    return;
+  }
+
+  configItem?.clickHandler();
+};
 
-document.addEventListener("load", () => {
+window.addEventListener("load", () => {
   const desktopIcons = document.querySelectorAll(".desktop > .icon");
 
   desktopIcons.forEach((icon) => {
-    console.log(icon);
+    icon.addEventListener("dblclick", desktopDoubleclickHandler);
   });
 });

draggables.js

@@ -111,6 +111,7 @@ window.addEventListener("load", () => {
 const setWindowVisibility = (id, visibility) => {
   const draggable = draggables.find((d) => d.id === id);
   draggable.open = visibility;
+  promoteZIndex(draggable.id);
 
   processDraggables();
 };

index.html

@@ -185,7 +185,7 @@ <h2>Mines:</h2>
     <div class="game-container notepad draggable" id="notepad">
       <div class="window-header">
         <div class="title-bar">
-          <button>
+          <button onclick="setWindowVisibility(NOTEPAD_ID, false)">
             <div class="minimize-button"></div>
           </button>
           <h1>Notepad - [untitled]</h1>

style.css

@@ -112,6 +112,10 @@ table {
   user-select: none;
 }
 
+.title-bar h1 {
+  padding-top: 2px;
+}
+
 .title-bar button {
   height: 100%;
   aspect-ratio: 1 / 1;