From a3a88a9f420aeb1359b2025aabeb9973a7c188d9 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Thu, 11 Feb 2021 11:26:10 +0100
Subject: [PATCH 01/26] Added button to sort modifiers. Can display up to 9
 modifiers in dedicated modal. Button should be displayed conditionnaly, w.r.t
 an option in the menu. Cards must be reordered with drag n drop

---
 index.html      | 34 ++++++++++++++++++++++++++++++++++
 js/modifiers.js | 13 +++++++++++--
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 0232c5d7..d1388f09 100644
--- a/index.html
+++ b/index.html
@@ -123,6 +123,7 @@ <h3>Abilities</h3>
                     <button class="btn btn-outline-secondary" :class="{active: specialClassMode === 'left'}" v-on:click="specialClassMode = 'left'">Left</button><button class="btn btn-outline-secondary" :class="{active: specialClassMode ==='right'}" v-on:click="specialClassMode = 'right'">Right</button>
                   </div>
                   <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 class="col" ><button data-toggle="modal" data-target="#sortModifierModal" class="btn btn-block btn-outline-secondary">Sort modifiers</button></div>
                 </div>
 
                 <div id="abilities" class="row" style="display: table-cell">
@@ -861,6 +862,39 @@ <h3 class="modal-title" id="exampleModalLabel">Accept a card from...</h3>
       </div>
     </div>
 
+    <div class="modal fade" id="sortModifierModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-xl" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 class="modal-title" id="exampleModalLabel">Sort modifiers</h3>
+        </div>
+
+        <div class="modal-body container">
+          <h3 class="align-baseline" style="display: inline;">Cards to display:</h3>
+            <button class="btn btn-light align-baseline" v-bind:class="[{'btn-dark': cardsToDisplayCurrent == 0}]" v-on:click="cardsToDisplayCurrent = 0">
+              <h3>0</h3>
+            </button>
+            <button v-for='cardsToDisplay in 9' class="btn btn-light align-baseline"
+              v-bind:class="[{'btn-dark': cardsToDisplay == cardsToDisplayCurrent}]" v-on:click="cardsToDisplayCurrent = cardsToDisplay">
+              <h3>{{ cardsToDisplay}}</h3>
+            </button>
+            
+            <div class="row">
+              <div class="col-1" v-for='cardsToDisplay in cardsToDisplayCurrent'>
+                <img v-bind:src="'data/'+modifiersDrawPile[cardsToDisplay - 1].image" style="width:8em" class="image rounded" />
+              </div>
+            </div>
+            
+        </div>
+
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="cardsToDisplayCurrent = 0">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
     <div v-if="!getAcceptedCookie()" class="alert text-center" role="alert">
       <b>Do you like cookies?</b> &#x1F36A; <span>We use cookies to store the cards you picked. This makes sure you do
         not have to re-enter them every time you launch this application. </span><a href="https://cookiesandyou.com/"
diff --git a/js/modifiers.js b/js/modifiers.js
index 386b5df7..92a211fa 100644
--- a/js/modifiers.js
+++ b/js/modifiers.js
@@ -16,6 +16,7 @@ var modifiersManagement = {
         lastDrawnModifier: null,
         modifiersDiscardPile : [],
         overlayCard: {},
+        cardsToDisplayCurrent: 0,
         blessings: 0,
         curses: 0        
     },
@@ -52,12 +53,12 @@ var modifiersManagement = {
             if(this.lastDrawnModifier != null ){
                 this.modifiersDiscardPile.unshift(this.lastDrawnModifier)
             }
-            this.lastDrawnModifier = this.modifiersDrawPile[randomint]
+            this.lastDrawnModifier = this.modifiersDrawPile[0]
 
             if (this.checkIfCurseOrBless(this.lastDrawnModifier)) {
                 this.removeModifier(this.lastDrawnModifier)
             } else {
-                this.modifiersDrawPile.splice(randomint,1)            
+                this.modifiersDrawPile.splice(0,1)            
             }
             
         },
@@ -82,6 +83,14 @@ var modifiersManagement = {
         },
         shuffleModifiersDeck: function() {
             this.modifiersDrawPile = this.modifiersChosen.slice()
+
+            // JavaScript implementation of the Durstenfeld shuffle, an optimized version of Fisher-Yates
+            // More here: https://stackoverflow.com/a/12646864
+            for (let i = this.modifiersDrawPile.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [this.modifiersDrawPile[i], this.modifiersDrawPile[j]] = [this.modifiersDrawPile[j], this.modifiersDrawPile[i]];
+            }
+
             this.lastDrawnModifier = null
             this.modifiersDiscardPile = []
         },

From ceb4b58d08700ddd0ded43a2052b2ba2c696ddb8 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 11:18:37 +0100
Subject: [PATCH 02/26] Drag n Drop for modifiers implemented

---
 index.html      | 12 +++++++++---
 js/main.js      | 16 ++++++++++++++--
 js/modifiers.js |  3 +++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index d1388f09..ba6f6acf 100644
--- a/index.html
+++ b/index.html
@@ -877,13 +877,19 @@ <h3>0</h3>
             </button>
             <button v-for='cardsToDisplay in 9' class="btn btn-light align-baseline"
               v-bind:class="[{'btn-dark': cardsToDisplay == cardsToDisplayCurrent}]" v-on:click="cardsToDisplayCurrent = cardsToDisplay">
-              <h3>{{ cardsToDisplay}}</h3>
+              <h3>{{ cardsToDisplay }}</h3>
             </button>
             
-            <div class="row">
-              <div class="col-1" v-for='cardsToDisplay in cardsToDisplayCurrent'>
+            <div id="sortableModifiers" class="row mt-3 align-items-end"> 
+              <!--
+              <div class="col-1 " v-bind:class="'order-'+(cardsToDisplayCurrent - cardsToDisplay) "v-for='cardsToDisplay in cardsToDisplayCurrent'>
                 <img v-bind:src="'data/'+modifiersDrawPile[cardsToDisplay - 1].image" style="width:8em" class="image rounded" />
               </div>
+              -->
+              <div class="col-auto" v-for='(card, index) in modifiersDrawPile' :key='card.xws'>
+                <img v-if="index >= cardsToDisplayCurrent" src="data/attack-modifiers/back/top.png" style="width:8em; border: 2px solid #ffffff;" class="image rounded" />
+                <img v-else v-bind:src="'data/'+card.image" style="width:8em; border: 2px solid #ffffff;" class="image rounded" />
+              </div>
             </div>
             
         </div>
diff --git a/js/main.js b/js/main.js
index 52d52351..e92cc00d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -224,7 +224,17 @@ new Vue({
                 animation: 150,
                 onUpdate: (event) => { this.updateCardPosition(event.oldIndex, event.newIndex) }
             });
