From 0bf97a789919024df8641535122551d8e1c8a970 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yaroslav=20De=20La=20Pe=C3=B1a=20Smirnov?= Date: Tue, 12 Dec 2017 02:40:53 +0300 Subject: Added function to check if the player has run out of moves --- client/css/style.css | 24 +++++ client/css/styleBoard.css | 95 +++++++++++++++++ client/game.html | 29 +++++ client/index.html | 2 +- client/js/board.js | 264 ++++++++++++++++++++++++++++++++++++++++++++++ client/js/index.js | 70 +++++++++--- client/no-js.html | 2 +- 7 files changed, 472 insertions(+), 14 deletions(-) create mode 100644 client/css/styleBoard.css create mode 100644 client/game.html create mode 100644 client/js/board.js (limited to 'client') diff --git a/client/css/style.css b/client/css/style.css index 610dc30..6cbfa54 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css?family=Permanent+Marker'); + @font-face { font-family: "shashki"; src:url("/static/fonts/shashki.eot"); @@ -14,6 +16,28 @@ border-radius: 0 !important; } +@keyframes coloranim{ + 0% {color: #ffffff;} + 20% {color: #1678c4;} + 40% {color: #13c055;} + 60% {color: #bea516;} + 80% {color: #cc1313;} + 100% {color: #ffffff;} +} + +.navbar-brand{ + font-family: "Permanent Marker", cursive; + font-size: 28px; + color: #fff !important; +} + +.navbar-brand:hover{ + animation-name: coloranim; + animation-duration: 8s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + .btn{ margin-top: 10px; } diff --git a/client/css/styleBoard.css b/client/css/styleBoard.css new file mode 100644 index 0000000..2cdbd90 --- /dev/null +++ b/client/css/styleBoard.css @@ -0,0 +1,95 @@ +@font-face { + font-family: "shashki"; + src:url("../fonts/shashki.eot"); + src:url("../fonts/shashki.eot?#iefix") format("embedded-opentype"), + url("../fonts/shashki.woff") format("woff"), + url("../fonts/shashki.ttf") format("truetype"), + url("../fonts/shashki.svg#shashki") format("svg"); + font-weight: normal; + font-style: normal; + +} + +.navbar, .nav-container{ + border-radius: 0 !important; +} + +#board{ + margin: 0 auto; + border: 3px solid #000; +} + +#board .square{ + width: 48px; + height: 48px; + font-size: 42px; + line-height: 48px; + text-align: center; + vertical-align: middle; +} + +#b1, #d1, #f1, #h1, #a2, #c2, #e2, #g2, #b3, #d3, #f3, #h3, #a4, #c4, #e4, #g4, +#b5, #d5, #f5, #h5, #a6, #c6, #e6, #g6, #b7, #d7, #f7, #h7, #a8, #c8, #e8, #g8 { + background:#FFECCA; +} + +#a1, #c1, #e1, #g1, #b2, #d2, #f2, #h2, #a3, #c3, #e3, #g3, #b4, #d4, #f4, #h4, +#a5, #c5, #e5, #g5, #b6, #d6, #f6, #h6, #a7, #c7, #e7, #g7, #b8, #d8, #f8, #h8 { + background:#684B33; +} + +.piece:before{ + font-family: "shashki" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + font-size: 42px; + line-height: 42px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + vertical-align: middle; +} + + +.piece.white{ + color: #992E2E; +} + +.piece.black{ + color: #000; +} + +.white.pawn:before { + content: "\63"; +} + +.white.dame:before { + content: "\64"; +} + +.black.pawn:before { + content: "\63"; +} + +.black.dame:before { + content: "\64"; +} + +@keyframes move-anim{ + 0% {background-color: #FFECCA;} + 50% {background-color: #adffad;} + 100% {background-color: #FFECCA;} +} + +.square.selected{ + background-color: #adffad !important; +} + +.square.move{ + animation-name: move-anim; + animation-duration: 1s; + animation-iteration-count: infinite; +} \ No newline at end of file diff --git a/client/game.html b/client/game.html new file mode 100644 index 0000000..be53595 --- /dev/null +++ b/client/game.html @@ -0,0 +1,29 @@ + + + + + + + + + + + Spanish Checkers by Yaroslav de la Peña Smirnov + + + +
+

Game board client side code test

