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

added some minor logic improvements

Browse Source 
added some minor logic improvements

testing

testing3

testing34

testing343

testing2
This commit is contained in:
salman-abedin
2021-01-01 09:53:31 +06:00
parent 8af1f9a5ed
commit 344dd2600f
3 changed files with 85 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -42,7 +42,8 @@ Go to [is.gd/powersix](https://is.gd/powersix) using the **Experimental Browser*
# Version Log
- **0.1.0**: Playable. 😅
- **0.1.0**: Proof of Concept.
- **0.2.0**: Added castling support & UI optimizations. 😅
# Contact

1
index.html
View File

@@ -4,7 +4,6 @@
<meta charset="UTF-8" />
<title>Power Six: E-ink Friendly Multi-player 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>

120
script.js
View File

@@ -20,63 +20,109 @@ const pieces = {
70: 'white_pawn',
};
var row, square, i, j, img, selected;
var row,
square,
i,
j,
img,
position_old,
position_new,
is_piece,
reply,
piece_image;
var whites_turn = true;
var can_castle_white = true;
var can_castle_black = true;
function _img_piece(name) {
return '<img src=assets/' + name + '.png>';
piece_image = document.createElement('img');
piece_image.setAttribute('src', 'assets/' + name + '.png');
return piece_image;
}
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 = '';
else return;
return tag;
}
function rotate() {
whites_turn = !whites_turn;
document.querySelectorAll('.square').forEach((square) => {
square.style.transform = whites_turn ? 'rotate(0deg)' : 'rotate(180deg)';
});
}
function swap(position_selected) {
position_selected.innerHTML = position_old.innerHTML;
position_selected.style.border = '10px solid black';
position_new = position_selected;
position_old.innerHTML = '';
position_old.style.border = '';
position_old = null;
}
function select(position_selected) {
if (position_new) position_new.style.border = '';
if (position_old) position_old.style.border = '';
position_selected.style.border = '10px solid black';
position_old = position_selected;
}
function prompt_caste(position_selected) {
swap(position_selected);
reply = confirm('Wanna castle?');
if (!reply) rotate();
if (whites_turn) can_castle_white = !can_castle_white;
else can_castle_black = !can_castle_black;
}
function handle_click() {
// if (
// (whites_turn && $(this).html().includes('black')) ||
// (!whites_turn && $(this).html().includes('white'))
// ) {
// return;
// }
if (selected) {
if ($(this).html() === selected.html()) {
selected.css('border', '');
selected = null;
return;
is_piece = this.innerHTML;
if (position_old) {
if (
(whites_turn && is_piece.indexOf('white') !== -1) ||
(!whites_turn && is_piece.indexOf('black') !== -1)
)
select(this);
else {
if (
position_old.innerHTML.indexOf('king') !== -1 &&
(can_castle_white || can_castle_black)
)
prompt_caste(this);
else {
swap(this);
rotate();
}
}
$(this).html(selected.html());
$(this).css('border', '10px solid black');
selected.empty();
selected.css('border', '');
selected = null;
whites_turn ^= true;
$('.square').css({
transform: whites_turn ? 'rotate(0deg)' : 'rotate(180deg)',
});
} else {
if (!$(this).html()) return;
selected = $(this);
$('.square').css('border', '');
selected.css('border', '10px solid black');
if (
!is_piece ||
(whites_turn && is_piece.indexOf('black') !== -1) ||
(!whites_turn && is_piece.indexOf('white') !== -1)
)
return;
select(this);
}
}
for (i = 1; i <= 8; ++i) {
row = $('<div class="row">');
row = document.createElement('div');
row.className = 'row';
for (j = 1; j <= 8; ++j) {
square = $('<div class="square">');
square = document.createElement('div');
square.className = '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);
square.style.backgroundColor = '#666';
piece_image = img_tag(i, j);
if (piece_image) square.appendChild(piece_image);
square.addEventListener('click', handle_click);
row.appendChild(square);
}
$('body').append(row);
document.body.appendChild(row);
}