Add kbm / retropad switch

web/css/ui.css

@@ -228,6 +228,11 @@
     color: #7e7e7e;
 }
 
+#mirror-stream {
+    image-rendering: pixelated;
+    width: 100%;
+    height: 100%;
+}
 
 #screen {
     display: flex;

web/index.html

@@ -34,6 +34,7 @@
     <div id="screen">
         <div id="stats-overlay"></div>
         <video id="stream" class="game-screen" hidden muted preload="none"></video>
+        <canvas id="mirror-stream" class="game-screen" hidden></canvas>
         <div id="menu-screen">
             <div id="menu-container"></div>
             <div id="menu-item-choice" class="hidden"></div>

web/js/app.js

@@ -60,10 +60,14 @@ import {stats} from './stats.js?v=3';
 import {stream} from './stream.js?v=3';
 import {workerManager} from "./workerManager.js?v=3";
 
-// application state
+// application display state
 let state;
 let lastState;
 
+const state_ = {
+    showPing: false
+}
+
 // first user interaction
 let interacted = false;
 
@@ -474,11 +478,11 @@ if (kbmEl) {
 
 // Browser lock API
 document.onpointerlockchange = () => {
-    pub(POINTER_LOCK_CHANGE, document.pointerLockElement);
+    pub(POINTER_LOCK_CHANGE, document.pointerLockElement)
 }
 
 document.onfullscreenchange = () => {
-    pub(FULLSCREEN_CHANGE, document.fullscreenElement);
+    pub(FULLSCREEN_CHANGE, document.fullscreenElement)
 }
 
 // subscriptions
@@ -535,8 +539,8 @@ sub(RECORDING_STATUS_CHANGED, handleRecordingStatus);
 sub(SETTINGS_CHANGED, () => {
     const s = settings.get();
     log.level = s[opts.LOG_LEVEL];
-    if (state.showPing !== s[opts.SHOW_PING]) {
-        state.showPing = s[opts.SHOW_PING];
+    if (state_.showPing !== s[opts.SHOW_PING]) {
+        state_.showPing = s[opts.SHOW_PING];
         stats.toggle();
     }
 });
@@ -591,5 +595,5 @@ stats.modules = [
         },
     }]
 
-state.showPing = settings.loadOr(opts.SHOW_PING, true);
-state.showPing && stats.toggle();
+state_.showPing = settings.loadOr(opts.SHOW_PING, true);
+state_.showPing && stats.toggle();

web/js/input/keyboard.js

@@ -3,15 +3,12 @@ import {
     sub,
     AXIS_CHANGED,
     DPAD_TOGGLE,
-    FULLSCREEN_CHANGE,
-    KB_MOUSE_FLAG,
     KEY_PRESSED,
     KEY_RELEASED,
     KEYBOARD_KEY_PRESSED,
     KEYBOARD_KEY_DOWN,
     KEYBOARD_KEY_UP,
     KEYBOARD_TOGGLE_FILTER_MODE,
-    KBM_SKIP
 } from 'event';
 import {KEY} from 'input';
 import {log} from 'log'
@@ -57,7 +54,8 @@ let isFullscreen = false;
 let isKeysFilteredMode = true;
 // if the browser supports Keyboard Lock API (Firefox does not)
 let hasKeyboardLock = ('keyboard' in navigator) && ('lock' in navigator.keyboard);
-let kbmSkip = false;
+
+let locked = false
 
 const remap = (map = {}) => {
     settings.set(opts.INPUT_KEYBOARD_MAP, map);
@@ -98,6 +96,24 @@ function onDpadToggle(checked) {
     }
 }
 
