Skip to content

Adding source to comm payload #373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Volte6 merged 1 commit into from
May 8, 2025
Merged

Adding source to comm payload #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
309 changes: 242 additions & 67 deletions _datafiles/html/public/webclient-pure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,69 @@ <h3>Volume Controls</h3>
roomZones: {},
};
let GMCPUpdateHandlers = {
"Comm": function() {

var obj = GMCPStructs["Comm"];
if ( !obj.Channel ) {
return;
}

if ( !GMCPWindows['Comm'] && GMCPWindows['Comm'] !== false ) {

GMCPWindows['Comm'] = new WinBox({ title: "Communications",
mount: document.getElementById("comm-output"),
background: "#1c6b60", border: 1,
x: "right", y: 450,
width:363, height:20+290,
header: 20,
bottom: 60, // Limit how far down it can go. This affects docking the minimized window.
// end limit position range
onclose: force => { GMCPWindows['Comm'] = false; return false; },
});

GMCPWindows['Comm'].Message = function(channelName, fromName, fromSource, message) {

// add new text output
var tab = document.getElementById("comm-tab-"+channelName);
var panel = document.getElementById("comm-"+channelName);

if ( tab.classList.contains('active') ) {
tab.dataset.unread = 0;
tab.innerText = tab.dataset.label;
} else {
tab.dataset.unread = parseInt(tab.dataset.unread)+1;
tab.innerText = tab.dataset.label + "(" + String(tab.dataset.unread) + ")";
}

var p = document.createElement('p');
p.innerHTML = '<span class="text-name '+fromSource+'">' +
fromName +
'</span>: ' +
'<span class="text-body '+fromSource+'">' +
message +
'</span>';
panel.appendChild(p);

// clean up overflow
panelContainer = GMCPWindows['Comm'].window;
while (panel.scrollHeight > panelContainer.clientHeight-58) {
if ( panel.childElementCount < 1) {
break;
}
panel.removeChild(panel.firstElementChild);
}

};

}

if ( GMCPWindows['Comm'] === false ) {
return;
}

GMCPWindows['Comm'].Message(obj.Channel.channel, obj.Channel.sender, obj.Channel.source, obj.Channel.text);

},
"Room": function() {

var obj = GMCPStructs["Room"];
Expand All @@ -269,10 +332,12 @@ <h3>Volume Controls</h3>
background: "#1c6b60",
border: 1,
x: "right",
y: 0,
width:300,
height:20+300,
y: 66,
width:363,
height:20+363,
header: 20,
bottom: 60, // Limit how far down it can go. This affects docking the minimized window.
// end limit position range
onclose: force => { GMCPWindows['Map'] = false; return false; },
oncreate: ops => {

Expand Down Expand Up @@ -391,17 +456,13 @@ <h3>Volume Controls</h3>
mount: document.getElementById("vitals-bars"),
background: "#1c6b60",
border: 1,
x: "right",
y: 320,
x: window.innerWidth-300-63,//"right",
y: 0,
width:300,
height:20+120,
height:20+40,
header: 20,
bottom: 60, // Limit how far down it can go. This affects docking the minimized window.
onclose: force => { GMCPWindows['Char.Vitals'] = false; return false; },
oncreate: opts => {
opts.width = document.getElementById('vitals-bars').style.width;
opts.height = "48px";
}

});
}

Expand Down Expand Up @@ -983,86 +1044,181 @@ <h3>Volume Controls</h3>
/* add these styles once (e.g. in your global <style> block) */

#health-bar {
position: relative;
width: 100%; /* or fixed px width */
height: 50%;
background: linear-gradient(
to right,
#f44336 0%, /* red */
#ffeb3b 50%, /* yellow */
#4caf50 100% /* green */
);
border-radius: 12px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
overflow: hidden;
margin: 0 2px;
position: relative;
width: 100%; /* or fixed px width */
height: 50%;
background: linear-gradient(
to right,
#f44336 0%, /* red */
#ffeb3b 50%, /* yellow */
#4caf50 100% /* green */
);
border-radius: 12px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
overflow: hidden;
margin: 0 2px;
}

#health-bar .health-fill {
height: 100%;
width: 0%;
background: #333;
float:right;
transition: width 0.4s ease-out;
height: 100%;
width: 0%;
background: #333;
float:right;
transition: width 0.4s ease-out;
}

#health-bar .health-text {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: monospace;
font-size: 0.85em;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
pointer-events: none;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: monospace;
font-size: 0.85em;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
pointer-events: none;
}


#mana-bar {
position: relative;
width: 100%; /* or fixed px width */
height: 50%;
background: linear-gradient(
to right,
#1e108b 0%,
#3a20fe 100%
);
border-radius: 12px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
overflow: hidden;
margin: 0;
position: relative;
width: 100%; /* or fixed px width */
height: 50%;
background: linear-gradient(
to right,
#1e108b 0%,
#3a20fe 100%
);
border-radius: 12px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
overflow: hidden;
margin: 0;
}

