Tabs.Chat = {
tabOrder: 900,
tabLabel: 'Chat',
tabDisabled: false,
myDiv: null,
globalChatDiv: null,
allianceChatDiv: null,
inputDiv: null,
userListDiv: null,
currentChatType: 'global',
init: function(div) {
var t = Tabs.Chat;
t.myDiv = div;
t.createMainDiv();
t.hookGameChat();
t.updateUserList();
},
createMainDiv: function() {
var t = Tabs.Chat;
var m = '<DIV class=divHeader align=center>' + tx('CHAT') + '</div>';
m += '<div id="pbChatTabs" style="margin-bottom:10px;">';
m += '<button id="pbGlobalChatTab" class="tabActive">Global Chat</button>';
m += '<button id="pbAllianceChatTab">Alliance Chat</button>';
m += '</div>';
m += '<div id="pbChatRoom" style="display:flex; height:500px; border:1px solid #888;">';
m += '<div id="pbUserList" style="width:150px; border-right:1px solid #888; overflow-y:auto;"></div>';
m += '<div style="flex-grow:1; display:flex; flex-direction:column;">';
m += '<div id="pbGlobalChatContent" style="flex-grow:1; overflow-y:auto; padding:10px;"></div>';
m += '<div id="pbAllianceChatContent" style="flex-grow:1; overflow-y:auto; padding:10px; display:none;"></div>';
m += '<div id="pbChatInput" style="border-top:1px solid #888; padding:10px;">';
// Custom chat input area
m += '<textarea id="pbChatTextArea" style="width:100%; height:60px; margin-bottom:5px; padding:5px; resize:none;"></textarea>';
m += '<button id="pbChatSendButton" style="width:100%; padding:5px; cursor:pointer;">Send</button>';
m += '</div>';
m += '</div>';
m += '</div>';
t.myDiv.innerHTML = m;
t.globalChatDiv = ById('pbGlobalChatContent');
t.allianceChatDiv = ById('pbAllianceChatContent');
t.userListDiv = ById('pbUserList');
t.inputDiv = ById('pbChatInput');
ById('pbGlobalChatTab').addEventListener('click', function() { t.switchChatType('global'); });
ById('pbAllianceChatTab').addEventListener('click', function() { t.switchChatType('alliance'); });
// Add event listeners for the custom chat input
var chatTextArea = ById('pbChatTextArea');
var sendButton = ById('pbChatSendButton');
chatTextArea.addEventListener('keypress', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
t.sendChat();
}
});
sendButton.addEventListener('click', function() {
t.sendChat();
});
},
hookGameChat: function() {
var t = Tabs.Chat;
var gameChatContainer = document.querySelector('#mod_comm_list1');
var gameAllianceChatContainer = document.querySelector('#mod_comm_list2');
if (gameChatContainer && gameAllianceChatContainer) {
var observerGlobal = new MutationObserver(function(mutations) {
t.updateChat('global');
});
var observerAlliance = new MutationObserver(function(mutations) {
t.updateChat('alliance');
});
observerGlobal.observe(gameChatContainer, { childList: true, subtree: true });
observerAlliance.observe(gameAllianceChatContainer, { childList: true, subtree: true });
t.updateChat('global');
t.updateChat('alliance');
} else {
console.error('Could not find game chat containers');
}
},
updateChat: function(chatType) {
var t = Tabs.Chat;
var gameChatContainer = (chatType === 'global') ?
document.querySelector('#mod_comm_list1') :
document.querySelector('#mod_comm_list2');
var targetDiv = (chatType === 'global') ? t.globalChatDiv : t.allianceChatDiv;
if (gameChatContainer && targetDiv) {
targetDiv.innerHTML = gameChatContainer.innerHTML;
targetDiv.scrollTop = targetDiv.scrollHeight;
}
},
sendChat: function() {
var t = Tabs.Chat;
var chatTextArea = ById('pbChatTextArea');
var message = chatTextArea.value.trim();
if (message === '') return;
console.log("Attempting to send chat: " + message);
// Direct method: Open the game's chat interface and interact with it
try {
// First, find the chat button in the game interface and click it
var chatButton = document.querySelector('.mod_comm');
if (chatButton) {
console.log("Clicking chat button to open chat interface");
chatButton.click();
// Wait for the chat interface to open
setTimeout(function() {
// Select the appropriate tab (global or alliance)
var tabToSelect = (t.currentChatType === 'global') ?
document.querySelector('#mod_comm_tabs li:first-child') :
document.querySelector('#mod_comm_tabs li:nth-child(2)');
if (tabToSelect) {
console.log("Selecting chat tab: " + t.currentChatType);
tabToSelect.click();
// Wait for tab to be selected
setTimeout(function() {
// Find the textarea and send button
var gameTextArea = document.querySelector('#mod_comm_input textarea');
var gameSendButton = document.querySelector('#mod_comm_input button');
if (gameTextArea && gameSendButton) {
// Focus the textarea
gameTextArea.focus();
// Clear any existing text
gameTextArea.value = '';
// Type the message character by character to simulate real typing
var typeMessage = function(index) {
if (index < message.length) {
gameTextArea.value += message[index];
// Trigger input event after each character
var inputEvent = new Event('input', { bubbles: true });
gameTextArea.dispatchEvent(inputEvent);
// Type the next character after a small delay
setTimeout(function() {
typeMessage(index + 1);
}, 10);
} else {
// All characters typed, now click send
console.log("Clicking send button");
gameSendButton.click();
// Clear our text area
chatTextArea.value = '';
// Update our chat display
setTimeout(function() {
t.updateChat(t.currentChatType);
}, 500);
}
};
// Start typing the message
typeMessage(0);
} else {
console.error("Could not find game textarea or send button");
}
}, 300);
} else {
console.error("Could not find chat tab to select");
}
}, 500);
} else {
console.error("Could not find chat button to open chat interface");
// Try alternative method - direct access to chat input if it's already open
var gameTextArea = document.querySelector('#mod_comm_input textarea');
var gameSendButton = document.querySelector('#mod_comm_input button');
if (gameTextArea && gameSendButton) {
console.log("Chat interface appears to be open, trying direct input");
// Set the message directly
gameTextArea.value = message;
// Trigger input event
var inputEvent = new Event('input', { bubbles: true });
gameTextArea.dispatchEvent(inputEvent);
// Click send
gameSendButton.click();
// Clear our text area
chatTextArea.value = '';
// Update our chat display
setTimeout(function() {
t.updateChat(t.currentChatType);
}, 500);
} else {
console.error("Could not find any chat interface elements");
}
}
} catch (e) {
console.error("Error sending chat:", e);
}
},
switchChatType: function(chatType) {
var t = Tabs.Chat;
t.currentChatType = chatType;
if (chatType === 'global') {
t.globalChatDiv.style.display = 'block';
t.allianceChatDiv.style.display = 'none';
ById('pbGlobalChatTab').className = 'tabActive';
ById('pbAllianceChatTab').className = '';
} else {
t.globalChatDiv.style.display = 'none';
t.allianceChatDiv.style.display = 'block';
ById('pbGlobalChatTab').className = '';
ById('pbAllianceChatTab').className = 'tabActive';
}
},
updateUserList: function() {
var t = Tabs.Chat;
// This is a placeholder function. You'll need to implement the actual user list retrieval
// based on how your game manages online users.
var onlineUsers = ['User1', 'User2', 'User3']; // Replace with actual online users
var userListHTML = '<div class="divHeader">Online Users</div>';
onlineUsers.forEach(function(user) {
userListHTML += '<div class="chatUser">' + user + '</div>';
});
t.userListDiv.innerHTML = userListHTML;
// Update the user list periodically
setTimeout(function() { t.updateUserList(); }, 60000); // Update every minute
}
};