Preliminary custom role saving

static/setup.js

@@ -45,7 +45,8 @@ Array.from(document.getElementsByClassName("close")).forEach(function(element) {
 });
 
 // render all of the available cards to the user
-window.onload = function() { 
+window.onload = function() {
+    readInUserCustomRoles();
     renderAvailableCards();
 };
 
@@ -111,11 +112,22 @@ function renderAvailableCards() {
         cardTop.quantityEl = cardQuantity;
         cardBottom.card = newCard;
         cardBottom.quantityEl = cardQuantity;
+
+        if (cards[i].custom) {
+            addRemoveButtonToCustomCard(i);
+        }
     }
     renderCustomCard();
     resetCardQuantities();
 }
 
+function addRemoveButtonToCustomCard(i) {
+    let button = document.createElement("button");
+    button.setAttribute("class", "removal-btn");
+    button.innerText = "Remove";
+    document.getElementById("card-" + i).appendChild(button);
+}
+
 function renderCustomCard() {
     let customCard = document.createElement("div");
     customCard.classList.add("card", "custom-card");
@@ -149,9 +161,44 @@ function addCustomCardToRoles(e) {
     document.getElementById("card-select").innerHTML = "";
     document.getElementById("roles").innerHTML = "";
     renderAvailableCards();
+
+    if (document.getElementById("custom-role-remember").checked) {
+        let existingRoles = localStorage.getItem("play-werewolf-custom-roles");
+        if (existingRoles !== null) {
+            let rolesArray;
+            try {
+                rolesArray = JSON.parse(existingRoles);
+            } catch(e) {
+                console.error(e.message);
+            }
+            if (rolesArray) {
+                rolesArray.push(newCard);
+            }
+            localStorage.setItem("play-werewolf-custom-roles", JSON.stringify(rolesArray));
+        } else {
+            localStorage.setItem("play-werewolf-custom-roles", JSON.stringify(new Array(newCard)));
+        }
+    }
     closeModal();
 }
 
+function readInUserCustomRoles() {
+    let existingRoles = localStorage.getItem("play-werewolf-custom-roles");
+    if (existingRoles !== null) {
+        let rolesArray;
+        try {
+            rolesArray = JSON.parse(existingRoles);
+        } catch(e) {
+            console.error(e.message);
+        }
+        if (rolesArray) {
+            rolesArray.forEach((role) => {
+                cards.push(role);
+            })
+        }
+    }
+}
+
 
 function incrementCardQuantity(e) {
     if(e.target.card.quantity < 25) {

static/styles.css

@@ -993,9 +993,13 @@ label {
     align-items: center;
     width: 100%;
     height: 100%;
+    transform: rotateX(0deg);
     -webkit-perspective: 0;
     -webkit-backface-visibility: hidden;
     -webkit-transform: translate3d(0,0,0);
+    -moz-backface-visibility: hidden;
+    -moz-transform: translate3d(0, 0, 0);
+    -moz-perspective: 0;
     visibility:visible;
     backface-visibility: hidden;
 }

views/create_game.html

@@ -40,6 +40,10 @@
                         <input type="checkbox" id="custom-role-wolf">
                         <label for="custom-role-wolf">Is this role a type of Werewolf?</label>
                     </div>
+                    <div class="checkbox">
+                        <input type="checkbox" id="custom-role-remember">
+                        <label for="custom-role-remember">Remember this role for later</label>
+                    </div>
                     <br><br>
                     <input type="submit" class="app-btn" value="Add Role">
                 </form>