agregar mundos a otros dispositivos

fixes #1

src/lib/routes.ts

@@ -3,8 +3,10 @@ import { writable } from "svelte/store";
 
 import ChooseWorld from "../views/ChooseWorld.svelte";
 import CreateWorld from "../views/CreateWorld.svelte";
+import JoinWorld from "../views/JoinWorld.svelte";
 import NotFound from "../views/NotFound.svelte";
 import Page from "../views/Page.svelte";
+import ShareWorld from "../views/ShareWorld.svelte";
 
 export let router = navaid("/", () =>
   currentRoute.set({ component: NotFound })
@@ -18,6 +20,8 @@ export let currentRoute = writable<{
 export const routes = {
   ChooseWorld: "/",
   CreateWorld: "/create",
+  ShareWorld: "/w/:worldId/share",
+  JoinWorld: "/w/:worldId/join", // password as hash
   Page: "/w/:worldId/:pageId",
 };
 
@@ -27,6 +31,12 @@ router.on(routes.ChooseWorld, () =>
 router.on(routes.CreateWorld, () =>
   currentRoute.set({ component: CreateWorld })
 );
+router.on(routes.ShareWorld, (params) =>
+  currentRoute.set({ component: ShareWorld, params })
+);
+router.on(routes.JoinWorld, (params) =>
+  currentRoute.set({ component: JoinWorld, params })
+);
 router.on(routes.Page, (params) =>
   currentRoute.set({ component: Page, params })
 );

src/views/JoinWorld.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { router, routes } from "../lib/routes";
+  import { inject } from "regexparam";
+  import { writeWorlds } from "../lib/worldStorage";
+
+  export let worldId: string;
+
+  async function addWorld() {
+    const password = location.hash.slice(1);
+    await writeWorlds((worlds) => [...worlds, { room: worldId, password }]);
+    router.route(inject(routes.Page, { worldId, pageId: "index" }));
+  }
+</script>
+
+<!-- TODO: mostrar título? -->
+<h1>Añadir {worldId}</h1>
+<button on:click={addWorld}>Añadir mundo</button>

src/views/Page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { onDestroy } from "svelte";
   import type { XmlFragment } from "yjs";
+  import { inject } from "regexparam";
   import Editor from "../editor/Editor.svelte";
   import { getWorldPage, getWorldY, type WorldY } from "../lib/doc";
   import { routes } from "../lib/routes";
@@ -25,7 +25,19 @@
   $: docPromise = loadDoc(worldId, pageId);
 </script>
 
-<a class="no-color" href={routes.ChooseWorld}>🠔 Elegir otro mundo</a>
+<nav>
+  <details>
+    <summary>Opciones</summary>
+    <ul>
+      <li><a href={routes.ChooseWorld}>🠔 Elegir otro mundo</a></li>
+      <li>
+        <a href={inject(routes.ShareWorld, { worldId })}
+          >📱 Agregar mundo a otro dispositivo</a
+        >
+      </li>
+    </ul>
+  </details>
+</nav>
 {#await docPromise then doc}
   <Editor doc={doc.doc} worldY={doc.worldY} />
 {:catch error}
@@ -34,7 +46,7 @@
 {/await}
 
 <style>
-  .no-color {
+  nav a {
     color: inherit;
   }
 </style>

src/views/ShareWorld.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { inject } from "regexparam";
+  import { routes } from "../lib/routes";
+  import { loadWorlds } from "../lib/worldStorage";
+
+  export let worldId: string;
+
+  async function joinWorldLink() {
+    const worlds = await loadWorlds();
+    const worldIdentifier = worlds.find((w) => w.room === worldId);
+    return `${location.origin}${inject(routes.JoinWorld, {
+      worldId: worldIdentifier.room,
+    })}#${worldIdentifier.password}`;
+  }
+  async function copyJoinWorldLink() {
+    await navigator.clipboard.writeText(await joinWorldLink());
+  }
+  async function shareJoinWorldLink() {
+    await navigator.clipboard.writeText(await joinWorldLink());
+  }
+
+  const canShare = "share" in navigator;
+</script>
+
+<nav>
+  <button on:click={() => history.back()}>🠔 Volver atrás</button>
+</nav>
+<p>
+  Podés añadir a otros dispositivos a este mundo. Se va a sincronizar
+  automágicamente.
+</p>
+<p>
+  Nota: Schreiben todavía no está diseñado para ser una herramienta colaborativa
+  entre varias personas. Esta opción existe para usar entre varios dispositivos
+  de una misma persona. Compartir este enlace da control completo sobre el
+  mundo.
+</p>
+{#if canShare}
+  <button on:click={shareJoinWorldLink}>Compartir enlace</button>
+{/if}
+<button on:click={copyJoinWorldLink}>Copiar enlace</button>