Made a theme (v2 now also including intoxication bar)

General discussion about the Genesis Web Client located at https://www.genesismud.org/play/

Moderator: Eowul

Forum rules
- Use common sense and be respectful towards each other at all times, even when disagreeing.
- Do not reveal sensitive game information. Guild secrets, player seconds are examples of things not allowed.
Post Reply
User avatar
Kjartan
Beginner
Posts: 22
Joined: 23 Jan 2021 07:27
Contact:

Made a theme (v2 now also including intoxication bar)

Post by Kjartan » 04 Feb 2021 03:33

Hello everybody!

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

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');
And for the Last Known Balance (LKB) from your bank account to work, you need:
Regex trigger: ^Total value: (.*) coins\.$
Javascript:

Code: Select all

$("#lkb")[0].innerHTML=`${(args[1].match(/(\d+) platinum/)||[0,0])[1]} platinum coins`;
Please note: LKB currently doesn't acknowledge the fact, you might have closed an account. I will add that, as soon as I will close my bank account.

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!

User avatar
Kjartan
Beginner
Posts: 22
Joined: 23 Jan 2021 07:27
Contact:

Re: Made a theme (v2 now also including intoxication bar)

Post by Kjartan » 04 Feb 2021 21:25

I've got some feedback that there seems to be trouble with the script in combination with Chrome (as things don't work well - and it seems the whole screen is largely stretched outside of the visible area to the right.

If anyone with Chrome has this problem to, or maybe even uses it with Chrome but doesn't have those problems, your feedback might be very interesting. And if you had those problems, but were able to fix them - even better if you can provide the solution!

Post Reply
http://tworzymyatmosfere.pl/przescieradla-jedwabne-z-gumka/