Merge pull request #132 from orichalque/dev

Drag n Drop added
Reset of curses and blessings on new game
Modifiers automatically shuffled at the end of the round

index.html

@@ -125,8 +125,8 @@ <h3>Abilities</h3>
                   <div class="col" v-if="hasEnabledCardExchange"><button data-toggle="modal" data-target="#cardExchangeModal" class="btn btn-block btn-outline-secondary">Accept card</button></div>
                 </div>
 
-                <div class="row" style="display: table-cell">
-                  <div style="display: inline-block; padding-top: 1em;" class="abilityContainer" v-for="ability in abilitiesChosen">
+                <div id="abilities" class="row" style="display: table-cell">
+                  <div style="display: inline-block; padding-top: 1em;" class="abilityContainer" v-for="ability in abilitiesChosen" :key="ability.image">
                     <div class="col card-wrap-play" v-if="ability.duration == 0">
                         <img v-bind:src="'data/'+ability.image"
                           v-bind:class="[{played: ability.played}, {destroyed: ability.destroyed}, {picked: twoAbilitiesSelected.includes(ability)}]" 
@@ -878,6 +878,7 @@ <h3 class="modal-title" id="exampleModalLabel">Accept a card from...</h3>
   <script src="vendor/vuejs/vue.js"></script>
   <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
   <script src="vendor/cookiealert/cookiealert.js"></script>
+  <script src="vendor/sortable.js"></script>
   <script src="js/database_vanilla.js"></script>
   <script src="js/database_common.js"></script>
   <script src="js/database_jotl.js"></script>
@@ -889,8 +890,6 @@ <h3 class="modal-title" id="exampleModalLabel">Accept a card from...</h3>
   <script src="js/battlegoals.js"></script>
   <script src="js/database_battle-goals.js"></script>
   <script src="js/main.js"></script>
-
-
 </body>
 
 </html>

js/abilities.js

@@ -1,3 +1,9 @@
+Array.prototype.move = function(from, to) {
+    if(from >= 0 && to >= 0 && from < this.length && to < this.length) {
+        this.splice(to, 0, this.splice(from, 1)[0]);           
+    }
+};
+
 var abilitiesManagement = {
     data: {
         /* Ability information */
@@ -157,6 +163,9 @@ var abilitiesManagement = {
             card.numberOfTimesUsed = 0            
             this.$forceUpdate()
         },
+        updateCardPosition: function(oldIndex, newIndex) {
+            this.abilitiesChosen.move(oldIndex, newIndex)
+        },
         play: function() {
             if (this.twoAbilitiesSelected.length != 2) {
                 if(this.abilitiesChosen.length == 0) {
@@ -177,7 +186,8 @@ var abilitiesManagement = {
                 this.turn ++                
                 this.shortRestMode = false
                 this.$forceUpdate()
+                this.roundEndShuffle()
             }            
         }
     }
-}
+}

js/main.js

@@ -196,7 +196,7 @@ new Vue({
 
             }            
 
-            this.newGame();        
+            this.newGame();
         },
         getAcceptedCookie: function() {    
             return Cookies.get('accepted')
@@ -218,6 +218,12 @@ new Vue({
         },
         dismissGreenAlert: function(alert) {
             $('#greenAlert').hide()
+        },
+        draggableAbilities: function() {
+            new Sortable(document.getElementById('abilities'), {
+                animation: 150,
+                onUpdate: (event) => { this.updateCardPosition(event.oldIndex, event.newIndex) }
+            });
         }
     }, 
     beforeMount(){
@@ -226,7 +232,9 @@ new Vue({
         if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
             this.isMobile = true
         }
-    }
+    },
+    mounted() { this.$nextTick(() => { this.draggableAbilities() })},
+    updated() { this.$nextTick(() => { this.draggableAbilities() })}
   })
 
 function getRandomInt(max) {
@@ -257,4 +265,4 @@ $(window).on("load resize", function() {
   } else {
     $dropdown.off("mouseenter mouseleave");
   }
-});
+});

js/modifiers.js

@@ -1,5 +1,8 @@
 const curseName = 'curse'
 const blessingName = 'bless'
+const nullName = 'am-p-19'
+const twoXName = 'am-p-20'
+
 var modifiersManagement = {
     data: {
         /* Modifier information */
@@ -38,10 +41,8 @@ var modifiersManagement = {
             }            
         },
         removeModifier: function(card) {
-            var indexOfCardToRemove = this.modifiersChosen.indexOf(card)
-            this.modifiersChosen.splice(indexOfCardToRemove, 1)
-            var indexOfCardToRemove = this.modifiersDrawPile.indexOf(card)
-            this.modifiersDrawPile.splice(indexOfCardToRemove, 1)
+            this.modifiersChosen = this.modifiersChosen.filter(c => c != card)
+            this.modifiersDrawPile = this.modifiersDrawPile.filter(c => c != card)
 
             if (this.checkIfCurse(card)) this.curses --
             if (this.checkIfBlessing(card)) this.blessings --            
@@ -60,6 +61,12 @@ var modifiersManagement = {
             }
 
         },
+        checkIfNull: function(card) {
+            return (card && card.name === nullName) || false
+        },
+        checkIfTwoX: function(card) {
+            return (card && card.name === twoXName) || false
+        },
         checkIfCurse: function(card) {
             return this.modifiersSpecial.find(element => element.name == curseName).cards.includes(card) || false
         },
@@ -69,6 +76,10 @@ var modifiersManagement = {
         checkIfCurseOrBless: function(card) {
             return this.checkIfCurse(card) || this.checkIfBlessing(card)
         },
+        roundEndShuffle: function() {
+            const filtered = this.modifiersDiscardPile.filter(card => this.checkIfNull(card) || this.checkIfTwoX(card))
+            if(this.checkIfNull(this.lastDrawnModifier) || this.checkIfTwoX(this.lastDrawnModifier) || filtered.length > 0) this.shuffleModifiersDeck()
+        },
         shuffleModifiersDeck: function() {
             this.modifiersDrawPile = this.modifiersChosen.slice()
             this.lastDrawnModifier = null
@@ -102,8 +113,9 @@ var modifiersManagement = {
 
             if(availableCurses.length > 0) this.addModifier(availableCurses[0])
         },
-        resetModifiers: function() {        
+        resetModifiers: function() {
             this.shuffleModifiersDeck()
+            this.modifiersDrawPile.map(card => {if(this.checkIfCurseOrBless(card)) this.removeModifier(card)})
             this.blessings = this.getBlessings()
             this.curses = this.getCurses()            
         },