From c2cbc4ec7305e714b6656043a929232a5fdd8a8d Mon Sep 17 00:00:00 2001
From: Damian-I <d.d.idzinski@gmail.com>
Date: Fri, 14 Mar 2025 12:07:20 +0000
Subject: [PATCH] fixed lockpicking minigame (need to fix css)

---
 index.html | 89 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 64 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index a926073..9736ee1 100644
--- a/index.html
+++ b/index.html
@@ -4846,29 +4846,31 @@
                     style.textContent = `
                         .lock-visual {
                             display: flex;
-                            justify-content: center;
-                            align-items: flex-end;
-                            gap: 15px;
-                            height: 120px;
-                            background: #333;
+                            justify-content: space-evenly;
+                            align-items: center;
+                            gap: 10px;
+                            height: 150px;
+                            background: #222;
                             border-radius: 5px;
                             padding: 15px;
                             position: relative;
+                            margin-bottom: 10px;
                         }
                         
                         .pin {
-                            width: 40px;
+                            width: 30px;
                             height: 100px;
                             position: relative;
-                            background: #444;
+                            background: #e0d8b0;
                             border-radius: 4px 4px 0 0;
                             overflow: visible;
                             cursor: pointer;
                             transition: transform 0.1s;
+                            margin: 0 5px;
                         }
                         
                         .pin:hover {
-                            background: #555;
+                            background: #f0e8c0;
                         }
                         
                         .shear-line {
@@ -4885,7 +4887,8 @@
                             bottom: 0;
                             width: 100%;
                             height: 0px;
-                            background: #dd3333;
+                            background: #66a3ff;
+                            border-radius: 3px 3px 0 0;
                             transition: height 0.05s;
                         }
                         
@@ -4893,7 +4896,7 @@
                             position: absolute;
                             width: 100%;
                             height: 40px;
-                            background: #3355dd;
+                            background: #66a3ff;
                             transition: bottom 0.05s;
                             bottom: 40px;
                             border-radius: 0 0 3px 3px;
@@ -4929,6 +4932,7 @@
                         
                         .pin.set .key-pin {
                             height: 39px; /* Just below shear line */
+                            background: #22aa22; /* Green to indicate set */
                         }
                         
                         .cylinder {
@@ -4939,7 +4943,7 @@
                             height: 30px;
                             background: #222;
                             border-radius: 5px;
-                            margin-top: -15px;
+                            margin-top: 5px;
                             position: relative;
                             z-index: 0;
                         }
@@ -4963,31 +4967,40 @@
                             border-radius: 5px;
                             text-align: center;
                             min-height: 20px;
+                            margin-top: 10px;
                         }
                         
                         .tension-control {
                             display: flex;
+                            justify-content: space-between;
                             align-items: center;
                             background: #333;
-                            padding: 10px;
+                            padding: 15px;
                             border-radius: 5px;
+                            margin-top: 10px;
                         }
                         
                         .tension-control label {
                             flex: 1;
                         }
                         
+                        .tension-status {
+                            flex: 1;
+                            text-align: right;
+                        }
+                        
                         .tension-wrench {
-                            width: 50px;
-                            height: 30px;
+                            width: 60px;
+                            height: 40px;
                             background: #666;
                             border-radius: 4px;
                             cursor: pointer;
                             display: flex;
                             align-items: center;
                             justify-content: center;
-                            margin-right: 10px;
+                            margin-right: 15px;
                             transition: transform 0.2s;
+                            position: relative;
                         }
                         
                         .tension-wrench:hover {
@@ -4998,6 +5011,21 @@
                             background: #2196F3;
                             transform: rotate(-5deg);
                         }
+                        
+                        .wrench-handle {
+                            width: 60%;
+                            height: 10px;
+                            background: #999;
+                            position: absolute;
+                        }
+                        
+                        .wrench-tip {
+                            width: 15px;
+                            height: 25px;
+                            background: #999;
+                            position: absolute;
+                            left: 5px;
+                        }
                     `;
                     document.head.appendChild(style);
                 }
@@ -5151,25 +5179,34 @@
                 
                 // Start lifting the pin
                 this.lockState.currentPin = pin;
+                this.gameState.mouseDown = true; // Add this line to track mouse state
                 this.liftPin();
                 
+                // Add mouse up listener to document
+                const mouseUpHandler = () => {
+                    this.gameState.mouseDown = false;
+                    this.checkPinSet(this.lockState.currentPin);
+                    this.lockState.currentPin = null;
+                    document.removeEventListener('mouseup', mouseUpHandler);
+                };
+                
+                document.addEventListener('mouseup', mouseUpHandler);
+                
                 // Prevent text selection
                 e.preventDefault();
             }
             
             // Override framework's mouse event handlers
             handleMouseUp(e) {
-                // If we were in the process of lifting a pin, check if it sets or drops
-                if (this.lockState.currentPin) {
-                    this.checkPinSet(this.lockState.currentPin);
-                    this.lockState.currentPin = null;
-                }
+                // The document-level handler above will take care of this
+                // This is still needed for framework compatibility
+                this.gameState.mouseDown = false;
             }
             
             // Pin-lifting logic
             liftPin() {
-                if (!this.gameState.mouseDown || !this.lockState.currentPin || 
-                    !this.gameState.isActive || !this.lockState.tensionApplied) {
+                if (!this.lockState.currentPin || !this.gameState.isActive || 
+                    !this.lockState.tensionApplied || !this.gameState.mouseDown) {
                     return;
                 }
                 
@@ -5194,7 +5231,9 @@
                 this.updatePinVisual(pin);
                 
                 // Continue lifting while mouse is down
-                requestAnimationFrame(() => this.liftPin());
+                if (this.gameState.mouseDown) {
+                    requestAnimationFrame(() => this.liftPin());
+                }
             }
             
             // Check if a pin should be set or dropped
@@ -5355,7 +5394,7 @@
                     </div>
                 `;
                 
-                // Use the framework's success message
+                // Use the framework's success message system
                 this.showSuccess(successHTML, true, 2000);
                 
                 // Store lockable for the result
@@ -5369,7 +5408,7 @@
                     <div style="font-size: 16px; margin-top: 5px;">Try again with more careful pin manipulation</div>
                 `;
                 
-                // Use the framework's failure message
+                // Use the framework's failure message system
                 this.showFailure(failureHTML, true, 2000);
             }