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
|
// Update port in URLs
|
||||||
config.userAvatar = updatePortInUrl(config.userAvatar);
|
config.userAvatar = updatePortInUrl(config.userAvatar);
|
||||||
config.rooms.forEach(room => {
|
config.rooms.forEach(room => {
|
||||||
addRoomToListWithoutWritingToConfig(room);
|
room.alias = room.alias || truncateHash(room.topic);
|
||||||
});
|
});
|
||||||
for (let user in registeredUsers) {
|
for (let user in registeredUsers) {
|
||||||
registeredUsers[user] = updatePortInUrl(registeredUsers[user]);
|
registeredUsers[user] = updatePortInUrl(registeredUsers[user]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderRoomList(); // Render the room list with aliases
|
||||||
}
|
}
|
||||||
|
|
||||||
const registerDiv = document.querySelector('#register');
|
const registerDiv = document.querySelector('#register');
|
||||||
@ -257,10 +259,14 @@ function addRoomToList(topic) {
|
|||||||
const roomItem = document.createElement('li');
|
const roomItem = document.createElement('li');
|
||||||
roomItem.textContent = truncateHash(topic);
|
roomItem.textContent = truncateHash(topic);
|
||||||
roomItem.dataset.topic = topic;
|
roomItem.dataset.topic = topic;
|
||||||
|
|
||||||
|
// Add double-click event listener for editing room name
|
||||||
|
roomItem.addEventListener('dblclick', () => enterEditMode(roomItem));
|
||||||
|
|
||||||
roomItem.addEventListener('click', () => switchRoom(topic));
|
roomItem.addEventListener('click', () => switchRoom(topic));
|
||||||
roomList.appendChild(roomItem);
|
roomList.appendChild(roomItem);
|
||||||
|
|
||||||
config.rooms.push(topic);
|
config.rooms.push({ topic, alias: truncateHash(topic) });
|
||||||
writeConfigToFile("./config.json");
|
writeConfigToFile("./config.json");
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -269,10 +275,55 @@ function addRoomToListWithoutWritingToConfig(topic) {
|
|||||||
const roomItem = document.createElement('li');
|
const roomItem = document.createElement('li');
|
||||||
roomItem.textContent = truncateHash(topic);
|
roomItem.textContent = truncateHash(topic);
|
||||||
roomItem.dataset.topic = topic;
|
roomItem.dataset.topic = topic;
|
||||||
|
|
||||||
|
// Add double-click event listener for editing room name
|
||||||
|
roomItem.addEventListener('dblclick', () => enterEditMode(roomItem));
|
||||||
|
|
||||||
roomItem.addEventListener('click', () => switchRoom(topic));
|
roomItem.addEventListener('click', () => switchRoom(topic));
|
||||||
roomList.appendChild(roomItem);
|
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) {
|
function switchRoom(topic) {
|
||||||
const topicBuffer = b4a.from(topic, 'hex');
|
const topicBuffer = b4a.from(topic, 'hex');
|
||||||
joinSwarm(topicBuffer);
|
joinSwarm(topicBuffer);
|
||||||
@ -286,7 +337,7 @@ function leaveRoom() {
|
|||||||
roomItem.remove();
|
roomItem.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
config.rooms = config.rooms.filter(e => e !== topic);
|
config.rooms = config.rooms.filter(e => e.topic !== topic);
|
||||||
writeConfigToFile("./config.json");
|
writeConfigToFile("./config.json");
|
||||||
|
|
||||||
currentRoom.destroy();
|
currentRoom.destroy();
|
||||||
@ -510,4 +561,22 @@ function updatePortInUrl(url) {
|
|||||||
return urlObject.toString();
|
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();
|
initialize();
|
||||||
|
Loading…
Reference in New Issue
Block a user