229 lines
8.0 KiB
HTML
229 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Multiplayer Test</title>
|
|
<script src="https://unpkg.com/colyseus.js@^0.16.0/dist/colyseus.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
}
|
|
.connected {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.disconnected {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.queued {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
.log {
|
|
background-color: #f8f9fa;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.btn-primary {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
.btn-secondary {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Multiplayer Test</h1>
|
|
|
|
<div id="status" class="status disconnected">
|
|
Status: Disconnected
|
|
</div>
|
|
|
|
<div>
|
|
<button id="connectBtn" class="btn-primary" onclick="connectToRoom()">Connect to Room</button>
|
|
<button id="disconnectBtn" class="btn-secondary" onclick="disconnectFromRoom()" disabled>Disconnect</button>
|
|
<button id="readyBtn" class="btn-primary" onclick="markReady()" disabled>Mark Ready</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Room Info</h3>
|
|
<p>Room ID: <span id="roomId">-</span></p>
|
|
<p>Participants: <span id="participants">0/1</span></p>
|
|
<p>Queue Position: <span id="queuePosition">-</span></p>
|
|
<p>Status: <span id="roomStatus">-</span></p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Log</h3>
|
|
<div id="log" class="log"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let client = null;
|
|
let room = null;
|
|
let isConnected = false;
|
|
|
|
const statusDiv = document.getElementById('status');
|
|
const connectBtn = document.getElementById('connectBtn');
|
|
const disconnectBtn = document.getElementById('disconnectBtn');
|
|
const readyBtn = document.getElementById('readyBtn');
|
|
const roomIdSpan = document.getElementById('roomId');
|
|
const participantsSpan = document.getElementById('participants');
|
|
const queuePositionSpan = document.getElementById('queuePosition');
|
|
const roomStatusSpan = document.getElementById('roomStatus');
|
|
const logDiv = document.getElementById('log');
|
|
|
|
function log(message) {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const logMessage = `[${timestamp}] ${message}`;
|
|
logDiv.textContent += logMessage + '\n';
|
|
logDiv.scrollTop = logDiv.scrollHeight;
|
|
console.log(logMessage);
|
|
}
|
|
|
|
function updateStatus(status, className) {
|
|
statusDiv.textContent = `Status: ${status}`;
|
|
statusDiv.className = `status ${className}`;
|
|
}
|
|
|
|
function updateUI() {
|
|
connectBtn.disabled = isConnected;
|
|
disconnectBtn.disabled = !isConnected;
|
|
readyBtn.disabled = !isConnected;
|
|
}
|
|
|
|
async function connectToRoom() {
|
|
try {
|
|
log('Connecting to Colyseus server...');
|
|
|
|
const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
|
|
const host = location.hostname;
|
|
const port = '8080';
|
|
|
|
client = new Colyseus.Client(`${protocol}://${host}:${port}`);
|
|
|
|
log('Joining experiment room...');
|
|
room = await client.joinOrCreate('experiment_room', {
|
|
experimentId: 'test-experiment-123',
|
|
userAgent: navigator.userAgent,
|
|
ipAddress: null
|
|
});
|
|
|
|
isConnected = true;
|
|
updateStatus('Connected', 'connected');
|
|
updateUI();
|
|
|
|
roomIdSpan.textContent = room.roomId;
|
|
log(`Connected to room: ${room.roomId}`);
|
|
|
|
// Handle room state changes
|
|
room.onStateChange((state) => {
|
|
log(`Room state updated: ${JSON.stringify(state, null, 2)}`);
|
|
participantsSpan.textContent = `${state.currentParticipants}/${state.maxParticipants}`;
|
|
roomStatusSpan.textContent = state.status;
|
|
});
|
|
|
|
// Handle messages
|
|
room.onMessage('queued', (message) => {
|
|
log(`Queued: ${JSON.stringify(message)}`);
|
|
updateStatus(`Queued (Position: ${message.position})`, 'queued');
|
|
queuePositionSpan.textContent = message.position;
|
|
});
|
|
|
|
room.onMessage('admitted', (message) => {
|
|
log(`Admitted: ${JSON.stringify(message)}`);
|
|
updateStatus('Admitted', 'connected');
|
|
queuePositionSpan.textContent = '-';
|
|
});
|
|
|
|
room.onMessage('joined', (message) => {
|
|
log(`Joined: ${JSON.stringify(message)}`);
|
|
updateStatus('Joined', 'connected');
|
|
queuePositionSpan.textContent = '-';
|
|
});
|
|
|
|
room.onMessage('queue_update', (message) => {
|
|
log(`Queue update: ${JSON.stringify(message)}`);
|
|
queuePositionSpan.textContent = message.position;
|
|
});
|
|
|
|
room.onMessage('experiment_started', (message) => {
|
|
log(`Experiment started: ${JSON.stringify(message)}`);
|
|
updateStatus('Experiment Running', 'connected');
|
|
});
|
|
|
|
room.onError((code, message) => {
|
|
log(`Room error: ${code} - ${message}`);
|
|
updateStatus('Error', 'disconnected');
|
|
});
|
|
|
|
room.onLeave((code) => {
|
|
log(`Left room with code: ${code}`);
|
|
isConnected = false;
|
|
updateStatus('Disconnected', 'disconnected');
|
|
updateUI();
|
|
});
|
|
|
|
} catch (error) {
|
|
log(`Connection error: ${error.message}`);
|
|
updateStatus('Connection Failed', 'disconnected');
|
|
isConnected = false;
|
|
updateUI();
|
|
}
|
|
}
|
|
|
|
function disconnectFromRoom() {
|
|
if (room) {
|
|
log('Disconnecting from room...');
|
|
room.leave();
|
|
room = null;
|
|
client = null;
|
|
isConnected = false;
|
|
updateStatus('Disconnected', 'disconnected');
|
|
updateUI();
|
|
|
|
// Reset UI
|
|
roomIdSpan.textContent = '-';
|
|
participantsSpan.textContent = '0/1';
|
|
queuePositionSpan.textContent = '-';
|
|
roomStatusSpan.textContent = '-';
|
|
}
|
|
}
|
|
|
|
function markReady() {
|
|
if (room) {
|
|
log('Marking as ready...');
|
|
room.send('ready', { participantId: room.sessionId });
|
|
}
|
|
}
|
|
|
|
// Initial UI update
|
|
updateUI();
|
|
log('Multiplayer test page loaded');
|
|
</script>
|
|
</body>
|
|
</html> |