Added SVG download button (buggy with cards). Fixed SVG errors with c…

…ards and dotmatrix.
AbstractPlay · Jul 21, 2022 · 46a0a58 · 46a0a58
1 parent cd08490
commit 46a0a58
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * Added a `2dpyramids` koan type (rectangular grid of pyramids).
 * Added 45-degree rotations to the pyramids (`NE`, `SE`, `SW`, `NW`).
 * Added 1d and 2d playing card koans.
+* Added download button for SVG koans (buggy with playing cards).
 
 ### Changed
 

diff --git a/src/lib/Game/ViewKoan.svelte b/src/lib/Game/ViewKoan.svelte
@@ -60,6 +60,15 @@
         svgResults = process1dCards(koanStr);
     } else if ($game.koanType === "2dcards") {
         svgResults = process2dCards(koanStr);
+    } else if ($game.koanType === "graphviz") {
+        svgResults = "Rendering...";
+        graphviz.dot(koanStr, "svg")
+        .then((svg) => {
+            svgResults = svg;
+        })
+        .catch((err) => {
+            svgResults = err;
+        });
     }
 
     let modalDelete = "";
@@ -120,13 +129,7 @@
             </figure>
         {:else if $game.koanType === "graphviz"}
             <figure class="koan graphkoan">
-            {#await graphviz.dot(koanStr, "svg")}
-                Rendering...
-            {:then svg}
-                {@html svg}
-            {:catch err}
-                Error: {err}
-            {/await}
+                {@html svgResults}
             </figure>
         {:else}
             <figure class="koan textkoan content">
@@ -157,6 +160,15 @@
                 </span>
             </button>
         {/if}
+        {#if ( ($game.koanType === "1dpyramids") || ($game.koanType === "2dpyramids") || ($game.koanType === "1dcards") || ($game.koanType === "2dcards") || ($game.koanType === "dotmatrix") || ($game.koanType === "graphviz"))}
+            <button class="button is-normal is-responsive">
+                <a style="color: black" href="data:image/svg+xml;utf8,{encodeURIComponent(svgResults)}" download="Koan_{koanNum + 1}_{(new Date()).toISOString()}.svg">
+                    <span class="icon" aria-label="Download koan" title="Download koan">
+                        <i class="fa-solid fa-download" aria-hidden="true"></i>
+                    </span>
+                </a>
+            </button>
+        {/if}
         </div>
     {/if}
     </article>