Front End

Front End

Now we have to make use of the tetris repo we have downloaded.

It has a js directory, index.html and and a style.css file. at first we change the extenstion of index.html to .ejs and put it in views/game directory. then put the rest in game directory in public.

|-- public
    |-- game
    	|-- style.css
    	|-- js
    		|-- controller.js
        	|-- render.js
        	|-- tetris.js

Now we can access to game at /game url.

For sweetalert also we put the directory in public as follows:

|-- public
    |-- sweetalert
    	|-- sweetalert2.min.css
    	|-- sweetalert2.min.js

Now we edit views/game/index.ejs. at first add the following line just after openning body tag to include game style sheet:

<link rel='stylesheet' href='/game/style.css' />

Then we change script sources as follows:

src='/game/js/tetris.js'
src='/game/js/controller.js'
src='/game/js/render.js'

We also need to include this to use cookies

<script src="/jquery/cookie.js" ></script>

Next we edit tetris.js , at first we define getHighScore and setHighScore functions to retrieve and store high score in cookies

function getHighScore() {
    var highscore = Cookies.get("highscore");
    if(!highscore)
        highscore = 0;
    return highscore;
} 

---

function setHighScore() {
    var highscore = getHighScore();
    if(score > highscore)
        highscore = score;
    Cookies.set("highscore",highscore)
    Cookies.set("username",Cookies.get("username"))
}	

Then we define a function to be able to post username and high score.

function postData (url,data) {
    return new Promise( function  (resolve,reject) {
        $.post('/game', data)
            .done(function(msg,st,dd){
                resolve()
            })
            .fail(function(xhr, status, error) {
                reject(xhr.status)
            });
    });
}	

The funciton post the provided data to the url. Promise will be explained later. for now it's just a type for variables that are return value of a asynchronous function.

Then we add the following code to prevent game to be started immediately after page loaded but to start the game after button click.

swal({
	 title: 'Start the game?',
	confirmButtonText: 'Start',
	showLoaderOnConfirm: true,
	allowOutsideClick: false
		}).then(function () {
			 setInterval( render, 10 );
			newGame();
});

Swal is the sweet alert code we have downloaded. it's also a promise which resolve on confirm button click and rejects on cancel button click. It's argument is options which is used to customize the modal such(e.g. confirmButtonText) So if we click on confirm button the newGame function is called.

Now we define submitScore function:

function submitScore() {
    return new Promise(function(resolve,reject){
	        swal({
	            title: 'Submit your high score',
	            input: 'text',
	            showCancelButton: true,
	            confirmButtonText: 'Submit',
	            showLoaderOnConfirm: true,
	            preConfirm: function (username) {
	                return new Promise(function (resolve,reject) {
	                    userScore.username = username;
	                    var postResult = postData("/game",userScore);
	                    postResult.then(function (statusCode) {
	                        resolve(userScore.highscore)
	                    }).catch(function (statusCode) {
	                        var message = "An error has been occured";
	                        if(statusCode == 409)
	                            message = "Username already exists!";
	                        reject(message);
	                    })
	                })
	            },
	            allowOutsideClick: false
	        }).then(function (score) {
	            swal({
	                type: 'success',
	                title: 'Your score '+score+' has been submitted!'
	            }).then(function () {
	                resolve()
	            })}).catch(function () {
	                resolve();
	        })
	    });
}

Now we edit tick function as follows to game get started after the high score has been submitted:

if (lose) {
            clearInterval(interval);
            var submitScoreResult = submitScore();
            submitScoreResult.then(function () {
                newGame();
                return false;
            });
        }