Merge pull request #74 from code-dot-org/molly/neighborhood-buckets

Neighborhood: add show/hide buckets

Author: molly-moen

README.md

@@ -24,6 +24,31 @@ And spin up a development build of your new project:
 
     yarn build
 
+### Integrate with local Code Studio
+In this repo:
+
+```
+yarn link
+```
+
+In main repo's `apps/` directory:
+
+```
+yarn link @code-dot-org/maze
+```
+
+This will set up a symlink in main repo's apps/node_modules/ to point at your local changes.
+
+Run
+
+```
+yarn run build
+```
+
+in this repo, and then the main repo's `apps` build should pick the changes up next time it builds.
+
+If you are running `yarn start` for continuous builds in the main repo, it will pick up the changes once the build in this repo has completed.
+
 ### Publishing a new version
 
 In /maze: npm login with an authorized npm account. If necessary, create one under your own email, login with our shared dev account and add your new account to the org. After logging in, you may need to authorize your machine (follow the prompt given):

src/neighborhood.js

@@ -146,6 +146,22 @@ module.exports = class Neighborhood extends Subtype {
     this.drawer.updateItemImage(row, col, true);
   }
 
+  setBucketVisibility(showBuckets) {
+    if (this.drawer.getBucketVisibility() != showBuckets) {
+      this.drawer.setBucketVisibility(showBuckets);
+      this.redrawBucketTiles();
+    }
+  }
+
+  redrawBucketTiles() {
+    this.maze_.map.forEachCell((cell, row, col) => {
+      // if the cell has a value > 0, it has a bucket. Only update tiles with a bucket.
+      if (cell.getCurrentValue() > 0) {
+        this.drawer.updateItemImage(row, col, true);
+      }
+    });
+  }
+
   reset() {
     this.drawer.resetTiles();
   }

src/neighborhoodDrawer.js

@@ -199,6 +199,15 @@ module.exports = class NeighborhoodDrawer extends Drawer {
     this.squareSize = squareSize;
     this.neighborhood = neighborhood;
     this.skin_ = skin;
+    this.showBuckets = true;
+  }
+
+  setBucketVisibility(showBuckets) {
+    this.showBuckets = showBuckets;
+  }
+
+  getBucketVisibility() {
+    return this.showBuckets;
   }
 
   /**
@@ -223,8 +232,9 @@ module.exports = class NeighborhoodDrawer extends Drawer {
    */
   getAsset(prefix, row, col) {
     const cell = this.neighborhood.getCell(row, col);
-    // only cells with a value are handled by getAsset.
-    if (cell.getCurrentValue()) {
+    // If a cell has a value, it is a paint bucket. Return the paintCan asset
+    // if we currently are showing buckets.
+    if (cell.getCurrentValue() && this.showBuckets) {
       return this.skin_.paintCan;
     }
   }
@@ -254,6 +264,7 @@ module.exports = class NeighborhoodDrawer extends Drawer {
    * Calls resetTile for each tile in the grid, clearing all paint.
    */
   resetTiles() {
+    this.showBuckets = true;
     for (let row = 0; row < this.map_.ROWS; row++) {
       for (let col = 0; col < this.map_.COLS; col++) {
         this.resetTile(row, col);
@@ -495,8 +506,10 @@ module.exports = class NeighborhoodDrawer extends Drawer {
     // is a paint can square. Ensure it is shown/hidden appropriately
     // and with the correct value.
     if (cell.getOriginalValue() > 0) {
-      const newValue = cell.getCurrentValue() > 0 ? cell.getCurrentValue() : "";
-      // drawImage_ calls getAsset. If currentValue() is 0, getAsset will return
+      // The new value is the number of paint units to show on the screen. If we have > 0 units and we
+      // are showing buckets, return the value, otherwise return an empty string so we hide the bucket and value.
+      const newValue = cell.getCurrentValue() > 0 && this.showBuckets ? cell.getCurrentValue() : "";
+      // drawImage_ calls getAsset. If currentValue() is 0 or we want to hide buckets, getAsset will return
       // undefined and the paint can will be hidden. Otherwise we will get the paint can image.
       super.drawImage_("", row, col, this.squareSize);
       super.updateOrCreateText_(