diff --git a/index.html b/index.html
new file mode 100644
index 0000000..81b761b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+
+
+
+ Grid Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..6d03935
--- /dev/null
+++ b/main.js
@@ -0,0 +1,183 @@
+const globals = {
+ grid: null,
+ tiles: [],
+};
+
+const btnGo_onClick = () => {
+ globals.grid = makeGrid(4, 4, {value: 0, visible: false});
+ addRandomTile();
+ redraw(globals.grid);
+ // drawGrid(globals.grid, document.getElementById('output'));
+ // alert("Go");
+}
+
+const btnUp_onClick = () => {
+ const grid = globals.grid;
+ slideUp(grid);
+ addRandomTile();
+ redraw(grid)
+ // alert('Up');
+}
+
+const btnDown_onClick = () => {
+ const grid = globals.grid;
+ slideDown(grid);
+ addRandomTile();
+ redraw(grid)
+ // alert('Down');
+}
+
+const btnLeft_onClick = () => {
+ const grid = globals.grid;
+ slideLeft(grid);
+ addRandomTile();
+ redraw(grid)
+ // alert('Left');
+}
+
+const btnRight_onClick = () => {
+ const grid = globals.grid;
+ slideRight(grid);
+ addRandomTile();
+ redraw(grid)
+ // alert('Right');
+}
+
+const drawGrid = (grid, element) => {
+ // grid is our grid
+ // element is our div
+ let text = "\n";
+ for (const row of grid.rows) {
+ text += " \n";
+ for (const tile of row) {
+ text += " | " + tile.value + " | \n";
+ }
+ text += "
\n";
+ }
+ text += "
";
+ element.innerHTML = text;
+}
+
+const makeGrid = (numRows, numColumns, initialValue) => {
+ const rows = [];
+ for (rowIndex = 0; rowIndex < numRows; rowIndex++) {
+ const row = [];
+ for (columnIndex = 0; columnIndex < numColumns; columnIndex++) {
+ position = {row: rowIndex, column: columnIndex};
+ const tile = makeTile(initialValue.value, initialValue.visible, rowIndex, columnIndex);
+ globals.tiles.push(tile);
+ row.push(tile);
+ }
+ rows.push(row);
+ }
+ const grid = {
+ rows,
+ numRows,
+ numColumns,
+ getTile: (row, column) => {
+ return rows[row][column];
+ },
+ setTile: (row, column, tile) => {
+ rows[row][column] = tile;
+ },
+ swapTiles: (fromRow, fromColumn, toRow, toColumn) => {
+ 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);
+ },
+ };
+ return grid;
+}
+
+const makeTile = (value, visible, row, column) => {
+ return {
+ value,
+ visible,
+ originalLocation: {
+ row,
+ column,
+ },
+ equals: (other) => {
+ return this.value == other.value
+ && this.visible == other.visible
+ && this.originalLocation.row == other.originalLocation.row
+ && this.originalLocation.column == other.originalLocation.column;
+ }
+ };
+};
+
+const addRandomTile = () => {
+ const hiddenTiles = globals.tiles.filter(tile => !tile.visible);
+ if (hiddenTiles.length <=0) return;
+ const index = Math.floor(Math.random() * hiddenTiles.length);
+ const tile = hiddenTiles[index];
+ tile.value = 1;
+ tile.visible = true;
+}
+
+const redraw = (grid) => {
+ const element = document.getElementById('output');
+ drawGrid(grid, element);
+}
+
+const slideUp = (grid) => {
+ for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
+ lastIndex = -1;
+ for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
+ const tile = grid.getTile(rowIndex, columnIndex);
+ if (tile.visible) {
+ lastIndex++;
+ if (lastIndex != rowIndex) {
+ grid.swapTiles(rowIndex, columnIndex, lastIndex, columnIndex);
+ }
+ }
+ }
+ }
+}
+
+const slideLeft = (grid) => {
+ for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
+ lastIndex = -1;
+ for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
+ const tile = grid.getTile(rowIndex, columnIndex);
+ if (tile.visible) {
+ lastIndex++;
+ if (lastIndex != columnIndex) {
+ grid.swapTiles(rowIndex, columnIndex, rowIndex, lastIndex);
+ }
+ }
+ }
+ }
+}
+
+const slideDown = (grid) => {
+ for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
+ lastIndex = grid.numRows;
+ for (let rowIndex = grid.numRows - 1; rowIndex >= 0; rowIndex -= 1) {
+ const tile = grid.getTile(rowIndex, columnIndex);
+ if (tile.visible) {
+ lastIndex--;
+ if (lastIndex != rowIndex) {
+ grid.swapTiles(rowIndex, columnIndex, lastIndex, columnIndex);
+ }
+ }
+ }
+ }
+}
+
+const slideRight = (grid) => {
+ for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
+ lastIndex = grid.numColumns;
+ for (let columnIndex = grid.numColumns - 1; columnIndex >= 0; columnIndex -= 1) {
+ const tile = grid.getTile(rowIndex, columnIndex);
+ if (tile.visible) {
+ lastIndex--;
+ if (lastIndex != columnIndex) {
+ grid.swapTiles(rowIndex, columnIndex, rowIndex, lastIndex);
+ }
+ }
+ }
+ }
+}