Skip to content

Match HTML first paint to the plastic lobby HUD #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devteapot merged 4 commits into from
Aug 26, 2026
+44 −25
Merged

Match HTML first paint to the plastic lobby HUD #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3023442
Match HTML first paint to the plastic lobby HUD.
cursoragent Aug 26, 2026
79bde7f
Commit the HTML first-paint screenshots so GitHub can show them.
cursoragent Aug 26, 2026
5e7b78b
Mute disabled lobby buttons and recapture a full lobby row.
cursoragent Aug 26, 2026
2c81fec
Round the HTML chrome and add the hex-tile gloss.
cursoragent Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 20 additions & 7 deletions crates/game-client/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<meta name="theme-color" content="#05070a" />
<meta name="theme-color" content="#1a0a2e" />
<title>OnlyFronts</title>
<link
data-trunk
Expand All @@ -28,29 +28,42 @@
html,
body {
overflow: hidden;
background: #05070a;
/* Bevy lobby.rs: SCRIM, with ACTIVE highlight so first paint matches the HUD */
background: radial-gradient(circle at 15% 0%, #381f6b, #1a0a2e 44%);
--r-chip: 16px;
--r-pill: 999px;
}

#game-shell {
position: relative;
}

#game-canvas {
position: relative;
position: absolute;
inset: 0;
z-index: 1;
display: block;
outline: none;
background: transparent;
}

#loading {
position: absolute;
inset: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
display: grid;
place-items: center;
color: #9fb2bd;
max-width: min(36rem, calc(100% - 48px));
padding: 12px 22px;
border: 1px solid rgba(255, 107, 199, 0.58);
border-radius: var(--r-pill);
background: #381452;
box-shadow: inset 0 1px 0 rgba(255, 247, 235, 0.28),
inset 0 -10px 18px rgba(10, 4, 24, 0.35);
color: #ebc7fa;
font: 500 14px/1.4 system-ui, sans-serif;
letter-spacing: 0.04em;
text-align: center;
}
</style>
</head>
Expand Down
42 changes: 24 additions & 18 deletions deployment/vercel/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,42 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#071014" />
<meta name="theme-color" content="#1a0a2e" />
<title>OnlyFronts · Lobbies</title>
<style>
:root {
color-scheme: dark;
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
background: #071014;
color: #e4eff1;
/* Bevy lobby.rs: SCRIM / TEXT — same plastic as the hex tiles */
background: #1a0a2e;
color: #fff7eb;
--r-panel: 24px;
--r-chip: 16px;
--r-pill: 999px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #12333a, #071014 44%); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #381f6b, #1a0a2e 44%); }
main { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0; }
header { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 28px; }
h1 { margin: 0; font-size: clamp(34px, 7vw, 72px); line-height: .9; letter-spacing: -.06em; }
.eyebrow { color: #65dce4; font: 700 12px/1 monospace; letter-spacing: .16em; margin-bottom: 12px; }
.status { color: #91aeb3; max-width: 380px; text-align: right; }
.panel { border: 1px solid #29464c; background: rgba(8, 24, 29, .9); padding: 20px; }
.eyebrow { color: #38faeb; font: 700 12px/1 monospace; letter-spacing: .16em; margin-bottom: 12px; }
.status { color: #ebc7fa; max-width: 380px; text-align: right; }
.panel { border: 1px solid rgba(255, 107, 199, .58); background: rgba(36, 13, 61, .985); padding: 20px; border-radius: var(--r-panel); box-shadow: inset 0 1px 0 rgba(255,247,235,.28), inset 0 -10px 18px rgba(10,4,24,.35); }
form { display: grid; grid-template-columns: 1.4fr 1fr .7fr auto; gap: 12px; margin-bottom: 24px; }
label { display: grid; gap: 7px; color: #91aeb3; font: 700 11px/1 monospace; letter-spacing: .1em; }
input, select, button { min-height: 44px; border: 1px solid #365960; background: #0c2026; color: #eef7f8; padding: 0 13px; font: inherit; }
button { cursor: pointer; border-color: #55c8d1; color: #8de7ed; font-weight: 750; }
button:hover:not(:disabled) { background: #12383e; }
button:disabled { cursor: not-allowed; opacity: .4; }
.list { display: grid; gap: 10px; }
.empty { padding: 36px; color: #759399; text-align: center; border: 1px dashed #29464c; }
.lobby { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; border: 1px solid #29464c; padding: 16px; background: #091a1f; }
label { display: grid; gap: 7px; color: #ebc7fa; font: 700 11px/1 monospace; letter-spacing: .1em; }
input, select, button { min-height: 44px; border: 1px solid rgba(255, 107, 199, .58); background: #381452; color: #fff7eb; padding: 0 13px; font: inherit; box-shadow: inset 0 1px 0 rgba(255,247,235,.28), inset 0 -10px 18px rgba(10,4,24,.35); }
input, select { border-radius: var(--r-chip); }
button { cursor: pointer; border-radius: var(--r-pill); color: #38faeb; font-weight: 750; }
form > button { align-self: end; }
button:hover:not(:disabled) { background: #381f6b; }
button:disabled { cursor: not-allowed; background: #1f1424; color: #ebc7fa; border-color: rgba(235, 199, 250, .28); }
.list { display: grid; gap: 10px; justify-items: stretch; }
.empty { justify-self: center; padding: 12px 22px; color: #ebc7fa; text-align: center; border: 1px solid rgba(255, 107, 199, .58); background: #381452; border-radius: var(--r-chip); box-shadow: inset 0 1px 0 rgba(255,247,235,.28), inset 0 -10px 18px rgba(10,4,24,.35); }
.lobby { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; border: 1px solid rgba(255, 107, 199, .58); padding: 16px; background: #381452; border-radius: var(--r-chip); box-shadow: inset 0 1px 0 rgba(255,247,235,.28), inset 0 -10px 18px rgba(10,4,24,.35); }
.lobby h2 { margin: 0 0 7px; font-size: 17px; }
.meta { color: #86a4a9; font: 12px/1.6 monospace; text-transform: uppercase; }
.names { color: #bfd0d3; font-size: 13px; margin-top: 5px; }
.error { color: #ff9c91; }
.meta { color: #ebc7fa; font: 12px/1.6 monospace; text-transform: uppercase; }
.names { color: #fff7eb; font-size: 13px; margin-top: 5px; }
.error { color: #ff527a; }
@media (max-width: 720px) {
main { padding-top: 34px; }
header { display: block; }
Expand Down
Binary file added docs/playtests/screenshots/html-lobby-first-paint.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/playtests/screenshots/wasm-loading-splash.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading