mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
270 lines
10 KiB
HTML
270 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Container Interactive Items Test</title>
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/minigames-framework.css">
|
|
<link rel="stylesheet" href="css/text-file-minigame.css">
|
|
<style>
|
|
body {
|
|
background: #000;
|
|
color: #00ff00;
|
|
font-family: 'Courier New', monospace;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.test-button {
|
|
background: rgba(0, 255, 0, 0.1);
|
|
border: 2px solid #00ff00;
|
|
color: #00ff00;
|
|
padding: 15px 30px;
|
|
margin: 10px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 14px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.test-button:hover {
|
|
background: rgba(0, 255, 0, 0.2);
|
|
box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
|
|
}
|
|
|
|
.test-info {
|
|
background: rgba(0, 255, 0, 0.05);
|
|
border: 1px solid #00ff00;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.test-info h3 {
|
|
margin-top: 0;
|
|
color: #00ff00;
|
|
}
|
|
|
|
.test-info p {
|
|
margin: 5px 0;
|
|
color: #ccc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>📦 Container Interactive Items Test</h1>
|
|
|
|
<div class="test-info">
|
|
<h3>Test Instructions:</h3>
|
|
<p>1. Click the test buttons below to launch different container scenarios</p>
|
|
<p>2. Test clicking on interactive items within containers</p>
|
|
<p>3. Verify that interactive items trigger their respective minigames</p>
|
|
<p>4. Test that takeable items still go to inventory</p>
|
|
</div>
|
|
|
|
<button class="test-button" onclick="testCEOExfilContainer()">
|
|
🎯 Test CEO Exfil Container (PC with text_file)
|
|
</button>
|
|
|
|
<button class="test-button" onclick="testMixedContainer()">
|
|
📦 Test Mixed Container (notes, text_file, key)
|
|
</button>
|
|
|
|
<button class="test-button" onclick="testPhoneContainer()">
|
|
📱 Test Phone Container (phone with messages)
|
|
</button>
|
|
|
|
<button class="test-button" onclick="testWorkstationContainer()">
|
|
💻 Test Workstation Container (crypto workstation)
|
|
</button>
|
|
|
|
<div class="test-info">
|
|
<h3>Expected Behavior:</h3>
|
|
<p>• Interactive items (notes, text_file, phone, workstation) should trigger their minigames</p>
|
|
<p>• Takeable items (keys, etc.) should go to inventory</p>
|
|
<p>• After minigame completion, should return to container</p>
|
|
<p>• Container should show remaining items after interaction</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Minigame container -->
|
|
<div id="minigame-container" style="display: none;"></div>
|
|
|
|
<script type="module">
|
|
// Import the minigame framework and container minigame
|
|
import { MinigameFramework } from './js/minigames/framework/minigame-manager.js';
|
|
import { ContainerMinigame, startContainerMinigame } from './js/minigames/container/container-minigame.js';
|
|
import { TextFileMinigame } from './js/minigames/text-file/text-file-minigame.js';
|
|
import { PhoneMessagesMinigame } from './js/minigames/phone/phone-messages-minigame.js';
|
|
import { NotesMinigame, startNotesMinigame } from './js/minigames/notes/notes-minigame.js';
|
|
|
|
// Initialize the framework
|
|
window.MinigameFramework = MinigameFramework;
|
|
MinigameFramework.registerScene('container', ContainerMinigame);
|
|
MinigameFramework.registerScene('text-file', TextFileMinigame);
|
|
MinigameFramework.registerScene('phone-messages', PhoneMessagesMinigame);
|
|
MinigameFramework.registerScene('notes', NotesMinigame);
|
|
|
|
// Make functions available globally
|
|
window.startNotesMinigame = startNotesMinigame;
|
|
window.startContainerMinigame = startContainerMinigame;
|
|
|
|
// Mock crypto workstation function
|
|
window.openCryptoWorkstation = function() {
|
|
alert('Crypto Workstation opened! (This would normally open the crypto workstation interface)');
|
|
};
|
|
|
|
// Test data
|
|
const testContainers = {
|
|
ceoExfil: {
|
|
containerItem: {
|
|
scenarioData: {
|
|
name: 'Reception Computer',
|
|
type: 'pc',
|
|
observations: 'The reception computer, currently unlocked'
|
|
},
|
|
name: 'pc'
|
|
},
|
|
contents: [
|
|
{
|
|
type: 'text_file',
|
|
name: 'Private',
|
|
takeable: false,
|
|
readable: true,
|
|
text: 'Closet keypad code: 7391 - Must move evidence to safe before audit',
|
|
observations: 'Private file found on reception computer',
|
|
source: 'Reception Computer'
|
|
}
|
|
],
|
|
isTakeable: false
|
|
},
|
|
|
|
mixed: {
|
|
containerItem: {
|
|
scenarioData: {
|
|
name: 'Desk Drawer',
|
|
type: 'drawer',
|
|
observations: 'A desk drawer containing various items'
|
|
},
|
|
name: 'drawer'
|
|
},
|
|
contents: [
|
|
{
|
|
type: 'notes',
|
|
name: 'Meeting Notes',
|
|
takeable: false,
|
|
readable: true,
|
|
text: 'Important meeting notes about the security audit. Need to review access logs and update passwords.',
|
|
observations: 'Handwritten meeting notes'
|
|
},
|
|
{
|
|
type: 'text_file',
|
|
name: 'Security Report',
|
|
takeable: false,
|
|
readable: true,
|
|
text: 'SECURITY AUDIT REPORT\n\nDate: Today\nStatus: In Progress\n\nFindings:\n- Weak passwords detected\n- Unauthorized access attempts\n- Missing security patches\n\nRecommendations:\n- Implement 2FA\n- Update all passwords\n- Install security updates',
|
|
observations: 'Digital security audit report',
|
|
source: 'IT Department'
|
|
},
|
|
{
|
|
type: 'key',
|
|
name: 'Office Key',
|
|
takeable: true,
|
|
observations: 'A key that might open something important'
|
|
}
|
|
],
|
|
isTakeable: false
|
|
},
|
|
|
|
phone: {
|
|
containerItem: {
|
|
scenarioData: {
|
|
name: 'Smartphone',
|
|
type: 'phone',
|
|
observations: 'A smartphone found on the desk'
|
|
},
|
|
name: 'phone'
|
|
},
|
|
contents: [
|
|
{
|
|
type: 'phone',
|
|
name: 'Phone Messages',
|
|
takeable: false,
|
|
text: 'Hey, did you get the files? The boss is asking about the audit.',
|
|
voice: 'This is a test voice message. The security audit is scheduled for tomorrow morning.',
|
|
sender: 'Colleague',
|
|
timestamp: '2:30 PM',
|
|
observations: 'Phone with text and voice messages'
|
|
}
|
|
],
|
|
isTakeable: true
|
|
},
|
|
|
|
workstation: {
|
|
containerItem: {
|
|
scenarioData: {
|
|
name: 'Crypto Workstation',
|
|
type: 'workstation',
|
|
observations: 'A specialized cryptographic workstation'
|
|
},
|
|
name: 'workstation'
|
|
},
|
|
contents: [
|
|
{
|
|
type: 'workstation',
|
|
name: 'Crypto Workstation',
|
|
takeable: false,
|
|
observations: 'A specialized cryptographic workstation for data analysis'
|
|
}
|
|
],
|
|
isTakeable: false
|
|
}
|
|
};
|
|
|
|
// Test functions
|
|
window.testCEOExfilContainer = function() {
|
|
startContainerMinigame(
|
|
testContainers.ceoExfil.containerItem,
|
|
testContainers.ceoExfil.contents,
|
|
testContainers.ceoExfil.isTakeable
|
|
);
|
|
};
|
|
|
|
window.testMixedContainer = function() {
|
|
startContainerMinigame(
|
|
testContainers.mixed.containerItem,
|
|
testContainers.mixed.contents,
|
|
testContainers.mixed.isTakeable
|
|
);
|
|
};
|
|
|
|
window.testPhoneContainer = function() {
|
|
startContainerMinigame(
|
|
testContainers.phone.containerItem,
|
|
testContainers.phone.contents,
|
|
testContainers.phone.isTakeable
|
|
);
|
|
};
|
|
|
|
window.testWorkstationContainer = function() {
|
|
startContainerMinigame(
|
|
testContainers.workstation.containerItem,
|
|
testContainers.workstation.contents,
|
|
testContainers.workstation.isTakeable
|
|
);
|
|
};
|
|
|
|
console.log('Container Interactive Items Test Page Loaded');
|
|
console.log('Available test functions:', Object.keys(window).filter(key => key.startsWith('test')));
|
|
</script>
|
|
</body>
|
|
</html>
|