github-such-software/wownerogue
1
0
Fork 0
mirror of https://github.com/Such-Software/wownerogue.git synced 2026-10-17 14:21:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): regroup the sidebar into labeled sections (Loadout / Explore / Progress)

Browse Source 
Per the menu redesign: PLAY on top, then Loadout (Character + Style/render-picker), Explore
(Watch + Tavern), Progress & account (Shop + Anim + the hud-chip toolbar). Pure reorder +
group headers — every id/handler preserved, no grid change. Bottom-console (#3) is next.
This commit is contained in:
jwinterm
2026-07-12 15:42:07 -04:00
parent 8a3b254935
commit 59de1f2b36
2 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/index.html
+15 -5
View File
@@ -128,20 +128,30 @@
<div id="publicStats" style="display:none; margin-top:4px; font-size:11px; color:#9cf; font-family:monospace; line-height:1.4;"></div>
<div id="liveCta" style="display:none; margin-top:6px; cursor:pointer; background:rgba(80,0,0,0.55); border:1px solid #f33; border-radius:4px; padding:5px 10px; font-size:12px; font-family:monospace; color:#ff8a8a; font-weight:bold;" title="Watch a live game"></div>
<div id="creditsDisplay" style="display:none; margin-top:4px; font-size:13px; font-family:monospace; color:#0f0; background:#001a00; padding:4px 8px; border:1px solid #0a0; border-radius:4px; font-weight:bold;"></div>
<!-- PLAY -->
<button id="startButton" class="ctrl-btn ctrl-btn--start" style="display: none;">
🎮 <span class="lbl-full">START GAME</span><span class="lbl-short">START</span>
</button>
<!-- LOADOUT · set once, remembered -->
<div class="menu-grp-h">Loadout</div>
<button id="characterButton" class="ctrl-btn ctrl-btn--character" title="Create / customize your character">
🎭 <span id="characterButtonLabel" class="lbl-full">CHARACTER</span><span class="lbl-short">CHAR</span>
</button>
<!-- Render mode + tile-pack picker (Style) — populated by spRenderPicker.js from entitlements. -->
<div id="renderPicker" class="hidden"></div>
<!-- EXPLORE -->
<div class="menu-grp-h">Explore</div>
<button id="watchGamesButton" class="ctrl-btn ctrl-btn--watch">
👁️ <span class="lbl-full">WATCH GAMES</span><span class="lbl-short">WATCH</span>
</button>
<button id="tavernButton" class="ctrl-btn ctrl-btn--tavern" style="display: none;" onclick="window.location.href='/tavern'">
🍺 <span class="lbl-full">TAVERN</span><span class="lbl-short">TAVERN</span>
</button>
<button id="characterButton" class="ctrl-btn ctrl-btn--character" title="Create / customize your character">
🎭 <span id="characterButtonLabel" class="lbl-full">CHARACTER</span><span class="lbl-short">CHAR</span>
</button>
<!-- Render mode + tile-pack picker (populated by spRenderPicker.js from entitlements). -->
<div id="renderPicker" class="hidden"></div>
<!-- PROGRESS & ACCOUNT -->
<div class="menu-grp-h">Progress &amp; account</div>
<button id="shopButton" class="ctrl-btn ctrl-btn--shop" style="display: none;">
🛒 SHOP
</button>
html/styles/stylesheet.css
+7
View File
@@ -193,6 +193,13 @@ body {
.ctrl-btn--start { animation: torch-glow 3.4s ease-in-out infinite; }
.ctrl-btn--start:hover { animation: none; }
/* Sidebar group headers (Loadout / Explore / Progress) — the redesigned menu grouping. */
.menu-grp-h {
font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
color: #7a8a5f; font-weight: 700; margin: 12px 0 5px; padding: 9px 0 0 2px;
border-top: 1px solid rgba(255,255,255,0.055);
}
/* =========================================================================
HUD TOOLBAR — secondary "chip" controls (audio toggle + help / history /
scores / manage-address). Small, bordered, glow-on-hover.