Updating event listeners and API to use the new library

2024-06-14 03:30:10 +02:00
parent 20c2e1ae3c
commit ef3c2fc1d3
4 changed files with 244 additions and 72 deletions
--- a/tester.html
+++ b/tester.html
@@ -0,0 +1,98 @@
+<!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>