vikarti.anatra/bondage-college-mirr
1
0
Fork 0
mirror of https://gitgud.io/BondageProjects/Bondage-College.git synced 2025-04-25 17:59:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'chat-log' into 'master'

Browse source 
ENH: Add the new room namespace icons to the chat log header

See merge request
This commit is contained in:
BondageProjects 2025-03-26 16:31:29 +00:00
commit 36d5bb532f
2 changed files with 46 additions and 14 deletions
BondageClub
CSS
chat.css
Screens/Online/ChatRoom
ChatRoom.js

24
BondageClub/CSS/chat.css
View file

@ -32,6 +32,19 @@
.chat-room-sep-header {
user-select: text !important;
align-content: center;
justify-content: center;
display: flex;
}
.chat-room-sep-image {
max-width: 50px;
max-height: 50px;
width: 1em;
height: 1em;
aspect-ratio: 1 / 1;
background: gray;
margin-block: 0.1em;
}
.chat-room-sep-collapse {
@ -275,7 +288,6 @@
}
@media (hover: hover) {
#TextAreaChatLog[data-colortheme="dark"] .chat-room-sep-header:hover,
#TextAreaChatLog[data-colortheme="dark2"] .chat-room-sep-header:hover,
#TextAreaChatLog[data-colortheme="dark"] .chat-room-sep-collapse:hover,
@ -283,12 +295,22 @@
color: #eee;
}
#TextAreaChatLog[data-colortheme="dark"] .chat-room-sep-header:hover > .chat-room-sep-image,
#TextAreaChatLog[data-colortheme="dark2"] .chat-room-sep-header:hover > .chat-room-sep-image {
background-color: #eee;
}
#TextAreaChatLog[data-colortheme="light"] .chat-room-sep-header:hover,
#TextAreaChatLog[data-colortheme="light2"] .chat-room-sep-header:hover,
#TextAreaChatLog[data-colortheme="light"] .chat-room-sep-collapse:hover,
#TextAreaChatLog[data-colortheme="light2"] .chat-room-sep-collapse:hover {
color: black;
}
#TextAreaChatLog[data-colortheme="light"] .chat-room-sep-header:hover > .chat-room-sep-image,
#TextAreaChatLog[data-colortheme="light2"] .chat-room-sep-header:hover > .chat-room-sep-image {
background-color: black;
}
}
#TextAreaChatLog[data-colortheme="dark"] .chat-room-sep-div>.button:active,

36
BondageClub/Screens/Online/ChatRoom/ChatRoom.js
View file

@ -943,16 +943,26 @@ var ChatRoomSep = {
* Return a {@link HTMLElement.InnerHTML} representation of the passed button's room name
* @private
* @param {HTMLButtonElement} button
* @returns {string}
* @returns {(string | HTMLElement)[]}
*/
_GetDisplayName: function _GetDisplayName(button) {
const segments = [
InterfaceTextGet(`ChatRoomSpace${button.dataset.space || "F"}`),
button.dataset.private === "true" ? InterfaceTextGet("PrivateRoom") : undefined,
const namespace = FriendListIconMapping[button.dataset.space];
return [
namespace ? [ElementCreate({
tag: "div",
attributes: { role: "img", "aria-label": InterfaceTextGet(`ChatRoomSpace${button.dataset.space || "F"}`) },
classList: ["chat-room-sep-image"],
style: { mask: `url(${namespace.src}) center/contain` },
}), " - "] : undefined,
button.dataset.private === "true" ? [ElementCreate({
tag: "div",
attributes: { role: "img", "aria-label": InterfaceTextGet("Private") },
classList: ["chat-room-sep-image"],
style: { mask: `url(${FriendListIconMapping.Private.src}) center/contain` },
}), " - "] : undefined,
ChatRoomHTMLEntities(ChatSearchMuffle(button.dataset.room)),
button.dataset.messages ? `✉<sup>${button.dataset.messages}</sup>` : undefined,
];
return segments.filter(Boolean).join(" - ");
button.dataset.messages ? ["✉", ElementCreate({ tag: "sup", children: [button.dataset.messages] })] : undefined,
].flat().filter(Boolean);
},
/**
@ -1002,11 +1012,11 @@ var ChatRoomSep = {
/**
* Return a {@link HTMLElement.innerHTML} representation of the separators room name
* @param {HTMLDivElement} roomSep - The chat room separator
* @returns {string}
* @returns {(string | HTMLElement)[]}
*/
GetDisplayName: function GetDisplayName(roomSep) {
const button = /** @type {HTMLButtonElement} */(roomSep?.querySelector(".chat-room-sep-header"));
return button ? ChatRoomSep._GetDisplayName(button) : "";
return button ? ChatRoomSep._GetDisplayName(button) : [];
},
/**
@ -1040,7 +1050,7 @@ var ChatRoomSep = {
const headerButton = /** @type {HTMLButtonElement} */(button.nextSibling);
if (headerButton) {
headerButton.dataset.messages = "";
headerButton.innerHTML = ChatRoomSep.GetDisplayName(roomSep);
headerButton.replaceChildren(...ChatRoomSep.GetDisplayName(roomSep));
}
},
@ -1077,13 +1087,13 @@ var ChatRoomSep = {
button.dataset.room = data.Name;
button.dataset.space = data.Space;
button.dataset.private = ChatRoomDataIsPrivate(data).toString();
button.innerHTML = ChatRoomSep._GetDisplayName(button);
button.replaceChildren(...ChatRoomSep.GetDisplayName(roomSep));
},
/** Update all the displayed room names based on the player's degree of sensory deprivation. */
UpdateDisplayNames: async function UpdateDisplayNames() {
const roomLabels = /** @type {HTMLButtonElement[]} */(Array.from(document.querySelectorAll("#TextAreaChatLog .chat-room-sep-header")));
roomLabels.forEach(e => e.innerHTML = ChatRoomSep._GetDisplayName(e));
roomLabels.forEach(e => e.replaceChildren(...ChatRoomSep._GetDisplayName(e)));
},
};
@ -1242,7 +1252,7 @@ function ChatRoomAppendChat(div) {
const button = /** @type {HTMLButtonElement} */(ChatRoomSep.ActiveElem.querySelector(".chat-room-sep-header"));
if (button) {
button.dataset.messages = ((Number.parseInt(button.dataset.messages, 10) || 0) + 1).toString();
button.innerHTML = ChatRoomSep.GetDisplayName(ChatRoomSep.ActiveElem);
button.replaceChildren(...ChatRoomSep.GetDisplayName(ChatRoomSep.ActiveElem));
}
}
}