improve time utils for relative time string and color to be more fradient instead of hard transitions

gulp/res/js/post.js

@@ -13,7 +13,7 @@ pug_mixins["post"] = pug_interp = function(post, truncate, manage=false, globalm
 var block = (this && this.block), attributes = (this && this.attributes) || {};
 pug_html = pug_html + "\u003Cdiv" + (" class=\"anchor\""+pug_attr("id", post.postId, true, false)) + "\u003E\u003C\u002Fdiv\u003E\u003Cdiv" + (pug_attr("class", pug_classes([`post-container ${post.thread || ban === true ? '' : 'op'}`], [true]), false, false)+pug_attr("data-board", post.board, true, false)+pug_attr("data-post-id", post.postId, true, false)+pug_attr("data-user-id", post.userId, true, false)) + "\u003E";
 const postURL = `/${post.board}/thread/${post.thread || post.postId}.html`;
-pug_html = pug_html + "\u003Cdiv class=\"post-info\"\u003E\u003Clabel\u003E";
+pug_html = pug_html + "\u003Cdiv class=\"post-info\"\u003E\u003Clabel class=\"noselect\"\u003E";
 if (globalmanage) {
 pug_html = pug_html + "\u003Cinput" + (" class=\"post-check\""+" type=\"checkbox\" name=\"globalcheckedposts\""+pug_attr("value", post._id, true, false)) + "\u002F\u003E ";
 ipHashSub = post.ip.hash.slice(-10);
@@ -62,7 +62,7 @@ pug_html = pug_html + "\u003Ctime" + (" class=\"post-date\""+pug_attr("datetime"
 if (post.userId) {
 pug_html = pug_html + "\u003Cspan" + (" class=\"user-id\""+pug_attr("style", pug_style(`background-color: #${post.userId}`), true, false)) + "\u003E" + (pug_escape(null == (pug_interp = post.userId) ? "" : pug_interp)) + "\u003C\u002Fspan\u003E ";
 }
-pug_html = pug_html + "\u003C\u002Flabel\u003E\u003Cspan class=\"post-links\"\u003E\u003Ca" + (" class=\"no-decoration\""+pug_attr("href", `${postURL}#${post.postId}`, true, false)) + "\u003ENo.\u003C\u002Fa\u003E\u003Cspan class=\"post-quoters\"\u003E\u003Ca" + (" class=\"no-decoration\""+pug_attr("href", `${postURL}#postform`, true, false)) + "\u003E" + (pug_escape(null == (pug_interp = post.postId) ? "" : pug_interp)) + "\u003C\u002Fa\u003E";
+pug_html = pug_html + "\u003C\u002Flabel\u003E\u003Cspan class=\"post-links\"\u003E\u003Ca" + (" class=\"noselect no-decoration\""+pug_attr("href", `${postURL}#${post.postId}`, true, false)) + "\u003ENo.\u003C\u002Fa\u003E\u003Cspan class=\"post-quoters\"\u003E\u003Ca" + (" class=\"no-decoration\""+pug_attr("href", `${postURL}#postform`, true, false)) + "\u003E" + (pug_escape(null == (pug_interp = post.postId) ? "" : pug_interp)) + "\u003C\u002Fa\u003E";
 if (!post.thread) {
 pug_html = pug_html + " \u003Cspan\u003E\u003Ca" + (pug_attr("href", `${postURL}#postform`, true, false)) + "\u003E[Reply]\u003C\u002Fa\u003E\u003C\u002Fspan\u003E";
 }

helpers/timeutils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const YEAR = 31536000000
-	, MONTH = 2592000000
+	, MONTH = 2629800000
 	, WEEK = 604800000
 	, DAY = 86400000
 	, HOUR = 3600000
@@ -17,37 +17,60 @@ module.exports = {
 	},
 
 	//string representing how long since date A to date B
-	'relativeString': (currentTime, eventTime) => {
-		const difference = currentTime.getTime() - eventTime.getTime();
+	'relativeString': (now, relativeTo) => {
+		const difference = now.getTime() - relativeTo.getTime();
 		let amount = 0;
 		let ret = '';
-		let color;
 		if (difference < MINUTE) {
-			return { color: '#39d6bc', text:'Now' };
+			return 'Now';
 		} else if (difference < HOUR) {
 			amount = Math.round(difference / MINUTE);
-			color = '#008000';
-			ret += `${amount} minute`
+			ret += `${amount} minute`;
 		} else if (difference < DAY) {
 			amount = Math.round(difference / HOUR);
-			color = '#84c100';
-			ret += `${amount} hour`
+			ret += `${amount} hour`;
 		} else if (difference < WEEK) {
 			amount = Math.round(difference / DAY);
-			color = '#fffd00';
 			ret += `${amount} day`;
 		} else if (difference < MONTH) {
 			amount = Math.round(difference / WEEK);
-			color = '#ff6700';
 			ret += `${amount} week`;
 		} else if (difference < YEAR) {
 			amount = Math.round(difference / MONTH);
-			color = '#ff0000';
 			ret += `${amount} month`;
 		} else {
-			return { color: '#ff000047', text: 'More than a year ago' };
+			return 'More than a year ago';
 		}
-		return { color, text: `${ret}${amount > 1 ? 's' : ''} ago` };
+		return `${ret}${amount > 1 ? 's' : ''} ago`;
+	},
+
+	'relativeColor': (now, relativeTo) => {
+		const difference = now.getTime() - relativeTo.getTime();
+		let r = 0
+			, g = 0
+			, b = 0;
+		if (difference < MINUTE) {
+			g = 170;
+			b = 255;
+		} else if (difference < HOUR) {
+			r = (difference / HOUR) * 127;
+			g = 255;
+		} else if (difference < DAY) {
+			r = 127 + (difference / DAY) * 127;
+			g = 255;
+		} else if (difference < WEEK) {
+			g = 255 - (difference / WEEK) * 127;
+			r = 255;
+		} else if (difference < MONTH) {
+			g = 128 - (difference / MONTH) * 127;
+			r = 255;
+		} else if (difference < YEAR) {
+			r = 255 - (difference / YEAR) * 255
+		} //else, leave it black for >1 year
+		r = (Math.round(r*0.85).toString(16)).padStart(2, '0');
+		g = (Math.round(g*0.85).toString(16)).padStart(2, '0');
+		b = (Math.round(b).toString(16)).padStart(2, '0');
+		return `#${r}${g}${b}`;
 	}
 
 };

models/pages/boardlist.js

@@ -2,7 +2,7 @@
 
 const { enableWebring } = require(__dirname+'/../../configs/main.js')
 	, { Boards, Webring } = require(__dirname+'/../../db/')
-	, { relativeString } = require(__dirname+'/../../helpers/timeutils.js')
+	, { relativeColor, relativeString } = require(__dirname+'/../../helpers/timeutils.js')
 	, pageQueryConverter = require(__dirname+'/../../helpers/pagequeryconverter.js')
 	, limit = 20;
 
@@ -51,14 +51,22 @@ module.exports = async (req, res, next) => {
 	if (localBoards) {
 		for (let i = 0; i < localBoards.length; i++) {
 			if (localBoards[i].lastPostTimestamp) {
-				localBoards[i].lastPostTimestamp = relativeString(now, new Date(localBoards[i].lastPostTimestamp));
+				const lastPostDate = new Date(localBoards[i].lastPostTimestamp);
+				localBoards[i].lastPostTimestamp = {
+					text: relativeString(now, lastPostDate),
+					color: relativeColor(now, lastPostDate)
+				}
 			}
 		}
 	}
 	if (webringBoards) {
 		for (let i = 0; i < webringBoards.length; i++) {
 			if (webringBoards[i].lastPostTimestamp) {
-				webringBoards[i].lastPostTimestamp = relativeString(now, new Date(webringBoards[i].lastPostTimestamp));
+				const lastPostDate = new Date(webringBoards[i].lastPostTimestamp);
+				webringBoards[i].lastPostTimestamp = {
+					text: relativeString(now, lastPostDate),
+					color: relativeColor(now, lastPostDate)
+				}
 			}
 		}
 	}

views/mixins/post.pug

@@ -4,7 +4,7 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false)
 	div(class=`post-container ${post.thread || ban === true ? '' : 'op'}` data-board=post.board data-post-id=post.postId data-user-id=post.userId)
 		- const postURL = `/${post.board}/thread/${post.thread || post.postId}.html`;
 		.post-info
-			label
+			label.noselect
 				if globalmanage
 					input.post-check(type='checkbox', name='globalcheckedposts' value=post._id)
 					| 
@@ -40,7 +40,7 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false)
 					span.user-id(style=`background-color: #${post.userId}`) #{post.userId}
 					| 
 			span.post-links
-				a.no-decoration(href=`${postURL}#${post.postId}`) No.
+				a.noselect.no-decoration(href=`${postURL}#${post.postId}`) No.
 				span.post-quoters
 					a.no-decoration(href=`${postURL}#postform`) #{post.postId}
 					if !post.thread