Nexus hack: add a display of the date and season to the status bar

edited September 2020 in Mechanic's Corner
Mostly a proof-of-concept of how to add things to the Nexus interface. A few lines of code that add to the status bar the current date and season.

1) add to your onLoad near the top:
// create a new UI element in the status bar
var newNode = document.createElement('div');
newNode.setAttribute("id", "status-date");
var referenceNode = document.querySelector('#status-ping');
referenceNode.after(newNode);
send_GMCP("IRE.Time.Request", "");
2) add to your onGMCP, or integrate into any existing IRE.Time.List and IRE.Time.Update logic you have there:
if (args.gmcp_method == "IRE.Time.List" || args.gmcp_method == "IRE.Time.Update") {
  $('#status-date').text(args.gmcp_args.year + '-' + String(args.gmcp_args.mon).padStart(2,'0') + '-' + String(args.gmcp_args.day).padStart(2,'0') + ' ' + ['mwinter','lwinter','espring','mspring','lspring','esummer','msummer','lsummer','eautumn','mautumn','lautumn','e-winter'][args.gmcp_args.mon-1]);
};
Result:


Adding a display of the moon phase is left as an exercise for the student. (Note though that Nexus is going to keep forcing the width of this element to what it likes, no matter how much you set it to what you like, so you might find it works better to add a second element for that. As it is, I had to abbreviate the season names pretty harshly.)

Comments

  • edited June 2022
    Still works in Nexus 3, with a small modification to the onLoad part:

    if (document.querySelector('#status-date') == null) {
        var dateNode = document.createElement('div');
        dateNode.setAttribute("id", "status-date");
        var referenceNode = document.querySelector('#status-target');
        referenceNode.after(dateNode);
        var seasonNode = document.createElement('div');
        seasonNode.setAttribute("id", "status-season");
        dateNode.after(seasonNode);
    }


  • Forgot to post here: I added the moon cycle to the display, as an emoji.
    // update the date
    let dateNode = document.querySelector('#status-date');
    dateNode.textContent = (args.gmcp_args.year + '-' + String(args.gmcp_args.mon).padStart(2,'0') + '-' + String(args.gmcp_args.day).padStart(2,'0'));
    
    // update the season and moon phase; 633-08-22 was a full moon
    let seasonNode = document.querySelector('#status-season');
    let moonCycle = args.gmcp_args.year - 633;
    moonCycle *= 12;
    moonCycle += args.gmcp_args.mon - 8;
    moonCycle *= 25;
    moonCycle += args.gmcp_args.day - 22;
    moonCycle %= 32;
    let moonText = '';
    if (moonCycle == 0) moonText = '🌕';
    else if (moonCycle <= 7) moonText = '🌖';
    else if (moonCycle == 8) moonText = '🌗';
    else if (moonCycle <= 15) moonText = '🌘';
    else if (moonCycle == 16) moonText = '🌑';
    else if (moonCycle <= 23) moonText = '🌒';
    else if (moonCycle == 24) moonText = '🌓';
    else if (moonCycle <= 31) moonText = '🌔';
    let seasonText = (['mid-winter','late winter','early spring','mid-spring','late spring','early summer','mid-summer','late summer','early autumn','mid-autumn','late autumn','early winter'][args.gmcp_args.mon-1]);
    seasonNode.textContent = moonText + ' ' + seasonText;
  • That looks awesome!
Sign In or Register to comment.