From a010576dfdbce43c2a4bfc9f053133bd013f58cf Mon Sep 17 00:00:00 2001 From: "Z. Cliffe Schreuders" Date: Fri, 10 Oct 2025 18:55:41 +0100 Subject: [PATCH] Add Lockpicking and Dusting Minigame Styles: Introduce new CSS files for lockpicking and dusting minigames, enhancing visual feedback and user interaction. Update inventory styles for improved scaling and responsiveness. Refactor existing styles to remove legacy dusting game components and ensure consistency across minigame interfaces. --- css/inventory.css | 8 +- css/lockpicking.css | 29 +++ css/minigames-framework.css | 31 +-- css/minigames.css | 182 +----------------- index_new.html | 2 + .../lockpicking/lockpicking-game-phaser.js | 4 +- js/systems/interactions.js | 2 + 7 files changed, 44 insertions(+), 214 deletions(-) create mode 100644 css/lockpicking.css diff --git a/css/inventory.css b/css/inventory.css index fdf3f61..7c56bac 100644 --- a/css/inventory.css +++ b/css/inventory.css @@ -30,7 +30,7 @@ min-width: 60px; height: 60px; margin: 0 5px; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid rgb(111 112 135 , 0.3); display: flex; justify-content: center; align-items: center; @@ -43,10 +43,14 @@ max-height: 48px; cursor: pointer; transition: transform 0.2s; + transform: scale(2); + image-rendering: pixelated; + image-rendering: -moz-crisp-edges; + image-rendering: crisp-edges; } .inventory-item:hover { - transform: scale(1.1); + transform: scale(2.2); } .inventory-tooltip { diff --git a/css/lockpicking.css b/css/lockpicking.css new file mode 100644 index 0000000..21823b8 --- /dev/null +++ b/css/lockpicking.css @@ -0,0 +1,29 @@ +/* Lockpicking Minigame Styles */ + +/* Lockpicking feedback styling */ +.lockpick-feedback { + background: rgba(0, 0, 0, 0.8); + color: #00ff00; + padding: 10px 15px; + border-radius: 5px; + margin: 10px 0; + font-family: 'VT323', monospace; + font-size: 16px; + text-align: center; + border: 1px solid #00ff00; + min-height: 20px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); + position: relative; + z-index: 1000; + width: 100%; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.lockpick-feedback:empty { + display: none; +} diff --git a/css/minigames-framework.css b/css/minigames-framework.css index 8754aeb..3f70572 100644 --- a/css/minigames-framework.css +++ b/css/minigames-framework.css @@ -160,8 +160,8 @@ color: white; border: 4px solid #c0392b; cursor: pointer; - font-family: 'VT323', monospace; - font-size: 14px; + font-family: 'Press Start 2P', monospace; + font-size: 18px; font-weight: bold; z-index: 10000; display: flex; @@ -195,30 +195,3 @@ border-radius: 5px; } -/* Lockpicking feedback styling */ -.lockpick-feedback { - background: rgba(0, 0, 0, 0.8); - color: #00ff00; - padding: 10px 15px; - border-radius: 5px; - margin: 10px 0; - font-family: 'VT323', monospace; - font-size: 16px; - text-align: center; - border: 1px solid #00ff00; - min-height: 20px; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); - position: relative; - z-index: 1000; - width: 100%; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} - -.lockpick-feedback:empty { - display: none; -} diff --git a/css/minigames.css b/css/minigames.css index e033ba6..ceae475 100644 --- a/css/minigames.css +++ b/css/minigames.css @@ -133,187 +133,6 @@ color: #ccc; } -/* Dusting Minigame */ -.dusting-container { - width: 75% !important; - height: 75% !important; - padding: 20px; -} - -.dusting-game-container { - width: 100%; - height: 60%; - margin: 0 auto 20px auto; - background: #1a1a1a; - border-radius: 5px; - box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset; - position: relative; - overflow: hidden; - border: 2px solid #333; -} - -.dusting-grid-background { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background-size: 20px 20px; - background-repeat: repeat; - z-index: 1; -} - -.dusting-tools-container { - position: absolute; - top: 10px; - right: 10px; - display: flex; - flex-direction: column; - gap: 5px; - z-index: 3; -} - -.dusting-tool-button { - padding: 8px 12px; - border: none; - border-radius: 3px; - cursor: pointer; - font-size: 12px; - font-weight: bold; - color: white; - transition: opacity 0.2s, transform 0.1s; - opacity: 0.7; -} - -.dusting-tool-button:hover { - opacity: 0.9; - transform: scale(1.05); -} - -.dusting-tool-button.active { - opacity: 1; - box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); -} - -.dusting-tool-fine { - background-color: #3498db; -} - -.dusting-tool-medium { - background-color: #2ecc71; -} - -.dusting-tool-wide { - background-color: #e67e22; -} - -.dusting-particle-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 2; -} - -.dusting-particle { - position: absolute; - width: 3px; - height: 3px; - border-radius: 50%; - pointer-events: none; - z-index: 2; -} - -.dusting-progress-container { - position: absolute; - bottom: 10px; - left: 10px; - right: 10px; - background: rgba(0, 0, 0, 0.8); - padding: 10px; - border-radius: 3px; - color: white; - font-family: 'VT323', monospace; - font-size: 14px; - z-index: 3; -} - -.dusting-grid-cell { - position: absolute; - background: #000; - border: 1px solid #222; - cursor: crosshair; -} - -.dusting-cell-clean { - background: black !important; - box-shadow: none !important; -} - -.dusting-cell-light-dust { - background: #444 !important; - box-shadow: inset 0 0 3px rgba(255,255,255,0.2) !important; -} - -.dusting-cell-fingerprint { - background: #0f0 !important; - box-shadow: inset 0 0 5px rgba(0,255,0,0.5), 0 0 5px rgba(0,255,0,0.3) !important; -} - -.dusting-cell-medium-dust { - background: #888 !important; - box-shadow: inset 0 0 4px rgba(255,255,255,0.3) !important; -} - -.dusting-cell-heavy-dust { - background: #ccc !important; - box-shadow: inset 0 0 5px rgba(255,255,255,0.5) !important; -} - -.dusting-progress-found { - color: #2ecc71; -} - -.dusting-progress-over-dusted { - color: #e74c3c; -} - -.dusting-progress-normal { - color: #fff; -} - -/* Dusting Game Success/Failure Messages */ -.dusting-success-message { - font-weight: bold; - font-size: 24px; - margin-bottom: 10px; - color: #2ecc71; -} - -.dusting-success-quality { - font-size: 18px; - margin-bottom: 15px; - color: #fff; -} - -.dusting-success-details { - font-size: 14px; - color: #aaa; -} - -.dusting-failure-message { - font-weight: bold; - margin-bottom: 10px; - color: #e74c3c; -} - -.dusting-failure-subtitle { - font-size: 16px; - margin-top: 5px; - color: #fff; -} /* Minigame disabled state */ .minigame-disabled { @@ -337,6 +156,7 @@ border: none; border-radius: 50%; cursor: pointer; + font-family: 'Press Start 2P', monospace; font-size: 18px; font-weight: bold; z-index: 10000; diff --git a/index_new.html b/index_new.html index cf338cd..cf48c8e 100644 --- a/index_new.html +++ b/index_new.html @@ -31,6 +31,8 @@ + + diff --git a/js/minigames/lockpicking/lockpicking-game-phaser.js b/js/minigames/lockpicking/lockpicking-game-phaser.js index a159c5f..83d2c00 100644 --- a/js/minigames/lockpicking/lockpicking-game-phaser.js +++ b/js/minigames/lockpicking/lockpicking-game-phaser.js @@ -45,7 +45,7 @@ export class LockpickingMinigamePhaser extends MinigameScene { this.liftSpeed = params.liftSpeed || (this.difficulty === 'hard' ? 1.2 : 1); // Close button customization - this.closeButtonText = params.closeButtonText || '×'; + this.closeButtonText = params.cancelText || 'Cancel'; this.closeButtonAction = params.closeButtonAction || 'close'; // Key mode settings @@ -182,7 +182,7 @@ export class LockpickingMinigamePhaser extends MinigameScene { // Customize the close button const closeBtn = document.getElementById('minigame-close'); if (closeBtn) { - closeBtn.textContent = this.closeButtonText; + closeBtn.textContent = '×'; // Remove the default close action this._eventListeners = this._eventListeners.filter(listener => diff --git a/js/systems/interactions.js b/js/systems/interactions.js index fe68377..55ffe60 100644 --- a/js/systems/interactions.js +++ b/js/systems/interactions.js @@ -967,6 +967,7 @@ function startLockpickingMinigame(lockable, scene, difficulty = 'medium', callba window.MinigameFramework.startMinigame('lockpicking', null, { lockable: lockable, difficulty: difficulty, + cancelText: 'Close', onComplete: (success, result) => { if (success) { console.log('LOCKPICK SUCCESS'); @@ -1034,6 +1035,7 @@ function startKeySelectionMinigame(lockable, type, playerKeys, requiredKeyId) { keyMode: true, skipStartingKey: true, lockable: lockable, + cancelText: 'Close', onComplete: (success, result) => { if (success) { console.log('KEY SELECTION SUCCESS');