make feature which adds new game result to rank table to the right pl…

…ace, finish all other basic game features
szymonSys · Sep 14, 2019 · 6845b50 · 6845b50
1 parent 89dfa0a
commit 6845b50
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 16 deletions.
diff --git a/Controller.js b/Controller.js
@@ -14,6 +14,18 @@ class Controller {
          if (document.getElementById('summary-popup')) this.interface.removeGameSummary();
       }, "change");
 
+      this.addListener(this.interface.nameBtn, () => {
+
+         if (this.game.gameState !== 'ongoing' && this.game.gameState !== 'failed') {
+            if (!this.interface.nameInput.value) {
+               this.interface.nameInput.style.backgroundColor = 'red';
+               setTimeout(() => this.interface.nameInput.style.backgroundColor = '#ffffff', 1000);
+            } else {
+               this.game.stats.username = this.interface.nameInput.value;
+            }
+         }
+      });
+
       this.addListener(this.interface.gameBtn, () => {
          if (this.game.gameState === "init" || this.game.gameState === "stopped")
             this.game.startGame(this.grid, this.interface.timer);
@@ -31,6 +43,17 @@ class Controller {
 
             if (this.game.gameState === 'win') {
                this.game.stopGame(this.grid);
+
+               const result = new Result(
+                  this.game.stats._getTimerResoult(),
+                  this.game.stats.actionsCounter,
+                  this.game.stats.difficulty,
+                  this.game.stats.username
+               );
+
+               this.table.addSortedResult(result);
+               this.table.addResultToView(result);
+
                this.interface.addGameSummary(
                   this.game.stats._getTimerResoult(),
                   this.game.stats.actionsCounter,
@@ -50,7 +73,6 @@ class Controller {
 
          if (document.getElementById('summary-popup')) this.interface.removeGameSummary();
       });
-
    }
 
    get interface() {
@@ -77,6 +99,14 @@ class Controller {
       return this._grid = grid;
    }
 
+   get table() {
+      return this._table;
+   }
+
+   set table(table) {
+      return this._table = table;
+   }
+
    addListener(elem, callback, eventType = "click", binded = this) {
       elem.addEventListener(eventType, callback.bind(binded));
    }

diff --git a/Game.js b/Game.js
@@ -288,6 +288,7 @@ class Game {
    }
 
    checkIfWin() {
-      return this.numberOfMatchedSqueres === this.numberOfSquares ? true : false;
+      // return this.numberOfMatchedSqueres === this.numberOfSquares ? true : false;
+      return this.numberOfMatchedSqueres === 2 ? true : false;
    }
 }
diff --git a/Grid.js b/Grid.js
@@ -26,6 +26,7 @@ class Grid {
       elem.dataset.isActive = square.isActive.toString();
       elem.dataset.isMatched = square.isMatched.toString();
       elem.style.backgroundColor = square.color;
+      elem.textContent = square.value;
 
       wrapper.appendChild(elem)
    }

diff --git a/Interface.js b/Interface.js
@@ -44,7 +44,7 @@ class Interface {
   }
 
   get nameBtn() {
-    return this._resetBtn;
+    return this._nameBtn;
   }
 
   set nameBtn(nameBtn) {

diff --git a/Result.js b/Result.js
@@ -1,11 +1,12 @@
 class Result {
-   constructor(time = null, actions = null, playerName = '') {
+   constructor(time = null, actions = null, difficulty = null, playerName = '') {
       if (!(time || actions))
          throw new Error("You have to set time and actions properties");
 
       this._time = time;
       this._actions = actions;
       this._playerName = playerName ? playerName : 'anonim';
+      this._difficulty = difficulty;
    }
 
    get time() {
@@ -37,4 +38,15 @@ class Result {
    set playerName(playerName) {
       return this._playerName = playerName ? playerName : 'anonim';
    }
+
+   get difficulty() {
+      return this._difficulty;
+   }
+
+   set difficulty(difficulty) {
+      if (!difficulty)
+         throw new Error("You have to set difficulty property");
+
+      return this._difficulty = difficulty;
+   }
 }
diff --git a/Table.js b/Table.js
@@ -20,6 +20,7 @@ class Table {
             playerName: "result-name",
             time: "result-time",
             actions: "result-counter",
+            difficulty: "result-difficulty"
          },
          style: {
             'display': "flex",
@@ -134,7 +135,7 @@ class Table {
 
    loadFromStorage() {
       if (this.hasStorage()) {
-         return JSON.parse(localStorage.getItem('rankTable')).map(result => new Result(result._time, result._actions, result._playerName));
+         return JSON.parse(localStorage.getItem('rankTable')).map(result => new Result(result._time, result._actions, result._difficulty, result._playerName));
       } else return [];
    }
 
@@ -158,14 +159,16 @@ class Table {
       for (let i = 0; i < this.rankTable.length; i++) {
 
          const result = document.createElement('div');
-         result.id = this.resultElementProps.id;
+         // result.id = `result-${i+1}`;
+         result.dataset.type = this.resultElementProps.id;
          result.className = this.resultElementProps.id;
 
          for (const prop in this.resultElementProps.style) {
             result.style[prop] = this.resultElementProps.style[prop];
          }
 
          for (const id in this.resultElementProps.typeId) {
+            result.dataset[id] = id === 'number' ? i + 1 : this.rankTable[i][id];
             result.innerHTML += `<div id="${this.resultElementProps.typeId[id]}" style = "${this.resultElementProps.childWidth}" class="${this.resultElementProps.typeClass}">
                <span>${id === 'number' ? i+1 : this.rankTable[i][id]}</span>
             </div>`;
@@ -176,8 +179,65 @@ class Table {
       this.htmlTable.appendChild(docFragment);
    }
 
-   addResultToView(result) {
+   addResultToView(result, by = 'time') {
 
+      function addNewNode(i) {
+         const newNode = document.createElement('div');
+
+         newNode.dataset.type = this.resultElementProps.id;
+         newNode.className = this.resultElementProps.id;
+
+         for (const prop in this.resultElementProps.style) {
+            newNode.style[prop] = this.resultElementProps.style[prop];
+         }
+
+         for (const id in this.resultElementProps.typeId) {
+            newNode.dataset[id] = id === 'number' ? +i : result[id];
+            newNode.innerHTML += `<div id="${this.resultElementProps.typeId[id]}" style="${this.resultElementProps.childWidth}" class="${this.resultElementProps.typeClass}">
+                  <span>${id === 'number' ? +i: result[id]}</span>
+               </div>`;
+         }
+
+         return newNode
+      }
+
+      if (!result instanceof Result)
+         throw new Error('parameter must be instance of Result');
+
+      let index = 0;
+
+      if (!this.htmlTable.childNodes.length)
+         this.htmlTable.appendChild(addNewNode.call(this, 0));
+      else {
+         for (const node of [...this.htmlTable.childNodes]) {
+            index++;
+
+            if (!node.previousSibling && result.time <= node.dataset.time) {
+               this.htmlTable.insertBefore(addNewNode.call(this, node.dataset.number), node);
+
+               break;
+
+            } else if (!node.nextSibling && result.time >= node.dataset.time) {
+               this.htmlTable.appendChild(addNewNode.call(this, node.dataset.number));
+
+               break;
+
+            } else if (result.time > node.dataset.time && result.time <= node.nextSibling.dataset.time) {
+               this.htmlTable.insertBefore(addNewNode.call(this, node.dataset.number), node.nextSibling);
+
+               break;
+            }
+         }
+      }
+
+      const htmlNodes = [...this.htmlTable.childNodes];
+
+      console.log(index)
+
+      for (let i = index; i <= htmlNodes.length - 1; i++) {
+         htmlNodes[i].dataset.number++;
+         htmlNodes[i].firstChild.innerHTML = `<span>${htmlNodes[i].dataset.number}</span>`;
+      }
    }
 
    binarSearching = (elem, tab) => {
@@ -203,7 +263,10 @@ class Table {
       if (result[by] === undefined)
          throw new Error("set correct type of sorting");
 
-      if (!this.rankTable.length) this.pushResult(result);
+      if (!this.rankTable.length) {
+         this.pushResult(result);
+         return;
+      };
 
       if (!isSorted) this.sortTable(table, by, order);
 

diff --git a/index.html b/index.html
@@ -48,15 +48,9 @@
           <div id="header-name" class="header-part">name</div>
           <div id="header-time" class="header-part">time</div>
           <div id="header-counter" class="header-part">actions</div>
+          <div id="header-difficulty" class="header-part">difficulty</div>
         </div>
-        <div id="results-table">
-          <!-- <div id = "rank-table-result" class="rank-table-result">
-          <div id="result-number" class="result-part"></div>
-          <div id="result-name" class="result-part"></div>
-          <div id="result-time" class="result-part"></div>
-          <div id="result-counter" class="result-part"></div>
-        </div> -->
-        </div>
+        <div id="results-table"></div>
       </div>
     </div>
     <script src="Interface.js"></script>