From c16f591dab64ad945ba9e93247ea9ab2004b38ea Mon Sep 17 00:00:00 2001 From: Alexander Danilov Date: Fri, 25 Oct 2024 22:19:20 +0500 Subject: [PATCH 1/3] Added `window.formatAgo` - it formats the time difference between two timestamps (in milliseconds) as a string. --- core/code/utils.js | 37 +++++++++++++++++++++++++++++++++++++ test/utils.spec.js | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+) diff --git a/core/code/utils.js b/core/code/utils.js index 858c3a945..311a065a3 100644 --- a/core/code/utils.js +++ b/core/code/utils.js @@ -224,6 +224,42 @@ const formatDistance = (distance) => { return `${IITC.utils.formatNumber(value)}${unit}`; }; +/** + * Formats the time difference between two timestamps (in milliseconds) as a string. + * + * @memberof IITC.utils + * @function formatAgo + * @param {number} time - The past timestamp in milliseconds. + * @param {number} now - The current timestamp in milliseconds. + * @param {Object} [options] - Options for formatting. + * @param {boolean} [options.showSeconds=false] - Whether to include seconds in the result. + * @returns {string} The formatted time difference (e.g., "45s", "5m", "2h 45m", "1d 3h 45m") + */ +const formatAgo = (time, now, options = { showSeconds: false }) => { + const secondsTotal = Math.floor(Math.max(0, (now - time) / 1000)); + + // Calculate time units + const days = Math.floor(secondsTotal / 86400); + const hours = Math.floor((secondsTotal % 86400) / 3600); + const minutes = Math.floor((secondsTotal % 3600) / 60); + const seconds = secondsTotal % 60; + + const result = []; + + // Include units conditionally based on non-zero values + if (days > 0) result.push(`${days}d`); + if (hours > 0 || result.length !== 0) result.push(`${hours}h`); + if (minutes > 0 || result.length !== 0) result.push(`${minutes}m`); + if (options.showSeconds && (result.length === 0 || seconds > 0)) result.push(`${seconds}s`); + + // If no units were added, show "0" with the smallest available unit + if (result.length === 0) { + return options.showSeconds ? '0s' : '0m'; + } + + return result.join(' '); +}; + /** * Checks if the device is a touch-enabled device. * Alias for `L.Browser.touch()` @@ -448,6 +484,7 @@ IITC.utils = { unixTimeToHHmm, formatInterval, formatDistance, + formatAgo, isTouchDevice, scrollBottom, escapeJS, diff --git a/test/utils.spec.js b/test/utils.spec.js index 22ee74c20..278462ec0 100644 --- a/test/utils.spec.js +++ b/test/utils.spec.js @@ -349,6 +349,38 @@ describe('IITC.utils.formatDistance', () => { }); }); +describe('IITC.utils.formatAgo', () => { + const now = Date.now(); + + describe('Basic functionality', () => { + it('should return "0s" when there is no time difference and seconds are enabled', () => { + expect(IITC.utils.formatAgo(now, now, { showSeconds: true })).to.equal('0s'); + }); + + it('should return "0m" when time difference is negative and seconds are disabled', () => { + const futureTime = now + 1000; + expect(IITC.utils.formatAgo(futureTime, now)).to.equal('0m'); + }); + }); + + describe('Complex scenarios', () => { + it('should not show seconds if seconds are disabled', () => { + const time = now - 45 * 1000; // 45 seconds ago + expect(IITC.utils.formatAgo(time, now)).to.equal('0m'); + }); + + it('should return only minutes if time difference is less than an hour', () => { + const time = now - 5 * 60 * 1000; // 5 minutes ago + expect(IITC.utils.formatAgo(time, now)).to.equal('5m'); + }); + + it('should handle all units enabled', () => { + const time = now - (2 * 86400 + 5 * 3600 + 30 * 60 + 15) * 1000; // 2 days, 5 hours, 30 minutes, and 15 seconds ago + expect(IITC.utils.formatAgo(time, now, { showSeconds: true })).to.equal('2d 5h 30m 15s'); + }); + }); +}); + describe('IITC.utils.escapeJS', () => { it('should escape double quotes in the string', () => { const result = IITC.utils.escapeJS('Hello "World"'); From 2b761271c8d82c748fa200640611144f9efa442d Mon Sep 17 00:00:00 2001 From: Alexander Danilov Date: Sat, 26 Oct 2024 16:12:45 +0500 Subject: [PATCH 2/3] Using `IITC.utils.formatAgo` instead of the plugins own function --- plugins/machina-tracker.js | 27 ++++++++++++--------------- plugins/player-activity-tracker.js | 21 +++++++-------------- 2 files changed, 19 insertions(+), 29 deletions(-) diff --git a/plugins/machina-tracker.js b/plugins/machina-tracker.js index ac0be87ce..23bf4bfb2 100644 --- a/plugins/machina-tracker.js +++ b/plugins/machina-tracker.js @@ -1,13 +1,17 @@ // @name Machina tracker // @author McBen // @category Layer -// @version 1.0.1 +// @version 1.1.0 // @description Show locations of Machina activities /* exported setup, changelog --eslint */ -/* global L */ +/* global IITC, L */ var changelog = [ + { + version: '1.1.0', + changes: ['Using `IITC.utils.formatAgo` instead of the plugin own function'], + }, { version: '1.0.1', changes: ['Version upgrade due to a change in the wrapper: plugin icons are now vectorized'], @@ -146,17 +150,6 @@ machinaTracker.processNewData = function (data) { }); }; -machinaTracker.ago = function (time, now) { - var s = (now - time) / 1000; - var h = Math.floor(s / 3600); - var m = Math.floor((s % 3600) / 60); - var returnVal = m + 'm'; - if (h > 0) { - returnVal = h + 'h' + returnVal; - } - return returnVal + ' ago'; -}; - machinaTracker.createPortalLink = function (portal) { return $('') .addClass('text-overflow-ellipsis') @@ -188,7 +181,7 @@ machinaTracker.drawData = function () { var ageBucket = Math.min((now - event.time) / split, 3); var position = event.from.latLng; - var title = isTouchDev ? '' : machinaTracker.ago(event.time, now); + var title = isTouchDev ? '' : IITC.utils.formatAgo(event.time, now) + ' ago'; var icon = machinaTracker.icon; var opacity = 1 - 0.2 * ageBucket; @@ -199,7 +192,11 @@ machinaTracker.drawData = function () { linkList.appendTo(popup); event.to.forEach((to) => { - $('
  • ').append(machinaTracker.createPortalLink(to)).append(' ').append(machinaTracker.ago(to.time, now)).appendTo(linkList); + $('
  • ') + .append(machinaTracker.createPortalLink(to)) + .append(' ') + .append(IITC.utils.formatAgo(to.time, now) + ' ago') + .appendTo(linkList); }); var m = L.marker(position, { icon: icon, opacity: opacity, desc: popup[0], title: title }); diff --git a/plugins/player-activity-tracker.js b/plugins/player-activity-tracker.js index 9c39f909d..373d783d4 100644 --- a/plugins/player-activity-tracker.js +++ b/plugins/player-activity-tracker.js @@ -1,13 +1,17 @@ // @author breunigs // @name Player activity tracker // @category Layer -// @version 0.13.2 +// @version 0.14.0 // @description Draw trails for the path a user took onto the map based on status messages in COMMs. Uses up to three hours of data. Does not request chat data on its own, even if that would be useful. /* exported setup, changelog --eslint */ -/* global L -- eslint */ +/* global IITC, L -- eslint */ var changelog = [ + { + version: '0.14.0', + changes: ['Using `IITC.utils.formatAgo` instead of the plugin own function'], + }, { version: '0.13.2', changes: ['Refactoring: fix eslint'], @@ -274,17 +278,6 @@ window.plugin.playerTracker.getLatLngFromEvent = function (ev) { return L.latLng(lats / ev.latlngs.length, lngs / ev.latlngs.length); }; -window.plugin.playerTracker.ago = function (time, now) { - var s = (now - time) / 1000; - var h = Math.floor(s / 3600); - var m = Math.floor((s % 3600) / 60); - var returnVal = m + 'm'; - if (h > 0) { - returnVal = h + 'h' + returnVal; - } - return returnVal; -}; - window.plugin.playerTracker.drawData = function () { var isTouchDev = window.isTouchDevice(); @@ -314,7 +307,7 @@ window.plugin.playerTracker.drawData = function () { var evtsLength = playerData.events.length; var last = playerData.events[evtsLength - 1]; - var ago = window.plugin.playerTracker.ago; + const ago = IITC.utils.formatAgo; // tooltip for marker - no HTML - and not shown on touchscreen devices var tooltip = isTouchDev ? '' : plrname + ', ' + ago(last.time, now) + ' ago'; From 3afb6c8cc0e7b3976edbbab48ade6b3258b1f50b Mon Sep 17 00:00:00 2001 From: Alexander Danilov Date: Sat, 26 Oct 2024 19:09:20 +0500 Subject: [PATCH 3/3] Refactoring to simplify the extension of "Player activity tracker" plugin functions --- plugins/player-activity-tracker.js | 64 ++++++++++++++---------------- 1 file changed, 29 insertions(+), 35 deletions(-) diff --git a/plugins/player-activity-tracker.js b/plugins/player-activity-tracker.js index 373d783d4..30416c62b 100644 --- a/plugins/player-activity-tracker.js +++ b/plugins/player-activity-tracker.js @@ -10,7 +10,7 @@ var changelog = [ { version: '0.14.0', - changes: ['Using `IITC.utils.formatAgo` instead of the plugin own function'], + changes: ['Using `IITC.utils.formatAgo` instead of the plugin own function', 'Refactoring to make it easier to extend plugin functions'], }, { version: '0.13.2', @@ -38,6 +38,7 @@ window.PLAYER_TRACKER_MAX_TIME = 3 * 60 * 60 * 1000; // in milliseconds window.PLAYER_TRACKER_MIN_ZOOM = 9; window.PLAYER_TRACKER_MIN_OPACITY = 0.3; window.PLAYER_TRACKER_LINE_COLOUR = '#FF00FD'; +window.PLAYER_TRACKER_MAX_DISPLAY_EVENTS = 10; // Maximum number of events in a popup // use own namespace for plugin window.plugin.playerTracker = function () {}; @@ -283,8 +284,7 @@ window.plugin.playerTracker.drawData = function () { var gllfe = window.plugin.playerTracker.getLatLngFromEvent; - var polyLineByAgeEnl = [[], [], [], []]; - var polyLineByAgeRes = [[], [], [], []]; + var polyLineByPlayerAndAge = {}; var split = window.PLAYER_TRACKER_MAX_TIME / 4; var now = Date.now(); @@ -301,8 +301,10 @@ window.plugin.playerTracker.drawData = function () { var ageBucket = Math.min(Math.trunc((now - p.time) / split), 4 - 1); var line = [gllfe(p), gllfe(playerData.events[i - 1])]; - if (playerData.team === 'RESISTANCE') polyLineByAgeRes[ageBucket].push(line); - else polyLineByAgeEnl[ageBucket].push(line); + if (!polyLineByPlayerAndAge[plrname]) { + polyLineByPlayerAndAge[plrname] = [[], [], [], []]; + } + polyLineByPlayerAndAge[plrname][ageBucket].push(line); } var evtsLength = playerData.events.length; @@ -351,7 +353,7 @@ window.plugin.playerTracker.drawData = function () { popup.append('
    ').append('
    ').append(document.createTextNode('previous locations:')).append('
    '); var table = $('').appendTo(popup).css('border-spacing', '0'); - for (let i = evtsLength - 2; i >= 0 && i >= evtsLength - 10; i--) { + for (let i = evtsLength - 2; i >= 0 && i >= evtsLength - window.PLAYER_TRACKER_MAX_DISPLAY_EVENTS; i--) { var ev = playerData.events[i]; $('') .append($('
    ').text(ago(ev.time, now) + ' ago')) @@ -368,7 +370,8 @@ window.plugin.playerTracker.drawData = function () { var icon = playerData.team === 'RESISTANCE' ? new window.plugin.playerTracker.iconRes() : new window.plugin.playerTracker.iconEnl(); // as per OverlappingMarkerSpiderfier docs, click events (popups, etc) must be handled via it rather than the standard // marker click events. so store the popup text in the options, then display it in the oms click handler - var m = L.marker(gllfe(last), { icon: icon, opacity: absOpacity, desc: popup[0], title: tooltip }); + const markerPos = gllfe(last); + var m = L.marker(markerPos, { icon: icon, opacity: absOpacity, desc: popup[0], title: tooltip }); m.addEventListener('spiderfiedclick', window.plugin.playerTracker.onClickListener); // m.bindPopup(title); @@ -382,7 +385,7 @@ window.plugin.playerTracker.drawData = function () { playerData.marker = m; - m.addTo(playerData.team === 'RESISTANCE' ? window.plugin.playerTracker.drawnTracesRes : window.plugin.playerTracker.drawnTracesEnl); + m.addTo(window.plugin.playerTracker.getDrawnTracesByTeam(playerData.team)); window.registerMarkerForOMS(m); // jQueryUI doesn’t automatically notice the new markers @@ -392,36 +395,27 @@ window.plugin.playerTracker.drawData = function () { }); // draw the poly lines to the map - $.each(polyLineByAgeEnl, function (i, polyLine) { - if (polyLine.length === 0) return true; - - var opts = { - weight: 2 - 0.25 * i, - color: window.PLAYER_TRACKER_LINE_COLOUR, - interactive: false, - opacity: 1 - 0.2 * i, - dashArray: '5,8', - }; + for (const [playerName, polyLineByAge] of Object.entries(polyLineByPlayerAndAge)) { + polyLineByAge.forEach((polyLine, i) => { + if (polyLine.length === 0) return; + + const opts = { + weight: 2 - 0.25 * i, + color: window.PLAYER_TRACKER_LINE_COLOUR, + interactive: false, + opacity: 1 - 0.2 * i, + dashArray: '5,8', + }; - $.each(polyLine, function (ind, poly) { - L.polyline(poly, opts).addTo(window.plugin.playerTracker.drawnTracesEnl); + polyLine.forEach((poly) => { + L.polyline(poly, opts).addTo(window.plugin.playerTracker.getDrawnTracesByTeam(window.plugin.playerTracker.stored[playerName].team)); + }); }); - }); - $.each(polyLineByAgeRes, function (i, polyLine) { - if (polyLine.length === 0) return true; - - var opts = { - weight: 2 - 0.25 * i, - color: window.PLAYER_TRACKER_LINE_COLOUR, - interactive: false, - opacity: 1 - 0.2 * i, - dashArray: '5,8', - }; + } +}; - $.each(polyLine, function (ind, poly) { - L.polyline(poly, opts).addTo(window.plugin.playerTracker.drawnTracesRes); - }); - }); +window.plugin.playerTracker.getDrawnTracesByTeam = function (team) { + return team === 'RESISTANCE' ? window.plugin.playerTracker.drawnTracesRes : window.plugin.playerTracker.drawnTracesEnl; }; window.plugin.playerTracker.getPortalLink = function (data) {