Fix webkit styles, other CSS tweaks, local respack loading

css/hues-m.css

@@ -8,15 +8,15 @@
 .hues-m-beatbar, .hues-m-beatcenter{
     transform: translateY(0px);
     -webkit-transform: translateY(0px);
-    transition: transform 1s linear;
-    -webkit-transition: transform 1s linear;
+    transition: transform 1s ease-out;
+    -webkit-transition: -webkit-transform 1s ease-out;
 }
 
 .hues-m-controls {
     transform: translateY(0px);
     -webkit-transform: translateY(0px);
-    transition: transform 1s linear;
-    -webkit-transition: transform 1s linear;
+    transition: transform 1s ease-out;
+    -webkit-transition: -webkit-transform 1s ease-out;
 }
 
 .hues-m-beatbar.hidden, .hues-m-beatcenter.hidden{
@@ -231,7 +231,7 @@
     user-select: none;
     font-size: 12px;
     width: 50%;
-    margin: auto;
+    margin: 3px auto;
     float: left;
 }
 
@@ -251,37 +251,41 @@
     cursor: pointer;
 }
 
+.hues-m-prevbutton:hover, .hues-m-nextbutton:hover, .hues-m-actbutton:hover {
+    background: rgb(100,100,100);
+}
+
 .hues-m-prevbutton, .hues-m-nextbutton {
     color: white;
-    background: rgb(32,32,32);
+    background: rgb(40,40,40);
     height: 20px;
     line-height: 20px;
     font-size: 12px;
     white-space: nowrap;
     border-radius: 10px;
-    top: 10px;
+    top: 7.5px;
 }
 
 .hues-m-prevbutton {
     padding: 0 10px 0 0;
-    left: 0px;
+    left: 5px;
     border-radius: 10px 0 0 10px;
 }
 
 .hues-m-nextbutton {
     padding: 0 0 0 10px;
-    left: 48px;
+    left: 42px;
     border-radius: 0 10px 10px 0;
 }
 
 .hues-m-actbutton {
-    height: 40px;
-    width: 40px;
-    left: 15px;
+    height: 35px;
+    width: 35px;
+    left: 17.5px;
     color: white;
     background: rgb(32,32,32);
     font-size: 20px;
-    line-height: 40px;
+    line-height: 35px;
     border-radius: 20px;
     text-align: center;
     z-index: 1;
@@ -291,15 +295,45 @@
     bottom: 5px;
 }
 
-.hues-m-question, .hues-m-cog {
+.hues-m-question, .hues-m-cog, .hues-m-hide {
     cursor: pointer;
 }
 
 .hues-m-cog {
+    position: absolute;
+    left: 15px;
+    top: 0px;
+    font-size: 20px;
+}
+
+.hues-m-hide {
+    position: absolute;
+    left: 17px;
+    top: 20px;
+    font-size: 12px;
+}
+
+.hues-m-hiderestore {
+    display: none;
     position: absolute;
     left: 8px;
-    top: 5px;
-    font-size: 25px;
+    right: 8px;
+    bottom: 0px;
+    margin: 0 auto;
+    height: 30px;
+    max-width: 992px;
+    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
+    border-top-left-radius: 100px;
+    border-top-right-radius: 100px;
+    cursor: pointer;
+}
+
+.hues-m-hiderestore:hover {
+    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4));
+}
+
+.hues-m-hiderestore.hidden {
+    display: block;
 }
 
 .hues-m-question {

css/hues-r.css

@@ -19,7 +19,9 @@
 }
 
 .hues-r-controls {
+    display:-webkit-flex;
     display:flex;
+    -webkit-align-items:center;
     align-items:center;
     position: absolute;
     right: 0px;
@@ -95,8 +97,8 @@
 .hues-r-container, .hues-r-controls, .hues-r-subcontrols {
     transform: translateY(0px);
     -webkit-transform: translateY(0px);
-    transition: transform 1s linear;
-    -webkit-transition: transform 1s linear;
+    transition: transform 1s ease-out;
+    -webkit-transition: -webkit-transform 1s ease-out;
 }
 
 .hues-r-container.hidden, .hues-r-controls.hidden, .hues-r-subcontrols.hidden {

css/hues-res.css

@@ -17,6 +17,7 @@
 
 .res-packcontainer {
     width: 55%;
+    height: 100%;
     right: 0;
     margin-left: 10px;
 }
@@ -37,6 +38,48 @@
     height: 155px;
 }
 
+#res-progress-container {
+    font-size: 11px;
+}
+
+#res-progress-bar {
+    height:5px;  /* Can be anything */
+    position: relative;
+    background: #000;
+    -moz-border-radius: 25px;
+    -webkit-border-radius: 25px;
+    border-radius: 25px;
+    padding: 2px;
+    margin: 2px;
+}
+
+#res-progress-filled {
+  display: block;
+  height: 100%;
+  border-radius: 8px;
+  background-color: rgb(43,194,83);
+  position: relative;
+  overflow: hidden;
+}
+
+#res-progress-texts {
+    font-size: 9px;
+}
+
+#res-progress-current {
+    position: absolute;
+    left: 5px;
+}
+
+#res-progress-top {
+    position: absolute;
+    right: 5px;
+}
+
+#res-progress-percent {
+    text-align: center;
+}
+
 .res-list {
     border: 2px solid black;
     background: rgba(255,255,255,0.3);
@@ -47,7 +90,9 @@
 .res-listitem {
     font-size: 10px;
     border-bottom: 1px solid black;
+    display: -webkit-flex;
     display: flex;
+    -webkit-align-items: center;
     align-items: center;
 }
 
@@ -91,7 +136,9 @@
 }
 
 .res-buttons {
+    display: -webkit-flex;
     display: flex;
+    -webkit-justify-content: space-between;
     justify-content: space-between;
     padding: 0px 0px;
 }
