administrator/Worldshaper
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Match launcher hero to release panel

Browse source
This commit is contained in:
Andraxion 2026-06-26 22:01:43 -04:00
parent 8176c414a8
commit 6c6b1295a3
2 changed files with 76 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/WorldshaperLauncher.tsx
View file

@ -100,33 +100,45 @@ function WorldshaperLauncher() {
style={{ "--launcher-background-image": `url(${launcherBackground})` } as CSSProperties} style={{ "--launcher-background-image": `url(${launcherBackground})` } as CSSProperties}
> >
<div className="launcher-stack"> <div className="launcher-stack">
<section className="launcher-card"> <section className="launcher-hero-window" aria-labelledby="launcher-studio-title">
<p className="launcher-eyebrow">New RPG</p> <div className="launcher-changelog-titlebar">
<h1 className="launcher-title">Worldshaper Studio</h1> <div className="launcher-changelog-title">Worldshaper Studio</div>
<p className="launcher-status">{status}</p> <div className="launcher-changelog-hint">Floating editor launch</div>
{launchState === "blocked" ? ( </div>
<p className="launcher-hint"> <div className="launcher-hero-body">
Allow the popup, then use the studio button again to launch the floating editor window. <div className="launcher-hero-card">
</p> <div className="changelog-splash-hero launcher-hero-banner">
) : null} <p className="launcher-eyebrow">New RPG</p>
{launchState === "opened" ? ( <h1 className="launcher-title" id="launcher-studio-title">Worldshaper Studio</h1>
<p className="launcher-hint"> <p className="launcher-status">{status}</p>
The studio is open in its own slim window. This page stays behind as your release board and relaunch point. </div>
</p> <div className="launcher-hero-support">
) : null} {launchState === "blocked" ? (
{launchState === "ready" ? ( <p className="launcher-hint">
<p className="launcher-hint"> Allow the popup, then use the studio button again to launch the floating editor window.
The editor is designed to live in its own floating window, so the launcher keeps the first step clean. </p>
</p> ) : null}
) : null} {launchState === "opened" ? (
{error ? <p className="launcher-error">{error}</p> : null} <p className="launcher-hint">
<div className="launcher-actions"> The studio is open in its own slim window. This page stays behind as your release board and relaunch point.
<button type="button" className="launcher-primary-btn" onClick={() => void handleLaunch()} disabled={isBusy}> </p>
Open Floating Studio ) : null}
</button> {launchState === "ready" ? (
<button type="button" className="launcher-secondary-btn" onClick={openRepo} disabled={isBusy}> <p className="launcher-hint">
Open Repo The editor is designed to live in its own floating window, so the launcher keeps the first step clean.
</button> </p>
) : null}
{error ? <p className="launcher-error">{error}</p> : null}
<div className="launcher-actions">
<button type="button" className="launcher-primary-btn" onClick={() => void handleLaunch()} disabled={isBusy}>
Open Floating Studio
</button>
<button type="button" className="launcher-secondary-btn" onClick={openRepo} disabled={isBusy}>
Open Repo
</button>
</div>
</div>
</div>
</div> </div>
</section> </section>
<section className="launcher-changelog-window" aria-labelledby="launcher-whats-new-title"> <section className="launcher-changelog-window" aria-labelledby="launcher-whats-new-title">

64
src/index.css
View file

@ -69,19 +69,43 @@ body {
gap: 18px; gap: 18px;
} }
.launcher-card { .launcher-hero-window,
.launcher-changelog-window {
border: 1px solid #4f79af;
border-radius: 12px;
background: color-mix(in srgb, #0a1020 88%, transparent);
color: #d8e8ff;
box-shadow: 0 16px 34px rgba(3, 8, 18, 0.46);
overflow: hidden;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
backdrop-filter: blur(10px);
}
.launcher-hero-window {
justify-self: center; justify-self: center;
width: min(620px, 100%); width: min(620px, 100%);
padding: 28px 30px; }
border: 1px solid rgba(120, 170, 230, 0.2);
border-radius: 20px; .launcher-hero-body {
background: padding: 12px;
radial-gradient(circle at top left, rgba(92, 200, 255, 0.13), transparent 38%), }
linear-gradient(180deg, rgba(18, 24, 35, 0.86) 0%, rgba(12, 17, 26, 0.94) 100%);
backdrop-filter: blur(12px); .launcher-hero-card {
box-shadow: display: grid;
0 28px 80px rgba(0, 0, 0, 0.46), gap: 12px;
inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.launcher-hero-banner {
min-height: 0;
}
.launcher-hero-support {
padding: 12px 14px;
border: 1px solid #365782;
border-radius: 12px;
background: rgba(17, 32, 63, 0.84);
box-shadow: inset 0 0 0 1px rgba(10, 16, 32, 0.14);
} }
.launcher-eyebrow { .launcher-eyebrow {
@ -123,20 +147,11 @@ body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
margin-top: 18px; margin-top: 16px;
} }
.launcher-changelog-window { .launcher-changelog-window {
width: min(760px, 100%); width: min(760px, 100%);
border: 1px solid #4f79af;
border-radius: 12px;
background: color-mix(in srgb, #0a1020 88%, transparent);
color: #d8e8ff;
box-shadow: 0 16px 34px rgba(3, 8, 18, 0.46);
overflow: hidden;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
backdrop-filter: blur(10px);
} }
.launcher-changelog-titlebar { .launcher-changelog-titlebar {
@ -1391,16 +1406,11 @@ button.danger:not(:disabled):hover {
} }
.launcher-stack, .launcher-stack,
.launcher-card, .launcher-hero-window,
.launcher-changelog-window { .launcher-changelog-window {
width: 100%; width: 100%;
} }
.launcher-card {
padding: 22px 20px;
border-radius: 16px;
}
.launcher-actions { .launcher-actions {
flex-direction: column; flex-direction: column;
} }