Merge pull request #3 from Tuggster/improved-windows

Better window management and desktop

Author: Tuggster

config.js

@@ -1,5 +1,9 @@
+// API
 SERVER_URL = "https://minesweeper-leaderboard.tuggi.dev";
 // SERVER_URL = 'http://localhost:3001';
+LEADERBOARD_ENABLED = true;
+
+// Local Storage
 LOCAL_STORAGE_USERNAME_KEY = "ms_lb_username";
 LOCAL_STORAGE_COLLAPSE_KEY = "ms_lb_collapsed";
 LOCAL_STORAGE_SHORTCUTS_REVEAL_KEY = "ms_shortcuts_reveal_enabled";
@@ -8,13 +12,16 @@ LOCAL_STORAGE_COLOR_KEY = "ms_color_enabled";
 LOCAL_STORAGE_MARKS_KEY = "ms_marks_enabled";
 LOCAL_STORAGE_GUESS_FREE_KEY = "ms_guess_free";
 
-LEADERBOARD_ENABLED = true;
+// Window Management
+WINDOW_Z_INDEX_STACK_START = 10;
 
 // name
 // onChange ==> (state) => ...
 // local storage key
 // value
 
+// State Management
+
 const setPreferenceValue = (key, value) => {
   const pref = preferences.find((p) => p.name === key);
 
@@ -131,3 +138,31 @@ const preferences = [
 document.addEventListener("DOMContentLoaded", () => {
   initPrefValuesFromLs();
 });
+
+// Window Defaults
+
+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);
+    },
+  },
+};

contextmenucontroller.js

@@ -75,13 +75,27 @@ window.addEventListener("load", function () {
   let barButtons = this.document.querySelectorAll(".options-bar *");
   barButtons.forEach((button) => {
     let buttonName = button.getAttribute("name");
+
+    if (!buttonName || buttonName === "") {
+      return;
+    }
+
     let cMenu = this.document.querySelector(`.context-menu > *[name=${buttonName}]`);
+
+    if (!cMenu) {
+      return;
+    }
+
     cMenu.style.visibility = "hidden";
 
     let btnPos = button.getBoundingClientRect();
     let menuPos = cMenu.getBoundingClientRect();
 
     button.addEventListener("mouseenter", function () {
+      if (dragging) {
+        return;
+      }
+
       btnPos = button.getBoundingClientRect();
       menuPos = cMenu.getBoundingClientRect();
 
@@ -115,36 +129,4 @@ window.addEventListener("load", function () {
       newGame();
     });
   });
-
-  let draggables = document.querySelectorAll(".draggable");
-  draggables.forEach((draggable) => {
-    let header = draggable.children[0].children[0];
-    header.addEventListener("mousemove", (event) => {
-      if (event.buttons & 1) {
-        if (!dragging) {
-          dragging = true;
-          startX = event.clientX;
-          startY = event.clientY;
-        } else {
-          let diffX = startX - event.clientX;
-          let diffY = startY - event.clientY;
-
-          let newLeft = draggable.style.left.split("px")[0] - diffX;
-          let newTop = draggable.style.top.split("px")[0] - diffY;
-
-          draggable.style.left = `${newLeft}px`;
-          draggable.style.top = `${newTop}px`;
-
-          startX = event.clientX;
-          startY = event.clientY;
-        }
-      } else {
-        dragging = false;
-      }
-    });
-  });
 });
-
-let dragging = false;
-let startX = 0;
-let startY = 0;

desktop.css

@@ -0,0 +1,59 @@
+/* Desktop */
+
+.desktop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  padding: 1.5rem;
+  z-index: 0;
+
+  gap: 2rem;
+
+  user-select: none;
+}
+
+/* Icons */
+
+.icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: 75px;
+  height: 75px;
+}
+
+.icon > p {
+  color: black;
+
+  background-color: #d2d2d2;
+  padding: 2px;
+
+  font-family: msSansSerif;
+  font-size: 13px;
+}
+
+.icon.selected > p {
+  color: white;
+  background-color: #36b2ff;
+}
+
+.icon > img {
+  aspect-ratio: 1;
+  width: 100%;
+
+  image-rendering: pixelated;
+}
+
+/* Selection Box */
+
+.selection-box {
+  background-color: #0078d799;
+  position: absolute;
+
+  border: 2px solid #0078d7;
+  left: 500px;
+
+  z-index: 5;
+}

