Added GraphViz dojo and pushed v0.4.0.

.gitignore

@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+public/*.wasm
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.0] - 2022-07-14
+
+### Added
+
+* Added GraphViz dojo (rendered by `dot`)
+
 ## [0.3.0] - 2022-07-14
 
 ### Added

README.md

@@ -14,13 +14,14 @@ Once connected, players have access to a basic text chat window and the rest of
 
 ## Dojo Types
 
-There are five dojo types currently supported:
+The following dojo types are supported:
 
 * plain text (koans are displayed as entered)
 * images (drag and drop square image files)
 * math (powered by [KaTeX](https://katex.org/), using TeX/LaTeX notation)
 * 1d pyramids (one-dimensional koans with [Looney pyramids](https://www.looneylabs.com/pyramids-home))
 * dot matrix (coloured dots on rectangular grids)
+* [GraphViz](https://graphviz.org/) (rendered by [dot](https://graphviz.org/docs/layouts/dot/))
 
 ## Caveats
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@abstractplay/zendo",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A peer-to-peer, synchronous client for playing Zendo online",
   "author": "Aaron Dalton <[email protected]> (https://www.perlkonig.com)",
   "license": "MIT",
@@ -34,6 +34,7 @@
   "dependencies": {
     "buffer": "^6.0.3",
     "katex": "^0.16.0",
+    "node-graphviz": "github:JosephusPaye/node-graphviz",
     "peerjs": "^1.4.6",
     "svelte-markdown": "^0.2.2"
   }

src/lib/Game/ActionBar/AddKoan.svelte

@@ -16,6 +16,8 @@
         placeholder = "Enter a series of pyramid designations separated by whitespace";
     } else if ($game.koanType === "dotmatrix") {
         placeholder = "Enter width, height, and then a string of digits";
+    } else if ($game.koanType === "graphviz") {
+        placeholder = "Type or paste your DOT code"
     }
 
     let files: FileList;
@@ -71,6 +73,8 @@
         typeDesc = "1D Pyramid";
     } else if ($game.koanType === "dotmatrix") {
         typeDesc = "Dot Matrix";
+    } else if ($game.koanType === "graphviz") {
+        typeDesc = "GraphViz";
     }
 
     const colours = new Map<string, string>([
@@ -112,9 +116,15 @@
                 </div>
             {/if}
                 <label class="label" for="koanStr">Koan String</label>
+            {#if $game.koanType === "graphviz"}
+                <div class="control">
+                    <textarea class="input" type="text" rows="3" placeholder="{placeholder}" id="koanStr" bind:value="{koanStr}"></textarea>
+                </div>
+            {:else}
                 <div class="control">
                     <input class="input" type="text" placeholder="{placeholder}" id="koanStr" bind:value="{koanStr}">
                 </div>
+            {/if}
             {#if $game.koanType === "math"}
                 <p class="help">
                     No delimiters are needed. Just enter the formula using <a href="https://katex.org/docs/supported.html">supported TeX or LaTeX notation</a>.
@@ -134,6 +144,10 @@
                 <p class="help">
                     The digit <code>0</code> is an empty cell, <code>1</code> is black, and the digits <code>2–9</code> give a sequence of different colours.
                 </p>
+            {:else if $game.koanType === "graphviz"}
+                <p class="help">
+                    <a href="https://graphviz.org/doc/info/lang.html">DOT language reference</a>
+                </p>
             {/if}
             </div>
         {#if $game.koanType === "1dpyramids"}

src/lib/Game/ActionBar/Master.svelte

@@ -57,7 +57,7 @@
 
     let koanType = "text";
     const chooseType = () => {
-        if ( (koanType === "text") || (koanType === "image") || (koanType === "math") || (koanType === "1dpyramids") || (koanType === "dotmatrix") ) {
+        if ( (koanType === "text") || (koanType === "image") || (koanType === "math") || (koanType === "1dpyramids") || (koanType === "dotmatrix") || (koanType === "graphviz") ) {
             $game.koanType = koanType;
             $game = $game;
             pushGame();
@@ -151,6 +151,10 @@
             <input type=radio bind:group={koanType} name="koanType" value={"dotmatrix"}>
             Dot matrix koans
         </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>)
+        </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>)

src/lib/Game/ViewKoan.svelte

@@ -4,6 +4,7 @@
     import { peer } from "@/stores/writePeerObj";
     import { peers } from "@/stores/writePeers";
     import type { ZendoGameMessages } from "@/schemas/messages";
+    import { graphviz } from "node-graphviz";
 
     // You can provide either a number or a string, but not both.
     // Passing a number assumes the koan already exists in the game object.
@@ -254,6 +255,16 @@
             <figure class="koan dotmatrixkoan">
                 {@html svgResults}
             </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}
+            </figure>
         {:else}
             <figure class="koan text-koan content">
                 <p>{koanStr}</p>

src/lib/Game/Welcome.svelte

@@ -48,6 +48,8 @@
             <p>This is a 1D pyramid dojo.</p>
         {:else if $game.koanType === "dotmatrix"}
             <p>This is a dot matrix dojo.</p>
+        {:else if $game.koanType === "graphviz"}
+            <p>This is a <a href="https://graphviz.org/">GraphViz</a> dojo (rendered by <a href="https://graphviz.org/docs/layouts/dot/">dot</a>).</p>
         {:else}
             <p>This is a text dojo.</p>
         {/if}

src/schemas/game.d.ts

@@ -29,7 +29,7 @@ export interface ZendoGameState {
   /**
    * The type of koans accepted. All koans are fundamentally strings, but this will determine how those strings are interpreted and displayed.
    */
-  koanType?: "text" | "image" | "math" | "1dpyramids" | "dotmatrix";
+  koanType?: "text" | "image" | "math" | "1dpyramids" | "dotmatrix" | "graphviz";
   /**
    * Optional notes that will be pinned to the top of the game screen. Use to establish any ground rules.
    */

src/schemas/game.json

@@ -34,7 +34,7 @@
         },
         "koanType": {
             "description": "The type of koans accepted. All koans are fundamentally strings, but this will determine how those strings are interpreted and displayed.",
-            "enum": ["text", "image", "math", "1dpyramids", "dotmatrix"]
+            "enum": ["text", "image", "math", "1dpyramids", "dotmatrix", "graphviz"]
         },
         "welcome": {
             "description": "Optional notes that will be pinned to the top of the game screen. Use to establish any ground rules.",