From 9642bd199d4943caa0742072f3294f893f0e96e4 Mon Sep 17 00:00:00 2001
From: Philip Rosedale <philip@highfidelity.io>
Date: Tue, 31 Mar 2015 22:12:06 -0700
Subject: [PATCH] Buttons at bottom

---
 examples/controllers/hydra/gun.js | 57 +++++++++++++++++--------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/examples/controllers/hydra/gun.js b/examples/controllers/hydra/gun.js
index 9a00e181f6..2fdf26bfeb 100644
--- a/examples/controllers/hydra/gun.js
+++ b/examples/controllers/hydra/gun.js
@@ -90,44 +90,49 @@ var score = 0;
 var bulletID = false;
 var targetID = false;
 
-//  Create a reticle image in center of screen 
+//  Create overlay buttons and reticle 
+
+var BUTTON_SIZE = 32;
+var PADDING = 3;
+var NUM_BUTTONS = 3;
+
 var screenSize = Controller.getViewportDimensions();
+var startX = screenSize.x / 2 - (NUM_BUTTONS * (BUTTON_SIZE + PADDING)) / 2;
 var reticle = Overlays.addOverlay("image", {
-                    x: screenSize.x / 2 - 16,
-                    y: screenSize.y / 2 - 16,
-                    width: 32,
-                    height: 32,
+                    x: screenSize.x / 2 - (BUTTON_SIZE / 2),
+                    y: screenSize.y / 2 - (BUTTON_SIZE / 2),
+                    width: BUTTON_SIZE,
+                    height: BUTTON_SIZE,
                     imageURL: HIFI_PUBLIC_BUCKET + "images/billiardsReticle.png",
-                    color: { red: 255, green: 255, blue: 255},
                     alpha: 1
                 });
 
 var offButton = Overlays.addOverlay("image", {
-                    x: screenSize.x - 48,
-                    y: 96,
-                    width: 32,
-                    height: 32,
-                    imageURL: HIFI_PUBLIC_BUCKET + "images/close.png",
-                    color: { red: 255, green: 255, blue: 255},
+                    x: startX,
+                    y: screenSize.y - (BUTTON_SIZE + PADDING),
+                    width: BUTTON_SIZE,
+                    height: BUTTON_SIZE,
+                    imageURL: HIFI_PUBLIC_BUCKET + "images/close.png",  
+                    alpha: 1 
+                });
+
+startX += BUTTON_SIZE + PADDING;
+var platformButton = Overlays.addOverlay("image", {
+                    x: startX,
+                    y: screenSize.y - (BUTTON_SIZE + PADDING),
+                    width: BUTTON_SIZE,
+                    height: BUTTON_SIZE,
+                    imageURL: HIFI_PUBLIC_BUCKET + "images/city.png",
                     alpha: 1
                 });
 
-var platformButton = Overlays.addOverlay("image", {
-                    x: screenSize.x - 48,
-                    y: 130,
-                    width: 32,
-                    height: 32,
-                    imageURL: HIFI_PUBLIC_BUCKET + "images/city.png",
-                    color: { red: 255, green: 255, blue: 255},
-                    alpha: 1
-                });
+startX += BUTTON_SIZE + PADDING;
 var gridButton = Overlays.addOverlay("image", {
-                    x: screenSize.x - 48,
-                    y: 164,
-                    width: 32,
-                    height: 32,
+                    x: startX,
+                    y: screenSize.y - (BUTTON_SIZE + PADDING),
+                    width: BUTTON_SIZE,
+                    height: BUTTON_SIZE,
                     imageURL: HIFI_PUBLIC_BUCKET + "images/blocks.png",
-                    color: { red: 255, green: 255, blue: 255},
                     alpha: 1
                 });