Merge pull request #127 from orichalque/dev

Update of the modifiers

css/style.css

@@ -185,6 +185,7 @@ h4, b {
 }
 
 .middleIconContainer {
+  opacity: 0;
   transition: .5s ease;
   position: absolute;
   top: 50%;
@@ -197,6 +198,10 @@ h4, b {
   justify-content:space-around;
 }
 
+.middleIconContainer:hover {
+  opacity: 1;
+}
+
 .topIconContainer {
   transition: .5s ease;
   position: absolute;
@@ -314,6 +319,29 @@ h4, b {
   color: white;
 }
 
+.onCardHover {
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);    
+  text-align: center; 
+  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;      
+  color: white;
+}
+.onCardHover:hover {
+  opacity: 1;
+  transition: .5s ease;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);    
+  text-align: center; 
+  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;      
+  color: white;
+}
 .onBottomCardNoHover {
   opacity: 1;
   position: absolute;

index.html

@@ -224,12 +224,38 @@ <h4>{{ ability.numberOfTimesUsed }}</h4>
             <!-- Right side of the play screen-->
             <div class="col-lg-5" style="padding-top: 1em; padding-bottom: 1em">
               <h3>Modifiers</h3>
+              <!-- Curse / Blessing -->
+              <div class="row no-gutters" style="padding-left: 0.3em;">
+                <div class="col-auto">    
+                  <button v-on:click="addBlessing()" class="btn btn-sm" style="outline: none; box-shadow: none;">
+                    <img v-bind:src="'data/attack-modifiers/base/player-mod/am-pm-01.png'" class="smallimage rounded" />
+                    <div v-if="blessings > 0" class="onCardNoHover">
+                     <h2> {{ blessings }}</h2>
+                    </div>
+                    <div v-else class="onCardHover">
+                      <h3>Blessing </h3>
+                    </div>                      
+                  </button>
+                </div>
+                <div class="col-auto">
+                  <button v-on:click="addCurse()" class="btn btn-sm" style="outline: none; box-shadow: none;"w>
+                    <img v-bind:src="'data/attack-modifiers/base/player-mod/am-pm-21.png'" class="smallimage rounded" />
+                    <div v-if="curses > 0" class="onCardNoHover">
+                      <h2>{{ curses }}</h2>
+                    </div>
+                    <div v-else class="onCardHover">
+                      <h3>Curse </h3>
+                    </div>                      
+                  </button>
+                </div>
+
+              </div>
               <!-- BASE DECK BACK -->
               <div class="row no-gutters">
                 <div class="modifiersCardContainer">
                   <div class="col-auto" v-if="modifiersDrawPile.length != 0">
                     <img v-bind:src="'data/attack-modifiers/back/top.png'" class="image rounded" />
-                    <div class="abilityButtons">
+                    <div class="middleIconContainer">
                       <button v-on:click="drawModifier()" class="add btn btn-light">
                         Draw
                       </button>
@@ -239,7 +265,7 @@ <h3>Modifiers</h3>
                 <div class="modifiersCardContainer">
                   <div class="col-auto" v-if="lastDrawnModifier != null">
                     <img v-bind:src="'data/'+lastDrawnModifier.image" class="image rounded" />
-                    <div class="abilityButtons">
+                    <div class="middleIconContainer">
                       <button v-on:click="shuffleModifiersDeck()" class="add btn btn-light">
                         Shuffle
                       </button>

js/main.js

@@ -106,7 +106,8 @@ new Vue({
                 this.restoreItem(item);
             })
 
-            this.shuffleModifiersDeck()
+            this.resetModifiers()
+
             this.turn = 1            
             this.$forceUpdate()
 

js/modifiers.js

@@ -1,3 +1,5 @@
+const curseName = 'curse'
+const blessingName = 'bless'
 var modifiersManagement = {
     data: {
         /* Modifier information */
@@ -10,7 +12,9 @@ var modifiersManagement = {
         specialModifiers : false,
         lastDrawnModifier: null,
         modifiersDiscardPile : [],
-        overlayCard: {}        
+        overlayCard: {},
+        blessings: 0,
+        curses: 0        
     },
     methods: {
         displayModifiers: function(param) {
@@ -25,6 +29,10 @@ var modifiersManagement = {
             if (!this.modifiersChosen.includes(card)) {
                 this.modifiersChosen.push(card)
                 this.modifiersDrawPile.push(card)
+
+                if (this.checkIfCurse(card)) this.curses ++
+                if (this.checkIfBlessing(card)) this.blessings ++    
+
             } else {
                 this.removeModifier(card)
             }            
@@ -34,24 +42,32 @@ var modifiersManagement = {
             this.modifiersChosen.splice(indexOfCardToRemove, 1)
             var indexOfCardToRemove = this.modifiersDrawPile.indexOf(card)
             this.modifiersDrawPile.splice(indexOfCardToRemove, 1)
+
+            if (this.checkIfCurse(card)) this.curses --
+            if (this.checkIfBlessing(card)) this.blessings --            
         },
         drawModifier: function() {
             var randomint = getRandomInt(this.modifiersDrawPile.length)
             if(this.lastDrawnModifier != null ){
                 this.modifiersDiscardPile.unshift(this.lastDrawnModifier)
             }
             this.lastDrawnModifier = this.modifiersDrawPile[randomint]
-            if(this.checkIfCurseOrBless(this.lastDrawnModifier)){
+
+            if (this.checkIfCurseOrBless(this.lastDrawnModifier)) {
                 this.removeModifier(this.lastDrawnModifier)
             } else {
-                this.modifiersDrawPile.splice(randomint,1)
+                this.modifiersDrawPile.splice(randomint,1)            
             }
+
         },
-        checkIfCurseOrBless: function(card){
-            var blessDeck = this.modifiersSpecial.find(element => element.name == 'bless')
-            var curseDeck = this.modifiersSpecial.find(element => element.name == 'curse')
-            return ( (blessDeck !== undefined) && (blessDeck.cards.includes(card)) ) ||
-            ( (curseDeck !== undefined) && (curseDeck.cards.includes(card)) )
+        checkIfCurse: function(card) {
+            return this.modifiersSpecial.find(element => element.name == curseName).cards.includes(card) || false
+        },
+        checkIfBlessing: function(card) {
+            return this.modifiersSpecial.find(element => element.name == blessingName).cards.includes(card) || false
+        },
+        checkIfCurseOrBless: function(card) {
+            return this.checkIfCurse(card) || this.checkIfBlessing(card)
         },
         shuffleModifiersDeck: function() {
             this.modifiersDrawPile = this.modifiersChosen.slice()
@@ -69,6 +85,33 @@ var modifiersManagement = {
             this.modifierCategory = null
             this.className = ''
             this.modifiersChosen = this.modifiersBase.slice()
+        },
+        addBlessing: function() {
+            const availableBlessings = this.modifiersSpecial
+                .find(element => element.name == blessingName)
+                .cards
+                .filter(element => !this.modifiersDrawPile.includes(element))
+
+            if(availableBlessings.length > 0) this.addModifier(availableBlessings[0])
+        },
+        addCurse: function() {
+            const availableCurses = this.modifiersSpecial
+                .find(element => element.name == curseName)
+                .cards
+                .filter(element => !this.modifiersDrawPile.includes(element))
+
+            if(availableCurses.length > 0) this.addModifier(availableCurses[0])
+        },
+        resetModifiers: function() {        
+            this.shuffleModifiersDeck()
+            this.blessings = this.getBlessings()
+            this.curses = this.getCurses()            
+        },
+        getBlessings: function() {
+            return this.modifiersDrawPile.filter(element => this.checkIfBlessing(element)).length
+        },
+        getCurses: function() {
+            return this.modifiersDrawPile.filter(element => this.checkIfCurse(element)).length
         }
     }
-}
+}