showcase.js

(function () {
  "use strict";

  var desktop = document.getElementById("desktop");
  var tasksEl = document.getElementById("tasks");

  var windows = {
    programs: { el: document.getElementById("win-programs"), icon: "i-folder", taskLabel: "Programs" },
    about: { el: document.getElementById("win-about"), icon: "i-notepad", taskLabel: "About Me" },
    recycle: { el: document.getElementById("win-recycle"), icon: "i-bin", taskLabel: "Recycle Bin" }
  };
  Object.keys(windows).forEach(function (id) {
    var w = windows[id];
    w.open = false;
    w.minimized = false;
    w.maximized = false;
    w.taskBtn = null;
  });

  var zCounter = 10;
  var activeId = null;

  function isMobile() {
    return window.matchMedia("(max-width: 640px)").matches;
  }

  function createTaskButton(id) {
    var w = windows[id];
    var btn = document.createElement("button");
    btn.type = "button";
    btn.className = "task-btn bevel-raised-tb";
    btn.dataset.winid = id;
    btn.innerHTML =
      '<svg aria-hidden="true"><use href="#' + w.icon + '"></use></svg>' +
      '<span class="tlabel">' + w.taskLabel + "</span>";
    btn.addEventListener("click", function () {
      handleTaskClick(id);
    });
    tasksEl.appendChild(btn);
    w.taskBtn = btn;
  }

  function removeTaskButton(id) {
    var w = windows[id];
    if (w.taskBtn) {
      w.taskBtn.remove();
      w.taskBtn = null;
    }
  }

  function focusWindow(id) {
    var w = windows[id];
    if (!w.open || w.minimized) return;
    zCounter += 1;
    w.el.style.zIndex = String(zCounter);
    Object.keys(windows).forEach(function (otherId) {
      var isThis = otherId === id;
      windows[otherId].el.classList.toggle("active", isThis);
      if (windows[otherId].taskBtn) windows[otherId].taskBtn.classList.toggle("active", isThis);
    });
    activeId = id;
  }

  function openWindow(id, opts) {
    opts = opts || {};
    var w = windows[id];
    if (!w.open) {
      w.open = true;
      w.el.classList.add("open");
      createTaskButton(id);
    }
    if (w.minimized) {
      w.minimized = false;
      w.el.classList.remove("minimized");
    }
    focusWindow(id);
    if (opts.moveFocus !== false) w.el.focus({ preventScroll: true });
    if (id === "programs") {
      if (opts.category !== undefined) {
        currentQuery = "";
        searchInput.value = "";
        setCategory(opts.category);
      }
      if (opts.focusSearch) {
        window.setTimeout(function () {
          searchInput.focus();
        }, 0);
      }
    }
  }

  function minimizeWindow(id) {
    var w = windows[id];
    if (!w.open) return;
    w.minimized = true;
    w.el.classList.add("minimized");
    if (w.taskBtn) w.taskBtn.classList.remove("active");
    if (activeId === id) activeId = null;
  }

  function closeWindow(id) {
    var w = windows[id];
    w.open = false;
    w.minimized = false;
    w.maximized = false;
    w.el.classList.remove("open", "minimized", "maximized", "active");
    removeTaskButton(id);
    if (activeId === id) activeId = null;
  }

  function toggleMaximize(id) {
    var w = windows[id];
    if (isMobile() && id === "programs") return;
    var el = w.el;
    var maxBtn = el.querySelector('[data-win-action="maximize"]');
    if (!w.maximized) {
      var deskRect = desktop.getBoundingClientRect();
      var rect = el.getBoundingClientRect();
      el.dataset.restoreLeft = rect.left - deskRect.left + "px";
      el.dataset.restoreTop = rect.top - deskRect.top + "px";
      el.dataset.restoreWidth = rect.width + "px";
      el.dataset.restoreHeight = rect.height + "px";
      w.maximized = true;
      el.classList.add("maximized");
      if (maxBtn) maxBtn.setAttribute("aria-label", "Restore");
    } else {
      w.maximized = false;
      el.classList.remove("maximized");
      el.style.left = el.dataset.restoreLeft || "";
      el.style.top = el.dataset.restoreTop || "";
      el.style.width = el.dataset.restoreWidth || "";
      el.style.height = el.dataset.restoreHeight || "";
      el.style.transform = "none";
      if (maxBtn) maxBtn.setAttribute("aria-label", "Maximize");
    }
    focusWindow(id);
  }

  function handleTaskClick(id) {
    var w = windows[id];
    if (w.minimized) {
      w.minimized = false;
      w.el.classList.remove("minimized");
      focusWindow(id);
      return;
    }
    if (activeId === id) {
      minimizeWindow(id);
      return;
    }
    focusWindow(id);
  }

  function setupDrag(id) {
    var w = windows[id];
    var handle = w.el.querySelector('[data-drag="true"]');
    var startX = 0, startY = 0, startLeft = 0, startTop = 0, dragging = false;

    handle.addEventListener("pointerdown", function (e) {
      if (e.target.closest(".tbuttons")) return;
      if (isMobile() && id === "programs") return;
      if (w.maximized) return;
      var deskRect = desktop.getBoundingClientRect();
      var rect = w.el.getBoundingClientRect();
      startLeft = rect.left - deskRect.left;
      startTop = rect.top - deskRect.top;
      startX = e.clientX;
      startY = e.clientY;
      w.el.style.left = startLeft + "px";
      w.el.style.top = startTop + "px";
      w.el.style.transform = "none";
      dragging = true;
      handle.setPointerCapture(e.pointerId);
    });

    handle.addEventListener("pointermove", function (e) {
      if (!dragging) return;
      var dx = e.clientX - startX;
      var dy = e.clientY - startY;
      var deskRect = desktop.getBoundingClientRect();
      var newTop = Math.max(0, Math.min(startTop + dy, deskRect.height - 24));
      var newLeft = Math.max(-w.el.offsetWidth + 60, Math.min(startLeft + dx, deskRect.width - 60));
      w.el.style.left = newLeft + "px";
      w.el.style.top = newTop + "px";
    });

    function endDrag(e) {
      if (!dragging) return;
      dragging = false;
      try {
        handle.releasePointerCapture(e.pointerId);
      } catch (err) {
        /* noop */
      }
    }
    handle.addEventListener("pointerup", endDrag);
    handle.addEventListener("pointercancel", endDrag);
  }

  Object.keys(windows).forEach(function (id) {
    var w = windows[id];
    w.el.addEventListener("pointerdown", function () {
      focusWindow(id);
    });
    w.el.querySelector('[data-win-action="minimize"]').addEventListener("click", function () {
      minimizeWindow(id);
    });
    w.el.querySelector('[data-win-action="maximize"]').addEventListener("click", function () {
      toggleMaximize(id);
    });
    w.el.querySelector('[data-win-action="close"]').addEventListener("click", function () {
      closeWindow(id);
    });
    setupDrag(id);
  });

  var treeEl = document.getElementById("program-tree");
  var gridEl = document.getElementById("program-grid");
  var statusCountEl = document.getElementById("status-count");
  var searchInput = document.getElementById("program-search");

  var currentCategory = "all";
  var currentQuery = "";

  function categoryCounts() {
    var counts = {};
    CATEGORIES.forEach(function (c) {
      counts[c.id] = 0;
    });
    PROJECTS.forEach(function (p) {
      counts[p.category] = (counts[p.category] || 0) + 1;
    });
    return counts;
  }

  function buildTree() {
    var counts = categoryCounts();
    var items = [{ id: "all", label: "All Programs", count: PROJECTS.length }];
    CATEGORIES.forEach(function (c) {
      items.push({ id: c.id, label: c.label, count: counts[c.id] || 0 });
    });

    var list = document.createElement("ul");
    list.className = "tree-list";
    items.forEach(function (item) {
      var li = document.createElement("li");
      var btn = document.createElement("button");
      btn.type = "button";
      btn.className = "tree-item";
      btn.dataset.category = item.id;
      btn.innerHTML =
        '<svg aria-hidden="true"><use href="#i-folder"></use></svg>' +
        '<span class="tname">' + item.label + "</span>" +
        '<span class="tcount">(' + item.count + ")</span>";
      btn.addEventListener("click", function () {
        currentQuery = "";
        searchInput.value = "";
        setCategory(item.id);
      });
      li.appendChild(btn);
      list.appendChild(li);
    });

    treeEl.innerHTML = "";
    treeEl.appendChild(list);
  }

  function updateTreeSelection() {
    treeEl.querySelectorAll(".tree-item").forEach(function (btn) {
      btn.classList.toggle("selected", btn.dataset.category === currentCategory);
    });
  }

  function setCategory(id) {
    currentCategory = id;
    updateTreeSelection();
    renderPrograms();
  }

  function escapeHtml(str) {
    return str.replace(/[&<>"']/g, function (ch) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[ch];
    });
  }

  function renderPrograms() {
    var query = currentQuery.trim().toLowerCase();
    var list;
    if (query) {
      list = PROJECTS.filter(function (p) {
        return p.name.toLowerCase().indexOf(query) !== -1;
      });
    } else if (currentCategory === "all") {
      list = PROJECTS.slice();
    } else {
      list = PROJECTS.filter(function (p) {
        return p.category === currentCategory;
      });
    }

    if (list.length === 0) {
      gridEl.innerHTML = '<p class="empty-note">No programs found.</p>';
    } else {
      gridEl.innerHTML = list
        .map(function (p) {
          return (
            '<a class="program" href="projects/' + p.slug + '/">' +
            '<img src="projects/' + p.slug + '/favicon.svg" width="32" height="32" alt="">' +
            '<span class="plabel">' + escapeHtml(p.name) + "</span></a>"
          );
        })
        .join("");
    }

    statusCountEl.textContent = list.length + " object(s)";
  }

  searchInput.addEventListener("input", function () {
    currentQuery = searchInput.value;
    if (currentQuery.trim() !== "") {
      currentCategory = "all";
      updateTreeSelection();
    }
    renderPrograms();
  });

  buildTree();
  updateTreeSelection();
  renderPrograms();

  var statusTotalEl = document.getElementById("status-total");
  var trayHintEl = document.getElementById("tray-hint");
  if (statusTotalEl) statusTotalEl.textContent = PROJECTS.length + " programs installed";
  if (trayHintEl) trayHintEl.textContent = PROJECTS.length + " programs installed";

  document.getElementById("icon-programs").addEventListener("click", function () {
    openWindow("programs");
  });
  document.getElementById("icon-about").addEventListener("click", function () {
    openWindow("about");
  });
  document.getElementById("icon-recycle").addEventListener("click", function () {
    openWindow("recycle");
  });

  var startBtn = document.getElementById("start-btn");
  var startMenu = document.getElementById("start-menu");
  var startCategoriesEl = document.getElementById("start-categories");

  CATEGORIES.forEach(function (c) {
    var li = document.createElement("li");
    var btn = document.createElement("button");
    btn.type = "button";
    btn.setAttribute("role", "menuitem");
    btn.dataset.action = "filter-category";
    btn.dataset.category = c.id;
    btn.innerHTML = '<svg aria-hidden="true"><use href="#i-folder"></use></svg>' + c.label;
    li.appendChild(btn);
    startCategoriesEl.appendChild(li);
  });

  function openStartMenu() {
    startMenu.hidden = false;
    startBtn.setAttribute("aria-expanded", "true");
    startBtn.classList.add("pressed");
  }

  function closeStartMenu() {
    startMenu.hidden = true;
    startBtn.setAttribute("aria-expanded", "false");
    startBtn.classList.remove("pressed");
  }

  startBtn.addEventListener("click", function () {
    if (startMenu.hidden) openStartMenu();
    else closeStartMenu();
  });

  document.addEventListener("pointerdown", function (e) {
    if (startMenu.hidden) return;
    if (startMenu.contains(e.target) || startBtn.contains(e.target)) return;
    closeStartMenu();
  });

  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && !startMenu.hidden) closeStartMenu();
  });

  startMenu.addEventListener("click", function (e) {
    var link = e.target.closest("a");
    var target = e.target.closest("[data-action]");
    if (link && !target) {
      closeStartMenu();
      return;
    }
    if (!target) return;

    var action = target.dataset.action;
    if (action === "open-programs") {
      openWindow("programs", { category: "all" });
    } else if (action === "filter-category") {
      openWindow("programs", { category: target.dataset.category });
    } else if (action === "find") {
      openWindow("programs", { focusSearch: true });
    } else if (action === "open-about") {
      openWindow("about");
    } else if (action === "shutdown") {
      showShutdown();
    }
    closeStartMenu();
  });

  var shutdownScreen = document.getElementById("shutdown-screen");
  var shutdownHint = document.getElementById("shutdown-hint");

  function showShutdown() {
    shutdownScreen.hidden = false;
    shutdownHint.classList.remove("visible");
    window.setTimeout(function () {
      shutdownHint.classList.add("visible");
    }, 1200);
  }

  function hideShutdown() {
    shutdownScreen.hidden = true;
  }

  shutdownScreen.addEventListener("click", hideShutdown);
  document.addEventListener("keydown", function (e) {
    if (shutdownScreen.hidden) return;
    if (e.key === "Enter" || e.key === " " || e.key === "Escape") hideShutdown();
  });

  var clockEl = document.getElementById("clock");

  function updateClock() {
    var now = new Date();
    var h = now.getHours();
    var ampm = h >= 12 ? "PM" : "AM";
    h = h % 12;
    if (h === 0) h = 12;
    var m = String(now.getMinutes()).padStart(2, "0");
    clockEl.textContent = h + ":" + m + " " + ampm;
  }

  function scheduleClockTick() {
    var now = new Date();
    var msToNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
    window.setTimeout(function () {
      updateClock();
      window.setInterval(updateClock, 60000);
    }, msToNextMinute);
  }

  updateClock();
  scheduleClockTick();

  var bootSplash = document.getElementById("boot-splash");
  var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var alreadyBooted = false;
  try {
    alreadyBooted = sessionStorage.getItem("showcaseos_booted") === "1";
  } catch (err) {
    alreadyBooted = false;
  }

  if (alreadyBooted || reducedMotion) {
    bootSplash.hidden = true;
  } else {
    window.setTimeout(function () {
      bootSplash.classList.add("fade-out");
      window.setTimeout(function () {
        bootSplash.hidden = true;
      }, 400);
    }, 1200);
  }
  try {
    sessionStorage.setItem("showcaseos_booted", "1");
  } catch (err) {
    /* noop */
  }

  openWindow("programs", { moveFocus: false });
})();