remove piece IDs and unused <img> elements; animate click moves
This commit is contained in:
parent
56cce3340e
commit
5873a97d93
|
|
@ -338,20 +338,20 @@ button:disabled .silhouette {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
#cb_phantom .cb-lt-piece,
|
||||
#cb_phantom .cb-dk-piece {
|
||||
.cb-phantom .cb-lt-piece,
|
||||
.cb-phantom .cb-dk-piece {
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
#cb_board #cb_phantom .cb-lt-piece,
|
||||
#cb_board.cb-reversed #cb_phantom .cb-dk-piece {
|
||||
#cb_board .cb-phantom .cb-lt-piece,
|
||||
#cb_board.cb-reversed .cb-phantom .cb-dk-piece {
|
||||
left: 15%;
|
||||
right: auto;
|
||||
clip-path: inset(0 15% 0 0);
|
||||
}
|
||||
|
||||
#cb_board #cb_phantom .cb-dk-piece,
|
||||
#cb_board.cb-reversed #cb_phantom .cb-lt-piece {
|
||||
#cb_board .cb-phantom .cb-dk-piece,
|
||||
#cb_board.cb-reversed .cb-phantom .cb-lt-piece {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
clip-path: inset(0 0 0 15%);
|
||||
|
|
|
|||
19
index.html
19
index.html
|
|
@ -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 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 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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -36,41 +36,42 @@ $(function (){
|
|||
let visibleGame = new PS.Game(currentGame);
|
||||
let cancelGameCallback = function() {};
|
||||
|
||||
function pieceTypeCode(type) {
|
||||
function pieceTypeClass(type) {
|
||||
if (type === PS.KING) {
|
||||
return 'k';
|
||||
return 'cb-king';
|
||||
} else if (type === PS.QUEEN) {
|
||||
return 'q';
|
||||
return 'cb-queen';
|
||||
} else if (type === PS.ROOK) {
|
||||
return 'r';
|
||||
return 'cb-rook';
|
||||
} else if (type === PS.KNIGHT) {
|
||||
return 'n';
|
||||
return 'cb-knight';
|
||||
} else if (type === PS.BISHOP) {
|
||||
return 'b';
|
||||
return 'cb-bishop';
|
||||
} else if (type === PS.PAWN) {
|
||||
return 'p';
|
||||
return 'cb-pawn';
|
||||
} else {
|
||||
throw new Error(`unknown piece type: ${type}`);
|
||||
}
|
||||
}
|
||||
|
||||
function pieceSideCode(side) {
|
||||
function pieceSideClass(side) {
|
||||
if (side === PS.LIGHT) {
|
||||
return 'l';
|
||||
return 'cb-lt-piece';
|
||||
} else if (side === PS.DARK) {
|
||||
return 'd';
|
||||
return 'cb-dk-piece';
|
||||
} else {
|
||||
throw new Error(`unknown side: ${side}`);
|
||||
}
|
||||
}
|
||||
|
||||
function pieceCode(side, type) {
|
||||
return pieceTypeCode(type) + pieceSideCode(side);
|
||||
}
|
||||
|
||||
function cbSquare(where) {
|
||||
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]$/)) {
|
||||
return $('#cb_' + where).first()
|
||||
} else {
|
||||
|
|
@ -78,10 +79,21 @@ $(function (){
|
|||
}
|
||||
}
|
||||
|
||||
function cbSquareLocation(square) {
|
||||
const id = square.id || square[0].id;
|
||||
function cbPiece(where, side) {
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +128,7 @@ $(function (){
|
|||
}
|
||||
}
|
||||
|
||||
function pieceEndMove(piece, to) {
|
||||
function pieceEndMove(piece, to, animate) {
|
||||
let from = piece.data('location');
|
||||
piece.appendTo('#cb_hidden');
|
||||
|
||||
|
|
@ -125,10 +137,11 @@ $(function (){
|
|||
currentGame.move(from, to, meta);
|
||||
} catch (err) {
|
||||
debug('unable to move', err);
|
||||
animate = false;
|
||||
}
|
||||
|
||||
$('#cb_board').data('last_state', currentGame.moves);
|
||||
setCurrentGame(currentGame);
|
||||
setCurrentGame(currentGame, animate);
|
||||
putState();
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +152,7 @@ $(function (){
|
|||
return;
|
||||
}
|
||||
|
||||
pieceEndMove(selected, cbSquareLocation(this));
|
||||
pieceEndMove(selected, cbSquareLocation(this), true);
|
||||
}
|
||||
|
||||
function squareDropDestination(ev, ui) {
|
||||
|
|
@ -184,22 +197,16 @@ $(function (){
|
|||
dragged.removeData('saved-style');
|
||||
dragged.css('z-index', '');
|
||||
if ($('#cb_board').data('dragging_from') === dragged.data('location')) {
|
||||
renderBoard();
|
||||
if ($('#cb_board .cb-selected').length < 1) {
|
||||
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);
|
||||
piece.removeClass('cb-selected');
|
||||
piece.removeClass('cb-in-check');
|
||||
piece.removeAttr('style');
|
||||
function placePiece(where, side, type) {
|
||||
const piece = $(`<div class="cb-piece"></div>`);
|
||||
piece.addClass(pieceSideClass(side));
|
||||
piece.addClass(pieceTypeClass(type));
|
||||
piece.data({ side: side, type: type, location: where });
|
||||
piece.appendTo(cbSquare(where));
|
||||
piece.draggable({
|
||||
|
|
@ -215,33 +222,26 @@ $(function (){
|
|||
|
||||
function renderBoard(animate) {
|
||||
$('#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.unselect');
|
||||
$('#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-end').removeClass('cb-end');
|
||||
$('#cb_board .cb-legal').removeClass('cb-legal');
|
||||
$('#cb_phantom').appendTo('#cb_hidden');
|
||||
$('#cb_explain_check').text('');
|
||||
$('#cb_phantom').remove();
|
||||
|
||||
const game = visibleGame;
|
||||
const board = game.board;
|
||||
|
||||
for (const side of [PS.LIGHT, PS.DARK]) {
|
||||
const counters = {};
|
||||
for (const row of PS.ROWS) {
|
||||
for (const column of PS.COLUMNS) {
|
||||
const here = column + row;
|
||||
const type = board.getPiece(side, here);
|
||||
if (type !== PS.EMPTY) {
|
||||
if (!counters[type]) {
|
||||
counters[type] = 0;
|
||||
}
|
||||
placePiece(here, side, type, String(++counters[type]));
|
||||
placePiece(here, side, type);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -258,10 +258,8 @@ $(function (){
|
|||
}
|
||||
|
||||
if (lastMove.from && lastMove.to && animate) {
|
||||
let pieces = cbSquare(lastMove.to).find('.cb-piece');
|
||||
if (!lastMove.alongside) {
|
||||
pieces = pieces.filter(lastMove.side === PS.LIGHT ? '.cb-lt-piece' : '.cb-dk-piece');
|
||||
}
|
||||
const sideMoved = lastMove.alongside ? true : lastMove.side;
|
||||
const pieces = cbPiece(lastMove.to, sideMoved);
|
||||
if (pieces.length > 0) {
|
||||
const fromRect = cbSquare(lastMove.from)[0].getBoundingClientRect();
|
||||
const toRect = cbSquare(lastMove.to)[0].getBoundingClientRect();
|
||||
|
|
@ -297,12 +295,12 @@ $(function (){
|
|||
|
||||
const liveView = !game.canRedo;
|
||||
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;
|
||||
if (phantom) {
|
||||
const piece = placePiece(PS.PHANTOM, phantom.side, phantom.type, 'ph');
|
||||
cbSquare(PS.PHANTOM).appendTo(cbSquare(phantom.from));
|
||||
const piece = placePiece(PS.PHANTOM, phantom.side, phantom.type);
|
||||
cbSquare(PS.PHANTOM).appendTo(cbSquare(phantom.from)).show();
|
||||
|
||||
if (liveView && playing) {
|
||||
piece.draggable('enable');
|
||||
|
|
@ -310,13 +308,13 @@ $(function (){
|
|||
pieceStartMove(piece, 'click');
|
||||
}
|
||||
} else if (liveView && playing) {
|
||||
const pieces = $('#cb_board ' + clss)
|
||||
const pieces = $('#cb_board .' + clss)
|
||||
pieces.parent().on('click.select', squareClickSelect);
|
||||
pieces.draggable('enable');
|
||||
}
|
||||
|
||||
const check = game.isInCheck();
|
||||
const king = $('#cb_board ' + clss + '.cb-king');
|
||||
const king = $('#cb_board .cb-king.' + clss);
|
||||
|
||||
if (check) {
|
||||
king.addClass('cb-in-check');
|
||||
|
|
|
|||
Loading…
Reference in New Issue