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