drifty/WebMonkeyBall
1
0
Fork 0
mirror of https://github.com/sndrec/WebMonkeyBall.git synced 2026-02-03 10:13:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

credits and better menu text

Browse Source
This commit is contained in:
Brandon Johnson
2026-01-25 19:46:39 -05:00
parent a14c3e20d6
commit c84f3426b1
2 changed files with 102 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@@ -18,6 +18,29 @@
<canvas id="hud-canvas"></canvas>
<div id="stage-fade" class="stage-fade"></div>
<div id="overlay" class="overlay">
<div class="credits-menu" id="credits-menu">
<button class="credits-label" id="credits-toggle" type="button" aria-haspopup="true" aria-expanded="false">
Credits
</button>
<div class="credits-panel" id="credits-panel">
<div>
<a href="https://ko-fi.com/twilightpb" target="_blank" rel="noopener">TwilightPB</a>
<span>— Porting</span>
</div>
<div>
<a href="https://complexplane.dev" target="_blank" rel="noopener">ComplexPlane</a>
<span>— Renderer</span>
</div>
<div>
camthesaxman <span>— Decompilation</span>
</div>
<div>
Amusement Vision <span>— Original game</span>
</div>
</div>
</div>
<div class="panel">
<h1>Super Monkey Ball 1</h1>
<p>Standard gameplay (Beginner / Advanced / Expert).</p>
@@ -112,8 +135,9 @@
<button id="resume" class="ghost" disabled>Resume</button>
</div>
<div class="hint">
<div>Controls: WASD / Arrow Keys = tilt, R = reset stage, N = skip stage, M = toggle render mode</div>
<div>Run a local server (example: <code>python -m http.server</code> from repo root).</div>
<div>Controls: WASD / Arrow Keys = tilt, R = reset stage, N = skip stage</div>
<div>If you have a controller plugged in, it should work too.</div>
<div>Don't worry about reporting bugs. I probably already know about it - it'll get fixed.</div>
</div>
</div>
</div>

76
style.css
View File

@@ -245,3 +245,79 @@ button:disabled {
font-size: 22px;
}
}
.credits-menu {
position: fixed;
top: 12px;
left: 12px;
z-index: 11;
font-size: 13px;
color: var(--fg);
}
/* Hover "bridge" so the menu doesn't vanish while moving into the panel */
.credits-menu::after {
content: "";
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 10px;
}
.credits-label {
padding: 8px 12px;
background: var(--panel);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
cursor: pointer;
color: inherit;
font: inherit;
}
.credits-label:focus-visible {
outline: 2px solid rgba(255, 159, 28, 0.8);
outline-offset: 2px;
}
.credits-panel {
position: absolute;
top: 100%;
left: 0;
margin-top: 6px;
min-width: 240px;
background: var(--panel);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 10px 12px;
display: grid;
gap: 6px;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 120ms ease, transform 120ms ease;
}
/* OPEN on hover (desktop) OR when toggled open (mobile) */
.credits-menu:hover .credits-panel,
.credits-menu.open .credits-panel {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.credits-panel a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
.credits-panel a:hover {
text-decoration: underline;
}
.credits-panel span {
color: var(--muted);
margin-left: 4px;
}