366 lines
11 KiB
HTML
366 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Pokémon Party OBS Overlay Guide</title>
|
|
<style>
|
|
:root {
|
|
--bg: #101827;
|
|
--panel: #172238;
|
|
--panel-2: #1e2d4a;
|
|
--ink: #f7fbff;
|
|
--muted: #aebbd3;
|
|
--line: rgba(255,255,255,.14);
|
|
--gold: #ffd76a;
|
|
--red: #ff5f6d;
|
|
--blue: #60d5ff;
|
|
--green: #72ee9b;
|
|
--shadow: 0 24px 70px rgba(0,0,0,.34);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
color: var(--ink);
|
|
font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background:
|
|
radial-gradient(circle at 18% 12%, rgba(96,213,255,.22), transparent 30rem),
|
|
radial-gradient(circle at 82% 4%, rgba(255,215,106,.18), transparent 28rem),
|
|
linear-gradient(135deg, #0b1120 0%, #101827 48%, #18243b 100%);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.page {
|
|
width: min(1180px, calc(100% - 40px));
|
|
margin: 0 auto;
|
|
padding: 44px 0 56px;
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 28px;
|
|
padding: clamp(28px, 5vw, 58px);
|
|
background:
|
|
linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
|
|
var(--panel);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.hero:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 260px;
|
|
height: 260px;
|
|
right: -80px;
|
|
top: -80px;
|
|
border-radius: 50%;
|
|
border: 34px solid rgba(255,255,255,.07);
|
|
box-shadow: inset 0 0 0 28px rgba(255,255,255,.04);
|
|
}
|
|
|
|
.kicker {
|
|
display: inline-flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin-bottom: 18px;
|
|
padding: 8px 13px;
|
|
border-radius: 999px;
|
|
background: rgba(255,215,106,.13);
|
|
color: var(--gold);
|
|
font-weight: 700;
|
|
letter-spacing: .02em;
|
|
}
|
|
|
|
h1, h2, h3 { line-height: 1.08; margin: 0; }
|
|
|
|
h1 {
|
|
max-width: 850px;
|
|
font-size: clamp(2.3rem, 6vw, 5rem);
|
|
letter-spacing: -.035em;
|
|
}
|
|
|
|
.hero p {
|
|
max-width: 720px;
|
|
margin: 22px 0 0;
|
|
color: var(--muted);
|
|
font-size: 1.17rem;
|
|
}
|
|
|
|
.quick-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 44px;
|
|
padding: 0 17px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(255,255,255,.18);
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
background: rgba(255,255,255,.08);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.button.primary {
|
|
border-color: rgba(255,215,106,.5);
|
|
background: linear-gradient(180deg, #ffe58d, #f5b83b);
|
|
color: #1b1606;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 18px;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.card {
|
|
grid-column: span 6;
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
padding: 24px;
|
|
background: rgba(23,34,56,.82);
|
|
box-shadow: 0 16px 45px rgba(0,0,0,.22);
|
|
}
|
|
|
|
.card.full { grid-column: 1 / -1; }
|
|
.card.third { grid-column: span 4; }
|
|
|
|
h2 {
|
|
margin-bottom: 14px;
|
|
font-size: clamp(1.55rem, 3vw, 2.25rem);
|
|
letter-spacing: -.025em;
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 8px;
|
|
font-size: 1.1rem;
|
|
color: var(--gold);
|
|
}
|
|
|
|
p { margin: 0 0 12px; color: var(--muted); }
|
|
p:last-child { margin-bottom: 0; }
|
|
|
|
ol, ul { margin: 10px 0 0; padding-left: 1.25rem; color: var(--muted); }
|
|
li { margin: 7px 0; }
|
|
|
|
code, pre {
|
|
font-family: Consolas, "Cascadia Mono", monospace;
|
|
font-size: .95rem;
|
|
}
|
|
|
|
code {
|
|
padding: 2px 6px;
|
|
border-radius: 7px;
|
|
background: rgba(255,255,255,.09);
|
|
color: #dff6ff;
|
|
}
|
|
|
|
pre {
|
|
overflow: auto;
|
|
margin: 14px 0 0;
|
|
padding: 16px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
background: #07101f;
|
|
color: #e8f7ff;
|
|
}
|
|
|
|
.steps {
|
|
counter-reset: step;
|
|
display: grid;
|
|
gap: 14px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.step {
|
|
display: grid;
|
|
grid-template-columns: 46px 1fr;
|
|
gap: 14px;
|
|
align-items: start;
|
|
padding: 16px;
|
|
border-radius: 18px;
|
|
background: rgba(255,255,255,.055);
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
}
|
|
|
|
.step:before {
|
|
counter-increment: step;
|
|
content: counter(step);
|
|
display: grid;
|
|
place-items: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 13px;
|
|
background: var(--gold);
|
|
color: #1b1606;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.callout {
|
|
margin-top: 14px;
|
|
padding: 16px;
|
|
border-radius: 18px;
|
|
background: rgba(96,213,255,.11);
|
|
border: 1px solid rgba(96,213,255,.28);
|
|
color: #daf7ff;
|
|
}
|
|
|
|
.status-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.pill {
|
|
padding: 7px 11px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255,255,255,.16);
|
|
background: rgba(255,255,255,.07);
|
|
color: var(--muted);
|
|
font-size: .95rem;
|
|
}
|
|
|
|
.alive { color: var(--green); }
|
|
.boxed { color: var(--gold); }
|
|
.dead { color: var(--red); }
|
|
|
|
footer {
|
|
margin-top: 26px;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.page { width: min(100% - 24px, 1180px); padding-top: 18px; }
|
|
.card, .card.third { grid-column: 1 / -1; }
|
|
.hero { border-radius: 22px; }
|
|
.step { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<section class="hero">
|
|
<div class="kicker">SoulSilver Nuzlocke stream tool</div>
|
|
<h1>OBS party overlay setup guide</h1>
|
|
<p>This guide walks you through running the Pokémon party overlay locally, editing your six active slots, adding HeartGold/SoulSilver sprites, and connecting everything to OBS.</p>
|
|
<nav class="quick-links" aria-label="Guide shortcuts">
|
|
<a class="button primary" href="editor.html">Open Editor</a>
|
|
<a class="button" href="overlay.html">Preview Overlay</a>
|
|
<a class="button" href="overlay.html?layout=grid">Grid Preview</a>
|
|
<a class="button" href="overlay.html?layout=vertical">Vertical Preview</a>
|
|
</nav>
|
|
</section>
|
|
|
|
<section class="grid" aria-label="Setup guide sections">
|
|
<article class="card full">
|
|
<h2>Fast start</h2>
|
|
<div class="steps">
|
|
<div class="step"><div><h3>Extract the folder</h3><p>Unzip <code>pokemon-party-overlay.zip</code> somewhere easy, like <code>C:\StreamingTools\pokemon-party-overlay</code>.</p></div></div>
|
|
<div class="step"><div><h3>Start the local server</h3><p>Double-click <code>start-overlay.bat</code>. Keep that window open while streaming.</p></div></div>
|
|
<div class="step"><div><h3>Open the editor</h3><p>Go to <code>http://localhost:8765/editor.html</code>, set your Pokémon, nicknames, sprite paths, and statuses, then click <strong>Save party.json directly</strong>.</p></div></div>
|
|
<div class="step"><div><h3>Add the OBS source</h3><p>In OBS, add a Browser Source pointing to <code>http://localhost:8765/overlay.html</code>. Recommended size: <code>1400 x 230</code>.</p></div></div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<h2>What each file does</h2>
|
|
<ul>
|
|
<li><code>start-overlay.bat</code> starts everything on Windows.</li>
|
|
<li><code>server.py</code> serves the pages and lets the editor save directly.</li>
|
|
<li><code>editor.html</code> is your control page for changing the party.</li>
|
|
<li><code>overlay.html</code> is the OBS Browser Source page.</li>
|
|
<li><code>party.json</code> stores the six slots.</li>
|
|
<li><code>sprites/</code> stores your local PNG or GIF sprites.</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<h2>OBS settings</h2>
|
|
<p>Add a new Browser Source and use:</p>
|
|
<pre>URL: http://localhost:8765/overlay.html
|
|
Width: 1400
|
|
Height: 230</pre>
|
|
<p class="callout">The overlay background is transparent, so you can place it above your game capture. If you use a different layout, resize the Browser Source to fit.</p>
|
|
</article>
|
|
|
|
<article class="card full">
|
|
<h2>Adding sprites</h2>
|
|
<p>The easiest local setup is to put HeartGold/SoulSilver sprites in <code>sprites/hgss/</code> and use National Dex numbers as filenames.</p>
|
|
<pre>pokemon-party-overlay/
|
|
sprites/
|
|
hgss/
|
|
152.png
|
|
155.png
|
|
158.png
|
|
25.png</pre>
|
|
<p>Then use paths like this in the editor:</p>
|
|
<pre>sprites/hgss/155.png</pre>
|
|
<p>Good source: <code>https://github.com/PokeAPI/sprites</code>. The HGSS folder is:</p>
|
|
<pre>sprites/pokemon/versions/generation-iv/heartgold-soulsilver/</pre>
|
|
</article>
|
|
|
|
<article class="card third">
|
|
<h2>Layouts</h2>
|
|
<p>Horizontal party bar:</p>
|
|
<pre>overlay.html</pre>
|
|
<p>Vertical sidebar:</p>
|
|
<pre>overlay.html?layout=vertical</pre>
|
|
<p>2x3 grid:</p>
|
|
<pre>overlay.html?layout=grid</pre>
|
|
</article>
|
|
|
|
<article class="card third">
|
|
<h2>Status tags</h2>
|
|
<p>Use these status values in the editor:</p>
|
|
<div class="status-row">
|
|
<span class="pill alive">alive</span>
|
|
<span class="pill boxed">boxed</span>
|
|
<span class="pill dead">dead</span>
|
|
<span class="pill">empty</span>
|
|
</div>
|
|
<p class="callout">Dead Pokémon show with grayscale styling, which is useful for Nuzlocke tracking.</p>
|
|
</article>
|
|
|
|
<article class="card third">
|
|
<h2>If something breaks</h2>
|
|
<ul>
|
|
<li>If OBS is blank, confirm <code>start-overlay.bat</code> is still open.</li>
|
|
<li>If saving fails, make sure you started with <code>server.py</code>, not <code>python -m http.server</code>.</li>
|
|
<li>If a sprite is missing, check the path and filename spelling.</li>
|
|
<li>If port 8765 is busy, close the old server window and start again.</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="card full">
|
|
<h2>Example party.json slot</h2>
|
|
<p>You normally edit this through the editor, but this is what one Pokémon slot looks like under the hood:</p>
|
|
<pre>{
|
|
"species": "cyndaquil",
|
|
"nickname": "Toast",
|
|
"sprite": "sprites/hgss/155.png",
|
|
"status": "alive"
|
|
}</pre>
|
|
</article>
|
|
</section>
|
|
|
|
<footer>
|
|
Keep the server window open during stream. Update the party in the editor; OBS refreshes automatically within a couple seconds.
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|