card size options

gmalmquist · Apr 26, 2024 · 9ca5e3e · 9ca5e3e
1 parent 0a06bcb
commit 9ca5e3e
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 7 deletions.
diff --git a/pf2cards/cards.css b/pf2cards/cards.css
@@ -3,8 +3,22 @@
   --head-fg: #cbc18f;
   --page-width: 8.5in;
   --page-height: 11in;
+
+  /* index-card sized */
   --card-width: 3in;
   --card-height: 5in;
+
+  /* three to a page */
+  --card-width: calc((8.5in - 2cm - 3pt*6)/3);
+  --card-height: calc((11in - 2cm - 3pt*4)/2);
+
+  /*
+   * arbitrary size I first printed them at
+   * that I kinda like.
+   */
+  --card-width: 68mm;
+  --card-height: 114mm;
+
   --page-margin: 1cm;
   --body-text: 7.5pt;
   --head-text: 9pt;

diff --git a/pf2cards/index.html b/pf2cards/index.html
@@ -13,6 +13,32 @@ <h1>Gwen's PF2 Remastered Spell Cards</h1>
   <p>Enter list of Pathfinder Second Edition Remastered spell names in the below text box, separated by newlines.
 
   <form>
+  <div class="card-size">
+    <label>Card Size:</label>
+    <select name="card-size">
+      <option
+        value="large"
+        data-width="3in"
+        data-height="5in"
+        data-body-text="7.5pt"
+        data-head-text="9pt"
+      >Large / Index Card (3" x 5")</option>
+      <option
+        value="medium"
+        data-width="68mm"
+        data-height="114mm"
+        data-body-text="7.25pt"
+        data-head-text="8pt"
+      >Medium (68mm x 114mm)</option>
+      <option
+        value="small"
+        data-width="2.5in"
+        data-height="3.5in"
+        data-body-text="7pt"
+        data-head-text="7.5pt"
+      >Small / MtG (2.5" x 3.5")</option>
+    </select>
+  </div>
   <textarea class="spellnames"></textarea>
 
   <div class="controls">

diff --git a/pf2cards/main.js b/pf2cards/main.js
@@ -1,21 +1,33 @@
 setTimeout(() => {
   // read cookie
   const cookies = decodeURIComponent(document.cookie);
-  const textbox = Array.from(new Set(Array.from(document.getElementsByClassName('spellnames'))))[0];
+  const textbox = Array.from(document.getElementsByClassName('spellnames'))[0];
+  const cardSize = Array.from(document.getElementsByName("card-size"))[0];
+  const map = new Map();
   for (const cookie of cookies.split(";")) {
-    const parts = cookie.split("=");
-    if (parts.length > 0 && parts[0].trim() == "names") {
-      textbox.value = JSON.parse(parts[1].trim()).join("\n");
-      break;
+    const eq = cookie.indexOf('=');
+    if (eq > 0) {
+      map.set(
+        cookie.substring(0, eq).trim(),
+        cookie.substring(eq+1).trim(),
+      );
     }
   }
+  console.log('map:', map);
+  if (map.has("names")) {
+    textbox.value = JSON.parse(map.get("names")).join("\n");
+  }
+  if (map.has("card-size")) {
+    cardSize.value = JSON.parse(map.get("card-size")).value;
+  }
 }, 500);
 
 function generateCards() {
   const postUrl = window.location.hostname === 'gwenscode.com'
     ? 'https://gwen.run/pf2cards/'
     : '/'
   ;
+  const cardSize = Array.from(document.getElementsByName("card-size"))[0];
   const names = Array.from(new Set(Array.from(document.getElementsByClassName('spellnames'))
     .map(e => e.value)[0]
     .trim()
@@ -24,6 +36,19 @@ function generateCards() {
     .filter(e => e.length > 0)));
   names.sort();
   document.cookie = "names=" + JSON.stringify(names) + ";";
+
+  const cardSizeOption = Array.from(cardSize.children)
+    .filter(c => c.value === cardSize.value)[0];
+  const cardSizeValue = {
+    value: cardSizeOption.value,
+    width: cardSizeOption.getAttribute("data-width"),
+    height: cardSizeOption.getAttribute("data-height"),
+    'body-text': cardSizeOption.getAttribute('data-body-text'),
+    'head-text': cardSizeOption.getAttribute('data-head-text'),
+  };
+
+  document.cookie = "card-size=" + JSON.stringify(cardSizeValue) + ";";
+
   document.write('Loading, this may take several seconds ...');
   fetch(postUrl, {
     method: 'POST',
@@ -33,8 +58,14 @@ function generateCards() {
     },
     body: JSON.stringify(names),
   }).then(x => x.text()).then(x => {
-    document.open()
-    document.write(x)
+    document.open();
+    document.write(x);
+    const r = document.querySelector(':root');
+    r.style.setProperty('--card-width', cardSizeValue.width);
+    r.style.setProperty('--card-height', cardSizeValue.height);
+    r.style.setProperty('--body-text', cardSizeValue['body-text']);
+    r.style.setProperty('--head-text', cardSizeValue['head-text']);
+    console.log('card size', cardSizeValue);
   });
 }