Use javascript modules

src/client/resources/web/index.html

@@ -21,9 +21,6 @@
 </div>
 <div id="status" class="status-disconnected">Disconnected</div>
 
-<script type="application/javascript" src="js/util.js"></script>
-<script type="application/javascript" src="js/translations.js"></script>
-<script type="application/javascript" src="js/message_parsing.js"></script>
-<script type="application/javascript" src="js/chat.js"></script>
+<script type="module" src="js/chat.mjs"></script>
 </body>
 </html>

src/client/resources/web/js/chat.js → src/client/resources/web/js/chat.mjs

@@ -1,163 +1,169 @@
-// @ts-check
-'use strict';
-
-/** @type {WebSocket | null} */
-let ws = null;
-const wsPort = parseInt(location.port, 10) + 1;
-let reconnectAttempts = 0;
-const maxReconnectAttempts = 300; // TODO: add a reconnect button after automatic retries are done.
-
-// TODO: probably make max stored messages a config
-const maxStoredMessages = 5000; // Max number of messages to keep in storage. 
-
-// Used for the favicon
-let messageCount = 0;
-
-document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') {
-        messageCount = 0;
-        faviconCounter(0);
-    }
-});
-
-// Load previous messages when page loads
-function loadStoredMessages() {
-    const stored = localStorage.getItem('chatMessagesJSON');
-    if (stored) {
-        /** @type {any[]} */
-        const messages = JSON.parse(stored);
-        // Reverse the array to show messages in correct order
-        messages.reverse().forEach(msg => addMessage(msg, false));
-    }
-}
-
-/**
- * Store messages in localStorage.
- * @param {any[]} json
- */
-function storeMessage(json) {
-    try {
-        let messages = [];
-        const stored = localStorage.getItem('chatMessagesJSON');
-        if (stored) {
-            messages = /** @type {any[]} */ (JSON.parse(stored));
-        }
-
-        messages.unshift(json); // Add new message at start
-
-        // Keep only the last maxStoredMessages messages
-        if (messages.length > maxStoredMessages) {
-            messages = messages.slice(0, maxStoredMessages);
-        }
-
-        localStorage.setItem('chatMessagesJSON', JSON.stringify(messages));
-    } catch (e) {
-        console.warn('Failed to store message:', e);
-    }
-}
-
-/**
- * Add a message to the chat.
- * @param {any} json
- * @param {boolean} store
- */
-function addMessage(json, store = true) {
-    console.log(json);
-    const div = document.createElement('div');
-    div.className = 'message';
-    div.innerHTML = parseMinecraftText(json);
-    const messages = /** @type {HTMLDivElement | null} */ (document.getElementById('messages'));
-    if (!messages) return;
-
-    messages.insertBefore(div, messages.firstChild);
-
-    if (store) {
-        // Note, we store the original text as on reload all messages go through this function again anyway. 
-        storeMessage(json);
-    }
-}
-
-function connect() {
-    ws = new WebSocket(`ws://localhost:${wsPort}`);
-
-    ws.onopen = function () {
-        console.log('Connected to server');
-        const status = /** @type {HTMLDivElement | null} */ (document.getElementById('status'));
-        if (!status) return;
-
-        status.textContent = 'Connected';
-        status.className = 'status-connected';
-        reconnectAttempts = 0;
-    };
-
-    ws.onclose = function () {
-        const status = /** @type {HTMLDivElement | null} */ (document.getElementById('status'));
-        if (!status) return;
-
-        status.textContent = 'Disconnected';
-        status.className = 'status-disconnected';
-        console.log('Connection closed. Attempting to reconnect...');
-
-        if (reconnectAttempts < maxReconnectAttempts) {
-            reconnectAttempts++;
-            setTimeout(connect, 2000);
-        }
-    };
-
-    ws.onerror = function (error) {
-        console.error('WebSocket error:', error);
-        const status = /** @type {HTMLDivElement | null} */ (document.getElementById('status'));
-        if (!status) return;
-
-        status.textContent = 'Error: ' + error;
-    };
-
-    ws.onmessage = function (event) {
-        if (document.visibilityState !== 'visible') {
-            messageCount++;
-            faviconCounter(messageCount);
-        }
-        addMessage(event.data);
-    };
-}
-
-function sendMessage() {
-    // TODO: cut message up if it is too long and send in parts. Possibly do this server side... 
-    const input = /** @type {HTMLTextAreaElement | null} */ (document.getElementById('messageInput'));
-    if (!input) return;
-
-    console.log(ws);
-    console.log(ws?.readyState);
-    console.log(input.value);
-    if (ws && ws.readyState === WebSocket.OPEN && input.value.trim()) {
-        ws.send(input.value);
-        input.value = '';
-    } else if (!input.value.trim()) {
-        return;
-    } else {
-        console.log('WebSocket is not connected');
-        const status = /** @type {HTMLDivElement | null} */ (document.getElementById('status'));
-        if (!status) return;
-
-        status.textContent = 'Not connected - message not sent';
-        status.className = 'status-disconnected';
-    }
-}
-
-// Start connection and load stored messages when page loads
-connect();
-loadStoredMessages();
-
-// Allow Enter key to send messages
-const input = /** @type {HTMLTextAreaElement | null} */ (document.getElementById('messageInput'));
-if (input) {
-    // Focus input on load
-    input.focus();
-
-    input.addEventListener('keypress', function (e) {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            sendMessage();
-        }
-    });
-}
+// @ts-check
+'use strict';
+
+import { faviconCounter } from './util.mjs';
+import { parseMinecraftText, initializeObfuscation } from './message_parsing.mjs';
+/** @typedef {import('./message_parsing.mjs').Component} Component */
+
+/** @type {WebSocket | null} */
+let ws = null;
+const wsPort = parseInt(location.port, 10) + 1;
+let reconnectAttempts = 0;
+const maxReconnectAttempts = 300; // TODO: add a reconnect button after automatic retries are done.
+
+// TODO: probably make max stored messages a config
+const maxStoredMessages = 5000; // Max number of messages to keep in storage. 
+
+// Used for the favicon
+let messageCount = 0;
+
+document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+        messageCount = 0;
+        faviconCounter(0);
+    }
+});
+
+// Load previous messages when page loads
+function loadStoredMessages() {
+    const stored = localStorage.getItem('chatMessagesJSON');
+    if (stored) {
+        /** @type {Component[]} */
+        const messages = JSON.parse(stored);
+        // Reverse the array to show messages in correct order
+        messages.reverse().forEach(msg => addMessage(msg, false));
+    }
+}
+
+/**
+ * Store messages in localStorage.
+ * @param {Component} json
+ */
+function storeMessage(json) {
+    try {
+        /** @type {Component[]} */
+        let messages = [];
+        const stored = localStorage.getItem('chatMessagesJSON');
+        if (stored) {
+            messages = JSON.parse(stored);
+        }
+
+        messages.unshift(json); // Add new message at start
+
+        // Keep only the last maxStoredMessages messages
+        if (messages.length > maxStoredMessages) {
+            messages = messages.slice(0, maxStoredMessages);
+        }
+
+        localStorage.setItem('chatMessagesJSON', JSON.stringify(messages));
+    } catch (e) {
+        console.warn('Failed to store message:', e);
+    }
+}
+
+/**
+ * Add a message to the chat.
+ * @param {Component} json
+ * @param {boolean} store
+ */
+function addMessage(json, store = true) {
+    console.log(json);
+    const div = document.createElement('div');
+    div.className = 'message';
+    div.innerHTML = parseMinecraftText(json);
+    const messages = /** @type {HTMLDivElement | null} */ (document.getElementById('messages'));
+    if (!messages) return;
+
+    messages.insertBefore(div, messages.firstChild);
+
+    if (store) {
+        // Note, we store the original text as on reload all messages go through this function again anyway. 
+        storeMessage(json);
+    }
+}
+
+function connect() {
+    ws = new WebSocket(`ws://localhost:${wsPort}`);
+
+    ws.onopen = function () {
+        console.log('Connected to server');
+        const status = /** @type {HTMLDivElement | null} */ (document.getElementById('status'));
+        if (!status) return;
+
+        status.textContent = 'Connected';
+        status.className = 'status-connected';
+        reconnectAttempts = 0;
+    };
+
+    ws.onclose = function () {
+        const status = /** @type {HTMLDivElement | null} */ (document.getElementById('status'));
+        if (!status) return;
+
+        status.textContent = 'Disconnected';
+        status.className = 'status-disconnected';
+        console.log('Connection closed. Attempting to reconnect...');
+
+        if (reconnectAttempts < maxReconnectAttempts) {
+            reconnectAttempts++;
+            setTimeout(connect, 2000);
+        }
+    };
+
+    ws.onerror = function (error) {
+        console.error('WebSocket error:', error);
+        const status = /** @type {HTMLDivElement | null} */ (document.getElementById('status'));
+        if (!status) return;
+
+        status.textContent = 'Error: ' + error;
+    };
+
+    ws.onmessage = function (event) {
+        if (document.visibilityState !== 'visible') {
+            messageCount++;
+            faviconCounter(messageCount);
+        }
+        addMessage(event.data);
+    };
+}
+
+function sendMessage() {
+    // TODO: cut message up if it is too long and send in parts. Possibly do this server side... 
+    const input = /** @type {HTMLTextAreaElement | null} */ (document.getElementById('messageInput'));
+    if (!input) return;
+
+    console.log(ws);
+    console.log(ws?.readyState);
+    console.log(input.value);
+    if (ws && ws.readyState === WebSocket.OPEN && input.value.trim()) {
+        ws.send(input.value);
+        input.value = '';
+    } else if (!input.value.trim()) {
+        return;
+    } else {
+        console.log('WebSocket is not connected');
+        const status = /** @type {HTMLDivElement | null} */ (document.getElementById('status'));
+        if (!status) return;
+
+        status.textContent = 'Not connected - message not sent';
+        status.className = 'status-disconnected';
+    }
+}
+
+// Start connection and load stored messages when page loads
+connect();
+initializeObfuscation();
+loadStoredMessages();
+
+// Allow Enter key to send messages
+const input = /** @type {HTMLTextAreaElement | null} */ (document.getElementById('messageInput'));
+if (input) {
+    // Focus input on load
+    input.focus();
+
+    input.addEventListener('keypress', function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+}