justin/pokesql
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add DEL and OK to gamepad keyboard nav — D-pad flows from letters down to DEL/OK, A activates either

Browse Source
This commit is contained in:
Justin Oros
2026-05-14 15:19:34 -07:00
parent 1a0d41213d
commit 867d35fb57
1 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
game.js
+22 -8
View File
@@ -644,13 +644,18 @@ class Game {
/* ── NAME SCREEN — D-pad navigates keyboard grid, A selects, B deletes, Start confirms ── */ /* ── NAME SCREEN — D-pad navigates keyboard grid, A selects, B deletes, Start confirms ── */
if (s === 'name') { if (s === 'name') {
const COLS = 10; const letterKeys = Array.from(document.querySelectorAll('.key-btn'));
if (this._gpKeyCursor === undefined) this._gpKeyCursor = 0; const delBtn = document.getElementById('btn-backspace');
const keys = Array.from(document.querySelectorAll('.key-btn')); const okBtn = document.getElementById('btn-confirm-name');
const keys = [...letterKeys, delBtn, okBtn].filter(Boolean);
const total = keys.length; const total = keys.length;
const COLS = 10;
/* Highlight current key */ /* Highlight current key — works for letter keys, DEL and OK */
keys.forEach((k, i) => k.style.outline = i === this._gpKeyCursor ? '2px solid #f8c030' : ''); keys.forEach((k, i) => {
k.style.outline = i === this._gpKeyCursor ? '3px solid #f8c030' : '';
k.style.outlineOffset = i === this._gpKeyCursor ? '-2px' : '';
});
/* D-pad navigation with repeat delay */ /* D-pad navigation with repeat delay */
const now = Date.now(); const now = Date.now();
@@ -663,13 +668,22 @@ class Game {
if (dir === 'down') c = Math.min(c + COLS, total - 1); if (dir === 'down') c = Math.min(c + COLS, total - 1);
if (dir === 'up') c = Math.max(c - COLS, 0); if (dir === 'up') c = Math.max(c - COLS, 0);
this._gpKeyCursor = c; this._gpKeyCursor = c;
keys.forEach((k, i) => k.style.outline = i === c ? '2px solid #f8c030' : ''); keys.forEach((k, i) => {
k.style.outline = i === c ? '3px solid #f8c030' : '';
k.style.outlineOffset = i === c ? '-2px' : '';
});
} }
if (justPressed(0) || justPressed(1)) { /* A or B — select highlighted letter */ if (justPressed(0) || justPressed(1)) { /* A or B — activate highlighted key */
const key = keys[this._gpKeyCursor]; const key = keys[this._gpKeyCursor];
if (key) { if (!key) return;
const isLetterKey = key.classList.contains('key-btn');
if (isLetterKey) {
key.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, isPrimary: true })); key.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, isPrimary: true }));
} else if (key.id === 'btn-backspace') {
this.delChar();
} else if (key.id === 'btn-confirm-name') {
this.confirmName();
} }
} }
if (justPressed(2)) { /* X — delete */ if (justPressed(2)) { /* X — delete */