diff --git a/ds4/template.css b/ds4/template.css index adb1e46..53722fa 100644 --- a/ds4/template.css +++ b/ds4/template.css @@ -3,39 +3,52 @@ width: 806px; height: 598px; } + .gamepad.white { background-image: url(base-white.svg); } + .gamepad.disconnected { background-image: url(disconnected.svg); } + .gamepad.disconnected div { display: none; } + .gamepad .triggers { width: 588px; height: 90px; position: absolute; left: 109px; } + .gamepad .trigger { width: 99px; height: 100%; background: url(triggers.svg); } + +.gamepad .trigger[data-value="0"] { + opacity: 0; +} + .gamepad .trigger.left { float: left; } + .gamepad .trigger.right { float: right; background-position-x: 99px; } + .gamepad .bumper { width: 99px; height: 23px; background: url(bumper.svg) no-repeat; opacity: 0; } + .gamepad .bumpers { position: absolute; width: 588px; @@ -43,18 +56,22 @@ left: 109px; top: 94px; } + .gamepad .bumper[data-pressed="true"] { opacity: 1; } + .gamepad .bumper.left { /* -webkit-transform: rotateY(180deg); */ /* transform: rotateY(180deg); */ float: left; } + .gamepad .bumper.right { float: right; transform: rotateY(180deg); } + .gamepad .touchpad { width: 262px; height: 151px; @@ -62,9 +79,11 @@ left: 272px; top: 122px; } + .gamepad .touchpad[data-pressed="true"] { background: url(touchpad.svg) no-repeat center; } + .gamepad .meta { width: 42px; height: 42px; @@ -72,9 +91,11 @@ left: 382px; bottom: 216px; } + .gamepad .meta[data-pressed="true"] { background: url(meta.svg) no-repeat center; } + .gamepad .arrows { position: absolute; width: 352px; @@ -82,22 +103,27 @@ top: 142px; left: 227px; } + .gamepad .select, .gamepad .start { background: url(start.svg); width: 28px; height: 46px; opacity: 0; } + .gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] { opacity: 1; } + .gamepad .select { float: left; } + .gamepad .start { float: right; background-position: 28px 0; } + .gamepad .buttons { position: absolute; width: 170px; @@ -105,33 +131,40 @@ top: 159px; left: 567px; } + .gamepad .button { position: absolute; width: 56px; height: 56px; background: url(buttons.svg); } + .gamepad .button[data-pressed="true"] { background-position-y: 56px; } + .gamepad .a { background-position: 0 0; bottom: 0px; left: 56px; } + .gamepad .b { background-position: -56px 0; top: 56px; right: 0px; } + .gamepad .x { background-position: 112px 0; top: 56px; } + .gamepad .y { background-position: 56px 0; left: 56px; } + .gamepad .sticks { position: absolute; width: 361px; @@ -139,26 +172,32 @@ top: 308px; left: 228px; } + .gamepad .stick { position: absolute; background: url(sticks.svg); height: 94px; width: 94px; } + .gamepad .stick[data-pressed="true"].left { background-position-x: -96px; } + .gamepad .stick[data-pressed="true"].right { background-position-x: -192px; } + .gamepad .stick.left { top: 0; left: 0; } + .gamepad .stick.right { top: calc(100% - 105px); left: calc(100% - 105px); } + .gamepad .dpad { position: absolute; width: 125px; @@ -166,42 +205,51 @@ top: 181px; left: 92px; } + .gamepad .face { background: url(dpad.svg); position: absolute; } + .gamepad .face.up, .gamepad .face.down { width: 36px; height: 52px; } + .gamepad .face.left, .gamepad .face.right { width: 52px; height: 36px; } + .gamepad .face.up { left: 44px; top: 0; background-position: -37px 0px; } + .gamepad .face.down { left: 44px; bottom: 0; background-position: 0px 0; } + .gamepad .face.left { top: 44px; left: 0; background-position: 104px 0; } + .gamepad .face.right { top: 44px; right: 0px; background-position: 52px 0; } + .gamepad .face[data-pressed="true"] { /* margin-top: 5px; */ background-position-y: 52px; } + .gamepad.half { margin-top: -300px; } diff --git a/ds4/template.js b/ds4/template.js index f98dbbd..9a7edad 100644 --- a/ds4/template.js +++ b/ds4/template.js @@ -1,5 +1,5 @@ function updateButton($button) { - value = $button.attr('data-value'); + value = parseFloat($button.attr('data-value'), 10); if ($button.is('.trigger')) { $button.css({ diff --git a/xbox-one/template.css b/xbox-one/template.css index 2ae44c8..3b19931 100644 --- a/xbox-one/template.css +++ b/xbox-one/template.css @@ -30,6 +30,10 @@ opacity: 1; } +.gamepad .trigger[data-value="0"] { + opacity: 0; +} + .gamepad .trigger.left { float: left; background-position: 0 0; diff --git a/xbox-one/template.js b/xbox-one/template.js index f98dbbd..9a7edad 100644 --- a/xbox-one/template.js +++ b/xbox-one/template.js @@ -1,5 +1,5 @@ function updateButton($button) { - value = $button.attr('data-value'); + value = parseFloat($button.attr('data-value'), 10); if ($button.is('.trigger')) { $button.css({