diff --git a/fonts/Bangers/Bangers-Regular.ttf b/fonts/Bangers/Bangers-Regular.ttf new file mode 100644 index 0000000..027af19 Binary files /dev/null and b/fonts/Bangers/Bangers-Regular.ttf differ diff --git a/fonts/Bangers/OFL.txt b/fonts/Bangers/OFL.txt new file mode 100644 index 0000000..64071e3 --- /dev/null +++ b/fonts/Bangers/OFL.txt @@ -0,0 +1,94 @@ +Copyright 2010 The Bangers Project Authors (contact@sansoxygen.com), +with Reserved Font Name Bangers. + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/images/cards/10_of_clubs.png b/images/cards/10_of_clubs.png new file mode 100644 index 0000000..18af741 Binary files /dev/null and b/images/cards/10_of_clubs.png differ diff --git a/images/cards/10_of_diamonds.png b/images/cards/10_of_diamonds.png new file mode 100644 index 0000000..3bbc4e0 Binary files /dev/null and b/images/cards/10_of_diamonds.png differ diff --git a/images/cards/10_of_hearts.png b/images/cards/10_of_hearts.png new file mode 100644 index 0000000..3eb83d7 Binary files /dev/null and b/images/cards/10_of_hearts.png differ diff --git a/images/cards/10_of_spades.png b/images/cards/10_of_spades.png new file mode 100644 index 0000000..0b3d294 Binary files /dev/null and b/images/cards/10_of_spades.png differ diff --git a/images/cards/2_of_clubs.png b/images/cards/2_of_clubs.png new file mode 100644 index 0000000..291ed97 Binary files /dev/null and b/images/cards/2_of_clubs.png differ diff --git a/images/cards/2_of_diamonds.png b/images/cards/2_of_diamonds.png new file mode 100644 index 0000000..4deee7c Binary files /dev/null and b/images/cards/2_of_diamonds.png differ diff --git a/images/cards/2_of_hearts.png b/images/cards/2_of_hearts.png new file mode 100644 index 0000000..75a014f Binary files /dev/null and b/images/cards/2_of_hearts.png differ diff --git a/images/cards/2_of_spades.png b/images/cards/2_of_spades.png new file mode 100644 index 0000000..1ce0ffe Binary files /dev/null and b/images/cards/2_of_spades.png differ diff --git a/images/cards/3_of_clubs.png b/images/cards/3_of_clubs.png new file mode 100644 index 0000000..076ab31 Binary files /dev/null and b/images/cards/3_of_clubs.png differ diff --git a/images/cards/3_of_diamonds.png b/images/cards/3_of_diamonds.png new file mode 100644 index 0000000..8ee0b4b Binary files /dev/null and b/images/cards/3_of_diamonds.png differ diff --git a/images/cards/3_of_hearts.png b/images/cards/3_of_hearts.png new file mode 100644 index 0000000..8e74673 Binary files /dev/null and b/images/cards/3_of_hearts.png differ diff --git a/images/cards/3_of_spades.png b/images/cards/3_of_spades.png new file mode 100644 index 0000000..f9e06b4 Binary files /dev/null and b/images/cards/3_of_spades.png differ diff --git a/images/cards/4_of_clubs.png b/images/cards/4_of_clubs.png new file mode 100644 index 0000000..8be9e08 Binary files /dev/null and b/images/cards/4_of_clubs.png differ diff --git a/images/cards/4_of_diamonds.png b/images/cards/4_of_diamonds.png new file mode 100644 index 0000000..70e82e8 Binary files /dev/null and b/images/cards/4_of_diamonds.png differ diff --git a/images/cards/4_of_hearts.png b/images/cards/4_of_hearts.png new file mode 100644 index 0000000..ceecbfe Binary files /dev/null and b/images/cards/4_of_hearts.png differ diff --git a/images/cards/4_of_spades.png b/images/cards/4_of_spades.png new file mode 100644 index 0000000..95abe3e Binary files /dev/null and b/images/cards/4_of_spades.png differ diff --git a/images/cards/5_of_clubs.png b/images/cards/5_of_clubs.png new file mode 100644 index 0000000..bde9777 Binary files /dev/null and b/images/cards/5_of_clubs.png differ diff --git a/images/cards/5_of_diamonds.png b/images/cards/5_of_diamonds.png new file mode 100644 index 0000000..bb92525 Binary files /dev/null and b/images/cards/5_of_diamonds.png differ diff --git a/images/cards/5_of_hearts.png b/images/cards/5_of_hearts.png new file mode 100644 index 0000000..d923456 Binary files /dev/null and b/images/cards/5_of_hearts.png differ diff --git a/images/cards/5_of_spades.png b/images/cards/5_of_spades.png new file mode 100644 index 0000000..53a1aad Binary files /dev/null and b/images/cards/5_of_spades.png differ diff --git a/images/cards/6_of_clubs.png b/images/cards/6_of_clubs.png new file mode 100644 index 0000000..a9660a0 Binary files /dev/null and b/images/cards/6_of_clubs.png differ diff --git a/images/cards/6_of_diamonds.png b/images/cards/6_of_diamonds.png new file mode 100644 index 0000000..78a80ad Binary files /dev/null and b/images/cards/6_of_diamonds.png differ diff --git a/images/cards/6_of_hearts.png b/images/cards/6_of_hearts.png new file mode 100644 index 0000000..361643e Binary files /dev/null and b/images/cards/6_of_hearts.png differ diff --git a/images/cards/6_of_spades.png b/images/cards/6_of_spades.png new file mode 100644 index 0000000..40242a7 Binary files /dev/null and b/images/cards/6_of_spades.png differ diff --git a/images/cards/7_of_clubs.png b/images/cards/7_of_clubs.png new file mode 100644 index 0000000..9d6b545 Binary files /dev/null and b/images/cards/7_of_clubs.png differ diff --git a/images/cards/7_of_diamonds.png b/images/cards/7_of_diamonds.png new file mode 100644 index 0000000..6ad5f15 Binary files /dev/null and b/images/cards/7_of_diamonds.png differ diff --git a/images/cards/7_of_hearts.png b/images/cards/7_of_hearts.png new file mode 100644 index 0000000..19b89a2 Binary files /dev/null and b/images/cards/7_of_hearts.png differ diff --git a/images/cards/7_of_spades.png b/images/cards/7_of_spades.png new file mode 100644 index 0000000..b9f1b93 Binary files /dev/null and b/images/cards/7_of_spades.png differ diff --git a/images/cards/8_of_clubs.png b/images/cards/8_of_clubs.png new file mode 100644 index 0000000..cec743c Binary files /dev/null and b/images/cards/8_of_clubs.png differ diff --git a/images/cards/8_of_diamonds.png b/images/cards/8_of_diamonds.png new file mode 100644 index 0000000..ed12951 Binary files /dev/null and b/images/cards/8_of_diamonds.png differ diff --git a/images/cards/8_of_hearts.png b/images/cards/8_of_hearts.png new file mode 100644 index 0000000..fb39723 Binary files /dev/null and b/images/cards/8_of_hearts.png differ diff --git a/images/cards/8_of_spades.png b/images/cards/8_of_spades.png new file mode 100644 index 0000000..b6b3b38 Binary files /dev/null and b/images/cards/8_of_spades.png differ diff --git a/images/cards/9_of_clubs.png b/images/cards/9_of_clubs.png new file mode 100644 index 0000000..2174db5 Binary files /dev/null and b/images/cards/9_of_clubs.png differ diff --git a/images/cards/9_of_diamonds.png b/images/cards/9_of_diamonds.png new file mode 100644 index 0000000..0b933fb Binary files /dev/null and b/images/cards/9_of_diamonds.png differ diff --git a/images/cards/9_of_hearts.png b/images/cards/9_of_hearts.png new file mode 100644 index 0000000..7b196d6 Binary files /dev/null and b/images/cards/9_of_hearts.png differ diff --git a/images/cards/9_of_spades.png b/images/cards/9_of_spades.png new file mode 100644 index 0000000..3c3b5ff Binary files /dev/null and b/images/cards/9_of_spades.png differ diff --git a/images/cards/ace_of_clubs.png b/images/cards/ace_of_clubs.png new file mode 100644 index 0000000..42bf5ec Binary files /dev/null and b/images/cards/ace_of_clubs.png differ diff --git a/images/cards/ace_of_diamonds.png b/images/cards/ace_of_diamonds.png new file mode 100644 index 0000000..79cd3b8 Binary files /dev/null and b/images/cards/ace_of_diamonds.png differ diff --git a/images/cards/ace_of_hearts.png b/images/cards/ace_of_hearts.png new file mode 100644 index 0000000..b422124 Binary files /dev/null and b/images/cards/ace_of_hearts.png differ diff --git a/images/cards/ace_of_spades.png b/images/cards/ace_of_spades.png new file mode 100644 index 0000000..103f56d Binary files /dev/null and b/images/cards/ace_of_spades.png differ diff --git a/images/cards/back.png b/images/cards/back.png new file mode 100644 index 0000000..84575a2 Binary files /dev/null and b/images/cards/back.png differ diff --git a/images/cards/jack_of_clubs.png b/images/cards/jack_of_clubs.png new file mode 100644 index 0000000..5e003be Binary files /dev/null and b/images/cards/jack_of_clubs.png differ diff --git a/images/cards/jack_of_diamonds.png b/images/cards/jack_of_diamonds.png new file mode 100644 index 0000000..131a977 Binary files /dev/null and b/images/cards/jack_of_diamonds.png differ diff --git a/images/cards/jack_of_hearts.png b/images/cards/jack_of_hearts.png new file mode 100644 index 0000000..bf342bc Binary files /dev/null and b/images/cards/jack_of_hearts.png differ diff --git a/images/cards/jack_of_spades.png b/images/cards/jack_of_spades.png new file mode 100644 index 0000000..f539c19 Binary files /dev/null and b/images/cards/jack_of_spades.png differ diff --git a/images/cards/king_of_clubs.png b/images/cards/king_of_clubs.png new file mode 100644 index 0000000..68e5774 Binary files /dev/null and b/images/cards/king_of_clubs.png differ diff --git a/images/cards/king_of_diamonds.png b/images/cards/king_of_diamonds.png new file mode 100644 index 0000000..e21d6a0 Binary files /dev/null and b/images/cards/king_of_diamonds.png differ diff --git a/images/cards/king_of_hearts.png b/images/cards/king_of_hearts.png new file mode 100644 index 0000000..1d3c468 Binary files /dev/null and b/images/cards/king_of_hearts.png differ diff --git a/images/cards/king_of_spades.png b/images/cards/king_of_spades.png new file mode 100644 index 0000000..2edbbc1 Binary files /dev/null and b/images/cards/king_of_spades.png differ diff --git a/images/cards/queen_of_clubs.png b/images/cards/queen_of_clubs.png new file mode 100644 index 0000000..7be5f9a Binary files /dev/null and b/images/cards/queen_of_clubs.png differ diff --git a/images/cards/queen_of_diamonds.png b/images/cards/queen_of_diamonds.png new file mode 100644 index 0000000..928f650 Binary files /dev/null and b/images/cards/queen_of_diamonds.png differ diff --git a/images/cards/queen_of_hearts.png b/images/cards/queen_of_hearts.png new file mode 100644 index 0000000..21839e6 Binary files /dev/null and b/images/cards/queen_of_hearts.png differ diff --git a/images/cards/queen_of_spades.png b/images/cards/queen_of_spades.png new file mode 100644 index 0000000..7983d03 Binary files /dev/null and b/images/cards/queen_of_spades.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..7b25b86 Binary files /dev/null and b/images/logo.png differ diff --git a/images/play.png b/images/play.png new file mode 100644 index 0000000..db09872 Binary files /dev/null and b/images/play.png differ diff --git a/images/undo.png b/images/undo.png new file mode 100644 index 0000000..1074ee9 Binary files /dev/null and b/images/undo.png differ diff --git a/index.html b/index.html index 25a06fd..1c3532a 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,18 @@ - SWE101 + 1.POCE.3: Match Game + + + -

