Fixed double fire on drag and click

.eslintrc

@@ -8,6 +8,7 @@
         #     2,
         #     "unix"
         # ],
+        # https://github.com/Gillespie59/eslint-plugin-angular#rules
         "semi": [
             2,
             "always"
@@ -36,7 +37,7 @@
         "angular/module-dependency-order": [0, {"grouped": true, "prefix": null}],
         "angular/module-getter": 0,
         "angular/module-name": 0,
-        "angular/module-setter": 2,
+        "angular/module-setter": 0,
         "angular/no-angular-mock": 0,
         "angular/no-controller": 0,
         "angular/no-cookiestore": 2,

index.html

@@ -85,11 +85,11 @@
                   <span  ng-show="rc.isAvailable(r)"
                     id="{{r.key}}"
                     class="{{r.key}} element element-store {{ r.state.interesting ? 'blink' : '' }} {{r.color}} {{rc.isAvailable(r) ? ' ui-draggable': 'empty'}}"
-                    ng-click="rc.onClick(r)"
+                    ng-click="rc.onClick(r,$event)"
                     data-element="{{r.key}}"
                     data-drag="rc.isAvailable(r)"
-                    jqyoui-draggable="{containment:'offset'}"
-                    data-jqyoui-options="{{rc.dragOptions}}"
+                    jqyoui-draggable="rc.dragOptions"
+                    data-jqyoui-options="rc.jqyouiDragOptions"
                     data-hashkey={{r.$$hashKey}}
                     >
                         {{r.key}}
@@ -123,8 +123,8 @@
 
             <div id="detector-element-container"
                 ng-cloak
-                jqyoui-droppable="{onDrop: 'dc.onDrop'}"
-                data-jqyoui-options="{{dc.dropOptions}}"
+                jqyoui-droppable="dc.dropOptions"
+                data-jqyoui-options="dc.jqyouiDropOptions"
                 data-drop="true"
                 >
                 <div class="main-line card-line" id="lastCards">

js/app.js

@@ -5,7 +5,7 @@
 var app = (function () {
     Helpers.validateSaveVersion();
 
-    var app = angular.module('scienceAlchemy', ['ngDragDrop', 'ui.grid']);
+    var app = angular.module('scienceAlchemy', ['ngDragDrop', 'ui.grid','ngAnimate']);
 
     // directives
     /**
@@ -161,13 +161,26 @@ var app = (function () {
 
     function ElementController($scope, $compile, game, lab) {
         var vm = this;
-        vm.dragOptions = {
+        vm.jqyouiDragOptions = {
             revert: true, //"invalid",
             zIndex: 100,
             cancel: false,
         };
+        vm.dragOptions = {
+            containment:'offset',
+            onStart:'rc.dragStart(r)',
+            onStop:'rc.dragStop(r)',
+        };
         vm.onClick = function (card) {
-            game.play(card);
+            // a flag to preven ng-click being fired on drag
+            if (!card.state.dragged)
+                game.play(card);
+        };
+        vm.dragStart = function(event, ui,card){
+            card.state.dragged=true;
+        };
+        vm.dragStop = function(event, ui,card){
+            card.state.dragged=false;
         };
         vm.elements = game.elements;
         vm.isVisible = function (item) {
@@ -189,7 +202,7 @@ var app = (function () {
         vm.ruleCost = 300;
         vm.lastCards = game.lastCards;
         vm.incorrectCards = game.incorrectCards;
-        vm.dropOptions = {
+        vm.jqyouiDropOptions = {
             //   accept: ".rune",
             addClasses: true,
             // greedy: true,
@@ -197,6 +210,7 @@ var app = (function () {
             activeClass: "ui-state-hover",
             hoverClass: "ui-state-active",
         };
+        vm.dropOptions={onDrop: 'dc.onDrop'};
         vm.onDrop = function (event, ui) {
             var result = game.onDrop(event, ui, game);
         };