Now able to sort gear

orichalque · Feb 17, 2021 · a71e9a1 · a71e9a1
1 parent 0db7076
commit a71e9a1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -61,19 +61,19 @@ <h4>Gloomhaven Deckbuilder</h4>
         <div class="collapse navbar-collapse" id="navbarResponsive">
           <ul class="navbar-nav ml-auto">
             <li class="nav-item py-0" v-bind:class="{active: menu === 'home'}">
-              <a class="nav-link" href="#" v-on:click="set('home')">Play</a>
+              <a class="nav-link" href="#" v-on:click="setMenu('home')">Play</a>
             </li>
             <li class="nav-item py-0" v-bind:class="{active: menu === 'abilities'}">
-              <a class="nav-link" href="#" :data-toggle="!classChosen? 'modal': false" data-target="#characterSelectionModal" v-on:click="set('abilities')">Abilities</a>
+              <a class="nav-link" href="#" :data-toggle="!classChosen? 'modal': false" data-target="#characterSelectionModal" v-on:click="setMenu('abilities')">Abilities</a>
             </li>
             <li class="nav-item py-0" v-bind:class="{active: menu === 'enhancement'}">
-              <a class="nav-link" href="#" v-on:click="set('enhancement')">Enhancement</a>
+              <a class="nav-link" href="#" v-on:click="setMenu('enhancement')">Enhancement</a>
             </li>            
             <li class="nav-item py-0" v-bind:class="{active: menu ==='modifiers'}">
-              <a class="nav-link" href="#" :data-toggle="!classChosen? 'modal': false" data-target="#characterSelectionModal" v-on:click="set('modifiers')">Modifiers</a>
+              <a class="nav-link" href="#" :data-toggle="!classChosen? 'modal': false" data-target="#characterSelectionModal" v-on:click="setMenu('modifiers')">Modifiers</a>
             </li>
             <li class="nav-item py-0" v-bind:class="{active: menu ==='gear'}">
-              <a class="nav-link" href="#" v-on:click="set('gear')">Gear</a>
+              <a class="nav-link" href="#" v-on:click="setMenu('gear')">Gear</a>
             </li>
             <li class="nav-item dropdown" v-bind:class="{active: menu ==='gameoptions'}">
               <a class="nav-link dropdown-toggle" id="navbarDropdown2" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Game options</a>
@@ -244,7 +244,7 @@ <h4>{{ ability.numberOfTimesUsed }}</h4>
               </div>
             </div>
             <div class="col-lg-7 border-right" v-else id="abilitiesSection">
-              Build your deck in the <a href="#" :data-toggle="!classChosen? 'modal': false" data-target="#characterSelectionModal" v-on:click="set('abilities')">Abilities</a> section first !
+              Build your deck in the <a href="#" :data-toggle="!classChosen? 'modal': false" data-target="#characterSelectionModal" v-on:click="setMenu('abilities')">Abilities</a> section first !
             </div>
 
             <!-- Right side of the play screen-->
@@ -313,11 +313,11 @@ <h3>Curse </h3>
 
               <h3>Gear</h3>
 
-              <div class="row justify-content-center no-gutters">
+              <div class="row justify-content-center no-gutters" id="gear">
                 <div v-if="gearChosen.length == 0" class="smallCardContainer">
-                    Choose your equipment in the <a href="#" v-on:click="set('gear')">Gear</a> section !
+                    Choose your equipment in the <a href="#" v-on:click="setMenu('gear')">Gear</a> section !
                 </div>
-                <div style="display: inline-block;" class="smallCardContainer" v-for="gear in gearChosen">
+                <div style="display: inline-block;" class="smallCardContainer"  v-for="gear in gearChosen" :key="gear.xws">
                   <div class="col-sm mt-2">
                     <img v-bind:src="'data/'+gear.image" class="smallimage rounded "
                       v-bind:class="[{tapped: gear.played && !gear.lost}, {played: gear.lost}]"></img>
@@ -583,7 +583,7 @@ <h4 class="onCardNoHover"> {{ item.points +1 }}</h4>
       <!-- ENHANCEMENT -->
       <div class="col-lg-12 container-fluid" id="enhancement" v-if="menu == 'enhancement'">
         <div v-if="abilitiesChosen.length == 0" id="enhancementClassChosen" class="text-center">
-            Build your deck in the <a href="#" :data-toggle="!classChosen? 'modal': false" data-target="#characterSelectionModal" v-on:click="set('abilities')">Abilities</a> section first !
+            Build your deck in the <a href="#" :data-toggle="!classChosen? 'modal': false" data-target="#characterSelectionModal" v-on:click="setMenu('abilities')">Abilities</a> section first !
         </div>
         <div v-else>
           <div class="row" >

diff --git a/js/gear.js b/js/gear.js
@@ -68,6 +68,9 @@ var gearManagement = {
                     this.addGear(item)
                 }
             }))
+        },
+        updateGearPosition: function(oldIndex, newIndex) {
+            this.gearChosen.move(oldIndex, newIndex)
         }
     }
 }