Skip to content

docs(nr-1wbx): mockup #3399

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
rmstdope merged 1 commit into from
Oct 30, 2026
Merged

docs(nr-1wbx): mockup #3399

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
31 changes: 31 additions & 0 deletions docs/ui/nr-1wbx-relay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html><html><head><meta charset=utf-8><meta name=viewport content='width=device-width'><title>Playing through the relay</title><style>
:root{--bg:#0c1420;--b2:#0e1826;--b3:#1d2c42;--txt:#dbe6f3;--muted:#7d8fa6;--steel:#4a76a8;--hi:#7fb0e3;--ice:#b9dcff;--line:rgba(130,170,215,.14);--ls:rgba(130,170,215,.32);--ok:#5fd3b0;--warn:#e9b65f;--err:#f2718a;--mono:ui-monospace,Menlo,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 system-ui;padding:24px}
h1{font-size:19px;margin:0 0 6px}.note{background:#13203a;border-left:3px solid var(--hi);padding:10px 14px;border-radius:6px;max-width:980px;margin:8px 0 18px}
.lbl{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:22px 0 8px}
.row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.top{display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);border-radius:10px 10px 0 0;background:var(--b2)}
.logo{font-weight:800;letter-spacing:.12em;color:var(--ice)}.sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ls);background:var(--b3);color:var(--txt);padding:6px 12px;border-radius:9px;font:inherit;font-size:13px;cursor:default}
.btn.p{background:var(--hi);color:#04111f;border-color:var(--hi);font-weight:600}.btn.g{background:transparent;border-color:transparent;color:var(--txt)}
.btn.dis{opacity:.4}.btn.hl{box-shadow:0 0 0 2px var(--ice),0 0 18px rgba(80,150,230,.5)}
.scr{width:100%;max-width:640px;border:1px solid var(--line);border-top:0;background:#000;height:210px;display:flex;align-items:center;justify-content:center;color:#345;font-family:var(--mono)}
.bar{display:flex;gap:4px;flex-wrap:wrap;padding:6px;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:var(--b2);max-width:640px}
.frame{max-width:640px;width:100%}
.dlg{width:440px;max-width:100%;background:var(--b2);border:1px solid var(--ls);border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dlg h2{margin:0 0 4px;font-size:17px}.dh{display:flex;align-items:center;gap:8px;margin-bottom:10px}.x{margin-left:auto;color:var(--muted)}
.card{border:1px solid var(--ls);border-radius:12px;padding:12px 14px;margin:8px 0;background:var(--b3)}.card b{display:block;margin-bottom:2px}.card small{color:var(--muted)}
.code{font-family:var(--mono);font-size:11.5px;word-break:break-all;background:#08101b;border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--ice);max-height:92px;overflow:hidden;position:relative}
.ta{font-family:var(--mono);font-size:11.5px;background:#08101b;border:1px dashed var(--ls);border-radius:8px;padding:10px;color:var(--muted);height:70px}
.steps{display:flex;gap:6px;margin:4px 0 14px;font-size:12px;color:var(--muted)}.steps span{flex:1;border-top:3px solid var(--b3);padding-top:4px}.steps .on{border-color:var(--hi);color:var(--txt)}.steps .done{border-color:var(--ok)}
.act{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px}
.muted{color:var(--muted)}.ok{color:var(--ok)}.warn{color:var(--warn)}.err{color:var(--err)}
.pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--ls);border-radius:99px;padding:3px 10px;font-size:12px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
.alert{border-radius:10px;padding:10px 12px;margin-top:10px;font-size:13px}.alert.w{background:rgba(233,182,95,.12);border:1px solid rgba(233,182,95,.4)}.alert.e{background:rgba(242,113,138,.12);border:1px solid rgba(242,113,138,.4)}
.hero{border:1px solid var(--line);border-top:0;background:linear-gradient(#16233a,#0e1729);padding:28px;border-radius:0 0 10px 10px;max-width:640px}
.hero h2{margin:0 0 6px;font-size:22px}
.bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px}.bars i{width:4px;background:var(--ok);display:block}.bars i.off{background:var(--b3)}
.ann{color:var(--warn);font-size:12px;margin-top:4px}
.sec{font-size:16px;margin:0 0 4px}.big{font-family:var(--mono);font-size:40px;letter-spacing:.14em;color:var(--ice);text-align:center;background:#08101b;border:1px solid var(--line);border-radius:12px;padding:14px 8px;margin:6px 0}.inp{font-family:var(--mono);font-size:24px;letter-spacing:.14em;background:#08101b;border:1px solid var(--ls);border-radius:10px;padding:10px 12px;color:var(--ice)}.inp.ph{color:#3d4f66}.box{display:inline-flex;width:40px;height:50px;align-items:center;justify-content:center;font-family:var(--mono);font-size:24px;background:#08101b;border:1px solid var(--ls);border-radius:8px;color:var(--ice)}.box.f{border-color:var(--hi);box-shadow:0 0 0 2px rgba(127,176,227,.35)}.hy{display:inline-flex;align-items:center;color:var(--muted);padding:0 4px;font-size:22px}.tips{margin:8px 0 0;padding-left:18px;font-size:13px}.tips li{margin:3px 0}.disc{font-size:13px;color:var(--hi);margin-top:8px}.small{font-size:12px}.phone{width:360px;border:1px solid var(--ls);border-radius:22px;padding:60px 0 0;background:#000}.phone .dlg{border-radius:16px 16px 0 0;width:100%}.relay{font-size:13px;color:var(--hi);margin:6px 0 0}.chipbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center}</style></head><body>
<h1>Playing together through the relay — agreed</h1><div class=note>When two players' networks can't connect directly, the game goes through NESER's relay in Sweden. Players see this in the Connected view and on the chip. Everything not shown is unchanged from the room-code, internet-play and Play together drawings.</div><div class=lbl>First window — the address line now mentions the relay (always shown; wraps on a phone)</div><div class=row><div class=dlg><div class=dh><h2>Play together</h2><span class=x>✕</span></div><div class=card><b>Host this game</b><small>Share Super Mario Bros. 3 with another player. You are player 1.</small></div><div class=card><b>Join a game</b><small>Connect to a game someone else is hosting. You are player 2 — you don't need the game file.</small></div><p class=disc>ⓘ Playing together connects your computer to the other player's — directly, or through NESER's relay when it has to — so each of you can see the other's internet address.</p><div class=act><span class='btn g'>Close</span></div></div><div class=phone><div class=dlg><div class=dh><h2>Play together</h2><span class=x>✕</span></div><div class=card><b>Host this game</b><small>Share Super Mario Bros. 3 with another player. You are player 1.</small></div><div class=card><b>Join a game</b><small>Connect to a game someone else is hosting. You are player 2 — you don't need the game file.</small></div><p class=disc>ⓘ Playing together connects your computer to the other player's — directly, or through NESER's relay when it has to — so each of you can see the other's internet address.</p><div class=act><span class='btn g'>Close</span></div></div></div></div><h1 style='margin-top:28px'>Connected through the relay</h1><div class=lbl>Host and joiner — the relay line sits under the response time, for as long as the game is relayed</div><div class=row><div class=dlg><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class=done>1. Share the code</span><span class=on>2. Connected</span></div><p style='margin:0'><span class=dot></span> <b>Connected</b> to the other player.</p><p style='margin:6px 0'><span class=pill>Response time 84 ms · <span class=ok>Great</span></span></p><p class=relay>↪ Connected through NESER's relay in Sweden, because your networks don't allow a direct connection. This can add a little delay.</p><div class=act><span class='btn g'>Disconnect</span></div></div><div class=dlg><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class=done>1. Type the host's code</span><span class=on>2. Connected</span></div><p style='margin:0'><span class=dot></span> <b>Connected</b> to the host.</p><p style='margin:6px 0'><span class=pill>Response time 84 ms · <span class=ok>Great</span></span></p><p class=relay>↪ Connected through NESER's relay in Sweden, because your networks don't allow a direct connection. This can add a little delay.</p><p class=muted>The host will send the game next.</p><div class=act><span class='btn g'>Disconnect</span></div></div></div><div class=lbl>Relayed and Playable</div><div class=row><div class=dlg><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class=done>1. Share the code</span><span class=on>2. Connected</span></div><p style='margin:0'><span class=dot></span> <b>Connected</b> to the other player.</p><p style='margin:6px 0'><span class=pill>Response time 110 ms · <span class=warn>Playable</span></span></p><p class=relay>↪ Connected through NESER's relay in Sweden, because your networks don't allow a direct connection. This can add a little delay.</p><div class=act><span class='btn g'>Disconnect</span></div></div></div><div class=lbl>Direct — unchanged, no relay line</div><div class=row><div class=dlg><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class=done>1. Share the code</span><span class=on>2. Connected</span></div><p style='margin:0'><span class=dot></span> <b>Connected</b> to the other player.</p><p style='margin:6px 0'><span class=pill>Response time 18 ms · <span class=ok>Great</span></span></p><div class=act><span class='btn g'>Disconnect</span></div></div></div><h1 style='margin-top:28px'>The top-bar chip</h1><div class=lbl>Relayed — Great / Playable / Too slow keep their colours</div><div class=row><div class=frame style='max-width:640px'><div class=top><span class=logo>NESER</span><span class=sp></span><span class=btn>⏸</span><span class=btn>⚙</span><span class=btn><span class=dot style='background:var(--ok)'></span>Connected · Relayed · 84 ms</span></div><div class=scr style='height:120px'>[ game ]</div></div><div class=frame style='max-width:640px'><div class=top><span class=logo>NESER</span><span class=sp></span><span class=btn>⏸</span><span class=btn>⚙</span><span class=btn><span class=dot style='background:var(--warn)'></span>Connected · Relayed · 110 ms</span></div><div class=scr style='height:120px'>[ game ]</div></div></div><div class=lbl>Relayed, phone-sized window</div><div class=row><div class=frame style='max-width:360px'><div class=top><span class=logo>NESER</span><span class=sp></span><span class=btn>⏸</span><span class=btn>⚙</span><span class=btn><span class=dot style='background:var(--ok)'></span>↪ 84 ms</span></div><div class=scr style='height:120px'>[ game ]</div></div></div><div class=lbl>Direct — unchanged</div><div class=row><div class=frame style='max-width:640px'><div class=top><span class=logo>NESER</span><span class=sp></span><span class=btn>⏸</span><span class=btn>⚙</span><span class=btn><span class=dot style='background:var(--ok)'></span>Connected · 18 ms</span></div><div class=scr style='height:120px'>[ game ]</div></div><div class=frame style='max-width:360px'><div class=top><span class=logo>NESER</span><span class=sp></span><span class=btn>⏸</span><span class=btn>⚙</span><span class=btn><span class=dot style='background:var(--ok)'></span>18 ms</span></div><div class=scr style='height:120px'>[ game ]</div></div></div><div class=lbl>Waiting / Disconnected — unchanged, no Relayed</div><div class=row><div class=frame style='max-width:640px'><div class=top><span class=logo>NESER</span><span class=sp></span><span class=btn>⏸</span><span class=btn>⚙</span><span class=btn><span class=dot style='background:var(--warn)'></span>Waiting…</span></div><div class=scr style='height:120px'>[ game ]</div></div><div class=frame style='max-width:640px'><div class=top><span class=logo>NESER</span><span class=sp></span><span class=btn>⏸</span><span class=btn>⚙</span><span class=btn><span class=dot style='background:var(--err)'></span>Disconnected</span></div><div class=scr style='height:120px'>[ game ]</div></div></div><h1 style='margin-top:28px'>Too slow while relayed — relay advice</h1><div class=lbl>Relayed, too slow when connecting (refused)</div><div class=row><div class=dlg><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='done'>1. Share the code</span><span class='on'>2. Connected</span></div><div class='alert e'><b>Too slow to play</b><br>The connection through NESER's relay is too slow for the game to keep up. A direct connection is usually faster — try again with both of you on a home network, ideally wired.</div><div class=act><span class='btn g'>Close</span><span class='btn '>Try again</span></div></div></div><div class=lbl>Relayed, became too slow while playing</div><div class=row><div class=dlg><div class=dh><h2>Playing together</h2><span class=x>✕</span></div><p style='margin:0'><span class=pill><span class=dot style='background:var(--err)'></span>Response time 160 ms · Too slow</span></p><p class=relay>↪ Connected through NESER's relay in Sweden, because your networks don't allow a direct connection. This can add a little delay.</p><div class='alert e'>The connection through NESER's relay has become too slow to play. It may recover by itself — if not, try again with both of you on a home network, ideally wired.</div><div class=act><span class='btn '>Disconnect</span></div></div></div><div class=lbl>Chip while relayed and too slow</div><div class=row><div class=frame style='max-width:640px'><div class=top><span class=logo>NESER</span><span class=sp></span><span class=btn>⏸</span><span class=btn>⚙</span><span class=btn><span class=dot style='background:var(--err)'></span>Connected · Relayed · 160 ms</span></div><div class=scr style='height:120px'>[ game ]</div></div><div class=frame style='max-width:360px'><div class=top><span class=logo>NESER</span><span class=sp></span><span class=btn>⏸</span><span class=btn>⚙</span><span class=btn><span class=dot style='background:var(--err)'></span>↪ 160 ms</span></div><div class=scr style='height:120px'>[ game ]</div></div></div><p class='muted small'>A direct game keeps the agreed too-slow words.</p><h1 style='margin-top:28px'>Couldn't connect — now only when even the relay can't help</h1><div class=lbl>No relay available right now — both players</div><div class=row><div class=dlg><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span>2. Connected</span></div><div class='alert e'><b>Couldn't connect your two computers.</b> Your networks don't allow a direct connection, and NESER's relay can't be reached right now. Try again in a while, or with both of you on a home network.</div><div class=act><span class='btn g'>Close</span><span class='btn p'>Start again</span></div></div><div class=dlg><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span>2. Connected</span></div><p style='margin:0'>Type the code the host tells you.</p><div class=inp>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>Couldn't connect your two computers.</b> Your networks don't allow a direct connection, and NESER's relay can't be reached right now. Try again in a while, or with both of you on a home network.</div><div class=act><span class='btn g'>Close</span><span class='btn p'>Start again</span></div></div></div><div class=lbl>The relay was tried and still couldn't connect them — both players</div><div class=row><div class=dlg><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span>2. Connected</span></div><div class='alert e'><b>Couldn't connect your two computers.</b> Your networks blocked every way of connecting them, even through NESER's relay. This can happen on strict work or school networks — try again from another network.</div><div class=act><span class='btn g'>Close</span><span class='btn p'>Start again</span></div></div><div class=dlg><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span>2. Connected</span></div><p style='margin:0'>Type the code the host tells you.</p><div class=inp>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>Couldn't connect your two computers.</b> Your networks blocked every way of connecting them, even through NESER's relay. This can happen on strict work or school networks — try again from another network.</div><div class=act><span class='btn g'>Close</span><span class='btn p'>Start again</span></div></div></div><p class='muted small'>These replace the earlier “Couldn't connect your two computers. Your networks don't allow a direct connection between them…”. While trying, the waiting lines and the roughly 10-second limit are unchanged.</p></body></html>
Loading