From 7b083cf58121e6491131bda3373f38c86c982cb2 Mon Sep 17 00:00:00 2001 From: NinjaCheetah <58050615+NinjaCheetah@users.noreply.github.com> Date: Sun, 27 Apr 2025 01:24:17 -0400 Subject: [PATCH 1/2] Random themes are now seeded by the current year/month/day --- dsidev/guides.html | 4 +- dsidev/releases.html | 16 +-- theme.js | 232 ++++++++++++++++++------------------------- 3 files changed, 108 insertions(+), 144 deletions(-) diff --git a/dsidev/guides.html b/dsidev/guides.html index 493564c..6e583f5 100755 --- a/dsidev/guides.html +++ b/dsidev/guides.html @@ -6,7 +6,7 @@ redirect_from: /dsidev/index.html
-
+

@@ -21,7 +21,7 @@ redirect_from: /dsidev/index.html
-
+

diff --git a/dsidev/releases.html b/dsidev/releases.html index a1af940..1472416 100755 --- a/dsidev/releases.html +++ b/dsidev/releases.html @@ -7,7 +7,7 @@ layout: dsiware
-
+

@@ -22,7 +22,7 @@ layout: dsiware
-
+

@@ -37,7 +37,7 @@ layout: dsiware
-
+

@@ -52,7 +52,7 @@ layout: dsiware
-
+

@@ -67,7 +67,7 @@ layout: dsiware
-
+

@@ -82,7 +82,7 @@ layout: dsiware
-
+

@@ -97,7 +97,7 @@ layout: dsiware
-
+

@@ -112,7 +112,7 @@ layout: dsiware
-
+

