From 0286ac133888645166ce220e6bec767a52d991b8 Mon Sep 17 00:00:00 2001 From: Eric Fredricksen Date: Mon, 11 Dec 2023 22:37:11 -0800 Subject: [PATCH] Button to load character saves plus a little warning about data loss --- roster.html | 52 +++++++++++-- roster.js | 221 ++++++++++++++++++++++++++++------------------------ 2 files changed, 163 insertions(+), 110 deletions(-) diff --git a/roster.html b/roster.html index c2c5cb8..d894646 100644 --- a/roster.html +++ b/roster.html @@ -13,10 +13,16 @@ .brag { display: inline-block; +} +.brag, #buttonline td { background-color: #ddddff; margin: 5px; border: solid 2px #ccccee; } +.bragtable { + display: inline-block; + border-spacing: 20px; +} .lit { border: solid 2px #66ccee; } @@ -49,6 +55,7 @@ p { #newc { text-align: center; } + .brag a, .brag a:visited { color: blue; text-decoration: none; @@ -77,11 +84,30 @@ a.save { img { border-style: none; } -#dropinfo { +.dropinfo { text-align: center; font-style: italic; - font-size: smaller; +/* font-size: smaller;*/ + border: solid 1px #888; + width: 600px; + margin: auto; margin-bottom: 20px; + background-color: #f8f0ee; + border-radius: 0.3rem; +} +.dropinfo div { + margin: 20px; +} +label { + background-color: #f0f0f0; + color: #222; + padding: 2px 6px 2px 6px; + border: solid 1px #888; + font-family: -apple-system, Tahoma, Helvetica, sans-serif; + border-radius: 0.3rem; + cursor: pointer; + font-style: normal; + font-size: 13.33333px; } @@ -94,20 +120,30 @@ img {

Character Roster

-

-

+

- - +
+
New Character
- four dice
+ progress on dice pips
-

You can also drop a saved game file on this page to add it to your roster.

+ +
+
+ +Your character data exists only in this browser and will disappear if the browser data is cleared. +You can save a backup by clicking a character's 💾 icon. +To load a saved game in this browser, drop a game save file onto this page, or use this button: +
+ + +
+
Home · diff --git a/roster.js b/roster.js index ea6ae16..698da48 100644 --- a/roster.js +++ b/roster.js @@ -1,143 +1,160 @@ function b64_decode(value) { - return JSON.parse(decodeURIComponent(escape(atob(value)))); + return JSON.parse(decodeURIComponent(escape(atob(value)))); } function b64_stringify(value) { - return btoa(unescape(encodeURIComponent(JSON.stringify(value)))); + return btoa(unescape(encodeURIComponent(JSON.stringify(value)))); +} + + + + +function dropGuy(sheet) { + try { + sheet = sheet.replace(/\s/g, ""); + sheet = b64_decode(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 load() { - if (!window.localStorage) { - roster.html("Hrumph: This browser does not support local storage. You can still play fast and loose: your character will live only as long as the game stays running in your browser."); - return; - } + if (!window.localStorage) { + roster.html("Hrumph: This browser does not support local storage. You can still play fast and loose: your character will live only as long as the game stays running in your browser."); + return; + } - storage.loadRoster(loadGames); + 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 = b64_decode(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)); - } - - }); - } - - }); + 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(dropGuy); + } + }); + document.getElementById('pickup').addEventListener('change', e => { + for (const file of e.target.files) { + console.log(file); + var reader = new FileReader(); + reader.readAsText(file, "UTF-8"); + reader.onload = function (evt) { + dropGuy(evt.target.result); + } + reader.onerror = function (evt) { + console.log("error reading file"); + } + } + e.target.value = ''; + }); } function loadGames(games) { - var roster = $("#roster"); - roster.empty(); + var roster = $("#roster"); + roster.empty(); - var newone = window.location.href.split('#')[1]; + var newone = window.location.href.split('#')[1]; - var count = 0; + var count = 0; - $.each(games, function (key, c) { - var name = c.Traits.Name; + $.each(games, function (key, c) { + var name = c.Traits.Name; - var br = brag(c); - roster.append(br); - br.find("a.go").attr("href", "main.html#" + escape(name)); + var br = brag(c); + roster.append(br); + br.find("a.go").attr("href", "main.html#" + escape(name)); - br.find("a.x").click(function () { - if (confirm("Terminate " + Pick(["faithful","noble","loyal","brave"])+ - " " + name + "?")) { - delete games[name]; - storage.storeRoster(games); - load(); - } - }); + br.find("a.x").click(function () { + if (confirm("Terminate " + Pick(["faithful","noble","loyal","brave"])+ + " " + name + "?")) { + delete games[name]; + storage.storeRoster(games); + load(); + } + }); - br.find("a.sheet").click(function () { - alert(template($("#sheet").html(), games[name])); - // TODO: put in a window or whatev - }); + br.find("a.sheet").click(function () { + alert(template($("#sheet").html(), games[name])); + // TODO: put in a window or whatev + }); - br.find("a.save").attr("href", - `data:text/plain;name=${name}.pqw,${b64_stringify(c)}`); - br.find("a.save").attr("download", `${name}.pqw`); + br.find("a.save").attr("href", + `data:text/plain;name=${name}.pqw,${b64_stringify(c)}`); + br.find("a.save").attr("download", `${name}.pqw`); - if (name === newone) - br.addClass("lit"); + if (name === newone) + br.addClass("lit"); - br.click(e => { - if (e.altKey) { - let text = b64_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,${b64_stringify(c)}`); + br.click(e => { + if (e.altKey) { + let text = b64_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,${b64_stringify(c)}`); - ++count; - }); - if (!count) - roster.html("Games you start can be loaded from this page, but no saved games were found. Roll up a new character to get started."); + ++count; + }); + if (!count) + roster.html("Games you start can be loaded from this page, but no saved games were found. Roll up a new character to get started."); } function brag(sheet) { - var brag = $(template($("#badge").html(), sheet)); - if (sheet.motto) { - brag.find(".bs").text('"' + sheet.motto + '"'); - } - if (sheet.online) { - brag.addClass("online"); - brag.find(".bs").text("Realm of " + sheet.online.realm); - brag.find(".icon.go").html("✿"); - } - return brag; + var brag = $(template($("#badge").html(), sheet)); + if (sheet.motto) { + brag.find(".bs").text('"' + sheet.motto + '"'); + } + if (sheet.online) { + brag.addClass("online"); + brag.find(".bs").text("Realm of " + sheet.online.realm); + brag.find(".icon.go").html("✿"); + } + return brag; } function clearRoster() { - storage.storeRoster({}, load); + storage.storeRoster({}, load); } $(document).ready(function () { - load(); + load(); - $("#roll").click(function () { - window.location = "newguy.html"; - }); + $("#roll").click(function () { + window.location = "newguy.html"; + }); - $("#test").click(function () { - window.location = "newguy.html?sold"; - }); + $("#test").click(function () { + window.location = "newguy.html?sold"; + }); - $("#clear").click(clearRoster); + $("#clear").click(clearRoster); });