resolved issue: Deck is inconsistent #11

apps/web/priv/static/app/js/dragndrop.js

@@ -11,6 +11,8 @@ function DragScope(scope) {
         size = Math.max(sizeX, sizeY) || 1;
     }
 
+    var currentDragTarget = null
+
     function Draggable(root, options)
     {
         options = options || {},
@@ -21,6 +23,12 @@ function DragScope(scope) {
         this.enable();
     }
 
+    Draggable.revert = function(){
+        if(currentDragTarget){
+            currentDragTarget.drop()
+        }
+    }
+
     var sizeX,
         sizeY,
         size,
@@ -61,7 +69,7 @@ function DragScope(scope) {
         },
 
         onMove: function(e, silent) {
-            e.preventDefault(), moved = !0, this.dx = ((this.curX = this.clientX(e)) - this.x) * size, 
+            e.preventDefault(), moved = !0, currentDragTarget = this, this.dx = ((this.curX = this.clientX(e)) - this.x) * size, 
             this.dy = ((this.curY = this.clientY(e)) - this.y) * size, this.trf && (this.dx += 0 | this.trf[0], 
             this.dy += 0 | this.trf[1]), this.$el.attr("transform", "translate(" + this.dx + " " + this.dy + ")"), 
             silent || this.$el.trigger("dragmove", {
@@ -74,26 +82,50 @@ function DragScope(scope) {
         },
 
         onUp: function(e, silent) {
-            if (e.preventDefault(), this.$el.attr("style", "cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"), 
-            moved) {
-                for (var droped, item, dropList = scope.Droppable.list, i = 0, l = dropList.length; l > i; i++) if (item = dropList[i], 
-                item.intersect(this.curX, this.curY)) {
-                    droped = item.drop(this, this.curX, this.curY);
-                    break;
+            e.preventDefault()
+            this.drop(e, silent)
+        },
+
+        drop: function(e, silent){
+            currentDragTarget = null
+            this.$el.attr('style', 'cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;')
+
+            // detect drop
+            if(moved){
+                var dropList = scope.Droppable.list, 
+                    droped
+                for(var i = 0, l = dropList.length, item; i < l; i++){
+                    item = dropList[i]
+                    if(item.intersect(this.curX, this.curY)){
+                        droped = item.drop(this, this.curX, this.curY)
+                        break
+                    }
                 }
-                droped || (this.$el.transform({
-                    from: [ this.dx, this.dy ].join(" "),
-                    to: this.initTrf.join(" ")
-                }), silent || this.$el.trigger("revert")), silent || this.$el.trigger("dragstop", {
-                    detail: {
-                        x: this.curX,
-                        y: this.curY,
-                        event: e
+
+                // revert
+                if(!droped){
+                    this.$el.transform({
+                        from: [this.dx, this.dy].join(' '),
+                        to: this.initTrf.join(' ')
+                    })
+                    if(!silent){
+                        this.$el.trigger('revert')
                     }
-                }), moved = !1;
+                }
+                if(!silent){
+                    this.$el.trigger('dragstop', {detail: {x: this.curX, y: this.curY, event: e}})
+                }
+                moved = false
+            }
+
+            if(document.createTouch){
+                this.$el.off('touchmove', this.onMove)
+                this.$el.off('touchend', this.onUp)
+            }
+            else {
+                $('body').off('mousemove', this.onMove)
+                $('body').off('mouseup', this.onUp)
             }
-            document.createTouch ? (this.$el.off("touchmove", this.onMove), this.$el.off("touchend", this.onUp)) : ($("body").off("mousemove", this.onMove), 
-            $("body").off("mouseup", this.onUp));
         }
     });
 

apps/web/priv/static/app/js/okey/okey.js

@@ -187,9 +187,15 @@ function PostLoad()
                 $miniPile.length ? $miniPile.first().remove() : $wholeCards.append($fullWholeCards);
             }
         }
-        e.detail.player == scope.user && deck.insert(e.detail.revealed), centralCard.dragHandler.disable(), 
-        centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn)
-                       .off(document.createTouch ? "touchend" : "mouseup", fadeOut);
+
+        if(e.detail.player == scope.user){
+            scope.Draggable.revert()
+            deck.insert(e.detail.revealed)
+        }
+        centralCard.dragHandler.disable()
+        centralCard.$el
+            .off(document.createTouch ? 'touchstart' : 'mousedown', fadeIn)
+            .off(document.createTouch ? 'touchend' : 'mouseup', fadeOut)
 
         var cards = playersLeftHandsMap[scope.user].cards;