cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-20 13:50:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Z. Cliffe Schreuders
2025-08-12 13:33:10 +01:00
parent 287ab5c25c
commit daf3491bc8
2 changed files with 107 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
js/minigames/lockpicking/lockpicking-game-phaser.js
View File

@@ -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'

94
locksmith-forge.html
View File

@@ -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;
}
}
</style>
</head>