jusemon/threejs-test
1
0
Fork 0
Code Issues Pull requests Releases Packages 1 Activity Actions

Hotfix: No way to pause on mobile
All checks were successful
Build and Publish Docker Image / Build and Validate (pull_request) Successful in 8s
Details

Browse source 
- Added pause button functionality to control game state (pause/resume).
- Updated sound status button visibility and styling for improved user experience.
- Adjusted button styles for better responsiveness and aesthetics on mobile devices.
- Implemented logic to show/hide buttons based on game state transitions.

This update improves gameplay interaction and visual feedback for users.
This commit is contained in:
Juan Sebastián Montoya 2025-11-26 19:16:49 -05:00
parent b793b83c96
commit dc0269503d
2 changed files with 103 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

62
index.html
View file

@ -118,18 +118,57 @@
font-family: 'Courier New', monospace;
}
#soundStatus {
display: none;
position: absolute;
top: 20px;
right: 100px;
font-size: 20px;
right: 90px;
background: rgba(0,0,0,0.7);
border: 2px solid white;
color: white;
font-size: 24px;
padding: 10px 15px;
border-radius: 10px;
cursor: pointer;
z-index: 100;
font-family: Arial, sans-serif;
transition: all 0.2s;
user-select: none;
opacity: 0.8;
transition: opacity 0.2s;
}
#soundStatus:hover {
opacity: 1;
background: rgba(0,0,0,0.9);
transform: scale(1.1);
}
#soundStatus:active {
transform: scale(0.95);
}
#pauseBtn {
display: none;
position: absolute;
top: 20px;
right: 20px;
background: rgba(0,0,0,0.7);
border: 2px solid white;
color: white;
font-size: 24px;
padding: 10px 15px;
border-radius: 10px;
cursor: pointer;
z-index: 100;
font-family: Arial, sans-serif;
transition: all 0.2s;
}
#pauseBtn:hover {
background: rgba(0,0,0,0.9);
transform: scale(1.1);
}
#pauseBtn:active {
transform: scale(0.95);
}
/* Show buttons when game is active */
@media (max-width: 768px) {
#pauseBtn {
display: block;
}
}
#perfMonitor {
position: absolute;
@ -162,8 +201,15 @@
}
#soundStatus {
top: 10px;
right: 60px;
font-size: 18px;
right: 80px;
font-size: 20px;
padding: 8px 12px;
}
#pauseBtn {
top: 10px;
right: 10px;
font-size: 20px;
padding: 8px 12px;
}
#perfMonitor {
top: 40px;
@ -186,6 +232,8 @@
<div id="soundStatus" title="Sound ON (Press M to mute)">🔊</div>
<button id="pauseBtn" title="Pause Game">⏸️</button>
<div id="perfMonitor">
<div><span class="label">FPS:</span> <span id="fps">60</span></div>
<div><span class="label">Frame:</span> <span id="frameTime">16.7</span>ms</div>