KitchenEngineer1332.github.io/script.js at main · KitchenEngineer1332/KitchenEngineer1332.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const layout = document.querySelector(".layout");
const boxes = document.querySelectorAll(".box");

let lockedBox = null;

/* -----------------------------
   HOVER (DESKTOP)
----------------------------- */
boxes.forEach(box => {
  box.addEventListener("mouseenter", () => {
    if (lockedBox) return;
    layout.classList.add("active");
    box.classList.add("active");
  });

  box.addEventListener("mouseleave", () => {
    if (lockedBox) return;
    layout.classList.remove("active");
    box.classList.remove("active");
  });
});

/* -----------------------------
   CLICK / TAP TO LOCK (MOBILE)
----------------------------- */
boxes.forEach(box => {
  box.addEventListener("click", e => {
    e.stopPropagation();

    // If clicking the same box → unlock
    if (lockedBox === box) {
      unlock();
      return;
    }

    lock(box);
  });
});

/* -----------------------------
   CLICK OUTSIDE TO UNLOCK
----------------------------- */
document.addEventListener("click", () => {
  unlock();
});

/* -----------------------------
   FUNCTIONS
----------------------------- */
function lock(box) {
  unlock();
  lockedBox = box;
  layout.classList.add("active");
  box.classList.add("active");
}

function unlock() {
  layout.classList.remove("active");
  boxes.forEach(b => b.classList.remove("active"));
  lockedBox = null;
}