cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-21 11:18:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Password Minigame: Introduce a new minigame for password entry, featuring customizable hints, keyboard input, and attempt tracking. Implement CSS styles for the minigame interface and integrate it into the existing framework. Update index.html to include the new CSS file and register the minigame in the minigame manager. Add test page for functionality and ensure compatibility with existing game mechanics.

Browse Source
This commit is contained in:
Z. Cliffe Schreuders
2025-10-14 01:52:15 +01:00
parent 6c06aeafe7
commit e3ed198059
16 changed files with 2689 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
test-container-simple.html Normal file
View File

@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Container Desktop Test</title>
<!-- Include the game's CSS -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/container-minigame.css">
<link rel="stylesheet" href="css/notifications.css">
<style>
body {
background: #1a1a1a;
color: white;
font-family: 'Press Start 2P', monospace;
margin: 0;
padding: 20px;
}
.test-container {
max-width: 800px;
margin: 0 auto;
}
.test-section {
margin: 20px 0;
padding: 20px;
border: 2px solid #444;
border-radius: 10px;
background: #2a2a2a;
}
.test-button {
background: #3498db;
color: white;
border: none;
padding: 12px 24px;
border-radius: 5px;
cursor: pointer;
font-family: 'Press Start 2P', monospace;
font-size: 10px;
margin: 5px;
transition: background 0.3s ease;
}
.test-button:hover {
background: #2980b9;
}
.test-button.success {
background: #2ecc71;
}
.test-button.success:hover {
background: #27ae60;
}
.test-description {
font-size: 8px;
color: #ccc;
margin-bottom: 10px;
line-height: 1.4;
}
.demo-area {
margin: 20px 0;
padding: 20px;
border: 2px solid #00ff00;
border-radius: 10px;
background: #1a1a1a;
min-height: 400px;
}
</style>
</head>
<body>
<div class="test-container">
<h1>Simple Container Desktop Mode Test</h1>
<p>Test the container desktop mode CSS and layout without the full framework.</p>
<!-- Standard Container Demo -->
<div class="test-section">
<h2>Standard Container Layout</h2>
<div class="test-description">
Standard container minigame layout (non-desktop mode).
</div>
<div class="demo-area">
<div class="container-minigame">
<div class="container-image-section">
<img src="assets/objects/container.png" alt="Container" class="container-image">
<div class="container-info">
<h4>Test Container</h4>
<p>A standard container for testing</p>
</div>
</div>
<div class="container-contents-section">
<h4>Contents</h4>
<div class="container-contents-grid">
<div class="container-content-slot">
<img src="assets/objects/key.png" alt="Key" class="container-content-item">
<div class="container-content-tooltip">Test Key</div>
</div>
<div class="container-content-slot">
<img src="assets/objects/document.png" alt="Document" class="container-content-item">
<div class="container-content-tooltip">Test Document</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Desktop Container Demo -->
<div class="test-section">
<h2>Desktop Container Layout</h2>
<div class="test-description">
Container minigame in desktop mode with desktop wallpaper and scattered icons.
</div>
<div class="demo-area">
<div class="container-minigame desktop-mode">
<div class="desktop-background">
<div class="desktop-wallpaper"></div>
<div class="desktop-icons">
<div class="desktop-icon" style="left: 20%; top: 15%;">
<img src="assets/objects/document.png" alt="Document" class="desktop-icon-image">
<div class="desktop-icon-label">Secret Files</div>
</div>
<div class="desktop-icon" style="left: 60%; top: 25%;">
<img src="assets/objects/key.png" alt="Key" class="desktop-icon-image">
<div class="desktop-icon-label">Encryption Key</div>
</div>
<div class="desktop-icon" style="left: 40%; top: 45%;">
<img src="assets/objects/notes.png" alt="Notes" class="desktop-icon-image">
<div class="desktop-icon-label">Meeting Notes</div>
</div>
<div class="desktop-icon" style="left: 70%; top: 50%;">
<img src="assets/objects/folder.png" alt="Folder" class="desktop-icon-image">
<div class="desktop-icon-label">Backup Files</div>
</div>
</div>
</div>
<div class="desktop-taskbar">
<div class="desktop-info">
<span class="desktop-title">Office Computer</span>
<span class="desktop-subtitle">Desktop with scattered files</span>
</div>
<div class="desktop-actions">
<button class="minigame-button">Take Container</button>
<button class="minigame-button">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Empty Desktop Demo -->
<div class="test-section">
<h2>Empty Desktop Layout</h2>
<div class="test-description">
Desktop mode with no items to show the empty desktop message.
</div>
<div class="demo-area">
<div class="container-minigame desktop-mode">
<div class="desktop-background">
<div class="desktop-wallpaper"></div>
<div class="desktop-icons">
<div class="empty-desktop">Desktop is empty</div>
</div>
</div>
<div class="desktop-taskbar">
<div class="desktop-info">
<span class="desktop-title">Empty Desktop</span>
<span class="desktop-subtitle">No files found</span>
</div>
<div class="desktop-actions">
<button class="minigame-button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>