Controller inputs no longer “stick” on window blur

`Keyboard` - Reset key states on window blur
`Mouse` - Reset mouse state on window blur and window leave
`Sutra` - Remaps default keyboard inputs, pressed is now default

mantra-game/plugins/keyboard/Keyboard.js

@@ -53,6 +53,7 @@ export default class Keyboard {
     // Bind methods and store them as class properties
     this.boundHandleKeyDown = this.handleKeyDown.bind(this);
     this.boundHandleKeyUp = this.handleKeyUp.bind(this);
+    this.boundHandleWindowBlur = this.handleWindowBlur.bind(this);  // Bind the window blur event handler
 
   }
 
@@ -70,6 +71,8 @@ export default class Keyboard {
   bindInputControls() {
     document.addEventListener('keydown', this.boundHandleKeyDown);
     document.addEventListener('keyup', this.boundHandleKeyUp);
+    window.addEventListener('blur', this.boundHandleWindowBlur);  // Listen for window blur event
+
   }
 
   update() {
@@ -116,6 +119,20 @@ export default class Keyboard {
 
   }
 
+  handleWindowBlur() {
+
+    // On window blur we must clear all key inputs, as we may have keydown events
+    // that will never recieve a keyup event ( since the window is not focused )
+
+    // Iterate over the controls object and set each key's value to false
+    Object.keys(this.controls).forEach(key => {
+      this.controls[key] = false;
+    });
+    // Reset the input pool and key states
+    this.inputPool = {};
+    this.keyStates = {};
+  }
+
   sendInputs() {
 
     const trueInputs = this.inputPool;

mantra-game/plugins/mouse/Mouse.js

@@ -1,4 +1,5 @@
 // Mouse.js - Marak Squires 2023
+// TODO: Split this file into multiple functions
 let inputsBound = false;
 export default class Mouse {
 
@@ -54,6 +55,7 @@ export default class Mouse {
     this.boundHandlePointerUp = this.handlePointerUp.bind(this);
 
     this.boundHandleWindowBlur = this.handleWindowBlur.bind(this);
+    this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
 
   }
 
@@ -157,6 +159,7 @@ export default class Mouse {
 
   // Method to handle window blur event
   handleWindowBlur() {
+
     // Reset pointer states
     this.isDragging = false;
     this.activeTouches = {};
@@ -172,6 +175,30 @@ export default class Mouse {
       MIDDLE: null
     };
 
+    // update the game with the new mouse state ( all off )
+    this.sendMouseData();
+
+  }
+
+  handleMouseLeave() {
+
+    // Reset pointer states
+    this.isDragging = false;
+    this.activeTouches = {};
+    this.firstTouchId = null;
+    this.secondTouchId = null;
+    this.endedFirstTouch = false;
+    this.endedSecondTouch = false;
+
+    // Reset mouse buttons states
+    this.mouseButtons = {
+      LEFT: null,
+      RIGHT: null,
+      MIDDLE: null
+    };
+
+    // update the game with the new mouse state ( all off )
+    this.sendMouseData();
   }
 
   handleMouseMove(event) {
@@ -188,7 +215,6 @@ export default class Mouse {
       this.mousePosition = { x: event.clientX, y: event.clientY };
     }
 
-
     if (event.target instanceof HTMLCanvasElement) {
       const canvas = event.target;
       const rect = canvas.getBoundingClientRect();
@@ -254,10 +280,6 @@ export default class Mouse {
     let game = this.game;
     let preventDefault = false
 
-
-
-
-
     this.updateMouseButtons(event, true);
 
     // middle mouse button
@@ -512,7 +534,10 @@ export default class Mouse {
       document.addEventListener('mouseup', this.boundHandleMouseUp);
     }
 
+    // window / tab has lost focused
     window.addEventListener('blur', this.boundHandleWindowBlur);
+    // mouse leaves window, window may still have focus
+    document.body.addEventListener('mouseleave', this.boundHandleMouseLeave);
 
     // TODO: could be a config option
     // TODO: this should be able to bind / unbind based on user actions, defaultMouseMovement
@@ -610,6 +635,7 @@ export default class Mouse {
     }
 
     window.removeEventListener('blur', this.boundHandleWindowBlur);
+    window.removeEventListener('mouseleave', this.boundHandleMouseLeave);
 
   }
 

mantra-game/plugins/sutra/Sutra.js

@@ -34,7 +34,6 @@ class Sutra {
       let rules = createSutra(game);
       this.setSutra(rules);
     }
-
     // Once the game is ready, register the keyboard controls as conditions
     // This allows for game.rules.if('keycode').then('action') style rules
     if (!this.inputsBound) {
@@ -98,22 +97,26 @@ class Sutra {
         // _DOWN implied as default
         // Remark: 3/3/2024 - Basic key press test seems to indicate this is continually true
         //                    It is expected to be true only once per press, TODO: add tests
-        this.game.rules.addCondition(mantraCode, (entity, gameState) =>
+
+        // Key down, only once per press
+        this.game.rules.addCondition(mantraCode + '_DOWN', (entity, gameState) =>
           entity.id === this.game.currentPlayerId && gameState.input.keyStates[mantraCode]?.down
           // gameState.input.keyStates[mantraCode]?.down
         );
 
-        // Key Up Condition
+
+        // Key held / pressed condition, default
+        this.game.rules.addCondition(mantraCode, (entity, gameState) =>
+          entity.id === this.game.currentPlayerId && gameState.input.keyStates[mantraCode]?.pressed
+          // gameState.input.keyStates[mantraCode]?.pressed
+        );
+
+        // Key Up Condition, only once per release
         this.game.rules.addCondition(mantraCode + '_UP', (entity, gameState) =>
           entity.id === this.game.currentPlayerId && gameState.input.keyStates[mantraCode]?.up
           // gameState.input.keyStates[mantraCode]?.up
         );
 
-        // Key held Condition
-        this.game.rules.addCondition(mantraCode + '_HOLD', (entity, gameState) =>
-          entity.id === this.game.currentPlayerId && gameState.input.keyStates[mantraCode]?.pressed
-          // gameState.input.keyStates[mantraCode]?.pressed
-        );
       }
     }
   }