diff --git a/assets/rooms/room_reception2.json b/assets/rooms/room_reception2.json index 896bbef..d816d86 100644 --- a/assets/rooms/room_reception2.json +++ b/assets/rooms/room_reception2.json @@ -145,7 +145,7 @@ "gid":230, "height":17, "id":47, - "name":"", + "name":"phone", "rotation":0, "type":"", "visible":true, diff --git a/assets/rooms/room_reception2.tmj b/assets/rooms/room_reception2.tmj index 757bb24..e2f4262 100644 --- a/assets/rooms/room_reception2.tmj +++ b/assets/rooms/room_reception2.tmj @@ -153,7 +153,7 @@ "gid":230, "height":17, "id":47, - "name":"", + "name":"phone", "rotation":0, "type":"", "visible":true, diff --git a/assets/scenarios/ceo_exfil.json b/assets/scenarios/ceo_exfil.json index 03baf51..3efe4b0 100644 --- a/assets/scenarios/ceo_exfil.json +++ b/assets/scenarios/ceo_exfil.json @@ -1,5 +1,5 @@ { - "scenario_brief": "Hi, You are a cyber investigator tasked with uncovering evidence of corporate espionage. Anonymous tips suggest the CEO has been selling company secrets, but you need proof.", + "scenario_brief": "old version. You are a cyber investigator tasked with uncovering evidence of corporate espionage. Anonymous tips suggest the CEO has been selling company secrets, but you need proof.", "startRoom": "reception", "rooms": { "reception": { diff --git a/css/container-minigame.css b/css/container-minigame.css index 484fd0b..3168e3e 100644 --- a/css/container-minigame.css +++ b/css/container-minigame.css @@ -225,7 +225,6 @@ .desktop-taskbar { background: rgba(0, 0, 0, 0.8); - border-top: 2px solid #333; padding: 10px 20px; display: flex; justify-content: space-between; @@ -271,9 +270,6 @@ align-items: center; gap: 20px; padding: 20px; - background: rgba(255, 255, 255, 0.05); - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.1); } .container-image { @@ -374,10 +370,11 @@ image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; transition: transform 0.2s ease; + transform: scale(2); } .container-content-item:hover { - transform: scale(1.1); + transform: scale(2.2); } .container-content-tooltip { diff --git a/css/inventory.css b/css/inventory.css index 7ce7985..55da451 100644 --- a/css/inventory.css +++ b/css/inventory.css @@ -80,7 +80,7 @@ color: white; padding: 4px 8px; border-radius: 4px; - font-size: 14px; + font-size: 18px; white-space: nowrap; pointer-events: none; opacity: 0; diff --git a/css/lockpicking.css b/css/lockpicking.css index f06f91c..ea26f85 100644 --- a/css/lockpicking.css +++ b/css/lockpicking.css @@ -27,3 +27,73 @@ .lockpick-feedback:empty { display: none; } + +/* Lockpicking item section styling */ +.lockpicking-item-section { + display: flex; + align-items: center; + gap: 20px; + padding: 20px; + background: rgba(0, 0, 0, 0.3); + margin-bottom: 20px; +} + +.lockpicking-item-image { + min-width: 80px; + min-height: 80px; + object-fit: contain; + image-rendering: pixelated; + image-rendering: -moz-crisp-edges; + image-rendering: crisp-edges; + border: 2px solid rgba(255, 255, 255, 0.3); + background: rgba(0, 0, 0, 0.3); + flex-shrink: 0; +} + +.lockpicking-item-info h4 { + font-family: 'Press Start 2P', monospace; + font-size: 20px; + margin: 0 0 10px 0; + color: #3498db; +} + +.lockpicking-item-info p { + font-size: 16px; + margin: 0; + color: #ecf0f1; + line-height: 1.4; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .lockpicking-item-section { + flex-direction: column; + text-align: center; + gap: 15px; + } + + .lockpicking-item-image { + width: 70px; + height: 70px; + } + + .lockpicking-item-info h4 { + font-size: 16px; + } + + .lockpicking-item-info p { + font-size: 14px; + } +} + +/* Phaser game container styling - prevent margin/padding shifts */ +#phaser-game-container { + margin: 0 !important; + padding: 0 !important; +} + +#phaser-game-container canvas { + margin: 0 !important; + padding: 0 !important; + display: block; +} diff --git a/css/password-minigame.css b/css/password-minigame.css index d19a856..ce617ea 100644 --- a/css/password-minigame.css +++ b/css/password-minigame.css @@ -10,6 +10,38 @@ position: relative; } +.password-image-section { + display: flex; + align-items: center; + gap: 20px; + padding: 20px; +} + +.password-image { + width: 80px; + height: 80px; + object-fit: contain; + image-rendering: pixelated; + image-rendering: -moz-crisp-edges; + image-rendering: crisp-edges; + border: 2px solid rgba(255, 255, 255, 0.3); + background: rgba(0, 0, 0, 0.3); +} + +.password-info h4 { + font-family: 'Press Start 2P', monospace; + font-size: 20px; + margin: 0 0 10px 0; + color: #3498db; +} + +.password-info p { + font-size: 20px; + margin: 0; + color: #ecf0f1; + line-height: 1.4; +} + .password-input-container { display: flex; flex-direction: column; @@ -529,4 +561,16 @@ padding: 10px 20px; font-size: 18px; } + + .password-image-section { + flex-direction: column; + align-items: center; + gap: 10px; + padding: 10px; + } + + .password-image { + width: 60px; + height: 60px; + } } diff --git a/css/phone.css b/css/phone.css index 73a6815..e6154e1 100644 --- a/css/phone.css +++ b/css/phone.css @@ -1,4 +1,38 @@ /* Phone Messages Minigame Styles */ + +.phone-image-section { + display: flex; + align-items: center; + gap: 20px; + padding: 20px; + margin-bottom: 20px; +} + +.phone-image { + width: 80px; + height: 80px; + object-fit: contain; + image-rendering: pixelated; + image-rendering: -moz-crisp-edges; + image-rendering: crisp-edges; + border: 2px solid rgba(255, 255, 255, 0.3); + background: rgba(0, 0, 0, 0.3); +} + +.phone-info h4 { + font-family: 'Press Start 2P', monospace; + font-size: 20px; + margin: 0 0 10px 0; + color: #3498db; +} + +.phone-info p { + font-size: 20px; + margin: 0; + color: #ecf0f1; + line-height: 1.4; +} + .phone-messages-container { display: flex; flex-direction: column; @@ -7,7 +41,6 @@ max-width: 400px; margin: 0 auto; background: #a0a0ad; - border: 4px solid #333; clip-path: polygon( 0px calc(100% - 10px), 2px calc(100% - 10px), @@ -469,3 +502,4 @@ padding: 5px; font-weight: bold; } + diff --git a/js/minigames/container/container-minigame.js b/js/minigames/container/container-minigame.js index 94e5e93..fe77de1 100644 --- a/js/minigames/container/container-minigame.js +++ b/js/minigames/container/container-minigame.js @@ -92,7 +92,6 @@ export class ContainerMinigame extends MinigameScene {
+ ${this.containerItem.scenarioData.observations || ''}
+Apply tension and hold click on pins to lift them to the shear line
`; + // Create the lockable item display section if item info is provided + this.createLockableItemDisplay(); + this.setupPhaserGame(); } + createLockableItemDisplay() { + // Create display for the locked item (door, chest, etc.) + const itemName = this.params?.itemName || this.lockable || 'Locked Item'; + const itemImage = this.params?.itemImage || null; + const itemObservations = this.params?.itemObservations || ''; + + if (!itemImage) return; // Only create if image is provided + + // Create container for the item display + const itemDisplayDiv = document.createElement('div'); + itemDisplayDiv.className = 'lockpicking-item-section'; + itemDisplayDiv.innerHTML = ` +${itemObservations}
+
+ ${imageData.observations}
+
+ ${imageData.observations}
+