build: 0.6.7

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+### 0.6.7
+
+What changed in this version?
+
+* Change 1
+* Change 2
+* Change 3
+
 ### 0.6.6
 
 What changed in this version?

example/advanced/index.css

@@ -253,7 +253,7 @@ instructions {
   justify-content: space-between;
   padding: calc(40 / 16 * 1rem) calc(20 / 16 * 1rem);
   opacity: 0.5;
-  z-index: 9999;
+  z-index: 1000;
 }
 
 instructions div {

example/advanced/index.js

@@ -1,5 +1,5 @@
 import { MultiKeyHandler } from 'https://unpkg.com/multi-key-handler/index.js';
-import { GamePad } from 'https://unpkg.com/hud-gamepad/src/index.js';
+import { GamePad } from '../src/index.js';
 
 const buttons = [
   { name: "🔍", color: "rgba(255,255,0,0.5)", key: "z" },

package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/32teeth/hud-gamepad.git"
   },
   "license": "ISC",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "keywords": [
     "gaming",
     "gamepad",
@@ -44,7 +44,7 @@
     "clean:pack": "rm -f *.tgz || true",
     "setup": "npm install && cd example && npm install",
     "build": "npm pack",
-    "start": "cd example && live-server --port=8080 --host=localhost --open=/index.html --mount=/src:../src",
+    "start": "cd example && live-server --port=8080 --host=192.168.86.166 --open=/index.html --mount=/src:../src",
     "dev": "run-p dev:watch dev:serve",
     "dev:init": "npm run clean && npm run setup && npm run build",
     "dev:watch": "nodemon --watch src --exec 'npm run build'",
@@ -70,4 +70,4 @@
   "directories": {
     "test": "test"
   }
-}
+}

src/core/events.js

@@ -12,6 +12,10 @@ export class EventHandler {
     this.isBinding = false;
     this.stickPressed = false;
 
+    // Add key repeat handling
+    this.keyStates = new Map();
+    this.repeatDelay = 300;  // Initial delay before repeat starts
+    this.repeatRate = 50;    // How often to repeat (ms)
   }
 
   bind() {
@@ -22,7 +26,6 @@ export class EventHandler {
       return;
     }
 
-
     canvas.oncontextmenu = function(e) { e.preventDefault(); };
 
     let events = {
@@ -42,6 +45,15 @@ export class EventHandler {
     });
 
     resizeObserver.observe(document.body);
+
+    // Cleanup on page unload
+    window.addEventListener('unload', () => {
+      this.keyStates.forEach((timer) => {
+        clearTimeout(timer.timeout);
+        clearInterval(timer.interval);
+      });
+      this.keyStates.clear();
+    });
   }
 
   listen(e) {
@@ -64,6 +76,51 @@ export class EventHandler {
 
   dispatch(e) {
     const states = this.controller.getState();
+    const dispatchKey = (key, code, isActive) => {
+      if (isActive) {
+        if (!this.keyStates.has(key)) {
+          // Initial keydown
+          window.dispatchEvent(new KeyboardEvent("keydown", {
+            key,
+            keyCode: code,
+            which: code,
+            bubbles: true,
+            repeat: false
+          }));
+
+          // Setup repeat behavior
+          const timeout = setTimeout(() => {
+            const interval = setInterval(() => {
+              window.dispatchEvent(new KeyboardEvent("keydown", {
+                key,
+                keyCode: code,
+                which: code,
+                bubbles: true,
+                repeat: true
+              }));
+            }, this.repeatRate);
+
+            this.keyStates.set(key, { timeout, interval });
+          }, this.repeatDelay);
+
+          this.keyStates.set(key, { timeout, interval: null });
+        }
+      } else if (this.keyStates.has(key)) {
+        // Cleanup timers
+        const timers = this.keyStates.get(key);
+        clearTimeout(timers.timeout);
+        if (timers.interval) clearInterval(timers.interval);
+        this.keyStates.delete(key);
+
+        // Send keyup
+        window.dispatchEvent(new KeyboardEvent("keyup", {
+          key,
+          keyCode: code,
+          which: code,
+          bubbles: true
+        }));
+      }
+    };
 
     const arrows = {
       up: {
@@ -86,13 +143,18 @@ export class EventHandler {
         code: 39,
         active: states['x-dir'] === 1
       }
-    }
+    };
+
+    const buttons = this.controller.buttons;
+    buttons.forEach(button => {
+      const { key, name } = button.config;
+      const isActive = states[name] === 1;
+      button.config.hit.active = isActive;
+      dispatchKey(key, key.charCodeAt(0), isActive);
+    });
 
     Object.values(arrows).forEach(({ key, code, active }) => {
-      window.dispatchEvent(new KeyboardEvent(
-        !active ? "keyup" : "keydown",
-        { key, keyCode: code, which: code, bubbles: true }
-      ));
+      dispatchKey(key, code, active);
     });
   }