Select Git revision
index.html 2.15 KiB
<!DOCTYPE html>
<html>
<head>
<title>Connect4 - Lobby</title>
<style>
/* Add CSS styles for lobby */
</style>
</head>
<body>
<h1>Connect4</h1>
<div id="login">
<input type="text" id="nameInput" placeholder="Enter your name">
</div>
<div id="rooms">
<h2>Play Rooms</h2>
<div id="roomList"></div>
<script>
// Dynamically generate room list
const roomList = document.getElementById('roomList');
for (let i = 0; i < 10; i++) {
const roomDiv = document.createElement('div');
roomDiv.className = 'room';
roomDiv.innerHTML = `
<span>Room ${i} (<span class="player-count">0</span>/2)</span>
<button onclick="joinRoom(${i})">Join</button>
`;
roomList.appendChild(roomDiv);
}
function joinRoom(roomNum) {
const name = document.getElementById('nameInput').value.trim();
if (!name) return alert('Please enter a name');
window.location.href = `/room${roomNum}?name=${encodeURIComponent(name)}`;
}
</script>
</div>
<div id="hall-of-fame">
<h2>Hall of Fame</h2>
<ul id="hof-list"></ul>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const nameInput = document.getElementById('nameInput');
socket.emit('askRooms');
socket.on('updateRooms', (rooms) => {
rooms.forEach((room, i) => {
document.querySelectorAll('.player-count')[i].textContent = room.players.length;
});
});
socket.on('updateHOF', (hof) => {
const hofList = document.getElementById('hof-list');
hofList.innerHTML = Object.entries(hof)
.sort((a, b) => b[1] - a[1])
.map(([name, wins]) => `<li>${name}: ${wins} wins</li>`)
.join('');
});
function joinRoom(roomNum) {
const name = nameInput.value.trim();
if (document.querySelectorAll('.player-count')[roomNum].textContent == "2") return alert('Full room');
if (!name) return alert('Please enter a name');
window.location.href = `/room${roomNum}?name=${encodeURIComponent(name)}`; }
</script>
</body>
</html>