debut
salman-abedin
17
README.md
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
# Power Six: E-Ink Friendly Chess App
|
||||||
|
|
||||||
|
Power Six is a web app I am currently working on in order to play chess with my friends on my Kindle Paperwhite 4. 😎
|
||||||
|
|
||||||
|
# Usage
|
||||||
|
|
||||||
|
### Online
|
||||||
|
|
||||||
|
[is.gd/powersix](https://is.gd/powersix)
|
||||||
|
|
||||||
|
### Offline
|
||||||
|
|
||||||
|
# TODO:
|
||||||
|
|
||||||
|
- Online Multi-player
|
||||||
|
- Spectators
|
||||||
|
|
||||||
BIN
assets/black_bishop.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
assets/black_king.png
Normal file
|
After Width: | Height: | Size: 2.4 KiB |
BIN
assets/black_knight.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/black_pawn.png
Normal file
|
After Width: | Height: | Size: 797 B |
BIN
assets/black_queen.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
assets/black_rook.png
Normal file
|
After Width: | Height: | Size: 725 B |
4
assets/jquery-2.2.4.min.js
vendored
Normal file
BIN
assets/white_bishop.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
assets/white_king.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
assets/white_knight.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
assets/white_pawn.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/white_queen.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
assets/white_rook.png
Normal file
|
After Width: | Height: | Size: 933 B |
12
index.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Power Six: E-ink Friendly Chess App</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<script src="assets/jquery-2.2.4.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src='script.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
75
script.js
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
var row, square, i, j, img, selected;
|
||||||
|
var whites_turn = true;
|
||||||
|
|
||||||
|
const pieces = {
|
||||||
|
11: 'black_rook',
|
||||||
|
12: 'black_knight',
|
||||||
|
13: 'black_bishop',
|
||||||
|
14: 'black_queen',
|
||||||
|
15: 'black_king',
|
||||||
|
18: 'black_rook',
|
||||||
|
17: 'black_knight',
|
||||||
|
16: 'black_bishop',
|
||||||
|
20: 'black_pawn',
|
||||||
|
|
||||||
|
81: 'white_rook',
|
||||||
|
82: 'white_knight',
|
||||||
|
83: 'white_bishop',
|
||||||
|
84: 'white_queen',
|
||||||
|
85: 'white_king',
|
||||||
|
88: 'white_rook',
|
||||||
|
87: 'white_knight',
|
||||||
|
86: 'white_bishop',
|
||||||
|
70: 'white_pawn',
|
||||||
|
};
|
||||||
|
|
||||||
|
function _img_piece(name) {
|
||||||
|
return '<img src=assets/' + name + '.png>';
|
||||||
|
}
|
||||||
|
|
||||||
|
function img_tag(i, j) {
|
||||||
|
if (i === 2) tag = _img_piece(pieces[20]);
|
||||||
|
else if (i === 7) tag = _img_piece(pieces[70]);
|
||||||
|
else if (i === 1 || i === 8) tag = _img_piece(pieces[i * 10 + j]);
|
||||||
|
else tag = '';
|
||||||
|
return tag;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle_click() {
|
||||||
|
if (selected) {
|
||||||
|
if ($(this).html() === selected.html()) {
|
||||||
|
selected.css('border', '');
|
||||||
|
selected = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$(this).html(selected.html());
|
||||||
|
$(this).css('border', '5px solid black');
|
||||||
|
|
||||||
|
selected.empty();
|
||||||
|
selected.css('border', '');
|
||||||
|
selected = null;
|
||||||
|
|
||||||
|
whites_turn ^= true;
|
||||||
|
|
||||||
|
$('.square').css({
|
||||||
|
transform: whites_turn ? 'rotate(0deg)' : 'rotate(180deg)',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
selected = $(this);
|
||||||
|
$('.square').css('border', '');
|
||||||
|
selected.css('border', '5px solid black');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (i = 1; i <= 8; ++i) {
|
||||||
|
row = $('<div class="row">');
|
||||||
|
for (j = 1; j <= 8; ++j) {
|
||||||
|
square = $('<div class="square">');
|
||||||
|
if ((j % 2 === 0 && i % 2 !== 0) || (j % 2 !== 0 && i % 2 === 0))
|
||||||
|
square.css('background-color', '#666');
|
||||||
|
square.append(img_tag(i, j));
|
||||||
|
square.click(handle_click);
|
||||||
|
row.append(square);
|
||||||
|
}
|
||||||
|
$('body').append(row);
|
||||||
|
}
|
||||||
31
styles.css
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .row {
|
||||||
|
height: 12.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .row .square {
|
||||||
|
height: 100%;
|
||||||
|
width: 12.5%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .row .square {
|
||||||
|
height: 100%;
|
||||||
|
width: 12.5%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .row .square img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||