Cleaner CSS and initial Halloween UI

css/hues-h.css

@@ -0,0 +1,149 @@
+.HalloweenUI {
+    font-family: 'PetMe64Web';
+}
+
+.hues-h-text {
+    color: #ff3300;
+}
+
+.hues-h-textfade {
+    color: rgba(255, 51, 0, 0.6);
+}
+
+.hues-m-beatbar.hues-h-beatbar {
+    border-style: none;
+    background: none;
+}
+
+.hues-m-controls.hues-h-controls {
+    background: none;
+    border-style: none;
+    padding-top: 8px;
+    z-index: 1;
+}
+
+.hues-m-songtitle.hues-h-text, .hues-m-imagename.hues-h-text {
+    padding: 4px 0px;
+    margin: 0px 5px;
+    background: none;
+    border-style: solid;
+    border-width: 0px 19px 0px 18px;
+    -moz-border-image: url(../img/bones.png) 0 19 0 18 repeat stretch;
+    -webkit-border-image: url(../img/bones.png) 0 19 0 18 repeat stretch;
+    -o-border-image: url(../img/bones.png) 0 19 0 18 repeat stretch;
+    border-image: url(../img/bones.png) 0 19 0 18 fill repeat stretch;
+}
+
+.hues-m-huename.hues-h-text {
+    border: none;
+    background: none;
+    left: 38px;
+    right: 38px;
+    bottom: 2px;
+}
+
+.hues-m-vol-bar.hues-h-vol-bar {
+    bottom: 13px;
+}
+
+.hues-m-vol-label.hues-h-text {
+    bottom: 12px;
+}
+
+.hues-m-hide.hues-h-text {
+    top: 40px;
+}
+
+.hues-m-cog.hues-h-text {
+    top: 20px;
+}
+
+.hues-m-question.hues-h-text {
+    top: 25px;
+}
+
+.hues-m-songbutton.hues-h-text, .hues-m-imagebutton.hues-h-text {
+    margin-top: 17px;
+}
+
+.hues-m-songbutton.hues-h-text + div, .hues-m-imagebutton.hues-h-text + div{
+    top: -8px;
+}
+
+.hues-m-prevbutton.hues-h-text, .hues-m-nextbutton.hues-h-text, .hues-m-actbutton.hues-h-text {
+    background: none;
+}
+
+.hues-h-controls > .hues-m-leftinfo, .hues-h-controls > .hues-m-rightinfo {
+    margin-bottom: 5px;
+}
+
+.hues-h-tombstone {
+    border-style: solid;
+    border-width: 22px 40px 0px 42px;
+    -moz-border-image: url(../img/tombstone.png) 22 42 0 42 repeat;
+    -webkit-border-image: url(../img/tombstone.png) 22 42 0 42 repeat;
+    -o-border-image: url(../img/tombstone.png) 22 42 0 42 repeat;
+    border-image: url(../img/tombstone.png) 22 42 0 42 fill repeat;
+    height: 36px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -10;
+}
+
+.hues-h-text + input[type=range]::-webkit-slider-runnable-track {
+    background: #ff3300;
+}
+
+.hues-h-text + input[type=range]::-webkit-slider-thumb {
+    background: #ff3300;
+}
+
+.hues-h-text + input[type=range]::-moz-range-track {
+    background: #ff3300;
+}
+
+.hues-h-text + input[type=range]::-moz-range-thumb {
+    background: #ff3300;
+}
+
+.hues-h-text + input[type=range]::-ms-fill-lower {
+    background: #ff3300;
+}
+.hues-h-text + input[type=range]::-ms-thumb {
+    background: #ff3300;
+}
+
+.hues-h-topleft, .hues-h-topright, .hues-h-bottomright {
+    position: absolute;
+    background-repeat: no-repeat;
+}
+
+.hues-h-topleft, .hues-h-topright {
+    top: 0px;
+}
+
+.hues-h-bottomright, .hues-h-topright {
+    right: 0px;
+}
+
+.hues-h-topleft {
+    background-image: url("../img/web-topleft.png");
+    width: 269px;
+    height: 237px;
+}
+
+.hues-h-topright {
+    background-image: url("../img/web-topright.png");
+    width: 215px;
+    height: 220px;
+}
+
+.hues-h-bottomright {
+    background-image: url("../img/web-bottomright.png");
+    bottom: 0px;
+    width:358px;
+    height: 284px;
+}

css/hues-m.css

@@ -61,7 +61,7 @@
     font-size: 10px;
     text-align: center;
     color: rgba(255,255,255, 0.7);
-    bottom: 29px;
+    bottom: 79px;
     width: 100px;
 }
 
