Improvement idea for auto-detect buttons in browser ported games

[Br4ssman]

I've been trying to update that function so that if I set up new buttons, all those buttons don't appear in the other games.
Maybe as a simple sketch it could be useful for you to be able to detect this in a different way so that each game loads its buttons.

function updateTouchControlsVisibility() {
  if (hasTouchscreen && Object.keys(gamepads).length === 0) {
    for (const elem of document.querySelectorAll('#dpad, #apad')) {
      elem.style.display = '';
    }

    const urlParams = new URLSearchParams(window.location.search);
    const gameParam = urlParams.get('game');

    if (gameParam !== 'powerchars') {
      const oneButton = document.querySelector('[data-key="One"]');
      if (oneButton) {
        oneButton.style.display = 'none';
      }
    }

  } else {
    for (const elem of document.querySelectorAll('#dpad, #apad')) {
      // Ocultar los controles táctiles
      elem.style.display = 'none';
    }
  }
}

Try in from a touch device or from the browser emulator, try the following links to see different buttons for each game:

Link1: https://netherwareentertainment.com/online/?game=powerchars
Link2: https://netherwareentertainment.com/online/?game=ian-precuela

Download index.html edited: index.zip

[Br4ssman]

To take advantage of this same idea without separating it I have named and minimally stylised the buttons. As we know that they will be the ones on the keyboard because it is a portability, normally they will be Z/X, the typical action/cancel buttons.

I guess that if there is a way that in each game the virtual pad loads the buttons that this one uses, also it can help the fact that it has its nomenclature at the time of the tutorials ‘press Z for action’ and not to see a button without text.

#apad > * { width: var(--controls-size); height: var(--controls-size); background-color: var(--color-gray); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 3rem; font-weight: 800; color: black; }

Sorry to copy the HTML image, I can't get through the code markdown to display it, not to interpret it.