I made some theme for the web client and thought I would share.
TGMCP trigger: char.vitals
Javascript:
Code: Select all
(function x(v) {
if (!$("#lkb")[0]) {
$("head").prepend("<style>@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap'</style>");
$("#missingjs")[0].remove();
$("#uncompatible")[0].remove();
$("#fb-root")[0].remove();
$("#voice-input")[0].remove();
$("body")[0].children[3].remove();
$("#statusbars")[0].remove();
$("body")[0].children[0].innerHTML = '<div id="statusbars" style="top: 25px;left: 60px;width: 186px;position: fixed;"></div>';
$('#client')[0].append($('#statusbars')[0]);
$("body")[0].children[0].remove();
$('#client')[0].append($('#status')[0]);
$('#client')[0].append($('#inputbar')[0]);
$('#client')[0].append($('#communication')[0]);
$("#char-size")[0].remove();
$("#main")[0].style = "background: #18181B;width: calc(100% - 462px);padding: 180px 400px 80px 32px;height: calc(100% - 260px);";
$(".output-wrapper")[0].style = "height:100%;margin-top: 15px;border-top-style: solid;border-top-width: 20px;border-top-color: rgba(20, 20, 25, 0.15);background-color: initial; border: initial;";
$('.output-wrapper')[0].className = 'ow';
$("#mudoutput")[0].style = "overflow-y:scroll;padding-right: 1000px;font-family:initial;";
$("body")[0].style = 'background-color: rgb(40, 40, 50); font-family: "PT Mono"; color: #FFF;background-image: initial;';
$("#communication")[0].style = "padding:0px 1000px 0px 10px;position: fixed;width: calc(100% - 680px); left: 250px;height: 165px; font-size: 13px; top: 37px; overflow-y: scroll;";
$('#sidebar')[0].innerHTML = `<div id="magicmap" style="font-size: 7px;float: right;font-family:initial;">${$('#magicmap')[0].innerHTML }</div>`;
$('#sidebar')[0].style = "width: 400px;position: absolute;top: 20px;right: 50px;";
$("#client")[0].style = "margin: 15px;width: 100%;position: fixed;height: calc(100% - 30px);overflow-wrap: scroll;";
$("#controls")[0].style = "font-size: 12px;right:40px;";
$("#status")[0].style = 'border-image:linear-gradient(rgba(24,24,27,1)98%,rgba(24,24,27,0)) 1;border-width: 0px 0px 30px; font-size:10px; left:47px;top:195px;position:fixed;padding-right:calc(100% - 662px);';
$("#inputbar")[0].style = 'width: calc(100% - 430px); bottom: 25px;left: 35px;position: fixed;height: 30px; background-color:revert;border:initial;border-bottom: 1px solid #372ff0;';
$('#status').css('outline', 'none');
$('#statusbars')[0].innerHTML = [
['health', '8d140c'],
['mana', '1F4EB5'],
['fatigue', '015800'],
['food', 'A25600'],
['drink', '193C7E'],
['intox', '570A1C'],
['pro', '452563']
].map(function(x) {
return `<div id='${x[0]}' style='margin-left:initial;width:100%;border:initial;background-color:initial;'><div style="position:relative;top: 12px;left: -14px;font-size: 12px;">${x[0][0].toUpperCase()}</div><div class='progress' style='background-color: #${x[1]};height:10px;width:100%;'></div></div>`
}).join('') + '<div id="lkb_" style="margin-left:initial;width:100%;border:initial;background-color:initial;"><div style="position:relative;top: 12px;left: -14px;font-size: 12px;">$</div><div id="lkb" style="font-size:10px;width:100%;"></div></div>'
}
$("#food .progress")[0].style.width = '' + (" orem".indexOf(v.food[11]) * 25) + '%';
$("#drink .progress")[0].style.width = '' + ("amol ".indexOf(v.drink[12]) * 25) + '%';
$("#drink .progress")[0].style.width = '' + ("amol ".indexOf(v.drink[12]) * 25) + '%';
$("#pro .progress")[0].style.width = `${"n isatmnsilwalsmmddcncgovrmjgeetaeimtefn".indexOf(v.progress[0]+v.progress[2])*2.6}%`;
$("#intox .progress")[0].style.width = `${"erhypghtipewhipsyqrey ttlremtightntewhntoxidpy iicreminghtruewhrunktimy dwwremdrghtanewhankedrwy tdsremtaghtliewhlitzepyy bedremblghtasewhastedchy wduremwaghtoaewhoasteiwy tedremtoghtisewhissedndy pdvrempighttoewhtonedfuy sddremstghtblewhblivixey oiaremob".indexOf(v.intoxication.substr(3,3)+v.intoxication.substr(10,2))*2}%`;
console.log(v.intoxication, `${"erhypghtipewhipsyqrey ttlremtightntewhntoxidpy iicreminghtruewhrunktimy dwwremdrghtanewhankedrwy tdsremtaghtliewhlitzepyy bedremblghtasewhastedchy wduremwaghtoaewhoasteiwy tedremtoghtisewhissedndy pdvrempighttoewhtonedfuy sddremstghtblewhblivixey oiaremob".indexOf(v.intoxication.substr(3,3)+v.intoxication.substr(10,2))*2}%`)
})(mud.gmcp['char.vitals']);
It will look somewhat like this:
![Image](https://cdn.discordapp.com/attachments/324252606794956802/806812603082735656/Screenshot_2021-02-04_at_09.04.23.png)
You don't need the intoxication bar? Or want to rearrange bars, change colours? No problem - simply adjust the array, quite in the middle, where it goes like ['BAR TYPE','COLOUR CODE']. But don't change the names (never for health, mana, fatigue, and for the others only if you know what you are doing). Normally you should delete even a bit more if you want to remove bars, but it should work still, so we just won't open the console and don't see the errors happening when the client tries to update non-existing bars.
If you want to use it, you should also set up the following trigger, to adjust the map (since the magic maps have all type of resolutions, every map has to be adjusted to fit).
GMCP trigger: room.info
Javascript:
Code: Select all
$("#magicmap").css('font-size',Math.floor(666/Math.max(...a['room.map'].map.split("\n").map(x => x.length)))+'px');
Regex trigger: ^Total value: (.*) coins\.$
Javascript:
Code: Select all
$("#lkb")[0].innerHTML=`${(args[1].match(/(\d+) platinum/)||[0,0])[1]} platinum coins`;
There will be very likely still glitches, for some weird window sizes, and or especially with the map (each map can has it's own dimensions, and I for sure will not have thought of some) - so there will be every now and then tiny adjustments available.
Oh, and the script uses the font PT Mono (and loads it via Google Fonts - the client loads already a font from there, so I assume it acceptable; feel free to download and install it, so you can remove the Google link).
To activate the script, just logout/login, do something that affects your vitals, or just wait a bit (shouldn't take longer than a minute). It also takes sometimes a few seconds for health and drinks to update after a login (apparently this should happen with the original bars as well, they are just set to full until the real info comes up).
Enjoy!