discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sig Select countdown numeral: enlarge via a class so it doubles at every breakpoint — TDD

Browse Source 
The 12s countdown numeral set its size with an inline style.fontSize='2em',
but .btn-primary carries `font-size: 0.625rem !important` inside its small
landscape/short-portrait down-size media query — and an !important declaration
beats an inline style. So on phones / short viewports the numeral stayed
button-sized instead of doubling.

Fix: sig-select.js now toggles a `.sig-take-sig-btn--counting` class instead of
the inline font-size (in _showCountdown / _hideCountdown / the unready path),
and a new `.sig-stage .sig-take-sig-btn.sig-take-sig-btn--counting` rule in
_card-deck.scss re-asserts `font-size: 2em !important` at (0,3,0) specificity —
strictly beating the (0,2,0) btn-primary media-query !important at all queries.
em stays parent-relative so the doubling tracks the stage font across sizes.

2 Jasmine specs (class present + no inline override on show; class cleared on
countdown_cancel) added to SigSelectSpec; SpecRunner green; SCSS compiles.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-05 14:39:52 -04:00
parent faaa4ecfb0
commit f3f509a59a
4 changed files with 55 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/apps/epic/static/apps/epic/sig-select.js
View File

@@ -370,7 +370,7 @@ var SigSelect = (function () {
if (_countdownTimer !== null) {
clearInterval(_countdownTimer);
_countdownTimer = null;
if (_takeSigBtn) _takeSigBtn.style.fontSize = '';
if (_takeSigBtn) _takeSigBtn.classList.remove('sig-take-sig-btn--counting');
}
if (_takeSigBtn) _takeSigBtn.textContent = 'SAVE SIG';
_stopWaitNoGlow();
@@ -477,7 +477,12 @@ var SigSelect = (function () {
_stopWaitNoGlow();
if (_takeSigBtn) {
_takeSigBtn.textContent = _countdownSecondsLeft;
_takeSigBtn.style.fontSize = '2em';
// Enlarge via a class, NOT inline font-size: the .btn-primary
// down-size media query (font-size !important on small landscape/
// portrait) out-!importants an inline 2em, so the numeral stayed
// button-sized on phones. The .sig-take-sig-btn--counting rule
// re-asserts the doubling with matching !important + specificity.
_takeSigBtn.classList.add('sig-take-sig-btn--counting');
}
_startCountdownGlow();
if (_countdownTimer !== null) clearInterval(_countdownTimer);
@@ -499,7 +504,7 @@ var SigSelect = (function () {
}
_stopCountdownGlow();
if (_takeSigBtn) {
_takeSigBtn.style.fontSize = '';
_takeSigBtn.classList.remove('sig-take-sig-btn--counting');
if (_isReady) {
// Countdown cancelled by another gamer — restore WAIT NVM state
_takeSigBtn.textContent = 'WAIT NVM';

19
src/static/tests/SigSelectSpec.js
View File

@@ -888,6 +888,25 @@ describe("SigSelect", () => {
expect(takeSigBtn.textContent).toBe("8");
});
it("enlarges the numeral via the --counting class (not a fragile inline 2em)", () => {
// The .btn-primary media-query font-size !important beats an inline
// 2em on small queries; the class lets SCSS re-assert the doubling.
makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
takeSigBtn = document.getElementById("id_take_sig_btn");
expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(true);
expect(takeSigBtn.style.fontSize).toBe(""); // no inline override
});
it("clears the --counting class when the countdown is cancelled", () => {
makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
takeSigBtn = document.getElementById("id_take_sig_btn");
expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(true);
window.dispatchEvent(new CustomEvent("room:countdown_cancel", {
detail: { polarity: "levity", seconds_remaining: 5 },
}));
expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(false);
});
it("the restored numeral counts down each second", () => {
makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
takeSigBtn = document.getElementById("id_take_sig_btn");

9
src/static_src/scss/_card-deck.scss
View File

@@ -665,6 +665,15 @@
// 80% stage height × 5/8) via --sig-card-w CSS variable — libsass can't handle
// container query units inside min().
// The polarity-countdown numeral must read large at EVERY breakpoint. The
// .btn-primary down-size media query (`font-size: 0.625rem !important` on small
// landscape / short portrait) otherwise out-!importants the countdown's enlarge
// and the numeral stayed button-sized on phones / short viewports. Re-assert the
// 2em doubling with matching !important at (0,3,0) so it wins at all queries.
.sig-stage .sig-take-sig-btn.sig-take-sig-btn--counting {
font-size: 2em !important;
}
.sig-stage {
flex: 1;
min-height: 0;

19
src/static_src/tests/SigSelectSpec.js
View File

@@ -888,6 +888,25 @@ describe("SigSelect", () => {
expect(takeSigBtn.textContent).toBe("8");
});
it("enlarges the numeral via the --counting class (not a fragile inline 2em)", () => {
// The .btn-primary media-query font-size !important beats an inline
// 2em on small queries; the class lets SCSS re-assert the doubling.
makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
takeSigBtn = document.getElementById("id_take_sig_btn");
expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(true);
expect(takeSigBtn.style.fontSize).toBe(""); // no inline override
});
it("clears the --counting class when the countdown is cancelled", () => {
makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
takeSigBtn = document.getElementById("id_take_sig_btn");
expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(true);
window.dispatchEvent(new CustomEvent("room:countdown_cancel", {
detail: { polarity: "levity", seconds_remaining: 5 },
}));
expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(false);
});
it("the restored numeral counts down each second", () => {
makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
takeSigBtn = document.getElementById("id_take_sig_btn");