Making a fullscreen repeating button

Sometimes you might have a simple game where you want to be able to hold down the spacebar or press down on the screen to perform an action. This could be done with the following code which calls a move function in response to either the spacebar or the gameArea being pressed; the gameArea variable in this code is an instance of GameArea:

  const keyboard = new hcjeLib.device.Keyboard();
  keyboard.addDownListener(" ", {
    callback: () => move(),
    noRepeat: false
  });
  gameArea.addEventListener("pointerdown", () => hcjeLib.device.Keyboard.simulateKeydown(" "));

The one serious limitation of this code is that the spacebar will repeat, but pointerdown events do not. To get around this, we can place an invisible Button over the entire game area and listen to that instead of the game area.

Remove the gameArea.addEventListener line and replace with a button:

new hcjeLib.domTools.Button({
  parentElement: gameArea,
  url: "",
  label: "",
  onClick: () => hcjeLib.device.Keyboard.simulateKeydown(" "),
  className: "cover-gamearea-button",
  interval: hcjeLib.domTools.SIM_KBD_INTERVAL 
});

Then add the following styling to your css file:

.cover-gamearea-button {
  border: none;
  height: 100%;
  margin: 0;
  max-width: 100%;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
}

Tapping or holding down your pointer on the game area, which is now covered with an invisible button, should now respond in the same way as pressing the spacebar.