Upd. hashymagnet, age system

public/Assets/CSS/Dark.css

@@ -107,4 +107,4 @@ Body {
 }
 .Footer > .FooterRight { Margin-Right: 12px; }
 
-#AgeDiv { Padding: 16px; }
+#OcttAgeView { Padding: 16px; }

public/Assets/JS/CurrentAge.js

@@ -1,20 +1,23 @@
+var OcttTime = {};
+
 // All Unix time values are in milliseconds (ms)
-const UnixDay = 86400000;
+OcttTime.UnixDay = 86400000;
-const UnixYear = 31536000000;
+OcttTime.UnixYear = 31536000000;
-const BirthTime = 1082713500000;
+OcttTime.BirthTime = 1082713500000;
+OcttTime.Duration = 0.00275; // ~1 day
 
-function UnixTime() {
+OcttTime.UnixTime = function UnixTime() {
-	let DateNow = Date.now();
+	var DateNow = Date.now();
-	let TimeSinceBirth = DateNow - BirthTime;
+	var TimeSinceBirth = DateNow - OcttTime.BirthTime;
-	let YearsSinceBirth = TimeSinceBirth / UnixYear;
+	var YearsSinceBirth = TimeSinceBirth / OcttTime.UnixYear;
-	let LeapYears = ~~(YearsSinceBirth / 4);
+	var LeapYears = ~~(YearsSinceBirth / 4);
-	return DateNow - UnixDay*LeapYears;
+	return DateNow - (OcttTime.UnixDay * LeapYears);
 }
 
-function UnixAgeNow() {
+OcttTime.UnixAgeNow = function UnixAgeNow() {
-	return UnixTime() - BirthTime;
+	return OcttTime.UnixTime() - OcttTime.BirthTime;
 }
 
-function UnixToYears() {
+OcttTime.YearsAgeNow = function YearsAgeNow() {
-	return UnixAgeNow() / UnixYear;
+	return OcttTime.UnixAgeNow() / OcttTime.UnixYear;
 }

public/Assets/JS/CurrentAgeRenderIndex.js

@@ -1,9 +1,8 @@
-const CurrentAgeElem = document.getElementById("CurrentAge");
+var CurrentAgeElem = document.getElementById('OcttCurrentAge');
-const RefreshTime = 50;
+var RefreshTime = 50;
 
-const ConfettiSleep = 600;
+var ConfettiSleep = 600;
-const ConfettiIter = 32;
+var ConfettiIter = 32;
-const ConfettiExec = 0.00275; // Exec payload for ~1 day from event
 
 var ConfettiCalled = false;
 
@@ -16,19 +15,18 @@ function Sleep(ms) {
 }
 
 async function Confetti() {
-	for (let i = 0; i < ConfettiIter; i++) {
+	for (var i = 0; i < ConfettiIter; i++) {
-		const ConfettiCanvas = document.getElementById('ConfettiCanvas');
+		var ConfettiCanvas = document.getElementById('ConfettiCanvas');
-		const JsConfetti = new JSConfetti({ConfettiCanvas});
+		var JsConfetti = new JSConfetti({ConfettiCanvas});
 		JsConfetti.addConfetti({
 			emojis: [
-				'🌈', '⚡️', '💥',
+				'🌈', '⚡️', '💥', '✨',
-				'✨', '💫', '🌸',
+				'💫', '🌸', '🏳️‍⚧️️', '🎉️',
-				'🏳️‍⚧️️', '🎉️', '🎊️',
+				'🎊️', '🏳️‍🌈️', '🎈️', '🎆️',
-				'🏳️‍🌈️', '🎈️', '🎆️',
+				'💘️', '💝️', '💖️', '💗️',
-				'💘️', '💝️', '💖️',
+				'💞️', '❤️', '💛️', '💚️',
-				'💗️', '💞️', '❤️',
+				'💜️', '🤎️', '🖤️', '🤍️',
-				'💛️', '💚️', '💜️',
+				'💯', '❣️', '👾', '🎁',
-				'🤎️', '🖤️', '🤍️',
 			]
 		});
 		JsConfetti.addConfetti();
@@ -38,9 +36,9 @@ async function Confetti() {
 
 
 function UpdateAge() {
-	let Years = UnixToYears();
+	var Years = OcttTime.YearsAgeNow();
 	CurrentAgeElem.innerHTML = "Currently " + Years + " years old..";
-	if ((Years % 1 < ConfettiExec) && (!ConfettiCalled)) {
+	if ((Years % 1 < OcttTime.Duration) && (!ConfettiCalled)) {
 		Confetti();
 		ConfettiCalled = true;
 	}

public/HashyMagnet/index.html

@@ -210,13 +210,13 @@ String.prototype.replaceAllTxt = function replaceAll(search, replace) {
   return this.split(search).join(replace);
 };
 
-const OnInputChangePaste = ['onchange', 'oninput', 'onpaste'];
+var OnInputChangePaste = ['onchange', 'oninput', 'onpaste'];
 
 var Generated = false;
 var Trackers = [], 
     FetchTrackers = [];
 var MaxFetchTrackers = 40;
-const TrackersSources = [
+var TrackersSources = [
 	"https://ngosang.github.io/trackerslist/trackers_best.txt",
 	"https://newtrackon.com/api/stable",
 ];
@@ -230,16 +230,16 @@ function SplitLines(Text) {
 }
 
 async function DoFetchTrackers() {
-	for (let i = 0; i < TrackersSources.length; i++) {
+	for (var i = 0; i < TrackersSources.length; i++) {
-		let Req = await fetch(TrackersSources[i]);
+		var Req = await fetch(TrackersSources[i]);
-		let Data = await Req.text();
+		var Data = await Req.text();
 		FetchTrackers = FetchTrackers.concat(SplitLines(Data));
 	}
 	FetchTrackers = FetchTrackers.slice(0,MaxFetchTrackers);
 }
 
 function WriteFetchTrackers() {
-	for (let i = 0; i < FetchTrackers.length; i++) {
+	for (var i = 0; i < FetchTrackers.length; i++) {
 		TrackersArea.value += FetchTrackers[i] + '\n\n';
 	}
 	StoreTrackers();
@@ -250,9 +250,12 @@ function StoreTrackers() {
 	Trackers = SplitLines(TrackersArea.value);
 }
 
-async function CallWriteFetchTrackers() {
+async function InitialFill() {
 	await DoFetchTrackers();
 	WriteFetchTrackers();
+	if (new URLSearchParams(window.location.hash).get('#Hash')) {
+		GenerateBtn.onclick();
+	};
 }
 
 GenerateBtn.onclick = function() {
@@ -262,16 +265,17 @@ GenerateBtn.onclick = function() {
 		};
 	});
 	TextBox.value = 'magnet:?xt=urn:btih:' + TextBox.value;
-	for (let i = 0; i < Trackers.length; i++) {
+	for (var i = 0; i < Trackers.length; i++) {
 		TextBox.value += '&tr=' + encodeURIComponent(Trackers[i]);
 	};
 	Generated = true;
-	DoRedraw();
+	// Do it two times because of a strange bug with the ResetBtn
+	DoRedraw(); DoRedraw();
 };
 
 function DoRedraw() {
 	TextBox.style = '';
-	let TextBoxWidth = TextBox.offsetWidth;
+	var TextBoxWidth = TextBox.offsetWidth;
 	if (Generated) {
 		TextBox.disabled = GenerateBtn.disabled = GenerateBtn.hidden = true;
 		TextBox.style = 'Width:' + (TextBoxWidth - ResetBtn.offsetWidth - 12) + 'px;'
@@ -334,15 +338,18 @@ TitleTitle.onclick = function() {
 TextBox.value = new URLSearchParams(window.location.hash).get('#Hash');
 
 DoRedraw();
-CallWriteFetchTrackers();
+InitialFill();
+
+var Changelog = `\
+[ 2023-04-21 ]
+- Various UX fixes
 
-const Changelog = `\
 [ 2023-01-18 ]
 - Fix handling of torrent hash input
 - Improve support for older browsers
 - Improve minor UI/UX aspects
 `;
-LastUpdatedDate.innerHTML = Changelog.split('\n')[0].substring(2, 12);
+LastUpdatedDate.innerHTML = Changelog.split('\n')[0].split('[')[1].split(']')[0].trim();
 </script>
 </body>
 </html>

public/index.html

@@ -35,8 +35,8 @@
 			<h4><a href="https://octospacc.gitlab.io/FumoPrisms">🔺️ Fumo Prisms (!)</a></h4>
 		</div></div>
 		<br><br><br>
-		<div id="AgeDiv">
+		<div id="OcttAgeView">
-			<p id="CurrentAge"></p>
+			<p id="OcttCurrentAge"></p>
 			<noscript><p>There should be a ticking clock here, but your browser isn't loading the JavaScript.</p></noscript>
 			<br>
 		</div>