Rim/codtracker-js
Rim/codtracker-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: migrate frontend code -- backend.js -> frontend.js

Browse Source
This commit is contained in:
Rim 2025-04-01 21:35:28 -04:00
parent 0df8728515
commit 2b90e3f567
4 changed files with 407 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app.js
View File

@ -895,6 +895,7 @@ app.post("/api/search", async (req, res) => {
} }
}); });
// Improved logging endpoint // Improved logging endpoint
app.post('/api/log', (req, res) => { app.post('/api/log', (req, res) => {
const clientIP = req.headers['x-forwarded-for'] || req.ip || req.connection.remoteAddress; const clientIP = req.headers['x-forwarded-for'] || req.ip || req.connection.remoteAddress;

1
src/index.html
View File

@ -32,6 +32,7 @@
<link rel="stylesheet" type="text/css" href="./src/css/styles.css"> <link rel="stylesheet" type="text/css" href="./src/css/styles.css">
<link rel="icon" type="image/x-icon" href="./src/images/favicon.ico"> <link rel="icon" type="image/x-icon" href="./src/images/favicon.ico">
<script src="./src/js/backend.js" defer></script> <script src="./src/js/backend.js" defer></script>
<script src="./src/js/frontend.js" defer></script>
<script src="./src/js/localStorage.js" defer></script> <script src="./src/js/localStorage.js" defer></script>
</head> </head>

409
src/js/backend.js
View File

@ -1,184 +1,20 @@
let tutorialDismissed = false; // Export the functions that frontend.js needs to call
let currentData = null; window.backendAPI = {
let outputFormat = "json"; fetchData,
jsonToYAML,
formatDuration,
formatEpochTime,
processTimestamps
};
window.appState = {
currentData: null,
outputFormat: "json",
tutorialDismissed: false
};
// Initialize once DOM is loaded
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
initTabSwitching(); // Backend-specific initialization
addEnterKeyListeners();
setupDownloadButton();
setupFormatSelector();
setupProcessingOptions();
setupTimeOptions();
addSyncListeners();
});
// Tab switching logic
function initTabSwitching() {
document.querySelectorAll(".tab").forEach((tab) => {
tab.addEventListener("click", () => {
document
.querySelectorAll(".tab")
.forEach((t) => t.classList.remove("active"));
document
.querySelectorAll(".tab-content")
.forEach((c) => c.classList.remove("active"));
tab.classList.add("active");
const tabId = tab.getAttribute("data-tab");
document.getElementById(`${tabId}-tab`).classList.add("active");
});
});
}
// Setup processing options (sanitize/replace)
function setupProcessingOptions() {
document.getElementById("sanitizeOption").addEventListener("change", function() {
if (currentData) {
// Re-fetch with new options
const activeTab = document.querySelector(".tab.active").getAttribute("data-tab");
triggerActiveTabButton();
}
});
document.getElementById("replaceKeysOption").addEventListener("change", function() {
if (currentData) {
// Re-fetch with new options
const activeTab = document.querySelector(".tab.active").getAttribute("data-tab");
triggerActiveTabButton();
}
});
}
// Setup format selector
function setupFormatSelector() {
document.getElementById("outputFormat").addEventListener("change", function() {
outputFormat = this.value;
if (currentData) {
displayResults(currentData);
}
});
}
// Fetch stats
document.getElementById("fetchStats").addEventListener("click", async () => {
const username = document.getElementById("username").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("platform").value;
const game = document.getElementById("game").value;
const apiCall = document.getElementById("apiCall").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
await fetchData("/api/stats", {
username,
ssoToken,
platform,
game,
apiCall,
sanitize,
replaceKeys
});
});
// Fetch match history
document.getElementById("fetchMatches").addEventListener("click", async () => {
const username = document.getElementById("matchUsername").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("matchPlatform").value;
const game = document.getElementById("matchGame").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
await fetchData("/api/matches", {
username,
ssoToken,
platform,
game,
sanitize,
replaceKeys
});
});
// Fetch match details
document.getElementById("fetchMatchInfo").addEventListener("click", async () => {
const matchId = document.getElementById("matchId").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("matchPlatform").value;
const game = document.getElementById("matchGame").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
if (!matchId) {
displayError("Match ID is required");
return;
}
await fetchData("/api/matchInfo", {
matchId,
ssoToken,
platform,
game,
sanitize,
replaceKeys
});
});
// Fetch user info
document.getElementById("fetchUserInfo").addEventListener("click", async () => {
const username = document.getElementById("userUsername").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("userPlatform").value;
const userCall = document.getElementById("userCall").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
// For event feed and identities, username is not required
if (
!username &&
userCall !== "eventFeed" &&
userCall !== "friendFeed" &&
userCall !== "identities"
) {
displayError("Username is required for this API call");
return;
}
await fetchData("/api/user", {
username,
ssoToken,
platform,
userCall,
sanitize,
replaceKeys
});
});
// Fuzzy search
document.getElementById("fuzzySearch").addEventListener("click", async () => {
const username = document.getElementById("searchUsername").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("searchPlatform").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
if (!username) {
displayError("Username is required for search");
return;
}
await fetchData("/api/search", {
username,
ssoToken,
platform,
sanitize,
replaceKeys
});
}); });
// YAML conversion function // YAML conversion function
@ -251,8 +87,8 @@ async function fetchData(endpoint, requestData) {
loadingElement.style.display = "block"; loadingElement.style.display = "block";
// Hide tutorial if not already dismissed // Hide tutorial if not already dismissed
if (!tutorialDismissed) { if (!window.appState.tutorialDismissed) {
tutorialDismissed = true; window.appState.tutorialDismissed = true;
document.querySelectorAll(".tutorial").forEach(element => { document.querySelectorAll(".tutorial").forEach(element => {
element.style.display = "none"; element.style.display = "none";
}); });
@ -260,7 +96,7 @@ async function fetchData(endpoint, requestData) {
// Validate request data // Validate request data
if (!requestData.ssoToken) { if (!requestData.ssoToken) {
displayError("SSO Token is required"); window.uiAPI.displayError("SSO Token is required");
loadingElement.style.display = "none"; loadingElement.style.display = "none";
return; return;
} }
@ -297,18 +133,18 @@ async function fetchData(endpoint, requestData) {
} }
if (data.error) { if (data.error) {
displayError(data.error); window.uiAPI.displayError(data.error);
} else if (data.status === "error") { } else if (data.status === "error") {
displayError(data.message || "An error occurred"); window.uiAPI.displayError(data.message || "An error occurred");
} else { } else {
currentData = data; window.appState.currentData = data;
displayResults(data); window.uiAPI.displayResults(data);
} }
} catch (error) { } catch (error) {
if (error.name === 'AbortError') { if (error.name === 'AbortError') {
displayError("Request timed out. Please try again."); window.uiAPI.displayError("Request timed out. Please try again.");
} else { } else {
displayError( window.uiAPI.displayError(
`Error: ${error.message || "An error occurred while fetching data."}` `Error: ${error.message || "An error occurred while fetching data."}`
); );
console.error("Fetch error:", error); console.error("Fetch error:", error);
@ -318,108 +154,6 @@ async function fetchData(endpoint, requestData) {
} }
} }
// Function to handle time and duration conversion
function displayResults(data) {
const resultsElement = document.getElementById("results");
const downloadContainer = document.getElementById("download-container");
// Apply time conversion if enabled
const convertTime = document.getElementById('convertTimeOption').checked;
const replaceKeys = document.getElementById('replaceKeysOption').checked;
let displayData = data;
if (convertTime || replaceKeys) {
const timezone = document.getElementById('timezoneSelect').value;
displayData = processTimestamps(structuredClone(data), timezone); // Use structured clone API instead of JSON.parse/stringify
// displayData = processTimestamps(JSON.parse(JSON.stringify(data)), timezone);
}
// Format the data
let formattedData = '';
if (outputFormat === 'yaml') {
formattedData = jsonToYAML(displayData);
document.getElementById("downloadJson").textContent = "Download YAML Data";
} else {
formattedData = JSON.stringify(displayData, null, 2);
document.getElementById("downloadJson").textContent = "Download JSON Data";
}
resultsElement.textContent = formattedData;
resultsElement.style.display = "block";
downloadContainer.style.display = "block";
}
// Helper function to display errors
function displayError(message) {
const errorElement = document.getElementById("error");
const loadingElement = document.getElementById("loading");
const resultsElement = document.getElementById("results");
errorElement.textContent = message;
loadingElement.style.display = "none";
// Clear previous results to ensure they can be redrawn
resultsElement.style.display = "none";
resultsElement.textContent = "";
// Keep tutorial hidden if previously dismissed
if (tutorialDismissed) {
document.querySelectorAll(".tutorial").forEach(element => {
element.style.display = "none";
});
}
}
function addEnterKeyListeners() {
// Use event delegation for handling Enter key press
document.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
// Get the active element
const activeElement = document.activeElement;
if (!activeElement || !activeElement.id) return;
// Mapping of input fields to their submit buttons
const inputToButtonMapping = {
"ssoToken": null, // Will trigger active tab button
"username": null, // Will trigger active tab button
"matchUsername": "fetchMatches",
"matchId": "fetchMatchInfo",
"userUsername": "fetchUserInfo",
"searchUsername": "fuzzySearch"
};
if (activeElement.id in inputToButtonMapping) {
if (inputToButtonMapping[activeElement.id]) {
// Click the specific button
document.getElementById(inputToButtonMapping[activeElement.id]).click();
} else {
// Trigger the active tab button
triggerActiveTabButton();
}
}
}
});
}
function triggerActiveTabButton() {
const activeTab = document.querySelector(".tab.active").getAttribute("data-tab");
switch (activeTab) {
case "stats":
document.getElementById("fetchStats").click();
break;
case "matches":
document.getElementById("fetchMatches").click();
break;
case "user":
document.getElementById("fetchUserInfo").click();
break;
case "other":
document.getElementById("fuzzySearch").click();
break;
}
}
// Function to convert seconds to human readable duration // Function to convert seconds to human readable duration
function formatDuration(seconds) { function formatDuration(seconds) {
if (!seconds || isNaN(seconds)) return seconds; if (!seconds || isNaN(seconds)) return seconds;
@ -490,101 +224,6 @@ function processTimestamps(data, timezone, keysToConvert = ['date', 'dateAdded',
return result; return result;
} }
// Time options
function setupTimeOptions() {
const convertTimeCheckbox = document.getElementById('convertTimeOption');
const timezoneSelect = document.getElementById('timezoneSelect');
convertTimeCheckbox.addEventListener('change', function() {
timezoneSelect.disabled = !this.checked;
if (currentData) {
displayResults(currentData); // Refresh the display
}
});
timezoneSelect.addEventListener('change', function() {
if (currentData) {
displayResults(currentData); // Refresh the display
}
});
}
// Download Button
function setupDownloadButton() {
const downloadBtn = document.getElementById("downloadJson");
if (!downloadBtn) return;
downloadBtn.addEventListener("click", function() {
const resultsElement = document.getElementById("results");
const jsonData = resultsElement.textContent;
if (!jsonData) {
alert("No data to download");
return;
}
// Create a Blob with the data
const contentType = outputFormat === 'yaml' ? 'text/yaml' : 'application/json';
const blob = new Blob([jsonData], { type: contentType });
// Create a temporary link element
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
// Generate a filename with timestamp
const date = new Date();
const timestamp = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}_${String(date.getHours()).padStart(2, '0')}-${String(date.getMinutes()).padStart(2, '0')}`;
const extension = outputFormat === 'yaml' ? 'yaml' : 'json';
a.download = `cod_stats_${timestamp}.${extension}`;
// Trigger download
document.body.appendChild(a);
a.click();
// Clean up
document.body.removeChild(a);
});
}
// Function to synchronize username across tabs
function syncUsernames() {
const mainUsername = document.getElementById("username").value.trim();
// Only sync if there's a value
if (mainUsername) {
document.getElementById("matchUsername").value = mainUsername;
document.getElementById("userUsername").value = mainUsername;
document.getElementById("searchUsername").value = mainUsername;
}
// Also sync platform across tabs when it changes
const mainPlatform = document.getElementById("platform").value;
document.getElementById("matchPlatform").value = mainPlatform;
document.getElementById("userPlatform").value = mainPlatform;
document.getElementById("searchPlatform").value = mainPlatform;
}
// Sync listeners for persistent usernames
function addSyncListeners() {
// Add change listeners for username sync
document.getElementById("username").addEventListener("change", syncUsernames);
document.getElementById("matchUsername").addEventListener("change", function() {
document.getElementById("username").value = this.value;
syncUsernames();
});
document.getElementById("userUsername").addEventListener("change", function() {
document.getElementById("username").value = this.value;
syncUsernames();
});
document.getElementById("searchUsername").addEventListener("change", function() {
document.getElementById("username").value = this.value;
syncUsernames();
});
// Add change listeners for platform sync
document.getElementById("platform").addEventListener("change", syncUsernames);
}
// Initialize session tracking when the page loads // Initialize session tracking when the page loads
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Generate a unique session ID // Generate a unique session ID

380
src/js/frontend.js Normal file
View File

@ -0,0 +1,380 @@
window.uiAPI = {
displayResults,
displayError
};
// Initialize once DOM is loaded
document.addEventListener("DOMContentLoaded", function() {
initTabSwitching();
addEnterKeyListeners();
setupDownloadButton();
setupFormatSelector();
setupProcessingOptions();
setupTimeOptions();
addSyncListeners();
});
// Tab switching logic
function initTabSwitching() {
document.querySelectorAll(".tab").forEach((tab) => {
tab.addEventListener("click", () => {
document
.querySelectorAll(".tab")
.forEach((t) => t.classList.remove("active"));
document
.querySelectorAll(".tab-content")
.forEach((c) => c.classList.remove("active"));
tab.classList.add("active");
const tabId = tab.getAttribute("data-tab");
document.getElementById(`${tabId}-tab`).classList.add("active");
});
});
}
// Setup processing options (sanitize/replace)
function setupProcessingOptions() {
document.getElementById("sanitizeOption").addEventListener("change", function() {
if (window.appState.currentData) { // Call window.appState
// Re-fetch with new options
const activeTab = document.querySelector(".tab.active").getAttribute("data-tab");
triggerActiveTabButton();
}
});
document.getElementById("replaceKeysOption").addEventListener("change", function() {
if (window.appState.currentData) {
// Re-fetch with new options
const activeTab = document.querySelector(".tab.active").getAttribute("data-tab");
triggerActiveTabButton();
}
});
}
// Setup format selector
function setupFormatSelector() {
document.getElementById("outputFormat").addEventListener("change", function() {
window.appState.outputFormat = this.value;
if (window.appState.currentData) {
displayResults(window.appState.currentData);
}
});
}
// Fetch stats
document.getElementById("fetchStats").addEventListener("click", async () => {
const username = document.getElementById("username").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("platform").value;
const game = document.getElementById("game").value;
const apiCall = document.getElementById("apiCall").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
await window.backendAPI.fetchData("/api/stats", {
username,
ssoToken,
platform,
game,
apiCall,
sanitize,
replaceKeys
});
});
// Fetch match history
document.getElementById("fetchMatches").addEventListener("click", async () => {
const username = document.getElementById("matchUsername").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("matchPlatform").value;
const game = document.getElementById("matchGame").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
await window.backendAPI.fetchData("/api/matches", {
username,
ssoToken,
platform,
game,
sanitize,
replaceKeys
});
});
// Fetch match details
document.getElementById("fetchMatchInfo").addEventListener("click", async () => {
const matchId = document.getElementById("matchId").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("matchPlatform").value;
const game = document.getElementById("matchGame").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
if (!matchId) {
displayError("Match ID is required");
return;
}
await window.backendAPI.fetchData("/api/matchInfo", {
matchId,
ssoToken,
platform,
game,
sanitize,
replaceKeys
});
});
// Fetch user info
document.getElementById("fetchUserInfo").addEventListener("click", async () => {
const username = document.getElementById("userUsername").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("userPlatform").value;
const userCall = document.getElementById("userCall").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
// For event feed and identities, username is not required
if (
!username &&
userCall !== "eventFeed" &&
userCall !== "friendFeed" &&
userCall !== "identities"
) {
displayError("Username is required for this API call");
return;
}
await window.backendAPI.fetchData("/api/user", {
username,
ssoToken,
platform,
userCall,
sanitize,
replaceKeys
});
});
// Fuzzy search
document.getElementById("fuzzySearch").addEventListener("click", async () => {
const username = document.getElementById("searchUsername").value.trim();
const ssoToken = document.getElementById("ssoToken").value.trim();
const platform = document.getElementById("searchPlatform").value;
const sanitize = document.getElementById("sanitizeOption").checked;
const replaceKeys = document.getElementById("replaceKeysOption").checked;
if (!username) {
displayError("Username is required for search");
return;
}
await window.backendAPI.fetchData("/api/search", {
username,
ssoToken,
platform,
sanitize,
replaceKeys
});
});
// Function to handle time and duration conversion
function displayResults(data) {
const resultsElement = document.getElementById("results");
const downloadContainer = document.getElementById("download-container");
// Apply time conversion if enabled
const convertTime = document.getElementById('convertTimeOption').checked;
const replaceKeys = document.getElementById('replaceKeysOption').checked;
let displayData = data;
if (convertTime || replaceKeys) {
const timezone = document.getElementById('timezoneSelect').value;
displayData = window.backendAPI.processTimestamps(structuredClone(data), timezone); // Use structured clone API instead of JSON.parse/stringify
// displayData = window.backendAPI.processTimestamps(JSON.parse(JSON.stringify(data)), timezone);
}
// Format the data
let formattedData = '';
if (window.appState.outputFormat === 'yaml') {
formattedData = window.backendAPI.jsonToYAML(displayData);
document.getElementById("downloadJson").textContent = "Download YAML Data";
} else {
formattedData = JSON.stringify(displayData, null, 2);
document.getElementById("downloadJson").textContent = "Download JSON Data";
}
resultsElement.textContent = formattedData;
resultsElement.style.display = "block";
downloadContainer.style.display = "block";
}
// Helper function to display errors
function displayError(message) {
const errorElement = document.getElementById("error");
const loadingElement = document.getElementById("loading");
const resultsElement = document.getElementById("results");
errorElement.textContent = message;
loadingElement.style.display = "none";
// Clear previous results to ensure they can be redrawn
resultsElement.style.display = "none";
resultsElement.textContent = "";
// Keep tutorial hidden if previously dismissed
if (window.appState.tutorialDismissed) {
document.querySelectorAll(".tutorial").forEach(element => {
element.style.display = "none";
});
}
}
function addEnterKeyListeners() {
// Use event delegation for handling Enter key press
document.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
// Get the active element
const activeElement = document.activeElement;
if (!activeElement || !activeElement.id) return;
// Mapping of input fields to their submit buttons
const inputToButtonMapping = {
"ssoToken": null, // Will trigger active tab button
"username": null, // Will trigger active tab button
"matchUsername": "fetchMatches",
"matchId": "fetchMatchInfo",
"userUsername": "fetchUserInfo",
"searchUsername": "fuzzySearch"
};
if (activeElement.id in inputToButtonMapping) {
if (inputToButtonMapping[activeElement.id]) {
// Click the specific button
document.getElementById(inputToButtonMapping[activeElement.id]).click();
} else {
// Trigger the active tab button
triggerActiveTabButton();
}
}
}
});
}
function triggerActiveTabButton() {
const activeTab = document.querySelector(".tab.active").getAttribute("data-tab");
switch (activeTab) {
case "stats":
document.getElementById("fetchStats").click();
break;
case "matches":
document.getElementById("fetchMatches").click();
break;
case "user":
document.getElementById("fetchUserInfo").click();
break;
case "other":
document.getElementById("fuzzySearch").click();
break;
}
}
// Time options
function setupTimeOptions() {
const convertTimeCheckbox = document.getElementById('convertTimeOption');
const timezoneSelect = document.getElementById('timezoneSelect');
convertTimeCheckbox.addEventListener('change', function() {
timezoneSelect.disabled = !this.checked;
if ((window.appState.currentData)) {
displayResults((window.appState.currentData)); // Refresh the display
}
});
timezoneSelect.addEventListener('change', function() {
if ((window.appState.currentData)) {
displayResults((window.appState.currentData)); // Refresh the display
}
});
}
// Download Button
function setupDownloadButton() {
const downloadBtn = document.getElementById("downloadJson");
if (!downloadBtn) return;
downloadBtn.addEventListener("click", function() {
const resultsElement = document.getElementById("results");
const jsonData = resultsElement.textContent;
if (!jsonData) {
alert("No data to download");
return;
}
// Create a Blob with the data
const contentType = window.appState.outputFormat === 'yaml' ? 'text/yaml' : 'application/json';
const blob = new Blob([jsonData], { type: contentType });
// Create a temporary link element
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
// Generate a filename with timestamp
const date = new Date();
const timestamp = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}_${String(date.getHours()).padStart(2, '0')}-${String(date.getMinutes()).padStart(2, '0')}`;
const extension = window.appState.outputFormat === 'yaml' ? 'yaml' : 'json';
a.download = `cod_stats_${timestamp}.${extension}`;
// Trigger download
document.body.appendChild(a);
a.click();
// Clean up
document.body.removeChild(a);
});
}
// Function to synchronize username across tabs
function syncUsernames() {
const mainUsername = document.getElementById("username").value.trim();
// Only sync if there's a value
if (mainUsername) {
document.getElementById("matchUsername").value = mainUsername;
document.getElementById("userUsername").value = mainUsername;
document.getElementById("searchUsername").value = mainUsername;
}
// Also sync platform across tabs when it changes
const mainPlatform = document.getElementById("platform").value;
document.getElementById("matchPlatform").value = mainPlatform;
document.getElementById("userPlatform").value = mainPlatform;
document.getElementById("searchPlatform").value = mainPlatform;
}
// Sync listeners for persistent usernames
function addSyncListeners() {
// Add change listeners for username sync
document.getElementById("username").addEventListener("change", syncUsernames);
document.getElementById("matchUsername").addEventListener("change", function() {
document.getElementById("username").value = this.value;
syncUsernames();
});
document.getElementById("userUsername").addEventListener("change", function() {
document.getElementById("username").value = this.value;
syncUsernames();
});
document.getElementById("searchUsername").addEventListener("change", function() {
document.getElementById("username").value = this.value;
syncUsernames();
});
// Add change listeners for platform sync
document.getElementById("platform").addEventListener("change", syncUsernames);
}