mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
592 lines
23 KiB
HTML
592 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lockpicking Key Mode Demo</title>
|
|
|
|
<!-- Google Fonts - Press Start 2P, VT323 -->
|
|
<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">
|
|
|
|
<!-- 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']
|
|
},
|
|
active: function() {
|
|
console.log('Fonts loaded successfully');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'VT323', monospace;
|
|
background: #333;
|
|
color: #ffffff;
|
|
margin: 0;
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
/* Remove text-align center to prevent canvas positioning issues */
|
|
}
|
|
|
|
.page-wrapper {
|
|
text-align: center;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
background: rgba(0, 0, 0, 0.95);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
border: 2px solid #444;
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
|
|
color: #00ff00;
|
|
}
|
|
|
|
.title {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 24px;
|
|
margin-bottom: 15px;
|
|
text-shadow: 0 0 10px #00ff00;
|
|
}
|
|
|
|
.description {
|
|
font-size: 18px;
|
|
margin-bottom: 20px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.demo-container {
|
|
background: rgba(0, 0, 0, 0.95);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
border: 2px solid #444;
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.game-container {
|
|
background: #1a1a1a;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
min-height: 400px;
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.key-preset {
|
|
background: #444;
|
|
color: #00ff00;
|
|
border: 2px solid #00ff00;
|
|
padding: 10px 15px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-family: 'VT323', monospace;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.key-preset:hover {
|
|
background: #00ff00;
|
|
color: #000;
|
|
}
|
|
|
|
.key-preset.active {
|
|
background: #00ff00;
|
|
color: #000;
|
|
}
|
|
|
|
.mode-toggle {
|
|
background: #666;
|
|
color: #fff;
|
|
border: 2px solid #666;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-family: 'VT323', monospace;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.mode-toggle:hover {
|
|
background: #888;
|
|
}
|
|
|
|
.mode-toggle.active {
|
|
background: #00ff00;
|
|
color: #000;
|
|
border-color: #00ff00;
|
|
}
|
|
|
|
.key-info {
|
|
background: #2a2a2a;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
border: 1px solid #444;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.key-info h3 {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 14px;
|
|
margin: 0 0 10px 0;
|
|
color: #00ff00;
|
|
}
|
|
|
|
.key-cuts {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.cut-indicator {
|
|
background: #333;
|
|
border: 1px solid #666;
|
|
padding: 5px 10px;
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
min-width: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.instructions {
|
|
background: #2a2a2a;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
border: 1px solid #444;
|
|
text-align: left;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.instructions h3 {
|
|
font-family: 'Press Start 2P', monospace;
|
|
font-size: 14px;
|
|
margin: 0 0 10px 0;
|
|
color: #00ff00;
|
|
}
|
|
|
|
.instructions ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.instructions li {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.feedback {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: #00ff00;
|
|
padding: 10px 15px;
|
|
border-radius: 5px;
|
|
margin: 10px 0;
|
|
font-family: 'VT323', monospace;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
border: 1px solid #00ff00;
|
|
min-height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
|
}
|
|
|
|
/* Prevent canvas positioning issues */
|
|
canvas {
|
|
display: block !important;
|
|
margin: 0 auto !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
#gameContainer {
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page-wrapper">
|
|
<div class="header">
|
|
<div class="title">🔑 LOCKPICKING KEY MODE DEMO 🔑</div>
|
|
<div class="description">
|
|
Test the new key mode functionality! Key mode now starts with a selection of 3 random keys to choose from.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-container">
|
|
<div class="controls">
|
|
<button class="mode-toggle active" id="keyModeToggle">Key Mode</button>
|
|
<button class="mode-toggle" id="pickModeToggle">Pick Mode</button>
|
|
</div>
|
|
|
|
<div class="key-info" id="keyInfo">
|
|
<h3>Current Key</h3>
|
|
<div class="key-cuts" id="keyCuts">
|
|
<div class="cut-indicator">25%</div>
|
|
<div class="cut-indicator">50%</div>
|
|
<div class="cut-indicator">75%</div>
|
|
<div class="cut-indicator">30%</div>
|
|
<div class="cut-indicator">60%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="key-preset active" data-key="key1">Key 1 (Correct)</div>
|
|
<div class="key-preset" data-key="key2">Key 2 (Wrong)</div>
|
|
<div class="key-preset" data-key="key3">Key 3 (Partial)</div>
|
|
<div class="key-preset" data-key="key4">Key 4 (Random)</div>
|
|
<div class="key-preset" data-key="key5">Key 5 (Deep)</div>
|
|
<div class="key-preset" data-key="key6">Key 6 (Shallow)</div>
|
|
<div class="key-preset" data-key="key7">Key 7 (Mixed)</div>
|
|
<div class="key-preset" data-key="key8">Key 8 (Reverse)</div>
|
|
<button class="key-preset" id="keySelectionToggle">🎲 Random Key Selection</button>
|
|
</div>
|
|
|
|
<div class="game-container">
|
|
<div id="gameContainer"></div>
|
|
<div class="feedback" id="feedback">Select a key from the options above to begin</div>
|
|
</div>
|
|
|
|
<div class="demo-container">
|
|
<div class="instructions">
|
|
<h3>How to Use</h3>
|
|
<ul>
|
|
<li><strong>Key Mode:</strong> Automatically shows 3 random keys to choose from (one correct)</li>
|
|
<li><strong>Key Selection:</strong> Click any key to select it and automatically insert it into the lock</li>
|
|
<li><strong>Random Key Selection:</strong> Click "🎲 Random Key Selection" to generate new random keys</li>
|
|
<li><strong>Pick Mode:</strong> Use the tension wrench and hook pick to manually pick the lock</li>
|
|
<li><strong>Key Cuts:</strong> The numbers show the depth of each cut as a percentage (0-100%)</li>
|
|
<li><strong>Success:</strong> When the key cuts match the pin heights, the lock will unlock</li>
|
|
<li><strong>Failure:</strong> Wrong keys will flash the lock red and show key selection again</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
|
|
<script type="module">
|
|
import { LockpickingMinigamePhaser } from './js/minigames/lockpicking/lockpicking-game-phaser.js';
|
|
|
|
class KeyDemo {
|
|
constructor() {
|
|
this.currentGame = null;
|
|
this.currentMode = 'key';
|
|
this.currentKey = 'key1';
|
|
this.keySelectionMode = false;
|
|
|
|
// Key presets with different cut patterns
|
|
this.keyPresets = {
|
|
key1: {
|
|
name: "Key 1 (Correct)",
|
|
cuts: [35, 50, 65, 40, 55], // This will be overridden by auto-generation
|
|
description: "This key is auto-generated to match the actual pin heights"
|
|
},
|
|
key2: {
|
|
name: "Key 2 (Wrong)",
|
|
cuts: [25, 30, 35, 40, 45],
|
|
description: "This key has cuts that don't match the pins"
|
|
},
|
|
key3: {
|
|
name: "Key 3 (Partial)",
|
|
cuts: [35, 50, 65, 45, 55],
|
|
description: "This key has some correct cuts but not all"
|
|
},
|
|
key4: {
|
|
name: "Key 4 (Random)",
|
|
cuts: [28, 48, 62, 38, 52],
|
|
description: "Random cut pattern - might work by chance"
|
|
},
|
|
key5: {
|
|
name: "Key 5 (Deep)",
|
|
cuts: [60, 63, 65, 62, 61],
|
|
description: "Very deep cuts - probably too deep"
|
|
},
|
|
key6: {
|
|
name: "Key 6 (Shallow)",
|
|
cuts: [25, 26, 27, 28, 29],
|
|
description: "Very shallow cuts - not deep enough"
|
|
},
|
|
key7: {
|
|
name: "Key 7 (Mixed)",
|
|
cuts: [40, 52, 60, 35, 58],
|
|
description: "Similar cuts but slightly off in each position"
|
|
},
|
|
key8: {
|
|
name: "Key 8 (Reverse)",
|
|
cuts: [55, 40, 65, 50, 35],
|
|
description: "Cuts in reverse order - interesting pattern"
|
|
}
|
|
};
|
|
|
|
this.initializeUI();
|
|
this.startGame();
|
|
}
|
|
|
|
initializeUI() {
|
|
// Mode toggle buttons
|
|
document.getElementById('keyModeToggle').addEventListener('click', () => {
|
|
this.setMode('key');
|
|
});
|
|
|
|
document.getElementById('pickModeToggle').addEventListener('click', () => {
|
|
this.setMode('pick');
|
|
});
|
|
|
|
// Key preset buttons
|
|
document.querySelectorAll('.key-preset[data-key]').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
this.setKey(button.dataset.key);
|
|
});
|
|
});
|
|
|
|
// Key selection toggle button
|
|
document.getElementById('keySelectionToggle').addEventListener('click', () => {
|
|
this.toggleKeySelection();
|
|
});
|
|
}
|
|
|
|
setMode(mode) {
|
|
this.currentMode = mode;
|
|
|
|
// Update button states
|
|
document.getElementById('keyModeToggle').classList.toggle('active', mode === 'key');
|
|
document.getElementById('pickModeToggle').classList.toggle('active', mode === 'pick');
|
|
|
|
// Show/hide key info
|
|
document.getElementById('keyInfo').style.display = mode === 'key' ? 'block' : 'none';
|
|
|
|
// Restart game with new mode
|
|
this.startGame();
|
|
}
|
|
|
|
setKey(keyId) {
|
|
this.currentKey = keyId;
|
|
this.keySelectionMode = false;
|
|
|
|
// Update button states
|
|
document.querySelectorAll('.key-preset[data-key]').forEach(button => {
|
|
button.classList.toggle('active', button.dataset.key === keyId);
|
|
});
|
|
|
|
// Update key cuts display
|
|
this.updateKeyDisplay();
|
|
|
|
// Restart game with new key
|
|
if (this.currentMode === 'key') {
|
|
this.startGame();
|
|
}
|
|
}
|
|
|
|
toggleKeySelection() {
|
|
try {
|
|
this.keySelectionMode = !this.keySelectionMode;
|
|
|
|
if (this.keySelectionMode) {
|
|
if (!this.currentGame) {
|
|
throw new Error('No game instance available. Please start the game first.');
|
|
}
|
|
|
|
// Generate new random keys for selection
|
|
this.currentGame.keySelectionMode = true; // Mark that we're in key selection mode
|
|
this.currentGame.keySelection.createKeysForChallenge('correct_key');
|
|
|
|
// Update feedback
|
|
document.getElementById('feedback').textContent =
|
|
"Select the correct key from the 3 new options above";
|
|
} else {
|
|
// Hide key selection UI if it exists
|
|
if (this.currentGame.keySelectionContainer) {
|
|
this.currentGame.keySelectionContainer.destroy();
|
|
this.currentGame.keySelectionContainer = null;
|
|
}
|
|
|
|
// Update feedback
|
|
document.getElementById('feedback').textContent =
|
|
"Key selection mode disabled. Use preset keys or enable random selection.";
|
|
}
|
|
} catch (error) {
|
|
console.error('Error toggling key selection:', error);
|
|
document.getElementById('feedback').textContent = 'Error: ' + error.message;
|
|
}
|
|
}
|
|
|
|
updateKeyDisplay() {
|
|
const keyData = this.keyPresets[this.currentKey];
|
|
const keyCutsContainer = document.getElementById('keyCuts');
|
|
|
|
keyCutsContainer.innerHTML = '';
|
|
|
|
if (this.currentKey === 'key1' && this.currentGame && this.currentGame.keyData) {
|
|
// Show the actual generated cuts for the correct key
|
|
this.currentGame.keyData.cuts.forEach(cut => {
|
|
const cutElement = document.createElement('div');
|
|
cutElement.className = 'cut-indicator';
|
|
cutElement.textContent = cut + '%';
|
|
cutElement.style.backgroundColor = '#00ff00'; // Green for correct key
|
|
keyCutsContainer.appendChild(cutElement);
|
|
});
|
|
} else {
|
|
// Show the preset cuts for other keys
|
|
keyData.cuts.forEach(cut => {
|
|
const cutElement = document.createElement('div');
|
|
cutElement.className = 'cut-indicator';
|
|
cutElement.textContent = cut + '%';
|
|
keyCutsContainer.appendChild(cutElement);
|
|
});
|
|
}
|
|
}
|
|
|
|
startGame() {
|
|
try {
|
|
if (this.currentGame) {
|
|
this.currentGame.cleanup();
|
|
}
|
|
|
|
const params = {
|
|
pinCount: 5,
|
|
difficulty: 'medium',
|
|
thresholdSensitivity: 5,
|
|
highlightBindingOrder: true,
|
|
pinAlignmentHighlighting: true,
|
|
liftSpeed: 1.0,
|
|
lockable: { id: 'key-demo-lock' },
|
|
closeButtonText: 'Reset',
|
|
closeButtonAction: 'reset'
|
|
};
|
|
|
|
// Add key mode parameters if in key mode
|
|
if (this.currentMode === 'key') {
|
|
params.keyMode = true;
|
|
params.skipStartingKey = true; // Skip creating initial key, go straight to selection
|
|
|
|
// For the "correct" key, don't pass keyData so it generates from pins
|
|
// For other keys, use the preset cuts
|
|
if (this.currentKey === 'key1') {
|
|
// Let the game generate the correct key from actual pin heights
|
|
console.log('Using auto-generated correct key from pin heights');
|
|
} else {
|
|
params.keyData = {
|
|
cuts: this.keyPresets[this.currentKey].cuts
|
|
};
|
|
}
|
|
}
|
|
|
|
console.log('Starting game with params:', params);
|
|
|
|
this.currentGame = new LockpickingMinigamePhaser(
|
|
document.getElementById('gameContainer'),
|
|
params
|
|
);
|
|
|
|
this.currentGame.init();
|
|
this.currentGame.start();
|
|
|
|
// If in key mode, automatically show key selection
|
|
if (this.currentMode === 'key') {
|
|
setTimeout(() => {
|
|
// Prepare all preset keys for selection
|
|
const allKeys = Object.values(this.keyPresets).map((preset, index) => ({
|
|
id: `key_${index}`,
|
|
cuts: preset.cuts,
|
|
name: preset.name,
|
|
pinCount: preset.cuts.length
|
|
}));
|
|
|
|
// Start with key selection showing all 8 keys
|
|
this.currentGame.startWithKeySelection(allKeys, 'key_0');
|
|
}, 500); // Small delay to ensure game is fully initialized
|
|
}
|
|
} catch (error) {
|
|
console.error('Error starting game:', error);
|
|
document.getElementById('feedback').textContent = 'Error starting game: ' + error.message;
|
|
}
|
|
|
|
// Update key display after game starts (for auto-generated correct key)
|
|
if (this.currentMode === 'key' && this.currentKey === 'key1') {
|
|
setTimeout(() => {
|
|
this.updateKeyDisplay();
|
|
}, 100); // Small delay to ensure game is initialized
|
|
}
|
|
|
|
// Override the complete method to handle game completion
|
|
const originalComplete = this.currentGame.complete.bind(this.currentGame);
|
|
this.currentGame.complete = (success) => {
|
|
console.log('Game completed with success:', success);
|
|
|
|
if (success) {
|
|
if (this.keySelectionMode) {
|
|
document.getElementById('feedback').textContent =
|
|
"🎉 Success! You selected the correct key!";
|
|
} else {
|
|
document.getElementById('feedback').textContent =
|
|
`🎉 Success! ${this.keyPresets[this.currentKey].name} worked!`;
|
|
}
|
|
} else {
|
|
if (this.keySelectionMode) {
|
|
document.getElementById('feedback').textContent =
|
|
"❌ Failed! Wrong key selected. Try again!";
|
|
} else {
|
|
document.getElementById('feedback').textContent =
|
|
`❌ Failed! ${this.keyPresets[this.currentKey].name} didn't work.`;
|
|
}
|
|
}
|
|
|
|
// Restart after a delay
|
|
setTimeout(() => {
|
|
this.startGame();
|
|
}, 3000);
|
|
|
|
originalComplete(success);
|
|
};
|
|
|
|
// Override the selectKey method to handle key selection feedback
|
|
const originalSelectKey = this.currentGame.selectKey.bind(this.currentGame);
|
|
this.currentGame.selectKey = (selectedIndex, correctIndex, keyData) => {
|
|
// Don't reveal if correct/wrong yet - keep it suspenseful
|
|
document.getElementById('feedback').textContent =
|
|
"🔑 Key selected! Inserting into lock...";
|
|
|
|
originalSelectKey(selectedIndex, correctIndex, keyData);
|
|
};
|
|
|
|
// Update feedback message
|
|
if (this.currentMode === 'key') {
|
|
if (this.keySelectionMode) {
|
|
document.getElementById('feedback').textContent =
|
|
"Select the correct key from the 3 options above";
|
|
} else {
|
|
document.getElementById('feedback').textContent =
|
|
"Select a key from the options above to begin";
|
|
}
|
|
} else {
|
|
document.getElementById('feedback').textContent =
|
|
"Use the tension wrench and hook pick to manually pick the lock";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize the demo when the page loads
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
new KeyDemo();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |