added remaining columns of table and added styling

Elixonus · Jul 19, 2024 · c717b79 · c717b79
1 parent 3d8fcc9
commit c717b79
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 6 deletions.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -33,7 +33,7 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v4
+        uses: actions/upload-pages-artifact@v3
         with:
           # Upload specific repository
           path: "./optics"

diff --git a/optics/index.html b/optics/index.html
@@ -27,12 +27,14 @@
             <button type="button" id="button-load-scene-9" class="button">LOAD SCENE 9</button>
         </div>
         <div id="group-logger">
+            <button type="button" id="button-update-collision" class="button">REFRESH COLLISION TABLE</button>
             <table id="table-collision" class="table">
                 <thead>
                     <tr>
                         <th>LID</th>
                         <th>CID</th>
                         <th>Type</th>
+                        <th>Position</th>
                         <th>Incident Angle</th>
                         <th>Reflected Angle</th>
                         <th>Refracted Angle</th>

diff --git a/optics/script.js b/optics/script.js
@@ -1288,6 +1288,7 @@ const loadButton6 = document.getElementById("button-load-scene-6");
 const loadButton7 = document.getElementById("button-load-scene-7");
 const loadButton8 = document.getElementById("button-load-scene-8");
 const loadButton9 = document.getElementById("button-load-scene-9");
+const updateButton = document.getElementById("button-update-collision");
 const collisionTable = document.getElementById("table-collision");
 const wallpaperImage = document.getElementById("image-wallpaper");
 const tileImage = document.getElementById("image-tile");
@@ -1351,6 +1352,7 @@ loadButton6.addEventListener("click", (event) => loadExample(6));
 loadButton7.addEventListener("click", (event) => loadExample(7));
 loadButton8.addEventListener("click", (event) => loadExample(8));
 loadButton9.addEventListener("click", (event) => loadExample(9));
+updateButton.addEventListener("click", (event) => updateCollisionTable());
 
 /** render a step of the simulation based on the time variable */
 function render() {
@@ -1997,26 +1999,66 @@ function updateCollisionTable() {
     for(let n = 0; n < lasersCollisions.length; n++) {
         let laserCollisions = lasersCollisions[n];
 
+        if (Math.round(scene.lasers[n].brightness) === 0) {
+            laserCollisions = [];
+        }
+
         for(let m = 0; m < laserCollisions.length; m++) {
             let laserCollision = laserCollisions[m];
             let row = newBody.insertRow(-1);
             let cell1 = row.insertCell(-1);
-            cell1.innerText = n.toString();
+            cell1.innerText = (n + 1).toString();
             let cell2 = row.insertCell(-1);
-            cell2.innerText = m.toString();
+            cell2.innerText = (m + 1).toString();
             let cell3 = row.insertCell(-1);
             cell3.innerText = laserCollision.type.charAt(0).toUpperCase() + laserCollision.type.slice(1);
             let cell4 = row.insertCell(-1);
 
+            if (laserCollision.type !== "void") {
+                cell4.innerText = "(" + Math.round(laserCollision.position.x).toString() + ", " + Math.round(-laserCollision.position.y).toString() + ")";
+            } else {
+                cell4.innerText = "-";
+            }
+
+            let cell5 = row.insertCell(-1);
+
             if (laserCollision.type === "reflection" || laserCollision.type === "refraction") {
-                cell4.innerText = (Math.round(100 * laserCollision.incidentAngle * 180 / Math.PI) / 100).toString();
+                cell5.innerText = (Math.round(100 * laserCollision.incidentAngle * 180 / Math.PI) / 100).toString() + " deg";
+            } else {
+                cell5.innerText = "-";
+            }
+
+            let cell6 = row.insertCell(-1);
+
+            if (laserCollision.type === "reflection") {
+                cell6.innerText = (Math.round(100 * laserCollision.reflectedAngle * 180 / Math.PI) / 100).toString() + " deg";
+            } else {
+                cell6.innerText = "-";
+            }
+
+            let cell7 = row.insertCell(-1);
+            let cell8 = row.insertCell(-1);
+            let cell9 = row.insertCell(-1);
+            let cell10 = row.insertCell(-1);
+            let cell11 = row.insertCell(-1);
+
+            if (laserCollision.type === "refraction") {
+                cell7.innerText = (Math.round(100 * laserCollision.refractedAngle * 180 / Math.PI) / 100).toString() + " deg";
+                cell8.innerText = (Math.round(100 * laserCollision.incidentIndex) / 100).toString();
+                cell9.innerText = (Math.round(100 * laserCollision.refractedIndex) / 100).toString();
+                cell10.innerText = laserCollision.incidentCount.toString();
+                cell11.innerText = laserCollision.refractedCount.toString();
+            } else {
+                cell7.innerText = "-";
+                cell8.innerText = "-";
+                cell9.innerText = "-";
+                cell10.innerText = "-";
+                cell11.innerText = "-";
             }
         }
     }
 
     let oldBody = collisionTable.getElementsByTagName("tbody")[0];
-    console.log(oldBody);
-    console.log(newBody);
     oldBody.parentNode.replaceChild(newBody, oldBody);
 }
 
@@ -2066,6 +2108,10 @@ function mousedown(event) {
         return;
     }
 
+    if (mousePosition.x < -960 || mousePosition.y < -540 || mousePosition.x > 960 || mousePosition.y > 540) {
+        return;
+    }
+
     mousePressed = true;
     // check the left side of the canvas buttons to see where mouse was
     // clicked and set mouse action accordingly

diff --git a/optics/style.css b/optics/style.css
@@ -42,6 +42,10 @@ body {
     color: #ffffff;
 }
 
+.table th, .table td {
+    padding: 10px;
+}
+
 .hidden {
     display: none;
 }