@@ -184,10 +184,10 @@
     right: 8px;
 }
 .hues-m-songtitle {
-    bottom: 5px;
+    bottom: 55px;
 }
 .hues-m-imagename {
-    bottom: 29px;
+    bottom: 79px;
     left: 108px;
     right: 108px;
 }
@@ -207,7 +207,7 @@
 
 .hues-m-leftbox {
     position: absolute;
-    bottom: 50px;
+    bottom: 0;
     left: 0;
     right: 50%;
     height: 54px;
@@ -215,7 +215,7 @@
 
 .hues-m-rightbox {
     position: absolute;
-    bottom: 50px;
+    bottom: 0;
     left: 50%;
     right: 0;
     height: 54px;
@@ -231,8 +231,10 @@
     user-select: none;
     font-size: 12px;
     width: 50%;
+    height: 100%;
     margin: 3px auto;
     float: left;
+    position: relative;
 }
 
 .hues-m-controlbuttons {
@@ -463,10 +465,12 @@ input[type=range]::-ms-thumb {
   .hues-m-imagename {
     left: 300px;
     right: 300px;
+    bottom: 29px;
   }
   .hues-m-songtitle {
     left: 192px;
     right: 192px;
+    bottom: 5px;
   }
   .hues-m-leftinfo {
     left: 200px;
@@ -474,15 +478,16 @@ input[type=range]::-ms-thumb {
   .hues-m-rightinfo {
     right: 200px;
   }
+  .hues-m-leftinfo, .hues-m-rightinfo {
+    bottom: 29px;
+  }
   .hues-m-leftbox {
-    bottom: 0;
     left: 0;
     right: auto;
     width: 192px;
     height: 54px;
     }
   .hues-m-rightbox {
-    bottom: 0;
     left: auto;
     right: 0;
     width: 192px;

css/hues-x.css

@@ -2,53 +2,24 @@
     font-family: 'PetMe64Web';
 }
 
-.hues-x-controls {
+.hues-m-controls.hues-x-controls {
-    position: absolute;
-    bottom: 0;
-    max-width: 992px;
     height: 50px;
-    margin: 0 auto;
-    overflow: hidden;
-    left: 8px;
-    right: 8px;
-    color: rgba(255,255,255,0.7);
     z-index: 1;
+    background: none;
+    border-style: none;
 }
 
-.hues-x-beatbar {
+.hues-x-controls > .hues-m-songtitle {
-  position: absolute;
+    bottom: 5px;
-  top: 0;
-  max-width: 992px;
-  height: 30px;
-  margin: 0 auto;
-  overflow: hidden;
-  left: 8px;
-  right: 8px;
-  color: white;
-}
-
-.hues-x-beatbar{
-    transform: translateY(0px);
-    -webkit-transform: translateY(0px);
-    transition: transform 1s ease-out;
-    -webkit-transition: -webkit-transform 1s ease-out;
-}
-
-.hues-x-controls {
-    transform: translateY(0px);
-    -webkit-transform: translateY(0px);
-    transition: transform 1s ease-out;
-    -webkit-transition: -webkit-transform 1s ease-out;
 }
 
-.hues-x-beatbar.hidden{
+.hues-x-controls > .hues-m-imagename {
-    transform: translateY(-40px);   
+    bottom: 29px;
-    -webkit-transform: translateY(-40px);
 }
 
-.hues-x-controls.hidden {
+.hues-m-beatbar.hues-x-beatbar {
-    transform: translateY(104px);
+    background: none;
-    -webkit-transform: translateY(104px);
+    border-style: none;
 }
 
 .hues-x-light {

index.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="css/hues-m.css">
         <link rel="stylesheet" href="css/hues-r.css">
         <link rel="stylesheet" href="css/hues-w.css">
+        <link rel="stylesheet" href="css/hues-h.css">
         <link rel="stylesheet" href="css/hues-res.css">
         <link rel="stylesheet" href="css/font-awesome.min.css">
         <script type="text/javascript" src="js/HuesCore.js"></script>
@@ -24,9 +25,10 @@
                 zip.workerScriptsPath = "js/lib/";
                 var defaults = {
                     respacks : [//"./respacks/Defaults_v5.0.zip", 
-                                "./respacks/CharPackagev0.03.zip", 
+                                //"./respacks/CharPackagev0.03.zip", 
-                                "./respacks/HuesMixB.zip",
+                                //"./respacks/HuesMixB.zip",
-                                "./respacks/PackShit.zip"
+                                //"./respacks/PackShit.zip"
+                                "./respacks/Halloween+Hues+v0.98.zip"
                                 ],
                     //load     : false, //debug
                     autoplay : false, // debug

js/HuesCore.js

@@ -63,7 +63,7 @@ function HuesCore(defaults) {
     }
     this.renderer = new HuesCanvas("waifu", this.soundManager.context, this);
 
-    this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI());
+    this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI(), new HalloweenUI());
     this.settings.connectCore(this);
     // Update with merged
     defaults = this.settings.defaults;
@@ -539,6 +539,9 @@ HuesCore.prototype.settingsUpdated = function() {
     case "xmas":
         this.changeUI(3);
         break;
+    case "hlwn":
+        this.changeUI(4);
+        break;
     }
     switch (localStorage["colourSet"]) {
     case "normal":
@@ -655,6 +658,9 @@ HuesCore.prototype.keyHandler = function(key) {
     case 52: // NUMBER_4
         this.settings.set("currentUI", "xmas");
         break;
+    case 53: // NUMBER_5
+        this.settings.set("currentUI", "hlwn");
+        break;
     case 67: // C
         this.toggleImageList();
         break;

js/HuesSettings.js

@@ -99,7 +99,7 @@ HuesSettings.prototype.settingsOptions = {
     },
     currentUI : {
         name : "User Interface",
-        options : ["retro", "v4.20", "modern", "xmas"]
+        options : ["retro", "v4.20", "modern", "xmas", "hlwn"]
     },
     colourSet : {
         name : "Colour Set",

js/HuesUI.js

@@ -541,6 +541,7 @@ ModernUI.prototype.initUI = function() {
 
     var volBar = document.createElement("div");
     volBar.className = "hues-m-vol-bar";
+    this.volBar = volBar;
     volCluster.appendChild(volBar);
 
     var label = document.createElement("div");
@@ -552,13 +553,13 @@ ModernUI.prototype.initUI = function() {
     volBar.appendChild(label);
     this.volLabel = label;
 
-    var infoToggle = document.createElement("div");
+    this.infoToggle = document.createElement("div");
-    infoToggle.innerHTML = '?';
+    this.infoToggle.innerHTML = '?';
-    infoToggle.className = "hues-m-question";
+    this.infoToggle.className = "hues-m-question";
-    infoToggle.onclick = function() {
+    this.infoToggle.onclick = function() {
         that.core.settings.showInfo();
     };
-    volCluster.appendChild(infoToggle);
+    volCluster.appendChild(this.infoToggle);
 
     var input = document.createElement("input");
     input.type = "range";
@@ -579,19 +580,20 @@ ModernUI.prototype.initUI = function() {
     //Song/image controls
     var songs = document.createElement("div");
     songs.className = "hues-m-controlblock";
+    this.songBlock = songs;
     this.songList.className = "hues-m-songbutton";
 
     var songControls = document.createElement("div");
     songControls.className = "hues-m-controlbuttons";
     this.songPrev.className = "hues-m-prevbutton";
     this.songNext.className = "hues-m-nextbutton";
-    var songShuffle = document.createElement("div");
+    this.songShuffle = document.createElement("div");
-    songShuffle.innerHTML = '<i class="fa fa-random"></i>';
+    this.songShuffle.innerHTML = '<i class="fa fa-random"></i>';
-    songShuffle.className = "hues-m-actbutton";
+    this.songShuffle.className = "hues-m-actbutton";
-    songShuffle.onclick = function() {that.core.randomSong();};
+    this.songShuffle.onclick = function() {that.core.randomSong();};
     songs.appendChild(this.songList);
     songControls.appendChild(this.songPrev);
-    songControls.appendChild(songShuffle);
+    songControls.appendChild(this.songShuffle);
     songControls.appendChild(this.songNext);
     songs.appendChild(songControls);
     rightBox.appendChild(songs);
@@ -599,6 +601,7 @@ ModernUI.prototype.initUI = function() {
     var images = document.createElement("div");
     images.className = "hues-m-controlblock";
     this.imageList.className = "hues-m-songbutton";
+    this.imageBlock = images;
 
     var imageControls = document.createElement("div");
     imageControls.className = "hues-m-controlbuttons";
@@ -661,18 +664,19 @@ ModernUI.prototype.initUI = function() {
 };
 
 ModernUI.prototype.toggleHide = function() {
-    this.beatBar.className = "hues-m-beatbar";
+    // classList is new-ish, but if you have web audio you'll have this
-    this.beatCenter.className = "hues-m-beatcenter";
+    this.beatBar.classList.remove("hidden");
-    this.controls.className = "hues-m-controls";
+    this.beatCenter.classList.remove("hidden");
-    this.hideRestore.className = "hues-m-hiderestore";
+    this.controls.classList.remove("hidden");
+    this.hideRestore.classList.remove("hidden");
     switch(this.hidden) {
         case 1:
-            this.beatBar.className = "hues-m-beatbar hidden";
+            this.beatBar.classList.add("hidden");
-            this.beatCenter.className = "hues-m-beatcenter hidden";
+            this.beatCenter.classList.add("hidden");
             /* falls through */
         case 0:
-            this.controls.className = "hues-m-controls hidden";
+            this.controls.classList.add("hidden");
-            this.hideRestore.className = "hues-m-hiderestore hidden";
+            this.hideRestore.classList.add("hidden");
     }
     this.hidden = (this.hidden+1) % 3;
 };
@@ -773,8 +777,8 @@ function XmasUI() {
     this.yBlur = null;
     this.timer = null;
 
-    this.controls.className = "hues-x-controls";
+    this.controls.className += " hues-x-controls";
-    this.beatBar.className = "hues-x-beatbar";
+    this.beatBar.className += " hues-x-beatbar";
 
     this.lights = [];
 
@@ -901,25 +905,75 @@ XmasUI.prototype.beat = function() {
     }
 };
 
-XmasUI.prototype.toggleHide = function() {
-    this.beatBar.className = "hues-x-beatbar";
-    this.beatCenter.className = "hues-m-beatcenter";
-    this.controls.className = "hues-x-controls";
-    switch(this.hidden) {
-        case 1:
-            this.beatBar.className = "hues-x-beatbar hidden";
-            this.beatCenter.className = "hues-m-beatcenter hidden";
-            /* falls through */
-        case 0:
-            this.controls.className = "hues-x-controls hidden";
-    }
-    this.hidden = (this.hidden+1) % 3;
-};
-
 XmasUI.prototype.setColourText = function(colour) {};
 XmasUI.prototype.blurUpdated = function(x, y) {};
 XmasUI.prototype.updateTime = function(time) {};
 
+function HalloweenUI() {
+    ModernUI.call(this);
+}
+
+HalloweenUI.prototype = Object.create(ModernUI.prototype);
+HalloweenUI.prototype.constructor = HalloweenUI;
+
+HalloweenUI.prototype.initUI = function() {
+    ModernUI.prototype.initUI.call(this);
+    
+    this.controls.className += " hues-h-controls";
+    this.beatBar.className += " hues-h-beatbar";
+    this.leftBox.className += " hues-h-leftbox";
+    this.rightBox.className += " hues-h-rightbox";
+    this.volBar.className += " hues-h-vol-bar";
+    
+    this.beatLeft.className += " hues-h-text";
+    this.beatRight.className += " hues-h-text";
+    this.beatCenter.className += " hues-h-text";
+    this.songShuffle.className += " hues-h-text";
+    this.songNext.className += " hues-h-text";
+    this.songPrev.className += " hues-h-text";
+    this.songList.className += " hues-h-text";
+    this.songName.className += " hues-h-text";
+    this.imageMode.className += " hues-h-text";
+    this.imageNext.className += " hues-h-text";
+    this.imagePrev.className += " hues-h-text";
+    this.imageList.className += " hues-h-text";
+    this.imageName.className += " hues-h-text";
+    this.hueName.className += " hues-h-text";
+    
+    this.settingsToggle.className += " hues-h-text";
+    this.hideToggle.className += " hues-h-text";
+    this.infoToggle.className += " hues-h-text";
+    this.volLabel.className += " hues-h-text";
+    
+    this.timer.className = "hues-h-textfade";
+    this.beatCount.className = "hues-h-textfade";
+    this.xBlur.className = "hues-h-textfade";
+    this.yBlur.className = "hues-h-textfade";
+    
+    var leftBoxTomb = document.createElement("div");
+    leftBoxTomb.className = "hues-h-tombstone";
+    this.leftBox.appendChild(leftBoxTomb);
+    
+    var songTomb = document.createElement("div");
+    songTomb.className = "hues-h-tombstone";
+    this.songBlock.insertBefore(songTomb,this.songBlock.firstChild);
+    
+    var imageTomb = document.createElement("div");
+    imageTomb.className = "hues-h-tombstone";
+    this.imageBlock.insertBefore(imageTomb,this.imageBlock.firstChild);
+    
+    var topLeft = document.createElement("div");
+    topLeft.className = "hues-h-topleft";
+    var topRight = document.createElement("div");
+    topRight.className = "hues-h-topright";
+    var bottomRight = document.createElement("div");
+    bottomRight.className = "hues-h-bottomright";
+    
+    this.root.appendChild(topLeft);
+    this.root.appendChild(topRight);
+    this.root.appendChild(bottomRight);
+}
+
 // Positions and angles for the Xmas lights
 var xleft = [
     {"angle": 122.529582194, "x": 19.4, "y": -19.35},