From 5873a97d9397bdeb9bba2a6677eb6880233b3a48 Mon Sep 17 00:00:00 2001 From: Jesse McDonald Date: Fri, 8 May 2020 22:15:11 -0500 Subject: [PATCH] remove piece IDs and unused elements; animate click moves --- css/chess.css | 12 +++--- index.html | 19 --------- js/pacosako_ui.js | 104 +++++++++++++++++++++++----------------------- 3 files changed, 57 insertions(+), 78 deletions(-) diff --git a/css/chess.css b/css/chess.css index a26a137..caf229c 100644 --- a/css/chess.css +++ b/css/chess.css @@ -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%); diff --git a/index.html b/index.html index 4b60f93..7c24457 100644 --- a/index.html +++ b/index.html @@ -253,25 +253,6 @@
Jitsi Meet
Source Code
- - diff --git a/js/pacosako_ui.js b/js/pacosako_ui.js index 6ab0f38..8da350d 100644 --- a/js/pacosako_ui.js +++ b/js/pacosako_ui.js @@ -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 = $(`
`); + 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 = $(`
`); + 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');