#mana-bar .mana-fill {
height: 100%;
width: 0%;
background: #333;
float:right;
transition: width 0.4s ease-out;
height: 100%;
width: 0%;
background: #333;
float:right;
transition: width 0.4s ease-out;
}

#mana-bar .mana-text {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: monospace;
font-size: 0.85em;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
pointer-events: none;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: monospace;
font-size: 0.85em;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
pointer-events: none;
}
#vitals-bars {
height:100%;
}
.wb-body { background:#000; }
.wb-body { background:#000; overflow:hidden; }
.wb-max { display:none; }
.wb-full { display:none; }

.tabs {
width: 100%;
display: flex;
flex-direction: column;
height: 100%; /* if you want full‐height panels */
}

.tab-buttons {
display: flex;
border-bottom: 1px solid #0f3333;
}

.tab-button {
flex: 1;
padding: 0.75em;
background: #279888;
border: none;
cursor: pointer;
font: inherit;
font-size: small;
transition: background 0.2s;
}

.tab-button:not(.active):hover {
background: #0f3333;
color:#dffbd1;
}

.tab-button.active {
background: #dffbd1;
border-bottom: 2px solid #0f3333;
}

.tab-contents {
flex: 1;
padding: 0.25em;
background: #000;
}

.tab-content {
display: none;
height: 100%;
}

.tab-content.active {
display: block;
}

.text-name.mob {
color: #00ffff;
}
.text-name.player {
color: #fce94f;
}
.chat-window {
overflow:scroll;
background-color:#000;
color:#fff;
}
.chat-window.broadcast {
color: #d700d7;
}
.chat-window.whisper {
color: #737670;
}
</style>



<script>
// on DOM ready
document.addEventListener('DOMContentLoaded', () => {
const buttons = document.querySelectorAll('.tab-button');
const panels = document.querySelectorAll('.tab-content');

buttons.forEach(btn => {
btn.addEventListener('click', () => {
const target = btn.dataset.tab;

// deactivate all
buttons.forEach(b => b.classList.remove('active'));
panels.forEach(p => p.classList.remove('active'));

// activate the clicked one and its panel
btn.classList.add('active');
btn.dataset.unread = 0;
btn.innerText = btn.dataset.label;
document.getElementById(target).classList.add('active');
});
});
});
</script>

<div style="display:none;">

<!-- VITALS window -->
<div id="vitals-bars">
<div id="health-bar">
<div class="health-fill" style="width: 100%;"></div>
Expand All @@ -1074,7 +1230,26 @@ <h3>Volume Controls</h3>
</div>
</div>

<!-- MAP window -->
<div id="map-render" style="width:100%; height:100%;"></div>

<!-- COMM window -->
<div id="comm-output" class="tabs">
<div class="tab-buttons">
<button id="comm-tab-say" class="tab-button active" data-tab="comm-say" data-label="Say" data-unread="0">Say</button>
<button id="comm-tab-whisper" class="tab-button" data-tab="comm-whisper" data-label="Whisper" data-unread="0">Whisper</button>
<button id="comm-tab-party" class="tab-button" data-tab="comm-party" data-label="Party" data-unread="0">Party</button>
<button id="comm-tab-broadcast" class="tab-button" data-tab="comm-broadcast" data-label="Broadcasts" data-unread="0">Broadcasts</button>
</div>
<div class="tab-contents">
<div id="comm-say" class="chat-window say tab-content active"></div>
<div id="comm-whisper" class="chat-window whisper tab-content"></div>
<div id="comm-party" class="chat-window party tab-content"></div>
<div id="comm-broadcast" class="chat-window broadcast tab-content"></div>
</div>
</div>

</div>

</body>
</html>
5 changes: 4 additions & 1 deletion _datafiles/world/default/mobs/frostfang/scripts/40-rodric.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,14 @@ function onPath(mob, room, eventDetails) {
}

var RANDOM_IDLE = [
"pathto "+String(INN_ROOM_ID),
"emote shakes his head in disbelief.",
"emote attempts to fix a rat trap.",
"say There's just too many rats. We'll never get rid of them all.",
"say I'm so tired. I need a break.",
"say I'm running out of traps. I need to find more.",
"say I'm worried about the rats in the slums. They're everywhere!",
"say I'm running out of traps and don't seem to be making a dent in the rat numbers.",
"pathto "+String(INN_ROOM_ID),
];

// Invoked once every round if mob is idle
Expand All @@ -144,6 +144,9 @@ function onIdle(mob, room) {
}

randNum = UtilDiceRoll(1, 12)-1;
if ( randNum == 0) { // double zero needed for the pathto event
randNum = UtilDiceRoll(1, 12)-1;
}
if ( randNum < RANDOM_IDLE.length ) {
mob.Command(RANDOM_IDLE[randNum]);
return true;
Expand Down
Loading
Loading