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

Lendren

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.)

Lendren

Slightly more advanced version that uses two elements so the season name won't be so abbreviated:

onLoad

<div>// create a new UI element in the status bar
var dateNode = document.createElement('div');
dateNode.setAttribute("id", "status-date");
var referenceNode = document.querySelector('#status-ping');
referenceNode.after(dateNode);
var seasonNode = document.createElement('div');
seasonNode.setAttribute("id", "status-season");
dateNode.after(seasonNode);
send_GMCP("IRE.Time.Request", "");</div>

onGMCP

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'));
  $('#status-season').text(['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]);
};

You can see from this how to add a third one for moon phase (or something else), which I would do, except I never bothered to make anything that tracks/calculates the current moon phase since none of my skills depend on it.

Lendren

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);
}

Lendren

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;

Uilani

That looks awesome!