Add notifications

app.js

@@ -1,17 +1,18 @@
-/* possible extension:
-    Get random images from unsplash
-    Use some CDN to optimize the images (e.g. cloudinary, cloudflare)
-    Or some image resizer api - https://img-resize.com/examples
-    
-    https://app.contentful.com/spaces/t55nbyyaqwhu/onboarding/copy
-    is available on
-        https://app.contentful.com/spaces/t55nbyyaqwhu/home
+/* 
+    Extension:
+    - Add better styling
+    - Slap react on it
+    - Slap ElectronJs
+    - Get random images from unsplash
+        - Consider CDN e.g. cloudinary, cloudflare
+        - Consider contentful CDN
+            - https://app.contentful.com/spaces/t55nbyyaqwhu/home
+            - https://app.contentful.com/spaces/t55nbyyaqwhu/onboarding/copy
+        - Consider image resizer api e.g. https://img-resize.com/examples    
 */
 
 const boardImages  = {
     "unflipped" : "images/unflipped.jpg",
-    "matched" : "images/matched.jpg",
-
     "burger"    : "images/burger.jpg",
     "fries"     : "images/fries.jpg",
     "hotdog"    : "images/hotdog.jpg",
@@ -24,12 +25,11 @@ const matchList = [ "burger", "fries", "hotdog", "icecream", "milkshake", "pizza
 
 let cardList = [];
 
-const numMatches = matchList.length * 2;
-
 let cardsChosen_ID = [];
 let cardsChosen_Name = [];
 
-// creating the game board
+let matchesFound = 0;
+
 const grid = document.querySelector('#grid');
 
 function createCard(name, id){
@@ -39,7 +39,6 @@ function createCard(name, id){
     return card; 
 }
 
-
 function createPairs(cardList){
     return cardList.reduce((acc, item)=>{
         acc.push(item)
@@ -55,7 +54,6 @@ function randomizeList(thisList){
 function initializeBoard(){
 
     cardList = randomizeList(createPairs(matchList));
-    console.log(cardList)
     for (let id=0; id < cardList.length; id++){
         var card = createCard( "unflipped", id);
         card.addEventListener('click', flipCard);
@@ -73,15 +71,12 @@ function getImageWithID(id){
     return result;
 }
 
-
 function showCards(kind){
     let image;
 
     cardsChosen_ID.map((id, index)=>{
         if(kind == "miss"){
             image = boardImages["unflipped"];
-        } else if (kind == "hit") {
-            image = boardImages["matched"];
         } else {
             image = boardImages[cardsChosen_Name[index]];
         }
@@ -95,60 +90,59 @@ function isMatch(){
 
 
 function disableChosen(id){
-    console.log('disable called')
     document.querySelectorAll('img').forEach((node)=>{
         if (node.getAttribute('data-id') == id){
             node.removeEventListener('click', flipCard);
         }
     });
 }
 
+function resetGame(){
+    cardsChosen_ID = [];
+    cardsChosen_Name = [];
+    matchesFound = 0;
+    document.querySelectorAll('img').forEach((node)=>{
+        node.setAttribute("src", boardImages["unflipped"]);
+    })
+}
+
+function updateMatchCounter(){
+    document.querySelector('#counter').innerText = `Found: ${matchesFound}`;
+}
+
+function endGame(){
+    document.querySelector('#counter').innerText = "You won!!!";
+}
+
 function flipCard(){
-    console.log('clicked!')
     var cardID = this.getAttribute('data-id');
     var cardName = cardList[cardID];
-    //var cardImage = boardImages[cardName];
 
-    // add to chosen cards
     cardsChosen_ID.push(cardID);
     cardsChosen_Name.push(cardName)
 
-    // show chosen cards
     showCards("default")
 
-    // if cardsChosen has 2 cards, show card and check match
     if(cardsChosen_ID.length > 1){
-        setTimeout(() => {
-            // check match
-            //      if card 1 == card 2
-            //          increase matched[], remove eventlistener, show alert, show white
-            //          if matched[] == 12, show "Congratulations"
-            //      if card 1 != card 2
-            //          show sorry, show blank, clear cardsChosen        
+        setTimeout(() => {       
             if(isMatch()){
+                matchesFound += 2;
+                updateMatchCounter();
                 cardsChosen_ID.map((id)=>{
                     disableChosen(id);
                 })
-                //showCards("hit");
             } else {
                 showCards("miss");
             }
 
             cardsChosen_ID = []
             cardsChosen_Name = []
 
-            console.log("Your chosen files are now ", cardsChosen_ID);
-        }, 1000);
+            if (matchesFound == cardList.length){
+                endGame();
+            }
+        }, 650);
     }
-
-
 }
 
-initializeBoard();
-
-
-
-/*
-document.addEventListener("DOMContentLoaded", ()=>{
-
-})*/
+initializeBoard();