Commits

Cat's Eye Technologies committed 92b5178

Update yoob.Playfield, use yoob.PlayfieldHTMLView to depict.

  • Participants
  • Parent commits cb99464

Comments (0)

Files changed (4)

File demo/circute.html

 </body>
 <script src="yoob/controller.js"></script>
 <script src="yoob/playfield.js"></script>
+<script src="yoob/playfield-html-view.js"></script>
 <script src="../script/circute.js"></script>
 <script>
   var output = document.getElementById('output');
   var c = new yoob.Controller();
   var pf;
-  
+
   c.load = function(text) {
       pf = new yoob.Playfield();
       pf.setDefault('Space');
       pf.load(0, 0, text, loadMapper);
-      output.innerHTML = pf.dump(dumpMapper);
+      this.view = new yoob.PlayfieldHTMLView().init(pf, output);
+      this.view.render = function(state) {
+          return dumpMapper(state);
+      };
+      this.view.draw();
   };
 
   c.step = function() {
       newPf.setDefault('Space');
       evolve_playfield(pf, newPf);
       pf = newPf;
-      output.innerHTML = pf.dump(dumpMapper);
+      this.view.pf = pf;
+      this.view.draw();
   };
 
   c.connect({

File demo/yoob/controller.js

 /*
- * This file is part of yoob.js version 0.3-PRE
+ * This file is part of yoob.js version 0.3
+ * Available from https://github.com/catseye/yoob.js/
  * This file is in the public domain.  See http://unlicense.org/ for details.
  */
 if (window.yoob === undefined) yoob = {};

File demo/yoob/playfield-html-view.js

+/*
+ * This file is part of yoob.js version 0.4
+ * Available from https://github.com/catseye/yoob.js/
+ * This file is in the public domain.  See http://unlicense.org/ for details.
+ */
+if (window.yoob === undefined) yoob = {};
+
+/*
+ * A view (in the MVC sense) for depicting a yoob.Playfield (-compatible)
+ * object onto any HTML element that supports innerHTML.
+ *
+ * TODO: *** THIS DOES NOT WORK *** please do not use it yet
+ */
+yoob.PlayfieldHTMLView = function() {
+    this.pf = undefined;
+    this.element = undefined;
+
+    this.init = function(pf, element) {
+        this.pf = pf;
+        this.element = element;
+        return this;
+    };
+
+    /*
+     * Override these if you want to draw some portion of the
+     * playfield which is not the whole playfield.
+     */
+    this.getLowerX = function() {
+        return this.pf.getMinX();
+    };
+    this.getUpperX = function() {
+        return this.pf.getMaxX();
+    };
+    this.getLowerY = function() {
+        return this.pf.getMinY();
+    };
+    this.getUpperY = function() {
+        return this.pf.getMaxY();
+    };
+
+    /*
+     * Override to convert Playfield values to HTML.
+     */
+    this.render = function(value) {
+        return value;
+    };
+
+    this.draw = function() {
+        var text = "";
+        for (var y = this.getLowerY(); y <= this.getUpperY(); y++) {
+            var row = "";
+            for (var x = this.getLowerX(); x <= this.getUpperX(); x++) {
+                row += this.render(this.pf.get(x, y));
+            }
+            text += row + "\n";
+        }
+        this.element.innerHTML = text;
+    };
+
+};

File demo/yoob/playfield.js

 /*
- * This file is part of yoob.js version 0.2
+ * This file is part of yoob.js version 0.4
+ * Available from https://github.com/catseye/yoob.js/
  * This file is in the public domain.  See http://unlicense.org/ for details.
  */
 if (window.yoob === undefined) yoob = {};
      */
     this.setDefault = function(v) {
         this._default = v;
+        return this;
     };
 
     /*
     };
 
     /*
+     * Scroll a rectangular subrectangle of this Playfield, up.
+     * TODO: support other directions.
+     */
+    this.scrollRectangleY = function(dy, minX, minY, maxX, maxY) {
+        if (dy < 1) {
+            for (var y = minY; y <= (maxY + dy); y++) {
+                for (var x = minX; x <= maxX; x++) {
+                    this.put(x, y, this.get(x, y - dy));
+                }
+            }
+        } else { alert("scrollRectangleY(" + dy + ") notImplemented"); }
+    };
+
+    this.clearRectangle = function(minX, minY, maxX, maxY) {
+        // Could also do this with a foreach that checks
+        // each position.  Would be faster on sparser playfields.
+        for (var y = minY; y <= maxY; y++) {
+            for (var x = minX; x <= maxX; x++) {
+                this.put(x, y, undefined);
+            }
+        }
+    };
+
+    /*
      * Load a string into this Playfield.
      * The string may be multiline, with newline (ASCII 10)
      * characters delimiting lines.  ASCII 13 is ignored.
     };
 
     /*
-     * Draws elements of the Playfield in a drawing context.
-     * x and y are canvas coordinates, and width and height
-     * are canvas units of measure.
-     * The default implementation just renders them as text,
-     * in black.
-     * Override if you wish to draw them differently.
+     * Accessors for the minimum (resp. maximum) x (resp. y) values of
+     * occupied (non-default-valued) cells in this Playfield.  If there are
+     * no cells in this Playfield, these will refturn undefined.  Note that
+     * these are not guaranteed to be tight bounds; if values in cells
+     * are deleted, these bounds may still be considered to be outside them.
      */
-    this.drawElement = function(ctx, x, y, cellWidth, cellHeight, elem) {
-        ctx.fillStyle = "black";
-        ctx.fillText(elem.toString(), x, y);
+    this.getMinX = function() {
+        return this.minX;
+    };
+    this.getMaxX = function() {
+        return this.maxX;
+    };
+    this.getMinY = function() {
+        return this.minY;
+    };
+    this.getMaxY = function() {
+        return this.maxY;
     };
 
     /*
-     * Draws the Playfield in a drawing context.
-     * cellWidth and cellHeight are canvas units of measure for each cell.
+     * Returns the number of occupied cells in the x direction.
      */
-    this.drawContext = function(ctx, offsetX, offsetY, cellWidth, cellHeight) {
-        var me = this;
-        this.foreach(function (x, y, elem) {
-            me.drawElement(ctx, offsetX + x * cellWidth, offsetY + y * cellHeight,
-                           cellWidth, cellHeight, elem);
-        });
-    };
-
     this.getExtentX = function() {
         if (this.maxX === undefined || this.minX === undefined) {
             return 0;
         }
     };
 
+    /*
+     * Returns the number of occupied cells in the y direction.
+     */
     this.getExtentY = function() {
         if (this.maxY === undefined || this.minY === undefined) {
             return 0;
             return this.maxY - this.minY + 1;
         }
     };
-
-    /*
-     * Draws the Playfield, and a set of Cursors, on a canvas element.
-     * Resizes the canvas to the needed dimensions.
-     * cellWidth and cellHeight are canvas units of measure for each cell.
-     */
-    this.drawCanvas = function(canvas, cellWidth, cellHeight, cursors) {
-        var ctx = canvas.getContext('2d');
-      
-        var width = this.getExtentX();
-        var height = this.getExtentY();
-
-        if (cellWidth === undefined) {
-            ctx.textBaseline = "top";
-            ctx.font = cellHeight + "px monospace";
-            cellWidth = ctx.measureText("@").width;
-        }
-
-        canvas.width = width * cellWidth;
-        canvas.height = height * cellHeight;
-
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        ctx.textBaseline = "top";
-        ctx.font = cellHeight + "px monospace";
-
-        var offsetX = this.minX * cellWidth * -1;
-        var offsetY = this.minY * cellHeight * -1;
-
-        for (var i = 0; i < cursors.length; i++) {
-            cursors[i].drawContext(
-              ctx,
-              cursors[i].x * cellWidth, cursors[i].y * cellHeight,
-              cellWidth, cellHeight
-            );
-        }
-
-        this.drawContext(ctx, offsetX, offsetY, cellWidth, cellHeight);
-    };
-
 };