Add support for more than 9 cards, with multi-page

src/App.svelte

@@ -29,11 +29,16 @@
     }
   }
 
-  //let card_selected = 0;
+  function chunk(arr) {
-  //$: selected_card = cards[card_selected];
+    let larr = [...arr], out = [];
+    while(larr.length) {
+      out = [...out, (larr.splice(0,MAX_CARDS))];
+    };
+    return out;
+  }
+  $: pages = chunk(cards);
 
   let selector = cards[0].id;
-  //$: selector = cards[card_selected].id;
   $: selected_card = cards.filter(x => x.id === selector)[0];
   $: selected_idx = get_idx_by_id(selector);
 
@@ -45,11 +50,9 @@
   }
   
   function add_card() {
-    if (cards.length < MAX_CARDS) {
     cards = [...cards, {id: cards[cards.length-1].id+1, ...mhp}];
     selector = cards[cards.length-1].id;
   }
-  }
 
   function remove_card() {
     console.log(cards);
@@ -70,20 +73,22 @@
     <h1>PF2e card generator</h1>
     <CardInput bind:name={selected_card.name} bind:type={selected_card.type} tags={selected_card.tags} bind:attributes={selected_card.attributes} bind:description={selected_card.description} on:change_tags={change_tags} on:add_card={add_card} on:remove_card={remove_card}/>
   </section>
+  {#each pages as page}
   <section class="cards">
-    {#each cards as card, idx (card.id)}
+    {#each page as card, idx (card.id)}
-      <div class="card">
+      <div class="card" style="break-after:avoid;">
 	<Card {...card}/>
 	<input class="card-selector" type="radio" bind:group={selector} value={card.id}/>
       </div>
     {/each}
   </section>
+  {/each}
 </main>
 
 <style>
   @media print {
     @page {
-      margin: 0;
+      margin: 7mm;
     }
     .controls {
       display: none;
@@ -95,6 +100,7 @@
   .cards {
     display: flex;
     flex-wrap: wrap;
+    break-after: always;
   }
   h1 {
     text-transform: uppercase;

src/Card.svelte

@@ -28,6 +28,7 @@
     display: flex;
     justify-content: space-between;
     border-bottom: 2px solid black;
+    padding: 0 4pt;
   }
   .name, .type {
     font-family: serif;
@@ -35,8 +36,7 @@
     font-weight: bold;
   }
   .tags {
-    margin: 1pt 1pt 0pt 1pt;
+    padding: 1pt 4pt;
-    padding: 0;
     display: flex;
     flex-wrap: wrap;
   }
@@ -59,7 +59,10 @@
     background-color: #54166e;
   }
   .content {
-    margin: 1pt;
+    margin-top: 1pt;
+  }
+  .content div {
+    padding: 0 4pt;
   }
   :global(section.content p) {
     padding-bottom: 2pt;
@@ -94,12 +97,12 @@
     {/each}
   </section>
   <section class="content">
-    <p class="attributes">
+    <div class="attributes">
       {@html pf_filter(DOMPurify.sanitize(attributes))}
-    </p>
+    </div>
-    <p class="description">
+    <div class="description">
       {@html pf_filter(DOMPurify.sanitize(description))}
-    </p>
+    </div>
   </section>
 </div>