agregar mundos a otros dispositivos

fixes #1
This commit is contained in:
Cat /dev/Nulo 2023-03-05 22:11:24 +00:00
parent dc99cbfb9e
commit 03f01903bd
4 changed files with 83 additions and 3 deletions

View file

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

View file

@ -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>

View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { onDestroy } from "svelte";
import type { XmlFragment } from "yjs"; import type { XmlFragment } from "yjs";
import { inject } from "regexparam";
import Editor from "../editor/Editor.svelte"; import Editor from "../editor/Editor.svelte";
import { getWorldPage, getWorldY, type WorldY } from "../lib/doc"; import { getWorldPage, getWorldY, type WorldY } from "../lib/doc";
import { routes } from "../lib/routes"; import { routes } from "../lib/routes";
@ -25,7 +25,19 @@
$: docPromise = loadDoc(worldId, pageId); $: docPromise = loadDoc(worldId, pageId);
</script> </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} {#await docPromise then doc}
<Editor doc={doc.doc} worldY={doc.worldY} /> <Editor doc={doc.doc} worldY={doc.worldY} />
{:catch error} {:catch error}
@ -34,7 +46,7 @@
{/await} {/await}
<style> <style>
.no-color { nav a {
color: inherit; color: inherit;
} }
</style> </style>

View file

@ -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>