SWE101! 🚀

+ diff --git a/package-lock.json b/package-lock.json index 4e29994..36e87f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "match-game-swe1", + "name": "match-game-bootcamp", "version": "1.0.0", "lockfileVersion": 1, "requires": true, diff --git a/script.js b/script.js index e2d0297..f11a926 100644 --- a/script.js +++ b/script.js @@ -1 +1,385 @@ // Please implement exercise logic here + +// boardSize has to be an even number +const boardSize = 4; +const cardSize = 16; +const board = []; +let firstCard = null; +let firstCardElement; +let deck = []; +let canClick = false; +let playerName = ""; +let timeLeftInSeconds = 180; +let timeInterval; +let matchedCards = 0; +let matchesWon = 0; + +const cardClick = (cardElement, row, column) => { + canClick = false; + const clickedCard = board[row][column]; + + // first turn + if (firstCard === null) { + document.getElementById(clickedCard.id).classList.toggle("is-flipped"); + firstCard = clickedCard; + firstCardElement = cardElement; + canClick = true; + document.getElementById("message").innerText = "Select the second card"; + } else { + // second turn if user click the same card again + if (clickedCard.id === firstCard.id) { + document.getElementById("message").innerText = "Select the second card"; + // reset(); + canClick = true; + } + // if user matches both cards + else if ( + clickedCard.name === firstCard.name && + clickedCard.suit === firstCard.suit + ) { + document.getElementById(clickedCard.id).classList.toggle("is-flipped"); + + // turn this card over + document.getElementById(firstCard.id).classList.toggle("orange"); + document.getElementById(clickedCard.id).classList.toggle("orange"); + + matchedCards += 2; + + // if user matches all cards + if (matchedCards == cardSize) { + document.getElementById("message").innerText = "You win this round!"; + document.getElementById( + "matchesWon" + ).innerHTML = `

