mid switch to Colyseum
This commit is contained in:
Shaheed Azaad
229
test-multiplayer.html
Normal file
229
test-multiplayer.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user