Tile and grid abstraction
Your question


  Does the design of the grid system is compatible with the requirement so far?


Well, maybe I don't understand how setting characters (be them Unicode if necessary, as your example shows) on each tile relates to dividing an image into squares but it seems like you would want to allow the user to upload or choose an image (perhaps from a list), which might likely be a binary file. Then you would need to do some graphical analysis of the image and divide up the area of the image (perhaps using the dimensions).

Feedback on code

Design

It appears that when a Grid object is created, it creates cells as plain objects that have an x, y and tile property. Then when the setTile() method is called, it re-assigns those cells, but the only thing that really changes is the tile, so the calculations of x and y seem unnecessary. Additionally, the tile object doesn't need to be recreated - the shape property could be simply re-assigned - perhaps via a setter method, but that property is public so it could be modified outside the class unless it is made private (though that is only experimental1.

forEach with push

The render() method of the Grid uses foreach with push:


let output = [];
this.cells.forEach(row =&gt; {
  output.push(this.renderRow(row));
});



That is essentially the map method re-implemented... Why not use that method?

const output = this.cells.map(row =&gt; this.renderRow(row));


Notice that const is used because that value is never re-assigned. This can even be used with the forEach, since calling push() doesn't re-assign the value.

The same principle applies for the renderRow() method.

render method

This method does not return any values, it merely logs output to the console. However, the method is called inside a call to console.log(), which results in undefined being output to the console. Maybe that is not a concern for you if you are the only one using the console (perhaps for debugging purposes) but be aware of this if you intend on primarily using the console for output.


 
 
undefined
=&gt; undefined



1https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Field_declarations