aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/css/style.css24
-rw-r--r--client/css/styleBoard.css95
-rw-r--r--client/game.html29
-rw-r--r--client/index.html2
-rw-r--r--client/js/board.js264
-rw-r--r--client/js/index.js70
-rw-r--r--client/no-js.html2
7 files changed, 472 insertions, 14 deletions
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 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/styleBoard.css">
+ <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+ <script src="js/board.js"></script>
+ <title>Spanish Checkers by Yaroslav de la Peña Smirnov</title>
+ </head>
+ <body>
+ <nav class="navbar navbar-inverse">
+ <div class="container nav-container">
+ <div class="navbar-header">
+ <p class="navbar-brand">Spanish Checkers</p>
+ </div>
+ </div>
+ </nav>
+ <div class="container">
+ <h2>Game board client side code test</h2>
+ <btn class="btn btn-primary" onclick="initBoard(1);">Initialize as P1</btn>
+ <btn class="btn btn-primary" onclick="initBoard(2);">Initialize as P2</btn>
+ </div>
+ <div id="board-container" class="container">
+ </div>
+ </body>
+</html> \ 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 @@
<nav class="navbar navbar-inverse">
<div class="container nav-container">
<div class="navbar-header">
- <p class="navbar-brand">Spanish Checkers v0.5.3</span></p>
+ <p class="navbar-brand">Spanish Checkers v0.5.6</p>
</div>
</div>
</nav>
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("<table id='board'></table>")
+ var i = 0, j = 0, k = 0;
+ var bc = "<tbody>";
+ for (i = 0; i < 8; i++){
+ bc += "<tr>";
+ for(j = 0; j < 8; j++){
+ bc += "<td id='"+squareIDs[k]+"' class='square ";
+ if(((i+1) % 2 == 0 && (j+1) % 2 == 0) || ((i+1) % 2 != 0 && (j+1) % 2 != 0)){
+ if(i < 3){
+ bc += upperPieces;
+ }
+ else if(i > 4){
+ bc += lowerPieces;
+ }
+ }
+ bc += "'></td>\n";
+ k++;
+ }
+ bc += "</tr>\n";
+ }
+ bc += "</tbody>\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("<div class='panel panel-default'><div class='panel-heading'>Game ID: "+gameID.toString()+" <a id='btn-truce' class='btn btn-default' style='display:none'>Request tie</a></div></div><div id='message-box'></div><hr><div class='text-center'><h4 id='opponent-name' class='player-name'>Waiting for player...</h4><div id='board-container'></div><h4 id='local-name' class='player-name'>"+playerName+"</h4></div>");
+ $("#start-container").html("<div class='panel panel-default'><div class='panel-heading'>Game ID: "+gameID.toString()+" <a id='btn-truce' class='btn btn-default' style='display:none'>Offer a draw</a></div></div><div id='message-box'></div><hr><div class='text-center'><h4 id='opponent-name' class='player-name'>Waiting for player...</h4><div id='board-container'></div><h4 id='local-name' class='player-name'>"+playerName+"</h4></div>");
initBoard(1);
});
socket.on("game joined", function(gameID, opponent){
- $("#start-container").html("<div class='panel panel-default'><div class='panel-heading'>Game ID: "+gameID.toString()+" <a id='btn-truce' class='btn btn-default'>Request tie</a></div></div><div id='message-box'></div><hr><div class='text-center'><h4 id='opponent-name' class='player-name active'>"+opponent+"</h4><div id='board-container'></div><h4 id='local-name' class='player-name'>"+playerName+"</h4></div>");
+ $("#start-container").html("<div class='panel panel-default'><div class='panel-heading'>Game ID: "+gameID.toString()+" <a id='btn-truce' class='btn btn-default'>Offer a draw</a></div></div><div id='message-box'></div><hr><div class='text-center'><h4 id='opponent-name' class='player-name active'>"+opponent+"</h4><div id='board-container'></div><h4 id='local-name' class='player-name'>"+playerName+"</h4></div>");
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("<div class='alert alert-danger'>You ran out of moves, you lose. Victory goes to "+opponentName+". Better luck next time! <a class='btn btn-danger btn-sm' href='/'>New game</a>");
+ 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("<div class='alert alert-success'>"+opponentName+" has run out of moves. You've won! <a class='btn btn-success btn-sm' href='/'>New game</a>");
+ 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("<div class='alert alert-info'>"+opponentName+" wants to declare the game a tie. Do you accept their offer? <a id='btn-truce-accept' class='btn btn-info btn-sm'>Accept</a> <a id='btn-truce-decline' class='btn btn-info btn-sm'>Decline</a></div>");
+ $("#message-box").html("<div class='alert alert-info'>"+opponentName+" wants to declare the game a draw. Do you accept their offer? <a id='btn-truce-accept' class='btn btn-info btn-sm'>Accept</a> <a id='btn-truce-decline' class='btn btn-info btn-sm'>Decline</a></div>");
});
socket.on("truce accepted", function(){
- $("#message-box").html("<div class='alert alert-info'>"+opponentName+" has accepted your truce offer. The game is a tie. <a class='btn btn-info btn-sm' href='/'>New game</a>");
+ $("#message-box").html("<div class='alert alert-info'>"+opponentName+" has accepted your draw offer. The game is a draw. <a class='btn btn-info btn-sm' href='/'>New game</a>");
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 @@
<<nav class="navbar navbar-inverse">
<div class="container nav-container">
<div class="navbar-header">
- <p class="navbar-brand">Spanish Checkers v0.5.1</span></p>
+ <p class="navbar-brand">Spanish Checkers v0.5.5</span></p>
</div>
</div>
</nav>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 16:58:01 +0000