X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=www%2Fjs%2Fchessboard-0.3.0.js;h=477d778d7562ba81e6726159df84ae4d7548a777;hb=38312204f04624996e251fbc1d1ad21ba3c3c5b7;hp=756cb13be86d52ee28b2d14e33b2b3ff92527a19;hpb=0c8253bb13d5e0aee8b2360634d660d21336b968;p=remoteglot diff --git a/www/js/chessboard-0.3.0.js b/www/js/chessboard-0.3.0.js index 756cb13..477d778 100644 --- a/www/js/chessboard-0.3.0.js +++ b/www/js/chessboard-0.3.0.js @@ -1,7 +1,8 @@ /*! - * chessboard.js v0.3.0 + * chessboard.js v0.3.0+asn * * Copyright 2013 Chris Oakman + * Portions copyright 2022 Steinar H. Gunderson * Released under the MIT license * http://chessboardjs.com/license * @@ -242,8 +243,7 @@ var widget = {}; // Stateful //------------------------------------------------------------------------------ -var ANIMATION_HAPPENING = false, - BOARD_BORDER_SIZE = 2, +var BOARD_BORDER_SIZE = 2, CURRENT_ORIENTATION = 'white', CURRENT_POSITION = {}, SQUARE_SIZE, @@ -259,12 +259,9 @@ var ANIMATION_HAPPENING = false, // JS Util Functions //------------------------------------------------------------------------------ -// http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript +let id_counter = 0; function createId() { - return 'xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx'.replace(/x/g, function(c) { - var r = Math.random() * 16 | 0; - return r.toString(16); - }); + return 'chesspiece-id-' + (id_counter++); } function deepCopy(thing) { @@ -640,23 +637,20 @@ function buildPieceImgSrc(piece) { * @param {!string=} id */ function buildPiece(piece, hidden, id) { - var html = ''; - - let elem = document.createElement('template'); - elem.innerHTML = html; - return elem.content; + return img; } function buildSparePieces(color) { @@ -725,7 +719,7 @@ function animateSquareToSquare(src, dest, piece, completeFn) { // animate the piece to the destination square animatedPieceEl.addEventListener('transitionend', complete, {once: true}); requestAnimationFrame(() => { - animatedPieceEl.style.transitionProperty = 'top left'; + animatedPieceEl.style.transitionProperty = 'top, left'; animatedPieceEl.style.transitionDuration = cfg.moveSpeed + 'ms'; animatedPieceEl.style.top = destSquarePosition.top + 'px'; animatedPieceEl.style.left = destSquarePosition.left + 'px'; @@ -767,35 +761,41 @@ function animateSparePieceToSquare(piece, dest, completeFn) { duration: cfg.moveSpeed, complete: complete }; - $(animatedPieceEl).animate(destOffset, opts); + //$(animatedPieceEl).animate(destOffset, opts); } -function fadeIn(piece, onFinish) { - piece.style.opacity = 0; - piece.style.display = null; - piece.addEventListener('transitionend', onFinish, {once: true}); +function fadeIn(pieces, onFinish) { + pieces.forEach((piece) => { + piece.style.opacity = 0; + piece.style.display = null; + piece.addEventListener('transitionend', onFinish, {once: true}); + }); requestAnimationFrame(() => { - piece.style.transitionProperty = 'opacity'; - piece.style.transitionDuration = cfg.appearSpeed + 'ms'; - piece.style.opacity = 1; + pieces.forEach((piece) => { + piece.style.transitionProperty = 'opacity'; + piece.style.transitionDuration = cfg.appearSpeed + 'ms'; + piece.style.opacity = 1; + }); }); } -function fadeOut(piece, onFinish) { - piece.style.opacity = 1; - piece.style.display = null; - piece.addEventListener('transitionend', onFinish, {once: true}); +function fadeOut(pieces, onFinish) { + pieces.forEach((piece) => { + piece.style.opacity = 1; + piece.style.display = null; + piece.addEventListener('transitionend', onFinish, {once: true}); + }); requestAnimationFrame(() => { - piece.style.transitionProperty = 'opacity'; - piece.style.transitionDuration = cfg.trashSpeed + 'ms'; - piece.style.opacity = 0; + pieces.forEach((piece) => { + piece.style.transitionProperty = 'opacity'; + piece.style.transitionDuration = cfg.trashSpeed + 'ms'; + piece.style.opacity = 0; + }); }); } // execute an array of animations function doAnimations(a, oldPos, newPos) { - ANIMATION_HAPPENING = true; - var numFinished = 0; function onFinish(e) { if (e && e.target) { @@ -808,7 +808,6 @@ function doAnimations(a, oldPos, newPos) { if (numFinished !== a.length) return; drawPositionInstant(); - ANIMATION_HAPPENING = false; // run their onMoveEnd function if (cfg.hasOwnProperty('onMoveEnd') === true && @@ -817,33 +816,47 @@ function doAnimations(a, oldPos, newPos) { } } - for (var i = 0; i < a.length; i++) { - // clear a piece - if (a[i].type === 'clear') { - document.getElementById(SQUARE_ELS_IDS[a[i].square]).querySelectorAll('.' + CSS.piece).forEach( - (piece) => fadeOut(piece, onFinish) - ); - } + requestAnimationFrame(() => { // Firefox workaround. + let fadeout_pieces = []; + let fadein_pieces = []; - // add a piece (no spare pieces) - if (a[i].type === 'add' && cfg.sparePieces !== true) { - let square = document.getElementById(SQUARE_ELS_IDS[a[i].square]); - square.append(buildPiece(a[i].piece, true)); - let piece = square.querySelector('.' + CSS.piece); - fadeIn(piece, onFinish); - } + for (var i = 0; i < a.length; i++) { + // clear a piece + if (a[i].type === 'clear') { + document.getElementById(SQUARE_ELS_IDS[a[i].square]).querySelectorAll('.' + CSS.piece).forEach( + (piece) => fadeout_pieces.push(piece) + ); + } + + // add a piece (no spare pieces) + if (a[i].type === 'add' && cfg.sparePieces !== true) { + let square = document.getElementById(SQUARE_ELS_IDS[a[i].square]); + square.append(buildPiece(a[i].piece, true)); + let piece = square.querySelector('.' + CSS.piece); + fadein_pieces.push(piece); + } - // add a piece from a spare piece - if (a[i].type === 'add' && cfg.sparePieces === true) { - animateSparePieceToSquare(a[i].piece, a[i].square, onFinish); + // add a piece from a spare piece + if (a[i].type === 'add' && cfg.sparePieces === true) { + animateSparePieceToSquare(a[i].piece, a[i].square, onFinish); + } + + // move a piece + if (a[i].type === 'move') { + animateSquareToSquare(a[i].source, a[i].destination, a[i].piece, + onFinish); + } } - // move a piece - if (a[i].type === 'move') { - animateSquareToSquare(a[i].source, a[i].destination, a[i].piece, - onFinish); + // TODO: Batch moves as well, not just fade in/out. + // (We batch them because requestAnimationFrame seemingly costs real time.) + if (fadeout_pieces.length > 0) { + fadeOut(fadeout_pieces, onFinish); } - } + if (fadein_pieces.length > 0) { + fadeIn(fadein_pieces, onFinish); + } + }); } // returns the distance between two squares @@ -863,55 +876,26 @@ function squareDistance(s1, s2) { return yDelta; } -// returns an array of closest squares from square -function createRadius(square) { - var squares = []; - - // calculate distance of all squares - for (var i = 0; i < 8; i++) { - for (var j = 0; j < 8; j++) { - var s = COLUMNS[i] + (j + 1); - - // skip the square we're starting from - if (square === s) continue; - - squares.push({ - square: s, - distance: squareDistance(square, s) - }); - } - } - - // sort by distance - squares.sort(function(a, b) { - return a.distance - b.distance; - }); - - // just return the square code - var squares2 = []; - for (var i = 0; i < squares.length; i++) { - squares2.push(squares[i].square); - } - - return squares2; -} - // returns the square of the closest instance of piece // returns false if no instance of piece is found in position function findClosestPiece(position, piece, square) { - // create array of closest squares from square - var closestSquares = createRadius(square); - - // search through the position in order of distance for the piece - for (var i = 0; i < closestSquares.length; i++) { - var s = closestSquares[i]; + let best_square = false; + let best_dist = 1e9; + for (var i = 0; i < COLUMNS.length; i++) { + for (var j = 1; j <= 8; j++) { + let other_square = COLUMNS[i] + j; - if (position.hasOwnProperty(s) === true && position[s] === piece) { - return s; + if (position[other_square] === piece && square != other_square) { + let dist = squareDistance(square, other_square); + if (dist < best_dist) { + best_square = other_square; + best_dist = dist; + } + } } } - return false; + return best_square; } // calculate an array of animations that need to happen in order to get @@ -1117,7 +1101,7 @@ function snapbackDraggedPiece() { // animate the piece to the target square draggedPieceEl.addEventListener('transitionend', complete, {once: true}); requestAnimationFrame(() => { - draggedPieceEl.style.transitionProperty = 'top left'; + draggedPieceEl.style.transitionProperty = 'top, left'; draggedPieceEl.style.transitionDuration = cfg.snapbackSpeed + 'ms'; draggedPieceEl.style.top = sourceSquarePosition.top + 'px'; draggedPieceEl.style.left = sourceSquarePosition.left + 'px'; @@ -1140,7 +1124,7 @@ function trashDraggedPiece() { // hide the dragged piece // FIXME: support this for non-jquery - $(draggedPieceEl).fadeOut(cfg.trashSpeed); + //$(draggedPieceEl).fadeOut(cfg.trashSpeed); // set state DRAGGING_A_PIECE = false; @@ -1175,7 +1159,7 @@ function dropDraggedPieceOnSquare(square) { // snap the piece to the target square draggedPieceEl.addEventListener('transitionend', complete, {once: true}); requestAnimationFrame(() => { - draggedPieceEl.style.transitionProperty = 'top left'; + draggedPieceEl.style.transitionProperty = 'top, left'; draggedPieceEl.style.transitionDuration = cfg.snapSpeed + 'ms'; draggedPieceEl.style.top = targetSquarePosition.top + 'px'; draggedPieceEl.style.left = targetSquarePosition.left + 'px'; @@ -1545,7 +1529,6 @@ function touchstartSquare(e) { return; } - e = e.originalEvent; beginDraggingPiece(square, CURRENT_POSITION[square], e.changedTouches[0].pageX, e.changedTouches[0].pageY); } @@ -1573,7 +1556,6 @@ function touchstartSparePiece(e) { var piece = e.target.getAttribute('data-piece'); - e = e.originalEvent; beginDraggingPiece('spare', piece, e.changedTouches[0].pageX, e.changedTouches[0].pageY); } @@ -1592,8 +1574,8 @@ function touchmoveWindow(e) { // prevent screen from scrolling e.preventDefault(); - updateDraggedPiece(e.originalEvent.changedTouches[0].pageX, - e.originalEvent.changedTouches[0].pageY); + updateDraggedPiece(e.changedTouches[0].pageX, + e.changedTouches[0].pageY); } function mouseupWindow(e) { @@ -1611,8 +1593,8 @@ function touchendWindow(e) { if (DRAGGING_A_PIECE !== true) return; // get the location - var location = isXYOnSquare(e.originalEvent.changedTouches[0].pageX, - e.originalEvent.changedTouches[0].pageY); + var location = isXYOnSquare(e.changedTouches[0].pageX, + e.changedTouches[0].pageY); stopDraggedPiece(location); }