1 files changed, 95 insertions, 0 deletions
diff --git a/rushs/eplace/src/pages/utils.js b/rushs/eplace/src/pages/utils.js
new file mode 100644
index 0000000..f8b1008
--- /dev/null
+++ b/rushs/eplace/src/pages/utils.js
@@ -0,0 +1,95 @@
+/**
+ * Global variables
+ */
+let [leftTimer, rightTimer] = [null, null];
+let [leftSize, rightSize] = [
+    localStorage.getItem("leftSize") ?? 0,
+    localStorage.getItem("rightSize") ?? 0,
+];
+
+const parentContainer = document.getElementById("container");
+
+const leftContainer = document.getElementById("left-container");
+const closeLeftButton = document.getElementById("close-left");
+const rightContainer = document.getElementById("right-container");
+const closeRightButton = document.getElementById("close-right");
+
+leftContainer.classList.toggle("Hidden", !leftSize);
+
+/**
+ * Calculate the layout of the home page
+ */
+export const calculateLayout = () => {
+    const parentContainerSize = `${4.5 - leftSize - rightSize}fr`;
+
+    // left and right are reversed because of the grid layout
+    parentContainer.style.gridTemplateColumns = `${leftSize}fr ${parentContainerSize} ${rightSize}fr`;
+    leftContainer.style.opacity = leftSize;
+    rightContainer.style.opacity = rightSize;
+};
+
+closeLeftButton.addEventListener("click", () => {
+    leftSize = 1 - leftSize;
+    localStorage.setItem("leftSize", leftSize);
+
+    calculateLayout();
+    setTimeout(
+        () => {
+            leftContainer.classList.toggle("Hidden", true);
+        },
+        leftSize ? 0 : 300,
+    );
+});
+
+closeRightButton.addEventListener("click", () => {
+    rightSize = 1 - rightSize;
+    localStorage.setItem("rightSize", rightSize);
+
+    calculateLayout();
+    setTimeout(
+        () => {
+            rightContainer.classList.toggle("Hidden", true);
+        },
+        rightSize ? 0 : 300,
+    );
+});
+
+// If the mouse holds on the left side of the screen, open the left container
+document.addEventListener("mousemove", (e) => {
+    if (e.clientX < 10) {
+        if (!leftTimer) {
+            leftTimer = setTimeout(() => {
+                leftSize = 1;
+                localStorage.setItem("leftSize", leftSize);
+
+                calculateLayout();
+                setTimeout(() => {
+                    leftContainer.classList.toggle("Hidden", false);
+                }, 300);
+            }, 200);
+        }
+    } else {
+        clearTimeout(leftTimer);
+        leftTimer = null;
+    }
+});
+
+// If the mouse holds on the right side of the screen, open the right container
+document.addEventListener("mousemove", (e) => {
+    if (e.clientX > window.innerWidth - 10) {
+        if (!rightTimer) {
+            rightTimer = setTimeout(() => {
+                rightSize = 1;
+                localStorage.setItem("rightSize", rightSize);
+
+                calculateLayout();
+                setTimeout(() => {
+                    rightContainer.classList.toggle("Hidden", false);
+                }, 300);
+            }, 200);
+        }
+    } else {
+        clearTimeout(rightTimer);
+        rightTimer = null;
+    }
+});