Add display of ping

Author: TwoSquirrels

src/index.html

@@ -145,6 +145,11 @@ <h4>Response</h4>
       </div>
     </main>
 
+    <div class="info-box">
+      <div class="status">OK</div>
+      <div class="ping"></div>
+    </div>
+
     <script type="module" src="/main.js"></script>
   </body>
 </html>

src/main.js

@@ -17,6 +17,10 @@ const elms = {
     joystickZone: document.querySelector("#joystick-zone"),
     buttonsZone: document.querySelector("#buttons-zone"),
   },
+  info: {
+    statuses: [...document.querySelectorAll(".status")],
+    pings: [...document.querySelectorAll(".ping")],
+  },
 };
 
 /// hamburgers
@@ -28,12 +32,33 @@ for (const burger of elms.hamburgers) {
   };
 }
 
+/// info
+
+function updateInfo(status, ping = Infinity) {
+  for (const statusElm of elms.info.statuses) statusElm.innerText = status;
+  for (const pingElm of elms.info.pings) pingElm.innerText = `ping: ${ping} ms`;
+}
+
+updateInfo("200 OK", Date.now() - window.performance.timing.navigationStart);
+
 /// poster
 
 let host = params.get("host") ?? window.location.origin;
 let interval = Number(params.get("interval")) || 100;
 let showButtons = true;
 
+async function callApi(method = "GET", path = "/", options = {}) {
+  const prevTime = window.performance.now();
+  try {
+    const res = await fetch(host + path, { method, ...options });
+    updateInfo(`${res.status} ${res.statusText}`, window.performance.now() - prevTime);
+    return res;
+  } catch (error) {
+    updateInfo(error.message.split(/\s+/)[0], window.performance.now() - prevTime);
+    throw error;
+  }
+}
+
 const joystickPoster = {
   _angle: Math.PI / 2,
   _force: 1,
@@ -54,14 +79,9 @@ const joystickPoster = {
 
   async post() {
     console.log("POST joystick", { angle: this.angle, force: this.force, query: this.query });
-    try {
-      const res = await fetch(`${host}/joystick?q=${this.query}`, { method: "POST" });
-      console.log("Responded joystick", await res.arrayBuffer(), await res.text());
-      return res;
-    } catch (error) {
-      console.error(error);
-      return null;
-    }
+    const res = await callApi("POST", "/joystick?q=" + this.query);
+    console.log("Responded joystick", await res.text());
+    return res;
   },
 
   intervalId: null,
@@ -131,8 +151,8 @@ for (const button of elms.main.buttonsZone.childNodes) {
   button.onclick = async ({ target: button }) => {
     const id = button.innerText.toLowerCase();
     console.log("POST button", id);
-    const res = await fetch(`${host}/${id}`, { method: "POST" });
-    console.log("Responded button", await res.arrayBuffer(), await res.text());
+    const res = await callApi("POST", "/" + id);
+    console.log("Responded button", await res.text());
   };
 }
 

src/style.css

@@ -20,6 +20,8 @@
 
 .hamburger {
   position: absolute;
+  top: 0;
+  left: 0;
   padding: 0;
   height: 4rem;
   width: 4rem;
@@ -32,6 +34,7 @@
 
 article {
   position: relative;
+  top: 0;
   left: 0;
   padding: 2em;
   height: 100dvh;
@@ -131,3 +134,17 @@ main {
   background-color: #3f3;
   box-shadow: 0 0 0.5rem 0.25rem #3f35;
 }
+
+/* info box */
+
+.info-box {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: .5em;
+  width: 50%;
+  z-index: -1;
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}