going in the very right direction!

frontend/index.html

@@ -12,6 +12,13 @@
 </head>
 <body>
   <h1>Hello, world!</h1>
+
+  <h3 id="first-ts"></h3>
+  <svg width="450" height="900" id="first" style="background-color: lightgray">
+  </svg>
+
+  <br>
+
   <svg  width="900" height="450" >
       <rect x="0" y="0" width="900" height="450" class="court-border"></rect>
       <line x1="450" y1="0" x2="450" y2="450" class="court-border"></line>
@@ -57,6 +64,7 @@
 
   </svg>
 
+
   <div>
     <button id="play">play</button> <br>
     <button id="pause">pause</button>

frontend/main.js

@@ -1,4 +1,5 @@
 import anime from "https://esm.sh/animejs@3.2.2";
+import m from "https://esm.sh/mithril@2.2.2"
 
 const second = 1000;
 
@@ -13,7 +14,6 @@ function gaussianRandom(mean=0, stdev=1) {
     return z * stdev + mean;
 }
 
-
 function* brownian(n){
     let x = 0;
     for(let i = 0; i < n; i ++){
@@ -64,3 +64,38 @@ document.querySelector('#seek').onclick = function(){
     timeline.pause();
     timeline.seek(seekVal);
 }
+
+
+function generatePoints(points, frames){
+    const lst = [];
+    for(const point of points.points){
+        if(frames.indexOf(point.frameIndex) !== -1){
+            lst.push(m("circle", {cx: point.x, cy: point.y, r: 3}));
+        }
+    }
+    return m("g", lst);
+}
+
+function getTimeStamp(points, frameId){
+    for(const point of points.points){
+        if(point.frameIndex === frameId){
+            return `${point.frameTimestamp / 1000} seconds`;
+        }
+    }
+}
+
+const url = "/dodgeball-tracker/outputs/output.json";
+const resp = await fetch(url);
+const points = await resp.json();
+
+function range(min, max){
+    const ret = [];
+    while(min < max){
+        ret.push(min);
+        min ++;
+    }
+    return ret
+}
+
+m.render(document.getElementById("first"), generatePoints(points, range(-10, 400)));
+m.render(document.getElementById("first-ts"), m("span", getTimeStamp(points, 80)));