Random themes are now seeded by the current year/month/day

dsidev/guides.html

@@ -6,7 +6,7 @@ redirect_from: /dsidev/index.html
 <!-- The copy/pasting here is criminal... but so is adding another copy/paste jekyll layout -->
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox0">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>
@@ -21,7 +21,7 @@ redirect_from: /dsidev/index.html
 </div>
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox1">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>

dsidev/releases.html

@@ -7,7 +7,7 @@ layout: dsiware
 <!-- Have you thought about autogenerating based on tags and including previews in the boxes? -->
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox0">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>
@@ -22,7 +22,7 @@ layout: dsiware
 </div>
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox1">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>
@@ -37,7 +37,7 @@ layout: dsiware
 </div>
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox2">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>
@@ -52,7 +52,7 @@ layout: dsiware
 </div>
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox3">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>
@@ -67,7 +67,7 @@ layout: dsiware
 </div>
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox0">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>
@@ -82,7 +82,7 @@ layout: dsiware
 </div>
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox1">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>
@@ -97,7 +97,7 @@ layout: dsiware
 </div>
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox2">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>
@@ -112,7 +112,7 @@ layout: dsiware
 </div>
 
 <div style="margin:1%;">
-   <div class="devinfo-container-main releasepage colorbox">
+   <div class="devinfo-container-main releasepage colorbox3">
       <img src="{{ site.imgui }}menu/green/dsi_widebarnoprompt_u.png" style="width: 100%;position: static;display: block;" class="pixelate">
       <div style="background-image: url('{{ site.imgui }}menu/dsi_widepromptnobar.png');background-size:100% 100%;position: static;display: inline-block;width:100%;">
       <div class="devinfo-main" style="position:relative;"><br>

theme.js

