99 lines
3.2 KiB
HTML
99 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Player Connect Messages</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
#messages {
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
height: 400px;
|
|
overflow-y: scroll;
|
|
}
|
|
.message {
|
|
border-bottom: 1px solid #eee;
|
|
padding: 5px 0;
|
|
}
|
|
#player-count {
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Player Connect Messages</h1>
|
|
<div id="player-count">Current Players: 0</div>
|
|
<div id="messages"></div>
|
|
|
|
<script>
|
|
function fetchMessages() {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('GET', 'http://localhost:8000/loginmessages', true);
|
|
xhr.onload = function() {
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
const data = JSON.parse(xhr.responseText);
|
|
console.log('Fetched messages:', data);
|
|
updateMessages(data);
|
|
} else {
|
|
console.error('Error fetching messages:', xhr.statusText);
|
|
}
|
|
};
|
|
xhr.onerror = function() {
|
|
console.error('Network error while fetching messages');
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function fetchPlayerCount() {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('GET', 'http://localhost:8000/players', true);
|
|
xhr.onload = function() {
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
const data = JSON.parse(xhr.responseText);
|
|
console.log('Fetched player count:', data.length);
|
|
updatePlayerCount(data.length);
|
|
} else {
|
|
console.error('Error fetching player count:', xhr.statusText);
|
|
}
|
|
};
|
|
xhr.onerror = function() {
|
|
console.error('Network error while fetching player count');
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function updateMessages(messages) {
|
|
const messagesDiv = document.getElementById('messages');
|
|
messagesDiv.innerHTML = '';
|
|
messages.forEach(message => {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = 'message';
|
|
messageDiv.textContent = message;
|
|
messagesDiv.appendChild(messageDiv);
|
|
});
|
|
console.log('Updated messages displayed');
|
|
}
|
|
|
|
function updatePlayerCount(count) {
|
|
const playerCountDiv = document.getElementById('player-count');
|
|
playerCountDiv.textContent = `Current Players: ${count}`;
|
|
}
|
|
|
|
// Fetch messages every 5 seconds
|
|
setInterval(fetchMessages, 5000);
|
|
|
|
// Fetch player count every 5 seconds
|
|
setInterval(fetchPlayerCount, 5000);
|
|
|
|
// Initial fetch
|
|
fetchMessages();
|
|
fetchPlayerCount();
|
|
</script>
|
|
</body>
|
|
</html>
|