From aa175b0414afc7a75f6c47e035d4bb3d5d393fd9 Mon Sep 17 00:00:00 2001 From: William Toohey Date: Sat, 26 Sep 2015 23:09:04 +1000 Subject: [PATCH] Fix webkit styles, other CSS tweaks, local respack loading --- css/hues-m.css | 66 ++++++++++++++++++++++++++++++++----------- css/hues-r.css | 6 ++-- css/hues-res.css | 54 ++++++++++++++++++++++++++++++++++- css/hues-w.css | 10 ++++--- css/hues-x.css | 8 +++--- css/style.css | 10 +++++++ index.html | 10 ++++--- js/HuesCore.js | 17 +++++++++-- js/HuesSettings.js | 2 +- js/HuesUI.js | 21 ++++++++++++-- js/ResourceManager.js | 49 ++++++++++++++++++++++++++++---- js/ResourcePack.js | 8 +++--- js/SoundManager.js | 16 +++++++++-- 13 files changed, 228 insertions(+), 49 deletions(-) diff --git a/css/hues-m.css b/css/hues-m.css index 3e1baa4..86d9f2f 100644 --- a/css/hues-m.css +++ b/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 { diff --git a/css/hues-r.css b/css/hues-r.css index 45f1c43..e1895ed 100644 --- a/css/hues-r.css +++ b/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 { diff --git a/css/hues-res.css b/css/hues-res.css index 2dc94fb..b672f75 100644 --- a/css/hues-res.css +++ b/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; } \ No newline at end of file diff --git a/css/hues-w.css b/css/hues-w.css index f9204ca..6fc1938 100644 --- a/css/hues-w.css +++ b/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 { diff --git a/css/hues-x.css b/css/hues-x.css index c565dbe..9f09f1c 100644 --- a/css/hues-x.css +++ b/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; } diff --git a/css/style.css b/css/style.css index ca73a8a..9d2d15e 100644 --- a/css/style.css +++ b/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; diff --git a/index.html b/index.html index 31153bf..8d69c0e 100644 --- a/index.html +++ b/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 @@
+
x
- + - +
diff --git a/js/HuesCore.js b/js/HuesCore.js index 9458539..6e84418 100644 --- a/js/HuesCore.js +++ b/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(); }); } diff --git a/js/HuesSettings.js b/js/HuesSettings.js index 249dd23..495eb62 100644 --- a/js/HuesSettings.js +++ b/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") { diff --git a/js/HuesUI.js b/js/HuesUI.js index 14de2ee..101905d 100644 --- a/js/HuesUI.js +++ b/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"); diff --git a/js/ResourceManager.js b/js/ResourceManager.js index 69179f9..50f4f3d 100644 --- a/js/ResourceManager.js +++ b/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); diff --git a/js/ResourcePack.js b/js/ResourcePack.js index e3a25aa..d9c672a 100644 --- a/js/ResourcePack.js +++ b/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(); diff --git a/js/SoundManager.js b/js/SoundManager.js index 14aea46..b00f5ba 100644 --- a/js/SoundManager.js +++ b/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;