mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
7cdcc354c1
- Added hand frames PNG for interaction modes. - Updated HUD CSS to support new player HUD buttons and styles. - Enhanced combat configuration to define interaction modes: interact, jab, and cross. - Integrated player HUD creation and management in the game core. - Improved player combat system to handle interaction modes and associated animations. - Modified interaction handling to auto-switch modes for chairs and hostile NPCs. - Updated health UI to always display health status. - Created a new HUD JavaScript module to manage avatar and interaction mode toggle. - Added a test HTML file for the three-mode toggle functionality.
153 lines
6.7 KiB
HTML
153 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
|
||
<title>Break Escape Game</title>
|
||
|
||
<!-- Google Fonts - Press Start 2P, VT323, Pixelify Sans -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Web Font Loader script to ensure fonts load properly -->
|
||
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
|
||
<script>
|
||
WebFont.load({
|
||
google: {
|
||
families: ['Press Start 2P', 'VT323', 'Pixelify Sans']
|
||
},
|
||
active: function() {
|
||
console.log('Fonts loaded successfully');
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- CSS Files -->
|
||
<link rel="stylesheet" href="public/break_escape/css/main.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/utilities.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/notifications.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/panels.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/hud.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/objectives.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/minigames-framework.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/dusting.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/lockpicking.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/modals.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/notes.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/bluetooth-scanner.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/biometrics-minigame.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/container-minigame.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/phone-chat-minigame.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/person-chat-minigame.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/rfid-minigame.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/npc-interactions.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/pin.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/password-minigame.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/text-file-minigame.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/npc-barks.css">
|
||
<link rel="stylesheet" href="public/break_escape/css/tutorial.css">
|
||
|
||
<!-- External JavaScript libraries -->
|
||
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/easystarjs@0.4.4/bin/easystar-0.4.4.js"></script>
|
||
<script src="assets/vendor/ink.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="game-container">
|
||
<div id="loading">Loading...</div>
|
||
</div>
|
||
|
||
<!-- Notification System -->
|
||
<div id="notification-container"></div>
|
||
|
||
<!-- Player HUD Container -->
|
||
<div id="player-hud-container">
|
||
<div id="hud-avatar-button" class="hud-button" title="Player Settings">
|
||
<img id="hud-avatar-img" src="" alt="Player" />
|
||
</div>
|
||
<div id="hud-mode-toggle-button" class="hud-button" title="Interaction Mode (Q to toggle)">
|
||
<canvas id="hud-hand-canvas" width="64" height="64"></canvas>
|
||
<span id="hud-mode-label">INTERACT</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toggle Buttons Container -->
|
||
<div id="toggle-buttons-container">
|
||
<!-- Biometrics is now handled as a minigame -->
|
||
</div>
|
||
|
||
<!-- Inventory Container -->
|
||
<div id="inventory-container"></div>
|
||
|
||
<!-- Laptop Popup -->
|
||
<div id="laptop-popup">
|
||
<div class="laptop-frame">
|
||
<div class="laptop-screen">
|
||
<div class="title-bar">
|
||
<span>Crypto Workstation</span>
|
||
<button class="minigame-open-new-tab-button" onclick="openCryptoWorkstationInNewTab()" title="Open in new tab">↑</button>
|
||
<button class="minigame-close-button" onclick="closeLaptop()">×</button>
|
||
</div>
|
||
<div id="cyberchef-container">
|
||
<iframe id="cyberchef-frame" src=""></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Password Modal -->
|
||
<div id="password-modal">
|
||
<div class="password-modal-content">
|
||
<div class="password-modal-title">
|
||
Enter Password
|
||
</div>
|
||
<input id="password-modal-input" type="password" autocomplete="off" autofocus>
|
||
<div class="password-modal-checkbox-container">
|
||
<input type="checkbox" id="password-modal-show">
|
||
<label for="password-modal-show" class="password-modal-checkbox-label">Show password</label>
|
||
</div>
|
||
<div class="password-modal-buttons">
|
||
<button id="password-modal-ok" class="password-modal-button">OK</button>
|
||
<button id="password-modal-cancel" class="password-modal-button">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Popup Overlay -->
|
||
<div class="popup-overlay"></div>
|
||
|
||
<!-- Main Game JavaScript Module -->
|
||
<script type="module" src="js/main.js?v=47"></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> |