diff --git a/README.md b/README.md
index dd24e13..f11b84c 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,8 @@
-Memory Card
-
-
-
+# Memory Card
+
+# Features
+- Added button restart
+
diff --git a/css/game.css b/css/game.css
index 60e9ec5..fb7d2a3 100644
--- a/css/game.css
+++ b/css/game.css
@@ -16,13 +16,19 @@ header {
justify-content: space-between;
background-color: rgba(255, 255, 255, 0.8);
font-size: 1.2em;
- width: 100%;
- max-width: 800px;
+ width: 80%;
+ max-width: 2000px;
padding: 30px;
margin: 0 0 30px;
border-radius: 5px;
}
+.restart{
+ cursor: pointer;
+}
+.restart:hover{
+ color: red;
+}
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
diff --git a/doc/game.gif b/doc/game.gif
new file mode 100644
index 0000000..4fac7ea
Binary files /dev/null and b/doc/game.gif differ
diff --git a/doc/gif-restart.gif b/doc/gif-restart.gif
new file mode 100644
index 0000000..c23f093
Binary files /dev/null and b/doc/gif-restart.gif differ
diff --git a/js/game.js b/js/game.js
index 860aac8..f193349 100644
--- a/js/game.js
+++ b/js/game.js
@@ -1,105 +1,132 @@
-const grid = document.querySelector('.grid');
-const spanPlayer = document.querySelector('.player');
-const timer = document.querySelector('.timer');
+const grid = document.querySelector(".grid");
+const spanPlayer = document.querySelector(".player");
+const timer = document.querySelector(".timer");
+
+// created variables to store setInterval from timer, and timeout to close card if no clicked in second card.
+var loop, timeout;
const characters = [
- 'beth',
- 'jerry',
- 'jessica',
- 'morty',
- 'pessoa-passaro',
- 'pickle-rick',
- 'rick',
- 'summer',
- 'meeseeks',
- 'scroopy',
+ "beth",
+ "jerry",
+ "jessica",
+ "morty",
+ "pessoa-passaro",
+ "pickle-rick",
+ "rick",
+ "summer",
+ "meeseeks",
+ "scroopy",
];
+//generate a unique uuid
+function uuidv4() {
+ return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+ (
+ c ^
+ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+ ).toString(16)
+ );
+}
+
const createElement = (tag, className) => {
const element = document.createElement(tag);
element.className = className;
return element;
-}
+};
-let firstCard = '';
-let secondCard = '';
+let firstCard = "";
+let secondCard = "";
const checkEndGame = () => {
- const disabledCards = document.querySelectorAll('.disabled-card');
+ const disabledCards = document.querySelectorAll(".disabled-card");
if (disabledCards.length === 20) {
clearInterval(this.loop);
- alert(`Parabéns, ${spanPlayer.innerHTML}! Seu tempo foi de: ${timer.innerHTML}`);
+ alert(
+ `Parabéns, ${spanPlayer.innerHTML}! Seu tempo foi de: ${timer.innerHTML}`
+ );
}
-}
+};
const checkCards = () => {
- const firstCharacter = firstCard.getAttribute('data-character');
- const secondCharacter = secondCard.getAttribute('data-character');
+ const firstCharacter = firstCard.getAttribute("data-character");
+ const secondCharacter = secondCard.getAttribute("data-character");
- if (firstCharacter === secondCharacter) {
+ // added validation to check if id from two cards has difference, if has, continue.
+ // it prevent to bug from click many times in one card and continue step function.
+ if (firstCharacter === secondCharacter && firstCard.id !== secondCard.id) {
+ firstCard.firstChild.classList.add("disabled-card");
+ secondCard.firstChild.classList.add("disabled-card");
- firstCard.firstChild.classList.add('disabled-card');
- secondCard.firstChild.classList.add('disabled-card');
+ firstCard = "";
+ secondCard = "";
- firstCard = '';
- secondCard = '';
+ // check if has a card with timeout to close, if has timeout, clear.
+ timeout != null && clearTimeout(timeout);
checkEndGame();
-
} else {
setTimeout(() => {
+ firstCard.classList.remove("reveal-card");
+ secondCard.classList.remove("reveal-card");
- firstCard.classList.remove('reveal-card');
- secondCard.classList.remove('reveal-card');
-
- firstCard = '';
- secondCard = '';
-
+ firstCard = "";
+ secondCard = "";
}, 500);
}
-
-}
+};
const revealCard = ({ target }) => {
- if (target.parentNode.className.includes('reveal-card')) {
- return;
+ // check if target is not reference to grid div
+ if (!target.parentNode.classList.toString().includes("grid")) {
+
+ // function to hidden card after 5 seconds
+ timeout != null && clearTimeout(timeout);
+ timeout = setTimeout(() => {
+ if (secondCard === "") {
+ firstCard.classList.remove("reveal-card");
+ }
+ }, 1000 * 5);
+
+ if (target.parentNode.className.includes("reveal-card")) {
+ return;
+ }
+
+ if (firstCard === "") {
+ target.parentNode.classList.add("reveal-card");
+ firstCard = target.parentNode;
+ } else if (secondCard === "") {
+ target.parentNode.classList.add("reveal-card");
+ secondCard = target.parentNode;
+
+ checkCards();
+ }
}
-
- if (firstCard === '') {
-
- target.parentNode.classList.add('reveal-card');
- firstCard = target.parentNode;
-
- } else if (secondCard === '') {
-
- target.parentNode.classList.add('reveal-card');
- secondCard = target.parentNode;
-
- checkCards();
-
- }
-}
+};
const createCard = (character) => {
-
- const card = createElement('div', 'card');
- const front = createElement('div', 'face front');
- const back = createElement('div', 'face back');
+ const card = createElement("div", "card");
+ const front = createElement("div", "face front");
+ const back = createElement("div", "face back");
front.style.backgroundImage = `url('../images/${character}.png')`;
+ // added uuid to card
+ const uuid = uuidv4();
+ card.id = uuid;
+
card.appendChild(front);
card.appendChild(back);
- card.addEventListener('click', revealCard);
- card.setAttribute('data-character', character)
+ card.addEventListener("click", revealCard);
+ card.setAttribute("data-character", character);
return card;
-}
+};
const loadGame = () => {
+ grid.innerHTML = "";
const duplicateCharacters = [...characters, ...characters];
const shuffledArray = duplicateCharacters.sort(() => Math.random() - 0.5);
@@ -108,19 +135,29 @@ const loadGame = () => {
const card = createCard(character);
grid.appendChild(card);
});
-}
+};
const startTimer = () => {
- this.loop = setInterval(() => {
+ // check if startTimer has added before, if has added, clear and set a new.
+ loop != null && clearInterval(this.loop);
+
+ // set time value 0
+ timer.innerHTML = 0;
+ loop = setInterval(() => {
const currentTime = +timer.innerHTML;
timer.innerHTML = currentTime + 1;
}, 1000);
+};
-}
+//restart game
+document.querySelector(".restart").addEventListener("click", () => {
+ startTimer();
+ loadGame();
+});
window.onload = () => {
- spanPlayer.innerHTML = localStorage.getItem('player');
+ spanPlayer.innerHTML = localStorage.getItem("player");
startTimer();
loadGame();
-}
+};
diff --git a/pages/game.html b/pages/game.html
index 69da1eb..c03e514 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -18,6 +18,8 @@