+ Initialize as P1 + Initialize as P2 +
+
+
+ + \ No newline at end of file diff --git a/client/index.html b/client/index.html index 5c5b954..7cad584 100644 --- a/client/index.html +++ b/client/index.html @@ -15,7 +15,7 @@ diff --git a/client/js/board.js b/client/js/board.js new file mode 100644 index 0000000..e5d3a1f --- /dev/null +++ b/client/js/board.js @@ -0,0 +1,264 @@ + +var playerColor = "white"; +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); +} + +$(document).on("click", ".square.piece", function(event){ + 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); + } + } + 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); + } + } + 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); + } + } + 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); + } + } + 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); + } + } + } + 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); + } + } + } + } + } + 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); + } + } + } + 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); + } + } + } + } + } +}); + +$(document).on("click", ".square.move", function(event){ + console.log("move"); + 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"; + } + $(".selected").removeClass("piece black white pawn dame"); + $(mSquare).addClass("piece "+pieceColor+" "+pieceType); + $(".square").removeClass("selected move"); + if($(mSquare).hasClass("kill")){ + $($(mSquare).attr("victim")).removeClass("piece white black pawn dame"); + $(mSquare).attr("victim", ""); + } + $(".square").removeClass("kill"); +}); \ No newline at end of file diff --git a/client/js/index.js b/client/js/index.js index 8e96fd6..b99a6c6 100644 --- a/client/js/index.js +++ b/client/js/index.js @@ -19,6 +19,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND var playerName = ""; var opponentName = ""; var playerColor = "white"; +var opponentColor = "black"; var isTurn = false; var ongoingGame = false; var defaultSquareIDs = [ @@ -38,11 +39,13 @@ function initBoard(player){ if (player == 1){ squareIDs = defaultSquareIDs; playerColor = "white"; + opponentColor = "black"; upperPieces = "piece black pawn"; lowerPieces = "piece white pawn"; } else { playerColor = "black"; + opponentColor = "white"; squareIDs = []; for (i = defaultSquareIDs.length - 1; i >= 0; i--){ squareIDs.push(defaultSquareIDs[i]); @@ -75,12 +78,28 @@ function initBoard(player){ ongoingGame = true; } -function getMoves(event){ - if (!isTurn){ return; } - var piece = event.target; +function checkBoardForMoves(pieceColor){ + for(var i = 0; i < squareIDs.length; i++){ + var id = "#"+squareIDs[i]; + console.log(id); + if($(id).hasClass(pieceColor)){ + if(getMoves(id)){ + $(".square").removeClass("selected move"); + $(".square").removeClass("selected kill"); + return true; + } + } + } + console.log("there are no move for "+pieceColor+" player"); + $(".square").removeClass("selected move"); + $(".square").removeClass("selected kill"); + return false; +} + +function getMoves(piece){ $(".square").removeClass("selected kill"); $(".square").removeClass("move"); - $(event.target).addClass("selected"); + $(piece).addClass("selected"); var pieceColor = "white"; var pieceType = "pawn"; if ($(piece).hasClass("black")){ pieceColor = "black"; } @@ -88,6 +107,7 @@ function getMoves(event){ var pieceID = $(piece).attr("id"); var pX = pieceID.charCodeAt(0)-96; var pY = parseInt(pieceID.charAt(1)); + var canMove = false; if(pieceType == "dame"){ var opponent = "black"; if ($(piece).hasClass("black")){ opponent = "white"; } @@ -100,6 +120,7 @@ function getMoves(event){ if(!$(moveRID).hasClass("piece")){ $(moveRID).addClass("move"); mRX++; + canMove = true; } else{ if(mY<8 && mRX<8 && $(moveRID).hasClass(opponent)){ @@ -110,6 +131,7 @@ function getMoves(event){ if(!$(moveRID).hasClass("piece") && mRX < 9){ $(moveRID).addClass("move kill"); $(moveRID).attr("victim", victimID); + canMove = true; findMoreMoves(pieceColor, pieceType, victimID, mRX, nmY); } } @@ -121,6 +143,7 @@ function getMoves(event){ if(!$(moveLID).hasClass("piece") && mLX > 0){ $(moveLID).addClass("move"); mLX--; + canMove = true; } else{ if(mY<8 && mLX>1 && $(moveLID).hasClass(opponent)){ @@ -131,6 +154,7 @@ function getMoves(event){ if(!$(moveLID).hasClass("piece")){ $(moveLID).addClass("move kill"); $(moveLID).attr("victim", victimID); + canMove = true; findMoreMoves(pieceColor, pieceType, victimID, mLX, nmY); } } @@ -148,6 +172,7 @@ function getMoves(event){ if(!$(moveRID).hasClass("piece")){ $(moveRID).addClass("move"); mRX++; + canMove = true; } else{ if(mY>1 && mRX<8 && $(moveRID).hasClass(opponent)){ @@ -158,6 +183,7 @@ function getMoves(event){ if(!$(moveRID).hasClass("piece")){ $(moveRID).addClass("move kill"); $(moveRID).attr("victim", victimID); + canMove = true; findMoreMoves(pieceColor, pieceType, victimID, mRX, nmY); } } @@ -169,6 +195,7 @@ function getMoves(event){ if(!$(moveLID).hasClass("piece")){ $(moveLID).addClass("move"); mLX--; + canMove = true; } else{ if(mY>1 && mLX>1 && $(moveLID).hasClass(opponent)){ @@ -179,6 +206,7 @@ function getMoves(event){ if(!$(moveLID).hasClass("piece")){ $(moveLID).addClass("move kill"); $(moveLID).attr("victim", victimID); + canMove = true; findMoreMoves(pieceColor, pieceType, victimID, mLX, nmY); } } @@ -196,6 +224,7 @@ function getMoves(event){ var moveID = "#"+String.fromCharCode(mX+96)+mY; if(!$(moveID).hasClass("piece")){ $(moveID).addClass("move"); + canMove = true; } else if(pX < 7 && pY < 7 && $(moveID).hasClass("black")){ var victimID = moveID; @@ -205,6 +234,7 @@ function getMoves(event){ if(!$(moveID).hasClass("piece")){ $(moveID).addClass("move kill"); $(moveID).attr("victim", victimID); + canMove = true; findMoreMoves(pieceColor, pieceType, victimID, mX, mY); } } @@ -215,6 +245,7 @@ function getMoves(event){ var moveID = "#"+String.fromCharCode(mX+96)+mY; if(!$(moveID).hasClass("piece")){ $(moveID).addClass("move"); + canMove = true; } else if(pX > 2 && pY < 7 && $(moveID).hasClass("black")){ var victimID = moveID; @@ -224,6 +255,7 @@ function getMoves(event){ if(!$(moveID).hasClass("piece")){ $(moveID).addClass("move kill"); $(moveID).attr("victim", victimID); + canMove = true; findMoreMoves(pieceColor, pieceType, victimID, mX, mY); } } @@ -238,6 +270,7 @@ function getMoves(event){ var moveID = "#"+String.fromCharCode(mX+96)+mY; if(!$(moveID).hasClass("piece")){ $(moveID).addClass("move"); + canMove = true; } else if(pX < 7 && pY > 2 && $(moveID).hasClass("white")){ var victimID = moveID; @@ -247,6 +280,7 @@ function getMoves(event){ if(!$(moveID).hasClass("piece")){ $(moveID).addClass("move kill"); $(moveID).attr("victim", victimID); + canMove = true; findMoreMoves(pieceColor, pieceType, victimID, mX, mY); } } @@ -257,6 +291,7 @@ function getMoves(event){ var moveID = "#"+String.fromCharCode(mX+96)+mY; if(!$(moveID).hasClass("piece")){ $(moveID).addClass("move"); + canMove = true; } else if(pX > 2 && pY > 2 && $(moveID).hasClass("white")){ var victimID = moveID; @@ -266,12 +301,14 @@ function getMoves(event){ if(!$(moveID).hasClass("piece")){ $(moveID).addClass("move kill"); $(moveID).attr("victim", victimID); + canMove = true; findMoreMoves(pieceColor, pieceType, victimID, mX, mY); } } } } } + return canMove; } function findMoreMoves(pieceColor, pieceType, victimIDs, pX, pY){ @@ -358,9 +395,8 @@ function findMoreMoves(pieceColor, pieceType, victimIDs, pX, pY){ } } -function movePiece(event){ +function movePiece(mSquare){ if (!isTurn){ return; } - var mSquare = event.target; var pieceColor = "white"; var pieceType = "pawn"; if($(".selected").first().hasClass("black")){ pieceColor = "black"; } @@ -392,13 +428,13 @@ function movePiece(event){ $(document).on("click", ".square.piece", function(event){ if(isTurn && $(event.target).hasClass(playerColor)){ - getMoves(event); + getMoves(event.target); } }); $(document).on("click", ".square.move", function(event){ if(isTurn){ - movePiece(event); + movePiece(event.target); } }); @@ -439,11 +475,11 @@ function initializeEvents(){ socket = null; }); socket.on("game started", function(gameID){ - $("#start-container").html("
Game ID: "+gameID.toString()+"

Waiting for player...

"+playerName+"

"); + $("#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+"

"); + $("#start-container").html("
Game ID: "+gameID.toString()+" Offer a draw

"+opponent+"

"+playerName+"

"); initBoard(2); opponentName = opponent; $("#btn-truce").css("display", "inline-block"); @@ -459,11 +495,21 @@ function initializeEvents(){ isTurn = true; $("#local-name").addClass("active"); $("#opponent-name").removeClass("active"); + if(!checkBoardForMoves(playerColor)){ + $("#message-box").html("
You ran out of moves, you lose. Victory goes to "+opponentName+". Better luck next time! New game"); + ongoingGame = false; + isTurn = false; + } }); socket.on("turn end", function(){ isTurn = false; $("#local-name").removeClass("active"); $("#opponent-name").addClass("active"); + if(!checkBoardForMoves(opponentColor)){ + $("#message-box").html("
"+opponentName+" has run out of moves. You've won! New game"); + ongoingGame = false; + isTurn = false; + } }); socket.on("move piece", function(origin, target){ var pieceColor = "black"; @@ -480,10 +526,10 @@ function initializeEvents(){ $("#"+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
"); + $("#message-box").html("
"+opponentName+" wants to declare the game a draw. 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"); + $("#message-box").html("
"+opponentName+" has accepted your draw offer. The game is a draw. New game"); ongoingGame = false; isTurn = false; }); diff --git a/client/no-js.html b/client/no-js.html index 608c5a5..94f8fe3 100644 --- a/client/no-js.html +++ b/client/no-js.html @@ -15,7 +15,7 @@ < -- cgit v1.2.3