@code-dot-org/maze - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

package.json

 {
   "name": "@code-dot-org/maze",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "standalone project for the Maze app type",
@@ -5,0 +5,0 @@ "main": "dist/main.js",

src/drawer.js

@@ -54,4 +54,4 @@ /**
    */
-  updateItemImage(row, col, running) {
-    return this.drawImage_('', row, col);
+  updateItemImage(row, col, running, squareSize=SQUARE_SIZE) {
+    return this.drawImage_('', row, col, squareSize);
   }
@@ -66,3 +66,3 @@
    */
-  drawImage_(prefix, row, col) {
+  drawImage_(prefix, row, col, squareSize=SQUARE_SIZE) {
     let img = this.svg_.querySelector('#' + Drawer.cellId(prefix, row, col));
@@ -80,3 +80,3 @@ let href = this.getAsset(prefix, row, col);
     // have one
-    img = this.getOrCreateImage_(prefix, row, col);
+    img = this.getOrCreateImage_(prefix, row, col, true, squareSize);
     if (img) {
@@ -99,3 +99,3 @@ img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', href || '');
    */
-  getOrCreateImage_(prefix, row, col, createClipPath=true) {
+  getOrCreateImage_(prefix, row, col, createClipPath=true, squareSize=SQUARE_SIZE) {
     let href = this.getAsset(prefix, row, col);
@@ -125,6 +125,6 @@
       let rect = document.createElementNS(SVG_NS, 'rect');
-      rect.setAttribute('x', col * SQUARE_SIZE);
-      rect.setAttribute('y', row * SQUARE_SIZE);
-      rect.setAttribute('width', SQUARE_SIZE);
-      rect.setAttribute('height', SQUARE_SIZE);
+      rect.setAttribute('x', col * squareSize);
+      rect.setAttribute('y', row * squareSize);
+      rect.setAttribute('width', squareSize);
+      rect.setAttribute('height', squareSize);
       clip.appendChild(rect);
@@ -137,6 +137,6 @@ this.svg_.insertBefore(clip, pegmanElement);
     img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', href);
-    img.setAttribute('height', SQUARE_SIZE);
-    img.setAttribute('width', SQUARE_SIZE);
-    img.setAttribute('x', SQUARE_SIZE * col);
-    img.setAttribute('y', SQUARE_SIZE * row);
+    img.setAttribute('height', squareSize);
+    img.setAttribute('width', squareSize);
+    img.setAttribute('x', squareSize * col);
+    img.setAttribute('y', squareSize * row);
     img.setAttribute('id', imgId);
@@ -157,4 +157,17 @@ if (createClipPath) {
    * @param {string} text
+   * @param {number} squareSize (optional): size of tile
+   * @param {number} hPadding (optional): horizontal padding from bottom left corner
+   * @param {number} vPadding (optional): vertical padding from bottom left corner
+   * @param {string} className (optional): css class name to apply to the text element
    */
-  updateOrCreateText_(prefix, row, col, text) {
+  updateOrCreateText_(
+    prefix,
+    row,
+    col,
+    text, 
+    squareSize=SQUARE_SIZE, 
+    hPadding=2,
+    vPadding=2,
+    className='karel-counter-text'
+  ) {
     const pegmanElement = this.svg_.getElementsByClassName('pegman-location')[0];
@@ -165,10 +178,8 @@ let textElement = this.svg_.querySelector('#' + Drawer.cellId(prefix, row, col));
       // Create text.
-      const hPadding = 2;
-      const vPadding = 2;
       textElement = document.createElementNS(SVG_NS, 'text');
-      textElement.setAttribute('class', 'karel-counter-text');
+      textElement.setAttribute('class', className);
 
       // Position text just inside the bottom right corner.
-      textElement.setAttribute('x', (col + 1) * SQUARE_SIZE - hPadding);
-      textElement.setAttribute('y', (row + 1) * SQUARE_SIZE - vPadding);
+      textElement.setAttribute('x', (col + 1) * squareSize - hPadding);
+      textElement.setAttribute('y', (row + 1) * squareSize - vPadding);
       textElement.setAttribute('id', Drawer.cellId(prefix, row, col));
@@ -175,0 +186,0 @@ textElement.appendChild(document.createTextNode(''));

src/neighborhood.js

@@ -43,6 +43,6 @@ import Subtype from './subtype';
     this.maze_.map.forEachCell((cell, row, col) => {
-      const asset = this.drawer.getAsset('', row, col);
-
       // draw blank tile
       this.drawTile(svg, [0, 0], row, col, tileId);
+
+      const asset = this.drawer.getBackgroundTileInfo(row, col);
       if (asset) {
@@ -58,3 +58,3 @@ // add assset on top of blank tile if it exists
           col, 
-          tileId, 
+          `${tileId}-asset`, 
           assetHref,
@@ -66,2 +66,3 @@ sheetWidth,
       }
+      this.drawer.updateItemImage(row, col, false);
       tileId++;
@@ -108,2 +109,11 @@ });
 
+  takePaint(pegmanId) {
+    const col = this.maze_.getPegmanX(pegmanId);
+    const row = this.maze_.getPegmanY(pegmanId);
+
+    const cell = this.getCell(row, col);
+    cell.setCurrentValue(cell.getCurrentValue() - 1);
+    this.drawer.updateItemImage(row, col, true);
+  }
+
   // Sprite map maps asset ids to sprites within a spritesheet.
@@ -110,0 +120,0 @@ getSpriteMap() {

src/neighborhoodCell.js

@@ -5,13 +5,8 @@ const Cell = require('./cell');
   // value is paint count
-  constructor(tileType, value, assetId, hasBucket, color) {
+  constructor(tileType, value, assetId, color) {
     super(tileType, value);
     this.assetId = assetId;
-    this.hasBucket = hasBucket || value > 0;
     this.color = color;
   }
 
-  hasBucket() {
-    return this.hasBucket;
-  }
-
   getColor() {
@@ -38,3 +33,2 @@ return this.color;
       assetId: this.assetId,
-      hasBucket: this.hasBucket,
       color: this.color
@@ -52,3 +46,2 @@ };
       serialized.assetId,
-      serialized.hasBucket,
       serialized.color
@@ -55,0 +48,0 @@ );

src/neighborhoodDrawer.js

@@ -1,2 +0,2 @@
-const { SQUARE_SIZE, SVG_NS } = require("./drawer");
+const { SVG_NS } = require("./drawer");
 const Drawer = require('./drawer')
@@ -65,11 +65,2 @@ const tiles = require('./tiles');
 
-// For creating the groups for each grid location
-function makeGrid(row, col, svg) {
-  let id = "g" + row + "." + col;
-  return svgElement("g", {
-    transform: `translate(${col * SQUARE_SIZE + SQUARE_SIZE}, 
-      ${row * SQUARE_SIZE + SQUARE_SIZE})`
-  }, svg, id);
-}
-
 /**
@@ -85,6 +76,7 @@ * This drawer hosts all paint glomming logic.
 
-  constructor(map, asset, svg, squareSize, neighborhood) {
-    super(map, asset, svg);
+  constructor(map, skin, svg, squareSize, neighborhood) {
+    super(map, '', svg);
     this.squareSize = squareSize;
-    this.neighborhood = neighborhood
+    this.neighborhood = neighborhood;
+    this.skin_ = skin;
   }
@@ -112,9 +104,25 @@
     const cell = this.neighborhood.getCell(row, col);
-    // If the tile has an asset id, return the sprite asset. Ignore the asset id
-    // if this is a start tile, as start tiles will handle placing the pegman separately.
-    if (cell.getAssetId() != null && cell.getTile() !== tiles.SquareType.START) {
-      return this.neighborhood.getSpriteMap()[cell.getAssetId()];
+    // only cells with a value are handled by getAsset.
+    if (cell.getCurrentValue()) {
+      return this.skin_.paintCan;
     }
   }
 
+  getBackgroundTileInfo(row, col) {
+    const cell = this.neighborhood.getCell(row, col);
+    // If the tile has an asset id and it is > 0 (0 is a blank tile and will always be added),
+    // return the sprite asset. 
+    // Ignore the asset id if this is a start tile or the cell has an original value. 
+    // Start tiles will handle placing the pegman separately,
+    // and tiles with a value are paint cans, which are handled as images instead of background tiles.
+    if (cell.getAssetId() != null && cell.getAssetId() > 0 &&
+        cell.getTile() !== tiles.SquareType.START && !cell.getOriginalValue()) {
+      return this.getSpriteData(cell);
+    }
+  }
+
+  getSpriteData(cell) {
+    return this.neighborhood.getSpriteMap()[cell.getAssetId()];
+  }
+
   resetTiles() {}
@@ -132,4 +140,4 @@
   pathCalculator(subjectCell, adjacent1, adjacent2, diagonal, transform, grid, id) {
-    let pie = quarterCircle(SQUARE_SIZE);
-    let cutOut = cutout(SQUARE_SIZE);
+    let pie = quarterCircle(this.squareSize);
+    let cutOut = cutout(this.squareSize);
     let tag = "path";
@@ -163,2 +171,10 @@
 
+  makeGrid(row, col, svg) {
+    let id = "g" + row + "." + col;
+    return svgElement("g", {
+      transform: `translate(${col * this.squareSize + this.squareSize}, 
+        ${row * this.squareSize + this.squareSize})`
+    }, svg, id);
+  }
+
   /**
@@ -189,7 +205,23 @@ * @override
    * @override
-   * This method is used to display the paint, so has to reprocess the entire grid
-   * to get the paint glomming correct
+   * This method is used to display the paint and paint buckets.
+   * It has to reprocess the entire grid to get the paint glomming correct, but
+   * it only updates the bucket at the specified itemRow and itemCol if necessary. 
+   * @param {number} itemRow: row of update
+   * @param {number} itemCol: column of update
+   * @param {boolean} running: if the maze is currently running (not used here, but part of signature of super)
    */
-  updateItemImage(r, co, running) {
+  updateItemImage(itemRow, itemCol, running) {
+    let cell = this.map_.getCell(itemRow, itemCol);
 
+    // if the cell value has ever been greater than 0, this has been or 
+    // 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
+      // undefined and the paint can will be hidden. Otherwise we will get the paint can image.
+      super.drawImage_('', itemRow, itemCol, this.squareSize);
+      super.updateOrCreateText_('counter', itemRow, itemCol, newValue, this.squareSize, 1, 1, 'karel-counter-text paint');
+    }
+
     // Because this processes a grid of cells at a time, we start at -1 to allow for
@@ -218,3 +250,3 @@ // a 'padding' row and column with no color.
           // Create grid block group
-          let grid = makeGrid(row, col, this.svg_);
+          let grid = this.makeGrid(row, col, this.svg_);
           let id0 = row + "." + col + "." + ROTATE180;
@@ -221,0 +253,0 @@ let id1 = row + "." + col + "." + ROTATENEG90;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

551371

increased by0.62%

Lines of code

5481

increased by0.77%

No dependency changes