-        }
+        },
+        draggableModifiers: function() {
+            new Sortable(document.getElementById('sortableModifiers'), {
+                animation: 150,
+                onUpdate: (event) => { this.updateModifierPosition(event.oldIndex, event.newIndex);
+                        if (event.newIndex > this.cardsToDisplayCurrent && (this.cardsToDisplayCurrent > 0)) {
+                            this.cardsToDisplayCurrent --
+                        }                    
+                    }
+            });
+        },
     }, 
     beforeMount(){
         this.loadDatabase()
@@ -234,7 +244,9 @@ new Vue({
         }
     },
     mounted() { this.$nextTick(() => { this.draggableAbilities() })},
-    updated() { this.$nextTick(() => { this.draggableAbilities() })}
+    updated() { this.$nextTick(() => { this.draggableAbilities() })},
+    mounted() { this.$nextTick(() => { this.draggableModifiers() })},
+    updated() { this.$nextTick(() => { this.draggableModifiers() })},
   })
 
 function getRandomInt(max) {
diff --git a/js/modifiers.js b/js/modifiers.js
index 92a211fa..28ceacf2 100644
--- a/js/modifiers.js
+++ b/js/modifiers.js
@@ -128,6 +128,9 @@ var modifiersManagement = {
             this.blessings = this.getBlessings()
             this.curses = this.getCurses()            
         },
+        updateModifierPosition: function(oldIndex, newIndex) {
+            this.modifiersDrawPile.move(oldIndex, newIndex)
+        },
         getBlessings: function() {
             return this.modifiersDrawPile.filter(element => this.checkIfBlessing(element)).length
         },

From 097ea485446fff0855f30537c75bf582a7b67fa2 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 12:12:45 +0100
Subject: [PATCH 03/26] updated the menus

---
 index.html      | 44 ++++++++++++++++++++++++++++++--------------
 js/modifiers.js |  3 ++-
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 0232c5d7..9590f541 100644
--- a/index.html
+++ b/index.html
@@ -75,13 +75,34 @@ <h4>Gloomhaven Deckbuilder</h4>
             <li class="nav-item py-0" v-bind:class="{active: menu ==='gear'}">
               <a class="nav-link" href="#" v-on:click="set('gear')">Gear</a>
             </li>
-            <li class="nav-item dropdown" v-bind:class="{active: menu ==='about'}">
-              <a class="nav-link dropdown-toggle" id="navbarDropdown2" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Configuration</a>
+            <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>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
-                <a class="dropdown-item" data-target="#versionModal" data-toggle="modal" href="#">Game options</a>
+                <a class="dropdown-item" data-target="#versionModal" data-toggle="modal" href="#">Expansions</a>
                 <a class="dropdown-item" data-target="#characterSelectionModal" data-toggle="modal" href="#">Set character</a>
-                <a class="dropdown-item" data-target="#aboutModal" data-toggle="modal" href="#">About</a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" v-on:click="hasEnabledCardExchange = !hasEnabledCardExchange">
+                  <span v-if="!hasEnabledCardExchange">Accept card</span>
+                  <i v-else>Accept card</i>
+                </a>
+                <a class="dropdown-item" href="#" v-on:click="hasEnabledModifierDisplay = !hasEnabledModifierDisplay">
+                  <span v-if="!hasEnabledModifierDisplay">Sort modifiers</span>
+                  <i v-else>Sort modifiers</i>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item dropdown" v-bind:class="{active: menu ==='about'}">
+              <a class="nav-link dropdown-toggle" id="navbarDropdown2" data-toggle="dropdown" role="button" aria-expanded="false" href="#">About</a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdown2">                
                 <a class="dropdown-item" data-target="#helpModal" data-toggle="modal" href="#">Help</a>
+                <a class="dropdown-item" data-target="#aboutModal" data-toggle="modal" href="#">About</a>
+                <form class="dropdown-item" id="donate" class="dropdown-item" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
+                  <input type="hidden" name="cmd" value="_donations" />
+                  <input type="hidden" name="business" value="QDHSY8LBF3WRY" />
+                  <input type="hidden" name="currency_code" value="EUR" />
+                  <input type="hidden" name="lc" value="en_US">           
+                  <a href="#" alt="Donate with PayPal button" onclick="document.getElementById('donate').submit()" title="PayPal - The safer, easier way to pay online!">Donate</a>                  
+                </form>
               </div>
             </li>
           </ul>
@@ -656,7 +677,7 @@ <h3 class="card-caption above">Upgrade top </h3>
     </div> <!-- main container ends -->
     </div> <!-- main wrapper ends -->
 
-    <!-- Expansion selection modal -->
+    <!-- About modal -->
     <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
       <div class="modal-dialog" role="document">
@@ -669,7 +690,7 @@ <h1 class="modal-title" id="exampleModalLabel">About</h1>
           </div>
           <div class="modal-body">
             <p>
-              We made this website in order to play <i>Gloomhaven</i> during Covid-19 confinement, without having to
+              We made this website in order to play <i>Gloomhaven</i> during Covid-19 lockdown, without having to
               print decks of abilities and modifiers.<br />
               It's entirely free, without ads, and we hope you enjoy it.<br />
               You can check the source code here:<br />
@@ -693,7 +714,6 @@ <h1 class="modal-title" id="exampleModalLabel">About</h1>
                 <input type="hidden" name="lc" value="en_US">                
                 <input type="image" src="data/icons/btn_donate_SM.gif" name="submit"
                   title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
-
               </form>
             </span>
           </div>
@@ -701,12 +721,13 @@ <h1 class="modal-title" id="exampleModalLabel">About</h1>
       </div>
     </div>
 
+    <!-- Expansion selection modal -->
     <div class="modal fade" id="versionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
-            <h1 class="modal-title" id="exampleModalLabel">Game options</h1>
+            <h1 class="modal-title" id="exampleModalLabel">Expansion</h1>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
@@ -721,11 +742,6 @@ <h3>Version</h3>
             <button class="btn btn-secondary" v-bind:class="{active: version === 'frosthaven'}"
               v-on:click="loadDatabaseVersion('frosthaven')">Frosthaven</button>
             <hr />
-            <h3>Configuration</h3>
-            <div>
-              <span><input type="checkbox" @change="enableCardExchange()"/> Enable card exchange</span>
-            </div>
-            <hr />
             <h3>Spoiler</h3>
             <button v-if="!showSpoiler" v-on:click="showSpoiler = !showSpoiler" class="btn btn-secondary">Show</button>
             <div v-else>
@@ -757,7 +773,7 @@ <h1 class="modal-title" id="exampleModalLabel">Choose your character</h1>
             <button data-toggle="collapse" v-if="version === 'vanilla'" style="margin-top: 1em" data-target="#lockedClasses" class="btn btn-secondary" v-on:click="showLockedClasses = ! showLockedClasses" aria-expanded="false" aria-controls="lockedClasses">Show locked classes</button>
 
 
-            
+          
             <div v-if="showLockedClasses" class="row collapse" id="lockedClasses">
               <div class="col parentImage" v-for='ability in abilities' v-if='ability.hidden'>
                 <input type="image" class="smallerImage rounded" v-on:click="displayAbilities(ability)"
diff --git a/js/modifiers.js b/js/modifiers.js
index 386b5df7..00439b0c 100644
--- a/js/modifiers.js
+++ b/js/modifiers.js
@@ -17,7 +17,8 @@ var modifiersManagement = {
         modifiersDiscardPile : [],
         overlayCard: {},
         blessings: 0,
-        curses: 0        
+        curses: 0,
+        hasEnabledModifierDisplay: false
     },
     methods: {
         displayModifiers: function(param) {

From 495e8272e69e0536569506edb16e50a20283f883 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 12:17:10 +0100
Subject: [PATCH 04/26] Linked menu with game screen

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 883df1e4..d74f227b 100644
--- a/index.html
+++ b/index.html
@@ -144,7 +144,7 @@ <h3>Abilities</h3>
                     <button class="btn btn-outline-secondary" :class="{active: specialClassMode === 'left'}" v-on:click="specialClassMode = 'left'">Left</button><button class="btn btn-outline-secondary" :class="{active: specialClassMode ==='right'}" v-on:click="specialClassMode = 'right'">Right</button>
                   </div>
                   <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 class="col" ><button data-toggle="modal" data-target="#sortModifierModal" class="btn btn-block btn-outline-secondary">Sort modifiers</button></div>
+                  <div class="col" v-if="hasEnabledModifierDisplay"><button data-toggle="modal" data-target="#sortModifierModal" class="btn btn-block btn-outline-secondary">Sort modifiers</button></div>
                 </div>
 
                 <div id="abilities" class="row" style="display: table-cell">

From bb3f314db9a46504b149f182eb6dfa26983026f1 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 14:09:33 +0100
Subject: [PATCH 05/26] reduce the number of cards to display to the index of
 the droped card when the card is not visible

---
 js/main.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/js/main.js b/js/main.js
index e92cc00d..266b3b32 100644
--- a/js/main.js
+++ b/js/main.js
@@ -228,11 +228,14 @@ new Vue({
         draggableModifiers: function() {
             new Sortable(document.getElementById('sortableModifiers'), {
                 animation: 150,
-                onUpdate: (event) => { this.updateModifierPosition(event.oldIndex, event.newIndex);
-                        if (event.newIndex > this.cardsToDisplayCurrent && (this.cardsToDisplayCurrent > 0)) {
-                            this.cardsToDisplayCurrent --
-                        }                    
-                    }
+                onEnd: (event) => { 
+                    this.updateModifierPosition(event.oldIndex, event.newIndex);
+                    if (event.newIndex > this.cardsToDisplayCurrent && (this.cardsToDisplayCurrent > 0)) {
+                        this.cardsToDisplayCurrent --
+                    } else if (event.oldIndex > this.cardsToDisplayCurrent) {
+                        this.cardsToDisplayCurrent = event.newIndex
+                    }                                   
+                }
             });
         },
     }, 

From 69aef3c8cabecb42dc8115d628b77dcf56f93eaf Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 14:35:48 +0100
Subject: [PATCH 06/26] Corrected the check in the drag n drop event of
 modifiers

---
 js/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/main.js b/js/main.js
index 266b3b32..5f01c5e1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -232,7 +232,7 @@ new Vue({
                     this.updateModifierPosition(event.oldIndex, event.newIndex);
                     if (event.newIndex > this.cardsToDisplayCurrent && (this.cardsToDisplayCurrent > 0)) {
                         this.cardsToDisplayCurrent --
-                    } else if (event.oldIndex > this.cardsToDisplayCurrent) {
+                    } else if (event.oldIndex >= this.cardsToDisplayCurrent) {
                         this.cardsToDisplayCurrent = event.newIndex
                     }                                   
                 }

From 13e0fc929ed25023e3980860ceec48ba671836cc Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 15:17:20 +0100
Subject: [PATCH 07/26] Fixed check in the display of modifiers

---
 js/abilities.js |  1 -
 js/main.js      | 26 +++++++++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/js/abilities.js b/js/abilities.js
index 3c44154b..1c4da1f0 100644
--- a/js/abilities.js
+++ b/js/abilities.js
@@ -30,7 +30,6 @@ var abilitiesManagement = {
                 this.abilityCategory.cards.sort((a, b) => a.level - b.level)
             }
             this.$forceUpdate()
-
         },
         displayAbilitiesToExchange: function(param) {
             if (this.chosenCardExchanger == param) {
diff --git a/js/main.js b/js/main.js
index 5f01c5e1..48e42d23 100644
--- a/js/main.js
+++ b/js/main.js
@@ -112,11 +112,12 @@ new Vue({
             this.$forceUpdate()
 
         },
-        saveData: function() {
+        saveData: function() {                        
             Cookies.set("version", this.version, { expires: 365 })
             Cookies.set("abilities", JSON.stringify(this.abilitiesChosen), { expires: 365 })
             Cookies.set("modifiers", JSON.stringify(this.modifiersChosen), { expires: 365 })
             Cookies.set("gear", JSON.stringify(this.gearChosen), { expires: 365 })    
+            Cookies.set("class", JSON.stringify(this.abilityCategory), { expires: 365})     
             this.showGreenAlert("Data saved!")       
         },
         loadData: function() {
@@ -195,7 +196,14 @@ new Vue({
                 }
                
             }            
-
+            
+            var abilityCookie = Cookies.get("class");
+            console.log(abilityCookie)
+            if (abilityCookie != null) {
+                this.abilityCategory = JSON.parse(abilityCookie)    
+                this.classChosen = true
+                console.log(this.abilityCategory)
+            }
             this.newGame();
         },
         getAcceptedCookie: function() {    
@@ -230,11 +238,15 @@ new Vue({
                 animation: 150,
                 onEnd: (event) => { 
                     this.updateModifierPosition(event.oldIndex, event.newIndex);
-                    if (event.newIndex > this.cardsToDisplayCurrent && (this.cardsToDisplayCurrent > 0)) {
-                        this.cardsToDisplayCurrent --
-                    } else if (event.oldIndex >= this.cardsToDisplayCurrent) {
-                        this.cardsToDisplayCurrent = event.newIndex
-                    }                                   
+                    if (event.newIndex < this.cardsToDisplayCurrent) { // we move a modif in the visibility area
+                        if (event.oldIndex >= this.cardsToDisplayCurrent) // the card comes from the outside
+                            this.cardsToDisplayCurrent = event.newIndex 
+                    }
+
+                    if (event.newIndex >= this.cardsToDisplayCurrent) { // we move a modif outside of the visibility area
+                        if (event.oldIndex < this.cardsToDisplayCurrent)
+                            this.cardsToDisplayCurrent --
+                    }
                 }
             });
         },

From 30b5774fde043c28f39949b7267681169e7d72a0 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 15:19:07 +0100
Subject: [PATCH 08/26] Removed unused code

---
 js/main.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/js/main.js b/js/main.js
index 48e42d23..cb285578 100644
--- a/js/main.js
+++ b/js/main.js
@@ -117,7 +117,6 @@ new Vue({
             Cookies.set("abilities", JSON.stringify(this.abilitiesChosen), { expires: 365 })
             Cookies.set("modifiers", JSON.stringify(this.modifiersChosen), { expires: 365 })
             Cookies.set("gear", JSON.stringify(this.gearChosen), { expires: 365 })    
-            Cookies.set("class", JSON.stringify(this.abilityCategory), { expires: 365})     
             this.showGreenAlert("Data saved!")       
         },
         loadData: function() {
@@ -197,13 +196,7 @@ new Vue({
                
             }            
             
-            var abilityCookie = Cookies.get("class");
-            console.log(abilityCookie)
-            if (abilityCookie != null) {
-                this.abilityCategory = JSON.parse(abilityCookie)    
-                this.classChosen = true
-                console.log(this.abilityCategory)
-            }
+
             this.newGame();
         },
         getAcceptedCookie: function() {    

From 76d1d29aff948d14a413d66badd816b4a647bb47 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 12:12:45 +0100
Subject: [PATCH 09/26] updated the menus

---
 index.html      | 44 ++++++++++++++++++++++++++++++--------------
 js/modifiers.js |  3 ++-
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index ba6f6acf..883df1e4 100644
--- a/index.html
+++ b/index.html
@@ -75,13 +75,34 @@ <h4>Gloomhaven Deckbuilder</h4>
             <li class="nav-item py-0" v-bind:class="{active: menu ==='gear'}">
               <a class="nav-link" href="#" v-on:click="set('gear')">Gear</a>
             </li>
-            <li class="nav-item dropdown" v-bind:class="{active: menu ==='about'}">
-              <a class="nav-link dropdown-toggle" id="navbarDropdown2" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Configuration</a>
+            <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>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
-                <a class="dropdown-item" data-target="#versionModal" data-toggle="modal" href="#">Game options</a>
+                <a class="dropdown-item" data-target="#versionModal" data-toggle="modal" href="#">Expansions</a>
                 <a class="dropdown-item" data-target="#characterSelectionModal" data-toggle="modal" href="#">Set character</a>
-                <a class="dropdown-item" data-target="#aboutModal" data-toggle="modal" href="#">About</a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#" v-on:click="hasEnabledCardExchange = !hasEnabledCardExchange">
+                  <span v-if="!hasEnabledCardExchange">Accept card</span>
+                  <i v-else>Accept card</i>
+                </a>
+                <a class="dropdown-item" href="#" v-on:click="hasEnabledModifierDisplay = !hasEnabledModifierDisplay">
+                  <span v-if="!hasEnabledModifierDisplay">Sort modifiers</span>
+                  <i v-else>Sort modifiers</i>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item dropdown" v-bind:class="{active: menu ==='about'}">
+              <a class="nav-link dropdown-toggle" id="navbarDropdown2" data-toggle="dropdown" role="button" aria-expanded="false" href="#">About</a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdown2">                
                 <a class="dropdown-item" data-target="#helpModal" data-toggle="modal" href="#">Help</a>
+                <a class="dropdown-item" data-target="#aboutModal" data-toggle="modal" href="#">About</a>
+                <form class="dropdown-item" id="donate" class="dropdown-item" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
+                  <input type="hidden" name="cmd" value="_donations" />
+                  <input type="hidden" name="business" value="QDHSY8LBF3WRY" />
+                  <input type="hidden" name="currency_code" value="EUR" />
+                  <input type="hidden" name="lc" value="en_US">           
+                  <a href="#" alt="Donate with PayPal button" onclick="document.getElementById('donate').submit()" title="PayPal - The safer, easier way to pay online!">Donate</a>                  
+                </form>
               </div>
             </li>
           </ul>
@@ -657,7 +678,7 @@ <h3 class="card-caption above">Upgrade top </h3>
     </div> <!-- main container ends -->
     </div> <!-- main wrapper ends -->
 
-    <!-- Expansion selection modal -->
+    <!-- About modal -->
     <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
       <div class="modal-dialog" role="document">
@@ -670,7 +691,7 @@ <h1 class="modal-title" id="exampleModalLabel">About</h1>
           </div>
           <div class="modal-body">
             <p>
-              We made this website in order to play <i>Gloomhaven</i> during Covid-19 confinement, without having to
+              We made this website in order to play <i>Gloomhaven</i> during Covid-19 lockdown, without having to
               print decks of abilities and modifiers.<br />
               It's entirely free, without ads, and we hope you enjoy it.<br />
               You can check the source code here:<br />
@@ -694,7 +715,6 @@ <h1 class="modal-title" id="exampleModalLabel">About</h1>
                 <input type="hidden" name="lc" value="en_US">                
                 <input type="image" src="data/icons/btn_donate_SM.gif" name="submit"
                   title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
-
               </form>
             </span>
           </div>
@@ -702,12 +722,13 @@ <h1 class="modal-title" id="exampleModalLabel">About</h1>
       </div>
     </div>
 
+    <!-- Expansion selection modal -->
     <div class="modal fade" id="versionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
-            <h1 class="modal-title" id="exampleModalLabel">Game options</h1>
+            <h1 class="modal-title" id="exampleModalLabel">Expansion</h1>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
@@ -722,11 +743,6 @@ <h3>Version</h3>
             <button class="btn btn-secondary" v-bind:class="{active: version === 'frosthaven'}"
               v-on:click="loadDatabaseVersion('frosthaven')">Frosthaven</button>
             <hr />
-            <h3>Configuration</h3>
-            <div>
-              <span><input type="checkbox" @change="enableCardExchange()"/> Enable card exchange</span>
-            </div>
-            <hr />
             <h3>Spoiler</h3>
             <button v-if="!showSpoiler" v-on:click="showSpoiler = !showSpoiler" class="btn btn-secondary">Show</button>
             <div v-else>
@@ -758,7 +774,7 @@ <h1 class="modal-title" id="exampleModalLabel">Choose your character</h1>
             <button data-toggle="collapse" v-if="version === 'vanilla'" style="margin-top: 1em" data-target="#lockedClasses" class="btn btn-secondary" v-on:click="showLockedClasses = ! showLockedClasses" aria-expanded="false" aria-controls="lockedClasses">Show locked classes</button>
 
 
-            
+          
             <div v-if="showLockedClasses" class="row collapse" id="lockedClasses">
               <div class="col parentImage" v-for='ability in abilities' v-if='ability.hidden'>
                 <input type="image" class="smallerImage rounded" v-on:click="displayAbilities(ability)"
diff --git a/js/modifiers.js b/js/modifiers.js
index 28ceacf2..a22fd33b 100644
--- a/js/modifiers.js
+++ b/js/modifiers.js
@@ -18,7 +18,8 @@ var modifiersManagement = {
         overlayCard: {},
         cardsToDisplayCurrent: 0,
         blessings: 0,
-        curses: 0        
+        curses: 0,
+        hasEnabledModifierDisplay: false
     },
     methods: {
         displayModifiers: function(param) {

From 9f477a8848ebb991a1bac82f44c2b78bea03b1c1 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 12:17:10 +0100
Subject: [PATCH 10/26] Linked menu with game screen

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 883df1e4..d74f227b 100644
--- a/index.html
+++ b/index.html
@@ -144,7 +144,7 @@ <h3>Abilities</h3>
                     <button class="btn btn-outline-secondary" :class="{active: specialClassMode === 'left'}" v-on:click="specialClassMode = 'left'">Left</button><button class="btn btn-outline-secondary" :class="{active: specialClassMode ==='right'}" v-on:click="specialClassMode = 'right'">Right</button>
                   </div>
                   <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 class="col" ><button data-toggle="modal" data-target="#sortModifierModal" class="btn btn-block btn-outline-secondary">Sort modifiers</button></div>
+                  <div class="col" v-if="hasEnabledModifierDisplay"><button data-toggle="modal" data-target="#sortModifierModal" class="btn btn-block btn-outline-secondary">Sort modifiers</button></div>
                 </div>
 
                 <div id="abilities" class="row" style="display: table-cell">

From 813da3024e8c749f0030e6360869cc43a138c1b1 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 14:09:33 +0100
Subject: [PATCH 11/26] reduce the number of cards to display to the index of
 the droped card when the card is not visible

---
 js/main.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/js/main.js b/js/main.js
index e92cc00d..266b3b32 100644
--- a/js/main.js
+++ b/js/main.js
@@ -228,11 +228,14 @@ new Vue({
         draggableModifiers: function() {
             new Sortable(document.getElementById('sortableModifiers'), {
                 animation: 150,
-                onUpdate: (event) => { this.updateModifierPosition(event.oldIndex, event.newIndex);
-                        if (event.newIndex > this.cardsToDisplayCurrent && (this.cardsToDisplayCurrent > 0)) {
-                            this.cardsToDisplayCurrent --
-                        }                    
-                    }
+                onEnd: (event) => { 
+                    this.updateModifierPosition(event.oldIndex, event.newIndex);
+                    if (event.newIndex > this.cardsToDisplayCurrent && (this.cardsToDisplayCurrent > 0)) {
+                        this.cardsToDisplayCurrent --
+                    } else if (event.oldIndex > this.cardsToDisplayCurrent) {
+                        this.cardsToDisplayCurrent = event.newIndex
+                    }                                   
+                }
             });
         },
     }, 

From 435d7ee67e7104cc55921e701be8c55926085520 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 14:35:48 +0100
Subject: [PATCH 12/26] Corrected the check in the drag n drop event of
 modifiers

---
 js/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/main.js b/js/main.js
index 266b3b32..5f01c5e1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -232,7 +232,7 @@ new Vue({
                     this.updateModifierPosition(event.oldIndex, event.newIndex);
                     if (event.newIndex > this.cardsToDisplayCurrent && (this.cardsToDisplayCurrent > 0)) {
                         this.cardsToDisplayCurrent --
-                    } else if (event.oldIndex > this.cardsToDisplayCurrent) {
+                    } else if (event.oldIndex >= this.cardsToDisplayCurrent) {
                         this.cardsToDisplayCurrent = event.newIndex
                     }                                   
                 }

From 446d4e1582df88705d25390dec1e8bc5ae732627 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 15:17:20 +0100
Subject: [PATCH 13/26] Fixed check in the display of modifiers

---
 js/abilities.js |  1 -
 js/main.js      | 26 +++++++++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/js/abilities.js b/js/abilities.js
index 3c44154b..1c4da1f0 100644
--- a/js/abilities.js
+++ b/js/abilities.js
@@ -30,7 +30,6 @@ var abilitiesManagement = {
                 this.abilityCategory.cards.sort((a, b) => a.level - b.level)
             }
             this.$forceUpdate()
-
         },
         displayAbilitiesToExchange: function(param) {
             if (this.chosenCardExchanger == param) {
diff --git a/js/main.js b/js/main.js
index 5f01c5e1..48e42d23 100644
--- a/js/main.js
+++ b/js/main.js
@@ -112,11 +112,12 @@ new Vue({
             this.$forceUpdate()
 
         },
-        saveData: function() {
+        saveData: function() {                        
             Cookies.set("version", this.version, { expires: 365 })
             Cookies.set("abilities", JSON.stringify(this.abilitiesChosen), { expires: 365 })
             Cookies.set("modifiers", JSON.stringify(this.modifiersChosen), { expires: 365 })
             Cookies.set("gear", JSON.stringify(this.gearChosen), { expires: 365 })    
+            Cookies.set("class", JSON.stringify(this.abilityCategory), { expires: 365})     
             this.showGreenAlert("Data saved!")       
         },
         loadData: function() {
@@ -195,7 +196,14 @@ new Vue({
                 }
                
             }            
-
+            
+            var abilityCookie = Cookies.get("class");
+            console.log(abilityCookie)
+            if (abilityCookie != null) {
+                this.abilityCategory = JSON.parse(abilityCookie)    
+                this.classChosen = true
+                console.log(this.abilityCategory)
+            }
             this.newGame();
         },
         getAcceptedCookie: function() {    
@@ -230,11 +238,15 @@ new Vue({
                 animation: 150,
                 onEnd: (event) => { 
                     this.updateModifierPosition(event.oldIndex, event.newIndex);
-                    if (event.newIndex > this.cardsToDisplayCurrent && (this.cardsToDisplayCurrent > 0)) {
-                        this.cardsToDisplayCurrent --
-                    } else if (event.oldIndex >= this.cardsToDisplayCurrent) {
-                        this.cardsToDisplayCurrent = event.newIndex
-                    }                                   
+                    if (event.newIndex < this.cardsToDisplayCurrent) { // we move a modif in the visibility area
+                        if (event.oldIndex >= this.cardsToDisplayCurrent) // the card comes from the outside
+                            this.cardsToDisplayCurrent = event.newIndex 
+                    }
+
+                    if (event.newIndex >= this.cardsToDisplayCurrent) { // we move a modif outside of the visibility area
+                        if (event.oldIndex < this.cardsToDisplayCurrent)
+                            this.cardsToDisplayCurrent --
+                    }
                 }
             });
         },

From 97813a9ad36b58ed5d4e94b436ac9f653dc86448 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sat, 13 Feb 2021 15:19:07 +0100
Subject: [PATCH 14/26] Removed unused code

---
 js/main.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/js/main.js b/js/main.js
index 48e42d23..cb285578 100644
--- a/js/main.js
+++ b/js/main.js
@@ -117,7 +117,6 @@ new Vue({
             Cookies.set("abilities", JSON.stringify(this.abilitiesChosen), { expires: 365 })
             Cookies.set("modifiers", JSON.stringify(this.modifiersChosen), { expires: 365 })
             Cookies.set("gear", JSON.stringify(this.gearChosen), { expires: 365 })    
-            Cookies.set("class", JSON.stringify(this.abilityCategory), { expires: 365})     
             this.showGreenAlert("Data saved!")       
         },
         loadData: function() {
@@ -197,13 +196,7 @@ new Vue({
                
             }            
             
-            var abilityCookie = Cookies.get("class");
-            console.log(abilityCookie)
-            if (abilityCookie != null) {
-                this.abilityCategory = JSON.parse(abilityCookie)    
-                this.classChosen = true
-                console.log(this.abilityCategory)
-            }
+
             this.newGame();
         },
         getAcceptedCookie: function() {    

From c0e395359c44d8f8a9892cdb4f4938c48409106a Mon Sep 17 00:00:00 2001
From: Raphael Page <page.raf@gmail.com>
Date: Sun, 14 Feb 2021 10:14:42 +0100
Subject: [PATCH 15/26] Fix bug where ability cards where not draggable

---
 js/main.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/js/main.js b/js/main.js
index cb285578..c96ca902 100644
--- a/js/main.js
+++ b/js/main.js
@@ -251,10 +251,8 @@ new Vue({
             this.isMobile = true
         }
     },
-    mounted() { this.$nextTick(() => { this.draggableAbilities() })},
-    updated() { this.$nextTick(() => { this.draggableAbilities() })},
-    mounted() { this.$nextTick(() => { this.draggableModifiers() })},
-    updated() { this.$nextTick(() => { this.draggableModifiers() })},
+    mounted() { this.$nextTick(() => { this.draggableAbilities(), this.draggableModifiers() })},
+    updated() { this.$nextTick(() => { this.draggableAbilities(), this.draggableModifiers() })},
   })
 
 function getRandomInt(max) {

From b967da721980e76b3acee8947c5400ce58c24acf Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sun, 14 Feb 2021 12:01:49 +0100
Subject: [PATCH 16/26] Loading options (version, card exchange, sorting
 modifiers, class chosen) working on game view. But remaining in modifiers
 view

---
 js/main.js | 49 +++++++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/js/main.js b/js/main.js
index c96ca902..235bc73d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -30,13 +30,8 @@ new Vue({
             this.abilitiesChosen = [];
         },
         loadDatabase: function() {
-            versionCookie = Cookies.get('version')      
-            console.log(versionCookie)      
-            if (versionCookie != null) {
-                this.loadDatabaseVersion(versionCookie)
-            } else {
-                this.loadDatabaseVersion('vanilla')
-            }
+            versionCookie = JSON.parse(Cookies.get('version'))
+            this.loadDatabaseVersion(versionCookie)
 
             this.modifiersSpecial = attack_modifiers_special
             this.modifiersBase = attack_modifiers_base
@@ -48,25 +43,27 @@ new Vue({
             this.modifiersDrawPile = this.modifiersChosen.slice() 
             this.allGear = allItems
             this.battleGoals = battle_goals
-            this.loadDatabaseVersion(this.version)
         },
         loadDatabaseVersion: function(param){
             this.version = param
             
             switch(param){
                 case 'vanilla':
+                    console.log("loaded vanilla")
                     this.loadDatabaseVanilla()
                     break
                 case 'jotl':
+                    console.log("loaded jotl")
                     this.loadDatabaseJotl()
                     break
                 case 'frosthaven':
+                    console.log("loaded frosthaven")
                     this.loadDatabaseFrosthaven()
                     break
                 default:
-                    console.log("default")
+                    console.log("loaded vanilla by default")
+                    this.version = 'vanilla'
                     this.loadDatabaseVanilla()
-                    break
             }
         },
         loadDatabaseVanilla: function() {
@@ -113,15 +110,34 @@ new Vue({
 
         },
         saveData: function() {                        
-            Cookies.set("version", this.version, { expires: 365 })
+            console.log(this.abilityCategory.name)
+            // character
+            Cookies.set("class", JSON.stringify(this.abilityCategory.name), { expires: 365})                                    
             Cookies.set("abilities", JSON.stringify(this.abilitiesChosen), { expires: 365 })
             Cookies.set("modifiers", JSON.stringify(this.modifiersChosen), { expires: 365 })
             Cookies.set("gear", JSON.stringify(this.gearChosen), { expires: 365 })    
+            
+            // game options
+            Cookies.set("hasEnabledModifierDisplay", JSON.stringify(this.hasEnabledModifierDisplay), { expires: 365 })
+            Cookies.set("hasEnabledCardExchange", JSON.stringify(this.hasEnabledCardExchange), { expires: 365})
+            Cookies.set("version", JSON.stringify(this.version), { expires: 365 })            
+
             this.showGreenAlert("Data saved!")       
         },
         loadData: function() {
-            abilityCookie = Cookies.get('abilities')
+                                
+            classCookie = Cookies.get('class')
+            if (classCookie != null) {
+                theClass = JSON.parse(classCookie)   
+                this.abilities.forEach( ability => {
+                    if (ability.name == theClass) {
+                        this.abilityCategory = ability
+                        this.classChosen = true
+                    }
+                })                             
+            }
 
+            abilityCookie = Cookies.get('abilities')
             if (abilityCookie != null) {
                 oldAbilities = JSON.parse(abilityCookie)
                 oldAbilities.forEach(ability => {
@@ -196,7 +212,16 @@ new Vue({
                
             }            
             
+            cardExchange = Cookies.get("hasEnabledCardExchange")
+            if (cardExchange != null)
+                this.hasEnabledCardExchange = JSON.parse(cardExchange)
+
+            modifierDisplay = Cookies.get("hasEnabledModifierDisplay")
+            if (modifierDisplay != null)
+                this.hasEnabledModifierDisplay = JSON.parse(modifierDisplay)
 
+
+            this.$forceUpdate()
             this.newGame();
         },
         getAcceptedCookie: function() {    

From 7c188678826405f1d35f27bccceadf79624fe323 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sun, 14 Feb 2021 12:06:55 +0100
Subject: [PATCH 17/26] Character properly loaded from cookies in the modifier
 view

---
 js/main.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/main.js b/js/main.js
index 235bc73d..94c77dc7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -133,6 +133,7 @@ new Vue({
                     if (ability.name == theClass) {
                         this.abilityCategory = ability
                         this.classChosen = true
+                        this.displayModifiers(ability.name)                        
                     }
                 })                             
             }

From 93f0451651e1de7d9af61269d90d09da22d6c404 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Sun, 14 Feb 2021 12:34:48 +0100
Subject: [PATCH 18/26] Saved the unlock class in cookies

---
 index.html |  2 +-
 js/main.js | 31 +++++++++++++++++++++----------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index d74f227b..512aa6f6 100644
--- a/index.html
+++ b/index.html
@@ -746,7 +746,7 @@ <h3>Version</h3>
             <h3>Spoiler</h3>
             <button v-if="!showSpoiler" v-on:click="showSpoiler = !showSpoiler" class="btn btn-secondary">Show</button>
             <div v-else>
-              <span v-if="version=='vanilla'"><input type="checkbox" @change="loadXEnvelope()" /> Enable envelope X</span>
+              <span v-if="version=='vanilla'"><input type="checkbox" class="form-check-label" v-model="hasOpenedXEnvelope" @change="loadXEnvelope()" /> Enable envelope X</span>
             </div>
           </div>
         </div>
diff --git a/js/main.js b/js/main.js
index 94c77dc7..f1dbacbf 100644
--- a/js/main.js
+++ b/js/main.js
@@ -30,8 +30,12 @@ new Vue({
             this.abilitiesChosen = [];
         },
         loadDatabase: function() {
-            versionCookie = JSON.parse(Cookies.get('version'))
-            this.loadDatabaseVersion(versionCookie)
+            versionCookie = Cookies.get('version')
+
+            if (versionCookie != null)
+                this.loadDatabaseVersion(JSON.parse(versionCookie))
+            else 
+                this.loadDatabaseVersion("vanilla")
 
             this.modifiersSpecial = attack_modifiers_special
             this.modifiersBase = attack_modifiers_base
@@ -81,13 +85,9 @@ new Vue({
             this.modifiers = attack_modifiers_categories_jotl        
             this.abilities = abilities_jotl
         },
-        loadXEnvelope: function() {
-            if (! this.hasOpenedXEnvelope) {            
-                console.log("Enabled")                    
-                this.hasOpenedXEnvelope = true
-                this.modifiers.push(XEnvelopeModifiers)
-                this.abilities.push(XEnvelopeAbilities)
-            }
+        loadXEnvelope: function() {   
+            this.modifiers.push(XEnvelopeModifiers)
+            this.abilities.push(XEnvelopeAbilities)
         },
         enableCardExchange: function() {
             this.hasEnabledCardExchange = !this.hasEnabledCardExchange 
@@ -120,18 +120,28 @@ new Vue({
             // game options
             Cookies.set("hasEnabledModifierDisplay", JSON.stringify(this.hasEnabledModifierDisplay), { expires: 365 })
             Cookies.set("hasEnabledCardExchange", JSON.stringify(this.hasEnabledCardExchange), { expires: 365})
+            Cookies.set("hasOpenedXEnvelope", JSON.stringify(this.hasOpenedXEnvelope), { expires: 365})
+
             Cookies.set("version", JSON.stringify(this.version), { expires: 365 })            
 
             this.showGreenAlert("Data saved!")       
         },
         loadData: function() {
-                                
+            openedX = Cookies.get("hasOpenedXEnvelope")
+            if (openedX != null) {
+                this.hasOpenedXEnvelope = JSON.parse(openedX)
+                if (this.hasOpenedXEnvelope) {
+                    this.loadXEnvelope()
+                }
+            }                
+
             classCookie = Cookies.get('class')
             if (classCookie != null) {
                 theClass = JSON.parse(classCookie)   
                 this.abilities.forEach( ability => {
                     if (ability.name == theClass) {
                         this.abilityCategory = ability
+                        this.abilityCategory.hidden = false
                         this.classChosen = true
                         this.displayModifiers(ability.name)                        
                     }
@@ -220,6 +230,7 @@ new Vue({
             modifierDisplay = Cookies.get("hasEnabledModifierDisplay")
             if (modifierDisplay != null)
                 this.hasEnabledModifierDisplay = JSON.parse(modifierDisplay)
+            
 
 
             this.$forceUpdate()

From 1046667059e8ed2028ef9317f95e1ea06e72f2cb Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Mon, 15 Feb 2021 10:01:23 +0100
Subject: [PATCH 19/26] Fixed a bug in the cookie saving method that made
 saving impossible when no class is chosen

---
 js/main.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/main.js b/js/main.js
index f1dbacbf..b6bc7486 100644
--- a/js/main.js
+++ b/js/main.js
@@ -110,9 +110,10 @@ new Vue({
 
         },
         saveData: function() {                        
-            console.log(this.abilityCategory.name)
             // character
-            Cookies.set("class", JSON.stringify(this.abilityCategory.name), { expires: 365})                                    
+            if (this.abilityCategory != null)
+                Cookies.set("class", JSON.stringify(this.abilityCategory.name), { expires: 365})                                    
+
             Cookies.set("abilities", JSON.stringify(this.abilitiesChosen), { expires: 365 })
             Cookies.set("modifiers", JSON.stringify(this.modifiersChosen), { expires: 365 })
             Cookies.set("gear", JSON.stringify(this.gearChosen), { expires: 365 })    

From e6774844cff37c831ea0deba20d876268e75af10 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Mon, 15 Feb 2021 12:45:42 +0100
Subject: [PATCH 20/26] Fixed envelope X cookie

---
 index.html | 12 ++++++++----
 js/main.js | 12 ++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 512aa6f6..9a1a1fb7 100644
--- a/index.html
+++ b/index.html
@@ -743,10 +743,14 @@ <h3>Version</h3>
             <button class="btn btn-secondary" v-bind:class="{active: version === 'frosthaven'}"
               v-on:click="loadDatabaseVersion('frosthaven')">Frosthaven</button>
             <hr />
-            <h3>Spoiler</h3>
-            <button v-if="!showSpoiler" v-on:click="showSpoiler = !showSpoiler" class="btn btn-secondary">Show</button>
-            <div v-else>
-              <span v-if="version=='vanilla'"><input type="checkbox" class="form-check-label" v-model="hasOpenedXEnvelope" @change="loadXEnvelope()" /> Enable envelope X</span>
+            <button class="btn btn-secondary" data-toggle="collapse" data-target="#spoilers" aria-expanded="false" aria-controls="spoilers">Show spoilers</button>
+
+            <div class="collapse" id="spoilers">
+              <p></p>
+              <button v-if="version=='vanilla'" class="btn btn-dark" v-bind:class="{ disabled: hasOpenedXEnvelope }" type="button" v-on:click="loadXEnvelope()">
+                <span v-if="!hasOpenedXEnvelope">Open envelope X</span>
+                <span v-else>Envelope X opened</span>
+              </button>
             </div>
           </div>
         </div>
diff --git a/js/main.js b/js/main.js
index b6bc7486..4f855796 100644
--- a/js/main.js
+++ b/js/main.js
@@ -86,8 +86,12 @@ new Vue({
             this.abilities = abilities_jotl
         },
         loadXEnvelope: function() {   
-            this.modifiers.push(XEnvelopeModifiers)
-            this.abilities.push(XEnvelopeAbilities)
+            if (! this.hasOpenedXEnvelope) {
+                console.log("loading x envelope")
+                this.modifiers.push(XEnvelopeModifiers)
+                this.abilities.push(XEnvelopeAbilities)
+                this.hasOpenedXEnvelope = true
+            }            
         },
         enableCardExchange: function() {
             this.hasEnabledCardExchange = !this.hasEnabledCardExchange 
@@ -130,8 +134,8 @@ new Vue({
         loadData: function() {
             openedX = Cookies.get("hasOpenedXEnvelope")
             if (openedX != null) {
-                this.hasOpenedXEnvelope = JSON.parse(openedX)
-                if (this.hasOpenedXEnvelope) {
+                XEnvelope = JSON.parse(openedX)
+                if (XEnvelope) {
                     this.loadXEnvelope()
                 }
             }                

From 07940eae1433578db4c6b3566cb480edffda9cc9 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Mon, 15 Feb 2021 12:57:22 +0100
Subject: [PATCH 21/26] Now keeping the classes unlock in cookies

---
 index.html      |  9 ++++++---
 js/abilities.js |  7 +++++++
 js/main.js      | 11 ++++++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 9a1a1fb7..bb14335c 100644
--- a/index.html
+++ b/index.html
@@ -757,6 +757,7 @@ <h3>Version</h3>
       </div>
     </div>
 
+    <!-- Character selection modal -->
     <div class="modal fade" id="characterSelectionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
       <div class="modal-dialog modal-xl" role="document">
@@ -776,14 +777,12 @@ <h1 class="modal-title" id="exampleModalLabel">Choose your character</h1>
             </div>
 
             <button data-toggle="collapse" v-if="version === 'vanilla'" style="margin-top: 1em" data-target="#lockedClasses" class="btn btn-secondary" v-on:click="showLockedClasses = ! showLockedClasses" aria-expanded="false" aria-controls="lockedClasses">Show locked classes</button>
-
-
           
             <div v-if="showLockedClasses" class="row collapse" id="lockedClasses">
               <div class="col parentImage" v-for='ability in abilities' v-if='ability.hidden'>
                 <input type="image" class="smallerImage rounded" v-on:click="displayAbilities(ability)"
                   v-bind:src="'data/'+ability.cards[0].image" />
-                <input type="image" v-if="ability.hidden" class="layer rounded" v-on:click="ability.hidden = false"
+                <input type="image" v-if="ability.hidden" class="layer rounded" v-on:click="stopHidingAbility(ability)"
                   src="data/layers/locked_layer.png">
               </div>
             </div>
@@ -792,6 +791,7 @@ <h1 class="modal-title" id="exampleModalLabel">Choose your character</h1>
       </div>
     </div>
 
+    <!-- Help modal -->
     <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
       <div class="modal-dialog" role="document">
@@ -827,6 +827,7 @@ <h3>Symbols</h3>
       </div>
     </div>
 
+    <!-- Perks display modal -->
     <div class="modal fade" id="perksModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
       <div class="modal-dialog" role="document">
@@ -850,6 +851,7 @@ <h3 class="modal-title" id="exampleModalLabel">{{ classNames[className] }} Perks
       </div>
     </div>
 
+    <!-- Card exchange modal -->
     <div class="modal fade" id="cardExchangeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
       <div class="modal-dialog modal-xl" role="document">
@@ -882,6 +884,7 @@ <h3 class="modal-title" id="exampleModalLabel">Accept a card from...</h3>
       </div>
     </div>
 
+    <!-- Sort modifiers modal -->
     <div class="modal fade" id="sortModifierModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
     <div class="modal-dialog modal-xl" role="document">
diff --git a/js/abilities.js b/js/abilities.js
index 1c4da1f0..61481a79 100644
--- a/js/abilities.js
+++ b/js/abilities.js
@@ -12,6 +12,7 @@ var abilitiesManagement = {
         abilitiesChosen: [],        
         twoAbilitiesSelected: [],
         abilitiesOnBoard: [],
+        classDisplayed: [],
         longRestMode: false,
         shortRestMode: false,
         cardToLose: null,
@@ -59,6 +60,12 @@ var abilitiesManagement = {
             indexOfCardToRemove = this.abilitiesChosen.indexOf(card)
             this.abilitiesChosen.splice(indexOfCardToRemove, 1)
         },
+        stopHidingAbility: function(abilityCategory)  {
+            abilityCategory.hidden = false
+            if (!this.classDisplayed.includes(abilityCategory.name)) {
+                this.classDisplayed.push(abilityCategory.name)                
+            }
+        },
         shortRest: function() {            
             this.cardsPlayed = this.abilitiesChosen.filter( card => (card.played && !card.destroyed && (card.duration == 0 || card.duration == null)))
 
diff --git a/js/main.js b/js/main.js
index 4f855796..6f4f2f0e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -122,6 +122,7 @@ new Vue({
             Cookies.set("modifiers", JSON.stringify(this.modifiersChosen), { expires: 365 })
             Cookies.set("gear", JSON.stringify(this.gearChosen), { expires: 365 })    
             
+            Cookies.set("classDisplayed", JSON.stringify(this.classDisplayed), { expires: 365 })
             // game options
             Cookies.set("hasEnabledModifierDisplay", JSON.stringify(this.hasEnabledModifierDisplay), { expires: 365 })
             Cookies.set("hasEnabledCardExchange", JSON.stringify(this.hasEnabledCardExchange), { expires: 365})
@@ -236,7 +237,15 @@ new Vue({
             if (modifierDisplay != null)
                 this.hasEnabledModifierDisplay = JSON.parse(modifierDisplay)
             
-
+            classNotHidden = Cookies.get("classDisplayed")
+            if (classNotHidden != null) {
+                this.classDisplayed = JSON.parse(classNotHidden)
+                this.abilities.forEach(ab => {
+                    if (this.classDisplayed.includes(ab.name)) {
+                        ab.hidden = false
+                    }
+                })
+            }
 
             this.$forceUpdate()
             this.newGame();

From 0ec916967e9ece90e098f94f759adab07f56a040 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Mon, 15 Feb 2021 13:03:00 +0100
Subject: [PATCH 22/26] Now closing immediately the character selection modal
 when picking or unlocking a character

---
 index.html      | 6 ++----
 js/abilities.js | 2 ++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index bb14335c..bb8681b8 100644
--- a/index.html
+++ b/index.html
@@ -780,10 +780,8 @@ <h1 class="modal-title" id="exampleModalLabel">Choose your character</h1>
           
             <div v-if="showLockedClasses" class="row collapse" id="lockedClasses">
               <div class="col parentImage" v-for='ability in abilities' v-if='ability.hidden'>
-                <input type="image" class="smallerImage rounded" v-on:click="displayAbilities(ability)"
-                  v-bind:src="'data/'+ability.cards[0].image" />
-                <input type="image" v-if="ability.hidden" class="layer rounded" v-on:click="stopHidingAbility(ability)"
-                  src="data/layers/locked_layer.png">
+                <input type="image" class="smallerImage rounded" v-on:click="displayAbilities(ability)" v-bind:src="'data/'+ability.cards[0].image" />
+                <input type="image" v-if="ability.hidden" class="layer rounded" v-on:click="stopHidingAbility(ability)" src="data/layers/locked_layer.png">
               </div>
             </div>
           </div>
diff --git a/js/abilities.js b/js/abilities.js
index 61481a79..4acc4523 100644
--- a/js/abilities.js
+++ b/js/abilities.js
@@ -30,6 +30,7 @@ var abilitiesManagement = {
                 this.abilityCategory = param
                 this.abilityCategory.cards.sort((a, b) => a.level - b.level)
             }
+            $('#characterSelectionModal').modal('hide')
             this.$forceUpdate()
         },
         displayAbilitiesToExchange: function(param) {
@@ -65,6 +66,7 @@ var abilitiesManagement = {
             if (!this.classDisplayed.includes(abilityCategory.name)) {
                 this.classDisplayed.push(abilityCategory.name)                
             }
+            this.displayAbilities(abilityCategory)
         },
         shortRest: function() {            
             this.cardsPlayed = this.abilitiesChosen.filter( card => (card.played && !card.destroyed && (card.duration == 0 || card.duration == null)))

From 2959f6f65a47d935fe95ac44c1e04c67959d06b3 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Mon, 15 Feb 2021 13:11:27 +0100
Subject: [PATCH 23/26] now reseting the battle goals on new game

---
 js/battlegoals.js | 5 +++++
 js/main.js        | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/js/battlegoals.js b/js/battlegoals.js
index 8525d602..136a07c0 100644
--- a/js/battlegoals.js
+++ b/js/battlegoals.js
@@ -28,6 +28,11 @@ var battleGoalsManagement = {
         },
         incrementGoalCounter: function(){
             this.goalCounter+=1;
+        },
+        resetBattlegoals: function() {            
+            this.battleGoalsDrawn = []
+            this.battleGoalPicked = []
+            this.goalCounter = 0
         }
     }
 }
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 6f4f2f0e..5ce4787a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -106,7 +106,8 @@ new Vue({
             this.gearChosen.forEach(item => {
                 this.restoreItem(item);
             })
-
+            
+            this.resetBattlegoals()
             this.resetModifiers()
             
             this.turn = 1            

From 9ff52a729cd9de1bdb5f5afc985e2405cd96eb76 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Mon, 15 Feb 2021 13:16:45 +0100
Subject: [PATCH 24/26] Added an option to display / hide curses

---
 index.html | 6 +++++-
 js/main.js | 9 ++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index bb8681b8..604bfb8f 100644
--- a/index.html
+++ b/index.html
@@ -89,6 +89,10 @@ <h4>Gloomhaven Deckbuilder</h4>
                   <span v-if="!hasEnabledModifierDisplay">Sort modifiers</span>
                   <i v-else>Sort modifiers</i>
                 </a>
+                <a class="dropdown-item" href="#" v-on:click="hasEnabledCurses = !hasEnabledCurses">
+                  <span v-if="!hasEnabledCurses">Quick curse</span>
+                  <i v-else>Quick curse</i>
+                </a>
               </div>
             </li>
             <li class="nav-item dropdown" v-bind:class="{active: menu ==='about'}">
@@ -247,7 +251,7 @@ <h4>{{ ability.numberOfTimesUsed }}</h4>
             <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 v-if="hasEnabledCurses" 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" />
diff --git a/js/main.js b/js/main.js
index 5ce4787a..07342f91 100644
--- a/js/main.js
+++ b/js/main.js
@@ -8,6 +8,7 @@ new Vue({
         isMobile: false,        
         hasOpenedXEnvelope: false,
         hasEnabledCardExchange: false,
+        hasEnabledCurses: true,
         showSpoiler: false,
         showLockedClasses: false,
         version: 'vanilla',
@@ -124,11 +125,12 @@ new Vue({
             Cookies.set("gear", JSON.stringify(this.gearChosen), { expires: 365 })    
             
             Cookies.set("classDisplayed", JSON.stringify(this.classDisplayed), { expires: 365 })
+
             // game options
             Cookies.set("hasEnabledModifierDisplay", JSON.stringify(this.hasEnabledModifierDisplay), { expires: 365 })
             Cookies.set("hasEnabledCardExchange", JSON.stringify(this.hasEnabledCardExchange), { expires: 365})
             Cookies.set("hasOpenedXEnvelope", JSON.stringify(this.hasOpenedXEnvelope), { expires: 365})
-
+            Cookies.set("hasEnabledCurses", JSON.stringify(this.hasEnabledCurses), { expires: 365})            
             Cookies.set("version", JSON.stringify(this.version), { expires: 365 })            
 
             this.showGreenAlert("Data saved!")       
@@ -238,6 +240,11 @@ new Vue({
             if (modifierDisplay != null)
                 this.hasEnabledModifierDisplay = JSON.parse(modifierDisplay)
             
+            curseEnabled = Cookies.get("hasEnabledCurses")
+            if (curseEnabled != null) {
+                this.hasEnabledCurses = JSON.parse(curseEnabled)
+            }
+
             classNotHidden = Cookies.get("classDisplayed")
             if (classNotHidden != null) {
                 this.classDisplayed = JSON.parse(classNotHidden)

From 0db70762b2903f80d5c07dc0218e675a6de895b6 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Tue, 16 Feb 2021 13:02:24 +0100
Subject: [PATCH 25/26] Checking that the div exists before creating the
 Sortable

---
 js/main.js | 54 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/js/main.js b/js/main.js
index 07342f91..4bc667e9 100644
--- a/js/main.js
+++ b/js/main.js
@@ -22,7 +22,7 @@ new Vue({
         specialClassValue : 0,
     },
     methods: {
-        set: function (param) {
+        setMenu: function (param) {
             this.menu = param
         },
         switchClass: function() {
@@ -280,28 +280,40 @@ new Vue({
             $('#greenAlert').hide()
         },
         draggableAbilities: function() {
-            new Sortable(document.getElementById('abilities'), {
-                animation: 150,
-                onUpdate: (event) => { this.updateCardPosition(event.oldIndex, event.newIndex) }
-            });
+            if (document.getElementById('abilities')) {
+                new Sortable(document.getElementById('abilities'), {
+                    animation: 150,
+                    onUpdate: (event) => { this.updateCardPosition(event.oldIndex, event.newIndex) }
+                });
+            }            
         },
         draggableModifiers: function() {
-            new Sortable(document.getElementById('sortableModifiers'), {
-                animation: 150,
-                onEnd: (event) => { 
-                    this.updateModifierPosition(event.oldIndex, event.newIndex);
-                    if (event.newIndex < this.cardsToDisplayCurrent) { // we move a modif in the visibility area
-                        if (event.oldIndex >= this.cardsToDisplayCurrent) // the card comes from the outside
-                            this.cardsToDisplayCurrent = event.newIndex 
-                    }
-
-                    if (event.newIndex >= this.cardsToDisplayCurrent) { // we move a modif outside of the visibility area
-                        if (event.oldIndex < this.cardsToDisplayCurrent)
-                            this.cardsToDisplayCurrent --
+            if (document.getElementById('sortableModifiers') != null)  {
+                new Sortable(document.getElementById('sortableModifiers'), {
+                    animation: 150,
+                    onEnd: (event) => { 
+                        this.updateModifierPosition(event.oldIndex, event.newIndex);
+                        if (event.newIndex < this.cardsToDisplayCurrent) { // we move a modif in the visibility area
+                            if (event.oldIndex >= this.cardsToDisplayCurrent) // the card comes from the outside
+                                this.cardsToDisplayCurrent = event.newIndex 
+                        }
+    
+                        if (event.newIndex >= this.cardsToDisplayCurrent) { // we move a modif outside of the visibility area
+                            if (event.oldIndex < this.cardsToDisplayCurrent)
+                                this.cardsToDisplayCurrent --
+                        }
                     }
-                }
-            });
+                });
+            }            
         },
+        draggableGear: function() {
+            if (document.getElementById('gear') != null ) {
+                new Sortable(document.getElementById('gear'), {
+                    animation: 150,
+                    onUpdate: (event) => { this.updateGearPosition(event.oldIndex, event.newIndex) }
+                });
+            }
+        }
     }, 
     beforeMount(){
         this.loadDatabase()
@@ -310,8 +322,8 @@ new Vue({
             this.isMobile = true
         }
     },
-    mounted() { this.$nextTick(() => { this.draggableAbilities(), this.draggableModifiers() })},
-    updated() { this.$nextTick(() => { this.draggableAbilities(), this.draggableModifiers() })},
+    mounted() { this.$nextTick(() => { this.draggableAbilities(), this.draggableModifiers(), this.draggableGear() })},
+    updated() { this.$nextTick(() => { this.draggableAbilities(), this.draggableModifiers(), this.draggableGear() })},
   })
 
 function getRandomInt(max) {

From a71e9a193bb98ed5c6093bc0a43a1915912dc6c4 Mon Sep 17 00:00:00 2001
From: Orichalque <thiblf@gmail.com>
Date: Tue, 16 Feb 2021 13:02:30 +0100
Subject: [PATCH 26/26] Now able to sort gear

---
 index.html | 20 ++++++++++----------
 js/gear.js |  3 +++
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 604bfb8f..301350f7 100644
--- 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
index ed8db99d..e5b56fcd 100644
--- 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)
         }
     }
 }