Seriesfinder Game

by Suman Kumar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body ng-app="GameModule" ng-controller="GameCtrl">
<h2 class="display-3">Series Finder Game</h2>
<p class="title">Guess numbers sequentially from 1 to 9</p>

<div class="game-card">
    <div class="card">
        <div class="card-header">
            <h4>Score : {{score}}</h4>
            <span ng-if="!gameCompleted">Next number to Guess : {{numberToGuess}}</span>
        </div>
        <div class="card card-inverse text-center"
             ng-class="(alertType === 'success') ? 'card-success' : (alertType === 'danger') ? 'card-danger' : 'card-info'">
            <div class="card-block">
                <blockquote class="card-blockquote">
                    <p>{{message}}</p>
                </blockquote>
            </div>
        </div>
        <div class="card-block">
            <table border="1px solid black" class="center">
                <tr ng-repeat="i in numbersLooper">
                    <td ng-repeat="j in numbersLooper" ng-click="evaluateGuess(i,j)" ng-attr-id="{{ 'elem-' + i + j}}"
                        class="hideNumber">
                        <h4>{{numbers[i][j]}}</h4>
                    </td>
                </tr>
            </table>
        </div>
        <div class="card-block">
            <a ng-click="restartGame()" href="#" class="btn btn-primary restart-button">Restart</a>
        </div>
        <div class="card-footer text-muted">
            <span>Total Guesses : {{totalGuesses}}</span>
        </div>
    </div>
</div>
</body>

CSS

table {
    margin: 0px auto;
}

.hideNumber {
    background-color: black;
    color: black;
}

h2 {
    text-align: center;
    margin: 30px 0;
}

p.title {
    text-align: center;
}

.game-card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 100px;
}

tr td {
    width: 65px;
    height: 65px;
    text-align: center;
}

.restart-button {
    float: right;
}

.card-footer .guess-efficiency {
    float: right;
}

JavaScript

var app = angular.module('GameModule', []);

app.controller('GameCtrl', function ($scope, $timeout, $window) {
    var rowsAndColumnLength = 3;
    var arrMaxLength = rowsAndColumnLength * rowsAndColumnLength;
    var guessedNumbers = [];

    $scope.numberToGuess = 1;
    $scope.numbersLooper = [];
    $scope.score = 0;
    $scope.message = "Start GUESSING, all the best !";
    $scope.alertType = "info";
    $scope.gameCompleted = false;
    $scope.totalGuesses = 0;

    for (let i = 0; i < rowsAndColumnLength; i++) {
        $scope.numbersLooper[i] = i;
    }

    $scope.evaluateGuess = function (x, y) {
        console.log("Guessed Index : [X,Y] = [" + x + "," + y + "]");

        if ($scope.gameCompleted || guessedNumbers.indexOf($scope.numbers[x][y]) !== -1) {
            if ($scope.gameCompleted) {
                $scope.message = "GAME OVER !! Hit Restart if you like to play again !";
                $scope.alertType = "info";
            }
            return;
        }

        if ($scope.numbers[x][y] === $scope.numberToGuess) {
            if ($scope.numberToGuess === arrMaxLength) {
                $scope.gameCompleted = true;

                $scope.score += 12;
                $scope.message = "Congrats, GAME COMPLETED !!";
                $scope.alertType = "info";
            } else {
                guessedNumbers.push($scope.numberToGuess);

                $scope.score += 11;
                $scope.message = "Right guess, continue !";
                $scope.alertType = "success";
            }
            $scope.numberToGuess++;
        } else {
            $timeout(function () {
                $('#elem-' + x + y).addClass("hideNumber");
            }, 200);

            $scope.message = "Wrong guess, try again";
            $scope.alertType = "danger";
        }

        $scope.totalGuesses++;
        $('#elem-' + x + y).removeClass("hideNumber");
    };

    $scope.numbers = (function () {
        var arr = [];

        while (arr.length <...