Function renderDevices

wasm/examples/basic/src/main.ts:32–84

(devices: ButtplugClientDevice[])

}

function renderDevices(devices: ButtplugClientDevice[]) {
  clearChildren(deviceListEl);

  if (devices.length === 0) {
    const em = document.createElement("em");
    em.style.color = "#666";
    em.textContent = "None connected";
    deviceListEl.appendChild(em);
    return;
  }

  for (const device of devices) {
    const row = document.createElement("div");
    row.className = "device-row";

    const name = document.createElement("span");
    name.className = "device-name";
    name.textContent = device.name;

    const slider = document.createElement("input");
    slider.type = "range";
    slider.min = "0";
    slider.max = "100";
    slider.value = "50";
    slider.title = "Speed";

    const btnVibrate = document.createElement("button");
    btnVibrate.textContent = "Vibrate";
    btnVibrate.addEventListener("click", async () => {
      const speed = Number(slider.value) / 100;
      try {
        await device.vibrate(speed);
        log(`${device.name}: vibrate @ ${speed.toFixed(2)}`);
      } catch (e) {
        log(`${device.name}: vibrate error — ${e}`);
      }
    });

    const btnStop = document.createElement("button");
    btnStop.textContent = "Stop";
    btnStop.addEventListener("click", async () => {
      try {
        await device.stop();
        log(`${device.name}: stopped`);
      } catch (e) {
        log(`${device.name}: stop error — ${e}`);
      }
    });

    row.append(name, slider, btnVibrate, btnStop);
    deviceListEl.appendChild(row);
  }
}

function setConnectedState(connected: boolean) {
  btnConnect.disabled    = connected;