[WIP] Support keyboard

src/main.js

@@ -3,6 +3,7 @@ import "sanitize.css";
 import "./style.css";
 
 const elms = {
+  body: document.querySelector("body"),
   main: {
     joystickZone: document.querySelector("#joystick-zone"),
     buttonsZone: document.querySelector("#buttons-zone"),
@@ -31,6 +32,8 @@ async function postJoystick(angle = Math.PI / 2, force = 1) {
   console.log("Responded joystick", await res.arrayBuffer(), await res.text());
 }
 
+/// settings
+
 elms.settings.host.oninput = ({ target: input }) => {
   console.log(`Modify host ${host} -> ${input.value}`);
   host = input.value;
@@ -48,15 +51,25 @@ elms.settings.buttons.oninput = ({ target: checkbox }) => {
   else elms.main.buttonsZone.classList.add("erase");
 };
 
+document.addEventListener("DOMContentLoaded", ({}) => {
+  for (const input of Object.values(elms.settings)) {
+    input.oninput?.({ target: input });
+  }
+});
+
+/// gamepad
+
+let angle, force;
+
+// joystick
+
 const joystickManager = nipplejs.create({
   zone: elms.main.joystickZone,
   color: "#55CCFF",
   size: 160,
   mode: "dynamic",
 });
 
-let angle, force;
-
 joystickManager
   .on("start,move", (event, data) => {
     angle = data.angle?.radian ?? Math.PI / 2;
@@ -71,6 +84,8 @@ joystickManager
     postJoystick(angle, force);
   });
 
+// buttons
+
 for (const button of elms.main.buttonsZone.childNodes) {
   button.onclick = async ({ target: button }) => {
     const id = button.innerText.toLowerCase();
@@ -80,8 +95,13 @@ for (const button of elms.main.buttonsZone.childNodes) {
   };
 }
 
-document.addEventListener("DOMContentLoaded", ({}) => {
-  for (const input of Object.values(elms.settings)) {
-    input.oninput?.({ target: input });
-  }
-});
+// keyboard
+
+elms.body.onkeydown = ({ target, key }) => {
+  if (target.nodeName === "input") return;
+  console.log("Pressing", key);
+};
+
+elms.body.onkeyup = ({ key }) => {
+  console.log("Finished pressing", key);
+};