Finish Xmas UI.

Makefile

@@ -26,6 +26,7 @@ pack:
 	mkdir -p release/fonts
 	mkdir -p release/respacks
 	cp -r respacks release/
+	cp -r img release/
 	cp -r fonts release/
 	cp -r js/lib release/js
 	cp js/hues-min.js release/js

css/hues-x.css

@@ -1,6 +1,3 @@
-/* Heavily based on Kepstin's wonderful CSS work
-  https://github.com/kepstin/0x40hues-html5/blob/master/hues-m.css */
-  
 .XmasUI {
     font-family: 'PetMe64Web';
 }
@@ -15,6 +12,7 @@
     left: 8px;
     right: 8px;
     color: rgba(255,255,255,0.7);
+    z-index: 1;
 }
 
 .hues-x-beatbar {
@@ -41,15 +39,78 @@
     -webkit-transform: translateY(0px);
     transition: transform 1s ease-out;
     -webkit-transition: -webkit-transform 1s ease-out;
-    
 }
 
 .hues-x-beatbar.hidden{
-transform: translateY(-40px);   
+    transform: translateY(-40px);   
     -webkit-transform: translateY(-40px);
 }
 
 .hues-x-controls.hidden {
     transform: translateY(104px);
     -webkit-transform: translateY(104px);
+}
+
+.hues-x-light {
+    position: absolute;
+    width: 68px;
+    height: 113px;
+    transform-origin: 32px 69px;
+    -webkit-transform-origin: 32px 69px;
+    background-image: url("../img/lightbase.png");
+}
+
+.hues-x-light > div > img {
+    position: absolute;
+}
+
+.hues-x-fade{
+    transition: opacity 0.1s linear;
+    -webkit-transition: opacity 0.1s linear;
+}
+
+.hues-x-lighton {
+    opacity: 1;
+}
+
+.hues-x-lightoff {
+    opacity: 0;
+}
+
+.hues-x-lighton.off{
+    opacity: 0;
+}
+
+.hues-x-lightoff.off{
+    opacity: 1;
+}
+
+.hues-x-wiresleft, .hues-x-wiresbottom, .hues-x-wiresright {
+    position: absolute;
+    background-repeat: no-repeat;
+}
+
+.hues-x-wiresleft, .hues-x-wiresright {
+    height: 100%;
+    top: 0px;
+}
+
+.hues-x-wiresleft {
+    width: 76px;
+    left: 0px;
+    background-image: url("../img/wiresleft.png");
+}
+
+.hues-x-wiresright {
+    width: 59px;
+    right: 0px;
+    background-image: url("../img/wiresright.png");
+}
+
+.hues-x-wiresbottom {
+    bottom: 0px;
+    height: 56px;
+    width:2889px;
+    background-image: url("../img/wiresbottom.png");
+    left:50%;margin-left:-1444.5px;
 }

css/style.css

@@ -12,7 +12,6 @@ html, body {
     height: 100%;
     margin: 0; padding: 0;
     overflow: hidden;
-    background-color:#fff;
 }
 
 h1 {
@@ -67,14 +66,25 @@ h1, h2, h3 {
     margin: 10px;
 }
 
-#waifu {
+#waifu, #snow {
+    position: absolute;
     display: block;
     height: 100%;
     padding: 0;
+}
 
+#waifu {
     z-index: -10;
 }
 
+#snow {
+    z-index: -9;
+}
+
+#snow.hidden {
+    display: none;
+}
+
 #preloadHelper {
     background-color: #FFF; 
     width: 100%;

index-min.html

@@ -102,6 +102,7 @@
         </div>
         <!-- Populated by HuesUI.js -->
         <div id="huesUI"></div>
+        <canvas id="snow" class="hidden" width="1280" height="720"></canvas>
         <canvas id="waifu" width="1280" height="720"></canvas>
     </body>
 </html>

index.html

@@ -29,7 +29,7 @@
                                 "./respacks/PackShit.zip"
                                 ],
                     //load     : false, //debug
-                    autoplay : false // debug
+                    autoplay : false, // debug
                 };
                 core = new HuesCore(defaults);
             };