desktop.js

@@ -0,0 +1,159 @@
+// the selection box thing...
+
+let selectDragActive = false;
+const startPosition = { x: 0, y: 0 };
+const endPosition = { x: 0, y: 0 };
+
+window.addEventListener("mousemove", (event) => {
+  if (event.buttons & 1) {
+    // Starting a new drag
+    if (!selectDragActive) {
+      if (didClickWindow(event.target)) {
+        return;
+      }
+
+      selectDragActive = true;
+      startPosition.x = event.clientX;
+      startPosition.y = event.clientY;
+    }
+
+    endPosition.x = event.clientX;
+    endPosition.y = event.clientY;
+
+    doSelectionBoxLogic(getSanePositions());
+  } else {
+    selectDragActive = false;
+  }
+  displaySelectionBox();
+});
+
+window.addEventListener("mouseup", () => {
+  if (selectDragActive) {
+    selectDragActive = false;
+    doSelectionBoxLogic(getSanePositions());
+    displaySelectionBox();
+  }
+});
+
+const didClickWindow = (element) => {
+  return !!findParentOfClass(element, "draggable");
+};
+
+const findParentOfClass = (element, classname) => {
+  if (!element) {
+    return null;
+  }
+
+  if (!element.parentElement) {
+    return null;
+  }
+
+  const classList = element.classList;
+  if (!classList.contains(classname)) {
+    return findParentOfClass(element.parentElement, classname);
+  }
+
+  return element;
+};
+
+const getSanePositions = () => {
+  // organize
+  const { x: sX, y: sY } = startPosition;
+  const { x: eX, y: eY } = endPosition;
+
+  const width = Math.abs(sX - eX);
+  const height = Math.abs(sY - eY);
+
+  // Determine top left of selected box
+  const x = sX < eX ? sX : eX;
+  const y = sY < eY ? sY : eY;
+
+  return { x, y, width, height };
+};
+
+const containedInSelection = (x, y, width, height, positions) => {
+  const rightEdge = x + width;
+  const bottomEdge = y + height;
+
+  const containerRightEdge = positions.x + positions.width;
+  const containerBottomEdge = positions.y + positions.height;
+
+  const xContained = (x >= positions.x || rightEdge >= positions.x) && !(x >= containerRightEdge);
+
+  const yContained = (y >= positions.y || bottomEdge >= positions.y) && !(y >= containerBottomEdge);
+
+  return xContained && yContained;
+};
+
+const doSelectionBoxLogic = (boxPositions) => {
+  const desktopItems = Array.from(document.querySelectorAll(".desktop > div"));
+  desktopItems.forEach((element) => {
+    const bounds = element.getBoundingClientRect();
+    const contained = containedInSelection(bounds.x, bounds.y, bounds.width, bounds.height, boxPositions);
+
+    if (contained) {
+      element.classList.add("selected");
+    } else {
+      element.classList.remove("selected");
+    }
+  });
+};
+
+const displaySelectionBox = () => {
+  const selectionBox = document.querySelector(".selection-box");
+
+  if (!selectDragActive) {
+    selectionBox.style.visibility = "hidden";
+    return;
+  }
+
+  const { x, y, width, height } = getSanePositions();
+
+  // apply to css
+  selectionBox.style.visibility = "visible";
+  selectionBox.style.width = `${width}px`;
+  selectionBox.style.height = `${height}px`;
+  selectionBox.style.left = `${x}px`;
+  selectionBox.style.top = `${y}px`;
+  //   selectionBox.style.left = `${100}px`;
+};
+
+const desktopClickHandler = (event) => {
+  const positions = {
+    x: event.pageX,
+    y: event.pageY,
+    width: 1,
+    height: 1,
+  };
+
+  doSelectionBoxLogic(positions);
+};
+
+window.addEventListener("mousedown", desktopClickHandler);
+
+// Doubleclick
+
+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();
+};
+
+window.addEventListener("load", () => {
+  const desktopIcons = document.querySelectorAll(".desktop > .icon");
+
+  desktopIcons.forEach((icon) => {
+    icon.addEventListener("dblclick", desktopDoubleclickHandler);
+  });
+});