Table

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:lts-alpine AS build
+WORKDIR /build
+COPY . .
+
+FROM nginx:alpine
+COPY --from=build /build /usr/share/nginx/html
+EXPOSE 80

index.css

@@ -76,6 +76,16 @@ html, body {
     margin-bottom: 20px;
 }
 
+.settings-row th, .settings-row td {
+    border: 1px solid rgb(102, 79, 39);
+    padding: .5em;
+}
+
+.settings-row.table {
+    max-width: 40dvh;
+    overflow-y: auto;
+}
+
 .submit {
     color: inherit;
     background-color: rgb(38, 39, 47);

index.html

@@ -48,6 +48,19 @@
                         <input type="text" id="input-length" value="100" class="slider-input">
                     </div>
                 </div>
+                <div class="settings-row table">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Номер падения</th>
+                                <th>Расстояние</th>
+                            </tr>
+                        </thead>
+                        <tbody id="points">
+
+                        </tbody>
+                    </table>
+                </div>
                 <div class="settings-row">
                     <button onclick="animateBall()" class="submit" id="start-button">Запуск</button>
                 </div>

index.js

@@ -161,6 +161,14 @@ function animateBall() {
     const length = (parseFloat(lengthSlider.value) / 100).toFixed(3);
     const height = (parseFloat(heightSlider.value) / 100).toFixed(3);
 
+    const urlPoints = `https://physics.zzvt.pw/api/points?h=${height}&l=${length}&g=10&alpha=${angle}`;
+    const pointsTable = document.querySelector('#points');
+    pointsTable.innerHTML = '';
+    fetch(urlPoints)
+        .then(r => r.json().then(data => {
+            data.slice(0, Math.floor(data.length/3)).forEach((value, i) => pointsTable.innerHTML += `<tr><td>${i}</td><td>${Number(value.x).toFixed(2)}</td></tr>`)
+        }));
+
     const url = `https://physics.zzvt.pw/api/interpolation?h=${height}&l=${length}&g=10&alpha=${angle}&count=1000`;
     xhr.open("GET", url, true);