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

Fix CONFIRM button not responding to click or Enter by replacing disabled attribute with CSS class

Browse Source
This commit is contained in:
justin committed 2026-05-20 10:17:06 -07:00
1 parent eb95cf0ff0
commit 9966dc65e4
2 files changed
+7 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

game.js
+4 -5
View File
@@ -501,7 +501,7 @@ class Game {
BATTLE CURSOR — navigate 2×2 grid with D-pad / WASD
══════════════════════════════════════════════════════════ */
_moveCursor(dir) {
const btns = document.querySelectorAll('.choice-btn:not(.disabled):not(.correct):not(.wrong)');
const btns = document.querySelectorAll('.choice-btn:not(.disabled):not(.correct):not(.wrong):not(.confirm-inactive)');
if (!btns.length) return;
const total = btns.length;
let c = this.state.cursor;
@@ -524,7 +524,7 @@ class Game {
_confirmCursor() {
if (this.state.answering) return;
const btns = document.querySelectorAll('.choice-btn:not(.disabled):not(.correct):not(.wrong)');
const btns = document.querySelectorAll('.choice-btn:not(.disabled):not(.correct):not(.wrong):not(.confirm-inactive)');
const target = btns[this.state.cursor];
if (target) target.click();
}
@@ -1131,7 +1131,7 @@ class Game {
btn.classList.add('selected');
selectedSlots.add(slotIdx);
}
confirmBtn.disabled = selectedSlots.size !== 2;
confirmBtn.classList.toggle('confirm-inactive', selectedSlots.size !== 2);
});
} else {
btn.addEventListener('click',()=>this.pick(slotIdx, correctShuffledIdx, q, container));
@@ -1141,9 +1141,8 @@ class Game {
if (isMulti) {
const confirmBtn = document.createElement('button');
confirmBtn.className='choice-btn confirm-btn';
confirmBtn.className='choice-btn confirm-btn confirm-inactive';
confirmBtn.textContent='✔ CONFIRM';
confirmBtn.disabled = true;
confirmBtn.addEventListener('click', () => {
if (this.state.answering || selectedSlots.size !== 2) return;
this.pickMulti(selectedSlots, correctShuffledSet, q, container);
style.css
+3 -2
View File
@@ -588,7 +588,8 @@ html, body {
.choice-btn:active { transform:translate(2px,2px); box-shadow:none; }
/* D-pad / keyboard cursor highlight */
.choice-btn.cursor { animation:choiceCursor .7s ease-in-out infinite; border-color:var(--yellow) !important; background:#fffae0 !important; }
.choice-btn.cursor:not(.confirm-btn) { animation:choiceCursor .7s ease-in-out infinite; border-color:var(--yellow) !important; background:#fffae0 !important; }
.choice-btn.confirm-btn.cursor { border-color:var(--yellow) !important; box-shadow:0 0 0 3px var(--yellow); }
.choice-btn.correct { background:#c8ffc8; border-color:var(--green); animation:correctPulse .5s ease 3; pointer-events:none; }
.choice-btn.wrong { background:#ffc8c8; border-color:var(--red); animation:wrongShake .35s ease; pointer-events:none; }
.choice-btn.disabled{ opacity:.5; pointer-events:none; }
@@ -596,7 +597,7 @@ html, body {
.choice-btn.selected::after { content:' ✔'; color:var(--blue); font-size:1.6em; vertical-align:middle; }
.choice-btn.confirm-btn { background:var(--blue); color:#fff; border-color:#003080; text-align:center; grid-column: 1 / -1; }
.choice-btn.confirm-btn:hover:not(:disabled) { background:#0050d0; }
.choice-btn.confirm-btn:disabled { opacity:.4; pointer-events:none; }
.choice-btn.confirm-inactive { opacity:.4; pointer-events:none; }
.choice-btn.confirm-btn::before { content:''; }
.battle-footer { background:var(--dark-bg); border-top:3px solid var(--black); padding:clamp(4px,1.2vw,6px) 12px max(4px,var(--safe-bottom)); display:flex; justify-content:space-between; align-items:center; font-size:clamp(5.5px,1.5vw,7px); color:var(--yellow); flex-shrink:0; }