From 8c17859a11a0901e68458d1cd37bcc051e2e77c0 Mon Sep 17 00:00:00 2001
From: Isaac Mills <rooster0055@protonmail.com>
Date: Thu, 17 Jul 2025 11:08:19 -0600
Subject: [PATCH] Prevent tubes and triangles from conflicting

---
 src/components/head.html | 25 +++++++++++++++++--------
 src/triangle.js          | 11 ++++++++---
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/head.html b/src/components/head.html
index 3b2f476..3c3df46 100644
--- a/src/components/head.html
+++ b/src/components/head.html
@@ -55,11 +55,11 @@
             <label for="playpause">Increase productivity</label>
           </li>
           <li>
-            <input id="tube" type="checkbox" onclick="tube()">
+            <input id="tube" type="checkbox" onclick="window.tube(true)">
             <label for="tube">Increase tubes</label>
           </li>
           <li>
-            <input id="triangle" type="checkbox" onclick="window.triangle(event)">
+            <input id="triangle" type="checkbox" onclick="window.triangle(true)">
             <label for="triangle">Increase ⨻</label>
           </li>
         </ul>
@@ -117,16 +117,25 @@
         player.pause()
       }
     }
-    function tube() {
+    window.tube = (run_tri) => {
       const tubeBg = document.getElementById('tubes');
       const pageContent = document.getElementById("page-content");
+      const triangle = document.getElementById('triangle');
+      const tube = document.getElementById('tube');
 
-      if (tubeBg.style.display == "block") {
-        tubeBg.style.display = "none";
-        pageContent.style.backgroundImage = "linear-gradient(to bottom, rgb(0, 0, 0), #636363 1024px)";
-      } else {
+      if (run_tri) {
+        triangle.checked = false;
+        window.triangle(false);
+      }
+
+      if (tube.checked) {
         tubeBg.style.display = "block";
-        pageContent.style.backgroundImage = "linear-gradient(to bottom, rgb(0, 0, 0, 0), #636363BE 768px)";
+        if (run_tri) {
+          pageContent.style.backgroundImage = "linear-gradient(to bottom, rgb(0, 0, 0, 0), #636363BE 768px)";
+        }
+      } else {
+        tubeBg.style.display = "none";
+        pageContent.style.removeProperty('background-image');
       }
     }
   </script>
diff --git a/src/triangle.js b/src/triangle.js
index 972ae04..8c4dc6d 100644
--- a/src/triangle.js
+++ b/src/triangle.js
@@ -1,6 +1,11 @@
-window.triangle = (event) => {
-  const checked = event.target.checked;
-  const pageContent = document.getElementById("page-content");
+window.triangle = (run_tube) => {
+  const checked = document.getElementById('triangle').checked;
+  const tube = document.getElementById('tube')
+
+  if (run_tube) {
+    tube.checked = false;
+    window.tube(false);
+  }
 
   if (checked) {
     thisStylesheet.href = new URL("triangle.css", import.meta.url);