Added query param for import code. Updated dependencies. 1.1.0 release

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).
 
+## [1.1.0] - 2022-07-17
+
+### Added
+
+* The import code can now be passed by appending `?import=CODE` to the URL.
+
 ## [1.0.0] - 2022-07-15
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@abstractplay/zendo",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A peer-to-peer, synchronous client for playing Zendo online",
   "author": "Aaron Dalton <[email protected]> (https://www.perlkonig.com)",
   "license": "MIT",
@@ -22,15 +22,15 @@
     "schemas": "npx json2ts -i src/schemas/messages.json -o src/schemas/messages.d.ts && npx json2ts -i src/schemas/game.json -o src/schemas/game.d.ts"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
-    "@tsconfig/svelte": "^2.0.1",
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@tsconfig/svelte": "^3.0.0",
     "json-schema-to-typescript": "^11.0.1",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.2.7",
-    "svelte-preprocess": "^4.9.8",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.4",
-    "vite": "^2.9.9"
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.8.0",
+    "svelte-preprocess": "^4.10.7",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.0"
   },
   "dependencies": {
     "buffer": "^6.0.3",

src/lib/Game/ActionBar/GameOver.svelte

@@ -50,7 +50,11 @@
     </div>
     <hr>
     <div class="content">
-        <p>The following code is a record of the game that can be reloaded into the client at a later time for review. Copy and paste it, or <a href="{exportDataStr}" download="ZendoGame_{(new Date()).toISOString()}.json">click here to download it</a>.</p>
-        <p><code>{JSON.stringify(exportedGame)}</code></p>
+        <p>The following code is a record of the game that can be reloaded into the client at a later time for review.</p>
+        <ul>
+            <li>You can <a href="{exportDataStr}" download="ZendoGame_{(new Date()).toISOString()}.json">click here to download it</a> as a file.</li>
+            <li>You can copy and paste it:<br><code>{JSON.stringify(exportedGame)}</code></li>
+            <li>You can save/share this URL for quick access:<br><a href="https://www.perlkonig.com/zendo/?import={encodeURIComponent(JSON.stringify(exportedGame))}"><code>https://www.perlkonig.com/zendo/?import={encodeURIComponent(JSON.stringify(exportedGame))}</code></a></li>
+        </ul>
     </div>
 </div>

src/lib/Game/ActionBar/Global.svelte

@@ -143,9 +143,14 @@
             <p class="modal-card-title">Export Game</p>
         </header>
         <section class="modal-card-body">
-            <p class="content">The following code contains all the current koans and guesses of this game. It does not include student names or guessing stone counts. But it's still a useful tool for studying a game or pausing it until later.</p>
-            <p class="content">You can copy and paste the code, or <a href="{exportDataStr}" download="ZendoGame_{(new Date()).toISOString()}.json">click here to download it</a>.</p>
-            <p class="content"><code>{JSON.stringify(exportedGame)}</code></p>
+            <div class="content">
+                <p>The following code is a record of the game's current state that can be reloaded into the client at a later time for review.</p>
+                <ul>
+                    <li>You can <a href="{exportDataStr}" download="ZendoGame_{(new Date()).toISOString()}.json">click here to download it</a> as a file.</li>
+                    <li>You can copy and paste it:<br><code>{JSON.stringify(exportedGame)}</code></li>
+                    <li>You can save/share this URL for quick access:<br><a href="https://www.perlkonig.com/zendo/?import={encodeURIComponent(JSON.stringify(exportedGame))}"><code>https://www.perlkonig.com/zendo/?import={encodeURIComponent(JSON.stringify(exportedGame))}</code></a></li>
+                </ul>
+            </div>
         </section>
         <footer class="modal-card-foot">
             <button class="button is-success" on:click="{() => modalExport = ""}">Close</button>

src/lib/Game/ActionBar/NewGame.svelte

@@ -3,7 +3,19 @@
     import { peer } from "@/stores/writePeerObj";
     import { peers } from "@/stores/writePeers";
     import type { ZendoGameMessages } from "@/schemas/messages";
-import type { ZendoGameState } from "@/schemas/game";
+    import type { ZendoGameState } from "@/schemas/game";
+    import { onMount } from "svelte";
+
+    onMount(() => {
+        $peer.on("open", () => {
+            const urlParams = new URLSearchParams(window.location.search);
+            const hasCode = urlParams.has("import");
+            if (hasCode) {
+                importedCode = urlParams.get("import");
+                importGame();
+            }
+        });
+    });
 
     const pushGame = () => {
         const msg: ZendoGameMessages = {

src/lib/PeerList.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { myName } from "../stores/writeMyName";
-    import { PeerRecord, peers } from "../stores/writePeers";
-    import type { ZendoGameMessages } from "../schemas/messages";
+    import { myName } from "@/stores/writeMyName";
+    import { peers } from "@/stores/writePeers";
+    import type { PeerRecord } from "@/stores/writePeers";
+    import type { ZendoGameMessages } from "@/schemas/messages";
 
     const saveDisplayName = () => {
         // Broadcast your display name