Split The code is public; the app answers only to the crew.
JavaScript off: a menu of dead buttons and not one word saying why #223
Check · Review · Land · Live done — Landed and live in production.
scout/cs:scout/220-javascript-off-a-menu-of-dead-buttons-an → main 1 commit fork
2 files
changed +18
−0
src/pages/game.test.ts +13
| @@ -187,6 +187,19 @@ test("a crosshair field can only offer the numbers the parser would keep", () => | ||
| 187 | 187 | for (const name of CROSSHAIR_COLOUR_NAMES) expect(panel).toContain(`<option value="${name}">`); |
| 188 | 188 | }); |
| 189 | 189 | |
| 190 | test("a scripting-off visitor is told the menu is dead, in the menu's own voice, with no script needed to see it", () => { | |
| 191 | const menu = element(gamePage(db, options), "menu"); | |
| 192 | expect(menu).toContain("<noscript>"); | |
| 193 | expect(menu).toContain("This game needs JavaScript and WebGL2 to run. The leaderboard below still works."); | |
| 194 | // The rule that hides the dead controls is inline CSS, inside the noscript | |
| 195 | // block itself — a browser with scripting on never parses or applies it, | |
| 196 | // so it costs nothing and there is nothing to flash before it takes hold. | |
| 197 | expect(menu).toContain("<style>#menu .row, #menu .controls { display: none; }</style>"); | |
| 198 | // Inside the noscript block, not after it — so it sits with the menu it | |
| 199 | // hides rather than the noscript comes first as an unrelated aside. | |
| 200 | expect(menu.indexOf("<style>#menu .row")).toBeLessThan(menu.indexOf("</noscript>")); | |
| 201 | }); | |
| 202 | ||
| 190 | 203 | test("the motion switch sits in the menu and in the pause overlay, offering exactly what the parser keeps", () => { |
| 191 | 204 | const html = gamePage(db, options); |
| 192 | 205 | for (const [overlay, id] of [["menu", "motion"], ["pause", "pause-motion"]] as const) { |
src/pages/game.ts +5
| @@ -305,6 +305,11 @@ export function gamePage(db: Database, options: PageOptions): string { | ||
| 305 | 305 | <canvas id="hud"></canvas> |
| 306 | 306 | <div id="fps"></div> |
| 307 | 307 | <div class="overlay" id="menu"> |
| 308 | <noscript> | |
| 309 | <style>#menu .row, #menu .controls { display: none; }</style> | |
| 310 | <h2>This needs JavaScript</h2> | |
| 311 | <p>This game needs JavaScript and WebGL2 to run. The leaderboard below still works.</p> | |
| 312 | </noscript> | |
| 308 | 313 | <h2>Defuse or detonate</h2> |
| 309 | 314 | <p>Five against five on <b>de_forge</b>. Bomb rounds, CS movement and economy, bots that push the sites.</p> |
| 310 | 315 | <div class="row"> |