memory game with angular

Question

I'm remaking a memory game to become familiar with controllerAs View Syntax. I've narrowed the problem to the check function; but i might be wrong. The check function passes card as a parameter but when i use console.log(card) there is no value for card, when card should have the value of the array hiragana or optionally letters.

   (function() {

// constant variables 
var constants = new (function() {
    var rows = 3;
    var columns = 6;
    var numMatches = (rows * columns) / 2;
    this.getRows = function() { return rows; };
    this.getColumns = function() { return columns; };
    this.getNumMatches = function() { return numMatches; };
})();

// Global Variables
var currentSessionOpen = false;
var previousCard = null;
var numPairs = 0;

// this function creates deck of cards that returns an object of cards 
// to the caller
function createDeck() {
    var rows = constants.getRows();
    var cols = constants.getColumns();
    var key = createRandom();
    var deck = {};
    deck.rows = [];

    // create each row
    for(var i = 0; i < rows; i++) {
        var row = {};
        row.cards = [];

        // create each card in the row
        for (var j = 0; j < cols; j++) {
            var card = {};
            card.isFaceUp = false;
            card.item = key.pop();
            row.cards.push(card);
        }
        deck.rows.push(row);
    }
    return deck;
}

// used to remove something form an array by index
function removeByIndex(arr, index) {
    arr.splice(index, 1);
}

function insertByIndex(arr, index, item) {
    arr.splice(index, 0, item);
}

// creates a random array of items that contain matches
// for example: [1, 5, 6, 5, 1, 6]
function createRandom() {
    var matches = constants.getNumMatches();
    var pool = [];
    var answers = [];
    var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'
                    , 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R'
                    , 'S', 'T', 'U', 'W', 'X', 'Y', 'Z'];

    var hiragana = ['あ', 'い', 'う', 'え', 'お', 'か', 'が', 'き'
                    , 'ぎ', 'く', 'ぐ', 'け', 'げ', 'こ', 'ご', 'さ'
                    , 'ざ', 'し', 'じ', 'す', 'ず', 'せ', 'ぜ', 'そ'
                    , 'ぞ', 'た', 'だ', 'ち', 'ぢ', 'つ', 'づ', 'て'
                    , 'で', 'と', 'ど', 'な', 'に', 'ぬ', 'ね', 'の'
                    , 'は', 'ば', 'ぱ', 'ひ', 'び', 'ぴ', 'ふ', 'ぶ'
                    , 'ぷ', 'へ', 'べ', 'ぺ', 'ほ', 'ぼ', 'ぽ', 'ま'
                    , 'み', 'む', 'め', 'も', 'や', 'ゆ', 'よ', 'ら'
                    , 'り', 'る', 'れ', 'ろ', 'わ', 'を', 'ん'];
    // set what kind of item to display
    var items = hiragana;

    // create the arrays for random numbers and item holder
    for (var i = 0; i < matches * 2; i++) {
        pool.push(i); // random numbers
    }

    // generate an array with the random items
    for (var n = 0; n < matches; n++) {
        // grab random letter from array and remove that letter from the
        // original array
        var randLetter = Math.floor((Math.random() * items.length));
        var letter = items[randLetter];
        removeByIndex(items, randLetter);
        // generate two random placements for each item
        var randPool = Math.floor((Math.random() * pool.length));

        // remove the placeholder from answers and insert the letter into 
        // random slot
        insertByIndex(answers, pool[randPool], letter);

        // remove random number from pool
        removeByIndex(pool, randPool);

        // redo this process for the second placement
        randPool = Math.floor((Math.random() * pool.length));
        insertByIndex(answers, pool[randPool], letter);

        // remove rand number from pool
        removeByIndex(pool, randPool);
    }
    return answers;
} 

angular.module('cards', ['ngAnimate']);

  angular
    .module('cards')
    .controller('CardController', CardController);

  function CardController($timeout) {

    /* jshint validthis: true */
    var vm = this;
    vm.deck = createDeck();
    vm.isGuarding = true;
    vm.inGame = false;

    function check(card) {
        if (currentSessionOpen && previousCard != card && previousCard.item == card.item && !card.isFaceUp) {
          card.isFaceUp = true;
            console.log(card.isFaceUp);
          previousCard = null;
          currentSessionOpen = false;
          numPairs++;
        } else if (currentSessionOpen && previousCard != card && previousCard.item != card.item && !card.isFaceUp) {
          vm.isGuarding = true;
          vm.card.isFaceUp = true;
            console.log(vm.card.isFaceUp)
          currentSessionOpen = false;
          $timeout(function() {
            previousCard.isFaceUp = card.isFaceUp = false;
            previousCard = null;
            vm.isGuarding = vm.timeLimit ? false : true;
          }, 1000);
        } else {
          card.isFaceUp = true;
          currentSessionOpen = true;
          previousCard = card;
        }

        if (numPairs == constants.getNumMatches()) {
          vm.stopTimer();
        }
      } //end of check()

    // for the timer
    vm.timeLimit = 60000;
    vm.isCritical = false;

    var timer = null;

    // start the timer as soon as the player presses start
    vm.start = function() {
        // I need to fix this redundancy. I initially did not create this
        // game with a start button.
        vm.deck = createDeck();
        // set the time of 1 minutes and remove the cards guard
        vm.timeLimit = 60000;
        vm.isGuarding = false;
        vm.inGame = true;

        (vm.startTimer = function() {
          vm.timeLimit -= 1000;
          vm.isCritical = vm.timeLimit <= 10000 ? true : false;

          timer = $timeout(vm.startTimer, 1000);
          if (vm.timeLimit === 0) {
            vm.stopTimer();
            vm.isGuarding = true;
          }
        })();
      }
      // function to stop the timer
    vm.stopTimer = function() {
      $timeout.cancel(timer);
      vm.inGame = false;
      previousCard = null;
      currentSessionOpen = false;
      numPairs = 0;
    }
  } //end CardController

})();


<!doctype html>
<html ng-app="cards">
<head>
   <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.js"></script>
    <link rel="stylesheet" href="cards.css">
</head>

<body>
    <div class="cntr" ng-controller="CardController as cards">
        <div class="timer" ng-class="{critical:cards.isCritical}">
            {{cards.timeLimit | date: 'm:ss'}}  
        </div>
        <table class="table-top">
            <tr ng-repeat="row in cards.deck.rows">
                <td ng-repeat="card in row.cards">
                    <div class="card_container {{!card.isFaceUp ? '' : 'flip'}}" ng-click="cards.isGuarding || check(card)" >
                        <div class="card shadow">
                            <div class="front face"></div>
                            <div class="back face text-center pagination-center">
                                <p> {{card.item}} </p>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <div class="startbtn">
            <button type="button" class="btn btn-default btn-lg" ng-disabled="cards.inGame == true" ng-click="cards.start()">Start</button>
        </div>
    </div>
    <script type="text/javascript" src="cards.js"></script>
</body>
</html>

Answer 1

You need to make your check function visible to the view.

vm.check = check;

also when calling the function, since you are using

ng-controller="CardController as cards"

you need to call the function as cards.check() from the view.