diff options
Diffstat (limited to 'web/src/screens')
| -rw-r--r-- | web/src/screens/icons.js | 15 | ||||
| -rw-r--r-- | web/src/screens/mainMenu.js | 16 |
2 files changed, 17 insertions, 14 deletions
diff --git a/web/src/screens/icons.js b/web/src/screens/icons.js index 462c6b0..c42d57c 100644 --- a/web/src/screens/icons.js +++ b/web/src/screens/icons.js @@ -149,3 +149,18 @@ Object.assign(FLAIR_ICONS, { moth: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4L4 8L6 16L12 13Z"/><path d="M12 4L20 8L18 16L12 13Z"/><rect x="11" y="4" width="2" height="16"/></svg>`, reactor: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L21 20H3Z"/><rect x="10" y="12" width="4" height="5" fill="var(--background-color)"/></svg>`, }); + +// A speaker, and the same speaker with the waves struck through. Two icons +// rather than one that changes colour: whether sound is on has to be readable +// at a glance without comparing it to anything. +export const SOUND_ON_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <polygon points="4,9 8,9 13,5 13,19 8,15 4,15" fill="currentColor" stroke="none"/> + <path d="M16.5 8.5a5 5 0 0 1 0 7"/> + <path d="M19 6a8.5 8.5 0 0 1 0 12"/> +</svg>`; + +export const SOUND_OFF_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <polygon points="4,9 8,9 13,5 13,19 8,15 4,15" fill="currentColor" stroke="none"/> + <line x1="16" y1="9" x2="21" y2="15"/> + <line x1="21" y1="9" x2="16" y2="15"/> +</svg>`; diff --git a/web/src/screens/mainMenu.js b/web/src/screens/mainMenu.js index 743f4b4..759bf6d 100644 --- a/web/src/screens/mainMenu.js +++ b/web/src/screens/mainMenu.js @@ -62,12 +62,6 @@ function looksLikeText(str) { const WORD_COUNTS = [10, 25, 50, 100]; const TIME_DURATIONS = [15, 30, 60, 120]; -const SOUND_THEMES = ['off', 'click', 'mech']; -function soundThemeLabel(theme) { - if (theme === 'click') return 'Click'; - if (theme === 'mech') return 'Mechanical'; - return 'Off'; -} function wordListTierLabel(tier) { if (tier === 'extended') return 'Extended'; @@ -170,7 +164,6 @@ export function renderMainMenu(root, props) { <button class="menu-button small quiet" data-action="toggle-live-stats" data-tooltip="Show WPM/ACC while you type, or only reveal them on the end screen.">Live Stats: ${settings.hideLiveStats ? 'Off' : 'On'}</button> <button class="menu-button small quiet" data-action="toggle-caret-blink" data-tooltip="Make the current-character caret blink, or keep it solid.">Blink Caret: ${settings.caretBlink ? 'On' : 'Off'}</button> <button class="menu-button small quiet" data-action="toggle-blind-mode" data-tooltip="Hide correct/incorrect coloring while typing - only revealed on the end screen.">Blind Mode: ${settings.blindMode ? 'On' : 'Off'}</button> - <button class="menu-button small quiet" data-action="cycle-sound-theme" data-tooltip="Play a sound on each keystroke. Click to cycle.">Sound: ${escapeHtml(soundThemeLabel(settings.soundTheme))}</button> </div> </div> </div> @@ -212,6 +205,8 @@ export function renderMainMenu(root, props) { <div class="custom-error"></div> </div> + ${logoLockup({ className: 'logo logo-corner', action: null })} + <div class="menu-key-hint">Enter to start · Esc for the menu</div> <div class="corner-rail-left"> @@ -462,13 +457,6 @@ export function renderMainMenu(root, props) { updateSettings({ blindMode: next }); blindModeBtn.textContent = `Blind Mode: ${next ? 'On' : 'Off'}`; }); - const soundThemeBtn = root.querySelector('[data-action="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)}`; - }); root.querySelector('[data-action="simulate-test"]')?.addEventListener('click', onSimulateTest); |