${playerName}'s Matches Won: ${matchesWon}

`; + clearInterval(timeInterval); + setTimeout(() => { + resetRound(); + document.getElementById("message").innerText = + "Press play to start round"; + }, 5000); + } + // if user's first and second card does not match + else { + document.getElementById("message").innerText = "Card is a match!"; + matchesWon++; + setTimeout(() => { + reset(); + document.getElementById("message").innerText = + "Select the first card"; + }, 3000); + } + } else { + document.getElementById(clickedCard.id).classList.toggle("is-flipped"); + // turn this card back over + document.getElementById("message").innerText = "Card is not a match!"; + setTimeout(() => { + document.getElementById(firstCard.id).classList.toggle("is-flipped"); + document.getElementById(clickedCard.id).classList.toggle("is-flipped"); + // reset the first card + reset(); + document.getElementById("message").innerText = "Select the first card"; + }, 3000); + } + } +}; + +// +const reset = () => { + firstCard = null; + canClick = true; +}; + +// create all the board elements that will go on the screen +// return the built board +const buildBoardElements = (board) => { + // create the element that everything will go inside of + const boardElement = document.createElement("div"); + + // give it a class for CSS purposes + boardElement.classList.add("board"); + + // use the board data structure we passed in to create the correct size board + for (let i = 0; i < board.length; i += 1) { + // make a var for just this row of cards + const row = board[i]; + + // make an element for this row of cards + const rowElement = document.createElement("div"); + rowElement.classList.add("row"); + + // make all the squares for this row + for (let j = 0; j < row.length; j += 1) { + // create the square element + const card = document.createElement("div"); + + // set a class for CSS purposes + card.classList.add("card"); + + // set the click event + // eslint-disable-next-line + // card.addEventListener("click", (event) => { + // // we will want to pass in the card element so + // // that we can change how it looks on screen, i.e., + // // "turn the card over" + // cardClick(event.currentTarget, i, j); + // }); + + const cardInner = document.createElement("div"); + cardInner.classList.add("card__inner"); + cardInner.id = board[i][j].id; + cardInner.addEventListener("click", function (e) { + if (canClick) { + cardClick(e.currentTarget, i, j); + } + }); + + const cardFaceBack = document.createElement("div"); + cardFaceBack.classList.add("card__face"); + cardFaceBack.classList.add("card__face--back"); + cardFaceBack.innerHTML = ``; + + const cardFaceFront = document.createElement("div"); + cardFaceFront.classList.add("card__face"); + cardFaceFront.classList.add("card__face--front"); + cardFaceFront.innerHTML = ``; + + cardInner.appendChild(cardFaceBack); + cardInner.appendChild(cardFaceFront); + + card.appendChild(cardInner); + + rowElement.appendChild(card); + } + boardElement.appendChild(rowElement); + } + + return boardElement; +}; + +const getRandomIndex = (max) => Math.floor(Math.random() * max); + +const shuffleCards = (cards) => { + // Loop over the card deck array once + for (let currentIndex = 0; currentIndex < cards.length; currentIndex += 1) { + // Select a random index in the deck + const randomIndex = getRandomIndex(cards.length); + // Select the card that corresponds to randomIndex + const randomCard = cards[randomIndex]; + // Select the card that corresponds to currentIndex + const currentCard = cards[currentIndex]; + // Swap positions of randomCard and currentCard in the deck + cards[currentIndex] = randomCard; + cards[randomIndex] = currentCard; + } + // Return the shuffled deck + return cards; +}; + +const makeDeck = () => { + // create the empty deck at the beginning + const newDeck = []; + const suits = ["hearts", "diamonds", "clubs", "spades"]; + const colors = ["red", "red", "black", "black"]; + + for (let suitIndex = 0; suitIndex < suits.length; suitIndex += 1) { + // make a variable of the current suit + const currentSuit = suits[suitIndex]; + const color = colors[suitIndex]; + + // loop to create all cards in this suit + // rank 1-13 + for (let rankCounter = 1; rankCounter <= 13; rankCounter += 1) { + // Convert rankCounter to string + let cardName = `${rankCounter}`; + + // 1, 11, 12 ,13 + if (cardName === "1") { + cardName = "ace"; + } else if (cardName === "11") { + cardName = "jack"; + } else if (cardName === "12") { + cardName = "queen"; + } else if (cardName === "13") { + cardName = "king"; + } + + // make a single card object variable + const card = { + name: cardName, + suit: currentSuit, + rank: rankCounter, + pic: `./images/cards/${cardName}_of_${currentSuit}.png`, + color: color, + }; + + // add the card to the deck + newDeck.push(card); // add double the cards to the deck + } + } + + return newDeck; +}; + +// shuffle the main deck first before choosing the cards to build the board +const cutDeck = () => { + const singleDeck = shuffleCards(makeDeck()); + const boardLength = (boardSize * boardSize) / 2; + let id = 0; + + for (let i = 0; i < boardLength; i++) { + const cardToPush = singleDeck.pop(); + const cardToPush2 = { ...cardToPush }; + + cardToPush.id = id++; + cardToPush2.id = id++; + + deck.push(cardToPush); + deck.push(cardToPush2); + } + + deck = shuffleCards(deck); +}; + +const initGame = () => { + // create this special deck by getting the doubled cards and + // making a smaller array that is ( boardSize squared ) number of cards + cutDeck(); + + // deal the cards out to the board data structure + for (let i = 0; i < boardSize; i += 1) { + board.push([]); + for (let j = 0; j < boardSize; j += 1) { + board[i].push(deck.pop()); + } + } + + const boardEl = buildBoardElements(board); + + const message = document.createElement("h2"); + message.id = "message"; + message.classList.add("bangers"); + message.innerText = "Select the first card"; + + if (playerName.length == 0) { + const nameDiv = document.createElement("div"); + nameDiv.id = "name"; + + const matchesWonDiv = document.createElement("div"); + matchesWonDiv.id = "matchesWon"; + matchesWonDiv.style.display = "none"; + document.body.appendChild(matchesWonDiv); + + const nameMessage = document.createElement("h2"); + nameMessage.classList.add("bangers"); + nameMessage.innerText = "Enter your name and press enter"; + nameDiv.appendChild(nameMessage); + + const nameInput = document.createElement("input"); + nameInput.type = "text"; + nameInput.id = "name-input"; + nameInput.classList.add("name-input"); + nameDiv.appendChild(nameInput); + + document.body.appendChild(nameDiv); + } + + const gameDiv = document.createElement("div"); + gameDiv.id = "game"; + if (playerName.length == 0) { + gameDiv.style.display = "none"; + } + + const timeDiv = document.createElement("div"); + timeDiv.style.display = "flex"; + timeDiv.style.justifyContent = "center"; + + const timeMessage = document.createElement("h2"); + timeMessage.classList.add("bangers"); + timeMessage.id = "timeMessage"; + timeMessage.innerText = "3:00"; + timeDiv.appendChild(timeMessage); + + const startButton = document.createElement("img"); + startButton.classList.add("start-button"); + startButton.src = "./images/play.png"; + startButton.addEventListener("click", () => { + startRound(); + }); + timeDiv.appendChild(startButton); + + const resetButton = document.createElement("img"); + resetButton.classList.add("reset-button"); + resetButton.src = "./images/undo.png"; + resetButton.addEventListener("click", () => { + resetRound(); + }); + + timeDiv.appendChild(resetButton); + gameDiv.appendChild(timeDiv); + + gameDiv.appendChild(message); + gameDiv.appendChild(boardEl); + + document.body.appendChild(gameDiv); +}; + +// if user gives up and wants to restart round +const resetRound = () => { + timeLeftInSeconds = 180; + clearInterval(timeInterval); + + board.length = 0; + deck.length = 0; + firstCard = null; + canClick = false; + matchedCards = 0; + + document.getElementById("game").remove(); + + initGame(); +}; + +// once user presses play button to start round +const startRound = () => { + canClick = true; + document.getElementById("message").innerHTML = `Select the first card`; + + timeInterval = setInterval(function () { + refreshTimer(); + }, 1000); +}; + +// to run every second and put a timer on the screen +const refreshTimer = () => { + if (timeLeftInSeconds > 1) { + timeLeftInSeconds--; + const secondsDisplay = ("0" + (timeLeftInSeconds % 60)).slice(-2); + const minutesDisplay = Math.floor(timeLeftInSeconds / 60); + + document.getElementById( + "timeMessage" + ).innerHTML = `${minutesDisplay}:${secondsDisplay}`; + } else { + resetRound(); + document.getElementById("message").innerText = "Time is up!"; + clearInterval(timeInterval); + } +}; + +// to receive the player's name once he/she presses enter +document.addEventListener("keydown", function (event) { + if (event.key == "Enter" && playerName.length == 0) { + playerName = document.getElementById("name-input").value; + document.getElementById( + "matchesWon" + ).innerHTML = `

