From cea05f65b6f4593ba11a7bcfad330095ad591163 Mon Sep 17 00:00:00 2001 From: Levi R Date: Fri, 9 Dec 2016 18:39:50 -0300 Subject: [PATCH 1/2] updated chessboard.js to allow picking up pieces in addition to dragging and dropping --- www/js/chessboard.js | 92 +++++++++++++++++++++++++++++--------------- 1 file changed, 61 insertions(+), 31 deletions(-) diff --git a/www/js/chessboard.js b/www/js/chessboard.js index 87c1d27c..d38c63f4 100644 --- a/www/js/chessboard.js +++ b/www/js/chessboard.js @@ -1,11 +1,11 @@ /*! - * chessboard.js $version$ + * chessboard.js v0.3.0 * * Copyright 2013 Chris Oakman * Released under the MIT license - * https://github.com/oakmac/chessboardjs/blob/master/LICENSE + * http://chessboardjs.com/license * - * Date: $date$ + * Date: 10 Aug 2013 */ // start anonymous scope @@ -186,6 +186,7 @@ function objToFen(obj) { } window['ChessBoard'] = window['ChessBoard'] || function(containerElOrId, cfg) { +'use strict'; cfg = cfg || {}; @@ -199,7 +200,6 @@ var MINIMUM_JQUERY_VERSION = '1.7.0', // use unique class names to prevent clashing with anything else on the page // and simplify selectors -// NOTE: these should never change var CSS = { alpha: 'alpha-d2270', black: 'black-3c85d', @@ -245,6 +245,7 @@ var ANIMATION_HAPPENING = false, DRAGGED_PIECE, DRAGGED_PIECE_LOCATION, DRAGGED_PIECE_SOURCE, + CLICK_MOVE = false, DRAGGING_A_PIECE = false, SPARE_PIECE_ELS_IDS = {}, SQUARE_ELS_IDS = {}, @@ -254,8 +255,8 @@ var ANIMATION_HAPPENING = false, // JS Util Functions //------------------------------------------------------------------------------ -// http://tinyurl.com/3ttloxj -function uuid() { +// http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript +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); @@ -499,7 +500,7 @@ function expandConfig() { // fudge factor, and then keep reducing until we find an exact mod 8 for // our square size function calculateSquareSize() { - var containerWidth = parseInt(containerEl.width(), 10); + var containerWidth = parseInt(containerEl.css('width'), 10); // defensive, prevent infinite loop if (! containerWidth || containerWidth <= 0) { @@ -522,7 +523,7 @@ function createElIds() { for (var i = 0; i < COLUMNS.length; i++) { for (var j = 1; j <= 8; j++) { var square = COLUMNS[i] + j; - SQUARE_ELS_IDS[square] = square + '-' + uuid(); + SQUARE_ELS_IDS[square] = square + '-' + createId(); } } @@ -531,8 +532,8 @@ function createElIds() { for (var i = 0; i < pieces.length; i++) { var whitePiece = 'w' + pieces[i]; var blackPiece = 'b' + pieces[i]; - SPARE_PIECE_ELS_IDS[whitePiece] = whitePiece + '-' + uuid(); - SPARE_PIECE_ELS_IDS[blackPiece] = blackPiece + '-' + uuid(); + SPARE_PIECE_ELS_IDS[whitePiece] = whitePiece + '-' + createId(); + SPARE_PIECE_ELS_IDS[blackPiece] = blackPiece + '-' + createId(); } } @@ -696,7 +697,7 @@ function animateSquareToSquare(src, dest, piece, completeFn) { // create the animated piece and absolutely position it // over the source square - var animatedPieceId = uuid(); + var animatedPieceId = createId(); $('body').append(buildPiece(piece, true, animatedPieceId)); var animatedPieceEl = $('#' + animatedPieceId); animatedPieceEl.css({ @@ -737,7 +738,7 @@ function animateSparePieceToSquare(piece, dest, completeFn) { var destOffset = destSquareEl.offset(); // create the animate piece - var pieceId = uuid(); + var pieceId = createId(); $('body').append(buildPiece(piece, true, pieceId)); var animatedPieceEl = $('#' + pieceId); animatedPieceEl.css({ @@ -772,10 +773,6 @@ function animateSparePieceToSquare(piece, dest, completeFn) { // execute an array of animations function doAnimations(a, oldPos, newPos) { - if (a.length === 0) { - return; - } - ANIMATION_HAPPENING = true; var numFinished = 0; @@ -1119,6 +1116,17 @@ function trashDraggedPiece() { } function dropDraggedPieceOnSquare(square) { + + // if destination is same as source, piece stays picked up and is dropped at the next clicked square. + if (CLICK_MOVE == false) { + if (square === DRAGGED_PIECE_SOURCE) { + CLICK_MOVE = true; + return; + } + } + + CLICK_MOVE = false; + removeSquareHighlights(); // update position @@ -1275,6 +1283,17 @@ function stopDraggedPiece(location) { if (result === 'snapback' || result === 'trash') { action = result; } + } else { + // source piece is a spare piece and position is off the board + if (DRAGGED_PIECE_SOURCE === 'spare' && location === 'offboard') { + if (CLICK_MOVE == false) { + // pick up spare piece and put it down on next clicked square + CLICK_MOVE = true; + return; + } else { + CLICK_MOVE = false; + } + } } // do it! @@ -1298,6 +1317,17 @@ widget.clear = function(useAnimation) { widget.position({}, useAnimation); }; +/* +// get or set config properties +// TODO: write this, GitHub Issue #1 +widget.config = function(arg1, arg2) { + // get the current config + if (arguments.length === 0) { + return deepCopy(cfg); + } +}; +*/ + // remove the widget from the page widget.destroy = function() { // remove markup @@ -1315,7 +1345,7 @@ widget.fen = function() { // flip orientation widget.flip = function() { - return widget.orientation('flip'); + widget.orientation('flip'); }; /* @@ -1371,14 +1401,14 @@ widget.orientation = function(arg) { if (arg === 'white' || arg === 'black') { CURRENT_ORIENTATION = arg; drawBoard(); - return CURRENT_ORIENTATION; + return; } // flip orientation if (arg === 'flip') { CURRENT_ORIENTATION = (CURRENT_ORIENTATION === 'white') ? 'black' : 'white'; drawBoard(); - return CURRENT_ORIENTATION; + return; } error(5482, 'Invalid value passed to the orientation method.', arg); @@ -1632,8 +1662,8 @@ function addEvents() { mousedownSparePiece); // mouse enter / leave square - boardEl.on('mouseenter', '.' + CSS.square, mouseenterSquare) - .on('mouseleave', '.' + CSS.square, mouseleaveSquare); + boardEl.on('mouseenter', '.' + CSS.square, mouseenterSquare); + boardEl.on('mouseleave', '.' + CSS.square, mouseleaveSquare); // IE doesn't like the events on the window object, but other browsers // perform better that way @@ -1641,12 +1671,12 @@ function addEvents() { // IE-specific prevent browser "image drag" document.ondragstart = function() { return false; }; - $('body').on('mousemove', mousemoveWindow) - .on('mouseup', mouseupWindow); + $('body').on('mousemove', mousemoveWindow); + $('body').on('mouseup', mouseupWindow); } else { - $(window).on('mousemove', mousemoveWindow) - .on('mouseup', mouseupWindow); + $(window).on('mousemove', mousemoveWindow); + $(window).on('mouseup', mouseupWindow); } // touch drag pieces @@ -1654,15 +1684,12 @@ function addEvents() { boardEl.on('touchstart', '.' + CSS.square, touchstartSquare); containerEl.on('touchstart', '.' + CSS.sparePieces + ' .' + CSS.piece, touchstartSparePiece); - $(window).on('touchmove', touchmoveWindow) - .on('touchend', touchendWindow); + $(window).on('touchmove', touchmoveWindow); + $(window).on('touchend', touchendWindow); } } function initDom() { - // create unique IDs for all the elements we will create - createElIds(); - // build board and save it in memory containerEl.html(buildBoardContainer()); boardEl = containerEl.find('.' + CSS.board); @@ -1673,7 +1700,7 @@ function initDom() { } // create the drag piece - var draggedPieceId = uuid(); + var draggedPieceId = createId(); $('body').append(buildPiece('wP', true, draggedPieceId)); draggedPieceEl = $('#' + draggedPieceId); @@ -1688,6 +1715,9 @@ function init() { if (checkDeps() !== true || expandConfig() !== true) return; + // create unique IDs for all the elements we will create + createElIds(); + initDom(); addEvents(); } From 9866d16bc8ab488cf2d0db99b838dc28e910a906 Mon Sep 17 00:00:00 2001 From: Levi R Date: Fri, 9 Dec 2016 18:48:49 -0300 Subject: [PATCH 2/2] chessboard.js modified to allow clicking source and destination in addition to dragging and dropping --- www/js/chessboard.js | 73 ++++++++++++++++++++------------------------ 1 file changed, 33 insertions(+), 40 deletions(-) diff --git a/www/js/chessboard.js b/www/js/chessboard.js index d38c63f4..23b42deb 100644 --- a/www/js/chessboard.js +++ b/www/js/chessboard.js @@ -1,11 +1,11 @@ /*! - * chessboard.js v0.3.0 + * chessboard.js $version$ * * Copyright 2013 Chris Oakman * Released under the MIT license - * http://chessboardjs.com/license + * https://github.com/oakmac/chessboardjs/blob/master/LICENSE * - * Date: 10 Aug 2013 + * Date: $date$ */ // start anonymous scope @@ -186,7 +186,6 @@ function objToFen(obj) { } window['ChessBoard'] = window['ChessBoard'] || function(containerElOrId, cfg) { -'use strict'; cfg = cfg || {}; @@ -200,6 +199,7 @@ var MINIMUM_JQUERY_VERSION = '1.7.0', // use unique class names to prevent clashing with anything else on the page // and simplify selectors +// NOTE: these should never change var CSS = { alpha: 'alpha-d2270', black: 'black-3c85d', @@ -255,8 +255,8 @@ var ANIMATION_HAPPENING = false, // JS Util Functions //------------------------------------------------------------------------------ -// http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript -function createId() { +// http://tinyurl.com/3ttloxj +function uuid() { return 'xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx'.replace(/x/g, function(c) { var r = Math.random() * 16 | 0; return r.toString(16); @@ -500,7 +500,7 @@ function expandConfig() { // fudge factor, and then keep reducing until we find an exact mod 8 for // our square size function calculateSquareSize() { - var containerWidth = parseInt(containerEl.css('width'), 10); + var containerWidth = parseInt(containerEl.width(), 10); // defensive, prevent infinite loop if (! containerWidth || containerWidth <= 0) { @@ -523,7 +523,7 @@ function createElIds() { for (var i = 0; i < COLUMNS.length; i++) { for (var j = 1; j <= 8; j++) { var square = COLUMNS[i] + j; - SQUARE_ELS_IDS[square] = square + '-' + createId(); + SQUARE_ELS_IDS[square] = square + '-' + uuid(); } } @@ -532,8 +532,8 @@ function createElIds() { for (var i = 0; i < pieces.length; i++) { var whitePiece = 'w' + pieces[i]; var blackPiece = 'b' + pieces[i]; - SPARE_PIECE_ELS_IDS[whitePiece] = whitePiece + '-' + createId(); - SPARE_PIECE_ELS_IDS[blackPiece] = blackPiece + '-' + createId(); + SPARE_PIECE_ELS_IDS[whitePiece] = whitePiece + '-' + uuid(); + SPARE_PIECE_ELS_IDS[blackPiece] = blackPiece + '-' + uuid(); } } @@ -697,7 +697,7 @@ function animateSquareToSquare(src, dest, piece, completeFn) { // create the animated piece and absolutely position it // over the source square - var animatedPieceId = createId(); + var animatedPieceId = uuid(); $('body').append(buildPiece(piece, true, animatedPieceId)); var animatedPieceEl = $('#' + animatedPieceId); animatedPieceEl.css({ @@ -738,7 +738,7 @@ function animateSparePieceToSquare(piece, dest, completeFn) { var destOffset = destSquareEl.offset(); // create the animate piece - var pieceId = createId(); + var pieceId = uuid(); $('body').append(buildPiece(piece, true, pieceId)); var animatedPieceEl = $('#' + pieceId); animatedPieceEl.css({ @@ -773,6 +773,10 @@ function animateSparePieceToSquare(piece, dest, completeFn) { // execute an array of animations function doAnimations(a, oldPos, newPos) { + if (a.length === 0) { + return; + } + ANIMATION_HAPPENING = true; var numFinished = 0; @@ -1116,7 +1120,7 @@ function trashDraggedPiece() { } function dropDraggedPieceOnSquare(square) { - + // if destination is same as source, piece stays picked up and is dropped at the next clicked square. if (CLICK_MOVE == false) { if (square === DRAGGED_PIECE_SOURCE) { @@ -1317,17 +1321,6 @@ widget.clear = function(useAnimation) { widget.position({}, useAnimation); }; -/* -// get or set config properties -// TODO: write this, GitHub Issue #1 -widget.config = function(arg1, arg2) { - // get the current config - if (arguments.length === 0) { - return deepCopy(cfg); - } -}; -*/ - // remove the widget from the page widget.destroy = function() { // remove markup @@ -1345,7 +1338,7 @@ widget.fen = function() { // flip orientation widget.flip = function() { - widget.orientation('flip'); + return widget.orientation('flip'); }; /* @@ -1401,14 +1394,14 @@ widget.orientation = function(arg) { if (arg === 'white' || arg === 'black') { CURRENT_ORIENTATION = arg; drawBoard(); - return; + return CURRENT_ORIENTATION; } // flip orientation if (arg === 'flip') { CURRENT_ORIENTATION = (CURRENT_ORIENTATION === 'white') ? 'black' : 'white'; drawBoard(); - return; + return CURRENT_ORIENTATION; } error(5482, 'Invalid value passed to the orientation method.', arg); @@ -1662,8 +1655,8 @@ function addEvents() { mousedownSparePiece); // mouse enter / leave square - boardEl.on('mouseenter', '.' + CSS.square, mouseenterSquare); - boardEl.on('mouseleave', '.' + CSS.square, mouseleaveSquare); + boardEl.on('mouseenter', '.' + CSS.square, mouseenterSquare) + .on('mouseleave', '.' + CSS.square, mouseleaveSquare); // IE doesn't like the events on the window object, but other browsers // perform better that way @@ -1671,12 +1664,12 @@ function addEvents() { // IE-specific prevent browser "image drag" document.ondragstart = function() { return false; }; - $('body').on('mousemove', mousemoveWindow); - $('body').on('mouseup', mouseupWindow); + $('body').on('mousemove', mousemoveWindow) + .on('mouseup', mouseupWindow); } else { - $(window).on('mousemove', mousemoveWindow); - $(window).on('mouseup', mouseupWindow); + $(window).on('mousemove', mousemoveWindow) + .on('mouseup', mouseupWindow); } // touch drag pieces @@ -1684,12 +1677,15 @@ function addEvents() { boardEl.on('touchstart', '.' + CSS.square, touchstartSquare); containerEl.on('touchstart', '.' + CSS.sparePieces + ' .' + CSS.piece, touchstartSparePiece); - $(window).on('touchmove', touchmoveWindow); - $(window).on('touchend', touchendWindow); + $(window).on('touchmove', touchmoveWindow) + .on('touchend', touchendWindow); } } function initDom() { + // create unique IDs for all the elements we will create + createElIds(); + // build board and save it in memory containerEl.html(buildBoardContainer()); boardEl = containerEl.find('.' + CSS.board); @@ -1700,7 +1696,7 @@ function initDom() { } // create the drag piece - var draggedPieceId = createId(); + var draggedPieceId = uuid(); $('body').append(buildPiece('wP', true, draggedPieceId)); draggedPieceEl = $('#' + draggedPieceId); @@ -1715,9 +1711,6 @@ function init() { if (checkDeps() !== true || expandConfig() !== true) return; - // create unique IDs for all the elements we will create - createElIds(); - initDom(); addEvents(); } @@ -1734,4 +1727,4 @@ return widget; window.ChessBoard.fenToObj = fenToObj; window.ChessBoard.objToFen = objToFen; -})(); // end anonymous wrapper +})(); // end anonymous wrapper \ No newline at end of file