From e3e7969c793fe6e20614e770e9ca5021246333a2 Mon Sep 17 00:00:00 2001
From: srdusr <99972264+srdusr@users.noreply.github.com>
Date: Thu, 5 Mar 2026 16:54:00 +0200
Subject: Put the header back in its corners, and give sound a control
The banner. It was a full-width bar with its own background and border, which
read as a second layer of chrome stretching past the content on both sides,
and because it reserved height at the top of the page it pushed the wordmark
out of the top-left corner and the icon rail down out of the top-right. It is
just the unit now, centred, sharing that line with both of them.
It is also thinner: a 468x60 full banner rather than a 728x90 leaderboard,
and 320x50 rather than 320x100 on a phone. Both are standard units. At 90px
the banner was deeper than the icon rail beside it, so it decided how far
down the whole page began; at 60px it is shorter than the rail and the
content offset is the rail's, not the banner's. The page below is unaffected
by whether an advert is there at all.
Below 980px the wordmark, the unit and the rail no longer fit on one line, so
the banner drops beneath them and the content clears both.
The mark. It was five shapes in a 32 pixel square: a chevron, an offset ghost
copy of that chevron, a full-width baseline, and a large filled block. That
is a drawing, not a mark, and the parts crowded each other so none of them
read. It is two shapes now, a chevron and the underscore cursor after it,
which is a shell prompt and the gesture anyone who has used a terminal
recognises.
The cursor blink faded to 0.15 opacity over an uneven 45/55 split, so it
ghosted rather than blinked. A terminal cursor is a hard square wave: fully
on, fully off, 530ms each way. Only the menu's title blinks now, because
something blinking in the corner of every screen is a distraction.
The menu title sat 16px right of the buttons underneath it. Centring the mark
and the name together as one box put the name off-centre, and the
absolutely-positioned mark overflowed the menu's padding, which moved the box
itself. It is a three column grid now, the third empty and the same width as
the first, so the wordmark is in the exact centre by construction with the
mark to its left. Measured 0px offset at six widths.
The corner wordmark is back on the menu. Leaving it off to avoid showing the
name twice made it look like it had gone missing, and it is the way back to
the menu from everywhere else, so it should be in the same place on every
screen.
Sound. The engine worked: one oscillator per keystroke, verified by counting
them. It was off by default and its only control was a line inside the
settings dialog, so the usual way to find it was to be told it existed. It is
a speaker in the top rail now, cycling off, click and mechanical, and it
defaults to mechanical. A browser will not start an audio context before a
user gesture and the first keystroke is one, so the first tone plays with the
first character: confirmed with a fresh profile under the default autoplay
policy, context running, six tones for six keystrokes.
The copies in the two settings panels are gone. One setting, one control.
3 browser tests pass, all 21 screen and viewport combinations clean, and the
margin rails still appear only above 1424px.
---
web/src/adSlot.js | 8 ++-
web/src/cornerRail.js | 14 ------
web/src/logo.js | 36 ++++++-------
web/src/screens/icons.js | 15 ++++++
web/src/screens/mainMenu.js | 16 +-----
web/src/settings.js | 6 ++-
web/src/styles.css | 120 +++++++++++++++++++++++++++++++-------------
web/src/topRail.js | 31 +++++++++++-
8 files changed, 160 insertions(+), 86 deletions(-)
(limited to 'web/src')
diff --git a/web/src/adSlot.js b/web/src/adSlot.js
index b87ae4f..75a0d31 100644
--- a/web/src/adSlot.js
+++ b/web/src/adSlot.js
@@ -29,8 +29,12 @@ import { getUser, onAuthChange } from './auth.js';
// own name.
const SIZES = {
- // Roughly a leaderboard unit, and a mobile banner below the breakpoint.
- banner: { w: 728, h: 90, mobileW: 320, mobileH: 100 },
+ // A full banner, and the mobile banner below the breakpoint. Both are
+ // standard units. The taller 728x90 leaderboard was used first and is the
+ // more common desktop size, but at 90px it was deeper than the icon rail
+ // beside it, so it set how far down the whole page started. At 60px it is
+ // shorter than the rail and costs the layout nothing.
+ banner: { w: 468, h: 60, mobileW: 320, mobileH: 50 },
// A wide skyscraper, the usual unit for a page margin.
skyscraper: { w: 160, h: 600, mobileW: 160, mobileH: 600 },
};
diff --git a/web/src/cornerRail.js b/web/src/cornerRail.js
index 3fa0268..fd7a1e7 100644
--- a/web/src/cornerRail.js
+++ b/web/src/cornerRail.js
@@ -2,12 +2,6 @@ import { STATS_ICON, SETTINGS_ICON, LEADERBOARD_ICON, STORE_ICON } from './scree
import { attachTooltips } from './tooltip.js';
import { getSettings, updateSettings } from './settings.js';
-const SOUND_THEMES = ['off', 'click', 'mech'];
-function soundThemeLabel(theme) {
- if (theme === 'click') return 'Click';
- if (theme === 'mech') return 'Mechanical';
- return 'Off';
-}
// The icon rails, in the same places on every screen - the main menu builds
// the identical clusters inline (see mainMenu.js) because it owns its own
@@ -31,7 +25,6 @@ export function renderCornerRail(root, { onShowStats, onShowPlaceholder, onShowL
-
@@ -78,13 +71,6 @@ export function renderCornerRail(root, { onShowStats, onShowPlaceholder, onShowL
updateSettings({ blindMode: next });
blindModeBtn.textContent = `Blind Mode: ${next ? 'On' : 'Off'}`;
});
- const soundThemeBtn = left.querySelector('[data-action="rail-cycle-sound-theme"]');
- soundThemeBtn.addEventListener('click', () => {
- const current = getSettings().soundTheme;
- const next = SOUND_THEMES[(SOUND_THEMES.indexOf(current) + 1) % SOUND_THEMES.length];
- updateSettings({ soundTheme: next });
- soundThemeBtn.textContent = `Sound: ${soundThemeLabel(next)}`;
- });
const leaderboardBtn = right.querySelector('[data-action="rail-leaderboard"]');
if (leaderboardBtn) leaderboardBtn.addEventListener('click', onShowLeaderboard);
diff --git a/web/src/logo.js b/web/src/logo.js
index 5a2f9d8..7cc689d 100644
--- a/web/src/logo.js
+++ b/web/src/logo.js
@@ -1,10 +1,14 @@
// The TyperPunk mark.
//
-// The mark is a prompt: a chevron, a baseline, and a block cursor resting on
-// it. It says "text being entered at a terminal" without spelling anything
-// out, and it stays legible at 16 pixels, which a more detailed drawing would
-// not. The chevron is drawn twice, the lower copy offset and in the secondary
-// colour, which is the one deliberate stylistic note.
+// The mark is a shell prompt: a chevron and the underscore cursor that sits
+// after it, waiting for input. Two shapes, nothing else. It reads at 16
+// pixels, which is the only size that really has to work, and it is the
+// gesture anyone who has used a terminal recognises without being told.
+//
+// An earlier version stacked a chevron, a full-width baseline and a large
+// filled block, plus an offset ghost copy of the chevron behind it. Five
+// shapes in a 32 pixel square is a drawing, not a mark: the parts crowded
+// each other and none of them read.
//
// Everything is drawn in currentColor and the theme's own variables, so the
// mark follows the palette rather than carrying its own.
@@ -12,13 +16,11 @@
/// The mark on its own, for a favicon, a tab, or anywhere the name is already
/// present. Sized by its container.
export const LOGO_MARK = `
-