forked from snxraven/LinkUp-P2P-Chat
Adding in Room Aliases
This commit is contained in:
parent
01fee56692
commit
8d1ecc2c19
75
app.js
75
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();
|
||||
|
Loading…
Reference in New Issue
Block a user