☰

TORN EST-GMT-Time

TORN GMT and TORN TIME

// ==UserScript==
// @name         TORN EST-GMT-Time
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description TORN GMT and TORN TIME
// @author      xedx [2100735]
// @include     https://www.torn.com/*
// @grant     https://raw.githubusercontent.com/awolfa/Torn-UserScripts/main/Torn%20Time/EST-GMT-Time
// @grant     GM_addStyle
// @grant     unsafeWindow
// @license MIT
// ==/UserScript==

//xedx [2100735] thinks Red-Rabbit [2203961] is coolest person in the world and anyone using this app should send her all kinds of goodies.  
//But if you really like this app, say thanks to xdex with a Donator Pack

//If you have difficulty on where the time is located accross your screen, then change the width % under GM add style .addtime est

(function() {
    'use strict';

    GM_addStyle(`
           .my-flex {display: flex;}
           .add-time-est {text-align: right; font-size: 16px; font-weight: bold;
                          color: blue; margin-left: 100px; width: 40%;}
           .add-time-gmt {text-align: left; font-size: 16px; font-weight: bold;
                          color: red; margin-left: 25px;}`
    );

    // Functions to return the date formatted as EST/GMT
    const format = (date, tz) => date.toLocaleTimeString('en-US', {timeZone: tz});
    const displayEST = (date = new Date()) => 'EST: ' + format(date, 'EST');
    const displayUTC = (date = new Date()) => 'TCT: ' + format(date, 'GMT');

    // Function called to update the time
    const update = () => {targetEST.textContent = displayEST(); targetGMT.textContent = displayUTC()};

    // Create the felx wrapper div, the EST span, and GMT span
    // Note: we can add text directly using JQuery. However, when we want to refer to it later,
    // for example when appending the EST and GST nodes, we need an actual node, so we can get that
    // using the JQuery syntax, $("#<id>"). where id is "my-wrapper"
    const flexDiv = '<div class="my-flex" id="my-wrapper"></div>';

    // These I left as created nodes, so that when updating, we can just refer to the node.
    // Otherwise, we could use the same trick, above, and give them ID's, and refer to them
    // in the update function as $("#<targetEST.id>) etc.
    // For example, const targetEST = '<span class="header-bottom-text add-time-est" id="EST"></span>';
    // then, const update = () => {$("#EST").textContent = ...
    const targetEST = document.createElement('span');
    targetEST.classList.add('header-bottom-text', 'add-time-est');

    const targetGMT = document.createElement('span');
    targetGMT.classList.add('header-bottom-text', 'add-time-gmt');

    // Add the wrapper to the existing header, then to that, add the two 'clocks'
    let sel = document.querySelector('.header-wrapper-bottom');
    $(sel).append(flexDiv); // Can only use this method (appending text) when using the JQuery syntax, $(...).append()
    $("#my-wrapper").append(targetEST); // This appends an actual node, created with createElement
    $("#my-wrapper").append(targetGMT);

    // Start the timer to update every second
    setInterval(update, 1000);

})();