From a76587d61f82f75cf873b446ebdd5a8c2ebc6f93 Mon Sep 17 00:00:00 2001 From: e7d Date: Sun, 8 May 2016 10:39:43 +0200 Subject: [PATCH] global code cleanup --- common.css | 1 - ds4/base-white.svg | 519 +++++++++++++++++++++----------------- ds4/base.svg | 462 ++++++++++++++++++--------------- ds4/bumper.svg | 13 +- ds4/buttons.svg | 113 +++++---- ds4/disconnected.svg | 67 +++-- ds4/dpad.svg | 93 ++++--- ds4/meta.svg | 41 +-- ds4/start.svg | 13 +- ds4/sticks.svg | 33 ++- ds4/template.css | 134 ++++------ ds4/template.js | 7 +- ds4/touchpad.svg | 38 +-- ds4/triggers.svg | 48 ++-- gamepad.js | 15 +- index.html | 21 +- reset.css | 2 +- xbox-one/base-white.svg | 471 ++++++++++++++++++++-------------- xbox-one/base.svg | 4 +- xbox-one/bumper.svg | 39 ++- xbox-one/buttons.svg | 148 ++++++----- xbox-one/disconnected.svg | 71 ++++-- xbox-one/dpad.svg | 113 ++++++--- xbox-one/start-select.svg | 40 +-- xbox-one/stick.svg | 84 +++--- xbox-one/template.css | 82 +++--- xbox-one/template.js | 7 +- xbox-one/trigger.svg | 27 +- 28 files changed, 1526 insertions(+), 1180 deletions(-) diff --git a/common.css b/common.css index 4f11bbb..4892965 100644 --- a/common.css +++ b/common.css @@ -1,7 +1,6 @@ body { background: darkgrey; } - .gamepad { position: absolute; top: 50%; diff --git a/ds4/base-white.svg b/ds4/base-white.svg index 77538b9..d516de6 100644 --- a/ds4/base-white.svg +++ b/ds4/base-white.svg @@ -1,76 +1,77 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - - - - + + - - - + + - - - - + + + - - - - - - - - - - - - - + - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - + + - - - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - + + - - - - - - - - - + + + + + + + - - - - + + - - + - - - - - + - - - - + + + diff --git a/ds4/base.svg b/ds4/base.svg index 8c13e86..d5e9a7d 100644 --- a/ds4/base.svg +++ b/ds4/base.svg @@ -1,76 +1,77 @@ - - - - + + - + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - + + - + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - + + - + - - + + + + + - - - + - - - + - - - - - + + - - - + + - - - - + + + - - - + - - - - - - + - - - - - - - + - - - + - - + + + + + + + - - + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - + + - - - - - - - - - + l-1.399,0.5l-6.5,2.399v2.7l3.5-1.3l6.399-2.3l0.7-0.4c1.5-0.5,2.2-1.2,2.2-1.9C417.15,366.367,416.351,365.768,414.75,365.268z"/> - - - - - - - - - + + + + + + + + + + + + + + + - - - - - + + - - + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - + + - - + - - - - - + - - + + - diff --git a/ds4/bumper.svg b/ds4/bumper.svg index c3e83d5..960a3d8 100644 --- a/ds4/bumper.svg +++ b/ds4/bumper.svg @@ -1,12 +1,11 @@ - - - + + + - - + diff --git a/ds4/buttons.svg b/ds4/buttons.svg index 4fa188d..9c13ec3 100644 --- a/ds4/buttons.svg +++ b/ds4/buttons.svg @@ -1,64 +1,85 @@ - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - diff --git a/ds4/disconnected.svg b/ds4/disconnected.svg index 57ad2a0..fda5830 100644 --- a/ds4/disconnected.svg +++ b/ds4/disconnected.svg @@ -1,10 +1,11 @@ - - - + + - - - - - - - - - - - - - - - - - + diff --git a/ds4/dpad.svg b/ds4/dpad.svg index 42996dc..e7310f2 100644 --- a/ds4/dpad.svg +++ b/ds4/dpad.svg @@ -1,69 +1,90 @@ - - + - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - + - diff --git a/ds4/meta.svg b/ds4/meta.svg index 33ec490..f58ba51 100644 --- a/ds4/meta.svg +++ b/ds4/meta.svg @@ -1,34 +1,41 @@ - - - - - - + - + + + + + - - - - - - + - diff --git a/ds4/start.svg b/ds4/start.svg index 01f5d5a..7102e2f 100644 --- a/ds4/start.svg +++ b/ds4/start.svg @@ -1,13 +1,14 @@ - - - + + - - + diff --git a/ds4/sticks.svg b/ds4/sticks.svg index 3f08813..e9b8140 100644 --- a/ds4/sticks.svg +++ b/ds4/sticks.svg @@ -1,31 +1,30 @@ - - + - - + + + - - - - - + + - - - - - + + + - - diff --git a/ds4/template.css b/ds4/template.css index ab20566..adb1e46 100644 --- a/ds4/template.css +++ b/ds4/template.css @@ -1,251 +1,207 @@ -.ds4 { +.gamepad { background-image: url(base.svg); width: 806px; height: 598px; } - -.ds4.white { +.gamepad.white { background-image: url(base-white.svg); } - -.ds4.disconnected { +.gamepad.disconnected { background-image: url(disconnected.svg); } - -.ds4.disconnected div { +.gamepad.disconnected div { display: none; } - -.ds4 .triggers { +.gamepad .triggers { width: 588px; height: 90px; position: absolute; left: 109px; } - -.ds4 .trigger { +.gamepad .trigger { width: 99px; height: 100%; background: url(triggers.svg); } - -.ds4 .trigger.left { +.gamepad .trigger.left { float: left; } - -.ds4 .trigger.right { +.gamepad .trigger.right { float: right; background-position-x: 99px; } - -.ds4 .bumper { +.gamepad .bumper { width: 99px; height: 23px; background: url(bumper.svg) no-repeat; opacity: 0; } - -.ds4 .bumpers { +.gamepad .bumpers { position: absolute; width: 588px; height: 23px; left: 109px; top: 94px; } - -.ds4 .bumper[data-pressed="true"] { +.gamepad .bumper[data-pressed="true"] { opacity: 1; } - -.ds4 .bumper.left { +.gamepad .bumper.left { /* -webkit-transform: rotateY(180deg); */ /* transform: rotateY(180deg); */ float: left; } - -.ds4 .bumper.right { +.gamepad .bumper.right { float: right; transform: rotateY(180deg); } - -.ds4 .touchpad { +.gamepad .touchpad { width: 262px; height: 151px; position: absolute; left: 272px; top: 122px; } - -.ds4 .touchpad[data-pressed="true"] { +.gamepad .touchpad[data-pressed="true"] { background: url(touchpad.svg) no-repeat center; } - -.ds4 .meta { +.gamepad .meta { width: 42px; height: 42px; position: absolute; left: 382px; bottom: 216px; } - -.ds4 .meta[data-pressed="true"] { +.gamepad .meta[data-pressed="true"] { background: url(meta.svg) no-repeat center; } - -.ds4 .arrows { +.gamepad .arrows { position: absolute; width: 352px; height: 46px; top: 142px; left: 227px; } - -.ds4 .select, .ds4 .start { +.gamepad .select, .gamepad .start { background: url(start.svg); width: 28px; height: 46px; opacity: 0; } - -.ds4 .select[data-pressed="true"], .ds4 .start[data-pressed="true"] { +.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] { opacity: 1; } - -.ds4 .select { +.gamepad .select { float: left; } - -.ds4 .start { +.gamepad .start { float: right; background-position: 28px 0; } - -.ds4 .buttons { +.gamepad .buttons { position: absolute; width: 170px; height: 170px; top: 159px; left: 567px; } - -.ds4 .button { +.gamepad .button { position: absolute; width: 56px; height: 56px; background: url(buttons.svg); } - -.ds4 .button[data-pressed="true"] { +.gamepad .button[data-pressed="true"] { background-position-y: 56px; } - -.ds4 .a { +.gamepad .a { background-position: 0 0; bottom: 0px; left: 56px; } - -.ds4 .b { +.gamepad .b { background-position: -56px 0; top: 56px; right: 0px; } - -.ds4 .x { +.gamepad .x { background-position: 112px 0; top: 56px; } - -.ds4 .y { +.gamepad .y { background-position: 56px 0; left: 56px; } - -.ds4 .sticks { +.gamepad .sticks { position: absolute; width: 361px; height: 105px; top: 308px; left: 228px; } - -.ds4 .stick { +.gamepad .stick { position: absolute; background: url(sticks.svg); height: 94px; width: 94px; } - -.ds4 .stick[data-pressed="true"].left { +.gamepad .stick[data-pressed="true"].left { background-position-x: -96px; } - -.ds4 .stick[data-pressed="true"].right { +.gamepad .stick[data-pressed="true"].right { background-position-x: -192px; } - -.ds4 .stick.left { +.gamepad .stick.left { top: 0; left: 0; } - -.ds4 .stick.right { +.gamepad .stick.right { top: calc(100% - 105px); left: calc(100% - 105px); } - -.ds4 .dpad { +.gamepad .dpad { position: absolute; width: 125px; height: 126px; top: 181px; left: 92px; } - -.ds4 .face { +.gamepad .face { background: url(dpad.svg); position: absolute; } - -.ds4 .face.up, .ds4 .face.down { +.gamepad .face.up, .gamepad .face.down { width: 36px; height: 52px; } - -.ds4 .face.left, .ds4 .face.right { +.gamepad .face.left, .gamepad .face.right { width: 52px; height: 36px; } - -.ds4 .face.up { +.gamepad .face.up { left: 44px; top: 0; background-position: -37px 0px; } - -.ds4 .face.down { +.gamepad .face.down { left: 44px; bottom: 0; background-position: 0px 0; } - -.ds4 .face.left { +.gamepad .face.left { top: 44px; left: 0; background-position: 104px 0; } - -.ds4 .face.right { +.gamepad .face.right { top: 44px; right: 0px; background-position: 52px 0; } - -.ds4 .face[data-pressed="true"] { +.gamepad .face[data-pressed="true"] { /* margin-top: 5px; */ background-position-y: 52px; } - -.ds4.half { +.gamepad.half { margin-top: -300px; } diff --git a/ds4/template.js b/ds4/template.js index 1cf20ca..f98dbbd 100644 --- a/ds4/template.js +++ b/ds4/template.js @@ -1,5 +1,4 @@ -function updateButton($button) -{ +function updateButton($button) { value = $button.attr('data-value'); if ($button.is('.trigger')) { @@ -10,8 +9,8 @@ function updateButton($button) } var axisX, axisY, axisZ; -function updateAxis($axis) -{ + +function updateAxis($axis) { axisX = $axis.attr('data-value-x'); axisY = $axis.attr('data-value-y'); axisZ = $axis.attr('data-value-z'); diff --git a/ds4/touchpad.svg b/ds4/touchpad.svg index 17e7911..ca1a4ac 100644 --- a/ds4/touchpad.svg +++ b/ds4/touchpad.svg @@ -1,31 +1,31 @@ - - - - + + - - + + + + + - - - - - - - - - - - + + + + - diff --git a/ds4/triggers.svg b/ds4/triggers.svg index 2dad2c0..050c710 100644 --- a/ds4/triggers.svg +++ b/ds4/triggers.svg @@ -1,40 +1,42 @@ - - + - - - - - + + + + + - - + - - - - - - - + + + + + + + - - diff --git a/gamepad.js b/gamepad.js index 6d6b07a..1b6a379 100644 --- a/gamepad.js +++ b/gamepad.js @@ -83,23 +83,22 @@ function mapGamepad(gamepad) { } $.ajax( - activeGamepadType + '/template.html', - { + activeGamepadType + '/template.html', { async: true } ).done(function(template) { - $gamepad.html(template).addClass(activeGamepadType); + $gamepad.html(template); mapping.buttons = []; for (var buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) { button = activeGamepad.buttons[buttonIndex]; - mapping.buttons[buttonIndex] = $('[data-button='+buttonIndex+']'); + mapping.buttons[buttonIndex] = $('[data-button=' + buttonIndex + ']'); } mapping.axes = []; for (var axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) { axis = activeGamepad.axes[axisIndex]; - mapping.axes[axisIndex] = $('[data-axis-x='+axisIndex+'], [data-axis-y='+axisIndex+'], [data-axis-z='+axisIndex+']'); + mapping.axes[axisIndex] = $('[data-axis-x=' + axisIndex + '], [data-axis-y=' + axisIndex + '], [data-axis-z=' + axisIndex + ']'); } updateVisualStatus(); @@ -141,13 +140,13 @@ function updateVisualStatus() { axis = activeGamepad.axes[axisIndex]; - if ($axis.is('[data-axis-x='+axisIndex+']')) { + if ($axis.is('[data-axis-x=' + axisIndex + ']')) { $axis.attr('data-value-x', axis); } - if ($axis.is('[data-axis-y='+axisIndex+']')) { + if ($axis.is('[data-axis-y=' + axisIndex + ']')) { $axis.attr('data-value-y', axis); } - if ($axis.is('[data-axis-z='+axisIndex+']')) { + if ($axis.is('[data-axis-z=' + axisIndex + ']')) { $axis.attr('data-value-z', axis); } diff --git a/index.html b/index.html index ced3054..a787255 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,14 @@ - - Gamepad Viewer - - - + + Gamepad Viewer + + + + +
- -
- - - - + + + diff --git a/reset.css b/reset.css index 704c8aa..9505618 100644 --- a/reset.css +++ b/reset.css @@ -46,4 +46,4 @@ q:before, q:after { table { border-collapse: collapse; border-spacing: 0; -} \ No newline at end of file +} diff --git a/xbox-one/base-white.svg b/xbox-one/base-white.svg index afcee02..873b226 100644 --- a/xbox-one/base-white.svg +++ b/xbox-one/base-white.svg @@ -1,53 +1,60 @@ - - - + + - - - - + + - - - - - - + + + + - + + + - - - - + + - - - + + - - - - + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - + + - - - - - - + - - - + + - - - - - - - - - + + - - - - - - - - - + + - - - - - + - - - - - - - + - - - + - - - + + + + + + + + - - - - + + + + + - - - - - - - + - + + + + + - + + - - - - + + - - - - - - + + + + - - - - - + + - - - - + - - - - + - - - - + - + - - - - - - - + - - - - + - - - + - - - + + - - - - - + + + - - - - + + + - - - - + - - - - - - + - diff --git a/xbox-one/base.svg b/xbox-one/base.svg index d4de64a..c86d477 100644 --- a/xbox-one/base.svg +++ b/xbox-one/base.svg @@ -277,7 +277,7 @@ - @@ -396,7 +396,7 @@ - + diff --git a/xbox-one/bumper.svg b/xbox-one/bumper.svg index 8f87be0..74ce3e3 100644 --- a/xbox-one/bumper.svg +++ b/xbox-one/bumper.svg @@ -1,11 +1,22 @@ - - - + + - - - + - - - + + - + diff --git a/xbox-one/buttons.svg b/xbox-one/buttons.svg index 47a5670..4621d49 100644 --- a/xbox-one/buttons.svg +++ b/xbox-one/buttons.svg @@ -1,72 +1,100 @@ - - + - - + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/xbox-one/disconnected.svg b/xbox-one/disconnected.svg index 599217f..1b2e4de 100644 --- a/xbox-one/disconnected.svg +++ b/xbox-one/disconnected.svg @@ -1,32 +1,43 @@ - - - + + - - - - - - - - - - - - - - - - - + diff --git a/xbox-one/dpad.svg b/xbox-one/dpad.svg index ed4edee..8c41d82 100644 --- a/xbox-one/dpad.svg +++ b/xbox-one/dpad.svg @@ -1,18 +1,31 @@ - - - - - + + + + - - - - - - - - - + + - - - - - + - - - - - + + - - - - - - - - - + + - - - - - + - diff --git a/xbox-one/start-select.svg b/xbox-one/start-select.svg index 4f4b678..789b05f 100644 --- a/xbox-one/start-select.svg +++ b/xbox-one/start-select.svg @@ -1,24 +1,34 @@ - - - + + - - - - + + + + + - - - + - - - + + - diff --git a/xbox-one/stick.svg b/xbox-one/stick.svg index 545a9d4..13dae49 100644 --- a/xbox-one/stick.svg +++ b/xbox-one/stick.svg @@ -1,13 +1,25 @@ - - + - - - - - - - - + - - - - + - - - - + + - - - - - - - + - - - - + - diff --git a/xbox-one/template.css b/xbox-one/template.css index 42486b6..2ae44c8 100644 --- a/xbox-one/template.css +++ b/xbox-one/template.css @@ -1,53 +1,53 @@ -.xbox-one { +.gamepad { background-image: url(base.svg); height: 630px; width: 750px; } -.xbox-one.white { +.gamepad.white { background-image: url(base-white.svg); } -.xbox-one.disconnected { +.gamepad.disconnected { background-image: url(disconnected.svg); } -.xbox-one.disconnected div { +.gamepad.disconnected div { display: none; } -.xbox-one .triggers { +.gamepad .triggers { width: 446px; height: 121px; position: absolute; left: 152px; } -.xbox-one .trigger { +.gamepad .trigger { width: 88px; height: 121px; background: url(trigger.svg); opacity: 1; } -.xbox-one .trigger.left { +.gamepad .trigger.left { float: left; background-position: 0 0; } -.xbox-one .trigger.right { +.gamepad .trigger.right { float: right; transform: rotateY(180deg); } -.xbox-one .bumper { +.gamepad .bumper { width: 170px; height: 61px; background: url(bumper.svg); opacity: 0; } -.xbox-one .bumpers { +.gamepad .bumpers { position: absolute; width: 536px; height: 61px; @@ -55,41 +55,41 @@ top: 129px; } -.xbox-one .bumper[data-pressed="true"] { +.gamepad .bumper[data-pressed="true"] { opacity: 1; } -.xbox-one .bumper.left { +.gamepad .bumper.left { float: left; } -.xbox-one .bumper.right { +.gamepad .bumper.right { float: right; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } -.xbox-one .p0 { +.gamepad .p0 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } -.xbox-one .p1 { +.gamepad .p1 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } -.xbox-one .p2 { +.gamepad .p2 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } -.xbox-one .p3 { +.gamepad .p3 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } -.xbox-one .arrows { +.gamepad .arrows { position: absolute; width: 141px; height: 33px; @@ -97,27 +97,27 @@ left: 306px; } -.xbox-one .select, .xbox-one .start { +.gamepad .select, .gamepad .start { background: url(start-select.svg); width: 33px; height: 33px; opacity: 0; } -.xbox-one .select[data-pressed="true"], .xbox-one .start[data-pressed="true"] { +.gamepad .select[data-pressed="true"], .gamepad .start[data-pressed="true"] { opacity: 1; } -.xbox-one .select { +.gamepad .select { float: left; } -.xbox-one .start { +.gamepad .start { background-position: 33px 0px; float: right; } -.xbox-one .buttons { +.gamepad .buttons { position: absolute; width: 153px; height: 156px; @@ -125,43 +125,43 @@ left: 488px; } -.xbox-one .button { +.gamepad .button { position: absolute; background: url(buttons.svg); width: 48px; height: 48px; } -.xbox-one .button[data-pressed="true"] { +.gamepad .button[data-pressed="true"] { background-position-y: -50px; opacity: 1; } -.xbox-one .a { +.gamepad .a { background-position: 0 0; top: 114px; left: 55px; } -.xbox-one .b { +.gamepad .b { background-position: -49px 0; top: 64px; right: 0px; } -.xbox-one .x { +.gamepad .x { background-position: -98px 0; top: 64px; left: 3px; } -.xbox-one .y { +.gamepad .y { background-position: 48px 0; top: 13px; left: 54px; } -.xbox-one .sticks { +.gamepad .sticks { position: absolute; width: 371px; height: 196px; @@ -169,7 +169,7 @@ left: 144px; } -.xbox-one .stick { +.gamepad .stick { position: absolute; background: url(stick.svg); background-position: -85px 0; @@ -177,21 +177,21 @@ width: 83px; } -.xbox-one .stick[data-pressed="true"] { +.gamepad .stick[data-pressed="true"] { background-position: 0 0; } -.xbox-one .stick.left { +.gamepad .stick.left { top: 0; left: 0; } -.xbox-one .stick.right { +.gamepad .stick.right { top: 113px; left: 288px; } -.xbox-one .dpad { +.gamepad .dpad { position: absolute; width: 110px; height: 111px; @@ -199,17 +199,17 @@ left: 223px; } -.xbox-one .face { +.gamepad .face { background: url(dpad.svg); position: absolute; opacity: 0; } -.xbox-one .face[data-pressed="true"] { +.gamepad .face[data-pressed="true"] { opacity: 1; } -.xbox-one .face.up { +.gamepad .face.up { background-position: 34px 0; left: 38px; top: 0px; @@ -217,14 +217,14 @@ height: 56px; } -.xbox-one .face.down { +.gamepad .face.down { left: 38px; bottom: 0; width: 34px; height: 56px; } -.xbox-one .face.left { +.gamepad .face.left { background-position: 0 -93px; width: 55px; height: 35px; @@ -232,7 +232,7 @@ left: 0; } -.xbox-one .face.right { +.gamepad .face.right { background-position: 0 -57px; width: 55px; height: 35px; diff --git a/xbox-one/template.js b/xbox-one/template.js index 1cf20ca..f98dbbd 100644 --- a/xbox-one/template.js +++ b/xbox-one/template.js @@ -1,5 +1,4 @@ -function updateButton($button) -{ +function updateButton($button) { value = $button.attr('data-value'); if ($button.is('.trigger')) { @@ -10,8 +9,8 @@ function updateButton($button) } var axisX, axisY, axisZ; -function updateAxis($axis) -{ + +function updateAxis($axis) { axisX = $axis.attr('data-value-x'); axisY = $axis.attr('data-value-y'); axisZ = $axis.attr('data-value-z'); diff --git a/xbox-one/trigger.svg b/xbox-one/trigger.svg index 4460f59..5af3604 100644 --- a/xbox-one/trigger.svg +++ b/xbox-one/trigger.svg @@ -1,15 +1,26 @@ - - - - + + + - - +