Making paint render below assets

src/neighborhood.js

@@ -1,7 +1,7 @@
-import Subtype from './subtype';
-import NeighborhoodCell from './neighborhoodCell';
-import NeighborhoodDrawer from './neighborhoodDrawer';
-import { Direction } from './tiles';
+import Subtype from "./subtype";
+import NeighborhoodCell from "./neighborhoodCell";
+import NeighborhoodDrawer from "./neighborhoodDrawer";
+import { Direction } from "./tiles";
 
 module.exports = class Neighborhood extends Subtype {
   constructor(maze, config = {}) {
@@ -10,6 +10,7 @@ module.exports = class Neighborhood extends Subtype {
     this.sheetRows = this.skin_.sheetRows;
 
     this.squareSize = this.skin_.squareSize;
+    this.assetList = [];
   }
 
   /**
@@ -18,7 +19,7 @@ module.exports = class Neighborhood extends Subtype {
   isNeighborhood() {
     return true;
   }
-  
+
   /**
    * @override
    */
@@ -46,19 +47,23 @@ module.exports = class Neighborhood extends Subtype {
 
       const asset = this.drawer.getBackgroundTileInfo(row, col);
       if (asset) {
+        // add asset id to the assetList
+        this.assetList.push("tileElement" + `${tileId}-asset`);
         // add assset on top of blank tile if it exists
         // asset is in format {name: 'sample name', sheet: x, row: y, column: z}
         const assetHref = this.skin_.assetUrl(asset.sheet);
-        const [sheetWidth, sheetHeight] = this.getDimensionsForSheet(asset.sheet);
+        const [sheetWidth, sheetHeight] = this.getDimensionsForSheet(
+          asset.sheet
+        );
         this.drawer.drawTileHelper(
-          svg, 
-          [asset.column, asset.row], 
-          row, 
-          col, 
-          `${tileId}-asset`, 
+          svg,
+          [asset.column, asset.row],
+          row,
+          col,
+          `${tileId}-asset`,
           assetHref,
-          sheetWidth, 
-          sheetHeight, 
+          sheetWidth,
+          sheetHeight,
           this.squareSize
         );
       }
@@ -67,38 +72,46 @@ module.exports = class Neighborhood extends Subtype {
     });
   }
 
-  /** 
-   * @override 
-  **/
+  /**
+   * @override
+   **/
   createDrawer(svg) {
-    this.drawer = new NeighborhoodDrawer(this.maze_.map, this.skin_, svg, this.squareSize, this);
+    this.drawer = new NeighborhoodDrawer(
+      this.maze_.map,
+      this.skin_,
+      svg,
+      this.squareSize,
+      this
+    );
   }
 
   /**
    * Paint the current location of the pegman with id pegmanId.
    * @param {String} pegmanId
-   * @param {String} color Color to paint current location. 
+   * @param {String} color Color to paint current location.
    *                       Must be hex code or html color.
-  **/ 
+   **/
   addPaint(pegmanId, color) {
     const col = this.maze_.getPegmanX(pegmanId);
     const row = this.maze_.getPegmanY(pegmanId);
 
     const cell = this.getCell(row, col);
     cell.setColor(color);
     this.drawer.updateItemImage(row, col, true);
+    this.drawer.drawAssets();
   }
 
   /**
    * Remove paint from the location of the pegman with id pegmanId.
    * @param {String} pegmanId
-  **/ 
- removePaint(pegmanId) {
+   **/
+  removePaint(pegmanId) {
     const col = this.maze_.getPegmanX(pegmanId);
     const row = this.maze_.getPegmanY(pegmanId);
 
     this.drawer.resetTile(row, col);
     this.drawer.updateItemImage(row, col, true);
+    this.drawer.drawAssets();
   }
 
   /**
@@ -146,4 +159,9 @@ module.exports = class Neighborhood extends Subtype {
   getDimensionsForSheet(sheet) {
     return [10 * this.squareSize, this.sheetRows[sheet] * this.squareSize];
   }
-}
+
+  // Retrieve the asset list
+  getAssetList() {
+    return this.assetList;
+  }
+};