LukeParke/power-six
1
0
Fork 0
mirror of https://github.com/LukeHagar/power-six.git synced 2025-12-06 04:21:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

using jquery instead of vanilla

Browse Source
This commit is contained in:
salman-abedin
2021-01-01 14:15:11 +06:00
parent 344dd2600f
commit b6e8be722d
2 changed files with 27 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -4,8 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Power Six: E-ink Friendly Multi-player Chess App</title> <title>Power Six: E-ink Friendly Multi-player Chess App</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="assets/jquery-2.2.4.min.js"></script>
<script src='script.js' defer></script>
</head> </head>
<body>
<script src='script.js'></script>
</body>
</html> </html>

65
script.js
View File

@@ -20,56 +20,44 @@ const pieces = {
70: 'white_pawn', 70: 'white_pawn',
}; };
var row, var row, square, i, j, img, position_old, position_new, is_piece, reply;
square,
i,
j,
img,
position_old,
position_new,
is_piece,
reply,
piece_image;
var whites_turn = true; var whites_turn = true;
var can_castle_white = true; var can_castle_white = true;
var can_castle_black = true; var can_castle_black = true;
function _img_piece(name) { function _img_piece(name) {
piece_image = document.createElement('img'); return '<img src=assets/' + name + '.png>';
piece_image.setAttribute('src', 'assets/' + name + '.png');
return piece_image;
} }
function img_tag(i, j) { function img_tag(i, j) {
if (i === 2) tag = _img_piece(pieces[20]); if (i === 2) tag = _img_piece(pieces[20]);
else if (i === 7) tag = _img_piece(pieces[70]); else if (i === 7) tag = _img_piece(pieces[70]);
else if (i === 1 || i === 8) tag = _img_piece(pieces[i * 10 + j]); else if (i === 1 || i === 8) tag = _img_piece(pieces[i * 10 + j]);
else return; else tag = '';
return tag; return tag;
} }
function rotate() { function rotate() {
whites_turn = !whites_turn; whites_turn = !whites_turn;
document.querySelectorAll('.square').forEach((square) => { $('.square').css({
square.style.transform = whites_turn ? 'rotate(0deg)' : 'rotate(180deg)'; transform: whites_turn ? 'rotate(0deg)' : 'rotate(180deg)',
}); });
} }
function swap(position_selected) { function swap(position_selected) {
position_selected.innerHTML = position_old.innerHTML; position_selected.html(position_old.html());
position_selected.style.border = '10px solid black'; position_selected.css('border', '10px solid black');
position_new = position_selected; position_new = position_selected;
position_old.innerHTML = ''; position_old.empty();
position_old.style.border = ''; position_old.css('border', '');
position_old = null; position_old = null;
} }
function select(position_selected) { function select(position_selected) {
if (position_new) position_new.style.border = ''; if (position_new) position_new.css('border', '');
if (position_old) position_old.style.border = ''; if (position_old) position_old.css('border', '');
position_selected.style.border = '10px solid black'; position_selected.css('border', '10px solid black');
position_old = position_selected; position_old = position_selected;
} }
@@ -82,21 +70,21 @@ function prompt_caste(position_selected) {
} }
function handle_click() { function handle_click() {
is_piece = this.innerHTML; is_piece = $(this).html();
if (position_old) { if (position_old) {
if ( if (
(whites_turn && is_piece.indexOf('white') !== -1) || (whites_turn && is_piece.indexOf('white') !== -1) ||
(!whites_turn && is_piece.indexOf('black') !== -1) (!whites_turn && is_piece.indexOf('black') !== -1)
) )
select(this); select($(this));
else { else {
if ( if (
position_old.innerHTML.indexOf('king') !== -1 && position_old.html().indexOf('king') !== -1 &&
(can_castle_white || can_castle_black) (can_castle_white || can_castle_black)
) )
prompt_caste(this); prompt_caste($(this));
else { else {
swap(this); swap($(this));
rotate(); rotate();
} }
} }
@@ -107,22 +95,19 @@ function handle_click() {
(!whites_turn && is_piece.indexOf('white') !== -1) (!whites_turn && is_piece.indexOf('white') !== -1)
) )
return; return;
select(this); select($(this));
} }
} }
for (i = 1; i <= 8; ++i) { for (i = 1; i <= 8; ++i) {
row = document.createElement('div'); row = $('<div class="row">');
row.className = 'row';
for (j = 1; j <= 8; ++j) { for (j = 1; j <= 8; ++j) {
square = document.createElement('div'); square = $('<div class="square">');
square.className = 'square';
if ((j % 2 === 0 && i % 2 !== 0) || (j % 2 !== 0 && i % 2 === 0)) if ((j % 2 === 0 && i % 2 !== 0) || (j % 2 !== 0 && i % 2 === 0))
square.style.backgroundColor = '#666'; square.css('background-color', '#666');
piece_image = img_tag(i, j); square.append(img_tag(i, j));
if (piece_image) square.appendChild(piece_image); square.click(handle_click);
square.addEventListener('click', handle_click); row.append(square);
row.appendChild(square);
} }
document.body.appendChild(row); $('body').append(row);
} }