showMessage and hideMessage ffunctions were added

mate-academy · Jul 26, 2023 · a3d94cb · a3d94cb
1 parent f5fc938
commit a3d94cb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -53,9 +53,10 @@ function startGame() {
   filledCells.forEach(clearCell);
   updateCellLists();
 
-  messageStart.classList.add('hidden');
-  messageRules.classList.remove('hidden');
-  messageLose.classList.add('hidden');
+  hideMessage(messageStart);
+  hideMessage(messageLose);
+  hideMessage(messageWin);
+  showMessage(messageRules);
 
   for (let i = 0; i < 2; i++) {
     addNewTile();
@@ -67,7 +68,8 @@ function restartGame() {
   updateCellLists();
   setGameStart();
 
-  messageLose.classList.add('hidden');
+  hideMessage(messageLose);
+  hideMessage(messageWin);
 }
 
 function addNewTile() {
@@ -90,7 +92,7 @@ function handleArrowKeyAction(key) {
   }
 
   if (emptyCells.length === 0 && !checkAvailableMergers()) {
-    messageLose.classList.remove('hidden');
+    showMessage(messageLose);
   }
 }
 
@@ -117,15 +119,15 @@ function setGameStart() {
   button.classList.remove('restart');
   button.classList.add('start');
   button.textContent = 'Start';
-  messageStart.classList.remove('hidden');
+  showMessage(messageStart);
   gameScore.textContent = '0';
 }
 
 function setGameRestart() {
   button.classList.remove('start');
   button.classList.add('restart');
   button.textContent = 'Restart';
-  messageRules.classList.add('hidden');
+  hideMessage(messageRules);
 }
 
 function moveTile(cell, direction) {
@@ -175,8 +177,8 @@ function mergeTiles(cell, nextCell) {
 
   gameScore.textContent = +gameScore.textContent + newNumber;
 
-  if (gameScore.textContent === 2048) {
-    messageWin.classList.toggle('hidden');
+  if (newNumber === 2048) {
+    showMessage(messageWin);
   }
 }
 
@@ -209,3 +211,11 @@ function getNextCellIndex(cellIndex, direction) {
     ? nextCellIndex
     : null;
 }
+
+function showMessage(messageElement) {
+  messageElement.classList.remove('hidden');
+}
+
+function hideMessage(messageElement) {
+  messageElement.classList.add('hidden');
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -185,6 +185,11 @@ button:focus {
   color: #f9f6f2;
 }
 
+.message-lose {
+  background: #d4ccc7;
+  transform: translateY(-25vh) scale(1.5);
+}
+
 .message-container {
   width: 100%;
   height: 150px;