1const scope = document.getElementById("scope");
 2const content = document.querySelector('.content');
 3let x, y, offsetX, offsetY, isDragging = false;
 4const padding = 100; // Padding in px
 5
 6let cheatcodes = [];
 7const cheatkeys = ["b", "a", "t", "m", "n"];
 8let cheatTimeout;
 9
10function updateClipPath() {
11  const rect = scope.getBoundingClientRect();
12  const insetTop = rect.top;
13  const insetRight = window.innerWidth - rect.right - padding;
14  const insetBottom = window.innerHeight - rect.bottom - padding;
15  const insetLeft = rect.left;
16  content.style.clipPath = `inset(${Math.max(0, insetTop)}px ${Math.max(0, insetRight)}px ${Math.max(0, insetBottom)}px ${Math.max(0, insetLeft)}px)`;
17}
18
19function centerScope() {
20  const scopeWidth = scope.offsetWidth;
21  const scopeHeight = scope.offsetHeight;
22  const centerX = (window.innerWidth - scopeWidth) / 2;
23  const centerY = (window.innerHeight - scopeHeight) / 2;
24  scope.style.left = `${centerX}px`;
25  scope.style.top = `${centerY}px`;
26  updateClipPath();
27}
28
29document.addEventListener("mousemove", (e) => {
30  x = e.clientX;
31  y = e.clientY;
32  if (isDragging) {
33    const newX = x - offsetX;
34    const newY = y - offsetY;
35
36    const maxX = window.innerWidth - scope.offsetWidth;
37    const maxY = window.innerHeight - scope.offsetHeight;
38
39    const finalX = Math.min(Math.max(0, newX), maxX);
40    const finalY = Math.min(Math.max(0, newY), maxY);
41
42    scope.style.left = `${finalX}px`;
43    scope.style.top = `${finalY}px`;
44
45    updateClipPath();
46  }
47});
48
49document.onmouseup = () => {
50  isDragging = false;
51  scope.style.cursor = "grab";
52};
53
54scope.onmousedown = (e) => {
55  e.preventDefault();
56  isDragging = true;
57  offsetX = e.clientX - scope.getBoundingClientRect().left;
58  offsetY = e.clientY - scope.getBoundingClientRect().top;
59  scope.style.cursor = "grabbing";
60};
61
62window.onload = centerScope;
63window.onresize = centerScope;
64
65
66// Cheat Code Section
67document.addEventListener("keydown", event => {
68  if (cheatkeys.includes(event.key.toLowerCase())) {
69    cheatcodes.push(event.key.toLowerCase());
70    clearTimeout(cheatTimeout);
71    cheatTimeout = setTimeout(() => {
72      cheatcodes = [];
73    }, 3000);
74
75    if (cheatcodes.length == 6) {
76      let cheatcode = cheatcodes.join("");
77      if (cheatcode === "batman") {
78        scope.style.transition = "width 0.5s ease-in, height 0.5s ease-in, top 0.5s ease-in, left 0.5s ease-in"
79        scope.style.top = 0
80        scope.style.left = 0
81        scope.style.width = "100%"
82        scope.style.height = "100%"
83        content.style.transition = "clip-path 0.5s ease-in"
84        content.style.clipPath = "inset(0px)"
85      }
86      cheatcodes = [];
87    }
88  } else {
89    cheatcodes = [];
90  }
91});
92
93