|
class ChatBox extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.app = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.innerHTML = `
|
|
<div style="display: flex; flex-direction: column; height: 100%;">
|
|
<div id="chatMessages" style="flex: 1; overflow-y: auto; padding: 5px; font-size: 12px; font-family: 'Courier New', monospace;">
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="chatInput"
|
|
placeholder="Type message..."
|
|
style="border: none; border-top: 1px solid var(--border-color); padding: 5px;"
|
|
maxlength="200"
|
|
/>
|
|
</div>
|
|
`;
|
|
|
|
const input = this.querySelector('#chatInput');
|
|
|
|
input.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
const message = input.value.trim();
|
|
if (message && this.app) {
|
|
this.app.sendChatMessage(message);
|
|
input.value = '';
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
addMessage(nickname, message, timestamp) {
|
|
const messagesDiv = this.querySelector('#chatMessages');
|
|
|
|
const messageEl = document.createElement('div');
|
|
messageEl.style.marginBottom = '3px';
|
|
|
|
const time = timestamp || new Date().toTimeString().slice(0, 5);
|
|
const color = nickname === 'system' ? '#FFD700' : '#87CEEB';
|
|
|
|
messageEl.innerHTML = `
|
|
<span style="color: #666;">${time}</span>
|
|
<span style="color: ${color}; font-weight: bold;">${nickname}:</span>
|
|
<span style="color: var(--text-color);">${this.escapeHtml(message)}</span>
|
|
`;
|
|
|
|
messagesDiv.appendChild(messageEl);
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
|
|
// Keep only last 100 messages
|
|
while (messagesDiv.children.length > 100) {
|
|
messagesDiv.removeChild(messagesDiv.firstChild);
|
|
}
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
}
|
|
|
|
customElements.define('chat-box', ChatBox);
|