Control Google Slides with Nintendo Switch Joy-Con via WebHID

joycon-google-slides.js

let device;

if (!("hid" in navigator)) {
  console.log("WebHID is not available yet.");
}

const init = async event => {
  const filters = [
    {
      vendorId: 0x057e, // Nintendo Co., Ltd
      productId: 0x2006 // Joy-Con L
    },
    {
      vendorId: 0x057e, // Nintendo Co., Ltd
      productId: 0x2007 // Joy-Con R
    }
  ];

  [device] = await navigator.hid.requestDevice({ filters });
  if (!device) return;
  await device.open()
  device.addEventListener("inputreport", event => {
    const { data, device, reportId } = event;

    // Handle only the Joy-Con Right device and a specific report ID.
    if (device.productId != 0x2007 && reportId != 0x3f) return;

    const value = data.getUint8(0);
    if (value == 0) return;

    const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };
    if (value === 1) {
      // Use click event at the moment, ideally this should be arrow key event
      const fullScreenIframe = document.querySelector('iframe[allowfullscreen]');
      if (fullScreenIframe) {
        fullScreenIframe.contentWindow.document.querySelector('.punch-viewer-container').click()
      } else if (value === 8) {
      // document.dispatchEvent(new KeyboardEvent("keydown", {keyCode: 37}));      
      }
    }
    
    console.log(`User pressed button ${someButtons[value]}.`);
  });
};

init()