Proposal: Add KeyboardScope option

[kamranayub]

Context

There are some issues using Excalibur in cross-origin iframes, see #1294 and #1510

What happens is that event listeners cannot listen on the top frame. In order to provide a fallback, we specific window as the target to listen to key events but that doesn't work either (according to our code, it never did).

There are some approaches we can try that will enable keyboard events when embedding cross-origin, which is by targeting the canvas or an element surrounding the canvas.

Proposal

Option 1: Try to use tabindex and focus

According to this SO answer it should be possible to attach listeners if the canvas has tabindex="1" and is in focus. I couldn't get this to work, though, but I didn't have time to explore it much.

Option 2: Use a wrapping element

The other way is by targeting an element that wraps the canvas. A <div> or a <span> may work (I like the inline element since it should wrap to the bounds of the canvas better).

This does work and I got it to work by adding a new option to allow passing in the element ID or element to target keyboard events on. In Storybook, this is document.getElementById('root').

However, I thought it may be better to implement the same idea we have for PointerScope and do a KeyboardScope and automatically generate the wrapping capture element

This presents some issues though, when the canvas is detached from the DOM. It can't be re-parented to be under the capture element.

Ideally, this keyboard initialization logic would run when the game boots up in the DOM for the first time and I got close but not quite in my spike of doing this.

export enum KeyboardScope {
  Document,
  Canvas
}

[github-actions]

This issue hasn't had any recent activity lately and is being marked as stale automatically.

[eonarheim]

Workaround for itch.io games and codesandbox.io

Add this snippet

engine.start().then(() => {
  window.focus();
});