From cbae6b3e505b2755a63febad22909fcb310bced3 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 7 Feb 2015 22:00:50 -0800 Subject: [PATCH] Abstract volume, balance, and shade sprite info --- css/main.css | 51 ++++------------------------------------------ js/main-window.js | 2 +- js/skin-sprites.js | 22 +++++++++++++++++++- js/skin.js | 11 +--------- 4 files changed, 27 insertions(+), 59 deletions(-) diff --git a/css/main.css b/css/main.css index 76b3d699..a8cf8981 100755 --- a/css/main.css +++ b/css/main.css @@ -288,7 +288,6 @@ top: 57px; height: 13px; width: 68px; - /* background-image: VOLUME.BMP via Javascript */ background-position: 0 0; cursor:url('../cursors/POSBAR.PNG?inline'), auto; } @@ -297,25 +296,13 @@ margin-top: 1px; height: 11px; width: 14px; - /* background-image: VOLUME.BMP via Javascript */ - background-position: -15px -422px; cursor:url('../cursors/POSBAR.PNG?inline'), auto; - background-repeat: no-repeat; } #volume::-moz-range-thumb { margin-top: 1px; height: 11px; width: 14px; - /* background-image: VOLUME.BMP via Javascript */ - background-position: -15px -422px; cursor:url('../cursors/POSBAR.PNG?inline'), auto; - background-repeat: no-repeat; -} -#volume:active::-webkit-slider-thumb { - background-position: 0 -422px; -} -#volume:active::-moz-range-thumb { - background-position: 0 -422px; } #balance { @@ -324,8 +311,6 @@ top: 57px; height: 13px; width: 38px; - /* background-image: BALANCE.BMP via Javascript */ - background-position: -9px 0; cursor:url('../cursors/POSBAR.PNG?inline'), auto; } @@ -333,26 +318,13 @@ top: 1px; height: 11px; width: 14px; - /* background-image: VOLUME.BMP via Javascript */ - background-position: -15px -422px; cursor:url('../cursors/POSBAR.PNG?inline'), auto; - background-repeat: no-repeat; } #balance::-moz-range-thumb { top: 1px; height: 11px; width: 14px; - /* background-image: VOLUME.BMP via Javascript */ - background-position: -15px -422px; cursor:url('../cursors/POSBAR.PNG?inline'), auto; - background-repeat: no-repeat; -} - -#balance:active::-webkit-slider-thumb { - background-position: 0 -422px; -} -#balance:active::-moz-range-thumb { - background-position: 0 -422px; } .windows { @@ -614,35 +586,20 @@ top: 4px; width: 17px; height: 7px; - /* background-image: TITLEBAR.BMP via Javascript */ - background-position: -0px -36px; } .shade #position::-webkit-slider-thumb { height: 7px; width: 3px; - background-position: -20px -36px; - /* background-image: TITLEBAR.BMP via Javascript */ + /* This make it appear. Not sure why */ + background: none; } .shade #position::-moz-range-thumb { height: 7px; width: 3px; - background-position: -20px -36px; - /* background-image: TITLEBAR.BMP via Javascript */ -} - -.shade #position.left::-webkit-slider-thumb { - background-position: -17px -36px; -} -.shade #position.left::-moz-range-thumb { - background-position: -17px -36px; -} -.shade #position.right::-webkit-slider-thumb { - background-position: -23px -36px; -} -.shade #position.right::-moz-range-thumb { - background-position: -23px -36px; + /* This make it appear. Not sure why */ + background: none; } #shade-time { diff --git a/js/main-window.js b/js/main-window.js index 45dc27a8..32c689f6 100644 --- a/js/main-window.js +++ b/js/main-window.js @@ -325,7 +325,7 @@ MainWindow = { balance = Math.abs(balance) / 100; var sprite = Math.round(balance * 28); var offset = (sprite - 1) * 15; - this.nodes.balance.style.backgroundPosition = '-9px -' + offset + 'px'; + this.nodes.balance.style.backgroundPosition = '0px -' + offset + 'px'; }, changeState: function() { diff --git a/js/skin-sprites.js b/js/skin-sprites.js index dffc2a22..7b859bb9 100644 --- a/js/skin-sprites.js +++ b/js/skin-sprites.js @@ -1,4 +1,12 @@ var SKIN_SPRITES = [ + { + img: "BALANCE", + sprites: [ + { selectors: ["#balance"], x: 9, y: 0, width: 38, height: 420}, + { selectors: ["#balance::-webkit-slider-thumb", "#balance::-moz-range-thumb"], x: 15, y: 422, width: 14, height: 11}, + { selectors: ["#balance::-webkit-slider-thumb:active", "#balance::-moz-range-thumb:active"], x: 0, y: 422, width: 14, height: 11}, + ] + }, { img: "MAIN", sprites: [ @@ -95,7 +103,19 @@ var SKIN_SPRITES = [ { selectors: [".shade #title-bar"], x: 27, y: 42, width: 275, height: 14}, { selectors: [".shade #title-bar.selected"], x: 27, y: 29, width: 275, height: 14}, { selectors: [".shade #title-bar #shade"], x: 0, y: 27, width: 9, height: 9}, - { selectors: [".shade #title-bar #shade:active"], x: 9, y: 27, width: 9, height: 9} + { selectors: [".shade #title-bar #shade:active"], x: 9, y: 27, width: 9, height: 9}, + { selectors: [".shade #position"], x: 0, y: 36, width: 17, height: 7}, + { selectors: [".shade #position::-moz-range-thumb", ".shade #position::-webkit-slider-thumb"], x: 20, y: 36, width: 3, height: 7}, + { selectors: [".shade #position.left::-moz-range-thumb", ".shade #position.left::-webkit-slider-thumb"], x: 17, y: 36, width: 3, height: 7}, + { selectors: [".shade #position.right::-moz-range-thumb", ".shade #position.right::-webkit-slider-thumb"], x: 23, y: 36, width: 3, height: 7} + ] + }, + { + img: "VOLUME", + sprites: [ + { selectors: ["#volume"], x: 0, y: 0, width: 68, height: 420}, + { selectors: ["#volume::-webkit-slider-thumb", "#volume::-moz-range-thumb"], x: 15, y: 422, width: 14, height: 11}, + { selectors: ["#volume::-webkit-slider-thumb:active", "#volume::-moz-range-thumb:active"], x: 0, y: 422, width: 14, height: 11}, ] }, ]; diff --git a/js/skin.js b/js/skin.js index 1ecd8af1..204dc1e8 100644 --- a/js/skin.js +++ b/js/skin.js @@ -8,12 +8,6 @@ SkinManager = { }, _skinImages: { - "#volume": "VOLUME.BMP", - "#volume::-webkit-slider-thumb": "VOLUME.BMP", - "#volume::-moz-range-thumb": "VOLUME.BMP", - "#balance": "BALANCE.BMP", - "#balance::-webkit-slider-thumb": "VOLUME.BMP", - "#balance::-moz-range-thumb": "VOLUME.BMP", ".windows div": "SHUFREP.BMP", "#position": "POSBAR.BMP", "#position::-webkit-slider-thumb": "POSBAR.BMP", @@ -23,10 +17,7 @@ SkinManager = { ".shuffle-repeat div": "SHUFREP.BMP", ".character": "TEXT.BMP", // Put this second, since it will trump .digit - ".digit-ex": "NUMS_EX.BMP", - ".shade #position": "TITLEBAR.BMP", - ".shade #position::-webkit-slider-thumb": "TITLEBAR.BMP", - ".shade #position::-moz-range-thumb": "TITLEBAR.BMP", + ".digit-ex": "NUMS_EX.BMP" }, // For sprites that tile, we need to use just the sprite, not the whole image