tab
このスクリプトは単体で利用できません。右のようなメタデータを含むスクリプトから、ライブラリとして読み込まれます: // @require https://update.greasyfork.ip-ddns.com/scripts/538683/1603256/allie%20test.js
Tabs.AllianceChat = {
tabOrder: 1100,
tabLabel: 'Alliance Chat',
tabDisabled: false,
myDiv: null,
chatTimer: null,
onlineTimer: null,
lastTimestamp: 0,
chatArray: [],
onlineMembers: [],
maxMessages: 100,
tabId: 'allianceChatTab',
init: function(div){
var t = Tabs.AllianceChat;
t.myDiv = div;
t.createTab();
t.startChatTimer();
t.startOnlineTimer();
},
hide: function(){
var t = Tabs.AllianceChat;
clearTimeout(t.chatTimer);
clearTimeout(t.onlineTimer);
},
show: function(){
var t = Tabs.AllianceChat;
t.createTab();
t.startChatTimer();
t.startOnlineTimer();
},
startChatTimer: function() {
var t = Tabs.AllianceChat;
t.updateChat();
t.chatTimer = setTimeout(t.startChatTimer, 5000); // Update every 5 seconds
},
startOnlineTimer: function() {
var t = Tabs.AllianceChat;
t.updateOnlineMembers();
t.onlineTimer = setTimeout(t.startOnlineTimer, 30000); // Update every 30 seconds
},
createTab: function(){
var t = Tabs.AllianceChat;
var html = '<div class="allianceChatContainer">';
html += '<div class="chatHeader">'+tx('ALLIANCE CHAT')+'</div>';
html += '<div class="chatMainArea">';
html += '<div id="allianceChatBox" class="chatBox"></div>';
html += '<div id="onlineMembersList" class="onlineMembers"></div>';
html += '</div>';
html += '<div class="chatInputContainer">';
html += '<input id="chatMessage" type="text" placeholder="'+tx('Type your message here...')+'">';
html += '<button id="btnSendChat" class="chatButton">'+tx('Send')+'</button>';
html += '</div>';
html += '<div class="chatControls">';
html += '<button id="btnClearChat" class="chatButton">'+tx('Clear Chat')+'</button>';
html += '<button id="btnToggleTimestamp" class="chatButton">'+tx('Toggle Timestamps')+'</button>';
html += '</div>';
html += '</div>';
t.myDiv.innerHTML = html;
t.addEventListeners();
t.applyStyles();
},
addEventListeners: function() {
var t = Tabs.AllianceChat;
ById('btnSendChat').addEventListener('click', t.sendChat, false);
ById('btnClearChat').addEventListener('click', t.clearChat, false);
ById('btnToggleTimestamp').addEventListener('click', t.toggleTimestamps, false);
ById('chatMessage').addEventListener('keypress', function(e){
if (e.keyCode == 13) t.sendChat();
}, false);
},
applyStyles: function() {
GM_addStyle(`
.allianceChatContainer {
display: flex;
flex-direction: column;
height: 500px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.chatHeader {
background-color: #4a69bd;
color: white;
padding: 10px;
font-weight: bold;
text-align: center;
}
.chatMainArea {
display: flex;
flex-grow: 1;
}
.chatBox {
flex-grow: 1;
overflow-y: auto;
padding: 10px;
background-color: #f1f2f6;
}
.onlineMembers {
width: 200px;
overflow-y: auto;
padding: 10px;
background-color: #dfe4ea;
border-left: 1px solid #a4b0be;
}
.chatInputContainer {
display: flex;
padding: 10px;
background-color: #dfe4ea;
}
#chatMessage {
flex-grow: 1;
padding: 5px;
border: 1px solid #a4b0be;
border-radius: 3px;
}
.chatButton {
padding: 5px 10px;
margin-left: 5px;
background-color: #4a69bd;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.chatButton:hover {
background-color: #3c55a5;
}
.chatControls {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #dfe4ea;
}
.chatMessage {
margin-bottom: 5px;
padding: 5px;
border-radius: 3px;
background-color: #ffffff;
}
.chatSender {
font-weight: bold;
color: #4a69bd;
}
.chatTimestamp {
font-size: 0.8em;
color: #a4b0be;
}
.onlineMembersHeader {
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.onlineMember {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
padding: 3px;
border-radius: 3px;
background-color: #ffffff;
}
.memberName {
font-weight: bold;
}
.memberTitle {
font-style: italic;
font-size: 0.8em;
}
.memberMight {
font-size: 0.9em;
color: #4a69bd;
}
`);
},
updateChat: function() {
var t = Tabs.AllianceChat;
Chat.fetchAllianceChatNow(function(messages) {
if (messages && messages.length > 0) {
t.chatArray = messages.concat(t.chatArray);
if (t.chatArray.length > t.maxMessages) {
t.chatArray = t.chatArray.slice(0, t.maxMessages);
}
t.displayChat();
}
});
},
displayChat: function() {
var t = Tabs.AllianceChat;
var chatBox = ById('allianceChatBox');
var html = '';
for (var i = 0; i < t.chatArray.length; i++) {
var chat = t.chatArray[i];
html += '<div class="chatMessage">';
html += '<span class="chatSender">' + chat.name + ': </span>';
html += '<span class="chatContent">' + t.escapeHtml(chat.message) + '</span>';
html += '<span class="chatTimestamp"> ' + new Date(chat.time*1000).toLocaleTimeString() + '</span>';
html += '</div>';
}
chatBox.innerHTML = html;
chatBox.scrollTop = chatBox.scrollHeight;
},
sendChat: function() {
var t = Tabs.AllianceChat;
var chatInput = ById('chatMessage');
var message = chatInput.value.trim();
if (message) {
Chat.sendAllianceChat(message, function(result) {
if (result) {
chatInput.value = '';
t.updateChat();
} else {
console.error('Failed to send message');
}
});
}
},
clearChat: function() {
var t = Tabs.AllianceChat;
t.chatArray = [];
t.displayChat();
},
toggleTimestamps: function() {
var timestamps = ByCl('chatTimestamp');
for (var i = 0; i < timestamps.length; i++) {
timestamps[i].style.display = timestamps[i].style.display === 'none' ? '' : 'none';
}
},
updateOnlineMembers: function() {
var t = Tabs.AllianceChat;
t.fetchOnlineMembers(function(members) {
t.onlineMembers = members;
t.displayOnlineMembers();
});
},
fetchOnlineMembers: function(callback) {
var onlineMembers = [];
var allianceMembers = Seed.allianceInfo.members;
for (var memberId in allianceMembers) {
if (allianceMembers.hasOwnProperty(memberId)) {
var member = allianceMembers[memberId];
if (member.online) {
onlineMembers.push({
name: member.name,
might: member.might,
title: member.title
});
}
}
}
onlineMembers.sort(function(a, b) {
return b.might - a.might;
});
callback(onlineMembers);
},
displayOnlineMembers: function() {
var t = Tabs.AllianceChat;
var onlineList = ById('onlineMembersList');
var html = '<div class="onlineMembersHeader">'+tx('Online Members')+'</div>';
for (var i = 0; i < t.onlineMembers.length; i++) {
var member = t.onlineMembers[i];
html += '<div class="onlineMember">';
html += '<span class="memberName">' + t.escapeHtml(member.name) + '</span>';
html += '<span class="memberTitle">' + t.escapeHtml(member.title) + '</span>';
html += '<span class="memberMight">' + t.formatNumber(member.might) + '</span>';
html += '</div>';
}
onlineList.innerHTML = html;
},
formatNumber: function(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
escapeHtml: function(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
};