From 88eaaccc2e3810c590dfca74530ff1904c58efe3 Mon Sep 17 00:00:00 2001
From: Iryna Mariiko
Date: Wed, 6 Nov 2024 21:25:44 +0200
Subject: [PATCH 01/14] moveLeft, right, up, down done
---
.github/workflows/test.yml-template | 29 +++++
README.md | 2 +-
package-lock.json | 9 +-
package.json | 2 +-
src/modules/Game.class.js | 186 ++++++++++++++++++++++++++--
src/styles/main.scss | 6 +-
6 files changed, 218 insertions(+), 16 deletions(-)
create mode 100644 .github/workflows/test.yml-template
diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
new file mode 100644
index 000000000..44ac4e963
--- /dev/null
+++ 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
index 5aab92544..0d692a183 100644
--- 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 `` with your Github username in the link
- - [DEMO LINK](https://.github.io/js_2048_game/)
+ - [DEMO LINK](https://IrynaMariiko00.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
index f209cb6e0..ff37dc85b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,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",
@@ -1467,10 +1467,11 @@
"dev": true
},
"node_modules/@mate-academy/scripts": {
- "version": "1.8.5",
- "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz",
- "integrity": "sha512-mHRY2FkuoYCf5U0ahIukkaRo5LSZsxrTSgMJheFoyf3VXsTvfM9OfWcZIDIDB521kdPrScHHnRp+JRNjCfUO5A==",
+ "version": "1.9.12",
+ "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz",
+ "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"@octokit/rest": "^17.11.2",
"@types/get-port": "^4.2.0",
diff --git a/package.json b/package.json
index 0335978ca..05abe81e0 100644
--- 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/modules/Game.class.js b/src/modules/Game.class.js
index 65cd219c9..a7fa68949 100644
--- a/src/modules/Game.class.js
+++ b/src/modules/Game.class.js
@@ -5,6 +5,11 @@
* Now it has a basic structure, that is needed for testing.
* Feel free to add more props and methods if needed.
*/
+const IDLE = 'idle';
+const PLAYING = 'playing';
+// const WIN = 'win';
+// const LOSE = 'lose';
+
class Game {
/**
* Creates a new game instance.
@@ -21,14 +26,182 @@ class Game {
* initial state.
*/
constructor(initialState) {
- // eslint-disable-next-line no-console
- console.log(initialState);
+ this.board = initialState || [
+ [0, 0, 0, 0],
+ [0, 0, 0, 0],
+ [0, 0, 0, 0],
+ [0, 0, 0, 0],
+ ];
+
+ this.score = 0;
+
+ this.status = IDLE;
+ }
+
+ addRandomTitle() {
+ const emptyCells = [];
+
+ for (let row = 0; row < 4; row++) {
+ for (let col = 0; col < 4; col++) {
+ if (this.board[row][col] === 0) {
+ emptyCells.push({ row, col });
+ }
+ }
+ }
+
+ if (emptyCells.length > 0) {
+ const { row, col } =
+ emptyCells[Math.floor(Math.random() * emptyCells.length)];
+
+ this.board[row][col] = 2;
+ }
+ }
+
+ createColumn(col) {
+ const newColumn = [];
+
+ for (let row = 0; row < this.board.length; row++) {
+ if (this.board[row][col] !== 0) {
+ newColumn.push(this.board[row][col]);
+ }
+ }
+
+ return newColumn;
+ }
+
+ updateColumn(col, newColumn) {
+ let moved = false;
+
+ for (let row = 0; row < this.board.length; row++) {
+ if (this.board[row][col] !== newColumn[row]) {
+ this.board[row][col] = newColumn[row];
+ moved = true;
+ }
+ }
+
+ return moved;
+ }
+
+ resetGameStart() {
+ this.score = 0;
+ this.status = PLAYING;
+
+ this.board = [
+ [0, 0, 0, 0],
+ [0, 0, 0, 0],
+ [0, 0, 0, 0],
+ [0, 0, 0, 0],
+ ];
+
+ this.addRandomTitle();
+ this.addRandomTitle();
+ }
+
+ moveLeft() {
+ let moved = false;
+
+ for (let row = 0; row < this.board.length; row++) {
+ const currentRow = this.board[row];
+ const newRow = currentRow.filter((val) => val !== 0);
+ const canMerge = new Array(newRow.length).fill(true);
+
+ for (let i = 0; i < newRow.length - 1; i++) {
+ if (newRow[i] === newRow[i + 1]) {
+ newRow[i] *= 2;
+ newRow.splice(i + 1, 1);
+ moved = true;
+ canMerge[i] = false;
+ }
+ }
+
+ while (newRow.length < currentRow.length) {
+ newRow.push(0);
+ }
+
+ this.board[row] = newRow;
+ }
+
+ return moved;
+ }
+
+ moveRight() {
+ let moved = false;
+
+ for (let row = this.board.length - 1; row >= 0; row--) {
+ const currentRow = this.board[row];
+ const newRow = currentRow.filter((val) => val !== 0);
+ const canMerge = new Array(newRow.length).fill(true);
+
+ for (let i = newRow.length - 1; i > 0; i--) {
+ if (newRow[i] === newRow[i - 1]) {
+ newRow[i] *= 2;
+ newRow.splice(i - 1, 1);
+ moved = true;
+ canMerge[i] = false;
+ }
+ }
+
+ while (newRow.length < currentRow.length) {
+ newRow.unshift(0);
+ }
+
+ this.board[row] = newRow;
+ }
+
+ return moved;
+ }
+
+ moveUp() {
+ let moved = false;
+
+ for (let col = 0; col < this.board.length; col++) {
+ const newColumn = this.createColumn(col);
+ const canMerge = new Array(newColumn.length).fill(true);
+
+ for (let i = 0; i < newColumn.length - 1; i++) {
+ if (newColumn[i] === newColumn[i + 1]) {
+ newColumn[i] *= 2;
+ newColumn.splice(i + 1, 1);
+ moved = true;
+ canMerge[i] = false;
+ }
+ }
+
+ while (newColumn.length < this.board.length) {
+ newColumn.push(0);
+ }
+
+ moved = this.updateColumn(col, newColumn) || moved;
+ }
+
+ return moved;
}
- moveLeft() {}
- moveRight() {}
- moveUp() {}
- moveDown() {}
+ moveDown() {
+ let moved = false;
+
+ for (let col = 0; col < this.board.length; col++) {
+ const newColumn = this.createColumn(col);
+ const canMerge = new Array(newColumn.length).fill(true);
+
+ for (let i = newColumn.length - 1; i > 0; i--) {
+ if (newColumn[i] === newColumn[i - 1]) {
+ newColumn[i] *= 2;
+ newColumn.splice(i - 1, 1);
+ moved = true;
+ canMerge[i] = false;
+ }
+ }
+
+ while (newColumn.length < this.board.length) {
+ newColumn.unshift(0);
+ }
+
+ moved = this.updateColumn(col, newColumn) || moved;
+ }
+
+ return moved;
+ }
/**
* @returns {number}
@@ -39,7 +212,6 @@ class Game {
* @returns {number[][]}
*/
getState() {}
-
/**
* Returns the current game status.
*
diff --git a/src/styles/main.scss b/src/styles/main.scss
index c43f37dcf..8e10eb4d5 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -91,7 +91,7 @@ body {
}
h1 {
- background: #edc22e;
+ background: #3a6ed6;
color: #f9f6f2;
width: 75px;
height: 75px;
@@ -138,11 +138,11 @@ h1 {
}
.start {
- background: #1dae28;
+ background: #0aca6d;
font-size: 20px;
&:hover {
- background: #179921;
+ background: #10b96a;;
}
}
From 39b89dad81ef2447c506dc87d95258a7004af4eb Mon Sep 17 00:00:00 2001
From: Iryna Mariiko
Date: Thu, 7 Nov 2024 22:21:27 +0200
Subject: [PATCH 02/14] started adding event Listener
---
src/index.html | 2 +-
src/modules/Game.class.js | 199 ++++++++++++++++++++++++++++++++------
src/scripts/main.js | 19 +++-
src/styles/main.scss | 14 ++-
4 files changed, 195 insertions(+), 39 deletions(-)
diff --git a/src/index.html b/src/index.html
index aff3d1a98..5139d5aa2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -65,6 +65,6 @@ 2048
-
+