Makes Grid a class instead of an anonymous object.

main.js

@@ -11,7 +11,7 @@ const globals = {
 };
 
 const btnStart_onClick = () => {
-    globals.grid = makeGrid(4, 4, {value: 0, isVisible: false});
+    globals.grid = new Grid(4, 4, new Tile(0, false));
     addRandomTile();
     // globals.grid = makeDevGrid([ // can't slide down or left
     //     [2,1,3,4],
@@ -148,86 +148,6 @@ const drawGrid = (grid, element) => {
     element.innerHTML = text;
 }
 
-const makeGrid = (numRows, numColumns, initialValue) => {
-    const tiles = [];
-    const rows = [];
-    for (rowIndex = 0; rowIndex < numRows; rowIndex++) {
-        const row = [];
-        for (columnIndex = 0; columnIndex < numColumns; columnIndex++) {
-            position = {row: rowIndex, column: columnIndex};
-            const tile = new Tile(initialValue.value, initialValue.isVisible, new GridPosition(rowIndex, columnIndex));
-            tiles.push(tile);
-            row.push(tile);
-        }
-        rows.push(row);
-    }
-    const grid = {
-        rows,
-        numRows,
-        numColumns,
-        tiles,
-        clone: () => {
-            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.originalPosition.column = oldTile.originalPosition.column;
-                    newTile.originalPosition.row = oldTile.originalPosition.row;
-                    newTile.value = oldTile.value;
-                    newTile.isVisible = oldTile.isVisible;
-                }
-            }
-            return newGrid;
-        },
-        getColumn: (index) => {
-            let vector = [];
-            for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
-                vector.push(grid.getTile(rowIndex, index));
-            }
-            return vector;
-        },
-        getRow: (index) => {
-            let vector = [];
-            for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
-                vector.push(grid.getTile(index, columnIndex));
-            }
-            return vector;
-        },
-        getTile: (row, column) => {
-            if (row >= 0 && row < numRows && column >= 0 && column < numColumns) {
-                return rows[column][row];
-            }
-            return null;
-        },
-        setTile: (row, column, tile) => {
-            if (row >= 0 && row < numRows && column >= 0 && column < numColumns) {
-                rows[column][row] = tile;
-            }
-        },
-        swapTiles: (fromRow, fromColumn, toRow, toColumn) => {
-            if (
-                    fromRow >= 0 && fromRow < numRows
-                    && fromColumn >= 0 && fromColumn < numColumns
-                    && toRow >= 0 && toRow < numRows
-                    && toColumn >= 0 && toColumn < numColumns) {
-                fromTile = grid.getTile(fromRow, fromColumn);
-                toTile = grid.getTile(toRow, toColumn);
-                // maybe set previous locations on the tiles
-                grid.setTile(fromRow, fromColumn, toTile);
-                grid.setTile(toRow, toColumn, fromTile);
-            }
-        },
-        toString: (mapFn = i => i.value) => {
-            return "[[" + mapFn(grid.getTile(0, 0)) + "," + mapFn(grid.getTile(0, 1)) + "," + mapFn(grid.getTile(0, 2)) + "," + mapFn(grid.getTile(0, 3)) + "],\n"
-                 + " [" + mapFn(grid.getTile(1, 0)) + "," + mapFn(grid.getTile(1, 1)) + "," + mapFn(grid.getTile(1, 2)) + "," + mapFn(grid.getTile(1, 3)) + "],\n"
-                 + " [" + mapFn(grid.getTile(2, 0)) + "," + mapFn(grid.getTile(2, 1)) + "," + mapFn(grid.getTile(2, 2)) + "," + mapFn(grid.getTile(2, 3)) + "],\n"
-                 + " [" + mapFn(grid.getTile(3, 0)) + "," + mapFn(grid.getTile(3, 1)) + "," + mapFn(grid.getTile(3, 2)) + "," + mapFn(grid.getTile(3, 3)) + "]]";
-        }
-    };
-    return grid;
-}
-
 const addRandomTile = () => {
     const hiddenTiles = globals.grid.tiles.filter(tile => !tile.isVisible);
     if (hiddenTiles.length <=0) return;
@@ -322,7 +242,7 @@ const makeDevGrid = (matrix) => {
     const numRows = matrix.length;
     const numColumns = matrix[0].length;
     const initialValue = new Tile(0, false, new GridPosition(0, 0));
-    const grid = makeGrid(numRows, numColumns, initialValue);
+    const grid = new Grid(numRows, numColumns, initialValue);
     for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
         const row = matrix[rowIndex];
         for (let colIndex = 0; colIndex < numColumns; colIndex++) {
@@ -355,11 +275,102 @@ up()
 */
 
 class GameBoard {
+    #grid_;
+
+    constructor() {
+        
+    }
 
 };
 
 class Grid {
+    #tiles_ = [];
+    #rows_ = [];
+    #numRows_;
+    #numColumns_;
+    get tiles() { return [...this.#tiles_]; }
+    get numRows() { return this.#numRows_; }
+    get numColumns() { return this.#numColumns_; }
 
+    constructor(numRows, numColumns, initialValue) {
+        this.#numRows_ = numRows;
+        this.#numColumns_ = numColumns;
+        for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
+            const row = [];
+            for (let columnIndex = 0; columnIndex < this.numColumns; columnIndex++) {
+                const position = new GridPosition(rowIndex, columnIndex);
+                const tile = new Tile(initialValue.value, initialValue.isVisible, position);
+                this.#tiles_.push(tile);
+                row.push(tile);
+            }
+            this.#rows_.push(row);
+        }
+    }
+
+    clone() {
+        const newGrid = new Grid(this.numRows, this.numColumns, new Tile(0, false, new GridPosition(0, 0)));
+        for (let rowIndex = 0; rowIndex < this.numRows; rowIndex++) {
+            for (let columnIndex = 0; columnIndex < this.numColumns; columnIndex++) {
+                const newTile = newGrid.getTile(rowIndex, columnIndex);
+                const oldTile = this.getTile(rowIndex, columnIndex);
+                // TODO(tom): Set the originalPosition of newTile to be the same as oldTile.
+                newTile.value = oldTile.value;
+                newTile.isVisible = oldTile.isVisible;
+            }
+        }
+        return newGrid;
+    }
+
+    getColumn (columnIndex) {
+        let vector = [];
+        for (let rowIndex = 0; rowIndex < this.numRows; rowIndex++) {
+            vector.push(this.getTile(rowIndex, columnIndex));
+        }
+        return vector;
+    }
+
+    getRow (rowIndex) {
+        let vector = [];
+        for (let columnIndex = 0; columnIndex < this.numColumns; columnIndex++) {
+            vector.push(this.getTile(rowIndex, columnIndex));
+        }
+        return vector;
+    }
+
+    getTile (row, column) {
+        if (row >= 0 && row < this.numRows && column >= 0 && column < this.numColumns) {
+            // TODO(tom): Check that this is the right order.
+            return this.#rows_[column][row]
+        }
+        return null;
+    }
+
+    setTile (row, column, tile) {
+        if (row >= 0 && row < this.numRows && column >= 0 && column < this.numColumns) {
+            // TODO(tom): Check that this is the right order.
+            this.#rows_[column][row] = tile;
+        }
+    }
+
+    swapTiles (fromRow, fromColumn, toRow, toColumn) {
+        if (
+                fromRow >= 0 && fromRow < this.numRows
+                && fromColumn >= 0 && fromColumn < this.numColumns
+                && toRow >= 0 && toRow < this.numRows
+                && toColumn >= 0 && toColumn < this.numColumns) {
+            const fromTile = this.getTile(fromRow, fromColumn);
+            const toTile = this.getTile(toRow, toColumn);
+            this.setTile(fromRow, fromColumn, toTile);
+            this.setTile(toRow, toColumn, fromTile);
+        }
+    }
+
+    toString (format = t => t.value) {
+        return `[[${t(this.getTile(0, 0))},${t(this.getTile(0, 1))},${t(this.getTile(0, 2))},${t(this.getTile(0, 3))}],
+ [${t(this.getTile(1, 0))},${t(this.getTile(1, 1))},${t(this.getTile(1, 2))},${t(this.getTile(1, 3))}],
+ [${t(this.getTile(2, 0))},${t(this.getTile(2, 1))},${t(this.getTile(2, 2))},${t(this.getTile(2, 3))}],
+ [${t(this.getTile(3, 0))},${t(this.getTile(3, 1))},${t(this.getTile(3, 2))},${t(this.getTile(3, 3))}]]`;
+    }
 };
 
 class GridPosition {
@@ -388,7 +399,7 @@ class Tile {
     get originalPosition() {
         return {...this.#originalPosition_};
     }
-    constructor (value, isVisible, originalPosition) {
+    constructor (value, isVisible, originalPosition = new GridPosition(0, 0)) {
         this.value = value;
         this.isVisible = isVisible;
         this.originalPosition_ = {...originalPosition};