From 3af3fabf50518988bcebb23ecc81eb4c235c146e Mon Sep 17 00:00:00 2001 From: "marcins78@gmail.com" Date: Sat, 29 Oct 2011 14:43:39 +0000 Subject: [PATCH] Adding browser gesture to see a card. --- .../src/main/webapp/js/deckBuildingUi.js | 97 ++++++++++++++----- .../src/main/webapp/js/gameUi.js | 62 ++++++++++-- 2 files changed, 131 insertions(+), 28 deletions(-) diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/deckBuildingUi.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/deckBuildingUi.js index 075d6772c..0d902e858 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/deckBuildingUi.js +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/deckBuildingUi.js @@ -316,28 +316,18 @@ var GempLotrDeckBuildingUI = Class.extend({ this.selectionFunc = this.addCardToDeck; - $("body").click(function (event) { - var tar = $(event.target); - if (tar.hasClass("actionArea")) { - tar = tar.parent(); - if (tar.hasClass("borderOverlay")) { - var selectedCardElem = tar.parent(); - if (event.which == 1) { - if (event.shiftKey) { - that.displayCardInfo(selectedCardElem.data("card")); - } else if (selectedCardElem.hasClass("cardInCollection")) { - that.selectionFunc(selectedCardElem.data("card").blueprintId, selectedCardElem.data("card").zone); - that.layoutUI(false); - } else if (selectedCardElem.hasClass("cardInDeck")) { - that.removeCardFromDeck(selectedCardElem); - that.layoutUI(false); - } - return false; - } - } - } - return false; - }); + $("body").click( + function (event) { + return that.clickCardFunction(event); + }); + $("body").mousedown( + function (event) { + return that.dragStartCardFunction(event); + }); + $("body").mouseup( + function (event) { + return that.dragStopCardFunction(event); + }); var width = $(window).width(); var height = $(window).height(); @@ -370,6 +360,69 @@ var GempLotrDeckBuildingUI = Class.extend({ this.checkDeckStatsDirty(); }, + clickCardFunction: function(event) { + var tar = $(event.target); + if (tar.hasClass("actionArea")) { + tar = tar.parent(); + if (tar.hasClass("borderOverlay")) { + var selectedCardElem = tar.parent(); + if (event.which == 1) { + if (!this.successfulDrag) { + if (event.shiftKey) { + this.displayCardInfo(selectedCardElem.data("card")); + } else if (selectedCardElem.hasClass("cardInCollection")) { + this.selectionFunc(selectedCardElem.data("card").blueprintId, selectedCardElem.data("card").zone); + this.layoutUI(false); + } else if (selectedCardElem.hasClass("cardInDeck")) { + this.removeCardFromDeck(selectedCardElem); + this.layoutUI(false); + } + return false; + } + } + } + } + return true; + }, + + dragCardData: null, + dragStartX: null, + dragStartY: null, + successfulDrag: null, + + dragStartCardFunction: function(event) { + this.successfulDrag = false; + var tar = $(event.target); + if (tar.hasClass("actionArea")) { + tar = tar.parent(); + if (tar.hasClass("borderOverlay")) { + var selectedCardElem = tar.parent(); + if (event.which == 1) { + this.dragCardData = selectedCardElem.data("card"); + this.dragStartX = event.clientX; + this.dragStartY = event.clientY; + return false; + } + } + } + return true; + }, + + dragStopCardFunction: function(event) { + if (this.dragCardData != null) { + if (this.dragStartY - event.clientY >= 20) { + this.displayCardInfo(this.dragCardData); + this.successfulDrag = true; + } + this.dragCardData = null; + this.dragStartX = null; + this.dragStartY = null; + + return false; + } + return true; + }, + loadDecks: function() { var that = this; this.comm.getDecks(function(xml) { diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js index 713fa80ed..413cb4ce6 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js @@ -204,7 +204,15 @@ var GempLotrGameUI = Class.extend({ $("body").click( function (event) { - that.clickCardFunction(event); + return that.clickCardFunction(event); + }); + $("body").mousedown( + function (event) { + return that.dragStartCardFunction(event); + }); + $("body").mouseup( + function (event) { + return that.dragStopCardFunction(event); }); }, @@ -263,18 +271,60 @@ var GempLotrGameUI = Class.extend({ if (tar.hasClass("borderOverlay")) { var selectedCardElem = tar.parent(); if (event.which == 1) { - if (event.shiftKey) { - this.displayCardInfo(selectedCardElem.data("card")); - } else if (selectedCardElem.hasClass("selectableCard")) - this.selectionFunction(selectedCardElem.data("card").cardId, event); + if (!this.successfulDrag) { + if (event.shiftKey) { + this.displayCardInfo(selectedCardElem.data("card")); + } else if (selectedCardElem.hasClass("selectableCard")) + this.selectionFunction(selectedCardElem.data("card").cardId, event); + return false; + } } } } else if (tar.hasClass("cardHint")) { var blueprintId = tar.attr("value"); var card = new Card(blueprintId, "SPECIAL", "hint", ""); this.displayCard(card); + return false; } - return false; + return true; + }, + + dragCardData: null, + dragStartX: null, + dragStartY: null, + successfulDrag: null, + + dragStartCardFunction: function(event) { + this.successfulDrag = false; + var tar = $(event.target); + if (tar.hasClass("actionArea")) { + tar = tar.parent(); + if (tar.hasClass("borderOverlay")) { + var selectedCardElem = tar.parent(); + if (event.which == 1) { + this.dragCardData = selectedCardElem.data("card"); + this.dragStartX = event.clientX; + this.dragStartY = event.clientY; + return false; + } + } + } + return true; + }, + + dragStopCardFunction: function(event) { + if (this.dragCardData != null) { + if (this.dragStartY - event.clientY >= 20) { + this.displayCardInfo(this.dragCardData); + this.successfulDrag = true; + } + this.dragCardData = null; + this.dragStartX = null; + this.dragStartY = null; + + return false; + } + return true; }, displayCard: function(card) {