WIP

src/main.js

@@ -17,6 +17,19 @@ const elms = {
 let host = "http://localhost";
 let interval = 200;
 let showButtons = true;
+let intervalId = null;
+
+async function postJoystick(angle = Math.PI / 2, force = 1) {
+  const query = [
+    Math.round((angle * 128) / Math.PI + (force >= 0 ? 256 : 384)) % 256,
+    Math.min(Math.abs(Math.floor(force * 255)), 255),
+  ]
+    .map((num) => num.toString(16).toUpperCase().padStart(2, "0"))
+    .join("");
+  console.log("POST joystick", { angle, force, query });
+  const res = await fetch(`${host}/joystick?q=${query}`, { method: "POST" });
+  console.log("Responded joystick", await res.arrayBuffer(), await res.text());
+}
 
 elms.settings.host.oninput = ({ target: input }) => {
   console.log(`Modify host ${host} -> ${input.value}`);
@@ -42,6 +55,31 @@ const joystickManager = nipplejs.create({
   mode: "dynamic",
 });
 
+let angle, force;
+
+joystickManager
+  .on("start,end,move", (_event, nipple) => {
+    angle = nipple.angle.radian;
+    force = nipple.force;
+  })
+  .on("start", (_event, nipple) => {
+    clearInterval(intervalId);
+    intervalId = setInterval(() => postJoystick(angle, force), interval);
+  })
+  .on("end", (_event, nipple) => {
+    clearInterval(intervalId);
+    postJoystick(angle, force);
+  });
+
+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());
+  };
+}
+
 document.addEventListener("DOMContentLoaded", ({}) => {
   for (const input of Object.values(elms.settings)) {
     input.oninput?.({ target: input });