From 67fdec20726e48ba3a934cb25bb30d47ec4a4f29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yaroslav=20De=20La=20Pe=C3=B1a=20Smirnov?= Date: Wed, 29 Nov 2017 11:44:34 +0300 Subject: Initial commit, version 0.5.3 --- client/js/index.js | 540 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 540 insertions(+) create mode 100644 client/js/index.js (limited to 'client/js') diff --git a/client/js/index.js b/client/js/index.js new file mode 100644 index 0000000..8e96fd6 --- /dev/null +++ b/client/js/index.js @@ -0,0 +1,540 @@ +/* +Created by Yaroslav de la Peña Smirnov +This software is provided under the 3-Clause BSD License + +Copyright 2017 Yaroslav de la Peña Smirnov + +Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. + +2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. + +3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +*/ + +/*Game logic*/ +var playerName = ""; +var opponentName = ""; +var playerColor = "white"; +var isTurn = false; +var ongoingGame = false; +var defaultSquareIDs = [ + 'a8', 'b8', 'c8', 'd8', 'e8', 'f8', 'g8', 'h8', + 'a7', 'b7', 'c7', 'd7', 'e7', 'f7', 'g7', 'h7', + 'a6', 'b6', 'c6', 'd6', 'e6', 'f6', 'g6', 'h6', + 'a5', 'b5', 'c5', 'd5', 'e5', 'f5', 'g5', 'h5', + 'a4', 'b4', 'c4', 'd4', 'e4', 'f4', 'g4', 'h4', + 'a3', 'b3', 'c3', 'd3', 'e3', 'f3', 'g3', 'h3', + 'a2', 'b2', 'c2', 'd2', 'e2', 'f2', 'g2', 'h2', + 'a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1' +]; +var squareIDs; +var upperPieces = "piece black pawn"; +var lowerPieces = "piece white pawn"; +function initBoard(player){ + if (player == 1){ + squareIDs = defaultSquareIDs; + playerColor = "white"; + upperPieces = "piece black pawn"; + lowerPieces = "piece white pawn"; + } + else { + playerColor = "black"; + squareIDs = []; + for (i = defaultSquareIDs.length - 1; i >= 0; i--){ + squareIDs.push(defaultSquareIDs[i]); + } + upperPieces = "piece white pawn"; + lowerPieces = "piece black pawn"; + } + $("#board-container").html("
") + var i = 0, j = 0, k = 0; + var bc = ""; + for (i = 0; i < 8; i++){ + bc += ""; + for(j = 0; j < 8; j++){ + bc += "\n"; + k++; + } + bc += "\n"; + } + bc += "\n"; + $("#board").html(bc); + ongoingGame = true; +} + +function getMoves(event){ + if (!isTurn){ return; } + var piece = event.target; + $(".square").removeClass("selected kill"); + $(".square").removeClass("move"); + $(event.target).addClass("selected"); + var pieceColor = "white"; + var pieceType = "pawn"; + if ($(piece).hasClass("black")){ pieceColor = "black"; } + if ($(piece).hasClass("dame")){ pieceType = "dame"; } + var pieceID = $(piece).attr("id"); + var pX = pieceID.charCodeAt(0)-96; + var pY = parseInt(pieceID.charAt(1)); + if(pieceType == "dame"){ + var opponent = "black"; + if ($(piece).hasClass("black")){ opponent = "white"; } + var mY = pY+1; + var mRX = pX+1; + var mLX = pX-1; + while(mY < 9 && (mRX < 9 || mLX > 0)){ + if(mRX < 9){ + var moveRID = "#"+String.fromCharCode(mRX+96)+mY; + if(!$(moveRID).hasClass("piece")){ + $(moveRID).addClass("move"); + mRX++; + } + else{ + if(mY<8 && mRX<8 && $(moveRID).hasClass(opponent)){ + var victimID = moveRID; + var nmY = mY+1; + mRX++; + moveRID = "#"+String.fromCharCode(mRX+96)+nmY; + if(!$(moveRID).hasClass("piece") && mRX < 9){ + $(moveRID).addClass("move kill"); + $(moveRID).attr("victim", victimID); + findMoreMoves(pieceColor, pieceType, victimID, mRX, nmY); + } + } + mRX = 9; + } + } + if(mLX > 0){ + var moveLID = "#"+String.fromCharCode(mLX+96)+mY; + if(!$(moveLID).hasClass("piece") && mLX > 0){ + $(moveLID).addClass("move"); + mLX--; + } + else{ + if(mY<8 && mLX>1 && $(moveLID).hasClass(opponent)){ + var victimID = moveLID; + var nmY = mY+1; + mLX--; + moveLID = "#"+String.fromCharCode(mLX+96)+nmY; + if(!$(moveLID).hasClass("piece")){ + $(moveLID).addClass("move kill"); + $(moveLID).attr("victim", victimID); + findMoreMoves(pieceColor, pieceType, victimID, mLX, nmY); + } + } + mLX = 0; + } + } + mY++; + } + mY = pY-1; + mRX = pX+1; + mLX = pX-1; + while(mY > 0 && (mRX < 9 || mLX > 0)){ + if(mRX < 9){ + var moveRID = "#"+String.fromCharCode(mRX+96)+mY; + if(!$(moveRID).hasClass("piece")){ + $(moveRID).addClass("move"); + mRX++; + } + else{ + if(mY>1 && mRX<8 && $(moveRID).hasClass(opponent)){ + var victimID = moveRID; + var nmY = mY-1; + mRX++; + moveRID = "#"+String.fromCharCode(mRX+96)+nmY; + if(!$(moveRID).hasClass("piece")){ + $(moveRID).addClass("move kill"); + $(moveRID).attr("victim", victimID); + findMoreMoves(pieceColor, pieceType, victimID, mRX, nmY); + } + } + mRX = 9; + } + } + if(mLX > 0){ + var moveLID = "#"+String.fromCharCode(mLX+96)+mY; + if(!$(moveLID).hasClass("piece")){ + $(moveLID).addClass("move"); + mLX--; + } + else{ + if(mY>1 && mLX>1 && $(moveLID).hasClass(opponent)){ + var victimID = moveLID; + var nmY = mY-1; + mLX--; + moveLID = "#"+String.fromCharCode(mLX+96)+nmY; + if(!$(moveLID).hasClass("piece")){ + $(moveLID).addClass("move kill"); + $(moveLID).attr("victim", victimID); + findMoreMoves(pieceColor, pieceType, victimID, mLX, nmY); + } + } + mLX = 0; + } + } + mY--; + } + } + else if (pieceColor == "white"){ + if(pY < 8){ + if(pX < 8){ + var mY = pY+1; + var mX = pX+1; + var moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece")){ + $(moveID).addClass("move"); + } + else if(pX < 7 && pY < 7 && $(moveID).hasClass("black")){ + var victimID = moveID; + mX++; + mY++; + moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece")){ + $(moveID).addClass("move kill"); + $(moveID).attr("victim", victimID); + findMoreMoves(pieceColor, pieceType, victimID, mX, mY); + } + } + } + if(pX > 1){ + var mY = pY+1; + var mX = pX-1; + var moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece")){ + $(moveID).addClass("move"); + } + else if(pX > 2 && pY < 7 && $(moveID).hasClass("black")){ + var victimID = moveID; + mX--; + mY++; + moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece")){ + $(moveID).addClass("move kill"); + $(moveID).attr("victim", victimID); + findMoreMoves(pieceColor, pieceType, victimID, mX, mY); + } + } + } + } + } + else{ + if(pY > 1){ + if(pX < 8){ + var mY = pY-1; + var mX = pX+1; + var moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece")){ + $(moveID).addClass("move"); + } + else if(pX < 7 && pY > 2 && $(moveID).hasClass("white")){ + var victimID = moveID; + mX++; + mY--; + moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece")){ + $(moveID).addClass("move kill"); + $(moveID).attr("victim", victimID); + findMoreMoves(pieceColor, pieceType, victimID, mX, mY); + } + } + } + if(pX > 1){ + var mY = pY-1; + var mX = pX-1; + var moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece")){ + $(moveID).addClass("move"); + } + else if(pX > 2 && pY > 2 && $(moveID).hasClass("white")){ + var victimID = moveID; + mX--; + mY--; + moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece")){ + $(moveID).addClass("move kill"); + $(moveID).attr("victim", victimID); + findMoreMoves(pieceColor, pieceType, victimID, mX, mY); + } + } + } + } + } +} + +function findMoreMoves(pieceColor, pieceType, victimIDs, pX, pY){ + if(pieceType == "dame"){ + console.log("findmore dame start"); + } + if(pY < 7 && (pieceColor == "white" || pieceType == "dame")){ + var vY = pY+1; + if (pX < 7){ + console.log("up right start"); + var vX = pX+1; + var victimID = "#"+String.fromCharCode(vX+96)+vY; + if($(victimID).hasClass("piece") && ((pieceColor == "white" && $(victimID).hasClass("black")) || (pieceColor == "black" && $(victimID).hasClass("white")))){ + console.log("up right victim"); + var mY = vY+1; + var mX = vX+1; + var moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece") && victimIDs.indexOf(victimID) < 0){ + console.log("up right move"); + $(moveID).addClass("move kill"); + var nvictimIDs = victimIDs+","+victimID; + $(moveID).attr("victim", nvictimIDs); + findMoreMoves(pieceColor, pieceType, nvictimIDs, mX, mY); + } + } + } + if (pX > 2){ + console.log("up left start"); + var vX = pX-1; + var victimID = "#"+String.fromCharCode(vX+96)+vY; + if($(victimID).hasClass("piece") && ((pieceColor == "white" && $(victimID).hasClass("black")) || (pieceColor == "black" && $(victimID).hasClass("white")))){ + console.log("up left victim"); + var mY = vY+1; + var mX = vX-1; + var moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece") && victimIDs.indexOf(victimID) < 0){ + console.log("up left move"); + $(moveID).addClass("move kill"); + var nvictimIDs = victimIDs+","+victimID; + $(moveID).attr("victim", nvictimIDs); + findMoreMoves(pieceColor, pieceType, nvictimIDs, mX, mY); + } + } + } + } + if(pY > 2 && (pieceColor == "black" || pieceType == "dame")){ + var vY = pY-1; + if (pX < 7){ + console.log("down right start"); + var vX = pX+1; + var victimID = "#"+String.fromCharCode(vX+96)+vY; + if($(victimID).hasClass("piece") && ((pieceColor == "white" && $(victimID).hasClass("black")) || (pieceColor == "black" && $(victimID).hasClass("white")))){ + console.log("down right victim"); + var mY = vY-1; + var mX = vX+1; + var moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece") && victimIDs.indexOf(victimID) < 0){ + console.log("down right move"); + $(moveID).addClass("move kill"); + var nvictimIDs = victimIDs+","+victimID; + $(moveID).attr("victim", nvictimIDs); + findMoreMoves(pieceColor, pieceType, nvictimIDs, mX, mY); + } + } + } + if (pX > 2){ + console.log("down left start"); + var vX = pX-1; + var victimID = "#"+String.fromCharCode(vX+96)+vY; + if($(victimID).hasClass("piece") && ((pieceColor == "white" && $(victimID).hasClass("black")) || (pieceColor == "black" && $(victimID).hasClass("white")))){ + console.log("down left victim"); + var mY = vY-1; + var mX = vX-1; + var moveID = "#"+String.fromCharCode(mX+96)+mY; + if(!$(moveID).hasClass("piece") && victimIDs.indexOf(victimID) < 0){ + console.log("down left move"); + $(moveID).addClass("move kill"); + var nvictimIDs = victimIDs+","+victimID; + $(moveID).attr("victim", nvictimIDs); + findMoreMoves(pieceColor, pieceType, nvictimIDs, mX, mY); + } + } + } + } +} + +function movePiece(event){ + if (!isTurn){ return; } + var mSquare = event.target; + var pieceColor = "white"; + var pieceType = "pawn"; + if($(".selected").first().hasClass("black")){ pieceColor = "black"; } + if($(".selected").first().hasClass("dame")){ pieceType = "dame"; } + if ((pieceColor == "white" && $(mSquare).attr("id").charAt(1) == "8") || (pieceColor == "black" && $(mSquare).attr("id").charAt(1) == "1")){ + pieceType = "dame"; + } + var origin = $(".selected").first().attr("id"); + var target = $(mSquare).attr("id"); + $(".selected").removeClass("piece black white pawn dame"); + $(mSquare).addClass("piece "+pieceColor+" "+pieceType); + $(".square").removeClass("selected move"); + socket.emit("piece moved", origin, target); + if($(mSquare).hasClass("kill")){ + var victims = $(mSquare).attr("victim").split(","); + victims.forEach(function(victim){ + var victimColor = "black"; + if($(victim).hasClass("white")){ victimColor = "white"; } + $(victim).removeClass("piece white black pawn dame"); + var pieceRemoved = victim.slice(1); + $(mSquare).attr("victim", ""); + socket.emit("piece removed", pieceRemoved, victimColor); + }); + } + $(".square").removeClass("kill last-move"); + $("#"+origin).addClass("last-move"); + $("#"+target).addClass("last-move"); +} + +$(document).on("click", ".square.piece", function(event){ + if(isTurn && $(event.target).hasClass(playerColor)){ + getMoves(event); + } +}); + +$(document).on("click", ".square.move", function(event){ + if(isTurn){ + movePiece(event); + } +}); + +$(document).on("click", "#btn-truce", function(event){ + socket.emit("request truce"); +}); + +$(document).on("click", "#btn-truce-accept", function(event){ + socket.emit("accept truce"); + $("#message-box").html("
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 -- cgit v1.2.3