added amended files

kottans · al0tak · Aug 15, 2022 · Jul 31, 2022 · Aug 2, 2022 · Aug 5, 2022
commit f0dbcf058c8ff5cb1b876555a08c1bff9ae4ea1b
diff --git a/submissions/kovalov/memory-pair-game/index.html b/submissions/kovalov/memory-pair-game/index.html
@@ -7,13 +7,30 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <link rel="stylesheet" href="styles.css" />
-    <title>Memory Game App</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Document</title>
   </head>
   <body>
     <div class="page-wrapper">
-      <main class="game" data-game-content></main>
+      <main class="game" data-game data-is-active="false">
+        <div class="game__flipper">
+          <div class="game__front">
+            <div class="game__menu" data-menu>
+              <h1 class="game__menu-title">Memory game app</h1>
+              <p class="game__menu-description">
+                Turn any two cards picture-side-up and find the pair.
+              </p>
+              <button class="game__menu-button" data-button="start">
+                Start
+              </button>
+            </div>
+          </div>
+          <div class="game__back">
+            <div class="game__grid" data-grid></div>
+          </div>
+        </div>
+      </main>
     </div>
-    <script type="module" src="./scripts/main.js"></script>
+    <script src="./main.js"></script>
   </body>
 </html>
diff --git a/submissions/kovalov/memory-pair-game/main.js b/submissions/kovalov/memory-pair-game/main.js
@@ -0,0 +1,147 @@
+const imageNames = [
+  'img-1.png',
+  'img-2.png',
+  'img-3.png',
+  'img-4.png',
+  'img-5.png',
+  'img-6.png',
+  'img-7.png',
+  'img-8.png',
+];
+
+let currentCard = '';
+let previousCard = '';
+let isActive = true;
+let timesClicked = 0;
+let timesMatched = 0;
+
+const gameContainer = document.querySelector('[data-game]');
+const gameMenu = document.querySelector('[data-menu]');
+const cardGrid = document.querySelector('[data-grid]');
+
+function getShuffledImages(imageNames, filePath) {
+  return [...imageNames, ...imageNames]
+    .sort(() => 0.5 - Math.random())
+    .map((imageName) => ({
+      imageName,
+      src: `${filePath}/${imageName}`,
+    }));
+}
+
+function createCard(cardDetails) {
+  const cardElement = document.createElement('div');
+  cardElement.innerHTML = `
+		 <div class="game__card"
+		 data-is-opened="false"
+		 data-name="${cardDetails.imageName}"
+		  >
+			 <div class="game__card-flipper">
+				<div class="game__card-front">
+				  <span class="game__card-icon">?</span>
+				</div>
+			<div class="game__card-back">
+			  <img src="${cardDetails.src}" alt="" class="game__card-image"
+			  />
+			</div>
+			 </div>
+	  </div>
+		`;
+  return cardElement;
+}
+
+function initGame(imageNames, filePath, container) {
+  const shuffledImages = getShuffledImages(imageNames, filePath);
+  shuffledImages
+    .map(createCard)
+    .forEach((card) => addCard(card, container));
+}
+
+function addCard(cardElement, container) {
+  container.appendChild(cardElement);
+}
+
+gameMenu.addEventListener('click', (event) => {
+  if (event.target.dataset.button !== 'start') return;
+
+  cardGrid.innerHTML = '';
+
+  currentCard = '';
+  previousCard = '';
+
+  timesClicked = 0;
+  timesMatched = 0;
+
+  gameContainer.dataset.isActive = true;
+  initGame(imageNames, './assets/images', cardGrid);
+});
+
+function clearVariables() {
+  currentCard = '';
+  previousCard = '';
+}
+
+function checkWin() {
+  if (timesMatched !== 8) return;
+
+  isActive = false;
+  gameContainer.dataset.isActive = false;
+
+  gameMenu.innerHTML = '';
+  const HTML = `
+	 <h1 class="game__menu-title">You win!</h1>
+	 <p class="game__menu-description">
+		It has taken ${timesClicked} clicks.
+	 </p>
+	 <button class="game__menu-button" data-button="start">
+		Play Again
+	 </button>
+	 `;
+
+  gameMenu.innerHTML = HTML;
+}
+
+function handleClick(event) {
+  timesClicked++;
+
+  if (isActive) {
+    if (!event.target.closest('.game__card')) return;
+
+    if (!currentCard) {
+      currentCard = event.target.closest('.game__card');
+      currentCard.dataset.isOpened = true;
+      return;
+    }
+
+    if (currentCard) {
+      previousCard = event.target.closest('.game__card');
+      previousCard.dataset.isOpened = true;
+      isActive = false;
+
+      const { name: currentCardName } = currentCard.dataset;
+      const { name: previousCardName } = previousCard.dataset;
+
+      if (currentCardName !== previousCardName) {
+        setTimeout(() => {
+          currentCard.dataset.isOpened = false;
+          previousCard.dataset.isOpened = false;
+
+          clearVariables();
+          isActive = true;
+
+          return;
+        }, 1000);
+      }
+
+      if (currentCardName === previousCardName) {
+        timesMatched++;
+
+        checkWin();
+        clearVariables();
+        isActive = true;
+        return;
+      }
+    }
+  }
+}
+
+cardGrid.addEventListener('click', handleClick);
diff --git a/submissions/kovalov/memory-pair-game/scripts/addGameCard.js b/submissions/kovalov/memory-pair-game/scripts/addGameCard.js
diff --git a/submissions/kovalov/memory-pair-game/scripts/cardImages.js b/submissions/kovalov/memory-pair-game/scripts/cardImages.js
diff --git a/submissions/kovalov/memory-pair-game/scripts/createGameCard.js b/submissions/kovalov/memory-pair-game/scripts/createGameCard.js
diff --git a/submissions/kovalov/memory-pair-game/scripts/getShuffledImages.js b/submissions/kovalov/memory-pair-game/scripts/getShuffledImages.js
diff --git a/submissions/kovalov/memory-pair-game/scripts/main.js b/submissions/kovalov/memory-pair-game/scripts/main.js