mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
restyle
This commit is contained in:
@@ -1,58 +1,30 @@
|
||||
rootStyles.setProperty('--site-background', '#f5f5f5')
|
||||
rootStyles.setProperty('--layer-background', '#e4e4e4')
|
||||
rootStyles.setProperty('--site-background', '#f5f5f5 url("/data/images/site/backgrounds/lowpolyLightGreen.svg") left/cover no-repeat fixed')
|
||||
rootStyles.setProperty('--site-background-filter', 'none')
|
||||
rootStyles.setProperty('--layer-background', '#e4e4e4 url("/data/images/site/backgrounds/lowpolyLightGray.svg") left/cover no-repeat fixed')
|
||||
rootStyles.setProperty('--layer-background-selected', '#cccccc')
|
||||
rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
|
||||
rootStyles.setProperty('--interactable-selected', '#00aa00')
|
||||
rootStyles.setProperty('--font-color', '#000000')
|
||||
rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed')
|
||||
rootStyles.setProperty('--body-background', 'none')
|
||||
setCookie('colorPalette', 'dayRave')
|
||||
|
||||
//Cycles through a rainbow!
|
||||
if (currentColorIndex == undefined) {
|
||||
document.getElementById('inputColorPalette').addEventListener('change', function() {
|
||||
clearInterval(raveMode)
|
||||
})
|
||||
}
|
||||
var raveMode = setInterval(changeColor, 250)
|
||||
var regularAdjust = 0//60
|
||||
var lightAdjust = 64//100
|
||||
var lightLead = 255
|
||||
var currentColorIndex = 0
|
||||
function changeColor() {
|
||||
var colors = indexToColor(currentColorIndex)
|
||||
var lightColors = indexToColor(currentColorIndex + lightLead)
|
||||
rootStyles.setProperty('--site-background', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
|
||||
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
|
||||
}
|
||||
function indexToColor(colorIndex) {
|
||||
var red = 0, green = 0, blue = 0
|
||||
var realColorIndex = colorIndex - Math.floor(colorIndex / 1530) * 1530
|
||||
var colorStage = Math.floor(realColorIndex / 255)
|
||||
switch(colorStage) {
|
||||
case 0:
|
||||
green = 255
|
||||
red = realColorIndex - Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 1:
|
||||
red = 255
|
||||
green = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 2:
|
||||
red = 255
|
||||
blue = realColorIndex - Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 3:
|
||||
blue = 255
|
||||
red = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 4:
|
||||
blue = 255
|
||||
green = realColorIndex - Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 5:
|
||||
green = 255
|
||||
blue = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
//Shifts the hue
|
||||
var colorCycle = setInterval(shiftHue, 100)
|
||||
var currentHueRotation = 0
|
||||
|
||||
function shiftHue() {
|
||||
rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)')
|
||||
currentHueRotation += 1
|
||||
if (currentHueRotation == 360) {
|
||||
currentHueRotation = 0
|
||||
}
|
||||
return [red, green, blue]
|
||||
}
|
||||
|
||||
//Stops the hue shift when another palette is loaded
|
||||
document.getElementById('inputColorPalette').addEventListener('change', removeEventListener, false)
|
||||
|
||||
function removeEventListener() {
|
||||
console.log('cleared')
|
||||
clearInterval(colorCycle)
|
||||
document.getElementById('inputColorPalette').removeEventListener('change', removeEventListener, false)
|
||||
}
|
Reference in New Issue
Block a user