Allow backing up and dropping-in of characters

roster.html

@@ -59,6 +59,9 @@ a.icon.go {
 a.x, a.sheet {
   font-size: 12pt;
 }
+a.save {
+  font-size: 8px;
+}
 .sig {
   text-align: center;
   font-size: small;
@@ -132,14 +135,14 @@ img {
         <div class="bs">$bestequip / $bestspell / $beststat</div>
       </td>
       <td>
-        <a class="icon x" href="#">&#x2620;</a><br>
+        <a class="icon x" href="#" title="Delete game">&#x2620;</a><br>
         <!-- <a class="sheet" href="#">&#x270F;</a> -->
+        <a class="save" href="#" title="Download a backup file">&#x1f4be;</a>
       </td>
     </tr>
   </table>
 </script>
 
-
 <script type="text/charsheet" id="sheet">
 $Traits.Name the $Traits.Race [$hostname]
 "$motto"

roster.js

@@ -7,6 +7,37 @@ function load() {
   }
 
   storage.loadRoster(loadGames);
+
+  window.addEventListener("dragover", e => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  });
+  window.addEventListener("drop", e => {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    let files = e.dataTransfer.files;
+    for (let i = 0; i < files.length; i++) {
+      files[i].text().then(sheet => {
+        try {
+          sheet = sheet.replace(/\s/g, "");
+          sheet = atob(sheet);
+          sheet = JSON.parse(sheet);
+          storage.loadRoster(games => {
+            if (!games[sheet.Traits.Name] ||
+                confirm(`A character named ${sheet.Traits.Name} already exists. Overwrite it?`)) {
+              storage.addToRoster(sheet, () => storage.loadRoster(loadGames));
+            }
+          });
+        } catch(err) {
+          console.log(err);
+          setTimeout(() => alert("Invalid character data", 1));
+        }
+
+      });
+    }
+
+  });
+
 }
 
 function loadGames(games) {
@@ -38,14 +69,31 @@ function loadGames(games) {
       // TODO: put in a window or whatev
     });
 
+    br.find("a.save").attr("href",
+      `data:text/plain;name=${name}.pqw,${btoa(JSON.stringify(c))}`);
+    br.find("a.save").attr("download", `${name}.pqw`);
+
     if (name === newone)
       br.addClass("lit");
 
-    /*
+    br.click(e => {
-      var p = $("<p style='font:6pt verdana'/>");
+      if (e.altKey) {
-      p.appendTo(roster);
+        let text = btoa(JSON.stringify(c));
-      p.text(JSON.stringify(c));
+        text = text.match(/.{1,80}/g).join('\n');
-      */
+        $("dialog#copy pre").text(text);
+        $("dialog#copy span").text(name);
+         sel = window.getSelection();
+         window.setTimeout(() => {
+          let range = document.createRange();
+          range.selectNodeContents($("dialog#copy pre")[0]);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }, 1);
+        $("dialog#copy")[0].showModal();
+        // window.prompt("Copy to clipboard", text);
+      }
+    });
+    br.find("a.go").attr("data-downloadurl", `text/plain:${name}.pqw:data:text/plain,${btoa(JSON.stringify(c))}`);
 
     ++count;
   });
@@ -79,10 +127,6 @@ $(document).ready(function () {
     window.location = "newguy.html";
   });
 
-  $("#roll").click(function () {
-    window.location = "newguy.html?online";
-  });
-
   $("#test").click(function () {
     window.location = "newguy.html?sold";
   });