From 81f8bd8a957e672890e61858f456afe1153b3d16 Mon Sep 17 00:00:00 2001
From: e7d <michael@e7d.io>
Date: Tue, 7 May 2019 14:58:39 +0200
Subject: [PATCH] add an option to change background color

---
 index.html    |  4 ++++
 js/gamepad.js | 27 ++++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ad194a6..5fea09c 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,10 @@
 					<th><kbd>0</kbd></th>
 					<td>Reset gamepad zoom</td>
 				</tr>
+				<tr>
+					<th><kbd>B</kbd></th>
+					<td>Change background color</td>
+				</tr>
 				<tr>
 					<th><kbd>C</kbd></th>
 					<td>Change active gamepad color</td>
diff --git a/js/gamepad.js b/js/gamepad.js
index 4e31269..4c88aab 100644
--- a/js/gamepad.js
+++ b/js/gamepad.js
@@ -11,11 +11,15 @@ class Gamepad {
         this.gamepadDemo = new GamepadDemo(this);
 
         // cached DOM references
+        this.$body = $('body');
         this.$gamepad = $('.gamepad');
         this.$nogamepad = $('.no-gamepad');
         this.$debug = $('.debug');
         this.$help = $('.help');
 
+        this.backgroundColors = ['transparent', 'dimgrey', 'black', 'green', 'magenta'];
+        this.backgroundColorIndex = 0;
+
         // gamepad collection default values
         this.gamepads = {};
         this.gamepadIdentifiers = {
@@ -150,6 +154,9 @@ class Gamepad {
             case "Escape":
                 this.removeGamepad(true);
                 break;
+            case "KeyB":
+                this.changeBackgroundColor();
+                break;
             case "KeyC":
                 this.changeGamepadColor();
                 break;
@@ -436,6 +443,25 @@ class Gamepad {
         }
     }
 
+    /**
+     * Changes the background color
+     *
+     * @param {any} backgroundColor
+     */
+    changeBackgroundColor(backgroundColor) {
+        if ('undefined' === typeof gamepadColor) {
+            this.backgroundColorIndex++;
+            if (this.backgroundColorIndex > this.backgroundColors.length - 1) {
+                this.backgroundColorIndex = 0;
+            }
+        } else {
+            this.backgroundColorIndex = backgroundColor;
+        }
+
+
+        this.$body.css('background', this.backgroundColors[this.backgroundColorIndex]);
+    }
+
     /**
      * Changes the active gamepad color
      *
@@ -447,7 +473,6 @@ class Gamepad {
             return;
         }
 
-        const activeGamepad = this.getActiveGamepad();
         if ('undefined' === typeof gamepadColor) {
             // no color was specified, load the next one in list
             this.activeGamepadColorIndex++;