use overlay element to capture client input

assets/css/netplay.css

@@ -15,6 +15,17 @@ body {
     right: 0;
     background-color: #000;
 }
+#game-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+}
+#game-overlay:focus {
+    outline: none;
+}
 #game {
     display: block;
     margin: 0;

assets/netplay-ui-client.js

@@ -10,10 +10,6 @@
         document.getElementById('netplay-virtual-gamepad-toggle').addEventListener('click', virtualGamepadToggle);
         document.getElementById('netplay-play').addEventListener('click', play);
 
-        window.addEventListener('keydown', controlsButtonDown);
-        window.addEventListener('keyup', controlsButtonUp);
-        setInterval(controlsPollGamepad, 1000 / 60);
-
         if (fullscreenEnabled()) {
             const fullscreenButton = document.getElementById('netplay-fullscreen');
             fullscreenButton.addEventListener('click', fullscreen);
@@ -25,6 +21,13 @@
         gameEl.addEventListener('pause', () => playScreen(true));
         gameEl.disablePictureInPicture = true;
 
+        const gameOverlayEl = document.getElementById('game-overlay');
+        gameOverlayEl.addEventListener('keydown', controlsButtonDown);
+        gameOverlayEl.addEventListener('keyup', controlsButtonUp);
+        setInterval(controlsPollGamepad, 1000 / 60);
+
+        gameOverlayEl.focus();
+
         loadControlScheme();
         virtualGamepadInit();
         virtualGamepadLoad();

templates/netplay.twig

@@ -34,6 +34,7 @@
 </div>
 
 <div id="game-container">
+    <div id="game-overlay" tabindex="0"></div>
     <video id="game" disablepictureinpicture autoplay playsinline></video>
 
     <div id="notifications" class="toast-container position-fixed p-3"></div>