DysfunctionalCoders · RobPester · Oct 11, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+Back-up_Files
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/alien-lego.png b/images/alien-lego.png
diff --git a/images/goofy-lego.jpeg b/images/goofy-lego.jpeg
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/motorcycle-lego.jpeg b/images/motorcycle-lego.jpeg
diff --git a/images/pirate-lego.jpeg b/images/pirate-lego.jpeg
diff --git a/images/r2d2-lego.jpeg b/images/r2d2-lego.jpeg
diff --git a/images/sf-lego.jpeg b/images/sf-lego.jpeg
diff --git a/images/shuttle-lego.jpeg b/images/shuttle-lego.jpeg
diff --git a/images/spaceship-lego.jpeg b/images/spaceship-lego.jpeg
diff --git a/images/truck-lego.jpeg b/images/truck-lego.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RPesterW3Hw</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src=index.js></script>
+</head>
+
+<body>
+    <h1>Lego Memory Card Game</h1>
+    <h2>Turn the cards and match the images.</h2>
+    <h3>Score: <span id="score"></span></h3>
+    <h3>Timer: <span id="timer">00:00</span></h3>
+    <div id="modal">
+        <div class="modalcontainer">
+            <div>You completed this in <span id="timeAnchor"></span> seconds!</div>
+            <div id="modalpic"></div>
+            <div>Your score was <span id="finalScore">!</span></div>
+        </div>
+    </div>
+
+    <button id="reset">Reset</button>
+
+    <div id="gameboard"></div>
+
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,192 @@
+/* Identy the images to be used (6 matching and 1 for back of card) */
+document.addEventListener("DOMContentLoaded", function() {
+
+    const imageArray = [{
+            name: 'pirate',
+            img: "images/pirate-lego.jpeg"
+        },
+        {
+            name: 'pirate',
+            img: "images/pirate-lego.jpeg"
+        },
+        {
+            name: 'goofy',
+            img: "images/goofy-lego.jpeg"
+        },
+        {
+            name: 'goofy',
+            img: "images/goofy-lego.jpeg"
+        },
+        {
+            name: 'motorcycle',
+            img: "images/motorcycle-lego.jpeg"
+        },
+        {
+            name: 'motorcycle',
+            img: "images/motorcycle-lego.jpeg"
+        },
+        {
+            name: 'r2d2',
+            img: "images/r2d2-lego.jpeg"
+        },
+        {
+            name: 'r2d2',
+            img: "images/r2d2-lego.jpeg"
+        },
+        {
+            name: 'sf',
+            img: "images/sf-lego.jpeg"
+        },
+        {
+            name: 'sf',
+            img: "images/sf-lego.jpeg"
+        },
+        {
+            name: 'shuttle',
+            img: "images/shuttle-lego.jpeg"
+        },
+        {
+            name: 'shuttle',
+            img: "images/shuttle-lego.jpeg"
+        }
+    ]
+
+    imageArray.sort(() => 0.5 - Math.random())
+
+    const resetButton = document.getElementById('reset')
+    const timerDOMElement = document.getElementById('timer')
+    let isTimerRunning = false
+    let timeInSeconds = 0
+    let timeKeepingInterval
+    timerDOMElement.innerHTML = prettyPrintTime()
+    let isModalDisplayed = false
+    const modal = document.getElementById('modal')
+
+    modal.addEventListener('click', toggleModal)
+    resetButton.addEventListener('click', onResetButtonClicked)
+    const gameboard = document.getElementById("gameboard") // Identify the board area
+    const scoreDisplay = document.getElementById("score")
+    let cardsChosen = [] // an array of cards chosen
+    let cardsChosenId = [] // an array for card IDs
+    let cardsWon = []
+
+    // create the board environment
+    function createBoard() {
+        for (let i = 0; i < imageArray.length; i++) {
+            let card = document.createElement('img')
+            card.setAttribute('src', 'images/logo.png')
+            card.setAttribute('data-id', i)
+            gameboard.appendChild(card)
+            card.addEventListener('click', flipCard)
+        }
+    }
+
+    //reset button
+    function onResetButtonClicked() {
+        console.log("did my button click")
+        cardsChosen = [] // reset to empty
+        cardsChosenId = [] // reset to empty
+        cardsWon = [] // reset to empty
+        scoreDisplay.textContent = cardsWon.length
+        gameboard.innerHTML = ''
+        clearInterval(timeKeepingInterval)
+        timeInSeconds = 0
+        timerDOMElement.innerHTML = "00:00"
+        isTimerRunning = false
+        imageArray.sort(() => 0.5 - Math.random())
+        if (isModalDisplayed) {
+            toggleModal()
+        }
+        createBoard()
+    }
+
+    // make the time function look better
+    function prettyPrintTime() {
+        let minutes = Math.floor(timeInSeconds / 60);
+        let seconds = Math.floor(timeInSeconds - (minutes * 60));
+
+        if (minutes < 10) {
+            minutes = `0${minutes}`;
+        }
+
+        if (seconds < 10) {
+            seconds = `0${seconds}`;
+        }
+
+        return `${minutes}:${seconds}`;
+    }
+
+    // timer functionality
+    function startTimer() {
+        isTimerRunning = true
+        timeKeepingInterval = setInterval(() => {
+            timeInSeconds += 1
+
+            timerDOMElement.innerHTML = prettyPrintTime()
+        }, 1000);
+
+
+    }
+
+    //Find matches
+
+    function checkForMatch() {
+        let cards = document.querySelectorAll('img')
+        const optionOneId = cardsChosenId[0]
+        const optionTwoId = cardsChosenId[1]
+        if (cardsChosen[0] === cardsChosen[1]) {
+            // alert("You found a match!")
+            cardsWon.push(cardsChosen)
+        } else {
+            cards[optionOneId].setAttribute('src', 'images/logo.png')
+            cards[optionTwoId].setAttribute('src', 'images/logo.png')
+                // alert("Sorry, try again!")
+        }
+        cardsChosen = []
+        cardsChosenId = []
+        scoreDisplay.textContent = cardsWon.length
+        if (cardsWon.length === imageArray.length / 2) {
+            toggleModal()
+            clearInterval(timeKeepingInterval)
+        }
+    }
+
+    // Toggle the modal at end of game
+    function toggleModal() {
+        if (isModalDisplayed) {
+            // set as display None and update the variable
+            modal.style.display = "none"
+        } else {
+            // set display to initial
+            modal.style.display = "flex" //display modal
+            const modalTimeElement = document.getElementById('timeAnchor')
+            const modalScoreElement = document.getElementById('finalScore')
+
+            modalTimeElement.innerHTML = prettyPrintTime()
+            modalScoreElement.innerHTML = cardsWon.length
+        }
+        isModalDisplayed = !isModalDisplayed //update isModalDisplayed variable
+
+
+    }
+
+    //flip the cards
+
+    function flipCard() {
+        // check if timer is runnning, if not, then call startTimer
+        if (!isTimerRunning) {
+            startTimer()
+        }
+        let cardId = this.getAttribute("data-id")
+        cardsChosen.push(imageArray[cardId].name)
+        cardsChosenId.push(cardId)
+        this.setAttribute('src', imageArray[cardId].img)
+        if (cardsChosen.length === 2) {
+            setTimeout(checkForMatch, 700)
+        }
+
+    }
+
+    createBoard()
+
+})
diff --git a/style.css b/style.css
diff --git a/styles.css b/styles.css
@@ -0,0 +1,74 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: blueviolet;
+}
+
+h1 {
+    font-family: cursive;
+    color: red;
+    margin: 10px;
+}
+
+h2 {
+    font-family: cursive;
+    color: red;
+    margin: 10px;
+}
+
+h3 {
+    margin: 0;
+}
+
+#reset {
+    background-color: blue;
+    border: solid 5px green;
+    color: white;
+    font-size: 16px;
+    margin-top: 20px;
+    margin-bottom: 30px;
+}
+
+#gameboard {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 800px;
+    border: solid 10px red;
+}
+
+img {
+    width: 200px;
+    cursor: pointer;
+}
+
+#modal {
+    display: none;
+    position: fixed;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    background: rgb(0, 0, 0, .5);
+    cursor: pointer;
+}
+
+.modalcontainer {
+    align-self: center;
+    height: 400px;
+    width: 300px;
+    color: crimson;
+    font-size: large;
+    text-align: center;
+    font-weight: bold;
+    background: white;
+    border: solid 5px green;
+}
+
+#modalpic {
+    margin-left: 20px;
+    height: 90%;
+    justify-content: center;
+    background-image: url(images/alien-lego.png);
+    background-repeat: no-repeat;
+}