myBalance new layout changes

examples/myBalance.js

@@ -20,44 +20,43 @@ var AccountManager = AccountManager || {};
     "use strict";
     var iconUrl = 'http://localhost/~stojce/',
         overlayWidth = 150,
-        overlayHeight = 150,
+        overlayHeight = 50,
-        redColor = {
+        overlayTopOffset = 15,
-            red: 255,
+        overlayRightOffset = 100,
+        textRightOffset = 75,
+        downColor = {
+            red: 0,
             green: 0,
-            blue: 0
+            blue: 255
         },
-        greenColor = {
+        upColor = {
             red: 0,
             green: 255,
             blue: 0
         },
-        whiteColor = {
+        normalColor = {
-            red: 255,
+            red: 204,
-            green: 255,
+            green: 204,
-            blue: 255
+            blue: 204
         },
         balance = 0,
         voxelTool = Overlays.addOverlay("image", {
             x: 0,
-            y: 0,
+            y: overlayTopOffset,
-            width: 50,
+            width: 92,
-            height: 50,
+            height: 32,
-            subImage: {
-                x: 0,
-                y: 50,
-                width: 50,
-                height: 50
-            },
             imageURL: iconUrl + "wallet.svg",
             alpha: 1
         }),
         textOverlay = Overlays.addOverlay("text", {
             x: 0,
-            y: 0,
+            y: overlayTopOffset,
-            width: 55,
+            topMargin: 9,
-            height: 13,
+            text: balance.toFixed(4),
-            topMargin: 5,
+            font: {
-            text: balance,
+                size: 15
+            },
+            color: normalColor,
             alpha: 0
         });
 
@@ -69,11 +68,11 @@ var AccountManager = AccountManager || {};
     function update(deltaTime) {
         var xPos = Controller.getViewportDimensions().x;
         Overlays.editOverlay(voxelTool, {
-            x: xPos - 150
+            x: xPos - overlayRightOffset
         });
 
         Overlays.editOverlay(textOverlay, {
-            x: xPos - 100
+            x: xPos - textRightOffset
         });
     }
 
@@ -82,18 +81,20 @@ var AccountManager = AccountManager || {};
             return;
         }
 
-        var change = balance - newBalance,
+        var change = newBalance - balance,
-            textColor = change > 0 ? redColor : greenColor;
+            textColor = change < 0 ? downColor : upColor,
+            integers = balance.toFixed(0).length,
+            decimals = integers > 4 ? 0 : integers - 4;
 
         balance = newBalance;
         Overlays.editOverlay(textOverlay, {
-            text: balance,
+            text: balance.toFixed(decimals),
             color: textColor
         });
 
         Script.setTimeout(function () {
             Overlays.editOverlay(textOverlay, {
-                color: whiteColor
+                color: normalColor
             });
         }, 1000);
     }