github-such-software/wownerogue
1
0
Fork 0
mirror of https://github.com/Such-Software/wownerogue.git synced 2026-10-19 07:08:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

mobile: compact action buttons to one row, shrink/lighten D-pad

Browse Source 
On phones the primary buttons now read START / WATCH / SHOP (short labels via
spans toggled by media query) with tighter padding so they fit a single row.
The on-screen D-pad is smaller (44px) and more transparent so it covers less
of the chat/game underneath.
This commit is contained in:
jwinterm
2026-06-01 08:35:33 -04:00
parent f9e658e841
commit 038f47051f
2 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/index.html
+2 -2
View File
@@ -100,10 +100,10 @@
<div id="connectionStatus">Status: <span id="statusValue">Connecting...</span></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>
<button id="startButton" style="background: #0a5c0a; color: #ff0; border: 2px solid #0f0; padding: 8px 16px; font-weight: bold; cursor: pointer; margin-top: 5px; display: none;">
🎮 START GAME
🎮 <span class="lbl-full">START GAME</span><span class="lbl-short">START</span>
</button>
<button id="watchGamesButton" style="background: #053655; color: #0af; border: 2px solid #0af; padding: 8px 16px; font-weight: bold; cursor: pointer; margin-top: 5px; margin-left: 10px;">
👁️ WATCH GAMES
👁️ <span class="lbl-full">WATCH GAMES</span><span class="lbl-short">WATCH</span>
</button>
<button id="shopButton" style="background: #004400; color: #0f0; border: 2px solid #0f0; padding: 8px 16px; font-weight: bold; cursor: pointer; margin-top: 5px; margin-left: 10px; display: none;">
🛒 SHOP
html/styles/stylesheet.css
+24 -8
View File
@@ -319,6 +319,9 @@ li.debug {
========================================================================= */
#touch-dpad { display: none; }
/* Short button labels (START / WATCH) are shown only on mobile; see media query. */
.lbl-short { display: none; }
@media (max-width: 820px) {
/* Stack the desktop 3-column grid into a single column.
Rows: header / status / game / CHAT(flex) / input / footer.
@@ -372,6 +375,19 @@ li.debug {
#messageBox { max-height: none; height: 100%; }
.footer { font-size: 9px; padding: 2px 4px; line-height: 1.3; }
/* Use the short labels (START / WATCH) and compact the three primary action
buttons so they share a single row on most phones. */
.lbl-full { display: none; }
.lbl-short { display: inline; }
#startButton, #watchGamesButton, #shopButton {
padding: 7px 6px !important;
font-size: 13px !important;
margin: 5px 0 0 0 !important;
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
}
/* Fixed-width modals would overflow tiny screens — make them fit */
#payment-ui, #history-panel, #leaderboard-panel {
min-width: 0 !important;
@@ -390,26 +406,26 @@ li.debug {
body.touch #touch-dpad { display: grid; }
#touch-dpad {
grid-template-areas: ". up ." "left . right" ". down .";
gap: 8px;
gap: 6px;
position: fixed;
right: 12px;
bottom: 70px;
z-index: 1500;
opacity: 0.55;
opacity: 0.4;
touch-action: none;
}
#touch-dpad button {
width: 54px; height: 54px;
font-size: 22px;
background: rgba(0,40,0,0.85);
width: 44px; height: 44px;
font-size: 17px;
background: rgba(0,40,0,0.5);
color: #0f0;
border: 2px solid #0f0;
border-radius: 10px;
border: 2px solid rgba(0,255,0,0.7);
border-radius: 9px;
padding: 0;
-webkit-user-select: none; user-select: none;
touch-action: manipulation;
}
#touch-dpad button:active { background: #0f0; color: #000; }
#touch-dpad button:active { background: rgba(0,255,0,0.9); color: #000; }
#dpad-up { grid-area: up; }
#dpad-down { grid-area: down; }
#dpad-left { grid-area: left; }