mirror of
https://github.com/rvtr/rmc_website.git
synced 2025-06-18 10:25:30 -04:00
Random themes are now seeded by the current year/month/day
This commit is contained in:
NinjaCheetah
parent
4fd21797e0
commit
7b083cf581
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
230
theme.js
230
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user