Merge: Combine KeyVisualFeedback into KeyOperations module

This commit is contained in:
Z. Cliffe Schreuders
2025-10-27 16:15:17 +00:00
parent b224f4043d
commit 8077391ba6
3 changed files with 132 additions and 156 deletions

View File

@@ -3,6 +3,7 @@
* KeyOperations
*
* Extracted from lockpicking-game-phaser.js
* Includes key creation, insertion, correctness checking, and visual feedback
* Instantiate with: new KeyOperations(this)
*
* All 'this' references replaced with 'this.parent' to access parent instance state:
@@ -121,7 +122,7 @@ export class KeyOperations {
};
// Create collision rectangles for the key blade surface (after config is set)
this.parent.createKeyBladeCollision();
this.createKeyBladeCollision();
console.log('Key created with config:', this.parent.keyConfig);
}
@@ -174,7 +175,7 @@ export class KeyOperations {
// Snap pins to exact final positions based on key cut dimensions
this.parent.snapPinsToExactPositions();
this.parent.checkKeyCorrectness();
this.checkKeyCorrectness();
}
});
}
@@ -250,5 +251,132 @@ export class KeyOperations {
}, 2000); // Longer delay to show the red flash
}
}
createKeyVisual(keyData, width, height) {
// Create a visual representation of a key for the selection UI by building the actual key and scaling it down
const keyContainer = this.parent.scene.add.container(0, 0);
// Save the original key data before temporarily changing it
const originalKeyData = this.parent.keyData;
// Temporarily set the key data to create the key
this.createKey();
// Get the key group and scale it down
const keyGroup = this.parent.keyGroup;
if (keyGroup) {
// Calculate scale to fit within the selection area
const maxWidth = width - 20; // Leave 10px margin on each side
const maxHeight = height - 20;
// Get the key's current dimensions
const keyBounds = keyGroup.getBounds();
const keyWidth = keyBounds.width;
const keyHeight = keyBounds.height;
// Calculate scale
const scaleX = maxWidth / keyWidth;
const scaleY = maxHeight / keyHeight;
const scale = Math.min(scaleX, scaleY) * 0.9; // Use 90% to leave some margin
// Scale the key group
keyGroup.setScale(scale);
// Center the key in the selection area
const scaledWidth = keyWidth * scale;
const scaledHeight = keyHeight * scale;
const offsetX = (width - scaledWidth) / 2;
const offsetY = (height - scaledHeight) / 2;
// Position the key
keyGroup.setPosition(offsetX, offsetY);
// Add the key group to the container
keyContainer.add(keyGroup);
}
// Restore the original key data
this.parent.keyData = originalKeyData;
return keyContainer;
}
selectKey(selectedIndex, correctIndex, keyData) {
// Handle key selection from the UI
console.log(`Key ${selectedIndex + 1} selected (correct: ${correctIndex + 1})`);
// Close the popup immediately
if (this.parent.keySelectionContainer) {
this.parent.keySelectionContainer.destroy();
}
// Remove any existing key from the scene
if (this.parent.keyGroup) {
this.parent.keyGroup.destroy();
this.parent.keyGroup = null;
}
// Remove any existing click zone
if (this.parent.keyClickZone) {
this.parent.keyClickZone.destroy();
this.parent.keyClickZone = null;
}
// Reset pins to their original positions before creating the new key
this.parent.lockConfig.resetPinsToOriginalPositions();
// Store the original correct key data (this determines if the key is correct)
const originalKeyData = this.parent.keyData;
// Store the selected key data for visual purposes
this.parent.selectedKeyData = keyData;
// Create the visual key with the selected key data
this.parent.keyData = keyData;
this.parent.pinCount = keyData.pinCount;
this.createKey();
// Restore the original key data for correctness checking
this.parent.keyData = originalKeyData;
// Update feedback - don't reveal if correct/wrong yet
this.parent.updateFeedback("Key selected! Inserting into lock...");
// Automatically trigger key insertion after a short delay
setTimeout(() => {
this.startKeyInsertion();
}, 300); // Small delay to let the key appear first
// Update feedback if available
if (this.parent.selectKeyCallback) {
this.parent.selectKeyCallback(selectedIndex, correctIndex, keyData);
}
}
showWrongKeyFeedback() {
// Show visual feedback for wrong key selection
const feedback = this.parent.scene.add.graphics();
feedback.fillStyle(0xff0000, 0.3);
feedback.fillRect(0, 0, 800, 600);
feedback.setDepth(9999);
// Remove feedback after a short delay
this.parent.scene.time.delayedCall(500, () => {
feedback.destroy();
});
}
flashLockRed() {
// Flash the entire lock area red to indicate wrong key
const flash = this.parent.scene.add.graphics();
flash.fillStyle(0xff0000, 0.4); // Red with 40% opacity
flash.fillRect(100, 50, 400, 300); // Cover the entire lock area
flash.setDepth(9998); // High z-index but below other UI elements
// Remove flash after a short delay
this.parent.scene.time.delayedCall(800, () => {
flash.destroy();
});
}
}

View File

