diff --git a/app.js b/app.js index cb66232..57122c6 100644 --- a/app.js +++ b/app.js @@ -89,11 +89,13 @@ async function initialize() { // Update port in URLs config.userAvatar = updatePortInUrl(config.userAvatar); config.rooms.forEach(room => { - addRoomToListWithoutWritingToConfig(room); + room.alias = room.alias || truncateHash(room.topic); }); for (let user in registeredUsers) { registeredUsers[user] = updatePortInUrl(registeredUsers[user]); } + + renderRoomList(); // Render the room list with aliases } const registerDiv = document.querySelector('#register'); @@ -257,10 +259,14 @@ function addRoomToList(topic) { const roomItem = document.createElement('li'); roomItem.textContent = truncateHash(topic); roomItem.dataset.topic = topic; + + // Add double-click event listener for editing room name + roomItem.addEventListener('dblclick', () => enterEditMode(roomItem)); + roomItem.addEventListener('click', () => switchRoom(topic)); roomList.appendChild(roomItem); - config.rooms.push(topic); + config.rooms.push({ topic, alias: truncateHash(topic) }); writeConfigToFile("./config.json"); } @@ -269,10 +275,55 @@ function addRoomToListWithoutWritingToConfig(topic) { const roomItem = document.createElement('li'); roomItem.textContent = truncateHash(topic); roomItem.dataset.topic = topic; + + // Add double-click event listener for editing room name + roomItem.addEventListener('dblclick', () => enterEditMode(roomItem)); + roomItem.addEventListener('click', () => switchRoom(topic)); roomList.appendChild(roomItem); } +function enterEditMode(roomItem) { + const originalText = roomItem.textContent; + const topic = roomItem.dataset.topic; + roomItem.innerHTML = ''; + + const input = document.createElement('input'); + input.type = 'text'; + input.value = originalText; + roomItem.appendChild(input); + + input.focus(); + + input.addEventListener('blur', () => { + exitEditMode(roomItem, input, topic); + }); + + input.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + exitEditMode(roomItem, input, topic); + } else if (e.key === 'Escape') { + roomItem.textContent = originalText; + } + }); +} + +function exitEditMode(roomItem, input, topic) { + const newAlias = input.value.trim(); + if (newAlias) { + roomItem.textContent = newAlias; + + // Update the config with the new alias + const roomConfig = config.rooms.find(room => room.topic === topic); + if (roomConfig) { + roomConfig.alias = newAlias; + writeConfigToFile("./config.json"); + } + } else { + roomItem.textContent = truncateHash(topic); + } +} + function switchRoom(topic) { const topicBuffer = b4a.from(topic, 'hex'); joinSwarm(topicBuffer); @@ -286,7 +337,7 @@ function leaveRoom() { roomItem.remove(); } - config.rooms = config.rooms.filter(e => e !== topic); + config.rooms = config.rooms.filter(e => e.topic !== topic); writeConfigToFile("./config.json"); currentRoom.destroy(); @@ -510,4 +561,22 @@ function updatePortInUrl(url) { return urlObject.toString(); } +function renderRoomList() { + const roomList = document.querySelector('#room-list'); + roomList.innerHTML = ''; + + config.rooms.forEach(room => { + const roomItem = document.createElement('li'); + roomItem.textContent = room.alias || truncateHash(room.topic); + roomItem.dataset.topic = room.topic; + + roomItem.addEventListener('dblclick', () => enterEditMode(roomItem)); + roomItem.addEventListener('click', () => switchRoom(room.topic)); + roomList.appendChild(roomItem); + }); +} + +// Call this function when loading the rooms initially +renderRoomList(); + initialize();