Added functionality to the minigame

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);