Skip to content

Instantly share code, notes, and snippets.

@matthewcopeland

matthewcopeland/UnicodeChess.html

Forked from son-le/UnicodeChess
Last active December 28, 2015 01:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matthewcopeland/7423359 to your computer and use it in GitHub Desktop.
Save matthewcopeland/7423359 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
UnicodeChess.html
<!DOCTYPE>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<style>
html, body {
padding: 0;
margin: 0;
}
.piece {
font-size: 64px;
width: 80px;
height: 80px;
margin: 0;
text-align: center;
vertical-align: middle;
-webkit-transform: scale(1);
-webkit-transition: all 0.3s;
cursor: pointer;
cursor: -webkit-grab;
}
.piece:active {
cursor: -webkit-grabbing;
}
.piece:hover {
-webkit-transform: scale(1.1);
}
.selected-piece, .selected-piece:hover {
-webkit-transform: scale(1.4);
}
.captured-pieces {
display: block;
height: 80px;
}
.captured-pieces p {
display: inline-block;
font-size: 64px;
height: 64px;
margin: 0;
}
table {
border-collapse: collapse;
max-width: 700px;
max-height: 700px;
border: 20px solid black;
margin: auto;
}
tr:nth-child(odd) td:nth-child(even),
tr:nth-child(even) td:nth-child(odd) {
background: #CCC;
}
tr th p {
width: 20px;
}
</style>
</head>
<body>
<div id="chessboard">
<div class="captured-pieces" data-bind="foreach: blackCaptured">
<p data-bind="html: piece"></p>
</div>
<table>
<tbody data-bind="foreach: board">
<tr data-bind="foreach: $data">
<td><p class="piece" data-bind="html: piece, click: $root.clickHandler, css: {'selected-piece': $data == $root.selectedPiece() }"></p></td>
</tr>
</tbody>
</table>
<div class="captured-pieces" data-bind="foreach: whiteCaptured">
<p data-bind="html: piece"></p>
</div>
<div>
</body>
<script>
$(function() {
var viewModel = (function() {
var self = this;
self.board = initBoard();
self.selectedPiece = ko.observable();
self.blackCaptured = ko.observableArray();
self.whiteCaptured = ko.observableArray();
self.clickHandler = function(item) {
if (!self.selectedPiece()) {
if(item.piece()) {
self.selectedPiece(item);
}
}
else {
if(self.selectedPiece() == item) {
self.selectedPiece(undefined);
return;
}
var target = item;
var capturedPiece = target.piece();
var capturedPieceColor = target.pieceColor();
var originSquare = self.board[self.selectedPiece().row()][self.selectedPiece().col()]();
var targetSquare = self.board[target.row()][target.col()]();
if(capturedPieceColor == originSquare.pieceColor()) {
self.selectedPiece(target);
return;
}
var movingPiece = originSquare.piece();
targetSquare.piece(movingPiece);
targetSquare.pieceColor(originSquare.pieceColor());
self.selectedPiece(undefined);
originSquare.piece(undefined);
originSquare.pieceColor(undefined);
if (capturedPieceColor === 'black') {
self.blackCaptured.push({
piece: ko.observable(capturedPiece)
});
}
else if (capturedPieceColor === 'white') {
self.whiteCaptured.push({
piece: ko.observable(capturedPiece)
});
}
}
return false;
};
function initBoard() {
var board = [];
for(var i = 0; i < 8; ++i) {
board[i] = [];
for(var j = 0; j < 8; ++j) {
board[i][j] = ko.observable({
row: ko.observable(i),
col: ko.observable(j),
piece: ko.observable(),
pieceColor: ko.observable(),
});
}
}
board[0][0]().piece('&#9814;');
board[0][0]().pieceColor('white');
board[0][1]().piece('&#9816;');
board[0][1]().pieceColor('white');
board[0][2]().piece('&#9815;');
board[0][2]().pieceColor('white');
board[0][3]().piece('&#9813;');
board[0][3]().pieceColor('white');
board[0][4]().piece('&#9812;');
board[0][4]().pieceColor('white');
board[0][5]().piece('&#9815;');
board[0][5]().pieceColor('white');
board[0][6]().piece('&#9816;');
board[0][6]().pieceColor('white');
board[0][7]().piece('&#9814;');
board[0][7]().pieceColor('white');
board[1][0]().piece('&#9817;');
board[1][0]().pieceColor('white');
board[1][1]().piece('&#9817;');
board[1][1]().pieceColor('white');
board[1][2]().piece('&#9817;');
board[1][2]().pieceColor('white');
board[1][3]().piece('&#9817;');
board[1][3]().pieceColor('white');
board[1][4]().piece('&#9817;');
board[1][4]().pieceColor('white');
board[1][5]().piece('&#9817;');
board[1][5]().pieceColor('white');
board[1][6]().piece('&#9817;');
board[1][6]().pieceColor('white');
board[1][7]().piece('&#9817;');
board[1][7]().pieceColor('white');
board[6][0]().piece('&#9823;');
board[6][0]().pieceColor('black');
board[6][1]().piece('&#9823;');
board[6][1]().pieceColor('black');
board[6][2]().piece('&#9823;');
board[6][2]().pieceColor('black');
board[6][3]().piece('&#9823;');
board[6][3]().pieceColor('black');
board[6][4]().piece('&#9823;');
board[6][4]().pieceColor('black');
board[6][5]().piece('&#9823;');
board[6][5]().pieceColor('black');
board[6][6]().piece('&#9823;');
board[6][6]().pieceColor('black');
board[6][7]().piece('&#9823;');
board[6][7]().pieceColor('black');
board[7][0]().piece('&#9820;');
board[7][0]().pieceColor('black');
board[7][1]().piece('&#9822;');
board[7][1]().pieceColor('black');
board[7][2]().piece('&#9821;');
board[7][2]().pieceColor('black');
board[7][3]().piece('&#9819;');
board[7][3]().pieceColor('black');
board[7][4]().piece('&#9818;');
board[7][4]().pieceColor('black');
board[7][5]().piece('&#9821;');
board[7][5]().pieceColor('black');
board[7][6]().piece('&#9822;');
board[7][6]().pieceColor('black');
board[7][7]().piece('&#9820;');
board[7][7]().pieceColor('black');
return board;
};
return self;
})();
ko.applyBindings(viewModel, document.getElementById(chessboard));
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment