mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
307 lines
11 KiB
HTML
307 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Phaser Lockpicking Test</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: #1a1a1a;
|
|
color: #ffffff;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
background: #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.test-container h1 {
|
|
text-align: center;
|
|
color: #00ff00;
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.controls-section {
|
|
background: #333;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.controls-section h2 {
|
|
color: #00ff00;
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-size: 14px;
|
|
margin-top: 0;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.control-group {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.control-group label {
|
|
min-width: 120px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.control-group input, .control-group select {
|
|
background: #444;
|
|
border: 1px solid #666;
|
|
color: #fff;
|
|
padding: 5px 10px;
|
|
border-radius: 3px;
|
|
font-family: 'VT323', monospace;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.control-group input[type="range"] {
|
|
flex: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.range-value {
|
|
min-width: 30px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.minigame-container {
|
|
background: #333;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
min-height: 500px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.controls {
|
|
text-align: center;
|
|
}
|
|
|
|
.btn {
|
|
background: #00ff00;
|
|
color: #000;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-size: 12px;
|
|
margin: 5px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #00cc00;
|
|
}
|
|
|
|
.btn:disabled {
|
|
background: #666;
|
|
color: #999;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.status {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
font-size: 16px;
|
|
color: #00ff00;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>Phaser Lockpicking Minigame Test</h1>
|
|
|
|
<div class="controls-section">
|
|
<h2>Game Parameters</h2>
|
|
<div class="control-group">
|
|
<label for="pinCount">Pin Count:</label>
|
|
<input type="range" id="pinCount" min="3" max="8" value="5" step="1">
|
|
<span class="range-value" id="pinCountValue">5</span>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="difficulty">Difficulty:</label>
|
|
<select id="difficulty">
|
|
<option value="easy">Easy</option>
|
|
<option value="medium" selected>Medium</option>
|
|
<option value="hard">Hard</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="lockable">Lockable ID:</label>
|
|
<input type="text" id="lockable" value="test-lock" placeholder="Enter lockable ID">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="thresholdSensitivity">Threshold Sensitivity:</label>
|
|
<input type="range" id="thresholdSensitivity" min="1" max="10" value="5" step="1">
|
|
<span class="range-value" id="thresholdSensitivityValue">5</span>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="liftSpeed">Lift Speed:</label>
|
|
<input type="range" id="liftSpeed" min="0.5" max="5" value="1" step="0.1">
|
|
<span class="range-value" id="liftSpeedValue">1.0</span>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="highlightBindingOrder">Highlight Binding Order:</label>
|
|
<select id="highlightBindingOrder">
|
|
<option value="true" selected>Enabled</option>
|
|
<option value="false">Disabled</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="highlightPinAlignment">Highlight Pin Alignment:</label>
|
|
<select id="highlightPinAlignment">
|
|
<option value="true" selected>Enabled</option>
|
|
<option value="false">Disabled</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="minigame-container" id="test-container">
|
|
<!-- Minigame will be loaded here -->
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="btn" id="startBtn" onclick="startTest()">Start Test</button>
|
|
<button class="btn" id="stopBtn" onclick="stopTest()" disabled>Stop Test</button>
|
|
</div>
|
|
|
|
<div class="status" id="status">Ready to start</div>
|
|
</div>
|
|
|
|
<!-- Load Phaser.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
|
|
|
|
<!-- Load minigame framework -->
|
|
<script type="module">
|
|
import { MinigameFramework } from './js/minigames/index.js';
|
|
|
|
let testMinigame = null;
|
|
|
|
// Update range value displays
|
|
function updateRangeValue(rangeId, valueId) {
|
|
const range = document.getElementById(rangeId);
|
|
const value = document.getElementById(valueId);
|
|
value.textContent = range.value;
|
|
}
|
|
|
|
// Initialize range value displays
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateRangeValue('pinCount', 'pinCountValue');
|
|
updateRangeValue('thresholdSensitivity', 'thresholdSensitivityValue');
|
|
updateRangeValue('liftSpeed', 'liftSpeedValue');
|
|
|
|
// Add event listeners for range inputs
|
|
document.getElementById('pinCount').addEventListener('input', function() {
|
|
updateRangeValue('pinCount', 'pinCountValue');
|
|
});
|
|
|
|
document.getElementById('thresholdSensitivity').addEventListener('input', function() {
|
|
updateRangeValue('thresholdSensitivity', 'thresholdSensitivityValue');
|
|
});
|
|
|
|
document.getElementById('liftSpeed').addEventListener('input', function() {
|
|
updateRangeValue('liftSpeed', 'liftSpeedValue');
|
|
});
|
|
});
|
|
|
|
window.startTest = function() {
|
|
if (testMinigame) {
|
|
testMinigame.cleanup();
|
|
}
|
|
|
|
const container = document.getElementById('test-container');
|
|
container.setAttribute('data-external', 'true');
|
|
|
|
// Get parameters from controls
|
|
const pinCount = parseInt(document.getElementById('pinCount').value);
|
|
const difficulty = document.getElementById('difficulty').value;
|
|
const lockable = document.getElementById('lockable').value || 'test-lock';
|
|
const thresholdSensitivity = parseInt(document.getElementById('thresholdSensitivity').value);
|
|
const liftSpeed = parseFloat(document.getElementById('liftSpeed').value);
|
|
const highlightBindingOrder = document.getElementById('highlightBindingOrder').value === 'true';
|
|
const highlightPinAlignment = document.getElementById('highlightPinAlignment').value === 'true';
|
|
|
|
// Update UI
|
|
document.getElementById('startBtn').disabled = true;
|
|
document.getElementById('stopBtn').disabled = false;
|
|
const alignmentText = highlightPinAlignment ? 'with' : 'without';
|
|
const bindingText = highlightBindingOrder ? 'with' : 'without';
|
|
document.getElementById('status').textContent = `Starting with ${pinCount} pins, ${difficulty} difficulty, sensitivity ${thresholdSensitivity}, lift speed ${liftSpeed}, ${alignmentText} alignment highlighting, ${bindingText} binding hints...`;
|
|
|
|
testMinigame = MinigameFramework.startMinigame('lockpicking', container, {
|
|
lockable: lockable,
|
|
difficulty: difficulty,
|
|
pinCount: pinCount,
|
|
thresholdSensitivity: thresholdSensitivity,
|
|
liftSpeed: liftSpeed,
|
|
highlightBindingOrder: highlightBindingOrder,
|
|
highlightPinAlignment: highlightPinAlignment,
|
|
onComplete: (success, result) => {
|
|
const status = document.getElementById('status');
|
|
if (success) {
|
|
status.textContent = `Success! Lock picked in ${result.time || 'unknown'} seconds`;
|
|
status.style.color = '#00ff00';
|
|
} else {
|
|
status.textContent = 'Failed to pick lock';
|
|
status.style.color = '#ff0000';
|
|
}
|
|
|
|
// Re-enable start button
|
|
document.getElementById('startBtn').disabled = false;
|
|
document.getElementById('stopBtn').disabled = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
window.stopTest = function() {
|
|
if (testMinigame) {
|
|
testMinigame.complete(false);
|
|
testMinigame = null;
|
|
}
|
|
|
|
// Update UI
|
|
document.getElementById('startBtn').disabled = false;
|
|
document.getElementById('stopBtn').disabled = true;
|
|
document.getElementById('status').textContent = 'Test stopped';
|
|
document.getElementById('status').style.color = '#ffffff';
|
|
};
|
|
|
|
// Auto-start the test after a delay
|
|
setTimeout(() => {
|
|
startTest();
|
|
}, 1000);
|
|
</script>
|
|
</body>
|
|
</html> |