@@ -132,7 +179,9 @@
 }
 
 #res-countscontainer {
-    margin-top: 3px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
 }
 
 .res-counts {
@@ -143,7 +192,9 @@
 #res-packinfo {
     margin-top: 5px;
     font-size: 9px;
+    display: -webkit-flex;
     display: flex;
+    -webkit-justify-content: space-between;
     justify-content: space-between;
 }
 
@@ -189,6 +240,7 @@
 }
 
 #res-packbuttons > .res-button {
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     text-align: center;
 }

css/hues-w.css

@@ -3,7 +3,9 @@
 }
 
 .hues-w-controls {
+    display:-webkit-flex;
     display:flex;
+    -webkit-align-items:center;
     align-items:center;
     position: absolute;
     right: 0px;
@@ -32,8 +34,8 @@
 .hues-w-controls, .hues-w-subcontrols {
     transform: translateY(0px);
     -webkit-transform: translateY(0px);
-    transition: transform 1s linear;
-    -webkit-transition: transform 1s linear;
+    transition: transform 1s ease-out;
+    -webkit-transition: -webkit-transform 1s ease-out;
 }
 
 .hues-w-controls.hidden, .hues-w-subcontrols.hidden {
@@ -44,8 +46,8 @@
 .hues-w-beatbar {
     transform: translateY(0px);
     -webkit-transform: translateY(0px);
-    transition: transform 1s linear;
-    -webkit-transition: transform 1s linear;
+    transition: transform 1s ease-out;
+    -webkit-transition: -webkit-transform 1s ease-out;
 }
 
 .hues-w-beatbar.hidden {

css/hues-x.css

@@ -32,15 +32,15 @@
 .hues-x-beatbar{
     transform: translateY(0px);
     -webkit-transform: translateY(0px);
-    transition: transform 1s linear;
-    -webkit-transition: transform 1s linear;
+    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 linear;
-    -webkit-transition: transform 1s linear;
+    transition: transform 1s ease-out;
+    -webkit-transition: -webkit-transform 1s ease-out;
     
 }
 

css/style.css

@@ -37,8 +37,11 @@ h1, h2, h3 {
 }
 
 #reference {
+    display:-webkit-flex;
     display:flex;
+    -webkit-align-items:center;
     align-items:center;
+    -webkit-justify-content: center;
     justify-content: center;
 }
 
@@ -76,9 +79,13 @@ h1, h2, h3 {
     background-color: #FFF; 
     width: 100%;
     height: 100%;
+    display:-webkit-flex;
     display:flex;
+    -webkit-justify-content:center;
     justify-content:center;
+    -webkit-align-items:center;
     align-items:center;
+    -webkit-flex-direction: column;
     flex-direction: column;
     font-family: 'PetMe64Web';
     font-size: 25pt;
@@ -144,8 +151,11 @@ input.tab-input[type="radio"]:checked + label {
 }
 
 #settingsHelper {
+    display:-webkit-flex;
     display:flex;
+    -webkit-justify-content:center;
     justify-content:center;
+    -webkit-align-items:center;
     align-items:center;
     position: absolute;
     top: 0;

index.html

@@ -25,8 +25,9 @@
                 var defaults = {
                     respacks : [//"./respacks/Defaults_v5.0.zip", 
                                 "./respacks/CharPackagev0.03.zip", 
-                                //"./respacks/HuesMixB.zip",
-                                "./respacks/PackShit.zip"],
+                                "./respacks/HuesMixB.zip",
+                                "./respacks/PackShit.zip"
+                                ],
                     load     : false, //debug
                     autoplay : false // debug
                 };
@@ -43,12 +44,13 @@
         </div>
         <div id="settingsHelper">
             <div id="settingsWindow">
+                <div id="closeButton">x</div>
                 <div id="tabs">
                     <input class="tab-input" type="radio" name="tabs" id="tab1">
                     <label class="tab-label" for="tab1">RESOURCES</label>
-                    <input class="tab-input" type="radio" name="tabs" id="tab2" checked>
+                    <input class="tab-input" type="radio" name="tabs" id="tab2">
                     <label class="tab-label" for="tab2">OPTIONS</label>
-                    <input class="tab-input" type="radio" name="tabs" id="tab3">
+                    <input class="tab-input" type="radio" name="tabs" id="tab3" checked>
                     <label class="tab-label" for="tab3">INFO</label>
                     <div id="tab1-content" class="tab-content">
                         <!-- Populated by ResourceManager.js -->

js/HuesCore.js

@@ -6,7 +6,7 @@ HuesCore = function(defaults) {
     this.currentSong;
     this.currentImage;
     this.songIndex=-1;
-    this.colourIndex=0; // TODO should be 0xF
+    this.colourIndex=0x3f;
     this.imageIndex=-1;
     this.isFullAuto = true;
     this.loopCount=0;
@@ -33,7 +33,7 @@ HuesCore = function(defaults) {
     this.resourceManager = new Resources(this);
     this.soundManager = new SoundManager(this);
     if(!this.soundManager.canUse) {
-        this.error("Web Audio API not supported in this browser.");
+        this.error(this.soundManager.errorMsg);
         return;
     }
     this.renderer = new HuesCanvas("waifu", this.soundManager.context, this);
@@ -129,6 +129,17 @@ HuesCore.prototype.previousSong = function() {
     this.setSong(index);
 }
 
+HuesCore.prototype.setSongByName = function(name) {
+    var songs = this.resourceManager.enabledSongs;
+    for(var i = 0; i < songs.length; i++) {
+        if(songs[i].title == name) {
+            this.setSong(i);
+            return;
+        }
+    }
+    this.setSong(0); // fallback
+}
+
 HuesCore.prototype.setSong = function(index) {
     if(this.currentSong == this.resourceManager.enabledSongs[index]) {
         return;
@@ -156,9 +167,9 @@ HuesCore.prototype.setSong = function(index) {
             break;
         }
     }
-    this.resetAudio();
     var that = this;
     this.soundManager.playSong(this.currentSong, this.doBuildup, function() {
+        that.resetAudio();
         that.fillBuildup();
     });
 }

js/HuesSettings.js

@@ -77,7 +77,7 @@ function HuesSettings(defaults) {
     this.core = null;
     this.root = document.getElementById("huesSettings");
     this.window = document.getElementById("settingsWindow");
-    this.hide(); // TODO hide
+    this.hide();
     
     for(var attr in this.defaultSettings) {
         if(attr == "respacks") {

js/HuesUI.js

@@ -203,6 +203,10 @@ HuesUI.prototype.intToHex2 = function(num) {
     return '$0x' + ("00"+num.toString(16)).slice(-2);
 }
 
+HuesUI.prototype.intToHex3 = function(num) {
+    return '$0x' + ("000"+num.toString(16)).slice(-3);
+}
+
 HuesUI.prototype.intToHex4 = function(num) {
     return '$0x' + ("0000"+num.toString(16)).slice(-4);
 }
@@ -355,7 +359,7 @@ RetroUI.prototype.beat = function() {
 
     this.beatBar.textContent = ">>" + rest;
     
-    this.beatCount.textContent = "B=" + this.intToHex2(this.core.getSafeBeatIndex());
+    this.beatCount.textContent = "B=" + this.intToHex3(this.core.getSafeBeatIndex());
 }
 
 function ModernUI() {
@@ -369,6 +373,7 @@ function ModernUI() {
     this.leftInfo = null;
     this.controls = null;
     this.volInput = null;
+    this.hideRestore = null;
     
     HuesUI.call(this);
     
@@ -408,6 +413,9 @@ ModernUI.prototype.initUI = function() {
     this.settingsToggle.className = "hues-m-cog";
     volCluster.appendChild(this.settingsToggle);
     
+    this.hideToggle.className = "hues-m-hide";
+    volCluster.appendChild(this.hideToggle);
+    
     var volBar = document.createElement("div");
     volBar.className = "hues-m-vol-bar";
     volCluster.appendChild(volBar);
@@ -515,18 +523,27 @@ ModernUI.prototype.initUI = function() {
     beatCenter.className = "hues-m-beatcenter";
     this.root.appendChild(beatCenter);
     this.beatCenter = beatCenter;
+    
+    this.hideRestore = document.createElement("div");
+    this.hideRestore.className = "hues-m-hiderestore";
+    this.hideRestore.onclick = function() {
+        that.toggleHide();
+    }
+    this.root.appendChild(this.hideRestore);
 }
 
 ModernUI.prototype.toggleHide = function() {
     this.beatBar.className = "hues-m-beatbar";
     this.beatCenter.className = "hues-m-beatcenter";
     this.controls.className = "hues-m-controls";
+    this.hideRestore.className = "hues-m-hiderestore";
     switch(this.hidden) {
         case 1:
             this.beatBar.className = "hues-m-beatbar hidden";
             this.beatCenter.className = "hues-m-beatcenter hidden";
         case 0:
             this.controls.className = "hues-m-controls hidden";
+            this.hideRestore.className = "hues-m-hiderestore hidden";
     }
     this.hidden = (this.hidden+1) % 3;
 }
@@ -650,7 +667,7 @@ WeedUI.prototype.beat = function() {
     this.beatLeft.textContent = rest;
     this.beatRight.textContent = rest;
     
-    this.beatCount.textContent = "B=" + this.intToHex2(this.core.getSafeBeatIndex());
+    this.beatCount.textContent = "B=" + this.intToHex3(this.core.getSafeBeatIndex());
     
     if(["x", "o", "X", "O"].indexOf(beats[0]) != -1) {
         var beatCenter = document.createElement("div");

js/ResourceManager.js

@@ -199,8 +199,10 @@ Resources.prototype.parseLocalQueue = function(recursing) {
         r.loadBlob(this.fileParseQueue.shift(), 
             function() {
                 that.addPack(r);
+                that.localComplete();
                 that.parseLocalQueue(true);
             },
+            function(progress, respack) {that.localProgress(progress, respack);},
             function() {that.parseLocalQueue(true);});
     } else {
         console.log("Local respack parsing complete");
@@ -208,6 +210,26 @@ Resources.prototype.parseLocalQueue = function(recursing) {
     }
 }
 
+Resources.prototype.localProgress = function(progress, respack) {
+    this.packsView.progressStatus.textContent = "Processing...";
+    
+    this.packsView.progressBar.style.width = (progress * 100) + "%";
+    this.packsView.progressCurrent.textContent = respack.filesLoaded;
+    this.packsView.progressTop.textContent = respack.filesToLoad;
+    this.packsView.progressPercent.textContent = Math.round(progress * 100) + "%";
+}
+
+Resources.prototype.localComplete = function(progress) {
+    var progStat = this.packsView.progressStatus;
+    progStat.textContent = "Complete";
+    window.setTimeout(function() {progStat.textContent = "Idle";}, 2000);
+    
+    this.packsView.progressBar.style.width = "100%";
+    this.packsView.progressCurrent.textContent = "0b";
+    this.packsView.progressTop.textContent = "0b";
+    this.packsView.progressPercent.textContent = "0%";
+}
+
 Resources.prototype.initUI = function() {
     this.root = document.getElementById("huesResources");
     var that = this;
@@ -254,21 +276,38 @@ Resources.prototype.initUI = function() {
     this.fileInput.onchange = function() {that.loadLocal();};
 
     var progressContainer = document.createElement("div");
+    progressContainer.id = "res-progress-container";
     var progressBar = document.createElement("div");
+    progressBar.id = "res-progress-bar";
+    var progressFilled = document.createElement("span");
+    progressFilled.id = "res-progress-filled";
+    progressBar.appendChild(progressFilled);
     var progressStatus = document.createElement("div");
+    progressStatus.textContent = "Idle";
+    
+    var progressTexts = document.createElement("div");
+    progressTexts.id = "res-progress-texts";
     var progressCurrent = document.createElement("div");
+    progressCurrent.id = "res-progress-current";
+    progressCurrent.textContent = "0b";
     var progressTop = document.createElement("div");
+    progressTop.id = "res-progress-top";
+    progressTop.textContent = "0b";
     var progressPercent = document.createElement("div");
-    this.packsView.progressBar = progressBar;
+    progressPercent.id = "res-progress-percent";
+    progressPercent.textContent = "0%";
+    progressTexts.appendChild(progressCurrent);
+    progressTexts.appendChild(progressTop);
+    progressTexts.appendChild(progressPercent);
+    
+    this.packsView.progressBar = progressFilled;
     this.packsView.progressStatus = progressStatus;
     this.packsView.progressCurrent = progressCurrent;
     this.packsView.progressTop = progressTop;
     this.packsView.progressPercent = progressPercent;
-    progressContainer.appendChild(progressBar);
     progressContainer.appendChild(progressStatus);
-    progressContainer.appendChild(progressCurrent);
-    progressContainer.appendChild(progressTop);
-    progressContainer.appendChild(progressPercent);
+    progressContainer.appendChild(progressBar);
+    progressContainer.appendChild(progressTexts);
     
     packsContainer.appendChild(packHeader);
     packsContainer.appendChild(packList);

js/ResourcePack.js

@@ -48,21 +48,20 @@ Respack.prototype.updateProgress = function() {
         if(this.loadedFromURL) {
             percent = (percent / 2) + 0.5;
         }
-        this.progressCallback(percent);
+        this.progressCallback(percent, this);
     }
 }
 
 Respack.prototype.loadFromURL = function(url, callback, progress) {
     var that = this;
     
-    this.progressCallback = progress;
     this.loadedFromURL = true;
     
     var req = new XMLHttpRequest();
     req.open('GET', url, true);
     req.responseType = 'blob';
     req.onload = function() {
-        that.loadBlob(req.response, callback);
+        that.loadBlob(req.response, callback, progress);
     };
     req.onerror = function() {
         console.log("Could not load respack at URL", url);
@@ -80,8 +79,9 @@ Respack.prototype.loadFromURL = function(url, callback, progress) {
     req.send();
 }
 
-Respack.prototype.loadBlob = function(blob, callback, errorCallback) {
+Respack.prototype.loadBlob = function(blob, callback, progress, errorCallback) {
     this._completionCallback = callback;
+    this.progressCallback = progress;
     var that = this;
     this.size = blob.size;
     this.file = new zip.fs.FS();

js/SoundManager.js

@@ -37,11 +37,20 @@ function SoundManager(core) {
         this.gainNode.connect(this.context.destination);
     } catch(e) {
         this.canUse = false;
+        this.errorMsg = "Web Audio API not supported in this browser.";
+        return;
+    }
+    var audio  = document.createElement("audio"),
+    canPlayMP3 = (typeof audio.canPlayType === "function" &&
+              audio.canPlayType("audio/mpeg") !== "");
+    if(!canPlayMP3) {
+        this.canUse = false;
+        this.errorMsg = "MP3 not supported in this browser.";
+        return;
     }
     
     var that = this;
     window.addEventListener('touchend', function() {
-
         // create empty buffer
         var buffer = that.context.createBuffer(1, 1, 22050);
         var source =  that.context.createBufferSource();
@@ -81,7 +90,7 @@ SoundManager.prototype.playSong = function(song, playBuild, callback) {
                 callback();
 
             if(playBuild) {
-                // Mobile Safari requires offset, even if 0
+                // mobile webkit requires offset, even if 0
                 that.bufSource.start(0);
                 that.startTime = that.context.currentTime + that.loopStart;
             } else {
@@ -97,7 +106,8 @@ SoundManager.prototype.playSong = function(song, playBuild, callback) {
 
 SoundManager.prototype.stop = function() {
     if (this.playing) {
-        this.bufSource.stop();
+        // arg required for mobile webkit
+        this.bufSource.stop(0);
         this.bufSource.disconnect(); // TODO needed?
         this.bufSource = null;
         this.playing = false;