Skip to content

Instantly share code, notes, and snippets.

@son-le

son-le/UnicodeChess

Created November 12, 2013 00:37
Show Gist options
  • Save son-le/7423290 to your computer and use it in GitHub Desktop.
Save son-le/7423290 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
UnicodeChess
<!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>
.piece {
font-size: 64px;
width: 80px;
height: 80px;
margin: 0;
text-align: center;
vertical-align: middle;
}
.captured-pieces {
display: block;
height: 80px;
}
.captured-pieces p {
display: inline-block;
font-size: 64px;
height: 64px;
margin: 0;
}
.selected-piece {
background-color: blue;
}
table {
border-collapse: collapse;
width: 512px;
height: 512px;
}
tr:nth-child(odd) td:nth-child(even),
tr:nth-child(even) td:nth-child(odd) {
background: #CCC;
}
td {
width: 64px;
height: 64px;
padding: 0;
}
tr th p {
width: 20px;
}
#aslkfj {
width: 660px;
height: 660px;
border: 20px solid black;
margin: auto;
}
</style>
</head>
<body>
<div id="chessboard">
<div class="captured-pieces" data-bind="foreach: whiteCaptured">
<p data-bind="html: piece"></p>
</div>
<div id="aslkfj">
<table>
<tr>
<th><p>8</p></th>
<td data-bind="with: board[7][0]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[7][1]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[7][2]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[7][3]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[7][4]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[7][5]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[7][6]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[7][7]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
</tr>
<tr>
<th><p>7</p></th>
<td data-bind="with: board[6][0]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[6][1]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[6][2]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[6][3]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[6][4]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[6][5]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[6][6]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[6][7]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
</tr>
<tr>
<th><p>6</p></th>
<td data-bind="with: board[5][0]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[5][1]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[5][2]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[5][3]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[5][4]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[5][5]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[5][6]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[5][7]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
</tr>
<tr>
<th><p>5</p></th>
<td data-bind="with: board[4][0]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[4][1]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[4][2]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[4][3]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[4][4]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[4][5]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[4][6]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[4][7]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
</tr>
<tr>
<th><p>4</p></th>
<td data-bind="with: board[3][0]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[3][1]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[3][2]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[3][3]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[3][4]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[3][5]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[3][6]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[3][7]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
</tr>
<tr>
<th><p>3</p></th>
<td data-bind="with: board[2][0]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[2][1]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[2][2]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[2][3]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[2][4]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[2][5]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[2][6]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[2][7]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
</tr>
<tr>
<th><p>2</p></th>
<td data-bind="with: board[1][0]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[1][1]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[1][2]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[1][3]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[1][4]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[1][5]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[1][6]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[1][7]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
</tr>
<tr>
<th><p>1</p></th>
<td data-bind="with: board[0][0]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[0][1]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[0][2]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[0][3]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[0][4]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[0][5]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[0][6]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
<td data-bind="with: board[0][7]"><p class="piece" data-bind="html: piece, click: $parent.clickHandler, css: {'selected-piece': selected }"></p></td>
</tr>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
</tr>
</table>
</div>
<div class="captured-pieces" data-bind="foreach: blackCaptured">
<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);
item.selected(true);
}
}
else {
if(self.selectedPiece() == item) {
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()) {
return;
}
var movingPiece = originSquare.piece();
targetSquare.piece(movingPiece);
targetSquare.pieceColor(originSquare.pieceColor());
self.selectedPiece(undefined);
originSquare.piece(undefined);
originSquare.selected(false);
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(),
selected: ko.observable(false)
});
}
}
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