rainbownapkin/canopy
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Finished work on chat nameplate format settings.

Browse source
This commit is contained in:
rainbow napkin 2026-10-14 04:34:30 -04:00
parent 6346b8f148
commit cd5f168243
8 changed files with 94 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/views/partial/panels/settings.ejs
View file

@ -50,8 +50,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<p>Chat nameplate: </p>
<select>
<option value="left">Left</option>
<option value="top">Top</option>
<option value="timestamp">Top w/ timestamp</option>
<option value="top">Top</option>
</select>
</span>
<span id="settings-panel-min-chat-width" class="settings-panel-setting">

14
www/css/channel.css
View file

@ -13,6 +13,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
:root{
--chat-entry-flex-direction: row;
}
body{
height: 100%;
}
@ -169,15 +173,23 @@ p.panel-head-element{
display: flex;
align-content: center;
font-size: 10pt;
flex-direction: var(--chat-entry-flex-direction);
}
.chat-entry-nameplate{
.chat-entry-nameplate, .pm-panel-sesh-entry-nameplate{
display: flex;
}
.chat-entry-username, .pm-panel-sesh-entry-username{
margin: auto 0.2em auto 0;
text-wrap: nowrap;
width: 100%;
}
.chat-entry-timestamp, .pm-panel-sesh-entry-timestamp{
/* Yeah, yeah, I know, it's gross to use float over flex XP*/
float: right;
font-size: 8pt;
}
.chat-entry-body, .pm-panel-sesh-entry-body{

4
www/css/theme/movie-night.css
View file

@ -542,6 +542,10 @@ select.panel-head-element{
text-decoration-color: var(--danger0-alt0);
}
.chat-entry-timestamp, .pm-panel-sesh-entry-timestamp{
color: var(--accent0-alt1);
}
/* popup */
.popup-backer{

4
www/css/theme/the-network-classic.css
View file

@ -452,6 +452,10 @@ p.channel-guide-entry-item{
background-color: var(--bg1-alt0);
}
.chat-entry-timestamp, .pm-panel-sesh-entry-timestamp{
color: var(--accent0-alt0);
}
.serverwhisper{
color: var(--accent0-alt1)
}

21
www/js/channel/channel.js
View file

@ -327,6 +327,26 @@ class channel{
//Set theme
ThemeManager.setTheme(value);
//We're fuckin' done here
return;
case 'nameplateFormat':
switch(value){
//If we're throwin' the nameplate to the left
case 'left':
console.log("FUCK")
document.body.style.setProperty("--chat-entry-flex-direction", "row");
break;
//If we're throwin' er' up top, or someones bein' some sorta smartass
default:
document.body.style.setProperty("--chat-entry-flex-direction", "column");
break;
}
//If the chatbox is loaded in
if(this.chatBox != null){
//Re render any existing chats
this.chatBox.rerenderBuffer();
}
return;
case 'chatWidthMin':
//If the chat isn't loaded
@ -391,6 +411,7 @@ class channel{
["liveSyncTolerance", 10],
["syncDelta", 6],
["theme", "The Network (Classic)"],
["nameplateFormat", "left"],
["chatWidthMin", 20],
["disablePortrait", false],
["disableSendButton", false],

20
www/js/channel/chat.js
View file

@ -680,4 +680,24 @@ class chatBox{
this.chatBuffer.scrollTop = this.chatBuffer.scrollHeight - Math.round(this.chatBuffer.getBoundingClientRect().height);
}
}
/**
* Re-render buffer from raw data (useful for settings changes)
*/
rerenderBuffer(){
//Yank existing messages from buffer, converting nodelist to array to avoid annoying behavior in for loops
const buffer = Array.from(this.chatBuffer.children);
//Iterate through all received messages
for(const message of buffer){
//Pull raw message data from saved message
const rawData = JSON.parse(message.dataset.rawData);
//Nuke the message
message.remove();
//Re-render chat out to the buffer
this.displayChat(rawData);
}
}
}

18
www/js/channel/chatPostprocessor.js
View file

@ -97,8 +97,9 @@ class chatPostprocessor{
const classSuffix = pm ? 'pm-panel-sesh' : 'chat';
const classSuffixAlt = pm ? classSuffix : 'chat-panel';
//Create chat-entry span
//Create chat-entry span, and store raw message data
this.chatEntry = document.createElement('span');
this.chatEntry.dataset.rawData = JSON.stringify(this.rawData);
//Add classes to classlist
this.chatEntry.classList.add(
@ -137,8 +138,19 @@ class chatPostprocessor{
flairSpan.classList.add(`${classSuffix}-entry-flair-span`, flair);
flairSpan.innerHTML = this.rawData.user;
//Inject flair span into user label before the colon
userLabel.innerHTML = `${flairSpan.outerHTML}: `;
let colonSpan = document.createElement('span');
colonSpan.classList.add(`${classSuffix}-entry-colon-span`);
if(localStorage.getItem('nameplateFormat') == "left"){
colonSpan.innerHTML = ': ';
}else if(localStorage.getItem('nameplateFormat') == "timestamp"){
colonSpan.classList.add(`${classSuffix}-entry-timestamp`);
colonSpan.innerHTML = ` (${timestamp.toLocaleString()})`;
}
//Append flair and colon(or timestamp) spans to userLabel
userLabel.appendChild(flairSpan);
userLabel.appendChild(colonSpan);
//Append user label to the nameplate
nameplate.appendChild(userLabel);

16
www/js/channel/panels/settingsPanel.js
View file

@ -62,6 +62,11 @@ class settingsPanel extends panelObj{
*/
this.theme = this.panelDocument.querySelector("#settings-panel-theme");
/**
* Chat nameplate format
*/
this.nameplateFormat = this.panelDocument.querySelector("#settings-panel-nameplate-format");
/**
* Chat Width Minimum while Size-Locked to Media Aspect Ratio
*/
@ -144,6 +149,7 @@ class settingsPanel extends panelObj{
this.liveSyncTolerance.addEventListener('change', this.updateLiveSyncTolerance.bind(this));
this.syncDelta.addEventListener('change', this.updateSyncDelta.bind(this));
this.theme.addEventListener('change', this.updateTheme.bind(this));
this.nameplateFormat.addEventListener('change', this.updateNameplateFormat.bind(this));
this.chatWidthMinimum.addEventListener('change', this.updateChatWidthMinimum.bind(this));
this.disablePortrait.addEventListener('change', this.updateDisablePortrait.bind(this));
this.disableSendButton.addEventListener('change', this.updateDisableSendButton.bind(this));
@ -163,6 +169,7 @@ class settingsPanel extends panelObj{
this.liveSyncTolerance.value = localStorage.getItem("liveSyncTolerance");
this.syncDelta.value = localStorage.getItem("syncDelta");
this.theme.querySelector('select').value = localStorage.getItem("theme");
this.nameplateFormat.querySelector('select').value = localStorage.getItem("nameplateFormat");
this.chatWidthMinimum.value = localStorage.getItem("chatWidthMin");
this.disablePortrait.checked = localStorage.getItem("disablePortrait") == 'true';
this.disableSendButton.checked = localStorage.getItem("disableSendButton") == 'true';
@ -261,6 +268,15 @@ class settingsPanel extends panelObj{
client.processConfig("theme", theme);
}
/**
* Update nameplate format
*/
updateNameplateFormat(){
let format = this.nameplateFormat.querySelector('select').value;
localStorage.setItem("nameplateFormat", format);
client.processConfig("nameplateFormat", format);
}
/**
* Handles Chat Width minimum Changes
*/