From d7c1c7b35e9d0995eed41d437404d5255529cf17 Mon Sep 17 00:00:00 2001 From: srdusr <99972264+srdusr@users.noreply.github.com> Date: Wed, 25 Feb 2026 09:23:00 +0200 Subject: Give TyperPunk a mark, and fix the settings and custom text dialogs Branding. The name was set in the body typeface and that was the whole of it. There is a mark now: a chevron, a baseline, and a block cursor resting on it, which reads as text being entered at a prompt and stays legible at 16 pixels. The chevron is drawn twice, the lower copy offset and in the secondary colour, which is the one stylistic note. The wordmark is split so the accent falls on the second half. Everything is drawn in the theme's own variables, so the mark follows the palette rather than carrying its own, and the favicon is the same drawing. The menu carried the name twice, as its own title and as the fixed corner mark. The corner mark exists for screens with no title of their own, so the menu keeps only the title, now the full lockup at size. The settings panel. Measured at 1280x900 it opened at y=506 with a height of 437, so it ran 140px past the bottom of a 900px window, and .app is overflow:hidden so there was nothing to scroll. It had no background either, so the fixed footer links rendered through the middle of it and, sitting higher in the stacking order, took the clicks: Playwright could not press the panel's own Close button because the footer intercepted every attempt. Both it and the custom text panel are dialogs now. Centred, opaque, above the fixed chrome, scrolling internally, with the page dimmed behind them. Their controls are buttons, but .quiet removes a button's border, so a panel of them read as a list of plain text labels with nothing to suggest any of it could be clicked. They keep an outline inside these panels. The checkbox was the browser's default control in a panel where nothing else was, and its border was too dark to see against the panel. Escape did not close either of them. The handler looked for .rail-settings-panel, which is a different panel on a different screen. A Dev section with a button that jumps straight to the results screen with invented figures was shipping to every visitor. It is limited to localhost. The top rail. The account control has moved into the icon row, right of Friends, and is the account's own picture once signed in: there is no avatar upload, so it is the initial over a colour hashed from the whole username, which gives every account a stable and distinct mark. Sign In and Sign Up sit on their own row beneath. The friends count is a badge under its icon rather than the words "2 online" beside it. That took the rail from 307px wide to 189px, which is what had been overlapping the wordmark by 75px at 390px. But it also made the rail taller, which put the close button back underneath it, so the rail now publishes its measured height and the content column starts below whatever that is. The rail is one row signed in and two signed out, so this is not a constant the stylesheet could hold. The wordmark was inline-flex, which blockified its two halves, so the name read as two lines to innerText: a screen reader, a copy-paste, or a test. The advertising slot has moved from inside the results screen to a banner across the top of the page, where a navigation bar usually goes. The header moves down to make room rather than being covered by it. It stays off the typing screen, the passive reader and the race lobby. Custom text: the panel had no title, and its hint was centred at 340px inside a 480px panel, which broke one sentence into three ragged lines. 3 browser tests pass. The store test now asserts the avatar replaces the sign-in links rather than expecting a button that has moved. --- web/index.html | 2 +- web/src/app.js | 3 +- web/src/logo.js | 46 +++++ web/src/screens/accountScreen.js | 3 +- web/src/screens/contributeScreen.js | 3 +- web/src/screens/endScreen.js | 3 +- web/src/screens/friendsScreen.js | 3 +- web/src/screens/leaderboardScreen.js | 3 +- web/src/screens/lyricsScreen.js | 3 +- web/src/screens/mainMenu.js | 22 ++- web/src/screens/multiplayerScreen.js | 5 +- web/src/screens/passiveMode.js | 3 +- web/src/screens/placeholderScreen.js | 3 +- web/src/screens/publicProfileScreen.js | 3 +- web/src/screens/statsScreen.js | 3 +- web/src/screens/storeScreen.js | 3 +- web/src/screens/typingGame.js | 3 +- web/src/styles.css | 317 +++++++++++++++++++++++++++++---- web/src/topRail.js | 89 +++++++-- web/tests/test_account_and_store.py | 5 +- 20 files changed, 452 insertions(+), 73 deletions(-) create mode 100644 web/src/logo.js diff --git a/web/index.html b/web/index.html index 2533d25..3d390cb 100644 --- a/web/index.html +++ b/web/index.html @@ -4,7 +4,7 @@ TyperPunk - + diff --git a/web/src/app.js b/web/src/app.js index 923d122..4ef6c2e 100644 --- a/web/src/app.js +++ b/web/src/app.js @@ -153,7 +153,8 @@ export function startApp(root, localTexts) { // Let an open popover close itself first - one Escape should not both // dismiss a menu and navigate away from the screen behind it. const openPopover = document.querySelector( - '.mode-popover:not([hidden]), .rail-settings-panel:not([hidden]), .lang-popover:not([hidden]), .theme-gallery-popover:not([hidden])'); + '.mode-popover:not([hidden]), .rail-settings-panel:not([hidden]), .settings-panel:not([hidden]), ' + + '.custom-panel:not([hidden]), .lang-popover:not([hidden]), .theme-gallery-popover:not([hidden])'); if (openPopover) { openPopover.hidden = true; return; diff --git a/web/src/logo.js b/web/src/logo.js new file mode 100644 index 0000000..5a2f9d8 --- /dev/null +++ b/web/src/logo.js @@ -0,0 +1,46 @@ +// 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. +// +// Everything is drawn in currentColor and the theme's own variables, so the +// mark follows the palette rather than carrying its own. + +/// 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 = ` +`; + +/// Mark and wordmark together. The wordmark is split so the two halves of the +/// name carry different weight: "Typer" is what it does, "Punk" is what it +/// looks like, and the accent colour goes on the second. +export function logoLockup({ tag = 'div', className = 'logo', action = 'menu' } = {}) { + return `<${tag} class="${className}"${action ? ` data-action="${action}"` : ''}> + ${LOGO_MARK} + TyperPunk + `; +} + +/// The same mark as a standalone SVG document, for the favicon. Colours are +/// literal here because a favicon is rendered outside the page and cannot +/// read its variables. +export function faviconDataUri({ accent = '#00ff9d', ghost = '#00e5ff', background = '#000000' } = {}) { + const svg = `` + + `` + + `` + + `` + + `` + + `` + + ``; + return `data:image/svg+xml,${encodeURIComponent(svg)}`; +} diff --git a/web/src/screens/accountScreen.js b/web/src/screens/accountScreen.js index 5f3bdfe..b65e2d6 100644 --- a/web/src/screens/accountScreen.js +++ b/web/src/screens/accountScreen.js @@ -1,4 +1,5 @@ import { CLOSE_ICON } from './icons.js'; +import { logoLockup } from '../logo.js'; import { escapeHtml } from '../util.js'; import { renderCornerRail } from '../cornerRail.js'; import { attachTooltips } from '../tooltip.js'; @@ -61,7 +62,7 @@ export function renderAccountScreen(root, { onBack, onShowAccount, onShowStats, root.innerHTML = `
- + ${logoLockup()}

