Skip to content

docs(nr-ri8n): mockup #3397

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-ri8n): mockup #3397

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
36 changes: 36 additions & 0 deletions docs/ui/nr-ri8n-internet-play.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!doctype html><html><head><meta charset=utf-8><meta name=viewport content='width=device-width'><title>Play across the internet</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%}</style></head><body>
<h1>Play together across the internet — agreed</h1><div class=note>Two players in different homes connect with the room code as before. Everything not shown here is unchanged from the room-code and Play together drawings.</div>
<div class=lbl>First window — new line about internet addresses (always shown, also when a card is greyed)</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 directly to the other player's, 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 directly to the other player's, 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'>Connecting, and when it can't be done</h1><div class=lbl>While trying (0–10 seconds)</div><div class=row><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 class=''>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><p class=muted style='margin:8px 0 0'>⟳ Connecting…</p><div class=act><span class='btn g'>Cancel</span></div></div></div><div class=lbl>After about 10 seconds with no connection</div><div class=row><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 class=''>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 between them. This often happens on mobile, hotspot or work networks — try again 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>
<h1 style='margin-top:28px'>Both players see it — host and joiner</h1><div class=lbl>Host — the two computers could not be connected</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 class=''>2. Connected</span></div><div class='alert e'><b>Couldn't connect your two computers.</b> Your networks don't allow a direct connection between them. This often happens on mobile, hotspot or work networks — try again 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 class=''>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 between them. This often happens on mobile, hotspot or work networks — try again 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><p class='muted small'>Both players see this at the same time. It replaces today's "Couldn't reach the other player. Network play needs both computers on the same network (or the same VPN)."</p>
<h1 style='margin-top:28px'>Too slow — new advice</h1><div class=lbl>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 between the two computers is too slow for the game to keep up. Try a wired connection or being closer to the router — or play on the same network.</div><div class=act><span class='btn g'>Close</span><span class='btn '>Try again</span></div></div></div><div class=lbl>Became too slow while playing (still connected)</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><div class='alert e'>The connection has become too slow to play. It may recover by itself — if not, try a wired connection or being closer to the router.</div><div class=act><span class='btn '>Disconnect</span></div></div></div>
</body></html>
Loading