${esc(claim.head)}${claim.sub ? `${esc(claim.sub)}` : ''}
${facts.join('')}
${acts} @@ -2943,16 +2935,18 @@ function showPane(name) { // no rounded top, no border and no grip there. index.html hangs those off the // body rather than the pane, because the sheet is what has to lose them. document.body.classList.toggle('carding', name === 'card'); + document.body.classList.toggle('rooming', name === 'room'); document.body.classList.remove('waying'); for (const id of PANES) $(id).hidden = id !== name; $('find').hidden = name !== 'pick'; $('origin').hidden = !originBarOn(name); $('ask').hidden = true; $('sheet').hidden = false; - // One corner, two controls, never both. The card is a photograph and gets the - // menu; everything else is a panel or a map and keeps the arrow. + // The card and desktop room screen keep the menu over the map. The room's + // back arrow lives in its panel on desktop; CSS keeps this global arrow on + // mobile, where the room still fills the sheet. $('back').hidden = name === 'card'; - $('menu').hidden = name !== 'card'; + $('menu').hidden = name !== 'card' && name !== 'room'; closeMenu(); document.body.classList.remove('asking'); const arrived = state.screen !== name; @@ -2978,7 +2972,7 @@ function showAsk() { $('way').hidden = true; $('ask').hidden = false; document.body.classList.add('asking'); - document.body.classList.remove('carding', 'waying'); + document.body.classList.remove('carding', 'rooming', 'waying'); $('sheet').hidden = true; $('back').hidden = true; $('menu').hidden = true; @@ -3084,6 +3078,8 @@ function showAbout() { // heading and re-snaps the sheet to rest, and a sheet that jumps back to rest // under a reader is worse than a stale number. function wireRoom(id) { + $('room-back').setAttribute('aria-label', roomBackLabel()); + $('room-back').onclick = () => history.back(); attachBearing(id); // A week either way, and no clamp. Past the term's own bounds the grid comes // back empty and the sentence over it says the schedule does not reach there. @@ -3164,16 +3160,7 @@ function showRoom(id, { keepDay = false } = {}) { // Back pops to the entry underneath this one, and openRoom wrote down which // screen that is. Outside scheduled hours the room screen opens over the // buildings screen, and the label promised a room list that is not there. - $('back').setAttribute( - 'aria-label', - history.state?.from === 'near' - ? 'Back to the nearest buildings' - : history.state?.from === 'browse' - ? 'Back to browse buildings' - : history.state?.from === 'way' - ? 'Back to the way' - : 'Back to the room list', - ); + $('back').setAttribute('aria-label', roomBackLabel()); // frame() below runs only when the room is one of the ranked rows. Opened // from a link or out of hours it is not, and the footprint still has to light. @@ -3192,6 +3179,16 @@ function showRoom(id, { keepDay = false } = {}) { } } +function roomBackLabel() { + return history.state?.from === 'near' + ? 'Back to the nearest buildings' + : history.state?.from === 'browse' + ? 'Back to browse buildings' + : history.state?.from === 'way' + ? 'Back to the way' + : 'Back to the room list'; +} + // Where the room is: the map with the footprint lit, an arrow to it, one plate // naming it, and the ranking peeked underneath with that room's row lit. // @@ -3233,7 +3230,7 @@ function showWay(id, view = null) { $('menu').hidden = false; $('way').hidden = false; closeMenu(); - document.body.classList.remove('asking', 'carding'); + document.body.classList.remove('asking', 'carding', 'rooming'); // The menu is this screen's only chrome, and it is the same button it was on // the card a tap ago, so it is drawn the same: no disc, 40px in a 60px target. document.body.classList.add('waying'); @@ -3414,13 +3411,18 @@ function openWantedRoom() { if (!state.ready || state.screen !== 'ask' || !state.rankable) return false; const wanted = new URLSearchParams(location.search).get('room'); if (!wanted || !state.classRooms?.rooms?.[wanted]) return false; + // A shared room link arrives with no Vacant history underneath it. Keep the + // current entry as the question, then stack the honest landing screen and + // the room above it. Back can now unwind room -> card/buildings -> question + // without the app's own controls sending someone back to the referring site. + history.replaceState({ v: 'ask' }, '', cleanUrl()); if (state.scheduled) { showCard(); answer(); - history.replaceState({ v: 'card' }, '', cleanUrl()); + history.pushState({ v: 'card' }, '', cleanUrl()); } else { showNear(); - history.replaceState({ v: 'near' }, '', cleanUrl()); + history.pushState({ v: 'near' }, '', cleanUrl()); } openRoom(wanted); return true; diff --git a/scripts/test/screens.test.mjs b/scripts/test/screens.test.mjs index f080df0..dcd88b0 100644 --- a/scripts/test/screens.test.mjs +++ b/scripts/test/screens.test.mjs @@ -817,6 +817,15 @@ test('the room screen prints no duration when it does not know the walk', () => assert.equal(claim.yours, null); }); +test('the room detail facts omit equipment without losing decision details', () => { + const room = bodyOf('roomHtml'); + assert.match(room, /WALK_ICON.*min walk/); + assert.match(room, /room\.cap \? `\$\{room\.cap\} seats<\/span>`/); + assert.match(room, /type \? `\$\{esc\(type\)\}<\/span>`/); + assert.match(room, /room\.ga === false[\s\S]*class="sr"[\s\S]*not a general-assignment room/); + assert.doesNotMatch(room, /roomFeatureLabels/); +}); + test('a walk that outlasts the window says so instead of printing zero', () => { const claim = roomClaim({ ...TIMELINE, now: 925, metres: 4000 }); assert.ok(claim.yours <= 0, `a 4 km walk cannot leave ${claim.yours} minutes`); @@ -851,6 +860,20 @@ test('the room deep link is gated on scheduled hours, not only on rankable', () assert.match(head, /showNear\(\)/); }); +test('a room deep link keeps every app Back press inside Vacant', () => { + // A direct visit has an external page beneath its first history entry. The + // app needs its own question entry under both possible landing screens, or + // the second visible Back button sends the reader to that external page. + const open = bodyOf('openWantedRoom'); + const ask = open.indexOf("history.replaceState({ v: 'ask' }"); + const card = open.indexOf("history.pushState({ v: 'card' }"); + const near = open.indexOf("history.pushState({ v: 'near' }"); + const room = open.indexOf('openRoom(wanted)'); + assert.ok(ask >= 0, 'the direct link has no question entry underneath it'); + assert.ok(card > ask && near > ask, 'a landing screen is not stacked over the question'); + assert.ok(room > card && room > near, 'the room is not stacked over its landing screen'); +}); + test('dev clock restoration retries a room link refused by the live date', () => { // Dev mode restores its saved clock after boot. When the live date is a // holiday, boot has to leave the link pending and devApply must retry it @@ -1283,9 +1306,32 @@ test('the back button on the room screen names the pane back lands on', () => { // so separate matches all hold with the arms swapped, which is the reported // defect back again. Three arms now: the way opens rooms too, and it is not // the room list. - const show = bodyOf('showRoom'); - assert.match(show, /from === 'near'\s*\?\s*'Back to the nearest buildings'/); - assert.match(show, /from === 'way'\s*\?\s*'Back to the way'\s*:\s*'Back to the room list'/); + const label = bodyOf('roomBackLabel'); + assert.match(label, /from === 'near'\s*\?\s*'Back to the nearest buildings'/); + assert.match(label, /from === 'way'\s*\?\s*'Back to the way'\s*:\s*'Back to the room list'/); + assert.match(bodyOf('roomHtml'), /id="room-back"/); + assert.match(bodyOf('wireRoom'), /\$\('room-back'\)\.onclick = \(\) => history\.back\(\)/); +}); + +test('the desktop room header keeps its identity and aligned Back control while the schedule scrolls', () => { + const css = readFileSync(join(ROOT, 'index.html'), 'utf8'); + assert.match( + css, + /#room \.room-head \{\s*position: sticky; top: 0; z-index: 2;\s*display: flex; align-items: center; gap: \.75rem;\s*padding: 1rem 1\.1rem;\s*background: var\(--card\);/, + ); + assert.match( + css, + /#room \.room-back \{\s*display: flex; position: static; flex: none;\s*width: 44px; padding: 0; justify-content: center;/, + ); + assert.match(css, /#room \.claim \{ padding-top: \.75rem; \}/); +}); + +test('room actions become a balanced two-column grid before one button wraps alone', () => { + const css = readFileSync(join(ROOT, 'index.html'), 'utf8'); + assert.match( + css, + /@container list \(max-width: 26rem\) \{\s*#room \.acts > \.bar-btn \{\s*flex: 1 1 calc\(50% - \.25rem\); min-width: 0; justify-content: center;/, + ); }); // ---- the duration, and where the list says it @@ -1512,7 +1558,7 @@ test('neither screen without a back arrow is a dead end', () => { // the arrow left. const pane = bodyOf('showPane'); assert.match(pane, /\$\('back'\)\.hidden = name === 'card'/); - assert.match(pane, /\$\('menu'\)\.hidden = name !== 'card'/); + assert.match(pane, /\$\('menu'\)\.hidden = name !== 'card' && name !== 'room'/); const way = bodyOf('showWay'); assert.match(way, /\$\('back'\)\.hidden = true/); assert.match(way, /\$\('menu'\)\.hidden = false/); @@ -1526,6 +1572,13 @@ test('neither screen without a back arrow is a dead end', () => { // A disclosure, not a menu: role="menu" promises arrow keys move between the // items, and the app does not implement that. const css = readFileSync(join(ROOT, 'index.html'), 'utf8'); + // The desktop hamburger has a 60px target and Back has a 44px target. Back + // needs half that 16px difference on both axes for the two glyph centres to + // occupy the same corner when one screen replaces the other. + assert.match(css, /#back \{\s*left:\s*calc\(1\.5rem \+ 8px\);\s*top:\s*calc\(var\(--safe-t\) \+ 1\.1rem \+ 8px\);\s*\}/); + assert.match(css, /#back, #menu, body\.carding #menu, body\.waying #menu, body\.rooming #menu \{ left: 1\.5rem; \}/); + assert.doesNotMatch(css, /body\.carding #menu \{[^}]*calc\(50% - 36rem/, + 'the hamburger jumps from the viewport corner to the centred card edge'); assert.match(css, /