88 lines
3.1 KiB
JavaScript
88 lines
3.1 KiB
JavaScript
let socket;
|
|
let username = localStorage.getItem('username');
|
|
|
|
function showLogin() {
|
|
document.getElementById('login-container').style.display = 'block';
|
|
document.getElementById('lobby-container').style.display = 'none';
|
|
}
|
|
|
|
function showLobby() {
|
|
document.getElementById('login-container').style.display = 'none';
|
|
document.getElementById('lobby-container').style.display = 'block';
|
|
}
|
|
|
|
if (username) {
|
|
showLobby();
|
|
connectSocket();
|
|
} else {
|
|
showLogin();
|
|
}
|
|
|
|
document.getElementById('login-btn').addEventListener('click', () => {
|
|
const name = document.getElementById('username').value.trim();
|
|
if (!name) return;
|
|
localStorage.setItem('username', name);
|
|
username = name;
|
|
showLobby();
|
|
connectSocket();
|
|
});
|
|
|
|
function connectSocket() {
|
|
socket = io();
|
|
socket.on('connect', () => {
|
|
socket.emit('login', { username });
|
|
socket.emit('get_rooms');
|
|
});
|
|
socket.on('login_success', () => {
|
|
console.log('登录成功');
|
|
});
|
|
socket.on('rooms_list', (rooms) => updateRoomTable(rooms));
|
|
socket.on('rooms_updated', (rooms) => updateRoomTable(rooms));
|
|
socket.on('room_created', (data) => {
|
|
window.location.href = `/room/${data.room_id}`;
|
|
});
|
|
socket.on('error', (data) => alert(data.msg));
|
|
socket.on('force_disconnect', (data) => {
|
|
alert(data.msg);
|
|
localStorage.removeItem('username');
|
|
window.location.href = '/';
|
|
});
|
|
}
|
|
|
|
function updateRoomTable(rooms) {
|
|
const tbody = document.querySelector('#room-table tbody');
|
|
tbody.innerHTML = '';
|
|
rooms.forEach(r => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${r.name}</td>
|
|
<td>${r.public ? '公开' : '🔒私密'}</td>
|
|
<td>${r.players}/2</td>
|
|
<td>${r.watchers}</td>
|
|
<td><button class="join-room" data-id="${r.id}" data-public="${r.public}" data-has-password="${r.has_password}">进入</button></td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
document.querySelectorAll('.join-room').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const id = e.target.dataset.id;
|
|
const isPublic = e.target.dataset.public === 'true';
|
|
const hasPassword = e.target.dataset.hasPassword === 'true';
|
|
if (!isPublic && hasPassword) {
|
|
const pwd = prompt('请输入房间密码：');
|
|
if (pwd === null) return;
|
|
window.location.href = `/room/${id}?pwd=${encodeURIComponent(pwd)}`;
|
|
} else {
|
|
window.location.href = `/room/${id}`;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
document.getElementById('create-room').addEventListener('click', () => {
|
|
const name = document.getElementById('room-name').value.trim();
|
|
if (!name) return alert('请输入房间名');
|
|
const isPublic = document.querySelector('input[name="room-type"]:checked').value === 'public';
|
|
const password = document.getElementById('room-password').value;
|
|
socket.emit('create_room', { name, public: isPublic, password });
|
|
}); |