Add prefs to Munch

diff --git a/hacks/Munch/Munch.js b/hacks/Munch/Munch.js
index 333237b..aa858ce 100644 (file)
--- a/hacks/Munch/Munch.js
+++ b/hacks/Munch/Munch.js
@@ -4,6 +4,26 @@ enyo.kind({
        name: 'Munch',
        kind: 'Hack',
        style: "background-color: black",
+       align: "center",
+       pack: "center",
+       preferences: [
+               {name: "phosphorColor", label: "Phosphor Color", kind: "ListSelector", items: [
+                       {caption: "green", value: '#00FF00'},
+                       {caption: "blue", value: '#3030FF'},
+                       {caption: "red", value: '#FF2020'},
+                       {caption: "magenta", value: '#FF20FF'},
+                       {caption: "cyan", value: '#00FFFF'},
+                       {caption: "yellow", value: '#FFFF00'},
+                       {caption: "amber", value: '#9F9F00'}
+               ]},
+               {name: "displayStyle", label: "Style", kind: "ListSelector", items: [
+                       {caption: "tiled", value: 0},
+                       {caption: "centered", value: 1}
+               ]}
+       ],
+       phosphorColor: '#00FF00',
+       displayStyle: 0,
+
        components: [
                {name: "display", nodeTag: "canvas"}
        ],
@@ -22,15 +42,28 @@ enyo.kind({
                this.ictx.fillStyle = 'black';
                this.ictx.fillRect(0, 0, 255, 255);
                this.ictx.fillStyle = 'rgba(0,0,0,0.075)';
-               this.ictx.strokeStyle = '#00FF00';
+               this.ictx.strokeStyle = this.phosphorColor;
 
                this.resize(window.innerWidth, window.innerHeight);
                this.draw();
        },
 
        resize: function(w, h) {
-               this.display.width = this.w = w;
-               this.display.height = this.h = h;
+               if (this.displayStyle == 0) {
+                       this.display.width = this.w = w;
+                       this.display.height = this.h = h;
+               }
+       },
+
+       preferencesChanged: function() {
+               this.ictx.strokeStyle = this.phosphorColor;
+               if (this.displayStyle == 0) {
+                       this.display.width = this.w;
+                       this.display.height = this.h;
+               } else {
+                       this.display.width = 512;
+                       this.display.height = 512;
+               }
        },
 
        draw: function() {
@@ -44,10 +77,14 @@ enyo.kind({
                this.ictx.stroke();
                this.t = (this.t + 1) % 512;
 
-               for (var x = 0; x < this.w; x += 512) {
-                       for (var y = 0; y < this.h; y += 512) {
-                               this.ctx.drawImage(this.intermediate, 0, 0, 512, 512, x, y, 512, 512);
+               if (this.displayStyle == 0) {
+                       for (var x = 0; x < this.w; x += 512) {
+                               for (var y = 0; y < this.h; y += 512) {
+                                       this.ctx.drawImage(this.intermediate, 0, 0, 512, 512, x, y, 512, 512);
+                               }
                        }
+               } else {
+                       this.ctx.drawImage(this.intermediate, 0, 0);
                }
        },