${playerName}'s Matches Won: ${matchesWon}

`; + + document.getElementById("message").innerHTML = `Press play to start round`; + + document.getElementById("name").style.display = "none"; + document.getElementById("game").style.display = ""; + document.getElementById("matchesWon").style.display = ""; + } +}); + +initGame(); diff --git a/styles.css b/styles.css index 04e7110..c00eed0 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,110 @@ +:root { + --red: #e74c3c; + --blue: #3498db; + --orange: #ffc312; +} + +* { + margin: 0; + padding: 0; +} + body { - background-color: pink; + background-color: var(--blue); + text-align: center; +} + +.card { + padding: 2.5px; + border-radius: 10px; + margin: 10px; + background-color: var(--blue); + display: inline-block; + height: 145px; + width: 100px; + vertical-align: top; + perspective: 1000px; +} + +.card__inner { + width: 100%; + height: 100%; + transition: transform 1s; + transform-style: preserve-3d; + cursor: pointer; + position: relative; +} + +.card__inner.is-flipped { + transform: rotateY(180deg); +} + +.card__face { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + overflow: hidden; + box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2); +} + +.card__face--front { + background-color: var(--light); + transform: rotateY(180deg); +} + +.card__face--back { + background-image: linear-gradient( + to bottom right, + var(--primary), + var(--secondary) + ); + display: flex; + align-items: center; + justify-content: center; +} + +.orange { + border: 3px solid var(--orange); + border-radius: 7px; +} + +.card-pic { + width: 100%; +} + +.bangers { + font-family: "Bangers", cursive; + letter-spacing: 2.5px; +} + +.name-input { + outline: 0; + width: 20%; + border-width: 0 0 5px; + border-color: black; + background: transparent; + text-align: center; + font-size: 1.5em; +} + +.reset-button { + height: 25px; + margin-left: 10px; + cursor: pointer; +} + +.start-button { + height: 25px; + margin-left: 10px; + cursor: pointer; +} + +#timeMessage { + margin-bottom: 10px; +} + +#matchesWon { + margin-bottom: 10px; }