@@ -111,6 +111,7 @@
         </div>
         <!-- Populated by HuesUI.js -->
         <div id="huesUI"></div>
+        <canvas id="snow" class="hidden" width="1280" height="720"></canvas>
         <canvas id="waifu" width="1280" height="720"></canvas>
     </body>
 </html>

js/HuesCanvas.js

@@ -68,6 +68,12 @@ function HuesCanvas(element, aContext, core) {
     this.canvas = document.getElementById(element).getContext("2d");
     window.addEventListener('resize', this.resizeHandler(this));
     this.resize();
+    
+    this.snowing = false;
+    this.maxSnow = 30;
+    this.snowAngle = 0;
+    this.lastSnow = 0;
+    this.snowflakes = [];
 
     this.animating = true;
     requestAnimationFrame(this.getAnimLoop());
@@ -80,7 +86,9 @@ HuesCanvas.prototype.resizeHandler = function(that) {
 HuesCanvas.prototype.resize = function() {
     // height is constant 720px, we expand width to suit
     var ratio = window.innerWidth / window.innerHeight;
-    this.canvas.canvas.width = 720 * ratio + 1;
+    this.canvas.canvas.width = Math.ceil(720 * ratio);
+    var snow = document.getElementById("snow").getContext("2d");
+    snow.canvas.width = Math.ceil(720 * ratio);
     this.needsRedraw = true;
 }
 
@@ -221,6 +229,9 @@ HuesCanvas.prototype.animationLoop = function() {
     } else if(this.needsRedraw){
         this.redraw();
     }
+    if(this.snowing) {
+        this.drawSnow();
+    }
     if(this.animating) {
         requestAnimationFrame(this.getAnimLoop());
     }
@@ -379,4 +390,77 @@ HuesCanvas.prototype.setAnimating = function(anim) {
         requestAnimationFrame(this.animationLoop);
     }
     this.animating = anim;
+}
+
+// From http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect
+
+HuesCanvas.prototype.startSnow = function() {
+    this.snowing = true;
+    document.getElementById("snow").style.display = "block";
+    var height = this.canvas.canvas.height;
+    var width = this.canvas.canvas.width;
+    this.snowAngle = 0;
+    this.snowflakes = [];
+	for(var i = 0; i < this.maxSnow; i++) {
+		this.snowflakes.push({
+			x: Math.random()*width, //x-coordinate
+			y: Math.random()*height, //y-coordinate
+			r: Math.random()*4+1, //radius
+			d: Math.random()*25 //density
+		})
+	}
+    this.lastSnow = this.aContext.currentTime;
+}
+
+HuesCanvas.prototype.stopSnow = function() {
+    this.snowing = false;
+    document.getElementById("snow").style.display = "none";
+}
+
+HuesCanvas.prototype.drawSnow = function() {
+    var ctx = document.getElementById("snow").getContext("2d");
+    var W = ctx.canvas.width;
+    var H = ctx.canvas.height;
+    var delta = this.lastSnow - this.aContext.currentTime;
+    ctx.clearRect(0, 0, W, H);
+
+    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
+    ctx.beginPath();
+    for(var i = 0; i < this.maxSnow; i++) {
+        var p = this.snowflakes[i];
+        ctx.moveTo(p.x, p.y);
+        ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
+    }
+    ctx.fill();
+    
+    this.snowAngle += delta / 6;
+    for(var i = 0; i < this.maxSnow; i++) {
+        var p = this.snowflakes[i];
+        //Updating X and Y coordinates
+        //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
+        //Every particle has its own density which can be used to make the downward movement different for each flake
+        //Lets make it more random by adding in the radius
+        p.y += Math.cos(this.snowAngle+p.d) + 1 + p.r/2;
+        p.x += Math.sin(this.snowAngle) * 2;
+        
+        //Sending flakes back from the top when it exits
+        //Lets make it a bit more organic and let flakes enter from the left and right also.
+        if(p.x > W+5 || p.x < -5 || p.y > H) {
+            if(i%3 > 0) {//66.67% of the flakes
+                this.snowflakes[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
+            }
+            else {
+                //If the flake is exitting from the right
+                if(Math.sin(this.snowAngle) > 0) {
+                    //Enter from the left
+                    this.snowflakes[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
+                }
+                else {
+                    //Enter from the right
+                    this.snowflakes[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
+                }
+            }
+        }
+    }
+    this.lastSnow = this.aContext.currentTime;
 }

js/HuesSettings.js

@@ -119,7 +119,7 @@ HuesSettings.prototype.settingsOptions = {
 function HuesSettings(defaults) {
     this.core = null;
     this.root = document.getElementById("huesSettings");
-    this.window = document.getElementById("settingsWindow");
+    this.window = document.getElementById("settingsHelper");
     this.hide();
     
     for(var attr in this.defaultSettings) {
@@ -152,7 +152,7 @@ HuesSettings.prototype.connectCore = function(core) {
 HuesSettings.prototype.show = function() {
     if(this.core)
         this.core.hideLists();
-    this.window.style.display = "block";
+    this.window.style.display = "flex";
 }
 
 HuesSettings.prototype.hide = function() {
@@ -161,7 +161,7 @@ HuesSettings.prototype.hide = function() {
 
 HuesSettings.prototype.toggle = function() {
     if(this.window.style.display == "none") {
-        this.window.style.display = "block";
+        this.window.style.display = "flex";
         if(this.core)
             this.core.hideLists();
     } else {

js/HuesUI.js

@@ -481,6 +481,8 @@ function ModernUI() {
     this.volLabel = null;
     this.hideRestore = null;
     
+    this.currentBeat = ".";
+    
     HuesUI.call(this);
     
     this.hidden = 0; // we have a 3 stage hide
@@ -679,19 +681,19 @@ ModernUI.prototype.modeUpdated = function() {
 ModernUI.prototype.beat = function() {
     var beats = this.core.getBeatString();
 
-    var current = beats[0];
+    this.currentBeat = beats[0];
     var rest = beats.slice(1);
 
     this.beatLeft.textContent = rest;
     this.beatRight.textContent = rest;
 
 
-    if (current != ".") {
+    if (this.currentBeat != ".") {
         while (this.beatCenter.firstElementChild) {
             this.beatCenter.removeChild(this.beatCenter.firstElementChild);
         }
         var span = this.beatCenter.ownerDocument.createElement("span");
-        span.textContent = current;
+        span.textContent = this.currentBeat;
         this.beatCenter.appendChild(span);
     }
     this.beatCount.textContent = "B=" + this.intToHex4(this.core.getSafeBeatIndex());
@@ -744,10 +746,132 @@ function XmasUI() {
     
     this.controls.className = "hues-x-controls";
     this.beatBar.className = "hues-x-beatbar";
+    
+    this.lights = [];
+    
+    var wires = document.createElement("div");
+    wires.className = "hues-x-wires";
+    
+    var left = document.createElement("div");
+    left.className = "hues-x-wiresleft";
+    for(var i = 0; i < xleft.length; i++) {
+        var l = xleft[i];
+        var light = this.newLight(l, left);
+        light.style.transform = "rotate(" + l.angle + "deg)";
+        light.style.left = l.x + "px";
+        light.style.top = l.y + "px";
+        this.lights.push(light);
+    }
+    
+    var right = document.createElement("div");
+    right.className = "hues-x-wiresright";
+    for(var i = 0; i < xright.length; i++) {
+        var l = xright[i];
+        var light = this.newLight(l, right);
+        light.style.transform = "rotate(" + (-l.angle) + "deg)";
+        light.style.right = l.x + "px";
+        light.style.top = l.y + "px";
+        this.lights.push(light);
+    }
+    
+    var bottom = document.createElement("div");
+    bottom.className = "hues-x-wiresbottom";
+    for(var i = 0; i < xbottom.length; i++) {
+        var l = xbottom[i];
+        var light = this.newLight(l, bottom);
+        light.style.transform = "rotate(" + l.angle + "deg)";
+        light.style.left = l.x + "px";
+        light.style.bottom = l.y + "px";
+        this.lights.push(light);
+    }
+    
+    wires.appendChild(left);
+    wires.appendChild(right);
+    wires.appendChild(bottom);
+    this.root.appendChild(wires);
 }
 XmasUI.prototype = Object.create(ModernUI.prototype);
 XmasUI.prototype.constructor = XmasUI;
 
+XmasUI.prototype.connectCore = function(core) {
+    HuesUI.prototype.connectCore.call(this, core);
+    this.core.renderer.startSnow();
+}
+
+XmasUI.prototype.disconnect = function() {
+    this.core.renderer.stopSnow();
+    HuesUI.prototype.disconnect.call(this);
+}
+
+XmasUI.prototype.lightOn = function(light) {
+    light.on.className = "hues-x-lighton";
+    light.off.className = "hues-x-lightoff";
+}
+
+XmasUI.prototype.lightOff = function(light) {
+    light.on.className = "hues-x-lighton off";
+    light.off.className = "hues-x-lightoff off";
+}
+
+XmasUI.prototype.lightFadeOut = function(light) {
+    light.on.className = "hues-x-lighton hues-x-fade off";
+    light.off.className = "hues-x-lightoff hues-x-fade off";
+}
+
+XmasUI.prototype.lightRecolour = function(light) {
+    var hue = Math.random() * 360;
+    light.bulb.style.filter = "hue-rotate(" + hue + "deg)";
+    light.bulb.style.webkitFilter = "hue-rotate(" + hue + "deg)";
+}
+
+XmasUI.prototype.randomLight = function(light) {
+    if(Math.random() >= 0.5) {
+        this.lightOn(light);
+    } else {
+        this.lightOff(light);
+    }
+}
+
+XmasUI.prototype.newLight = function(l, parent) {
+    var light = document.createElement("div");
+    light.className = "hues-x-light";
+    var bulb = document.createElement("div");
+    var on = document.createElement("img");
+    on.src = "./img/lighton.png";
+    var off = document.createElement("img");
+    off.src = "./img/lightoff.png";
+    bulb.appendChild(on);
+    bulb.appendChild(off);
+    light.appendChild(bulb);
+    parent.appendChild(light);
+    light.on = on;
+    light.off = off;
+    light.bulb = bulb;
+    this.randomLight(light);
+    this.lightRecolour(light);
+    return light;
+}
+
+XmasUI.prototype.beat = function() {
+    ModernUI.prototype.beat.call(this);
+    if(this.currentBeat != ".") {
+        for(var i = 0; i < this.lights.length; i++) {
+            var l = this.lights[i];
+            switch(this.currentBeat) {
+                case ":":
+                    this.lightOn(l);
+                    this.lightRecolour(l);
+                    break;
+                case "+":
+                    this.lightFadeOut(l);
+                    break;
+                default:
+                    this.randomLight(this.lights[i]);
+            }
+        }
+    }
+}
+
 XmasUI.prototype.toggleHide = function() {
     this.beatBar.className = "hues-x-beatbar";
     this.beatCenter.className = "hues-m-beatcenter";
@@ -764,4 +888,80 @@ XmasUI.prototype.toggleHide = function() {
 
 XmasUI.prototype.setColourText = function(colour) {};
 XmasUI.prototype.blurUpdated = function(x, y) {};
-XmasUI.prototype.updateTime = function(time) {};
+XmasUI.prototype.updateTime = function(time) {};
+
+var xleft = [
+    {"angle":122.529582194,"x":19.4,"y":-19.35},
+    {"angle":92.5309436511,"x":25.4,"y":38.7},
+    {"angle":107.530202659,"x":39.4,"y":107.75},
+    {"angle":77.5309700777,"x":20.75,"y":184.8},
+    {"angle":77.5309700777,"x":32.3,"y":249.8},
+    {"angle":107.530202659,"x":40.45,"y":327.9},
+    {"angle":88.3307935055,"x":35,"y":410.9},
+    {"angle":107.530202659,"x":54.35,"y":490.95},
+    {"angle":74.9981580491,"x":28.15,"y":573.8},
+    {"angle":89.9973772074,"x":23.45,"y":675.35},
+    {"angle":107.530202659,"x":21.65,"y":762.6},
+    {"angle":107.530202659,"x":15.8,"y":842.75},
+    {"angle":92.5309436511,"x":36.55,"y":905.7},
+    {"angle":88.3307935055,"x":31.1,"y":988.7},
+    {"angle":107.530202659,"x":50.45,"y":1068.75},
+    {"angle":74.9981580491,"x":45.75,"y":1158.5},
+    {"angle":88.3307935055,"x":35.85,"y":1238.55}
+]
+var xright = [
+    {"angle":120.001009518,"x":33.3,"y":-29.75},
+    {"angle":90.0026227926,"x":35.35,"y":53.65},
+    {"angle":102.469029922,"x":41.5,"y":136.5},
+    {"angle":91.6692064945,"x":22.15,"y":216.55},
+    {"angle":72.4697973408,"x":34.4,"y":278.25},
+    {"angle":102.469029922,"x":45.75,"y":361.85},
+    {"angle":87.4699314665,"x":26.65,"y":426.35},
+    {"angle":72.4697973408,"x":41.6,"y":502.15},
+    {"angle":102.469029922,"x":27.5,"y":566},
+    {"angle":72.4697973408,"x":7.65,"y":638.45},
+    {"angle":102.469029922,"x":11,"y":721.25},
+    {"angle":76.1887724128,"x":7.65,"y":792.7},
+    {"angle":87.4690563489,"x":36.15,"y":850.35},
+    {"angle":102.46813454,"x":16.6,"y":924.3},
+    {"angle":72.4697973408,"x":15.3,"y":990.8},
+    {"angle":76.1887724128,"x":11.95,"y":1062.25},
+    {"angle":87.4690563489,"x":40.45,"y":1119.9},
+    {"angle":102.46813454,"x":20.9,"y":1193.85}
+]
+var xbottom = [
+    {"angle":32.5804579323,"x":110.35,"y":-12.1},
+    {"angle":3.28979777069,"x":168.05,"y":-5.55},
+    {"angle":17.6989154099,"x":238.35,"y":7.7},
+    {"angle":-12.6587029361,"x":314.8,"y":-10.4},
+    {"angle":-12.6587029361,"x":379.4,"y":1.05},
+    {"angle":17.6989154099,"x":457.75,"y":9.4},
+    {"angle":2.59102780115,"x":540.6,"y":3.75},
+    {"angle":17.6989154099,"x":620.35,"y":22.7},
+    {"angle":-15.134241831,"x":703,"y":-2.9},
+    {"angle":2.30443717424,"x":804.75,"y":-7.85},
+    {"angle":17.6989154099,"x":892.45,"y":-9.55},
+    {"angle":17.6989154099,"x":971.65,"y":-15.5},
+    {"angle":3.28979777069,"x":1035.2,"y":4.35},
+    {"angle":2.59102780115,"x":1118,"y":0.2},
+    {"angle":17.6989154099,"x":1198.05,"y":18.95},
+    {"angle":-18.378894807,"x":1288.2,"y":14.2},
+    {"angle":-4.561224264,"x":1367.9,"y":4.6},
+    {"angle":32.5804579323,"x":1452.6,"y":-1.7},
+    {"angle":3.28979777069,"x":1511.45,"y":4.45},
+    {"angle":17.6989154099,"x":1580.6,"y":17.6},
+    {"angle":-12.6587029361,"x":1656.6,"y":-0.95},
+    {"angle":-12.6587029361,"x":1722.1,"y":11.1},
+    {"angle":17.6989154099,"x":1800.5,"y":18.8},
+    {"angle":2.59102780115,"x":1883.1,"y":13},
+    {"angle":17.6989154099,"x":1963,"y":32.6},
+    {"angle":-15.134241831,"x":2045.8,"y":7},
+    {"angle":2.30443717424,"x":2147.55,"y":1.55},
+    {"angle":17.6989154099,"x":2234.1,"y":0.4},
+    {"angle":17.6989154099,"x":2315,"y":-5.6},
+    {"angle":3.28979777069,"x":2377.8,"y":14.5},
+    {"angle":2.59102780115,"x":2460.65,"y":9.75},
+    {"angle":17.6989154099,"x":2540.2,"y":28.5},
+    {"angle":-18.378894807,"x":2627.55,"y":24.9},
+    {"angle":-4.561224264,"x":2710.4,"y":14.4}
+]