mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
349 lines
12 KiB
HTML
349 lines
12 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 Desktop Mode Test</title>
|
|
|
|
<!-- Include the game's CSS -->
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/minigames-framework.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;
|
|
}
|
|
|
|
.test-results {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background: #1a1a1a;
|
|
border-radius: 5px;
|
|
border: 1px solid #444;
|
|
}
|
|
|
|
.test-results h3 {
|
|
color: #00ff00;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.test-results pre {
|
|
background: #0a0a0a;
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
overflow-x: auto;
|
|
font-size: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>Container Desktop Mode Test Suite</h1>
|
|
<p>Test the container minigame in desktop mode with desktop wallpaper and icons.</p>
|
|
|
|
<!-- Standard Container Test -->
|
|
<div class="test-section">
|
|
<h2>Standard Container Test</h2>
|
|
<div class="test-description">
|
|
Test the standard container minigame (non-desktop mode) with various items.
|
|
</div>
|
|
<button class="test-button" onclick="testStandardContainer()">Test Standard Container</button>
|
|
</div>
|
|
|
|
<!-- Desktop Container Test -->
|
|
<div class="test-section">
|
|
<h2>Desktop Container Test</h2>
|
|
<div class="test-description">
|
|
Test the container minigame in desktop mode with desktop wallpaper and scattered icons.
|
|
</div>
|
|
<button class="test-button success" onclick="testDesktopContainer()">Test Desktop Container</button>
|
|
</div>
|
|
|
|
<!-- Desktop with Notes Test -->
|
|
<div class="test-section">
|
|
<h2>Desktop with Notes Test</h2>
|
|
<div class="test-description">
|
|
Test desktop mode with notes that should trigger the notes minigame when clicked.
|
|
</div>
|
|
<button class="test-button" onclick="testDesktopWithNotes()">Test Desktop with Notes</button>
|
|
</div>
|
|
|
|
<!-- Empty Desktop Test -->
|
|
<div class="test-section">
|
|
<h2>Empty Desktop Test</h2>
|
|
<div class="test-description">
|
|
Test desktop mode with no items to see the empty desktop message.
|
|
</div>
|
|
<button class="test-button" onclick="testEmptyDesktop()">Test Empty Desktop</button>
|
|
</div>
|
|
|
|
<!-- Test Results -->
|
|
<div class="test-results">
|
|
<h3>Test Results</h3>
|
|
<pre id="test-results">Click a test button to see results here...</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Include Phaser first -->
|
|
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
|
|
|
|
<!-- Include the minigame framework -->
|
|
<script type="module">
|
|
// Import the minigame framework and container minigame
|
|
import { MinigameFramework } from './js/minigames/framework/minigame-manager.js';
|
|
import { ContainerMinigame } from './js/minigames/container/container-minigame.js';
|
|
|
|
// Initialize the framework
|
|
window.MinigameFramework = MinigameFramework;
|
|
MinigameFramework.registerScene('container', ContainerMinigame);
|
|
|
|
// Mock game object
|
|
window.game = {
|
|
sound: {
|
|
play: function(soundName) {
|
|
console.log('Playing sound:', soundName);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Mock game alert function
|
|
window.gameAlert = function(message, type, title, duration) {
|
|
console.log(`[${type.toUpperCase()}] ${title}: ${message}`);
|
|
updateTestResults(`[${type.toUpperCase()}] ${title}: ${message}`);
|
|
};
|
|
|
|
// Mock inventory functions
|
|
window.addToInventory = function(item) {
|
|
console.log('Added to inventory:', item);
|
|
updateTestResults(`Added to inventory: ${item.name}`);
|
|
};
|
|
|
|
window.removeFromInventory = function(item) {
|
|
console.log('Removed from inventory:', item);
|
|
updateTestResults(`Removed from inventory: ${item.name}`);
|
|
};
|
|
|
|
// Test functions - define them globally
|
|
function testStandardContainer() {
|
|
updateTestResults("Starting standard container test...");
|
|
|
|
const mockContainer = {
|
|
scenarioData: {
|
|
name: "Test Container",
|
|
observations: "A standard container for testing"
|
|
},
|
|
name: "container"
|
|
};
|
|
|
|
const contents = [
|
|
{
|
|
id: "item1",
|
|
name: "Test Item 1",
|
|
type: "key",
|
|
takeable: true
|
|
},
|
|
{
|
|
id: "item2",
|
|
name: "Test Item 2",
|
|
type: "document",
|
|
takeable: true
|
|
}
|
|
];
|
|
|
|
MinigameFramework.startMinigame('container', null, {
|
|
title: 'Standard Container Test',
|
|
containerItem: mockContainer,
|
|
contents: contents,
|
|
isTakeable: false,
|
|
desktopMode: false,
|
|
onComplete: (success, result) => {
|
|
updateTestResults(`Standard container test completed. Success: ${success}, Result: ${JSON.stringify(result)}`);
|
|
}
|
|
});
|
|
};
|
|
|
|
function testDesktopContainer() {
|
|
updateTestResults("Starting desktop container test...");
|
|
|
|
const mockContainer = {
|
|
scenarioData: {
|
|
name: "Computer Desktop",
|
|
observations: "A computer desktop with scattered files and applications"
|
|
},
|
|
name: "computer"
|
|
};
|
|
|
|
const contents = [
|
|
{
|
|
id: "file1",
|
|
name: "Secret Document",
|
|
type: "document",
|
|
takeable: true
|
|
},
|
|
{
|
|
id: "file2",
|
|
name: "Encryption Key",
|
|
type: "key",
|
|
takeable: true
|
|
},
|
|
{
|
|
id: "file3",
|
|
name: "Password List",
|
|
type: "notes",
|
|
takeable: true
|
|
},
|
|
{
|
|
id: "file4",
|
|
name: "Backup Files",
|
|
type: "folder",
|
|
takeable: true
|
|
}
|
|
];
|
|
|
|
MinigameFramework.startMinigame('container', null, {
|
|
title: 'Desktop Container Test',
|
|
containerItem: mockContainer,
|
|
contents: contents,
|
|
isTakeable: false,
|
|
desktopMode: true,
|
|
onComplete: (success, result) => {
|
|
updateTestResults(`Desktop container test completed. Success: ${success}, Result: ${JSON.stringify(result)}`);
|
|
}
|
|
});
|
|
};
|
|
|
|
function testDesktopWithNotes() {
|
|
updateTestResults("Starting desktop with notes test...");
|
|
|
|
const mockContainer = {
|
|
scenarioData: {
|
|
name: "Office Computer",
|
|
observations: "An office computer with important documents"
|
|
},
|
|
name: "computer"
|
|
};
|
|
|
|
const contents = [
|
|
{
|
|
id: "notes1",
|
|
name: "Meeting Notes",
|
|
type: "notes",
|
|
takeable: true,
|
|
readable: true,
|
|
text: "Important meeting notes about the project..."
|
|
},
|
|
{
|
|
id: "file1",
|
|
name: "Project Files",
|
|
type: "document",
|
|
takeable: true
|
|
}
|
|
];
|
|
|
|
MinigameFramework.startMinigame('container', null, {
|
|
title: 'Desktop with Notes Test',
|
|
containerItem: mockContainer,
|
|
contents: contents,
|
|
isTakeable: false,
|
|
desktopMode: true,
|
|
onComplete: (success, result) => {
|
|
updateTestResults(`Desktop with notes test completed. Success: ${success}, Result: ${JSON.stringify(result)}`);
|
|
}
|
|
});
|
|
};
|
|
|
|
function testEmptyDesktop() {
|
|
updateTestResults("Starting empty desktop test...");
|
|
|
|
const mockContainer = {
|
|
scenarioData: {
|
|
name: "Empty Desktop",
|
|
observations: "A clean desktop with no files"
|
|
},
|
|
name: "computer"
|
|
};
|
|
|
|
const contents = [];
|
|
|
|
MinigameFramework.startMinigame('container', null, {
|
|
title: 'Empty Desktop Test',
|
|
containerItem: mockContainer,
|
|
contents: contents,
|
|
isTakeable: false,
|
|
desktopMode: true,
|
|
onComplete: (success, result) => {
|
|
updateTestResults(`Empty desktop test completed. Success: ${success}, Result: ${JSON.stringify(result)}`);
|
|
}
|
|
});
|
|
};
|
|
|
|
function updateTestResults(message) {
|
|
const resultsElement = document.getElementById('test-results');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
resultsElement.textContent += `[${timestamp}] ${message}\n`;
|
|
resultsElement.scrollTop = resultsElement.scrollHeight;
|
|
}
|
|
|
|
// Make functions globally available
|
|
window.testStandardContainer = testStandardContainer;
|
|
window.testDesktopContainer = testDesktopContainer;
|
|
window.testDesktopWithNotes = testDesktopWithNotes;
|
|
window.testEmptyDesktop = testEmptyDesktop;
|
|
|
|
// Initialize test results
|
|
updateTestResults("Container desktop mode test suite loaded and ready.");
|
|
</script>
|
|
</body>
|
|
</html>
|