add API, render and storage methods for rankranking feature

Controller.js

@@ -3,50 +3,76 @@ class Controller {
       this._interface = inter;
       this._game = new Game("unknown", "normal");
       this._grid = grid;
+      this._table = new Table();
       this.game.initGame(this.grid, this.interface.timer);
+
       this.addListener(this.interface.difficultySelect, () => {
          this.game.changeDifficulty(this.interface.difficultySelect.value);
          this.game.initGame(this.grid, this.interface.timer, this.interface.actionsCounter);
          this.interface.changeGameBtn("start");
+
          if (document.getElementById('summary-popup')) this.interface.removeGameSummary();
       }, "change");
+
       this.addListener(this.interface.gameBtn, () => {
-         if (this.game.gameState === "init" || this.game.gameState === "stopped") this.game.startGame(this.grid, this.interface.timer);
-         else if (this.game.gameState === "ongoing") this.game.stopGame(this.grid);
+         if (this.game.gameState === "init" || this.game.gameState === "stopped")
+            this.game.startGame(this.grid, this.interface.timer);
+         else if (this.game.gameState === "ongoing")
+            this.game.stopGame(this.grid);
+
          this.interface.toggleGameBtn();
+
          if (document.getElementById('summary-popup')) this.interface.removeGameSummary();
 
          this.addListener(this.grid.root, function (e) {
             if ((this.game.gameState === "ongoing" || this.game.gameState === 'win') && e.target.className === "game-square") {
                this.interface.actionsCounter = this.game.stats.actionsCounter;
             }
+
             if (this.game.gameState === 'win') {
                this.game.stopGame(this.grid);
-               this.interface.addGameSummary(this.game.stats._getTimerResoult(), this.game.stats.actionsCounter, this.game.initGame, this.grid, this.interface.timer, this.interface.actionsCounter, this.game, document.getElementById('container'))
+               this.interface.addGameSummary(
+                  this.game.stats._getTimerResoult(),
+                  this.game.stats.actionsCounter,
+                  this.game.initGame,
+                  this.grid,
+                  this.interface.timer,
+                  this.interface.actionsCounter,
+                  this.game,
+                  document.getElementById('container'))
             }
          })
       });
+
       this.addListener(this.interface.resetBtn, () => {
          this.game.initGame(this.grid, this.interface.timer, this.interface.actionsCounter);
          this.interface.changeGameBtn("start");
+
          if (document.getElementById('summary-popup')) this.interface.removeGameSummary();
       });
+
    }
+
    get interface() {
       return this._interface;
    }
+
    set interface(inter) {
       return this._interface = inter;
    }
+
    get game() {
       return this._game;
    }
+
    set game(game) {
       return this._game = game;
    }
+
    get grid() {
       return this._grid;
    }
+
    set grid(grid) {
       return this._grid = grid;
    }

Game.js

