cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-20 13:50:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance game UI with improved loading display and mobile touch handling

Browse Source
This commit is contained in:
Z. Cliffe Schreuders
2025-11-21 15:27:54 +00:00
parent 5b11fa9dbb
commit 3acaa62c26
3 changed files with 37 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/views/break_escape/games/show.html.erb
View File

@@ -47,19 +47,14 @@
<link rel="stylesheet" href="/break_escape/css/rfid-minigame.css">
<link rel="stylesheet" href="/break_escape/css/npc-interactions.css">
<link rel="stylesheet" href="/break_escape/css/pin.css">
<link rel="stylesheet" href="/break_escape/css/minigames-framework.css">
<link rel="stylesheet" href="/break_escape/css/password-minigame.css">
<link rel="stylesheet" href="/break_escape/css/text-file-minigame.css">
<link rel="stylesheet" href="/break_escape/css/npc-barks.css">
<link rel="stylesheet" href="/break_escape/css/title-screen.css">
<link rel="stylesheet" href="/break_escape/css/inventory.css">
</head>
<body>
<%# Game container - Phaser will render here %>
<div id="game-container"></div>
<%# Loading indicator %>
<div id="loading" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #00ff00; font-size: 24px; display: block;">
Loading game...
<div id="game-container">
<div id="loading">Loading...</div>
</div>
<%# Notification System %>
@@ -126,5 +121,31 @@
<%# Load game JavaScript (ES6 module) %>
<script type="module" src="/break_escape/js/main.js" nonce="<%= content_security_policy_nonce %>"></script>
<%# Mobile touch handling %>
<script>
// Allow zooming on mobile devices
document.addEventListener('DOMContentLoaded', function() {
// Prevent Phaser from capturing touch events that should be used for zooming
const gameContainer = document.getElementById('game-container');
// Allow zooming on the document level
document.addEventListener('gesturestart', function(e) {
e.preventDefault();
});
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
});
// Prevent default touch behavior only within the game container
gameContainer.addEventListener('touchmove', function(e) {
// Only prevent default if it's not a multi-touch gesture (like pinch-to-zoom)
if (e.touches.length <= 1) {
e.preventDefault();
}
}, { passive: false });
});
</script>
</body>
</html>

8
public/break_escape/css/hud.css
View File

@@ -18,9 +18,9 @@
align-items: center;
justify-content: center;
padding: 12px 16px;
background: rgba(0, 0, 0, 0.8);
border: 2px solid #333;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9), inset 0 0 5px rgba(0, 0, 0, 0.5);
/* background: rgba(0, 0, 0, 0.5); */
/* border: 2px solid #333; */
/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.9), inset 0 0 5px rgba(0, 0, 0, 0.5); */
}
.health-heart {
@@ -76,7 +76,7 @@
justify-content: center;
align-items: center;
position: relative;
background: transparent; /* keep slot outlines but no filled background per user request */
background: rgb(149 157 216 / 80%);
}
/* Pulse animation for newly added items */

6
public/break_escape/css/main.css
View File

@@ -2,10 +2,12 @@
body {
margin: 0;
padding: 0;
display: block;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #333;
font-smooth: never;
overflow: hidden;
}
#game-container {