add task solution

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://1luki9901.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;

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",

src/index.html

@@ -24,7 +24,6 @@ <h1>2048</h1>
           <button class="button start">Start</button>
         </div>
       </div>
-
       <table class="game-field">
         <tbody>
           <tr class="field-row">
@@ -33,21 +32,18 @@ <h1>2048</h1>
             <td class="field-cell"></td>
             <td class="field-cell"></td>
           </tr>
-
           <tr class="field-row">
             <td class="field-cell"></td>
             <td class="field-cell"></td>
             <td class="field-cell"></td>
             <td class="field-cell"></td>
           </tr>
-
           <tr class="field-row">
             <td class="field-cell"></td>
             <td class="field-cell"></td>
             <td class="field-cell"></td>
             <td class="field-cell"></td>
           </tr>
-
           <tr class="field-row">
             <td class="field-cell"></td>
             <td class="field-cell"></td>
@@ -56,7 +52,6 @@ <h1>2048</h1>
           </tr>
         </tbody>
       </table>
-
       <div class="message-container">
         <p class="message message-lose hidden">You lose! Restart the game?</p>
         <p class="message message-win hidden">Winner! Congrats! You did it!</p>
@@ -66,5 +61,9 @@ <h1>2048</h1>
       </div>
     </div>
     <script src="scripts/main.js"></script>
+    <script
+      src="scripts/main.js"
+      type="module"
+    ></script>
   </body>
 </html>

src/modules/Game.class.js

@@ -1,5 +1,4 @@
 'use strict';
-
 /**
  * This class represents the game.
  * Now it has a basic structure, that is needed for testing.
@@ -20,25 +19,43 @@ class Game {
    * If passed, the board will be initialized with the provided
    * initial state.
    */
-  constructor(initialState) {
+
+  constructor(initialState = this.getInitialState()) {
     // eslint-disable-next-line no-console
     console.log(initialState);
+    this.state = initialState;
+    this.score = 0;
+    this.status = 'idle';
   }
 
-  moveLeft() {}
-  moveRight() {}
-  moveUp() {}
-  moveDown() {}
+  moveLeft() {
+    this.moveInline('left');
+  }
+  moveRight() {
+    this.moveInline('right');
+  }
+  moveUp() {
+    this.moveBlock('up');
+  }
+  moveDown() {
+    this.moveBlock('down');
+  }
 
   /**
    * @returns {number}
    */
-  getScore() {}
+
+  getScore() {
+    return this.score;
+  }
 
   /**
    * @returns {number[][]}
    */
-  getState() {}
+
+  getState() {
+    return this.state;
+  }
 
   /**
    * Returns the current game status.
@@ -50,19 +67,194 @@ class Game {
    * `win` - the game is won;
    * `lose` - the game is lost
    */
-  getStatus() {}
+
+  getStatus() {
+    return this.status;
+  }
 
   /**
    * Starts the game.
    */
-  start() {}
 
+  start() {
+    this.score = 0;
+    this.status = 'playing';
+    this.addRandomSell();
+    this.addRandomSell();
+  }
+
+  // Add your own methods here
   /**
    * Resets the game.
    */
-  restart() {}
+
+  restart() {
+    this.status = 'idle';
+    this.score = 0;
+    this.state = this.getInitialState();
+  }
 
   // Add your own methods here
+  moveBlock(direction) {
+    if (this.getStatus() === 'playing') {
+      let isMove = false;
+
+      this.state.forEach((row, rowIndex) => {
+        const column = [];
+
+        row.forEach((_, cellIndex) => {
+          column.push(this.state[cellIndex][rowIndex]);
+        });
+
+        let notEmptyCells = this.getNotEmptyCells(column, direction);
+
+        notEmptyCells = this.mergeCells(notEmptyCells, direction);
+
+        for (let i = 0; i < 4; i++) {
+          this.state[i][rowIndex] = notEmptyCells[i] || 0;
+
+          if (this.state[i][rowIndex] !== column[i]) {
+            isMove = true;
+          }
+        }
+      });
+
+      if (isMove) {
+        this.addRandomSell();
+        this.checkWinLose();
+      }
+    }
+  }
+
+  moveInline(direction) {
+    if (this.getStatus() === 'playing') {
+      let isMove;
+
+      this.state.forEach((row) => {
+        const oldRow = [...row];
+        let notEmptyCells = this.getNotEmptyCells(row, direction);
+
+        notEmptyCells = this.mergeCells(notEmptyCells, direction);
+
+        row.forEach((_, i) => {
+          row[i] = notEmptyCells[i] || 0;
+        });
+
+        if (!oldRow.every((cell, index) => cell === row[index])) {
+          isMove = true;
+        }
+      });
+
+      if (isMove) {
+        this.addRandomSell();
+        this.checkWinLose();
+      }
+    }
+  }
+
+  getInitialState() {
+    return new Array(4).fill(0).map(() => new Array(4).fill(0));
+  }
+
+  addRandomSell() {
+    const freeIndex = [];
+
+    for (let row = 0; row < 4; row++) {
+      for (let col = 0; col < 4; col++) {
+        if (this.state[row][col] === 0) {
+          freeIndex.push([row, col]);
+        }
+      }
+    }
+
+    const getRandIndex = Math.floor(Math.random() * freeIndex.length);
+
+    const getNum = Math.random() < 0.9 ? 2 : 4;
+
+    const [newRow, newCol] = freeIndex[getRandIndex];
+
+    this.state[newRow][newCol] = getNum;
+  }
+
+  getNotEmptyCells(position, direction) {
+    const notEmptyCells = position.filter((cell) => cell > 0);
+
+    if (direction === 'right' || direction === 'down') {
+      while (notEmptyCells.length < 4) {
+        notEmptyCells.unshift(0);
+      }
+    }
+
+    if (direction === 'left' || direction === 'up') {
+      while (notEmptyCells.length < 4) {
+        notEmptyCells.push(0);
+      }
+    }
+
+    return notEmptyCells;
+  }
+
+  combineCells(cells, direction) {
+    for (let i = 0; i < cells.length - 1; i++) {
+      const valueOne = cells[i];
+      const valueTwo = cells[i + 1];
+
+      if (valueOne === valueTwo && valueOne > 0) {
+        this.score += valueOne + valueTwo;
+        cells[i] = valueOne + valueTwo;
+        cells.splice(i + 1, 1);
+      }
+    }
+
+    if (direction === 'right' || direction === 'down') {
+      return this.getNotEmptyCells(cells, direction);
+    }
+
+    return cells;
+  }
+
+  hasMove() {
+    for (let row = 0; row < 4; row++) {
+      for (let col = 0; col < 4; col++) {
+        const current = this.state[row][col];
+
+        if (current === 0) {
+          return true;
+        }
+
+        if ((row < 3 ? this.state[row + 1][col] : 0) === current) {
+          return true;
+        }
+
+        if ((col < 3 ? this.state[row][col + 1] : 0) === current) {
+          return true;
+        }
+        // if (current === right) {
+        //   return true;
+        // }
+
+        // if (current === down) {
+        //   return true;
+        // }
+
+        // if (down === 0 || right === 0) {
+        //   return true;
+        // }
+      }
+    }
+
+    return false;
+  }
+
+  checkWinLose() {
+    if (this.state.some((row) => row.includes(2048))) {
+      this.status = 'win';
+    }
+
+    if (!this.hasMove()) {
+      this.status = 'lose';
+    }
+  }
 }
 
 module.exports = Game;