feat: add results

rincewizz · Feb 18, 2022 · 776aa51 · 776aa51
1 parent 4e2757a
commit 776aa51
Show file tree

Hide file tree

Showing 3 changed files with 197 additions and 32 deletions.
diff --git a/memory-game/css/style.css b/memory-game/css/style.css
@@ -26,14 +26,117 @@ main{
 }
 
 .game{
-
+  position: relative;
+  padding-bottom: 50px; 
 }
 .game__cards{
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 10px;
   margin: auto;
   width: 720px;
+  padding-bottom: 20px;  
+}
+.game__win{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+  background: rgb(0 0 0 / 50%);
+  backdrop-filter: blur(4px);
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.5s;
+}
+.game__win--show{
+  visibility: visible;
+  opacity: 1;
+}
+.game__win-text{
+  flex: 1 0 100%;
+  text-align: center;
+  font-size: 60px;
+  color: #d86c6c;
+  padding-bottom: 10px;  
+}
+.game__win button{
+  font-size: 20px;
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 0.4s;
+}
+.game__play-btn{
+  background: #9dd8bf;
+  border: 1px solid #126843;
+  color: #126843;
+}
+.game__play-btn:hover{
+  background: #baffe2;
+}
+.game__results-btn{
+  background: #3bb9d9;
+  border: 1px solid #1e5a6a;
+  color: #1e5a6a;
+}
+.game__results-btn:hover{
+  background: #5fdfff;
+}
+.game__results{
+  position: absolute;
+  background: rgb(0 0 0 / 90%);
+  width: 80%;
+  height: 80%;
+  padding: 20px;
+  text-align: center;
+  border: 1px solid #4a4c6e;
+  border-radius: 10px;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.5s;
+  color: #b2b2b2;
+}
+.game__results--show{
+  visibility: visible;
+  opacity: 1;
+}
+.game__results-text{
+  font-size: 30px;
+  padding-bottom: 10px;
+}
+.game__results-table{
+  margin: 20px auto;
+  width: 290px;
+  border-collapse: collapse;
+  border-spacing: 0px;
+  border: 1px solid;
+}
+.game__results-table td, 
+.game__results-table th{
+    border: 1px solid #868686;
+}
+.game__results-close{
+  background: #c25f5f;
+  border: 1px solid #623030;
+  color: #623030;
+}
+.game__results-close:hover{
+  background: #e67777;
+}
+.game__steps{
+  text-align: center;
+  font-size: 24px;
+  color: #6b6d88;
 }
 .card{
   padding-bottom: 100%;

diff --git a/memory-game/index.html b/memory-game/index.html
@@ -12,7 +12,7 @@
 
       </div>
     </header>
-    <main class="game">
+    <main class="game container">
 
     </main>
     <footer class="footer">

diff --git a/memory-game/js/index.js b/memory-game/js/index.js
@@ -38,8 +38,6 @@ function Card(id){
       <div class="card__back"><img src="img/dev.svg" alt=""></div>
       <div class="card__front"><img src="img/${this.id}.svg" alt=""></div>
     `; 
-    // this.eventOpened = new CustomEvent("opened");
-    // this.el.addEventListener("click", () => {this.flip()} );
   };
   this.getEl = function(){
     if(!this.el) this.createEl();
@@ -48,9 +46,6 @@ function Card(id){
   this.flip = function(){
     this.el.classList.toggle("card--flipped");
     this.opened=!this.opened;
-    if (this.opened) {
-      // this.el.dispatchEvent(this.eventOpened);
-    }
   };
   this.open = function(){
     if(!this.opened) this.flip();
@@ -66,12 +61,24 @@ let game = {
   rootElement: null,
   gameElement: null,
   match : [],
-  start({selector=".game"}){
-    this.rootElement = document.querySelector(selector);
-    this.generateCard();
+  step : 0,
+  openedCount : 0,
+  results : [],
+  init({selector=".game"}){
+    this.results = JSON.parse(window.localStorage.getItem("results", this.results));
+    this.rootElement = document.querySelector(selector);    
     this.render();
+    this.start();
+  },
+  start(){     
+    this.match =[];
+    this.step = 0;
+    this.gameStepsElement.children[0].innerText=this.step;
+    this.generateCard();
+    this.gameWinElement.classList.remove("game__win--show")
   },
   generateCard(){
+    this.gameElement.innerHTML="";
     this.cards=[];    
     let set = new Set();
 
@@ -92,49 +99,104 @@ let game = {
         arrCard.splice(index,1);
       }      
     }
+    this.renderCards();
 
   },
   render(){
     this.gameElement= document.createElement("section");
     this.gameElement.classList.add("game__cards");
-    this.rootElement.append(this.gameElement);
-
-    this.renderCards();
+    this.gameStepsElement = document.createElement("div");
+    this.gameStepsElement.classList.add("game__steps");
+    this.gameStepsElement.innerHTML="Количество ходов: <span class='game__steps-count'>0</span>";
+    this.gameWinElement = document.createElement("div");
+    this.gameWinElement.classList.add("game__win");
+    this.gameWinElement.innerHTML=`
+      <div class="game__win-text">Победа!</div>
+      <div class="game__win-action">
+        <button class="game__play-btn">Играть еще</button>
+        <button class="game__results-btn">Результаты</button>
+      </div>
+      <div class="game__results">        
+        <span class="game__results-text">Результаты</span>
+        <table class="game__results-table"></table>
+        <button class="game__results-close">Закрыть</button>
+      </div>
+    `;
+    this.rootElement.innerHTML="";
+    this.rootElement.append(this.gameElement, this.gameStepsElement, this.gameWinElement);    
 
     this.gameElement.addEventListener("click", e => {
       if(this.lock) return;
 
       let card = e.target.closest(".card");
       if(!card || card.card.hasMatch) return;
 
-      card.card.open();
-      this.match.push(card.card);
-
-      if(this.match.length==2){
-
-        if(this.match[0].id===this.match[1].id){
-          this.match.forEach(val => {val.hasMatch=true});
-          this.match=[];
-        }else{
-          this.lock=true;
-          setTimeout( () => {
-            this.match.forEach(val => {val.close()});
-            this.match=[]; 
-            this.lock=false;            
-          }, 500);        
-        }
-
-      }
+      this.openCard(card.card);
 
     });
+    this.gameWinElement.addEventListener("click", e => {
+      if(e.target.classList.contains("game__play-btn")) this.start();
+      if(e.target.classList.contains("game__results-btn")) this.showResultsTable();
+      if(e.target.classList.contains("game__results-close")){
+        this.gameWinElement.querySelector(".game__results").classList.remove("game__results--show");
+      }
+    });
   },
   renderCards(){
     this.cards.forEach( val => this.gameElement.append(val.getEl()) );
   },
+  openCard(cardObj){
+    cardObj.open();
+
+    this.match.push(cardObj);
+
+    if(this.match.length==2){
+      this.doStep();
+      if(this.match[0].id===this.match[1].id){
+        this.match.forEach(val => {val.hasMatch=true});
+        this.openedCount+=2;
+        if(this.openedCount==24){
+          this.win();
+        }
+        this.match=[];
+      }else{
+        this.lock=true;
+        setTimeout( () => {
+          this.match.forEach(val => {val.close()});
+          this.match=[]; 
+          this.lock=false;            
+        }, 500);        
+      }        
+    }
 
+  },
+  doStep(){
+    this.step++;
+    this.gameStepsElement.children[0].innerText=this.step;
+  },
+  win(){
+    this.saveResults();
+    let table = this.gameWinElement.querySelector(".game__results-table");
+    table.innerHTML=`<tr><th>№</th><th>Шаги</th></tr>`;
+
+    for(let i=0; i<this.results.length; i++){
+      table.insertAdjacentHTML("beforeend",`<tr><td>${i+1}</td><td>${this.results[i]}</td></tr>`);
+    }     
+    this.gameWinElement.classList.add("game__win--show");
+  },
+  saveResults(){
+    this.results.push(this.step);
+    if(this.results.length>10){
+      this.results.shift();
+    }
+    window.localStorage.setItem("results", JSON.stringify(this.results));
+  },
+  showResultsTable(){
+    this.gameWinElement.querySelector(".game__results").classList.add("game__results--show");
+  }
 
 };
 
 
-game.start({});
+game.init({});