@@ -1,106 +1,84 @@
-// I've never written JS before. I still haven't.
+// cyrb53 from https://github.com/bryc/code. This code is in the public domain.
-// Sorry to anyone looking at this, I don't know how it works or if it's good practice.
+const cyrb53 = (str, seed = 0) => {
-var colorboxElements = document.querySelectorAll('.colorbox');
+    let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
-var colorClasses = ['colorbox0', 'colorbox1', 'colorbox2', 'colorbox3'];
+    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);
+    let randomIndex = Math.floor(Math.random() * colorClasses.length);
-    var randomColorClass = colorClasses[randomIndex];
+    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)
+// Use seasonal themes if the current month is a seasonal month.
-// Other is for non-image UI elements
+if (new Date().getMonth() === 5) {
-
+    // Pride
-if (new Date().getMonth() == 5) {
+    css = "background-color: #62caff;border: 2px solid #3a98e1;color:black;";
-  // Pride
+    colors = ["blue", "pink", "white", "pink"];
-  colorOne = 'blue';
-  colorTwo = 'pink';
-  colorTre = 'white';
-  colorFor = 'blue';
-  colorOtr = 'background-color: #62caff;border: 2px solid #3a98e1;color:black;';
-  seasonal = true;
 /* } else if (new Date().getMonth() == 10) {
   // October
-  colorOne = 'black';
+  css = 'background-color: #ffffff;border: 2px solid #c6c6c6;';
-  colorTwo = 'white';
+  colors = ["black", "white", "black", "white"]; */
-  colorTre = 'black';
+} else if (new Date().getMonth() === 11) {
-  colorFor = 'white';
+    // Christmas
-  colorOtr = 'background-color: #ffffff;border: 2px solid #c6c6c6;';
+    css = "background-color: #2ec429;border: 2px solid #1e8b00;";
-  seasonal = true; */
+    colors = ["red", "green", "red", "green",]
-} 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;
 } else {
-  var randomColor = Math.floor(Math.random() * 7) + 1;
+    // 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
-  switch (randomColor) {
+    // while still allowing for some randomness.
-    case 1:
+    let date = new Date();
-      colorOne = 'green';
+    const dateSeed = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
-      colorTwo = 'green';
+    let randomColor = (cyrb53(dateSeed) % colorClasses.length) + 1;
-      colorTre = 'green';
+    switch (randomColor) {
-      colorFor = 'green';
+        case 1:
-      colorOtr = 'background-color: #2ec429;border: 2px solid #1e8b00;';
+            css = "background-color: #2ec429;border: 2px solid #1e8b00;";
-      seasonal = true;
+            colors = ["green"];
-      break;
+            break;
-    case 2:
+        case 2:
-      colorOne = 'pink';
+            css = "background-color: #feb0fc;border: 2px solid #e488b1;";
-      colorTwo = 'pink';
+            colors = ["pink"];
-      colorTre = 'pink';
+            break;
-      colorFor = 'pink';
+        case 3:
-      colorOtr = 'background-color: #feb0fc;border: 2px solid #e488b1;';
+            css = "background-color: #ffffff;border: 2px solid #c6c6c6;";
-      seasonal = true;
+            colors = [ "white"];
-      break;
+            break;
-    case 3:
+        case 4:
-      colorOne = 'white';
+            css = "background-color: #393939;border: 2px solid #141414;color:white;";
-      colorTwo = 'white';
+            colors = ["black"];
-      colorTre = 'white';
+            break;
-      colorFor = 'white';
+        case 5:
-      colorOtr = 'background-color: #ffffff;border: 2px solid #c6c6c6;';
+            css = "background-color: #fb1830;border: 2px solid #ba0020;color:white;";
-      seasonal = true;
+            colors = ["red"];
-      break;
+            break;
-    case 4:
+        case 6:
-      colorOne = 'black';
+            css = "background-color: #62caff;border: 2px solid #3a98e1;color:black;";
-      colorTwo = 'black';
+            colors = ["blue"];
-      colorTre = 'black';
+            break;
-      colorFor = 'black';
+        case 7:
-      colorOtr = 'background-color: #393939;border: 2px solid #141414;color:white;';
+            css = "background-color: #fbd39a;border: 2px solid #fb7900;color:black;";
-      seasonal = true;
+            colors = ["orange"];
-      break;
+            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;
-  }
 }
 
+// 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
+// Get the elements we're going to set the colors of, and then iterate over the 4 colorbox classes and assign the
-// SHUT UP SHUT UP SHUT UP
+// correct colors to them.
-if (seasonal == true) {
+let elements = document.querySelectorAll('[src]');
-
+let elementsWithInlineStyles = document.querySelectorAll("[style]");
-  elementsWithInlineStyles.forEach(function(element) {
+elementsWithInlineStyles.forEach(function(element) {
-    var inlineStyle = element.getAttribute("style");
+    let inlineStyle = element.getAttribute("style");
-    var newInlineStyle = inlineStyle.replace(/\/\*dummystyle\*\//g, colorOtr);
+    let newInlineStyle = inlineStyle.replace(/\/\*dummystyle\*\//g, css);
     element.setAttribute("style", newInlineStyle);
-  });
+});
-  for (var i = 0; i < elements.length; i++) {
+for (let i = 0; i < elements.length; i++) {
-      var srcElement = elements[i];
+    let srcElement = elements[i];
-      var src = srcElement.getAttribute('src');
+    let src = srcElement.getAttribute('src');
-      var parentOne = srcElement.closest('.colorbox0');
+    for (let i = 0; i < 4; i++) {
-      var parentTwo = srcElement.closest('.colorbox1');
+        if (srcElement.closest('.colorbox' + i)) {
-      var parentTre = srcElement.closest('.colorbox2');
+            if (src && src.includes('/menu/green')) {
-      var parentFor = srcElement.closest('.colorbox3');
+                let newSrc;
-      if (parentOne) {
+                // If there's only 1 color in the current theme, use that for each class. Otherwise, use the correct
-          if (src && src.includes('/menu/green')) {
+                // color for the iterator we're on.
-              var newSrc = src.replace('/menu/green', `/menu/${colorOne}`);
+                if (colors.length === 1) {
-              srcElement.setAttribute('src', newSrc);
+                    newSrc = src.replace('/menu/green', `/menu/${colors[0]}`);
-          }
+                } else {
-      }      
+                    newSrc = src.replace('/menu/green', `/menu/${colors[i]}`);
-      if (parentTwo) {
+                }
-          if (src && src.includes('/menu/green')) {
+                srcElement.setAttribute('src', newSrc);
-              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);
-          }
-      }
-  }
-}