Merge pull request #14 from rvtr/theme-refactor

(feat) Seed theme randomness with the current date

Gemfile.lock

@@ -5,7 +5,7 @@ GEM
       public_suffix (>= 2.0.2, < 7.0)
     base64 (0.2.0)
     bigdecimal (3.1.9)
-    cgi (0.4.1)
+    cgi (0.4.2)
     colorator (1.1.0)
     concurrent-ruby (1.3.5)
     csv (3.3.2)

_layouts/dsiware.html

@@ -91,5 +91,5 @@
   <footer>
   {% include footerdsi.html %}
   </footer>
-<script src="/theme.js"></script>
+<script src="/assets/js/theme.js"></script>
 </html>

_layouts/release.html

@@ -79,5 +79,5 @@
   <footer>
   {% include footerdsi.html %}
   </footer>
-<script src="/theme.js"></script>
+<script src="/assets/js/theme.js"></script>
 </html>

assets/js/theme.js

@@ -0,0 +1,118 @@
+// 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');
+    let randomIndex = Math.floor(Math.random() * colorClasses.length);
+    console.log(randomIndex);
+    let randomColorClass = colorClasses[randomIndex];
+    element.classList.add(randomColorClass);
+});
+
+// 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
+  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 {
+    // 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';
+  colorTre = 'green';
+  colorFor = 'green';
+  colorOtr = 'background-color: #2ec429;border: 2px solid #1e8b00;';
+  seasonal = true;
+*/
+
+// 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 (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);
+            }
+        }
+    }
+}

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,154 +0,0 @@
-// 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'];
-colorboxElements.forEach(function(element) {
-    element.classList.remove('colorbox');
-    var randomIndex = Math.floor(Math.random() * colorClasses.length);
-    var 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;
-/* } 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;
-} 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;
-  }
-}
-
-/*
-  colorOne = 'green';
-  colorTwo = 'green';
-  colorTre = 'green';
-  colorFor = 'green';
-  colorOtr = 'background-color: #2ec429;border: 2px solid #1e8b00;';
-  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);
-    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);
-          }
-      }
-  }
-}