@@ -2,16 +2,18 @@ class Game {
    constructor(username, difficulty) {
       this._makeAvailableValues = (from, to) => {
          const valuesTab = [];
-         let currentCodeValue = from.charCodeAt();
          const toCodeValue = to.charCodeAt();
-         for (
-            currentCodeValue; currentCodeValue <= toCodeValue; currentCodeValue++
-         ) {
+         let currentCodeValue = from.charCodeAt();
+
+         for (currentCodeValue; currentCodeValue <= toCodeValue; currentCodeValue++) {
             valuesTab.push(currentCodeValue);
          }
+
          return [...String.fromCharCode(...valuesTab)];
       };
+
       const _availableValues = this._makeAvailableValues("A", "Z");
+
       this.getAvailableValues = () => _availableValues;
 
       this._stats = new Stats(username, difficulty);
@@ -60,20 +62,26 @@ class Game {
             state !== "win")
       )
          throw new Error("incorect value of parameter");
+
       return (this._gameState = state);
    }
 
    _generateNumberOfSquares(difficulty) {
       if (difficulty === "easy") return (this.numberOfSquares = 24);
+
       if (difficulty === "normal") return (this.numberOfSquares = 36);
+
       if (difficulty === "hard") return (this.numberOfSquares = 48);
+
       this.stats.difficulty = "normal";
+
       return (this.numberOfSquares = 36);
    }
 
    _getRandomValue(values) {
       if (!values.length || !(this.getAvailableValues() instanceof Array))
          throw new Error("wrong type of available values");
+
       return values[Math.floor(Math.random() * values.length)];
    }
 
@@ -84,21 +92,23 @@ class Game {
    _makeAvailablePositions() {
       const availablePositions = [];
       let currentIndex = 0;
+
       while (currentIndex < this.numberOfSquares) {
          availablePositions.push(currentIndex);
          currentIndex++;
       }
-      if (
-         currentIndex !== availablePositions.length ||
-         availablePositions.length !== this.numberOfSquares
-      )
+
+      if (currentIndex !== availablePositions.length ||
+         availablePositions.length !== this.numberOfSquares)
          throw new Error("Incorrect initialization of Available Positions");
+
       return availablePositions;
    }
 
    _getRandom(available) {
       if (!available.length || !(available instanceof Array))
          throw new Error("wrong type of available");
+
       return available[Math.floor(Math.random() * available.length)];
    }
 
@@ -110,6 +120,7 @@ class Game {
       tab.sort((a, b) => {
          if (!(a instanceof Square && b instanceof Square))
             throw new Error("Element of Array has not require type");
+
          return a.order - b.order;
       });
    }
@@ -126,13 +137,16 @@ class Game {
    setSquare(index, newSquare) {
       if (!(newSquare instanceof Square))
          throw new Error("new square must be instance of Square class!");
+
       return (this.squares[index] = newSquare);
    }
 
    addSquare(newSquare) {
       if (!(newSquare instanceof Square))
          throw new Error("new square must be instance of Square class!");
+
       this.squares.push(newSquare);
+
       return newSquare;
    }
 
@@ -150,10 +164,7 @@ class Game {
    }
 
    initRandomizedSquares() {
-      if (
-         !this.getAvailableValues() ||
-         !(this.getAvailableValues() instanceof Array)
-      )
+      if (!this.getAvailableValues() || !(this.getAvailableValues() instanceof Array))
          throw new Error("wrong type of available values");
 
       if (this.squares.length) this.squares.length = 0;
@@ -165,11 +176,14 @@ class Game {
          const randomValue = this._getRandom(values);
          let randomPosition = this._getRandom(availablePositions);
          const sqr = this.addSquare(new Square(randomValue, randomPosition));
+
          this._removeAscribed(
             availablePositions,
             availablePositions.indexOf(randomPosition)
          );
+
          randomPosition = this._getRandom(availablePositions);
+
          this.addSquare(new Square(randomValue, randomPosition, sqr));
          this._removeAscribed(values, values.indexOf(randomValue));
          this._removeAscribed(
@@ -189,20 +203,22 @@ class Game {
          activeSquare: null,
          state: false
       };
+
       return e => {
          if (!(this.getSquare(e.target.dataset.order).isMatched || this.gameState === 'failed')) {
             this.stats.updateActionsCounter();
+
             if (prev.active === null || prev.state === false) {
                prev.active = e.target;
                prev.activeSquare = this.getSquare(prev.active.dataset.order);
                prev.activeSquare.changeActivity();
                prev.active.textContent = prev.activeSquare.value;
                prev.active.style.backgroundColor = prev.activeSquare.color;
                prev.state = true;
+
                return;
             }
 
-
             const active = e.target;
             const activeSquare = this.getSquare(active.dataset.order);
 
@@ -224,7 +240,6 @@ class Game {
                   prev.active.style.backgroundColor = activeSquare.getPassiveColor();
                   prev.active.textContent = "";
                   active.textContent = "";
-
                   this.gameState = 'ongoing';
                }, 500)
             }
@@ -234,11 +249,7 @@ class Game {
                prev.activeSquare = null;
             }
 
-            // prev.active = active;
-            // prev.activeSquare = activeSquare;
             prev.state = false;
-            //   active = prev.active;
-            //   activeSquere = prev.activeSquare;
          }
       };
    }
@@ -248,13 +259,15 @@ class Game {
    initGame(grid, timer, counter = null) {
       if (this.gameState === "ongoing" || this.gameState === "stopped")
          this.resetGame(grid, timer, counter);
+
       this.gameState = "init";
       grid.root.className = `game-grid ${this.stats.difficulty.toString()}`;
       grid.render(this.initRandomizedSquares());
    }
 
    startGame(grid, timer) {
       if (!(this.gameState === "init" || this.gameState === "stopped")) return;
+
       this.gameState = "ongoing";
       grid.root.addEventListener("click", this._gameEventHandler);
       this.stats.startTimer(timer);
@@ -275,7 +288,6 @@ class Game {
    }
 
    checkIfWin() {
-      // return this.numberOfMatchedSqueres === 2 ? true : false;
       return this.numberOfMatchedSqueres === this.numberOfSquares ? true : false;
    }
 }

Grid.js

@@ -1,9 +1,9 @@
 class Grid {
    constructor(root) {
       this._root = document.getElementById(root);
-      // this._numberOfSquares = numberOfSquares;
       this._squares = [];
    }
+
    get root() {
       return this._root;
    }
@@ -18,23 +18,27 @@ class Grid {
 
    renderSquare(wrapper, square, index) {
       const elem = document.createElement('div');
-      // elem.textContent = square.value;
+
       elem.id = `sq-${index + 1}`;
       elem.classList.add('game-square');
       elem.dataset.value = square.value;
       elem.dataset.order = square.order;
       elem.dataset.isActive = square.isActive.toString();
       elem.dataset.isMatched = square.isMatched.toString();
       elem.style.backgroundColor = square.color;
+
       wrapper.appendChild(elem)
    }
 
    render(squares) {
       this.root.innerHTML = '';
+
       const wrapper = document.createDocumentFragment();
+
       squares.forEach((square, index) => {
          this.renderSquare(wrapper, square, index);
       });
+
       this.root.appendChild(wrapper);
    }
 }

Interface.js

@@ -95,11 +95,13 @@ class Interface {
 
   addGameSummary(time, actions, restartCallback, grid, timer, counter, binded, container = document.body) {
     const summaryPopup = document.createElement('div');
+
     summaryPopup.innerHTML = `
     <h1>Win!</h1>
     <h2>Time: ${time}</h2>
     <h3>Number of actions: ${actions}</h3>
     `;
+
     container.style.position = 'relative';
     summaryPopup.style.width = '600px';
     summaryPopup.style.height = '300px';
@@ -111,20 +113,24 @@ class Interface {
     summaryPopup.style.backgroundColor = 'green';
     summaryPopup.style.textAlign = 'center';
     summaryPopup.id = 'summary-popup';
+
     const btn = document.createElement('button');
+
     btn.textContent = 'NEW GAME';
     btn.id = 'new-game-btn';
     btn.className = 'btn';
     btn.style.backgroundColor = 'red';
     summaryPopup.appendChild(btn);
     container.appendChild(summaryPopup);
+
     const btnHtml = document.getElementById('new-game-btn');
+
     btnHtml.addEventListener('click', () => {
       restartCallback.call(binded, grid, timer, counter);
       this.removeGameSummary();
+
       if (this.gameBtn.dataset.game === 'stop') this.changeGameBtn('start');
     });
-
   }
 
   removeGameSummary(elem = document.getElementById('summary-popup')) {

Result.js

@@ -1,20 +1,21 @@
 class Result {
    constructor(time = null, actions = null, playerName = '') {
-      if (!(time || actions)) {
+      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';
    }
+
    get time() {
       return this._time;
    }
 
    set time(time) {
-      if (!time) {
+      if (!time)
          throw new Error("You have to set time property");
-      }
+
       return this._time = time;
    }
 
@@ -23,9 +24,9 @@ class Result {
    }
 
    set actions(actions) {
-      if (!actions) {
+      if (!actions)
          throw new Error("You have to set actions property");
-      }
+
       return this._actions = actions;
    }