mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
e73a6a038b
- Created a new JSON scenario file for testing NPC sprite functionality. - Implemented a simple HTTP server with caching headers for development purposes. - Added an HTML page for testing NPC interactions, including system checks and game controls. - Introduced a separate HTML page for testing item delivery through person chat interactions.
235 lines
8.1 KiB
HTML
235 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Person Chat - Item Delivery Test</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/minigames-framework.css">
|
|
<link rel="stylesheet" href="css/phone-chat-minigame.css">
|
|
|
|
<style>
|
|
body {
|
|
background: #1a1a1a;
|
|
color: white;
|
|
font-family: 'VT323', monospace;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.test-button {
|
|
background: #3498db;
|
|
color: white;
|
|
border: 2px solid #2980b9;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
font-family: 'VT323', monospace;
|
|
font-size: 16px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.test-button:hover {
|
|
background: #2980b9;
|
|
}
|
|
|
|
.test-info {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 20px;
|
|
border: 2px solid #2980b9;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
#minigame-container {
|
|
background: #000;
|
|
border: 2px solid #2980b9;
|
|
min-height: 600px;
|
|
margin: 20px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>🎭 Person Chat - Item Delivery Test</h1>
|
|
|
|
<div class="test-info">
|
|
<h3>Test Instructions:</h3>
|
|
<ol>
|
|
<li>Click "Start Person Chat" button below</li>
|
|
<li>Talk to the NPC by clicking on their portrait</li>
|
|
<li>Choose "Do you have any items for me?"</li>
|
|
<li>Choose "Who are you?" first to build trust (optional)</li>
|
|
<li>Then choose "Do you have any items for me?" again</li>
|
|
<li>NPC should give you a lockpick set</li>
|
|
<li>Check browser console for "give_item" tag processing</li>
|
|
<li>Verify inventory shows the lockpick item</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<button class="test-button" onclick="startPersonChat()">🎭 Start Person Chat</button>
|
|
<button class="test-button" onclick="checkInventory()">📦 Check Inventory</button>
|
|
<button class="test-button" onclick="clearConsole()">🧹 Clear Console</button>
|
|
|
|
<div id="minigame-container"></div>
|
|
|
|
<div id="debug-output" class="test-info" style="margin-top: 20px;">
|
|
<h3>Debug Output:</h3>
|
|
<pre id="debug-log" style="background: #000; padding: 10px; overflow-y: auto; max-height: 300px; border: 1px solid #2980b9;"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phaser -->
|
|
<script src="assets/vendor/phaser.js"></script>
|
|
|
|
<!-- EasyStar -->
|
|
<script src="assets/vendor/easystar.js"></script>
|
|
|
|
<!-- Ink -->
|
|
<script src="assets/vendor/ink.js"></script>
|
|
|
|
<!-- Main Game -->
|
|
<script type="module">
|
|
import { PersonChatMinigame } from './js/minigames/person-chat/person-chat-minigame.js';
|
|
import { MinigameFramework } from './js/minigames/framework/minigame-manager.js';
|
|
|
|
// Set up console capture
|
|
const originalLog = console.log;
|
|
const originalWarn = console.warn;
|
|
const originalError = console.error;
|
|
|
|
let logBuffer = [];
|
|
|
|
function captureLog(...args) {
|
|
logBuffer.push('[LOG] ' + args.join(' '));
|
|
updateDebugOutput();
|
|
}
|
|
|
|
function captureWarn(...args) {
|
|
logBuffer.push('[WARN] ' + args.join(' '));
|
|
updateDebugOutput();
|
|
}
|
|
|
|
function captureError(...args) {
|
|
logBuffer.push('[ERROR] ' + args.join(' '));
|
|
updateDebugOutput();
|
|
}
|
|
|
|
function updateDebugOutput() {
|
|
const debugLog = document.getElementById('debug-log');
|
|
const recentLogs = logBuffer.slice(-50);
|
|
debugLog.textContent = recentLogs.join('\n');
|
|
debugLog.parentElement.scrollTop = debugLog.parentElement.scrollHeight;
|
|
}
|
|
|
|
console.log = captureLog;
|
|
console.warn = captureWarn;
|
|
console.error = captureError;
|
|
|
|
// Initialize a minimal Phaser game for testing
|
|
let minigameContainer = null;
|
|
|
|
window.startPersonChat = async function() {
|
|
captureLog('🎭 Starting person-chat minigame...');
|
|
|
|
try {
|
|
// Set up minimal globals for testing
|
|
window.game = { events: { emit: () => {} } };
|
|
window.player = { x: 0, y: 0 };
|
|
|
|
// Initialize NPC manager (minimal)
|
|
window.npcManager = {
|
|
getNPC: (id) => ({
|
|
id: id,
|
|
displayName: 'Front NPC',
|
|
npcType: 'person',
|
|
spriteSheet: 'hacker',
|
|
spriteTalk: 'assets/characters/hacker-talk.png',
|
|
storyPath: 'scenarios/ink/helper-npc.json'
|
|
})
|
|
};
|
|
|
|
// Initialize MinigameFramework
|
|
window.MinigameFramework = new MinigameFramework();
|
|
|
|
// Create minigame container
|
|
const container = document.getElementById('minigame-container');
|
|
container.innerHTML = '';
|
|
|
|
const minigame = new PersonChatMinigame(container, {
|
|
npcId: 'test_npc_front',
|
|
title: 'Conversation with NPC'
|
|
});
|
|
|
|
minigame.init();
|
|
minigame.start();
|
|
|
|
captureLog('✅ Person-chat minigame started');
|
|
} catch (error) {
|
|
captureError('❌ Error starting minigame:', error);
|
|
}
|
|
};
|
|
|
|
window.checkInventory = function() {
|
|
captureLog('📦 Current inventory:', window.inventory || 'No inventory object');
|
|
};
|
|
|
|
window.clearConsole = function() {
|
|
logBuffer = [];
|
|
document.getElementById('debug-log').textContent = '';
|
|
};
|
|
|
|
// Set up NPCGameBridge for testing
|
|
window.NPCGameBridge = {
|
|
giveItem: (itemType, options) => {
|
|
captureLog(`📦 NPCGameBridge.giveItem called with: ${itemType}`, options);
|
|
|
|
// Simulate giving the item
|
|
if (!window.inventory) {
|
|
window.inventory = [];
|
|
}
|
|
|
|
const item = {
|
|
id: itemType,
|
|
name: options.name || itemType,
|
|
texture: itemType,
|
|
type: itemType
|
|
};
|
|
|
|
window.inventory.push(item);
|
|
captureLog(`✅ Item added to inventory:`, item);
|
|
|
|
return { success: true, message: 'Item given' };
|
|
},
|
|
|
|
unlockDoor: (roomId) => {
|
|
captureLog(`🔓 Unlocking door: ${roomId}`);
|
|
return { success: true };
|
|
},
|
|
|
|
setObjective: (text) => {
|
|
captureLog(`🎯 Setting objective: ${text}`);
|
|
},
|
|
|
|
revealSecret: (id, data) => {
|
|
captureLog(`🔍 Revealing secret: ${id}`);
|
|
},
|
|
|
|
addNote: (title, content) => {
|
|
captureLog(`📝 Adding note: ${title}`);
|
|
}
|
|
};
|
|
|
|
captureLog('✅ Test environment initialized');
|
|
captureLog('Click "Start Person Chat" to begin testing');
|
|
</script>
|
|
</body>
|
|
</html>
|