Add prefs to Munch

[Hacks.git] / hacks / Munch / Munch.js

diff --git a/hacks/Munch/Munch.js b/hacks/Munch/Munch.js
index 2acc90a..aa858ce 100644 (file)
--- a/hacks/Munch/Munch.js
+++ b/hacks/Munch/Munch.js
@@ -3,38 +3,89 @@
 enyo.kind({
        name: 'Munch',
        kind: 'Hack',
-       pack: "center",
-       align: "center",
        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: [
-               {kind: enyo.Control, nodeTag: "canvas", name: "display", width: "512px", height: "512px"}
+               {name: "display", nodeTag: "canvas"}
        ],
 
        t: 0,
        timer: null,
 
        rendered: function() {
-               var node = this.$.display.hasNode();
-               node.width = 256;
-               node.height = 256;
-               this.ctx = node.getContext('2d');
-               this.ctx.fillStyle = 'black';
-               this.ctx.fillRect(0, 0, 255, 255);
-               this.ctx.fillStyle = 'rgba(0,0,0,0.075)';
-               this.ctx.strokeStyle = '#00FF00';
+               this.display = this.$.display.hasNode();
+               this.ctx = this.display.getContext('2d');
+
+               this.intermediate = document.createElement('canvas');
+               this.intermediate.width = 512;
+               this.intermediate.height = 512;
+               this.ictx = this.intermediate.getContext('2d');
+               this.ictx.fillStyle = 'black';
+               this.ictx.fillRect(0, 0, 255, 255);
+               this.ictx.fillStyle = 'rgba(0,0,0,0.075)';
+               this.ictx.strokeStyle = this.phosphorColor;
+
+               this.resize(window.innerWidth, window.innerHeight);
                this.draw();
        },
 
+       resize: function(w, 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() {
-               this.ctx.fillRect(0, 0, 256, 256);
-               this.ctx.beginPath();
-               for (var x = 0; x < 256; x++) {
+               this.ictx.fillRect(0, 0, 512, 512);
+               this.ictx.beginPath();
+               for (var x = 0; x < 512; x++) {
                        var y = x ^ this.t;
-                       this.ctx.moveTo(x, y);
-                       this.ctx.lineTo(x+1, y+1);
+                       this.ictx.moveTo(x, y);
+                       this.ictx.lineTo(x+1, y+1);
+               }
+               this.ictx.stroke();
+               this.t = (this.t + 1) % 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);
                }
-               this.ctx.stroke();
-               this.t = (this.t + 1) % 255;
        },
 
        start: function() {