nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

remove piece IDs and unused <img> elements; animate click moves

This commit is contained in:
Jesse D. McDonald 2020-05-08 22:15:11 -05:00
parent 56cce3340e
commit 5873a97d93
3 changed files with 57 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/chess.css
View File

@ -338,20 +338,20 @@ button:disabled .silhouette {
height: 100%; height: 100%;
} }
#cb_phantom .cb-lt-piece, .cb-phantom .cb-lt-piece,
#cb_phantom .cb-dk-piece { .cb-phantom .cb-dk-piece {
top: 5%; top: 5%;
} }
#cb_board #cb_phantom .cb-lt-piece, #cb_board .cb-phantom .cb-lt-piece,
#cb_board.cb-reversed #cb_phantom .cb-dk-piece { #cb_board.cb-reversed .cb-phantom .cb-dk-piece {
left: 15%; left: 15%;
right: auto; right: auto;
clip-path: inset(0 15% 0 0); clip-path: inset(0 15% 0 0);
} }
#cb_board #cb_phantom .cb-dk-piece, #cb_board .cb-phantom .cb-dk-piece,
#cb_board.cb-reversed #cb_phantom .cb-lt-piece { #cb_board.cb-reversed .cb-phantom .cb-lt-piece {
left: auto; left: auto;
right: 15%; right: 15%;
clip-path: inset(0 0 0 15%); clip-path: inset(0 0 0 15%);

19
index.html
View File

@ -253,25 +253,6 @@
<div class="badge jitsi-badge"><a id="jitsi_link" href="https://meet.jit.si/PacoSako" rel="noopener noreferer" target="_blank"><img src="<%=require('./svg/jitsi-logo-blue.svg')%>" alt="Jitsi Meet" title="Jitsi Meet"></a></div> <div class="badge jitsi-badge"><a id="jitsi_link" href="https://meet.jit.si/PacoSako" rel="noopener noreferer" target="_blank"><img src="<%=require('./svg/jitsi-logo-blue.svg')%>" alt="Jitsi Meet" title="Jitsi Meet"></a></div>
<div class="badge gogs-badge"><a href="https://jessemcdonald.info/gogs/nybble/paco_sako" rel="noopener noreferer" target="_blank"><img src="<%=require('./png/gogs.png')%>" alt="Source Code" title="Source Code"></a></div> <div class="badge gogs-badge"><a href="https://jessemcdonald.info/gogs/nybble/paco_sako" rel="noopener noreferer" target="_blank"><img src="<%=require('./png/gogs.png')%>" alt="Source Code" title="Source Code"></a></div>
</div> </div>
<div id="cb_hidden" style="display: none">
<div id="cb_phantom" class="cb-phantom"></div>
<div id="cb_pieces" style="display: none">
<div id="cb_piece_kd" class="cb-piece cb-dk-piece cb-king" ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_king_right" alt="kd"></div>
<div id="cb_piece_qd" class="cb-piece cb-dk-piece cb-queen" ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_queen_right" alt="qd"></div>
<div id="cb_piece_bd" class="cb-piece cb-dk-piece cb-bishop" ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_bishop_right" alt="bd"></div>
<div id="cb_piece_nd" class="cb-piece cb-dk-piece cb-knight" ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_knight_right" alt="nd"></div>
<div id="cb_piece_rd" class="cb-piece cb-dk-piece cb-rook" ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_rook_right" alt="rd"></div>
<div id="cb_piece_pd" class="cb-piece cb-dk-piece cb-pawn" ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_pawn_right" alt="pd"></div>
<div id="cb_piece_kl" class="cb-piece cb-lt-piece cb-king" ><img src="<%=require('./svg/traditional-theme.svg')%>#light_king_left" alt="kl"></div>
<div id="cb_piece_ql" class="cb-piece cb-lt-piece cb-queen" ><img src="<%=require('./svg/traditional-theme.svg')%>#light_queen_left" alt="ql"></div>
<div id="cb_piece_bl" class="cb-piece cb-lt-piece cb-bishop" ><img src="<%=require('./svg/traditional-theme.svg')%>#light_bishop_left" alt="bl"></div>
<div id="cb_piece_nl" class="cb-piece cb-lt-piece cb-knight" ><img src="<%=require('./svg/traditional-theme.svg')%>#light_knight_left" alt="nl"></div>
<div id="cb_piece_rl" class="cb-piece cb-lt-piece cb-rook" ><img src="<%=require('./svg/traditional-theme.svg')%>#light_rook_left" alt="rl"></div>
<div id="cb_piece_pl" class="cb-piece cb-lt-piece cb-pawn" ><img src="<%=require('./svg/traditional-theme.svg')%>#light_pawn_left" alt="pl"></div>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

102
js/pacosako_ui.js
View File

