37 lines
966 B
JavaScript
37 lines
966 B
JavaScript
export function setupChat(root, socket) {
|
|
root.innerHTML = `
|
|
<div class="panel hidden">
|
|
<div id="chat-log"></div>
|
|
<div class="row">
|
|
<input id="chat-input" placeholder="Say something..." />
|
|
<button id="chat-send">Send</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
const panel = root.firstElementChild;
|
|
const log = panel.querySelector('#chat-log');
|
|
const input = panel.querySelector('#chat-input');
|
|
|
|
function addLine(t) {
|
|
const div = document.createElement('div');
|
|
div.textContent = t;
|
|
log.appendChild(div);
|
|
log.scrollTop = log.scrollHeight;
|
|
}
|
|
|
|
panel.querySelector('#chat-send').onclick = () => {
|
|
const t = input.value.trim();
|
|
if (!t) return;
|
|
socket.emit('chat:send', { t });
|
|
input.value = '';
|
|
};
|
|
|
|
input.addEventListener('keydown', e => {
|
|
if (e.key === 'Enter') panel.querySelector('#chat-send').click();
|
|
});
|
|
|
|
socket.on('chat:push', m => addLine(m));
|
|
|
|
window.addChatLine = addLine;
|
|
}
|