Added ability to hide / unhide deck (#68)

* Added deck list to hide/unhide decks on click * Clean up for pull request
johreh · Mar 15, 2018 · bad863e · bad863e
1 parent e9a8641
commit bad863e
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -35,6 +35,7 @@
                     <input id="applyscenario" type="button" value="Apply" />
                     <br>
                     <input id="applyload" type="button" value="Load Previous Scenario" />
+                    <br>
                 </div>
                 <div id="deckspage" class="tabbody">
                     <input id="showmodifierdeck-deckspage" type="checkbox" checked /><label for="showmodifierdeck-deckspage">Show Monster Modifier Deck</label>
@@ -44,7 +45,14 @@
             <div id="cancelarea">
             </div>
         </div>
-        <input alt="Configure" id="settingsbtn" type="image" src="images/settings.svg" />
+        <div>
+            <input alt="Configure" id="settingsbtn" type="image" src="images/settings.svg" />
+            <div id="currentdecks">
+                <ul id="currentdeckslist" class="currentdeckslist">
+
+                </ul>
+            </div>
+        </div>
         <div id="tableau" style="font-size: 26.6px;"> <!-- base font size for all cards. Placed here to make it adjustable from javascript -->
         </div>
     </body>

diff --git a/logic.js b/logic.js
@@ -742,7 +742,7 @@ function get_boss_stats(name, level) {
 
 function apply_deck_selection(decks, preserve_existing_deck_state) {
     var container = document.getElementById("tableau");
-
+    document.getElementById("currentdeckslist").innerHTML = "";
     var decks_to_remove = visible_ability_decks.filter(function (visible_deck) {
         return !preserve_existing_deck_state || (decks.filter(function (deck) {
                 return ((deck.name == visible_deck.name) && (deck.level == visible_deck.level))
@@ -785,7 +785,13 @@ function apply_deck_selection(decks, preserve_existing_deck_state) {
     });
 
     decks_to_add.forEach(function (deck) {
+        var deckid = deck.get_real_name().replace(/\s+/g, '');
         var deck_space = document.createElement("div");
+        deck_space.id = deckid;
+        deck_space.addEventListener('contextmenu', function(e) {            
+            this.className = "hiddendeck";
+            e.preventDefault();
+        }, false);
         deck_space.className = "card-container";
 
         container.appendChild(deck_space);
@@ -823,6 +829,20 @@ function apply_deck_selection(decks, preserve_existing_deck_state) {
             force_repaint_deck(deck);
         }
         visible_ability_decks.push(deck);
+
+        var currentdeckslist = document.getElementById("currentdeckslist");        
+        var list_item = document.createElement("li");
+        list_item.className = "currentdeck";
+        currentdeckslist.appendChild(list_item);
+        var label = document.createElement("a");
+        label.id = "switch-" + deckid;
+        label.href = "#switch-" + deckid
+        label.innerText = deck.get_real_name();
+        label.addEventListener("click", function(e){
+            var d = document.getElementById(this.id.replace("switch-",""));
+            d.className = (d.className == "hiddendeck") ? "card-container" : "hiddendeck";
+        }, false)
+        list_item.appendChild(label);
     });
 
     // Rescale card text if necessary

diff --git a/style.css b/style.css
@@ -117,6 +117,37 @@ ul.tabcontainer .inactive
     left:               calc(-100% - 2em);
 }
 
+.hiddendeck
+{
+    display: none;
+}
+
+ul.currentdeckslist {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+li.currentdeck {
+    float: left;
+}
+
+li.currentdeck a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+li.currentdeck a:hover {
+    background-color: #AAAAAA;
+}
+
+#settingsbtn {
+    float: left;
+}
+
 #cancelarea
 {
     position:           absolute;