+const lock = async (lock) => {
+    if (lock) {
+        if (!hasKeyboardLock) {
+            log.warn("Browser doesn't support keyboard lock! It will be emulated.");
+        }
+        if (hasKeyboardLock) {
+            await navigator.keyboard.lock()
+
+        }
+        log.debug(`Keyboard lock: ${isFullscreen}`);
+    } else {
+        if (hasKeyboardLock) {
+            navigator.keyboard.unlock();
+        }
+    }
+    locked = lock
+}
+
 const onKey = (code, evt, state) => {
     const key = keyMap[code]
 
@@ -117,27 +133,6 @@ const onKey = (code, evt, state) => {
 
 sub(DPAD_TOGGLE, (data) => onDpadToggle(data.checked));
 
-sub(KB_MOUSE_FLAG, () => {
-    if (!hasKeyboardLock) {
-        log.warn("Browser doesn't support keyboard lock! It will be emulated.");
-    }
-
-    sub(FULLSCREEN_CHANGE, async (fullscreenEl) => {
-        isFullscreen = !!fullscreenEl;
-
-        if (kbmSkip) return;
-
-        if (hasKeyboardLock) {
-            isFullscreen ? await navigator.keyboard.lock() : navigator.keyboard.unlock();
-        }
-        log.debug(`Keyboard lock: ${isFullscreen}`);
-    })
-})
-
-sub(KBM_SKIP, (v) => {
-    kbmSkip = v
-})
-
 /**
  * Keyboard controls.
  */
@@ -148,15 +143,15 @@ export const keyboard = {
 
         body.addEventListener('keyup', e => {
             e.stopPropagation();
-            !hasKeyboardLock && isFullscreen && e.preventDefault();
+            !hasKeyboardLock && locked && e.preventDefault();
 
-            let lock = isFullscreen ;
+            let lock = locked
             // hack with Esc up when outside of lock
             if (e.code === 'Escape') {
                 lock = true
             }
 
-            lock = lock && !kbmSkip
+            // lock = lock && !kbmSkip
 
             isKeysFilteredMode ?
                 (lock ? pub(KEYBOARD_KEY_UP, e) : onKey(e.code, KEY_RELEASED, false))
@@ -165,18 +160,17 @@ export const keyboard = {
 
         body.addEventListener('keydown', e => {
             e.stopPropagation();
-            !hasKeyboardLock && isFullscreen && e.preventDefault();
-
-            const lock = isFullscreen && !kbmSkip
+            !hasKeyboardLock && locked && e.preventDefault();
 
             isKeysFilteredMode ?
-                (lock ? pub(KEYBOARD_KEY_DOWN, e) : onKey(e.code, KEY_PRESSED, true)) :
+                (locked ? pub(KEYBOARD_KEY_DOWN, e) : onKey(e.code, KEY_PRESSED, true)) :
                 pub(KEYBOARD_KEY_PRESSED, {key: e.code});
         });
 
         log.info('[input] keyboard has been initialized');
     },
     settings: {
         remap
-    }
+    },
+    lock,
 }

web/js/input/pointer.js

@@ -29,25 +29,27 @@ const track = (el, cb, single) => {
     }
 }
 
-const dpiScaler = {
-    _ex: 0,
-    _ey: 0,
-    _rez: {dx: 0, dy: 0},
-    scale(sdx, sdy) {
-        this._rez.dx = sdx + this._ex
-        this._rez.dy = sdy + this._ey
-
-        this._ex = this._rez.dx % 1
-        this._ey = this._rez.dy % 1
-
-        this._rez.dx -= this._ex
-        this._rez.dy -= this._ey
-
-        return this._rez
+const dpiScaler = () => {
+    let ex = 0
+    let ey = 0
+    let scaled = {dx: 0, dy: 0}
+    return {
+        scale(x, y, src, dst) {
+            scaled.dx = x / (src.w / dst.videoWidth) + ex
+            scaled.dy = y / (src.h / dst.videoHeight) + ey
+
+            ex = scaled.dx % 1
+            ey = scaled.dy % 1
+
+            scaled.dx -= ex
+            scaled.dy -= ey
+
+            return scaled
+        }
     }
 }
 
 export const pointer = {
     track,
-    scaler: () => ({...dpiScaler})
+    scaler: dpiScaler
 }