From daf3491bc86af3de41ff988dacdd77db07e0c398 Mon Sep 17 00:00:00 2001 From: "Z. Cliffe Schreuders" Date: Tue, 12 Aug 2025 13:33:10 +0100 Subject: [PATCH] Refactor styles in locksmith-forge.html and enhance lockpicking-game-phaser.js: Adjust padding, margins, and font sizes for improved responsiveness in locksmith-forge.html, including media queries for mobile devices. In lockpicking-game-phaser.js, implement canvas size adjustments for mobile to optimize gameplay experience by cropping the viewport and scaling the game area accordingly. Update shear line text positioning for better visibility. --- .../lockpicking/lockpicking-game-phaser.js | 31 +++++- locksmith-forge.html | 94 ++++++++++++++++--- 2 files changed, 107 insertions(+), 18 deletions(-) diff --git a/js/minigames/lockpicking/lockpicking-game-phaser.js b/js/minigames/lockpicking/lockpicking-game-phaser.js index 30b95a9..3cf0f4b 100644 --- a/js/minigames/lockpicking/lockpicking-game-phaser.js +++ b/js/minigames/lockpicking/lockpicking-game-phaser.js @@ -203,6 +203,31 @@ export class LockpickingMinigamePhaser extends MinigameScene { } }; + // Adjust canvas size for mobile to crop empty space + if (window.innerWidth <= 768) { + // Crop the viewport to focus on the lock area + // Lock is positioned from x=100 to x=500, y=50 to y=350 + // So we can crop to roughly x=80 to x=520, y=30 to y=370 + const cropWidth = 510; // 520 - 80 + const cropHeight = 300; // 370 - 30 + + // Calculate scale to fit the cropped area + const containerWidth = document.getElementById('phaser-game-container').offsetWidth; + const containerHeight = document.getElementById('phaser-game-container').offsetHeight; + + // Scale to fit the cropped area within the container + const scaleX = containerWidth / cropWidth; + const scaleY = containerHeight / cropHeight; + const scale = Math.min(scaleX, scaleY); + + config.width = cropWidth; + config.height = cropHeight; + config.scale = { + mode: Phaser.Scale.FIT, + autoCenter: Phaser.Scale.CENTER_BOTH + }; + } + try { this.game = new Phaser.Game(config); this.scene = this.game.scene.getScene('LockpickingScene'); @@ -219,7 +244,7 @@ export class LockpickingMinigamePhaser extends MinigameScene { const graphics = this.scene.add.graphics(); graphics.lineStyle(2, 0x666666); graphics.strokeRect(100, 50, 400, 300); - graphics.fillStyle(0x333333); + graphics.fillStyle(0x555555); graphics.fillRect(100, 50, 400, 300); // Create key cylinder - rectangle from shear line to near bottom @@ -1052,8 +1077,8 @@ export class LockpickingMinigamePhaser extends MinigameScene { } // Add shear line label - const shearLineText = this.scene.add.text(503, 145, 'SHEAR LINE', { - fontSize: '12px', + const shearLineText = this.scene.add.text(430, 135, 'SHEAR LINE', { + fontSize: '16px', fontFamily: 'VT323', fill: '#00ff00', fontWeight: 'bold' diff --git a/locksmith-forge.html b/locksmith-forge.html index cd7096c..8ad38ff 100644 --- a/locksmith-forge.html +++ b/locksmith-forge.html @@ -30,13 +30,19 @@ background: #333; color: #ffffff; margin: 0; - padding: 20px; + padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } + + @media (max-width: 768px) { + body { + padding: 5px; + } + } .minigame-close-button, #minigame-cancel, .minigame-header { display: none; @@ -44,9 +50,9 @@ .header { background: rgba(0, 0, 0, 0.95); - padding: 20px; + padding: 15px; border-radius: 10px; - margin-bottom: 20px; + margin-bottom: 15px; border: 2px solid #444; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); max-width: 800px; @@ -54,40 +60,77 @@ color: #00ff00; } + @media (max-width: 768px) { + .header { + padding: 10px; + margin-bottom: 10px; + } + } + .level-display { font-family: 'Press Start 2P', monospace; - font-size: 20px; + font-size: 18px; font-weight: bold; - margin-bottom: 15px; + margin-bottom: 12px; text-shadow: 0 0 10px #00ff00; } + @media (max-width: 768px) { + .level-display { + font-size: 16px; + margin-bottom: 10px; + } + } + .stats { display: flex; justify-content: space-around; - font-size: 14px; + font-size: 13px; + flex-wrap: wrap; + gap: 5px; + } + + @media (max-width: 768px) { + .stats { + font-size: 12px; + gap: 3px; + } } .stat { background: #333; - padding: 8px 15px; + padding: 6px 12px; border-radius: 5px; border: 1px solid #00ff00; } + @media (max-width: 768px) { + .stat { + padding: 4px 8px; + } + } + .game-container { background: rgba(0, 0, 0, 0.95); border-radius: 10px; - padding: 20px; + padding: 15px; border: 2px solid #444; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); - margin-bottom: 20px; - min-height: 400px; + margin-bottom: 15px; + min-height: 350px; position: relative; max-width: 800px; width: 100%; } + @media (max-width: 768px) { + .game-container { + padding: 10px; + margin-bottom: 10px; + min-height: 300px; + } + } + #gameContainer { width: 100%; background: #1a1a1a; @@ -189,15 +232,22 @@ .progress-bar { width: 100%; - height: 20px; + height: 18px; background: rgba(0, 0, 0, 0.8); border-radius: 10px; border: 1px solid #444; overflow: hidden; - margin: 10px 0; + margin: 8px 0; max-width: 800px; } + @media (max-width: 768px) { + .progress-bar { + height: 16px; + margin: 6px 0; + } + } + .progress-fill { height: 100%; background: linear-gradient(90deg, #00ff00, #00cc00); @@ -209,13 +259,21 @@ font-family: 'Press Start 2P', monospace; background: #ffaa00; color: #000; - padding: 10px; + padding: 8px; border-radius: 5px; - margin: 10px 0; + margin: 8px 0; font-weight: bold; animation: glow 2s ease-in-out infinite alternate; } + @media (max-width: 768px) { + .achievement { + padding: 6px; + margin: 6px 0; + font-size: 12px; + } + } + @keyframes glow { from { box-shadow: 0 0 5px #ffaa00; } to { box-shadow: 0 0 20px #ffaa00, 0 0 30px #ffaa00; } @@ -227,7 +285,7 @@ left: 50%; transform: translate(-50%, -50%); color: white; - font-size: 16px; + font-size: 14px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); white-space: nowrap; @@ -237,6 +295,12 @@ z-index: 10; } + @media (max-width: 768px) { + .progress-achievement { + font-size: 12px; + } + } +