drop cards in correct location within a column (issue walkingeyerobot#41

)
kprevas · Apr 19, 2020 · a7f7de2 · a7f7de2
1 parent 041a96e
commit a7f7de2
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 15 deletions.
diff --git a/client/src/state/store.ts b/client/src/state/store.ts
@@ -34,6 +34,7 @@ export interface CardMove {
   sourceCardIndex: number,
   sourceMaindeck: boolean,
   targetColumnIndex: number,
+  targetCardIndex: number,
   targetMaindeck: boolean,
 }
 
@@ -213,21 +214,35 @@ const store = new Vuex.Store({
     },
 
     moveCard(state: RootState, move: CardMove) {
+      let card: MtgCard;
+      let source: CardColumn[];
+      if (move.sourceMaindeck) {
+        source = state.decks[move.deckIndex].maindeck;
+      } else {
+        source = state.decks[move.deckIndex].sideboard;
+      }
       if (move.sourceMaindeck !== move.targetMaindeck
           || move.sourceColumnIndex !== move.targetColumnIndex) {
-        let card: MtgCard;
-        if (move.sourceMaindeck) {
-          [card] = state.decks[move.deckIndex].maindeck[move.sourceColumnIndex]
-              .splice(move.sourceCardIndex, 1);
-        } else {
-          [card] = state.decks[move.deckIndex].sideboard[move.sourceColumnIndex]
-              .splice(move.sourceCardIndex, 1);
-        }
+        [card] = source[move.sourceColumnIndex]
+            .splice(move.sourceCardIndex, 1);
+        let target: CardColumn[];
         if (move.targetMaindeck) {
-          state.decks[move.deckIndex].maindeck[move.targetColumnIndex].push(card);
+          target = state.decks[move.deckIndex].maindeck;
         } else {
-          state.decks[move.deckIndex].sideboard[move.targetColumnIndex].push(card);
+          target = state.decks[move.deckIndex].sideboard;
         }
+        target[move.targetColumnIndex]
+            .splice(move.targetCardIndex, 0, card);
+      } else if (move.sourceCardIndex !== move.targetCardIndex
+          && move.sourceCardIndex !== move.targetCardIndex + 1) {
+        [card] = source[move.sourceColumnIndex]
+            .splice(move.sourceCardIndex, 1);
+        const targetCardIndex =
+            (move.targetCardIndex < move.sourceCardIndex)
+                ? move.targetCardIndex
+                : move.targetCardIndex - 1;
+        source[move.targetColumnIndex]
+            .splice(targetCardIndex, 0, card);
       }
     },
 

diff --git a/client/src/ui/deckbuilder/DeckBuilderColumn.vue b/client/src/ui/deckbuilder/DeckBuilderColumn.vue
@@ -64,41 +64,70 @@
             sourceCardIndex: Number(targetElement.dataset["index"]),
             targetMaindeck: false,
             targetColumnIndex: 0,
+            targetCardIndex: 0,
           };
           e.dataTransfer.setData("text/plain", JSON.stringify(cardMove));
           e.dataTransfer.effectAllowed = "move";
         }
       },
 
+      getTargetIndex: function (e: DragEvent) {
+        let targetIndex = 0;
+        for (let i = 0; i < this.$el.childElementCount; i++) {
+          const child = this.$el.children[i];
+          const isTarget = child === e.target || child === (<Element>e.target).parentNode;
+          if (isTarget) {
+            targetIndex = i + 1;
+          }
+        }
+        return targetIndex;
+      },
+
       dragOver(e: DragEvent) {
         e.preventDefault();
         if (e.dataTransfer) {
           e.dataTransfer.dropEffect = "move";
           this.$el.classList.add("columnDrop");
+          if (this.$el.childElementCount > 0) {
+            let targetIndex = this.getTargetIndex(e);
+            for (let i = 0; i < this.$el.childElementCount; i++) {
+              const child = this.$el.children[i];
+              child.classList.toggle("cardDropAbove",
+                  i === 0 && targetIndex === 0);
+              child.classList.toggle("cardDropBelow",
+                  i === targetIndex - 1);
+            }
+          }
         }
       },
 
       dragEnd(e: DragEvent) {
         e.preventDefault();
-        if (e.dataTransfer) {
-          this.$el.classList.remove("columnDrop");
-        }
+        this.clearClasses();
       },
 
       drop(e: DragEvent) {
         e.preventDefault();
         if (e.dataTransfer) {
           const cardMove: CardMove = JSON.parse(e.dataTransfer.getData("text/plain"));
-          // TODO find correct index based on event target
           this.$tstore.commit("moveCard",
               {
                 ...cardMove,
                 targetMaindeck: this.maindeck,
                 targetColumnIndex: this.columnIndex,
+                targetCardIndex: this.getTargetIndex(e),
               });
         }
+        this.clearClasses();
+      },
+
+      clearClasses() {
         this.$el.classList.remove("columnDrop");
-      }
+        for (const child of this.$el.children) {
+          child.classList.remove("cardDropAbove");
+          child.classList.remove("cardDropBelow");
+        }
+      },
     },
   });
 </script>
@@ -117,6 +146,7 @@
   .card {
     height: 30px;
     overflow-y: visible;
+    position: relative;
   }
 
   .card-img {
@@ -129,4 +159,28 @@
   .card-img:hover {
     border-color: #bbd;
   }
+
+  .cardDropAbove:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 10px;
+    background: #00f;
+    border-radius: 2px;
+    pointer-events: none;
+  }
+
+  .cardDropBelow:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 10px;
+    background: #00f;
+    border-radius: 2px;
+    pointer-events: none;
+  }
 </style>