background color

2 files changed, 125 insertions, 109 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 8654e9d..10f5059 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -1543,7 +1543,6 @@ audio {
   body {
     background: #180808;
     color: #f8f8f8;
-    transition: opacity 100ms, background 5s;
   }
   button:not(.hoot),
   input[type="submit"] {
diff --git a/public/assets/js/util/color.js b/public/assets/js/util/color.js
index ec21925..75a2c61 100644
--- a/public/assets/js/util/color.js
+++ b/public/assets/js/util/color.js
@@ -1,48 +1,60 @@
-function Color (r,g,b,a) {
-  this.r = r
-  this.g = g
-  this.b = b
-  this.a = a || 1.0
+function Color(r, g, b, a) {
+  this.r = r;
+  this.g = g;
+  this.b = b;
+  this.a = a || 1.0;
 }
-Color.prototype.toString = function(){
-  return "rgba(" + Math.round(this.r) + "," + Math.round(this.g) + "," + Math.round(this.b) + "," + this.a + ")";
-}
-Color.prototype.rgb = function(){
-  return [ this.r, this.g, this.b ];
-}
-Color.prototype.rgba = function(){
-  return [ this.r, this.g, this.b, this.a ];
-}
-Color.prototype.clone = function(){
+Color.prototype.toString = function () {
+  return (
+    "rgba(" +
+    Math.round(this.r) +
+    "," +
+    Math.round(this.g) +
+    "," +
+    Math.round(this.b) +
+    "," +
+    this.a +
+    ")"
+  );
+};
+Color.prototype.rgb = function () {
+  return [this.r, this.g, this.b];
+};
+Color.prototype.rgba = function () {
+  return [this.r, this.g, this.b, this.a];
+};
+Color.prototype.clone = function () {
   return new Color(this.r, this.g, this.b, this.a);
-}
-Color.prototype.alpha = function(a){
-  var c = this.copy()
+};
+Color.prototype.alpha = function (a) {
+  var c = this.copy();
   c.a = a;
   return c;
-}
-Color.prototype.add = function(n){
-  if (! n) return
-  this.r = clamp(Math.round(this.r + n), 0, 255)
-  this.g = clamp(Math.round(this.g + n), 0, 255)
-  this.b = clamp(Math.round(this.b + n), 0, 255)
-  return this
-}
-Color.prototype.mottle = function(n){
-  n = n || 30
-  this.r = clamp(this.r + randrange(-n, n), 0, 255)
-  this.g = clamp(this.g + randrange(-n, n), 0, 255)
-  this.b = clamp(this.b + randrange(-n, n), 0, 255)
-  return this
-}
-Color.prototype.mottleRGB = function(r,g,b){
-  r = r || 0 ; g = g || 0 ; b = b || 0
-  this.r = clamp(this.r + randrange(-r, r), 0, 255)
-  this.g = clamp(this.g + randrange(-g, g), 0, 255)
-  this.b = clamp(this.b + randrange(-b, b), 0, 255)
-  return this
-}
-Color.prototype.swatch = function(){
+};
+Color.prototype.add = function (n) {
+  if (!n) return;
+  this.r = clamp(Math.round(this.r + n), 0, 255);
+  this.g = clamp(Math.round(this.g + n), 0, 255);
+  this.b = clamp(Math.round(this.b + n), 0, 255);
+  return this;
+};
+Color.prototype.mottle = function (n) {
+  n = n || 30;
+  this.r = clamp(this.r + randrange(-n, n), 0, 255);
+  this.g = clamp(this.g + randrange(-n, n), 0, 255);
+  this.b = clamp(this.b + randrange(-n, n), 0, 255);
+  return this;
+};
+Color.prototype.mottleRGB = function (r, g, b) {
+  r = r || 0;
+  g = g || 0;
+  b = b || 0;
+  this.r = clamp(this.r + randrange(-r, r), 0, 255);
+  this.g = clamp(this.g + randrange(-g, g), 0, 255);
+  this.b = clamp(this.b + randrange(-b, b), 0, 255);
+  return this;
+};
+Color.prototype.swatch = function () {
   var el = document.createElement("div");
   el.style.className = "swatch";
   el.style.width = 16 + "px";
@@ -50,85 +62,90 @@ Color.prototype.swatch = function(){
   el.style.backgroundColor = this.toString();
   $(el).data("color", this);
   return el;
-}
+};
 
 var COLORS = {
-  plain: new Color(230,240,240),
-  ivory: new Color(240,240,235),
-  pink: new Color(240,223,235),
-  red: new Color(240,224,223),
-  orange: new Color(240,232,223),
-  yellow: new Color(240,240,231),
-  green: new Color(233,240,231),
-  blue: new Color(224,226,240),
-  purple: new Color(235,231,240),
-  black: new Color(32,32,37),
-}
+  plain: new Color(230, 240, 240),
+  ivory: new Color(240, 240, 235),
+  pink: new Color(240, 223, 235),
+  red: new Color(240, 224, 223),
+  orange: new Color(240, 232, 223),
+  yellow: new Color(240, 240, 231),
+  green: new Color(233, 240, 231),
+  blue: new Color(224, 226, 240),
+  purple: new Color(235, 231, 240),
+  black: new Color(32, 32, 37),
+};
 
 var DARK_COLORS = {
-  plain: new Color(24,10,10),
-  ivory: new Color(18,18,18),
-  pink: new Color(40,23,35),
-  red: new Color(40,24,23),
-  orange: new Color(40,32,23),
-  yellow: new Color(40,40,31),
-  green: new Color(33,40,31),
-  blue: new Color(24,26,40),
-  purple: new Color(35,31,40),
-  black: new Color(0,0,0),
-}
+  plain: new Color(24, 10, 10),
+  ivory: new Color(18, 18, 18),
+  pink: new Color(40, 23, 35),
+  red: new Color(40, 24, 23),
+  orange: new Color(40, 32, 23),
+  yellow: new Color(40, 40, 31),
+  green: new Color(33, 40, 31),
+  blue: new Color(24, 26, 40),
+  purple: new Color(35, 31, 40),
+  black: new Color(0, 0, 0),
+};
 
 function nighttime_quotient() {
   var q = -10;
-  var date = new Date()
+  var date = new Date();
   var x;
-  var h = date.getHours()
-  var m = date.getMinutes()
-  if (h < 5 || h > 23)
-    { return q; }
-  if (h >= 5 && h <= 7)
-    { x = 60*60*3 - 60 * (h - 5) + m; }
-  if (h >= 21 && h <= 23)
-    { x = 60 * (h - 21) + m; }
-  x /= 60*60*3;
+  var h = date.getHours();
+  var m = date.getMinutes();
+  if (h < 5 || h > 23) {
+    return q;
+  }
+  if (h >= 5 && h <= 7) {
+    x = 60 * 60 * 3 - 60 * (h - 5) + m;
+  }
+  if (h >= 21 && h <= 23) {
+    x = 60 * (h - 21) + m;
+  }
+  x /= 60 * 60 * 3;
   return q * x;
 }
-function get_color_from_time(){
-  var date = new Date()
-  var h = date.getHours()
-  var m = date.getMinutes()
+function get_color_from_time() {
+  var date = new Date();
+  var h = date.getHours();
+  var m = date.getMinutes();
   var c;
-  if ((h == 4 || h == 16) && m == 20)
-    { c = "green"; }
-  else if (h < 5)
-    { c = "blue"; }
-  else if (h >= 5 && h < 6)
-    { c = "red"; }
-  else if (h >= 6 && h < 9)
-    { c = "orange"; }
-  else if (h >= 9 && h < 12)
-    { c = "yellow"; }
-  else if (h >= 12 && h < 18)
-    { c = "plain"; }
-  else if (h >= 18 && h < 21)
-    { c = "blue"; }
-  else if (h >= 21)
-    { c = "blue"; }
-  else
-    { c = "plain"; }
+  if ((h == 4 || h == 16) && m == 20) {
+    c = "green";
+  } else if (h < 5) {
+    c = "blue";
+  } else if (h >= 5 && h < 6) {
+    c = "red";
+  } else if (h >= 6 && h < 9) {
+    c = "orange";
+  } else if (h >= 9 && h < 12) {
+    c = "yellow";
+  } else if (h >= 12 && h < 18) {
+    c = "plain";
+  } else if (h >= 18 && h < 21) {
+    c = "blue";
+  } else if (h >= 21) {
+    c = "blue";
+  } else {
+    c = "plain";
+  }
   return c;
 }
-function set_background_color_from_time(){
-  var color_name = get_color_from_time()
-  set_background_color(color_name)
+function set_background_color_from_time() {
+  var color_name = get_color_from_time();
+  set_background_color(color_name);
 }
-function set_background_color(color_name){
-  color_name = color_name || "plain"
-  var color_set = window.matchMedia('(prefers-color-scheme: dark)').matches ? DARK_COLORS : COLORS
-  var color = color_set[color_name]
-    .clone()
-    .mottleRGB(4,4,8)
-//     .add(nighttime_quotient())
-  document.body.style.backgroundColor = color.toString()
-  $(document.body).toggleClass("black", color_name === "black")
+function set_background_color(color_name) {
+  color_name = color_name || "plain";
+  var color_set = window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? DARK_COLORS
+    : COLORS;
+  var color = color_set[color_name].clone().mottleRGB(4, 4, 8);
+  //  .add(nighttime_quotient())
+  document.body.style.backgroundColor = color.toString();
+  $(document.body).toggleClass("black", color_name === "black");
+  document.body.style.transition = "opacity 100ms, background 10s";
 }