@@ -1,148 +0,0 @@
/**
* KeyVisualFeedback
*
* Extracted from lockpicking-game-phaser.js
* Instantiate with: new KeyVisualFeedback(this)
*
* All 'this' references replaced with 'this.parent' to access parent instance state:
* - this.parent.pins (array of pin objects)
* - this.parent.scene (Phaser scene)
* - this.parent.lockId (lock identifier)
* - this.parent.lockState (lock state object)
* etc.
*/
export class KeyVisualFeedback {
constructor(parent) {
this.parent = parent;
}
createKeyVisual(keyData, width, height) {
// Create a visual representation of a key for the selection UI by building the actual key and scaling it down
const keyContainer = this.parent.scene.add.container(0, 0);
// Save the original key data before temporarily changing it
const originalKeyData = this.parent.keyData;
// Temporarily set the key data to create the key
this.parent.keyOps.createKey();
// Get the key group and scale it down
const keyGroup = this.parent.keyGroup;
if (keyGroup) {
// Calculate scale to fit within the selection area
const maxWidth = width - 20; // Leave 10px margin on each side
const maxHeight = height - 20;
// Get the key's current dimensions
const keyBounds = keyGroup.getBounds();
const keyWidth = keyBounds.width;
const keyHeight = keyBounds.height;
// Calculate scale
const scaleX = maxWidth / keyWidth;
const scaleY = maxHeight / keyHeight;
const scale = Math.min(scaleX, scaleY) * 0.9; // Use 90% to leave some margin
// Scale the key group
keyGroup.setScale(scale);
// Center the key in the selection area
const scaledWidth = keyWidth * scale;
const scaledHeight = keyHeight * scale;
const offsetX = (width - scaledWidth) / 2;
const offsetY = (height - scaledHeight) / 2;
// Position the key
keyGroup.setPosition(offsetX, offsetY);
// Add the key group to the container
keyContainer.add(keyGroup);
}
// Restore the original key data
this.parent.keyData = originalKeyData;
return keyContainer;
}
selectKey(selectedIndex, correctIndex, keyData) {
// Handle key selection from the UI
console.log(`Key ${selectedIndex + 1} selected (correct: ${correctIndex + 1})`);
// Close the popup immediately
if (this.parent.keySelectionContainer) {
this.parent.keySelectionContainer.destroy();
}
// Remove any existing key from the scene
if (this.parent.keyGroup) {
this.parent.keyGroup.destroy();
this.parent.keyGroup = null;
}
// Remove any existing click zone
if (this.parent.keyClickZone) {
this.parent.keyClickZone.destroy();
this.parent.keyClickZone = null;
}
// Reset pins to their original positions before creating the new key
this.parent.lockConfig.resetPinsToOriginalPositions();
// Store the original correct key data (this determines if the key is correct)
const originalKeyData = this.parent.keyData;
// Store the selected key data for visual purposes
this.parent.selectedKeyData = keyData;
// Create the visual key with the selected key data
this.parent.keyData = keyData;
this.parent.pinCount = keyData.pinCount;
this.parent.keyOps.createKey();
// Restore the original key data for correctness checking
this.parent.keyData = originalKeyData;
// Update feedback - don't reveal if correct/wrong yet
this.parent.updateFeedback("Key selected! Inserting into lock...");
// Automatically trigger key insertion after a short delay
setTimeout(() => {
this.parent.keyOps.startKeyInsertion();
}, 300); // Small delay to let the key appear first
// Update feedback if available
if (this.parent.selectKeyCallback) {
this.parent.selectKeyCallback(selectedIndex, correctIndex, keyData);
}
}
showWrongKeyFeedback() {
// Show visual feedback for wrong key selection
const feedback = this.parent.scene.add.graphics();
feedback.fillStyle(0xff0000, 0.3);
feedback.fillRect(0, 0, 800, 600);
feedback.setDepth(9999);
// Remove feedback after a short delay
this.parent.scene.time.delayedCall(500, () => {
feedback.destroy();
});
}
flashLockRed() {
// Flash the entire lock area red to indicate wrong key
const flash = this.parent.scene.add.graphics();
flash.fillStyle(0xff0000, 0.4); // Red with 40% opacity
flash.fillRect(100, 50, 400, 300); // Cover the entire lock area
flash.setDepth(9998); // High z-index but below other UI elements
// Remove flash after a short delay
this.parent.scene.time.delayedCall(800, () => {
flash.destroy();
});
}
}

View File

@@ -3,7 +3,6 @@ import { LockConfiguration } from './lock-configuration.js';
import { LockGraphics } from './lock-graphics.js';
import { KeyDataGenerator } from './key-data-generator.js';
import { KeySelection } from './key-selection.js';
import { KeyVisualFeedback } from './key-visual-feedback.js';
import { KeyOperations } from './key-operations.js';
// Phaser Lockpicking Minigame Scene implementation
@@ -33,9 +32,6 @@ export class LockpickingMinigamePhaser extends MinigameScene {
// Initialize KeySelection module
this.keySelection = new KeySelection(this);
// Initialize KeyVisualFeedback module
this.keyVisualFeedback = new KeyVisualFeedback(this);
// Initialize KeyOperations module
this.keyOps = new KeyOperations(this);
}
@@ -479,7 +475,7 @@ export class LockpickingMinigamePhaser extends MinigameScene {
const keyY = startY;
// Create key visual representation
const keyVisual = this.keyVisualFeedback.createKeyVisual(keyData, keyWidth, keyHeight);
const keyVisual = this.keyOps.createKeyVisual(keyData, keyWidth, keyHeight);
keyVisual.setPosition(keyX, keyY);
keySelectionContainer.add(keyVisual);
@@ -489,7 +485,7 @@ export class LockpickingMinigamePhaser extends MinigameScene {
// Close the popup
keySelectionContainer.destroy();
// Trigger key selection and insertion
this.keyVisualFeedback.selectKey(index, correctKeyIndex, keyData);
this.keyOps.selectKey(index, correctKeyIndex, keyData);
});
// Add key label (use name if available, otherwise use number)