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.
201 lines
6.6 KiB
HTML
201 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HUD Three-Mode Toggle Test (HTML)</title>
|
|
<link rel="stylesheet" href="public/break_escape/css/hud.css">
|
|
<link rel="stylesheet" href="public/break_escape/css/inventory.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #222;
|
|
font-family: 'VT323', monospace;
|
|
color: white;
|
|
}
|
|
|
|
#info-panel {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 20px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
padding: 20px;
|
|
border: 2px solid #666;
|
|
max-width: 400px;
|
|
z-index: 2000;
|
|
}
|
|
|
|
#info-panel h2 {
|
|
margin-top: 0;
|
|
color: #0f0;
|
|
}
|
|
|
|
#info-panel ul {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
#info-panel li {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
#current-mode {
|
|
font-size: 24px;
|
|
color: #0cf;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.key {
|
|
display: inline-block;
|
|
background: #444;
|
|
padding: 2px 8px;
|
|
border: 2px solid #666;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
#game-canvas {
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Game container styling */
|
|
#game-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#loading {
|
|
color: #0f0;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* UI Layout:
|
|
* - HUD (avatar + mode toggle): Bottom-left, horizontal row
|
|
* - Inventory: Bottom-center, horizontal bar
|
|
* - Health: Top-left, vertical stack
|
|
*/
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="info-panel">
|
|
<h2>🎮 HUD Three-Mode Toggle Test (HTML)</h2>
|
|
<p><strong>Current Mode:</strong> <span id="current-mode">interact</span></p>
|
|
<h3>Instructions:</h3>
|
|
<ul>
|
|
<li>Press <span class="key">Q</span> to toggle modes</li>
|
|
<li>Click mode button (bottom-right) to toggle</li>
|
|
<li>Click avatar button to open settings</li>
|
|
<li>Watch the hand animation transition!</li>
|
|
</ul>
|
|
<h3>Mode Cycle:</h3>
|
|
<ul>
|
|
<li><strong>INTERACT</strong> (🖐️ Green) - Normal interaction
|
|
<br><em style="font-size: 14px; color: #888;">Auto-jabs chairs & hostile NPCs</em>
|
|
</li>
|
|
<li><strong>JAB</strong> (👊 Cyan) - Fast, weak punch (10 dmg)</li>
|
|
<li><strong>CROSS</strong> (🥊 Red) - Slow, powerful punch (25 dmg)</li>
|
|
</ul>
|
|
<h3>New Features:</h3>
|
|
<p style="font-size: 14px; color: #0f0;">
|
|
✅ HTML-based HUD elements<br>
|
|
✅ Player avatar/headshot button<br>
|
|
✅ Animated hand transitions using Phaser<br>
|
|
✅ Better integration with inventory
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Game Container (required by Phaser) -->
|
|
<div id="game-container">
|
|
<div id="loading">Loading...</div>
|
|
</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>
|
|
|
|
<!-- Inventory container (required by game) -->
|
|
<div id="inventory-container"></div>
|
|
|
|
<!-- Health UI container (required by combat system) -->
|
|
<div id="health-ui-container"></div>
|
|
|
|
<script type="module">
|
|
// Wait for DOM to be fully ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initializeTest);
|
|
} else {
|
|
initializeTest();
|
|
}
|
|
|
|
function initializeTest() {
|
|
console.log('🔍 DOM ready, checking HUD elements...');
|
|
console.log(' avatar button:', !!document.getElementById('hud-avatar-button'));
|
|
console.log(' mode toggle:', !!document.getElementById('hud-mode-toggle-button'));
|
|
console.log(' hand canvas:', !!document.getElementById('hud-hand-canvas'));
|
|
|
|
import('./public/break_escape/js/main.js').then(({ game }) => {
|
|
|
|
// Set up a simple test scenario
|
|
window.gameScenario = {
|
|
"scenario_brief": "HUD Test Scenario",
|
|
"endGoal": "Test the three-mode interaction toggle with HTML elements",
|
|
"startRoom": "test_room",
|
|
"rooms": {
|
|
"test_room": {
|
|
"type": "small_room_1x1gu",
|
|
"connections": {},
|
|
"objects": []
|
|
}
|
|
}
|
|
};
|
|
|
|
// Mock config for testing
|
|
window.breakEscapeConfig = {
|
|
gameId: 'test',
|
|
demoMode: true,
|
|
playerSprite: 'male_hacker', // Set default sprite for avatar
|
|
assetsPath: 'public/break_escape/assets'
|
|
};
|
|
|
|
// Listen for mode changes and update info panel
|
|
setInterval(() => {
|
|
if (window.playerCombat) {
|
|
const currentMode = window.playerCombat.getInteractionMode();
|
|
document.getElementById('current-mode').textContent = currentMode.toUpperCase();
|
|
|
|
// Update color based on mode
|
|
const modeEl = document.getElementById('current-mode');
|
|
switch(currentMode) {
|
|
case 'interact':
|
|
modeEl.style.color = '#0f0';
|
|
break;
|
|
case 'jab':
|
|
modeEl.style.color = '#0cf';
|
|
break;
|
|
case 'cross':
|
|
modeEl.style.color = '#f00';
|
|
break;
|
|
}
|
|
}
|
|
}, 100);
|
|
|
|
console.log('🧪 HUD Test initialized (HTML version)');
|
|
console.log('📋 Use Q key or click bottom-left buttons to toggle modes');
|
|
}); // end import callback
|
|
} // end initializeTest
|
|
</script>
|
|
</body>
|
|
</html>
|