diff --git a/index.html b/index.html
index 30ccb4d..9ba9959 100644
--- a/index.html
+++ b/index.html
@@ -3081,6 +3081,133 @@
scene.input.mouse.enabled = true;
};
+ // Add pin binding order
+ const numPins = 5;
+ const bindingOrder = Array.from({length: numPins}, (_, i) => i)
+ .sort(() => Math.random() - 0.5); // Randomize binding order
+
+ // Track game state
+ const gameState = {
+ tensionApplied: false,
+ pinStates: Array(numPins).fill(0), // 0 = down, 1 = binding, 2 = set
+ currentBindingIndex: 0
+ };
+
+ // Create tension wrench toggle
+ const tensionWrench = document.createElement('div');
+ tensionWrench.style.cssText = `
+ width: 100px;
+ height: 30px;
+ background: ${gameState.tensionApplied ? '#666' : '#444'};
+ border: 2px solid #888;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-bottom: 20px;
+ text-align: center;
+ line-height: 30px;
+ color: white;
+ `;
+ tensionWrench.textContent = 'Tension: OFF';
+ tensionWrench.onclick = () => {
+ gameState.tensionApplied = !gameState.tensionApplied;
+ tensionWrench.style.background = gameState.tensionApplied ? '#666' : '#444';
+ tensionWrench.textContent = `Tension: ${gameState.tensionApplied ? 'ON' : 'OFF'}`;
+
+ // Drop pins if tension is released
+ if (!gameState.tensionApplied) {
+ gameState.pinStates.forEach((_, index) => {
+ if (gameState.pinStates[index] === 1) { // Only drop binding pins
+ gameState.pinStates[index] = 0;
+ updatePinVisual(index);
+ }
+ });
+ }
+ };
+
+ // Create lock pins container
+ const pinsContainer = document.createElement('div');
+ pinsContainer.style.cssText = `
+ display: flex;
+ gap: 10px;
+ background: #333;
+ padding: 20px;
+ border-radius: 10px;
+ `;
+
+ // Create individual pins
+ for (let i = 0; i < numPins; i++) {
+ const pin = document.createElement('div');
+ pin.style.cssText = `
+ width: 30px;
+ height: 100px;
+ background: #555;
+ border: 2px solid #777;
+ border-radius: 5px;
+ cursor: pointer;
+ position: relative;
+ `;
+
+ // Add pin number
+ const pinNumber = document.createElement('div');
+ pinNumber.style.cssText = `
+ position: absolute;
+ top: -20px;
+ width: 100%;
+ text-align: center;
+ color: white;
+ `;
+ pinNumber.textContent = (i + 1).toString();
+ pin.appendChild(pinNumber);
+
+ pin.onmousedown = () => {
+ if (!gameState.tensionApplied) return; // Pins only move with tension
+
+ const bindingPin = bindingOrder[gameState.currentBindingIndex];
+ if (i === bindingPin) {
+ gameState.pinStates[i] = 2; // Set
+ gameState.currentBindingIndex++;
+ pin.style.background = '#0f0'; // Green for set
+
+ // Check win condition
+ if (gameState.currentBindingIndex >= numPins) {
+ setTimeout(() => {
+ unlockTarget(item, 'door', item.layer);
+ alert("Lock successfully picked!");
+ document.body.removeChild(iframe);
+ scene.input.mouse.enabled = true;
+ }, 500);
+ }
+ } else {
+ gameState.pinStates[i] = 1; // Binding
+ pin.style.background = '#00f'; // Blue for binding
+ }
+ };
+
+ pin.onmouseup = () => {
+ if (gameState.pinStates[i] === 1) { // Only drop binding pins
+ gameState.pinStates[i] = 0;
+ pin.style.background = '#555';
+ }
+ };
+
+ pinsContainer.appendChild(pin);
+ }
+
+ function updatePinVisual(index) {
+ const pin = pinsContainer.children[index];
+ switch (gameState.pinStates[index]) {
+ case 0: pin.style.background = '#555'; break; // Down
+ case 1: pin.style.background = '#00f'; break; // Binding
+ case 2: pin.style.background = '#0f0'; break; // Set
+ }
+ }
+
+ // Add components to game container
+ gameContainer.appendChild(tensionWrench);
+ gameContainer.appendChild(pinsContainer);
+
+ // ... rest of the existing code (close button, etc.)
+
// Assemble the interface
iframe.appendChild(closeButton);
iframe.appendChild(instructions);