@ -36,41 +36,42 @@ $(function (){
let visibleGame = new PS.Game(currentGame); let visibleGame = new PS.Game(currentGame);
let cancelGameCallback = function() {}; let cancelGameCallback = function() {};
function pieceTypeCode(type) { function pieceTypeClass(type) {
if (type === PS.KING) { if (type === PS.KING) {
return 'k'; return 'cb-king';
} else if (type === PS.QUEEN) { } else if (type === PS.QUEEN) {
return 'q'; return 'cb-queen';
} else if (type === PS.ROOK) { } else if (type === PS.ROOK) {
return 'r'; return 'cb-rook';
} else if (type === PS.KNIGHT) { } else if (type === PS.KNIGHT) {
return 'n'; return 'cb-knight';
} else if (type === PS.BISHOP) { } else if (type === PS.BISHOP) {
return 'b'; return 'cb-bishop';
} else if (type === PS.PAWN) { } else if (type === PS.PAWN) {
return 'p'; return 'cb-pawn';
} else { } else {
throw new Error(`unknown piece type: ${type}`); throw new Error(`unknown piece type: ${type}`);
} }
} }
function pieceSideCode(side) { function pieceSideClass(side) {
if (side === PS.LIGHT) { if (side === PS.LIGHT) {
return 'l'; return 'cb-lt-piece';
} else if (side === PS.DARK) { } else if (side === PS.DARK) {
return 'd'; return 'cb-dk-piece';
} else { } else {
throw new Error(`unknown side: ${side}`); throw new Error(`unknown side: ${side}`);
} }
} }
function pieceCode(side, type) {
return pieceTypeCode(type) + pieceSideCode(side);
}
function cbSquare(where) { function cbSquare(where) {
if (where === PS.PHANTOM) { if (where === PS.PHANTOM) {
return $('#cb_phantom').first() let square = $('#cb_phantom');
if (square.length < 1) {
square = $(`<div id="cb_phantom" class="cb-phantom"></div>`);
square.hide().appendTo('body');
}
return square;
} else if (where.match(/^[a-h][1-8]$/)) { } else if (where.match(/^[a-h][1-8]$/)) {
return $('#cb_' + where).first() return $('#cb_' + where).first()
} else { } else {
@ -78,10 +79,21 @@ $(function (){
} }
} }
function cbSquareLocation(square) { function cbPiece(where, side) {
const id = square.id || square[0].id; const square = cbSquare(where);
if (!square) {
return null;
} else if (side === true) {
return square.find('.cb-piece');
} else {
return square.find('.' + pieceSideClass(side)).first();
}
}
if (id === 'cb_phantom') { function cbSquareLocation(square) {
const id = $(square).attr('id');
if (id === "cb_phantom") {
return PS.PHANTOM; return PS.PHANTOM;
} }
@ -116,7 +128,7 @@ $(function (){
} }
} }
function pieceEndMove(piece, to) { function pieceEndMove(piece, to, animate) {
let from = piece.data('location'); let from = piece.data('location');
piece.appendTo('#cb_hidden'); piece.appendTo('#cb_hidden');
@ -125,10 +137,11 @@ $(function (){
currentGame.move(from, to, meta); currentGame.move(from, to, meta);
} catch (err) { } catch (err) {
debug('unable to move', err); debug('unable to move', err);
animate = false;
} }
$('#cb_board').data('last_state', currentGame.moves); $('#cb_board').data('last_state', currentGame.moves);
setCurrentGame(currentGame); setCurrentGame(currentGame, animate);
putState(); putState();
} }
@ -139,7 +152,7 @@ $(function (){
return; return;
} }
pieceEndMove(selected, cbSquareLocation(this)); pieceEndMove(selected, cbSquareLocation(this), true);
} }
function squareDropDestination(ev, ui) { function squareDropDestination(ev, ui) {
@ -184,22 +197,16 @@ $(function (){
dragged.removeData('saved-style'); dragged.removeData('saved-style');
dragged.css('z-index', ''); dragged.css('z-index', '');
if ($('#cb_board').data('dragging_from') === dragged.data('location')) { if ($('#cb_board').data('dragging_from') === dragged.data('location')) {
if ($('#cb_board .cb-selected').length < 1) {
renderBoard(); renderBoard();
} }
} }
function placePiece(where, side, type, suffix) {
const code = pieceCode(side, type);
const piece_id = 'cb_piece_' + code + '_' + suffix;
let piece = $('#' + piece_id);
if (piece.length < 1) {
piece = $('#cb_piece_' + code).clone().prop({ id: piece_id });
} }
piece.finish();
piece.attr('id', piece_id); function placePiece(where, side, type) {
piece.removeClass('cb-selected'); const piece = $(`<div class="cb-piece"></div>`);
piece.removeClass('cb-in-check'); piece.addClass(pieceSideClass(side));
piece.removeAttr('style'); piece.addClass(pieceTypeClass(type));
piece.data({ side: side, type: type, location: where }); piece.data({ side: side, type: type, location: where });
piece.appendTo(cbSquare(where)); piece.appendTo(cbSquare(where));
piece.draggable({ piece.draggable({
@ -215,33 +222,26 @@ $(function (){
function renderBoard(animate) { function renderBoard(animate) {
$('#cb_board').removeData('dragging_from'); $('#cb_board').removeData('dragging_from');
$('#cb_board .cb-piece').finish(); $('#cb_board .cb-piece').remove();
$('#cb_board .cb-square').off('click.select'); $('#cb_board .cb-square').off('click.select');
$('#cb_board .cb-square').off('click.unselect'); $('#cb_board .cb-square').off('click.unselect');
$('#cb_board .cb-square').off('click.destination'); $('#cb_board .cb-square').off('click.destination');
$('#cb_board .cb-piece.cb-selected').removeClass('cb-selected');
$('#cb_board .cb-piece.cb-in-check').removeClass('cb-in-check');
$('#cb_board .cb-piece').removeAttr('style').appendTo('#cb_hidden');
$('#cb_board .cb-start').removeClass('cb-start'); $('#cb_board .cb-start').removeClass('cb-start');
$('#cb_board .cb-end').removeClass('cb-end'); $('#cb_board .cb-end').removeClass('cb-end');
$('#cb_board .cb-legal').removeClass('cb-legal'); $('#cb_board .cb-legal').removeClass('cb-legal');
$('#cb_phantom').appendTo('#cb_hidden');
$('#cb_explain_check').text(''); $('#cb_explain_check').text('');
$('#cb_phantom').remove();
const game = visibleGame; const game = visibleGame;
const board = game.board; const board = game.board;
for (const side of [PS.LIGHT, PS.DARK]) { for (const side of [PS.LIGHT, PS.DARK]) {
const counters = {};
for (const row of PS.ROWS) { for (const row of PS.ROWS) {
for (const column of PS.COLUMNS) { for (const column of PS.COLUMNS) {
const here = column + row; const here = column + row;
const type = board.getPiece(side, here); const type = board.getPiece(side, here);
if (type !== PS.EMPTY) { if (type !== PS.EMPTY) {
if (!counters[type]) { placePiece(here, side, type);
counters[type] = 0;
}
placePiece(here, side, type, String(++counters[type]));
} }
} }
} }
@ -258,10 +258,8 @@ $(function (){
} }
if (lastMove.from && lastMove.to && animate) { if (lastMove.from && lastMove.to && animate) {
let pieces = cbSquare(lastMove.to).find('.cb-piece'); const sideMoved = lastMove.alongside ? true : lastMove.side;
if (!lastMove.alongside) { const pieces = cbPiece(lastMove.to, sideMoved);
pieces = pieces.filter(lastMove.side === PS.LIGHT ? '.cb-lt-piece' : '.cb-dk-piece');
}
if (pieces.length > 0) { if (pieces.length > 0) {
const fromRect = cbSquare(lastMove.from)[0].getBoundingClientRect(); const fromRect = cbSquare(lastMove.from)[0].getBoundingClientRect();
const toRect = cbSquare(lastMove.to)[0].getBoundingClientRect(); const toRect = cbSquare(lastMove.to)[0].getBoundingClientRect();
@ -297,12 +295,12 @@ $(function (){
const liveView = !game.canRedo; const liveView = !game.canRedo;
const playing = game.status === PS.PLAYING; const playing = game.status === PS.PLAYING;
const clss = game.player === PS.LIGHT ? '.cb-lt-piece' : '.cb-dk-piece'; const clss = pieceSideClass(game.player);
const phantom = board.phantom; const phantom = board.phantom;
if (phantom) { if (phantom) {
const piece = placePiece(PS.PHANTOM, phantom.side, phantom.type, 'ph'); const piece = placePiece(PS.PHANTOM, phantom.side, phantom.type);
cbSquare(PS.PHANTOM).appendTo(cbSquare(phantom.from)); cbSquare(PS.PHANTOM).appendTo(cbSquare(phantom.from)).show();
if (liveView && playing) { if (liveView && playing) {
piece.draggable('enable'); piece.draggable('enable');
@ -310,13 +308,13 @@ $(function (){
pieceStartMove(piece, 'click'); pieceStartMove(piece, 'click');
} }
} else if (liveView && playing) { } else if (liveView && playing) {
const pieces = $('#cb_board ' + clss) const pieces = $('#cb_board .' + clss)
pieces.parent().on('click.select', squareClickSelect); pieces.parent().on('click.select', squareClickSelect);
pieces.draggable('enable'); pieces.draggable('enable');
} }
const check = game.isInCheck(); const check = game.isInCheck();
const king = $('#cb_board ' + clss + '.cb-king'); const king = $('#cb_board .cb-king.' + clss);
if (check) { if (check) {
king.addClass('cb-in-check'); king.addClass('cb-in-check');