feat: Implement keyboard input pause/resume functionality for minigames

This commit is contained in:
Z. Cliffe Schreuders
2025-10-28 22:45:41 +00:00
parent f8068ecadd
commit 81d762685d
5 changed files with 215 additions and 1 deletions

View File

@@ -27,6 +27,27 @@ const keyboardInput = {
};
let isKeyboardMoving = false;
// Keyboard pause state (for when minigames need keyboard input)
let keyboardPaused = false;
// Export functions to pause/resume keyboard interception
export function pauseKeyboardInput() {
keyboardPaused = true;
console.log('🔒 Keyboard input PAUSED for minigame (keyboardPaused = true)');
}
export function resumeKeyboardInput() {
keyboardPaused = false;
// Clear all keyboard state when resuming
keyboardInput.up = false;
keyboardInput.down = false;
keyboardInput.left = false;
keyboardInput.right = false;
keyboardInput.space = false;
isKeyboardMoving = false;
console.log('🔓 Keyboard input RESUMED (keyboardPaused = false)');
}
// Create player sprite
export function createPlayer(gameInstance) {
gameRef = gameInstance;
@@ -82,6 +103,12 @@ export function createPlayer(gameInstance) {
function setupKeyboardInput() {
// Handle keydown events
document.addEventListener('keydown', (event) => {
// Skip if keyboard input is paused (for minigames that need keyboard input)
if (keyboardPaused) {
console.log('⏸️ Keydown blocked (paused):', event.key);
return;
}
const key = event.key.toLowerCase();
// Spacebar for jump
@@ -144,6 +171,11 @@ function setupKeyboardInput() {
// Handle keyup events
document.addEventListener('keyup', (event) => {
// Skip if keyboard input is paused (for minigames that need keyboard input)
if (keyboardPaused) {
return;
}
const key = event.key.toLowerCase();
// Spacebar
@@ -572,4 +604,12 @@ function getStartingRoomCenter(startRoomId) {
}
// Export for global access
window.createPlayer = createPlayer;
window.createPlayer = createPlayer;
window.pauseKeyboardInput = pauseKeyboardInput;
window.resumeKeyboardInput = resumeKeyboardInput;
console.log('✅ Player module loaded - keyboard control functions exported to window:', {
createPlayer: typeof window.createPlayer,
pauseKeyboardInput: typeof window.pauseKeyboardInput,
resumeKeyboardInput: typeof window.resumeKeyboardInput
});

View File

@@ -24,6 +24,31 @@ export const MinigameFramework = {
this.endMinigame(false, null);
}
// Check if this minigame requires keyboard input
const requiresKeyboardInput = params?.requiresKeyboardInput || false;
console.log('🎮 Starting minigame:', sceneType, 'requiresKeyboardInput:', requiresKeyboardInput);
// Pause keyboard input for game controls if minigame needs keyboard
if (requiresKeyboardInput) {
console.log('🔍 Checking for window.pauseKeyboardInput...');
// Try to access player module functions from window first (already loaded)
if (window.pauseKeyboardInput) {
console.log('✅ Found window.pauseKeyboardInput, calling it now...');
window.pauseKeyboardInput();
console.log('✅ Paused keyboard input for minigame that requires text input');
} else {
console.warn('⚠️ window.pauseKeyboardInput not found, trying dynamic import...');
// Fallback to dynamic import if not available on window
import('../../../js/core/player.js').then(module => {
if (module.pauseKeyboardInput) {
module.pauseKeyboardInput();
console.log('Paused keyboard input for minigame that requires text input (via import)');
}
});
}
}
// Disable main game input if we have a main game scene
// (unless the minigame explicitly allows game input via disableGameInput: false)
if (this.mainGameScene && this.mainGameScene.input) {
@@ -83,6 +108,20 @@ export const MinigameFramework = {
container.remove();
}
// Resume keyboard input for game controls
if (window.resumeKeyboardInput) {
window.resumeKeyboardInput();
console.log('Resumed keyboard input after minigame ended');
} else {
// Fallback to dynamic import if not available on window
import('../../../js/core/player.js').then(module => {
if (module.resumeKeyboardInput) {
module.resumeKeyboardInput();
console.log('Resumed keyboard input after minigame ended (via import)');
}
});
}
// Re-enable main game input if we have a main game scene and we disabled it
if (this.mainGameScene && this.mainGameScene.input && this.gameInputDisabled) {
this.mainGameScene.input.mouse.enabled = true;

View File

@@ -712,6 +712,7 @@ export function startNotesMinigame(item, noteContent, observationText, navigateT
autoAddToNotes: autoAddToNotes, // Automatically add notes to the notes system
navigateToNote: navigateToNote, // Which note to navigate to
hideNavigation: hideNavigation, // Whether to hide navigation buttons
requiresKeyboardInput: true, // Notes minigame has editable observations and search
onComplete: (success, result) => {
if (success && result && result.addedToInventory) {
console.log('NOTES SUCCESS - Added to inventory', result);

View File

@@ -579,6 +579,7 @@ export function startPasswordMinigame(lockable, type, correctPassword, callback,
postitNote: options.postitNote || '',
showPostit: options.showPostit || false,
lockable: lockable,
requiresKeyboardInput: true, // Password minigame needs keyboard for text input
onComplete: (success, result) => {
if (success) {
console.log('PASSWORD MINIGAME SUCCESS');

133
test-keyboard-pause.html Normal file
View File

@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Keyboard Pause</title>
<style>
body {
font-family: monospace;
padding: 20px;
}
.log {
background: #f0f0f0;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
max-height: 300px;
overflow-y: auto;
}
button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
}
input {
padding: 10px;
font-size: 16px;
margin: 10px 0;
width: 300px;
}
.status {
padding: 10px;
margin: 10px 0;
font-weight: bold;
}
.status.paused {
background: #ffcccc;
color: #cc0000;
}
.status.active {
background: #ccffcc;
color: #00cc00;
}
</style>
</head>
<body>
<h1>Keyboard Pause Test</h1>
<div class="status active" id="status">Keyboard Active</div>
<div>
<button onclick="pauseKeyboard()">Pause Keyboard</button>
<button onclick="resumeKeyboard()">Resume Keyboard</button>
<button onclick="clearLog()">Clear Log</button>
</div>
<div>
<h3>Test typing WASD in this input:</h3>
<input type="text" id="testInput" placeholder="Type WASD here...">
</div>
<div>
<h3>Event Log:</h3>
<div class="log" id="log"></div>
</div>
<script type="module">
// Simulate the player keyboard system
let keyboardPaused = false;
function log(message, isError = false) {
const logDiv = document.getElementById('log');
const entry = document.createElement('div');
entry.style.color = isError ? 'red' : 'black';
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
logDiv.appendChild(entry);
logDiv.scrollTop = logDiv.scrollHeight;
}
function updateStatus() {
const statusDiv = document.getElementById('status');
if (keyboardPaused) {
statusDiv.textContent = '🔒 Keyboard PAUSED';
statusDiv.className = 'status paused';
} else {
statusDiv.textContent = '✅ Keyboard ACTIVE';
statusDiv.className = 'status active';
}
}
window.pauseKeyboard = function() {
keyboardPaused = true;
log('🔒 Keyboard PAUSED');
updateStatus();
};
window.resumeKeyboard = function() {
keyboardPaused = false;
log('🔓 Keyboard RESUMED');
updateStatus();
};
window.clearLog = function() {
document.getElementById('log').innerHTML = '';
};
// Simulate player keydown handler
document.addEventListener('keydown', (event) => {
const key = event.key.toLowerCase();
// Check if it's a game control key
if (['w', 'a', 's', 'd', 'e', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(key)) {
if (keyboardPaused) {
log(`⏸️ Game key "${event.key}" blocked (keyboard paused) - event should pass to input`, false);
return; // Don't prevent default, let it go to the input
} else {
log(`🎮 Game key "${event.key}" intercepted - moving player`, false);
event.preventDefault(); // Prevent default for game controls
return;
}
}
});
// Log when text input receives keys
document.getElementById('testInput').addEventListener('keydown', (event) => {
log(`📝 Input received: "${event.key}"`, false);
});
log('Test initialized. Try typing WASD with keyboard paused vs active.');
updateStatus();
</script>
</body>
</html>