mate-academy · pasha28091997 · Nov 11, 2024 · Nov 11, 2024 · Nov 11, 2024 · Nov 14, 2024
diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm start & sleep 5 && npm test
+      - name: Upload tests report(cypress mochaawesome merged HTML report)
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: report
+          path: reports
diff --git a/README.md b/README.md
@@ -61,7 +61,7 @@ You can change the HTML/CSS layout if you need it.
 ## Deploy and Pull Request
 
 1. Replace `<your_account>` with your Github username in the link
-    - [DEMO LINK](https://<your_account>.github.io/js_2048_game/)
+    - [DEMO LINK](https://pasha28091997.github.io/js_2048_game/)
 2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
     - Run `npm run test` command to test your code;
     - Run `npm run test:only -- -n` to run fast test ignoring linter;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@mate-academy/eslint-config": "latest",
     "@mate-academy/jest-mochawesome-reporter": "^1.0.0",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "cypress": "^13.13.0",

diff --git a/src/index.html b/src/index.html
@@ -11,6 +11,11 @@
       rel="stylesheet"
       href="./styles/main.scss"
     />
+    <link
+      rel="icon"
+      href="images/reference.png"
+      type="image/png"
+    />
   </head>
   <body>
     <div class="container">
@@ -65,6 +70,9 @@ <h1>2048</h1>
         </p>
       </div>
     </div>
-    <script src="scripts/main.js"></script>
+    <script
+      type="module"
+      src="scripts/main.js"
+    ></script>
   </body>
 </html>
diff --git a/src/modules/Game.class.js b/src/modules/Game.class.js
@@ -1,3 +1,4 @@
+/* eslint-disable function-paren-newline */
 'use strict';
 
 /**
@@ -21,24 +22,147 @@ class Game {
    * initial state.
    */
   constructor(initialState) {
-    // eslint-disable-next-line no-console
-    console.log(initialState);
+    this.board = initialState || this.createEmptyBoard();
+    this.score = 0;
+    this.status = 'idle';
   }
 
-  moveLeft() {}
-  moveRight() {}
-  moveUp() {}
-  moveDown() {}
+  createEmptyBoard() {
+    return Array(4)
+      .fill()
+      .map(() => Array(4).fill(0));
+  }
+
+  moveLeft() {
+    let moved = false;
+
+    for (const row of this.board) {
+      const newRow = this.merge(this.slide(row));
+
+      if (!this.arraysEqual(row, newRow)) {
+        moved = true;
+      }
+      Object.assign(row, newRow);
+    }
+
+    if (moved) {
+      this.addRandomTile();
+    }
+  }
+
+  moveRight() {
+    let moved = false;
+
+    for (const row of this.board) {
+      const reversedRow = row.slice().reverse();
+      const newRow = this.merge(this.slide(reversedRow)).reverse();
+
+      if (!this.arraysEqual(row, newRow)) {
+        moved = true;
+
+        Object.assign(row, newRow);
+      }
+    }
+
+    if (moved) {
+      this.addRandomTile();
+    }
+  }
+
+  moveUp() {
+    let moved = false;
+
+    for (let col = 0; col < 4; col++) {
+      const column = this.getColumn(col);
+      const newColumn = this.merge(this.slide(column));
+
+      if (!this.arraysEqual(column, newColumn)) {
+        moved = true;
+        this.setColumn(col, newColumn);
+      }
+    }
+
+    if (moved) {
+      this.addRandomTile();
+    }
+  }
+
+  moveDown() {
+    let moved = false;
+
+    for (let col = 0; col < 4; col++) {
+      const column = this.getColumn(col).reverse();
+      const newColumn = this.merge(this.slide(column)).reverse();
+
+      if (!this.arraysEqual(column, newColumn)) {
+        moved = true;
+        this.setColumn(col, newColumn);
+      }
+    }
+
+    if (moved) {
+      this.addRandomTile();
+    }
+  }
+
+  getColumn(index) {
+    const column = [];
+
+    for (let row = 0; row < 4; row++) {
+      column.push(this.board[row][index]);
+    }
+
+    return column;
+  }
+
+  setColumn(index, newColumn) {
+    for (let row = 0; row < 4; row++) {
+      this.board[row][index] = newColumn[row];
+    }
+  }
+
+  slide(row) {
+    const newRow = row.filter((value) => value !== 0);
+
+    while (newRow.length < 4) {
+      newRow.push(0);
+    }
+
+    return newRow;
+  }
+
+  merge(row) {
+    for (let i = 0; i < row.length - 1; i++) {
+      if (row[i] !== 0 && row[i] === row[i + 1]) {
+        row[i] *= 2;
+        row[i + 1] = 0;
+        this.score += row[i];
+      }
+    }
+
+    return this.slide(row);
+  }
+
+  arraysEqual(arr1, arr2) {
+    return (
+      arr1.length === arr2.length &&
+      arr1.every((value, index) => value === arr2[index])
+    );
+  }
 
   /**
    * @returns {number}
    */
-  getScore() {}
+  getScore() {
+    return this.score;
+  }
 
   /**
    * @returns {number[][]}
    */
-  getState() {}
+  getState() {
+    return this.board;
+  }
 
   /**
    * Returns the current game status.
@@ -50,19 +174,74 @@ class Game {
    * `win` - the game is won;
    * `lose` - the game is lost
    */
-  getStatus() {}
+  getStatus() {
+    if (this.board.some((row) => row.includes(2048))) {
+      return 'win';
+    }
+
+    const hasMoves = this.board.some((row, rowIndex) =>
+      row.some((value, colIndex) => {
+        if (value === 0) {
+          return true;
+        }
+
+        if (colIndex < 3 && value === row[colIndex + 1]) {
+          return true;
+        }
+
+        if (rowIndex < 3 && value === this.board[rowIndex + 1][colIndex]) {
+          return true;
+        }
+
+        return false;
+      }),
+    );
+
+    if (!hasMoves) {
+      return 'lose';
+    }
+
+    return 'playing';
+  }
 
   /**
    * Starts the game.
    */
-  start() {}
+  start() {
+    if (this.status === 'idle') {
+      this.status = 'playing';
+      this.addRandomTile();
+      this.addRandomTile();
+    }
+  }
 
   /**
    * Resets the game.
    */
-  restart() {}
+  restart() {
+    this.board = this.createEmptyBoard();
+    this.score = 0;
+    this.status = 'idle';
+    this.start();
+  }
 
-  // Add your own methods here
-}
+  addRandomTile() {
+    const emptyCells = [];
+
+    for (let row = 0; row < this.board.length; row++) {
+      for (let col = 0; col < this.board[row].length; col++) {
+        if (this.board[row][col] === 0) {
+          emptyCells.push({ row, col });
+        }
+      }
+    }
 
+    if (emptyCells.length > 0) {
+      const { row: newRow, col: newCol } =
+        emptyCells[Math.floor(Math.random() * emptyCells.length)];
+
+      this.board[newRow][newCol] = Math.random() < 0.9 ? 2 : 4;
+    }
+  }
+}
 module.exports = Game;