You have accepted "+opponentName+"'s truce offer. The game is a tie. New game"); + ongoingGame = false; + isTurn = false; +}); + +$(document).on("click", "#btn-truce-decline", function(event){ + socket.emit("reject truce"); + $("#message-box").html("

×You have declined "+opponentName+"'s truce offer."); +}); + +window.onbeforeunload = function(){ + if (ongoingGame){ + return "By closing this page you will be disconnected from the match and lose. Are you sure you want to leave?"; + } + return undefined; +} + +/*Socket handling*/ +var socket; +function initializeEvents(){ + socket.on("invalid game", function(){ + $("#start-container").html("

Invalid game ID Go back

"); + socket.disconnect(); + socket = null; + }); + socket.on("full game", function(){ + $("#start-container").html("

U wot m8? U trying to join a full game m8. Try joining a new game or start a new one yourself. Go back

"); + socket.disconnect(); + socket = null; + }); + socket.on("game started", function(gameID){ + $("#start-container").html("

Game ID: "+gameID.toString()+"

Waiting for player...

"+playerName+"

"); + initBoard(1); + }); + socket.on("game joined", function(gameID, opponent){ + $("#start-container").html("

Game ID: "+gameID.toString()+" Request tie

"+opponent+"

"+playerName+"

"); + initBoard(2); + opponentName = opponent; + $("#btn-truce").css("display", "inline-block"); + }); + socket.on("player joined", function(player){ + $("#opponent-name").html(player); + isTurn = true; + $("#local-name").addClass("active"); + opponentName = player; + $("#btn-truce").css("display", "inline-block"); + }); + socket.on("turn start", function(){ + isTurn = true; + $("#local-name").addClass("active"); + $("#opponent-name").removeClass("active"); + }); + socket.on("turn end", function(){ + isTurn = false; + $("#local-name").removeClass("active"); + $("#opponent-name").addClass("active"); + }); + socket.on("move piece", function(origin, target){ + var pieceColor = "black"; + if(playerColor == "black") { pieceColor = "white"; } + var pieceType = "pawn"; + if($("#"+origin).hasClass("dame")){ pieceType = "dame"; } + $(".square").removeClass("last-move"); + $("#"+origin).removeClass("piece white black pawn dame"); + $("#"+origin).addClass("last-move"); + if((pieceColor == "black" && target.charAt(1) == "1") || (pieceColor == "white" && target.charAt(1) == "8")){ pieceType = "dame"; } + $("#"+target).addClass("piece "+pieceColor+" "+pieceType+" last-move"); + }); + socket.on("remove piece", function(pieceRemoved){ + $("#"+pieceRemoved).removeClass("piece white black pawn dame"); + }); + socket.on("truce requested", function(){ + $("#message-box").html("

"+opponentName+" wants to declare the game a tie. Do you accept their offer? Accept Decline

"); + }); + socket.on("truce accepted", function(){ + $("#message-box").html("

"+opponentName+" has accepted your truce offer. The game is a tie. New game"); + ongoingGame = false; + isTurn = false; + }); + socket.on("truce rejected", function(){ + $("#message-box").html("

×"+opponentName+" has declined your truce offer."); + }); + socket.on("you won", function(){ + $("#message-box").html("

Way to go! You've won! New game"); + ongoingGame = false; + isTurn = false; + }); + socket.on("you lost", function(){ + $("#message-box").html("

You've lost, victory goes to "+opponentName+". Better luck next time! New game"); + ongoingGame = false; + isTurn = false; + }); + socket.on("game message", function(data){ + $("#message-box").html("

"+data+"

"); + }); + socket.on("game disconnect", function(player){ + if(ongoingGame) + $("#message-box").html("

Player "+player+" disconnected New game

"); + ongoingGame = false; + isTurn = false; + }); +} +$(function(){ + $("#newgame").submit(function(event){ + socket = io(); + var form_data = $(this).serializeArray().reduce(function(obj, item) { + obj[item.name] = item.value; + return obj; + }, {}); + playerName = form_data.playername; + initializeEvents(); + socket.emit("start game", form_data); + $("#start-container").addClass("text-center"); + $("#start-container").html("

Starting game...

"); + return false; + }); + $("#joingame").submit(function(event){ + socket = io(); + var form_data = $(this).serializeArray().reduce(function(obj, item) { + obj[item.name] = item.value; + return obj; + }, {}); + playerName = form_data.player2name; + initializeEvents(); + socket.emit("join game", form_data); + $("#start-container").addClass("text-center"); + $("#start-container").html("

Joining game...

"); + return false; + }); +}) \ No newline at end of file diff --git a/client/no-js.html b/client/no-js.html new file mode 100644 index 0000000..608c5a5 --- /dev/null +++ b/client/no-js.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + Spanish Checkers by Yaroslav de la Peña Smirnov + + + < +

Give me the javascript, and I shall give you the game.

Yaroslav de la Peña Smirnov - 2017

Сделано для предмета "Прикладная Информатика", Лабораторная Работа №4, Вариант 5. Университет ИТМО, группа K3200.

> + + \ No newline at end of file -- cgit v1.2.3

Start a new game

Join a game

Waiting for player...

"+playerName+"

"+opponent+"

"+playerName+"

Starting game...

Joining game...

Give me the javascript, and I shall give you the game.