Update index.html

index.html

@@ -80,7 +80,7 @@
       width: 100%; padding: 6px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc; }
     #editPanel button, #connectionPanel button { margin-top: 10px; }
 
-    /* Bottom Bar for Real-Time Data and Constraint Edit */
+    /* Bottom Bar for Constraint Edit */
     #bottomBar {
       position: fixed;
       bottom: 0;
@@ -90,13 +90,10 @@
       padding: 10px 20px;
       z-index: 1000;
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-end;
       align-items: center;
       box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
-      disply:none;
     }
-    #dataDisplay { flex: 1; font-size: 14px; }
-    #dataDisplay h3 { margin: 0 0 5px; font-size: 16px; }
     #constraintEditPanel { flex: 0 0 300px; display: none; }
     #constraintEditPanel h3 { margin: 0 0 10px; font-size: 16px; }
     #constraintEditPanel label { display: block; margin: 10px 0 5px; font-size: 14px; }
@@ -152,12 +149,8 @@
     </div>
   </div>
 
-  <!-- Bottom Bar for Data and Constraints -->
+  <!-- Bottom Bar for Constraints -->
   <div id="bottomBar">
-    <div id="dataDisplay">
-      <h3>Real-Time Data</h3>
-      <p id="dataContent">Select an element to view data.</p>
-    </div>
     <div id="constraintEditPanel">
       <h3>Edit Constraint</h3>
       <label for="consA_X">Endpoint A X:</label>
@@ -219,8 +212,7 @@
           rightSidebar = document.getElementById('rightSidebar'),
           editPanel = document.getElementById('editPanel'),
           connectionPanel = document.getElementById('connectionPanel'),
-          constraintEditPanel = document.getElementById('constraintEditPanel'),
-          dataContent = document.getElementById('dataContent');
+          constraintEditPanel = document.getElementById('constraintEditPanel');
 
     function getRandomColor() { return '#' + Math.floor(Math.random() * 16777215).toString(16); }
 
@@ -408,7 +400,6 @@
       hideEditPanel();
       hideConnectionPanel();
       hideConstraintEditPanel();
-      dataContent.textContent = "Select an element to view data.";
     });
 
     function openEditPanel(body) {
@@ -560,23 +551,6 @@
       }
     });
 
-    Events.on(engine, 'afterUpdate', () => {
-      if (selectedBody && !selectedBody.isStatic) {
-        const v = selectedBody.velocity;
-        const ke = 0.5 * selectedBody.mass * (v.x * v.x + v.y * v.y);
-        const pe = selectedBody.elementType === "springMass" ?
-          0.5 * selectedBody.constraints[0].stiffness * Math.pow(Vector.magnitude(Vector.sub(selectedBody.position, selectedBody.fixedPoint)) - selectedBody.customOptions.length, 2) :
-          selectedBody.mass * engine.gravity.y * (window.innerHeight - selectedBody.position.y);
-        dataContent.innerHTML = `
-          Position: (${selectedBody.position.x.toFixed(1)}, ${selectedBody.position.y.toFixed(1)}) m<br>
-          Velocity: (${v.x.toFixed(1)}, ${v.y.toFixed(1)}) m/s<br>
-          Kinetic Energy: ${ke.toFixed(2)} J<br>
-          Potential Energy: ${pe.toFixed(2)} J<br>
-          Total Energy: ${(ke + pe).toFixed(2)} J
-        `;
-      }
-    });
-
     window.addEventListener('resize', () => {
       render.canvas.width = window.innerWidth;
       render.canvas.height = window.innerHeight;