diff --git a/theme.js b/theme.js index 45679d1..269e8b6 100755 --- a/theme.js +++ b/theme.js @@ -1,106 +1,84 @@ -// I've never written JS before. I still haven't. -// Sorry to anyone looking at this, I don't know how it works or if it's good practice. -var colorboxElements = document.querySelectorAll('.colorbox'); -var colorClasses = ['colorbox0', 'colorbox1', 'colorbox2', 'colorbox3']; +// cyrb53 from https://github.com/bryc/code. This code is in the public domain. +const cyrb53 = (str, seed = 0) => { + let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed; + for(let i = 0, ch; i < str.length; i++) { + ch = str.charCodeAt(i); + h1 = Math.imul(h1 ^ ch, 2654435761); + h2 = Math.imul(h2 ^ ch, 1597334677); + } + h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507); + h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909); + h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507); + h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909); + + return 4294967296 * (2097151 & h2) + (h1 >>> 0); +}; + +// The code below randomly assigns 1 of 4 identical color box classes to elements that have the plain colorbox class. +// This allows them to be assigned a random color from the seasonal themes that use more than one color. +let colorboxElements = document.querySelectorAll('.colorbox'); +let colorClasses = ['colorbox0', 'colorbox1', 'colorbox2', 'colorbox3']; colorboxElements.forEach(function(element) { element.classList.remove('colorbox'); - var randomIndex = Math.floor(Math.random() * colorClasses.length); - var randomColorClass = colorClasses[randomIndex]; + let randomIndex = Math.floor(Math.random() * colorClasses.length); + console.log(randomIndex); + let randomColorClass = colorClasses[randomIndex]; element.classList.add(randomColorClass); }); -var elements = document.querySelectorAll('[src]'); -var elementsWithInlineStyles = document.querySelectorAll("[style]"); -// 1-4 are for UI images (randomized between the 4 colors) -// Other is for non-image UI elements - -if (new Date().getMonth() == 5) { - // Pride - colorOne = 'blue'; - colorTwo = 'pink'; - colorTre = 'white'; - colorFor = 'blue'; - colorOtr = 'background-color: #62caff;border: 2px solid #3a98e1;color:black;'; - seasonal = true; +// Use seasonal themes if the current month is a seasonal month. +if (new Date().getMonth() === 5) { + // Pride + css = "background-color: #62caff;border: 2px solid #3a98e1;color:black;"; + colors = ["blue", "pink", "white", "pink"]; /* } else if (new Date().getMonth() == 10) { // October - colorOne = 'black'; - colorTwo = 'white'; - colorTre = 'black'; - colorFor = 'white'; - colorOtr = 'background-color: #ffffff;border: 2px solid #c6c6c6;'; - seasonal = true; */ -} else if (new Date().getMonth() == 11) { - // Christmas - colorOne = 'red'; - colorTwo = 'green'; - colorTre = 'red'; - colorFor = 'green'; - colorOtr = 'background-color: #2ec429;border: 2px solid #1e8b00;'; - seasonal = true; + css = 'background-color: #ffffff;border: 2px solid #c6c6c6;'; + colors = ["black", "white", "black", "white"]; */ +} else if (new Date().getMonth() === 11) { + // Christmas + css = "background-color: #2ec429;border: 2px solid #1e8b00;"; + colors = ["red", "green", "red", "green",] } else { - var randomColor = Math.floor(Math.random() * 7) + 1; - - switch (randomColor) { - case 1: - colorOne = 'green'; - colorTwo = 'green'; - colorTre = 'green'; - colorFor = 'green'; - colorOtr = 'background-color: #2ec429;border: 2px solid #1e8b00;'; - seasonal = true; - break; - case 2: - colorOne = 'pink'; - colorTwo = 'pink'; - colorTre = 'pink'; - colorFor = 'pink'; - colorOtr = 'background-color: #feb0fc;border: 2px solid #e488b1;'; - seasonal = true; - break; - case 3: - colorOne = 'white'; - colorTwo = 'white'; - colorTre = 'white'; - colorFor = 'white'; - colorOtr = 'background-color: #ffffff;border: 2px solid #c6c6c6;'; - seasonal = true; - break; - case 4: - colorOne = 'black'; - colorTwo = 'black'; - colorTre = 'black'; - colorFor = 'black'; - colorOtr = 'background-color: #393939;border: 2px solid #141414;color:white;'; - seasonal = true; - break; - case 5: - colorOne = 'red'; - colorTwo = 'red'; - colorTre = 'red'; - colorFor = 'red'; - colorOtr = 'background-color: #fb1830;border: 2px solid #ba0020;color:white;'; - seasonal = true; - break; - case 6: - colorOne = 'blue'; - colorTwo = 'blue'; - colorTre = 'blue'; - colorFor = 'blue'; - colorOtr = 'background-color: #62caff;border: 2px solid #3a98e1;color:black;'; - seasonal = true; - break; - case 7: - colorOne = 'orange'; - colorTwo = 'orange'; - colorTre = 'orange'; - colorFor = 'orange'; - colorOtr = 'background-color: #fbd39a;border: 2px solid #fb7900;color:black;'; - seasonal = true; - break; - } + // This code gets the current year/month/day as a string and hashes it to generate a random number. This means that + // a different theme color will be used every day, and navigating around the site won't result in the color changing + // while still allowing for some randomness. + let date = new Date(); + const dateSeed = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`; + let randomColor = (cyrb53(dateSeed) % colorClasses.length) + 1; + switch (randomColor) { + case 1: + css = "background-color: #2ec429;border: 2px solid #1e8b00;"; + colors = ["green"]; + break; + case 2: + css = "background-color: #feb0fc;border: 2px solid #e488b1;"; + colors = ["pink"]; + break; + case 3: + css = "background-color: #ffffff;border: 2px solid #c6c6c6;"; + colors = [ "white"]; + break; + case 4: + css = "background-color: #393939;border: 2px solid #141414;color:white;"; + colors = ["black"]; + break; + case 5: + css = "background-color: #fb1830;border: 2px solid #ba0020;color:white;"; + colors = ["red"]; + break; + case 6: + css = "background-color: #62caff;border: 2px solid #3a98e1;color:black;"; + colors = ["blue"]; + break; + case 7: + css = "background-color: #fbd39a;border: 2px solid #fb7900;color:black;"; + colors = ["orange"]; + break; + } } +// I have no idea what this comment block is, so I'm leaving it. - Campbell /* colorOne = 'green'; colorTwo = 'green'; @@ -110,45 +88,31 @@ if (new Date().getMonth() == 5) { seasonal = true; */ -// I WILL NOT OPTIMIZE THIS -// SHUT UP SHUT UP SHUT UP -if (seasonal == true) { - - elementsWithInlineStyles.forEach(function(element) { - var inlineStyle = element.getAttribute("style"); - var newInlineStyle = inlineStyle.replace(/\/\*dummystyle\*\//g, colorOtr); +// Get the elements we're going to set the colors of, and then iterate over the 4 colorbox classes and assign the +// correct colors to them. +let elements = document.querySelectorAll('[src]'); +let elementsWithInlineStyles = document.querySelectorAll("[style]"); +elementsWithInlineStyles.forEach(function(element) { + let inlineStyle = element.getAttribute("style"); + let newInlineStyle = inlineStyle.replace(/\/\*dummystyle\*\//g, css); element.setAttribute("style", newInlineStyle); - }); - for (var i = 0; i < elements.length; i++) { - var srcElement = elements[i]; - var src = srcElement.getAttribute('src'); - var parentOne = srcElement.closest('.colorbox0'); - var parentTwo = srcElement.closest('.colorbox1'); - var parentTre = srcElement.closest('.colorbox2'); - var parentFor = srcElement.closest('.colorbox3'); - if (parentOne) { - if (src && src.includes('/menu/green')) { - var newSrc = src.replace('/menu/green', `/menu/${colorOne}`); - srcElement.setAttribute('src', newSrc); - } - } - if (parentTwo) { - if (src && src.includes('/menu/green')) { - var newSrc = src.replace('/menu/green', `/menu/${colorTwo}`); - srcElement.setAttribute('src', newSrc); - } - } - if (parentTre) { - if (src && src.includes('/menu/green')) { - var newSrc = src.replace('/menu/green', `/menu/${colorTre}`); - srcElement.setAttribute('src', newSrc); - } - } - if (parentFor) { - if (src && src.includes('/menu/green')) { - var newSrc = src.replace('/menu/green', `/menu/${colorFor}`); - srcElement.setAttribute('src', newSrc); - } - } - } -} \ No newline at end of file +}); +for (let i = 0; i < elements.length; i++) { + let srcElement = elements[i]; + let src = srcElement.getAttribute('src'); + for (let i = 0; i < 4; i++) { + if (srcElement.closest('.colorbox' + i)) { + if (src && src.includes('/menu/green')) { + let newSrc; + // If there's only 1 color in the current theme, use that for each class. Otherwise, use the correct + // color for the iterator we're on. + if (colors.length === 1) { + newSrc = src.replace('/menu/green', `/menu/${colors[0]}`); + } else { + newSrc = src.replace('/menu/green', `/menu/${colors[i]}`); + } + srcElement.setAttribute('src', newSrc); + } + } + } +} From 23783ebe59c3c8fbd9d3701e70786f9aa6e2f83b Mon Sep 17 00:00:00 2001 From: NinjaCheetah <58050615+NinjaCheetah@users.noreply.github.com> Date: Sun, 27 Apr 2025 01:28:40 -0400 Subject: [PATCH 2/2] Relocate theme.js to /assets/js/ --- _layouts/dsiware.html | 2 +- _layouts/release.html | 2 +- theme.js => assets/js/theme.js | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename theme.js => assets/js/theme.js (100%) diff --git a/_layouts/dsiware.html b/_layouts/dsiware.html index b3a22eb..caece4a 100755 --- a/_layouts/dsiware.html +++ b/_layouts/dsiware.html @@ -91,5 +91,5 @@
{% include footerdsi.html %}
- + diff --git a/_layouts/release.html b/_layouts/release.html index 79c7ed9..c76e8d6 100755 --- a/_layouts/release.html +++ b/_layouts/release.html @@ -79,5 +79,5 @@
{% include footerdsi.html %}
- + diff --git a/theme.js b/assets/js/theme.js similarity index 100% rename from theme.js rename to assets/js/theme.js