srdusr
aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/screens')
-rw-r--r--web/src/screens/accountScreen.js3
-rw-r--r--web/src/screens/contributeScreen.js3
-rw-r--r--web/src/screens/endScreen.js3
-rw-r--r--web/src/screens/friendsScreen.js3
-rw-r--r--web/src/screens/leaderboardScreen.js3
-rw-r--r--web/src/screens/lyricsScreen.js3
-rw-r--r--web/src/screens/mainMenu.js22
-rw-r--r--web/src/screens/multiplayerScreen.js5
-rw-r--r--web/src/screens/passiveMode.js3
-rw-r--r--web/src/screens/placeholderScreen.js3
-rw-r--r--web/src/screens/publicProfileScreen.js3
-rw-r--r--web/src/screens/statsScreen.js3
-rw-r--r--web/src/screens/storeScreen.js3
-rw-r--r--web/src/screens/typingGame.js3
14 files changed, 42 insertions, 21 deletions
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 = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>Account</h2>
<div class="account-panel">${formMarkup(user)}</div>
</div>
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 = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>Contribute a passage</h2>
${!user ? `
<div class="stats-empty">Sign in to submit a passage. Everything submitted is reviewed before anyone types it.</div>
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 = `
<div class="end-screen">
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<div class="end-screen-text"><div class="text-display"></div></div>
<div class="attribution end-screen-attribution">&mdash; ${escapeHtml(attribution || 'Unknown')}${category ? `<span class="attribution-pack">${escapeHtml(category)}</span>` : ''}</div>
${explanation ? `<div class="code-explainer"><span class="code-explainer-label">What this does</span>${escapeHtml(explanation)}</div>` : ''}
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 = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>Friends</h2>
${user ? signedInMarkup() : signedOutMarkup()}
</div>
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 = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>Leaderboard</h2>
<div class="leaderboard-modes">
${MODES.map(m => `<button class="menu-button small quiet${m.key === selectedMode ? ' active' : ''}" data-mode="${m.key}">${escapeHtml(m.label)}</button>`).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 = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>Lyrics</h2>
<div class="stats-placeholder">${escapeHtml(bodyText())}</div>
${status === 'signed-out' ? `<button class="menu-button" data-action="go-account">Sign In</button>` : ''}
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 = `
<div class="main-menu">
- <h1>TyperPunk</h1>
+ ${logoLockup({ tag: 'h1', className: 'logo logo-hero', action: null })}
<div class="menu-options">
<div class="start-group sp-group">
<button class="menu-button start-main" data-action="pick-mode">Single Player</button>
@@ -166,14 +174,16 @@ export function renderMainMenu(root, props) {
</div>
</div>
</div>
+ ${isLocalDev() ? `
<div class="settings-hint">Dev</div>
- <button class="menu-button small" data-action="simulate-test" data-tooltip="Jump straight to the end screen with fake results, no typing required.">Simulate Test &rarr; End Screen</button>
+ <button class="menu-button small" data-action="simulate-test" data-tooltip="Jump straight to the end screen with fake results, no typing required.">Simulate Test &rarr; End Screen</button>` : ''}
<button class="menu-button small quiet" data-action="close-settings">Close</button>
</div>
<div class="custom-panel" hidden>
- <div class="custom-hint">Paste text, notes, code, subtitles (.srt/.vtt), or lyrics (.lrc) - typed in order, not randomized. Drag a file in, or:</div>
- <textarea class="custom-textarea" placeholder="Paste text, notes, code, or lyrics here... (or drop a file anywhere in this box)"></textarea>
+ <div class="panel-title">Custom text</div>
+ <div class="custom-hint">Typed in the order you give it, not shuffled. Notes, code, subtitles (.srt, .vtt) and lyrics (.lrc) all work. Long documents are split into segments and keep your place between visits.</div>
+ <textarea class="custom-textarea" placeholder="Paste here, or drop a file anywhere in this box"></textarea>
<div class="custom-stats" hidden></div>
<div class="custom-panel-row">
<label class="menu-button small file-label">
@@ -202,8 +212,6 @@ export function renderMainMenu(root, props) {
<div class="custom-error"></div>
</div>
- <div class="logo">TyperPunk</div>
-
<div class="menu-key-hint">Enter to start &middot; Esc for the menu</div>
<div class="corner-rail-left">
@@ -462,7 +470,7 @@ export function renderMainMenu(root, props) {
soundThemeBtn.textContent = `Sound: ${soundThemeLabel(next)}`;
});
- root.querySelector('[data-action="simulate-test"]').addEventListener('click', onSimulateTest);
+ root.querySelector('[data-action="simulate-test"]')?.addEventListener('click', onSimulateTest);
const passiveBtn = root.querySelector('[data-action="start-passive"]');
if (passiveBtn) passiveBtn.addEventListener('click', onStartPassive);
diff --git a/web/src/screens/multiplayerScreen.js b/web/src/screens/multiplayerScreen.js
index a69080d..878f659 100644
--- a/web/src/screens/multiplayerScreen.js
+++ b/web/src/screens/multiplayerScreen.js
@@ -1,4 +1,5 @@
import { escapeHtml } from '../util.js';
+import { logoLockup } from '../logo.js';
import { CLOSE_ICON, RACER_SPRITES, RACER_SPRITE_IDS } from './icons.js';
import { renderCornerRail } from '../cornerRail.js';
import { attachTooltips } from '../tooltip.js';
@@ -84,7 +85,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o
root.innerHTML = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>Multiplayer</h2>
<div class="account-panel">
<input class="account-input" type="text" id="mp-name" placeholder="Your name" value="${escapeHtml(getUser()?.username || '')}">
@@ -172,7 +173,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o
root.innerHTML = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>${auto ? 'Finding a race' : `Room ${escapeHtml(roomCode)}`}</h2>
<div class="settings-hint">${auto
? 'Racing whoever else is looking right now.'
diff --git a/web/src/screens/passiveMode.js b/web/src/screens/passiveMode.js
index e690d3c..d18334c 100644
--- a/web/src/screens/passiveMode.js
+++ b/web/src/screens/passiveMode.js
@@ -1,4 +1,5 @@
import { getTheme, toggleTheme, onThemeChange } from '../theme.js';
+import { logoLockup } from '../logo.js';
import { themeIcon } from './icons.js';
import { escapeHtml } from '../util.js';
@@ -44,7 +45,7 @@ export function renderPassiveMode(root, { name, chunks, onExit }) {
root.innerHTML = `
<div class="passive-mode">
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<div class="passive-source">${escapeHtml(name)} ยท passive mode</div>
<div class="passive-lines">
<div class="passive-line prev"></div>
diff --git a/web/src/screens/placeholderScreen.js b/web/src/screens/placeholderScreen.js
index e03dabf..d632adb 100644
--- a/web/src/screens/placeholderScreen.js
+++ b/web/src/screens/placeholderScreen.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';
@@ -13,7 +14,7 @@ export function renderPlaceholderScreen(root, { title, description, onBack, onSh
root.innerHTML = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>${escapeHtml(title)}</h2>
<div class="stats-placeholder prose">${escapeHtml(description)}</div>
</div>
diff --git a/web/src/screens/publicProfileScreen.js b/web/src/screens/publicProfileScreen.js
index 1479df6..da8b3fd 100644
--- a/web/src/screens/publicProfileScreen.js
+++ b/web/src/screens/publicProfileScreen.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';
@@ -53,7 +54,7 @@ export function renderPublicProfileScreen(root, { username, onBack, onShowStats,
root.innerHTML = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2 class="public-profile-heading">${escapeHtml(username)}</h2>
<div class="public-profile-body"></div>
</div>
diff --git a/web/src/screens/statsScreen.js b/web/src/screens/statsScreen.js
index 9b00181..b15bf51 100644
--- a/web/src/screens/statsScreen.js
+++ b/web/src/screens/statsScreen.js
@@ -1,4 +1,5 @@
import { CLOSE_ICON } from './icons.js';
+import { logoLockup } from '../logo.js';
import { getProfileStats } from '../profileStats.js';
import { getAllPersonalBests } from '../pb.js';
import { getWeakCharDetails } from '../keyStats.js';
@@ -42,7 +43,7 @@ export function renderStatsScreen(root, { onBack, onShowPlaceholder, onShowAccou
root.innerHTML = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>Stats</h2>
${profile.testsCompleted > 0 ? `
diff --git a/web/src/screens/storeScreen.js b/web/src/screens/storeScreen.js
index 7c9a047..5299582 100644
--- a/web/src/screens/storeScreen.js
+++ b/web/src/screens/storeScreen.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';
@@ -168,7 +169,7 @@ export function renderStoreScreen(root, { onBack, onShowStats, onShowPlaceholder
root.innerHTML = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
<h2>Store</h2>
${bodyMarkup()}
</div>
diff --git a/web/src/screens/typingGame.js b/web/src/screens/typingGame.js
index 6e2ac66..b58e11f 100644
--- a/web/src/screens/typingGame.js
+++ b/web/src/screens/typingGame.js
@@ -1,4 +1,5 @@
import { calculateStats, emptyStats } from '../stats.js';
+import { logoLockup } from '../logo.js';
import { escapeHtml } from '../util.js';
import { highlightClasses } from '../customText.js';
import { getSettings } from '../settings.js';
@@ -15,7 +16,7 @@ export function renderTypingGame(root, { game, text, attribution, category, expl
const { hideLiveStats, caretBlink, blindMode } = getSettings();
root.innerHTML = `
<div class="typing-game${hideLiveStats ? ' hide-live-stats' : ''}${caretBlink ? '' : ' no-caret-blink'}">
- <div class="logo" data-action="menu">TyperPunk</div>
+ ${logoLockup()}
${progress ? `<div class="segment-progress">${escapeHtml(progress)}</div>` : ''}
<div class="text-container">
<div class="text-display${language ? ' code' : ''}"></div>
generated by cgit v1.2.3 (git 2.39.1) at 2026-10-12 07:13:58 +0000