updated code

ptable/app.js

@@ -305,8 +305,8 @@ class PeriodicTableApp {
         this.selectDisease(index, false);
       }
     });
-
-    const clickevent = () => {
+  
+    function mouseClick() {
       // Check if the clicked element is already selected
       if (element.classList.contains("selected")) {
         // If it is selected, remove the class and unselect it
@@ -320,17 +320,17 @@ class PeriodicTableApp {
         });
         element.classList.add("selected");
         this.selectionFinalized = true;
-        this.selectDisease(index, true);
+        this.selectDisease(index);
       }
 
       // Re-enable the hover effect for all disease elements
       document.querySelectorAll('.disease').forEach(disease => {
         disease.classList.add('hoverable');
       });
-    };
-    
-    element.addEventListener("touchstart", clickevent);
-    element.addEventListener("click", clickevent);
+    }
+
+    element.addEventListener("touchstart", mouseClick);
+    element.addEventListener("click", mouseClick);
 
     return element;
   }
@@ -374,7 +374,6 @@ class PeriodicTableApp {
 
 
   selectDisease(index, finalize=true) {
-    console.log(finalize);
     this.selectedDiseaseIndex = index;
 
     // Update the selected disease display
@@ -653,4 +652,4 @@ document.addEventListener("DOMContentLoaded", () => {
 // Disable scrolling
 document.addEventListener("touchmove", function (e) {
   e.preventDefault();
-});
+});

ptable/constants.js

@@ -1,10 +1,10 @@
-const diseaseColors = {
-    "Degenerative": "#D9D9D9",
-    "Progressive Fibrotic": "#97B6D3",
-    "Cancer": "#9ee5d4",
-    "Autoimmune": "#D7B1C5",
-    "Toxic Adenoma": "#B9D4A5",
-    "Immune Hypersensitivity": "#EDCD7D",
-}
+const diseaseClasses = [
+    { disease: "Degenerative", color: "#D9D9D9", row: 1, column: 1 },
+    { disease: "Progressive Fibrotic", color: "#97B6D3", row: 2, column: 1 },
+    { disease: "Neoplasm", color: "#9ee5d4", row: 1, column: 2 },
+    { disease: "Immune Hypersensitivity", color: "#D7B1C5", row: 2, column: 2 },
+    { disease: "Toxic Adenoma", color: "#B9D4A5", row: 1, column: 3 },
+    { disease: "CD8+ Autoimmune", color: "#EDCD7D", row: 2, column: 3},
+];
 
-export default diseaseColors;
+export default diseaseClasses;