diff options
| -rw-r--r-- | web/src/screens/multiplayerScreen.js | 5 | ||||
| -rw-r--r-- | web/src/styles.css | 31 |
2 files changed, 26 insertions, 10 deletions
diff --git a/web/src/screens/multiplayerScreen.js b/web/src/screens/multiplayerScreen.js index 073d3cc..7292bcc 100644 --- a/web/src/screens/multiplayerScreen.js +++ b/web/src/screens/multiplayerScreen.js @@ -1,4 +1,5 @@ import { escapeHtml } from '../util.js'; +import { CLOSE_ICON } from './icons.js'; import { renderCornerRail } from '../cornerRail.js'; import { attachTooltips } from '../tooltip.js'; import { renderTopRail } from '../topRail.js'; @@ -70,6 +71,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o let deviceFilter = 'everyone'; 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> <h2>Multiplayer</h2> <div class="account-panel"> @@ -80,7 +82,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o <div class="mp-divider"><span>or race friends</span></div> <div class="mp-code-row"> - <input class="account-input" type="text" id="mp-room-code" placeholder="Enter a room code" maxlength="5" autocomplete="off" spellcheck="false"> + <input class="account-input" type="text" id="mp-room-code" placeholder="CODE" maxlength="5" autocomplete="off" spellcheck="false"> <button class="menu-button" data-action="join">Join</button> </div> <button class="menu-button ghost" data-action="create" data-tooltip="Opens an empty room and gives you a code to share.">Create a Room</button> @@ -157,6 +159,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o function renderLobby(roomCode, auto = false) { 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> <h2>${auto ? 'Finding a race' : `Room ${escapeHtml(roomCode)}`}</h2> <div class="settings-hint">${auto diff --git a/web/src/styles.css b/web/src/styles.css index 3e4aea4..9d47c68 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -2133,25 +2133,38 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar { min-width: 0; } -/* Sized to the five characters a room code actually is, rather than eating - whatever width was going. The Join button matches the field's height and - the weight of the other actions on the screen - as a `small ghost` it - read as an afterthought next to the field it belongs to. */ +/* A room code is five characters, so the field is sized for five characters. + Stretched across the row it was a 94px-tall box with a clipped placeholder, + twice the height of the name field directly above it and the largest + control on the screen for the smallest input on it. + + align-items: center rather than stretch: stretch is what inflated it, and + nothing in this row wants to match its neighbour's height by growing. */ +.mp-code-row { + justify-content: center; + align-items: center; +} + .mp-code-row .account-input { - flex: 1 1 auto; - min-width: 0; + flex: 0 0 auto; + width: 9ch; + height: 2.75rem; + padding: 0 0.5rem; text-align: center; text-transform: uppercase; - letter-spacing: 3px; + letter-spacing: 2px; font-size: 1.1rem; } .mp-code-row .menu-button { flex: 0 0 auto; min-width: 0; + height: 2.75rem; + padding: 0 1.5rem; + font-size: 0.95rem; white-space: nowrap; - padding-left: 1.75rem; - padding-right: 1.75rem; + display: inline-flex; + align-items: center; } /* A labelled rule, so the two ways into a race read as alternatives rather |