Account

${formMarkup(user)}
diff --git a/web/src/screens/contributeScreen.js b/web/src/screens/contributeScreen.js index 4c47852..b84ee40 100644 --- a/web/src/screens/contributeScreen.js +++ b/web/src/screens/contributeScreen.js @@ -1,4 +1,5 @@ import { escapeHtml } from '../util.js'; +import { logoLockup } from '../logo.js'; import { renderCornerRail } from '../cornerRail.js'; import { attachTooltips } from '../tooltip.js'; import { renderTopRail } from '../topRail.js'; @@ -72,7 +73,7 @@ export function renderContributeScreen(root, { onBack, onShowStats, onShowPlaceh root.innerHTML = `
- + ${logoLockup()}

Contribute a passage

${!user ? `
Sign in to submit a passage. Everything submitted is reviewed before anyone types it.
diff --git a/web/src/screens/endScreen.js b/web/src/screens/endScreen.js index fa3b188..d9dc6fc 100644 --- a/web/src/screens/endScreen.js +++ b/web/src/screens/endScreen.js @@ -1,4 +1,5 @@ import { buildGraphPoints, buildErrorPoints, drawChart, hitTestError, hitTestLine, calculateConsistency } from '../chart.js'; +import { logoLockup } from '../logo.js'; import { escapeHtml } from '../util.js'; import { attachTooltips } from '../tooltip.js'; import { onThemeChange } from '../theme.js'; @@ -59,7 +60,7 @@ export function renderEndScreen(root, { stats, text, attribution, category, expl root.innerHTML = `
- + ${logoLockup()}
— ${escapeHtml(attribution || 'Unknown')}${category ? `${escapeHtml(category)}` : ''}
${explanation ? `
What this does${escapeHtml(explanation)}
` : ''} diff --git a/web/src/screens/friendsScreen.js b/web/src/screens/friendsScreen.js index e121f4c..c19809e 100644 --- a/web/src/screens/friendsScreen.js +++ b/web/src/screens/friendsScreen.js @@ -1,4 +1,5 @@ import { CLOSE_ICON } from './icons.js'; +import { logoLockup } from '../logo.js'; import { escapeHtml } from '../util.js'; import { renderCornerRail } from '../cornerRail.js'; import { attachTooltips } from '../tooltip.js'; @@ -80,7 +81,7 @@ export function renderFriendsScreen(root, { onBack, onShowFriends, onShowStats, root.innerHTML = `
- + ${logoLockup()}

Friends

${user ? signedInMarkup() : signedOutMarkup()}
diff --git a/web/src/screens/leaderboardScreen.js b/web/src/screens/leaderboardScreen.js index 8aeda98..4eb0564 100644 --- a/web/src/screens/leaderboardScreen.js +++ b/web/src/screens/leaderboardScreen.js @@ -1,4 +1,5 @@ import { escapeHtml } from '../util.js'; +import { logoLockup } from '../logo.js'; import { renderCornerRail } from '../cornerRail.js'; import { attachTooltips } from '../tooltip.js'; import { renderTopRail } from '../topRail.js'; @@ -49,7 +50,7 @@ export function renderLeaderboardScreen(root, { onBack, onShowPublicProfile, onS root.innerHTML = `
- + ${logoLockup()}

Leaderboard

${MODES.map(m => ``).join('')} diff --git a/web/src/screens/lyricsScreen.js b/web/src/screens/lyricsScreen.js index 95af6b2..b669891 100644 --- a/web/src/screens/lyricsScreen.js +++ b/web/src/screens/lyricsScreen.js @@ -1,4 +1,5 @@ import { CLOSE_ICON } from './icons.js'; +import { logoLockup } from '../logo.js'; import { renderCornerRail } from '../cornerRail.js'; import { attachTooltips } from '../tooltip.js'; import { renderTopRail } from '../topRail.js'; @@ -32,7 +33,7 @@ export function renderLyricsScreen(root, { onBack, onLyricsReady, onShowStats, o root.innerHTML = `
- + ${logoLockup()}

Lyrics

${escapeHtml(bodyText())}
${status === 'signed-out' ? `` : ''} diff --git a/web/src/screens/mainMenu.js b/web/src/screens/mainMenu.js index f812509..743f4b4 100644 --- a/web/src/screens/mainMenu.js +++ b/web/src/screens/mainMenu.js @@ -1,4 +1,5 @@ import { STATS_ICON, SETTINGS_ICON, CHEVRON_DOWN_ICON, LEADERBOARD_ICON, STORE_ICON } from './icons.js'; +import { logoLockup } from '../logo.js'; import { parseCustomContent } from '../customText.js'; import { escapeHtml } from '../util.js'; import { getSettings, updateSettings } from '../settings.js'; @@ -8,6 +9,13 @@ import { wordListTiers } from '../wordGenerator.js'; import { renderTopRail } from '../topRail.js'; import { renderSiteFooter } from '../siteFooter.js'; +/// Whether this is a development machine. The Dev controls below are shown +/// only here: on a deployed site they are a way to fake a result. +function isLocalDev() { + const h = window.location.hostname; + return h === 'localhost' || h === '127.0.0.1' || h === '[::1]' || h.endsWith('.local'); +} + function label(m) { if (m === 'random') return 'Random'; if (m === 'words') return 'Words'; @@ -111,7 +119,7 @@ export function renderMainMenu(root, props) { root.innerHTML = `
-

TyperPunk

+ ${logoLockup({ tag: 'h1', className: 'logo logo-hero', action: null })}
@@ -166,14 +174,16 @@ export function renderMainMenu(root, props) {
+ ${isLocalDev() ? `
Dev
- + ` : ''}