Added 1d and 2d playing card koans. Refactored ViewKoan to isolate le…

…ngthy SVG code.
AbstractPlay · Jul 21, 2022 · cd08490 · cd08490
1 parent b65403c
commit cd08490
Show file tree

Hide file tree

Showing 10 changed files with 527 additions and 328 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,11 @@ 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.
+
+### Changed
+
+* Refactored `ViewKoan.svelte` to break out helper functions with lengthy SVG code.
 
 ## [1.1.0] - 2022-07-17
 

diff --git a/src/lib/Game/ActionBar/AddKoan.svelte b/src/lib/Game/ActionBar/AddKoan.svelte
@@ -16,6 +16,10 @@
         placeholder = "Enter a series of pyramid designations separated by whitespace";
     } else if ($game.koanType === "2dpyramids") {
         placeholder = "Enter a series of pyramid designations, separated by whitespace; use a hyphen for an empty cell";
+    } else if ($game.koanType === "1dcards") {
+        placeholder = "Enter a series of card designations separated by whitespace";
+    } else if ($game.koanType === "2dcards") {
+        placeholder = "Enter a series of card designations separated by whitespace; use a hyphen for an empty cell";
     } else if ($game.koanType === "dotmatrix") {
         placeholder = "Enter width, height, and then a string of digits";
     } else if ($game.koanType === "graphviz") {
@@ -75,6 +79,10 @@
         typeDesc = "1D Pyramid";
     } else if ($game.koanType === "2dpyramids") {
         typeDesc = "2D Pyramid";
+    } else if ($game.koanType === "1dcards") {
+        typeDesc = "1D Playing Card";
+    } else if ($game.koanType === "2dcards") {
+        typeDesc = "2D Playing Card";
     } else if ($game.koanType === "dotmatrix") {
         typeDesc = "Dot Matrix";
     } else if ($game.koanType === "graphviz") {
@@ -120,7 +128,7 @@
                 </div>
             {/if}
                 <label class="label" for="koanStr">Koan String</label>
-            {#if ( ($game.koanType === "graphviz") || ($game.koanType === "2dpyramids") )}
+            {#if ( ($game.koanType === "graphviz") || ($game.koanType === "2dpyramids") || ($game.koanType === "2dcards") )}
                 <div class="control">
                     <textarea class="input" type="text" rows="5" placeholder="{placeholder}" id="koanStr" bind:value="{koanStr}"></textarea>
                 </div>
@@ -141,6 +149,8 @@
                 <p class="help">
                     COLOUR + SIZE + DIRECTION (case insensitive); for example "RD1", "BN2E", "VT3SW"
                 </p>
+            {:else if ( ($game.koanType === "1dcards") || ($game.koanType === "2dcards") )}
+                <p class="help">Value: [A2-9TJQK], Suit: [CDHS], Special cards: RJ (red joker), BJ (black joker), BKR (red back), BKB (blue back)</p>
             {:else if $game.koanType === "dotmatrix"}
                 <p class="help">
                     WIDTH,HEIGHT,CELLS (e.g., 2,2,1001)

diff --git a/src/lib/Game/ActionBar/Master.svelte b/src/lib/Game/ActionBar/Master.svelte
@@ -40,7 +40,7 @@
 
     let koanType = "text";
     const chooseType = () => {
-        if ( (koanType === "text") || (koanType === "image") || (koanType === "math") || (koanType === "1dpyramids") || (koanType === "dotmatrix") || (koanType === "graphviz") || (koanType === "2dpyramids") ) {
+        if ( (koanType === "text") || (koanType === "image") || (koanType === "math") || (koanType === "1dpyramids") || (koanType === "dotmatrix") || (koanType === "graphviz") || (koanType === "2dpyramids") || (koanType === "1dcards") || (koanType === "2dcards") ) {
             $game.koanType = koanType;
             $game = $game;
             pushGame();
@@ -110,34 +110,43 @@
         <ReviewGuess/>
     {/if}
 {:else}
+    <p class="subtitle">Choose dojo type (cannot be changed):</p>
     <div class="control">
         <label class="radio">
             <input type="radio" bind:group={koanType} name="koanType" value={"text"}>
-            Text koans (words, numbers, etc.)
+            Text (words, numbers, etc.)
         </label><br>
         <label class="radio">
             <input type=radio bind:group={koanType} name="koanType" value={"image"}>
-            Image koans
+            Images (square)
         </label><br>
         <label class="radio">
             <input type=radio bind:group={koanType} name="koanType" value={"1dpyramids"}>
-            1D pyramid koans
+            1D pyramids
         </label><br>
         <label class="radio">
             <input type=radio bind:group={koanType} name="koanType" value={"2dpyramids"}>
-            2D pyramid koans
+            2D pyramids
+        </label><br>
+        <label class="radio">
+            <input type=radio bind:group={koanType} name="koanType" value={"1dcards"}>
+            1D playing cards
+        </label><br>
+        <label class="radio">
+            <input type=radio bind:group={koanType} name="koanType" value={"2dcards"}>
+            2D playing cards
         </label><br>
         <label class="radio">
             <input type=radio bind:group={koanType} name="koanType" value={"dotmatrix"}>
-            Dot matrix koans
+            Dot matrix (coloured dots on rectangular grids)
         </label><br>
         <label class="radio">
             <input type=radio bind:group={koanType} name="koanType" value={"graphviz"}>
-            GraphViz koans (rendered by <a href="https://graphviz.org/docs/layouts/dot/">dot</a>)
+            GraphViz (rendered by <a href="https://graphviz.org/docs/layouts/dot/">dot</a>)
         </label><br>
         <label class="radio">
             <input type=radio bind:group={koanType} name="koanType" value={"math"}>
-            Math koans (powered by <a href="https://katex.org/">KaTeX</a>)
+            Math (powered by <a href="https://katex.org/">KaTeX</a>)
         </label>
     </div>
     <p class="control">