Adding in Room Aliases

This commit is contained in:
Raven Scott 2024-06-10 20:01:00 -04:00
parent 01fee56692
commit 8d1ecc2c19

75
app.js
View File

@ -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();