Makes Tile and GridPosition separate classes instead of anonymous objects.

main.js

@@ -11,7 +11,7 @@ const globals = {
 };
 
 const btnStart_onClick = () => {
-    globals.grid = makeGrid(4, 4, {value: 0, visible: false});
+    globals.grid = makeGrid(4, 4, {value: 0, isVisible: false});
     addRandomTile();
     // globals.grid = makeDevGrid([ // can't slide down or left
     //     [2,1,3,4],
@@ -31,7 +31,7 @@ const getSettingsForDirection = (direction) => {
         merge: (from, to) => {
             to.value++;
             from.value = 0;
-            from.visible = false;
+            from.isVisible = false;
         }
     };
 
@@ -140,7 +140,7 @@ const drawGrid = (grid, element) => {
         text += "  <tr>\n";
         for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
             const tile = grid.getTile(rowIndex, columnIndex);
-            text += "    <td title=\"(" + tile.originalLocation.row + ", " + tile.originalLocation.column + ")\"class=\"" + (tile.visible ? "visible " : "hidden ") + "\">" + tile.value + "</td>\n";
+            text += "    <td title=\"(" + tile.originalPosition.row + ", " + tile.originalPosition.column + ")\"class=\"" + (tile.isVisible ? "visible " : "hidden ") + "\">" + tile.value + "</td>\n";
         }
         text += "  </tr>\n";
     }
@@ -155,30 +155,27 @@ const makeGrid = (numRows, numColumns, initialValue) => {
         const row = [];
         for (columnIndex = 0; columnIndex < numColumns; columnIndex++) {
             position = {row: rowIndex, column: columnIndex};
-            const tile = makeTile(initialValue.value, initialValue.visible, rowIndex, columnIndex);
+            const tile = new Tile(initialValue.value, initialValue.isVisible, new GridPosition(rowIndex, columnIndex));
             tiles.push(tile);
             row.push(tile);
         }
         rows.push(row);
     }
-    const getTile = (grid, row, column) => {
-        return grid.getTile(row, column);
-    }
     const grid = {
         rows,
         numRows,
         numColumns,
         tiles,
         clone: () => {
-            const newGrid = makeGrid(numRows, numColumns, makeTile(0, false, 0, 0));
+            const newGrid = makeGrid(numRows, numColumns, new Tile(0, false, new GridPosition(0, 0)));
             for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
                 for (let columnIndex = 0; columnIndex < numColumns; columnIndex++) {
                     const newTile = newGrid.getTile(rowIndex, columnIndex);
                     const oldTile = grid.getTile(rowIndex, columnIndex);
-                    newTile.originalLocation.column = oldTile.originalLocation.column;
+                    newTile.originalPosition.column = oldTile.originalPosition.column;
-                    newTile.originalLocation.row = oldTile.originalLocation.row;
+                    newTile.originalPosition.row = oldTile.originalPosition.row;
                     newTile.value = oldTile.value;
-                    newTile.visible = oldTile.visible;
+                    newTile.isVisible = oldTile.isVisible;
                 }
             }
             return newGrid;
@@ -231,34 +228,13 @@ const makeGrid = (numRows, numColumns, initialValue) => {
     return grid;
 }
 
-const makeTile = (value, visible, row, column) => {
-    const tile = {
-        value,
-        visible,
-        originalLocation: {
-            row,
-            column,
-        },
-        equals: (other) => {
-            return tile.value == other.value
-                && tile.visible == other.visible
-                && tile.originalLocation.row == other.originalLocation.row
-                && tile.originalLocation.column == other.originalLocation.column;
-        },
-        toString: (format = i => `{ value: ${i.value}, originalLocation: { row: ${i.originalLocation.row}, column: ${i.originalLocation.column} }, visible: ${i.visible ? "true" : "false"} }`) => {
-            return format(tile);
-        }
-    };
-    return tile;
-};
-
 const addRandomTile = () => {
-    const hiddenTiles = globals.grid.tiles.filter(tile => !tile.visible);
+    const hiddenTiles = globals.grid.tiles.filter(tile => !tile.isVisible);
     if (hiddenTiles.length <=0) return;
     const index = Math.floor(Math.random() * hiddenTiles.length);
     const tile = hiddenTiles[index];
     tile.value = 1;
-    tile.visible = true;
+    tile.isVisible = true;
 }
 
 const redraw = (grid) => {
@@ -284,8 +260,8 @@ const slide = (fromIndex, toIndex, vector, advance, swap, merge, testForDone) =>
             hasMergedPrevious = false;
             continue;
         }
-        if (!toTile.visible) {
+        if (!toTile.isVisible) {
-            if (fromTile.visible) {
+            if (fromTile.isVisible) {
                 swap(fromIndex, toIndex);
                 // Advance fromIndex
                 fromIndex = advance(fromIndex);
@@ -296,7 +272,7 @@ const slide = (fromIndex, toIndex, vector, advance, swap, merge, testForDone) =>
                 fromIndex = advance(fromIndex);
             }
         } else {
-            if (fromTile.visible) {
+            if (fromTile.isVisible) {
                 if (fromTile.value == toTile.value) {
                     if (hasMergedPrevious) {
                         // Advance toIndex
@@ -345,7 +321,7 @@ const checkForEnd = (grid) => {
 const makeDevGrid = (matrix) => {
     const numRows = matrix.length;
     const numColumns = matrix[0].length;
-    const initialValue = makeTile(0, false, 0, 0);
+    const initialValue = new Tile(0, false, new GridPosition(0, 0));
     const grid = makeGrid(numRows, numColumns, initialValue);
     for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
         const row = matrix[rowIndex];
@@ -353,7 +329,7 @@ const makeDevGrid = (matrix) => {
             const value = row[colIndex];
             const tile = grid.getTile(rowIndex, colIndex);
             tile.value = value;
-            tile.visible = value > 0;
+            tile.isVisible = value > 0;
         }
     }
     return grid;
@@ -377,3 +353,54 @@ up()
 [3,2,0,0], either the 3 doesn't go up or the 1 bounces it back?
 // fixed
 */
+
+class GameBoard {
+
+};
+
+class Grid {
+
+};
+
+class GridPosition {
+    #row_;
+    #column_;
+    constructor (row, column) {
+        this.#row_ = row || 0;
+        this.#column_ = column || 0;
+    }
+    get row() { return this.#row_; }
+    get column() { return this.#column_; }
+    equals (other) {
+        return other !== null && other !== undefined
+            && this.#row_ === other.#row_
+            && this.#column_ === other.#column_;
+    }
+    toString() {
+        return `{ row: ${this.#row_}, column: ${this.#column_} }`;
+    }
+}
+
+class Tile {
+    #originalPosition_;
+    value;
+    isVisible;
+    get originalPosition() {
+        return {...this.#originalPosition_};
+    }
+    constructor (value, isVisible, originalPosition) {
+        this.value = value;
+        this.isVisible = isVisible;
+        this.originalPosition_ = {...originalPosition};
+    }
+    equals (other) {
+        return other !== null && other !== undefined
+            && this.value === other.value
+            && this.isVisible === other.isVisible
+            && this.#originalPosition_.row === other.#originalPosition_.row
+            && this.#originalPosition_.column === other.#originalPosition_.column;
+    }
+    toString() {
+        return `{ value: ${this.value}, originalPosition: { row: ${this.#originalPosition_.row}, column: ${this.#originalPosition_.column} }, isVisible: ${this.isVisible ? "true" : "false"} }`;
+    }
+};