}
.mg-bot-1 {
  margin-bottom: 1rem;

  const _mouseAccelerationDefaultValue = 10;
  const _mouseAccelerationLocalStorageKey = "_mouseAcceleration";

  const _mouseAcceleration = buildValue({
    defaultValue: 10,
    localStorageKey: "_mouseAcceleration",
  });
  const _scrollSpeed = buildValue({
    defaultValue: 5,
    localStorageKey: "_scrollSpeed",
  });
  const _gyromouseSwitch = buildValue({
    defaultValue: false,
    localStorageKey: "_gyromouseSwitch",
  });

  const _scrollSpeedDefaultValue = 5;
  const _scrollSpeedLocalStorageKey = "_scrollSpeed";

  const _gyromouseSpeed = buildValue({
    defaultValue: 10,
    localStorageKey: "_gyromouseSpeed",
  });

  let _mouseAcceleration = initMouseAcceleration();
  let _scrollSpeed = initScrollSpeed();

  function buildValue(param) {
    function nullIfThrows(callback) {
      try {
        return callback();
      } catch {
        return null;
      }
    }
    function getJsonStoreFromLocalStorage(param) {
      const data = localStorage.getItem(param.localStorageKey);
      if (data == null) {
        return param.defaultValue;
      }
      const parsed = nullIfThrows(() => JSON.parse(data));
      if (parsed == null) {
        return param.defaultValue;
      }
      const value = parsed.store;
      if (value == null) {
        return param.defaultValue;
      }
      return value;
    }

  function initMouseAcceleration() {
    const data = localStorage.getItem(_mouseAccelerationLocalStorageKey);
    return data != null ? Number(data) : _mouseAccelerationDefaultValue;

    const value = getJsonStoreFromLocalStorage(param);
    return {
      ...param,
      value,
    };

  function initScrollSpeed() {
    const data = localStorage.getItem(_scrollSpeedLocalStorageKey);
    return data != null ? Number(data) : _scrollSpeedDefaultValue;

  function setValue(param) {
    // without this setItem would be blocking
    setTimeout(() => {
      localStorage.setItem(
        param.localStorageKey,
        JSON.stringify({ store: param.value })
      );
    });

      return _mouseAcceleration;

      return _mouseAcceleration.value;

      _mouseAcceleration = value;
      // without this setItem would be blocking
      setTimeout(() => {
        localStorage.setItem(_mouseAccelerationLocalStorageKey, String(value));
      });

      _mouseAcceleration.value = value;
      setValue(_mouseAcceleration);

      return _scrollSpeed;

      return _scrollSpeed.value;

      _scrollSpeed = value;
      // without this setItem would be blocking
      setTimeout(() => {
        localStorage.setItem(_scrollSpeedLocalStorageKey, String(value));
      });

      _scrollSpeed.value = value;
      setValue(_scrollSpeed);
    },
    get gyromouseSwitch() {
      return _gyromouseSwitch.value;
    },
    set gyromouseSwitch(value) {
      touchpad.style.display = value ? "none" : "";
      gryropad.style.display = value ? "" : "none";
      _gyromouseSwitch.value = value;
      setValue(_gyromouseSwitch);
    },
    get gyromouseSpeed() {
      return _gyromouseSpeed.value;
    },
    set gyromouseSpeed(value) {
      _gyromouseSpeed.value = value;
      setValue(_gyromouseSpeed);

  gryropadBinding(gryropad);

  gyromouseSwitchBinding(gyromouse_switch);
  gyromouseSpeedBinding(gyromouse_speed);

}
function remap(value, low_from, high_from, low_to, high_to) {
  return (
    low_to + ((high_to - low_to) * (value - low_from)) / (high_from - low_from)
  );

  node.addEventListener("touchend", ontouchend);
}
function gryropadBinding(node) {
  let ongoingtouch = false;
  let orientation = null;
  const process = (orientation, previousOrientation) => {
    if (!ongoingtouch) {
      return;
    }
    if (previousOrientation == null) {
      return;
    }
    const angleDiff = (current, previous) =>
      Math.atan2(Math.sin(current - previous), Math.cos(current - previous));
    const factor = remap(state.gyromouseSpeed, 1, 20, 5, 50);
    const difference = {
      x: -angleDiff(orientation.alpha, previousOrientation.alpha) * factor,
      y: -angleDiff(orientation.beta, previousOrientation.beta) * factor,
    };
    state.ws?.send(JSON.stringify({ difference }));
  };
  const ondeviceorientation = (e) => {
    const { alpha, beta, gamma } = event;
    process({ alpha, beta, gamma }, orientation);
    orientation = { alpha, beta, gamma };
  };
  const ontouchstart = () => {
    ongoingtouch = true;
  };
  const ontouchend = () => {
    ongoingtouch = false;
  };
  node.addEventListener("touchstart", ontouchstart);

  addEventListener("deviceorientation", ondeviceorientation);

  });
}
function gyromouseSwitchBinding(node) {
  state.gyromouseSwitch = state.gyromouseSwitch; // triggers setter logic
  node.checked = state.gyromouseSwitch;
  node.addEventListener("input", (e) => {
    state.gyromouseSwitch = e.target.checked;

function gyromouseSpeedBinding(node) {
  node.value = state.gyromouseSpeed;
  gyromouse_speed_value_display.innerText = `: ${state.gyromouseSpeed}`;
  node.addEventListener("input", (e) => {
    state.gyromouseSpeed = Number(e.target.value);
    gyromouse_speed_value_display.innerText = `: ${state.gyromouseSpeed}`;
  });
}

      <div class="pad" id="gryropad"></div>

          <fieldset class="param">
            <input id="gyromouse_switch" type="checkbox" />
            <label class="mg-bot-1" for="gyromouse_switch">use gyro</label>
            <label for="gyromouse_speed"
              >gyro speed<span id="gyromouse_speed_value_display"></span
            ></label>
            <input
              id="gyromouse_speed"
              type="range"
              min="1"
              max="20"
              step="1"
            />
          </fieldset>

## Roadmap
- add an option to move the mouse cursor with device orientation (hold button & move phone) (activate in settings)