mate-academy · nineuito · Jan 14, 2025 · Jan 14, 2025 · Jan 15, 2025 · Jan 16, 2025
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://nineuito.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.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/images/favicon/favicon.png b/src/images/favicon/favicon.png
diff --git a/src/index.html b/src/index.html
@@ -1,18 +1,26 @@
 <!doctype html>
-<html lang="en">
+<html
+  lang="en"
+  class="page"
+>
   <head>
     <meta charset="UTF-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
     <title>2048</title>
+    <link
+      rel="shortcut icon"
+      href="./images/favicon/favicon.png"
+      type="image/x-icon"
+    />
     <link
       rel="stylesheet"
       href="./styles/main.scss"
     />
   </head>
-  <body>
+  <body class="page__body">
     <div class="container">
       <div class="game-header">
         <h1>2048</h1>
@@ -65,6 +73,9 @@ <h1>2048</h1>
         </p>
       </div>
     </div>
-    <script src="scripts/main.js"></script>
+    <script
+      src="scripts/main.js"
+      type="module"
+    ></script>
   </body>
 </html>
diff --git a/src/modules/Game.class.js b/src/modules/Game.class.js
@@ -1,68 +1,201 @@
 'use strict';
 
-/**
- * This class represents the game.
- * Now it has a basic structure, that is needed for testing.
- * Feel free to add more props and methods if needed.
- */
-class Game {
-  /**
-   * Creates a new game instance.
-   *
-   * @param {number[][]} initialState
-   * The initial state of the board.
-   * @default
-   * [[0, 0, 0, 0],
-   *  [0, 0, 0, 0],
-   *  [0, 0, 0, 0],
-   *  [0, 0, 0, 0]]
-   *
-   * If passed, the board will be initialized with the provided
-   * initial state.
-   */
-  constructor(initialState) {
-    // eslint-disable-next-line no-console
-    console.log(initialState);
+export default class Game {
+  constructor(initialState = null) {
+    this.gridSize = 4;
+
+    this.probabilityOfFour = 10;
+
+    this.gameStatus = {
+      isRunning: false,
+      isGameOver: false,
+      isWon: false,
+    };
+
+    this.score = 0;
+
+    this.gridState = initialState || [
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+    ];
+
+    this.initialGridState = structuredClone(this.gridState);
   }
 
-  moveLeft() {}
-  moveRight() {}
-  moveUp() {}
-  moveDown() {}
-
-  /**
-   * @returns {number}
-   */
-  getScore() {}
-
-  /**
-   * @returns {number[][]}
-   */
-  getState() {}
-
-  /**
-   * Returns the current game status.
-   *
-   * @returns {string} One of: 'idle', 'playing', 'win', 'lose'
-   *
-   * `idle` - the game has not started yet (the initial state);
-   * `playing` - the game is in progress;
-   * `win` - the game is won;
-   * `lose` - the game is lost
-   */
-  getStatus() {}
-
-  /**
-   * Starts the game.
-   */
-  start() {}
-
-  /**
-   * Resets the game.
-   */
-  restart() {}
-
-  // Add your own methods here
-}
+  start() {
+    if (this.gameStatus.isRunning) {
+      return;
+    }
+
+    this.gameStatus.isRunning = true;
+
+    this.addRandomTile();
+    this.addRandomTile();
+  }
+
+  restart() {
+    this.score = 0;
+    this.gridState = structuredClone(this.initialGridState);
+
+    this.gameStatus.isRunning = false;
+    this.gameStatus.isGameOver = false;
+    this.gameStatus.isWon = false;
+  }
+
+  moveLeft() {
+    this.processMove((row) => this.shiftAndMerge(row));
+  }
+
+  moveRight() {
+    this.processMove((row) => this.shiftAndMerge(row.reverse()).reverse());
+  }
+
+  moveUp() {
+    this.processMove((column) => this.shiftAndMerge(column), true);
+  }
+
+  moveDown() {
+    this.processMove(
+      (column) => this.shiftAndMerge(column.reverse()).reverse(),
+      true,
+    );
+  }
+
+  processMove(transformFn, isColumn = false) {
+    if (!this.gameStatus.isRunning || this.gameStatus.isGameOver) {
+      return;
+    }
+
+    const previousState = structuredClone(this.gridState);
+
+    if (isColumn) {
+      for (let j = 0; j < this.gridSize; j++) {
+        const column = this.gridState.map((row) => row[j]);
+        const transformedColumn = transformFn(column);
+
+        transformedColumn.forEach((value, i) => (this.gridState[i][j] = value));
+      }
+    } else {
+      this.gridState = this.gridState.map((row) => transformFn(row));
+    }
+
+    if (this.hasGridChanged(previousState)) {
+      this.addRandomTile();
+      this.checkGameStatus();
+    }
+  }
+
+  shiftAndMerge(line) {
+    const nonZeroTiles = line.filter((tile) => tile !== 0);
+
+    for (let i = 0; i < nonZeroTiles.length - 1; i++) {
+      if (nonZeroTiles[i] === nonZeroTiles[i + 1]) {
+        nonZeroTiles[i] *= 2;
+        this.score += nonZeroTiles[i];
+
+        if (nonZeroTiles[i] === 2048) {
+          this.gameStatus.isWon = true;
+        }
 
-module.exports = Game;
+        nonZeroTiles.splice(i + 1, 1);
+      }
+    }
+
+    while (nonZeroTiles.length < this.gridSize) {
+      nonZeroTiles.push(0);
+    }
+
+    return nonZeroTiles;
+  }
+
+  hasGridChanged(previousGrid) {
+    for (let i = 0; i < previousGrid.length; i++) {
+      for (let j = 0; j < previousGrid[i].length; j++) {
+        if (previousGrid[i][j] !== this.gridState[i][j]) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  checkGameStatus() {
+    if (this.gameStatus.isWon) {
+      this.gameStatus.isGameOver = true;
+
+      return;
+    }
+
+    let hasMoves = false;
+
+    for (let i = 0; i < this.gridSize; i++) {
+      for (let j = 0; j < this.gridSize; j++) {
+        const tile = this.gridState[i][j];
+
+        if (
+          tile === 0 ||
+          (i < this.gridSize - 1 && tile === this.gridState[i + 1][j]) ||
+          (j < this.gridSize - 1 && tile === this.gridState[i][j + 1])
+        ) {
+          hasMoves = true;
+          break;
+        }
+      }
+
+      if (hasMoves) {
+        break;
+      }
+    }
+
+    if (!hasMoves) {
+      this.gameStatus.isGameOver = true;
+    }
+  }
+
+  addRandomTile() {
+    const emptyCells = [];
+
+    for (let i = 0; i < this.gridSize; i++) {
+      for (let j = 0; j < this.gridSize; j++) {
+        if (this.gridState[i][j] === 0) {
+          emptyCells.push({ row: i, col: j });
+        }
+      }
+    }
+
+    if (emptyCells.length > 0) {
+      const { row, col } =
+        emptyCells[Math.floor(Math.random() * emptyCells.length)];
+
+      this.gridState[row][col] =
+        Math.random() * 100 < this.probabilityOfFour ? 4 : 2;
+    }
+  }
+
+  getScore() {
+    return this.score;
+  }
+
+  getState() {
+    return structuredClone(this.gridState);
+  }
+
+  getStatus() {
+    if (!this.gameStatus.isRunning) {
+      return 'idle';
+    }
+
+    if (this.gameStatus.isWon) {
+      return 'win';
+    }
+
+    if (this.gameStatus.isGameOver) {
+      return 'lose';
+    }
+
+    return 'playing';
+  }
+}