110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
const $ = (id) => document.getElementById(id);
|
|
|
|
const connectSection = $('connect-section');
|
|
const roomSection = $('room-section');
|
|
const serverUrlInput = $('server-url');
|
|
const connectBtn = $('connect-btn');
|
|
const roomControls = $('room-controls');
|
|
const inRoom = $('in-room');
|
|
const createBtn = $('create-btn');
|
|
const codeInput = $('code-input');
|
|
const joinBtn = $('join-btn');
|
|
const disconnectBtn = $('disconnect-btn');
|
|
const roomCodeEl = $('room-code');
|
|
const peerStatusEl = $('peer-status');
|
|
const errorMsg = $('error-msg');
|
|
|
|
function showError(text) {
|
|
errorMsg.textContent = text;
|
|
errorMsg.classList.remove('hidden');
|
|
setTimeout(() => errorMsg.classList.add('hidden'), 3000);
|
|
}
|
|
|
|
function showRoomView(code, hasPeer) {
|
|
roomControls.classList.add('hidden');
|
|
inRoom.classList.remove('hidden');
|
|
roomCodeEl.textContent = code;
|
|
peerStatusEl.textContent = hasPeer ? 'Peer connected' : 'Waiting for peer...';
|
|
peerStatusEl.className = 'peer-status' + (hasPeer ? ' connected' : '');
|
|
}
|
|
|
|
connectBtn.addEventListener('click', () => {
|
|
const url = serverUrlInput.value.trim();
|
|
if (!url) return;
|
|
connectBtn.disabled = true;
|
|
connectBtn.textContent = 'Connecting...';
|
|
chrome.runtime.sendMessage({ type: 'connect', url });
|
|
});
|
|
|
|
createBtn.addEventListener('click', () => {
|
|
chrome.runtime.sendMessage({ type: 'create_room' });
|
|
});
|
|
|
|
joinBtn.addEventListener('click', () => {
|
|
const code = codeInput.value.trim();
|
|
if (!/^\d{6}$/.test(code)) { showError('Enter a 6-digit code'); return; }
|
|
chrome.runtime.sendMessage({ type: 'join_room', code });
|
|
});
|
|
|
|
codeInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') joinBtn.click();
|
|
});
|
|
|
|
disconnectBtn.addEventListener('click', () => {
|
|
chrome.runtime.sendMessage({ type: 'disconnect' });
|
|
roomSection.classList.add('hidden');
|
|
connectSection.classList.remove('hidden');
|
|
roomControls.classList.remove('hidden');
|
|
inRoom.classList.add('hidden');
|
|
connectBtn.disabled = false;
|
|
connectBtn.textContent = 'Connect';
|
|
});
|
|
|
|
chrome.runtime.onMessage.addListener((msg) => {
|
|
switch (msg.type) {
|
|
case 'ws_status':
|
|
if (msg.status === 'connected') {
|
|
connectSection.classList.add('hidden');
|
|
roomSection.classList.remove('hidden');
|
|
} else {
|
|
connectSection.classList.remove('hidden');
|
|
roomSection.classList.add('hidden');
|
|
connectBtn.disabled = false;
|
|
connectBtn.textContent = 'Connect';
|
|
if (msg.status === 'error') showError('Could not connect to server');
|
|
}
|
|
break;
|
|
case 'created':
|
|
showRoomView(msg.code, false);
|
|
break;
|
|
case 'joined':
|
|
showRoomView(msg.code, msg.memberCount > 1);
|
|
break;
|
|
case 'peer_joined':
|
|
peerStatusEl.textContent = 'Peer connected';
|
|
peerStatusEl.className = 'peer-status connected';
|
|
break;
|
|
case 'peer_left':
|
|
peerStatusEl.textContent = 'Peer disconnected';
|
|
peerStatusEl.className = 'peer-status';
|
|
break;
|
|
case 'error':
|
|
showError(msg.message);
|
|
break;
|
|
}
|
|
});
|
|
|
|
// Restore state when popup opens
|
|
chrome.storage.local.get(['serverUrl'], ({ serverUrl }) => {
|
|
if (serverUrl) serverUrlInput.value = serverUrl;
|
|
});
|
|
|
|
chrome.runtime.sendMessage({ type: 'get_state' }, (state) => {
|
|
if (!state) return;
|
|
if (state.connectState === 'connected') {
|
|
connectSection.classList.add('hidden');
|
|
roomSection.classList.remove('hidden');
|
|
if (state.roomCode) showRoomView(state.roomCode, false);
|
|
}
|
|
});
|