2023-03-05 17:10:29 +00:00
|
|
|
<script lang="ts">
|
|
|
|
import type { XmlFragment } from "yjs";
|
2023-03-05 22:11:24 +00:00
|
|
|
import { inject } from "regexparam";
|
2023-08-29 23:50:09 +00:00
|
|
|
import ChevronRight from "eva-icons/fill/svg/chevron-right.svg";
|
2023-03-05 17:10:29 +00:00
|
|
|
import Editor from "../editor/Editor.svelte";
|
|
|
|
import { getWorldPage, getWorldY, type WorldY } from "../lib/doc";
|
|
|
|
import { routes } from "../lib/routes";
|
|
|
|
import { loadWorlds } from "../lib/worldStorage";
|
2023-08-29 23:50:09 +00:00
|
|
|
import breadcrumbs from "../lib/breadcrumbs";
|
2023-03-05 17:10:29 +00:00
|
|
|
|
|
|
|
export let worldId: string;
|
|
|
|
export let pageId: string;
|
|
|
|
|
2023-08-29 23:50:09 +00:00
|
|
|
$: pageBreadcrumbs = breadcrumbs.worldStore(worldId);
|
|
|
|
|
2023-03-05 17:10:29 +00:00
|
|
|
async function loadDoc(
|
|
|
|
worldId: string,
|
2023-08-29 23:50:09 +00:00
|
|
|
pageId: string,
|
2023-03-05 17:10:29 +00:00
|
|
|
): Promise<{ worldY: WorldY; doc: XmlFragment }> {
|
|
|
|
const worlds = await loadWorlds();
|
|
|
|
const worldIdentifier = worlds.find((w) => w.room === worldId);
|
|
|
|
if (!worldIdentifier) {
|
|
|
|
throw new Error("No conozco ese mundo.");
|
|
|
|
}
|
|
|
|
const worldY = getWorldY(worldIdentifier);
|
2023-03-25 23:28:56 +00:00
|
|
|
|
2023-03-05 17:10:29 +00:00
|
|
|
return { worldY, doc: getWorldPage(worldY.ydoc, pageId) };
|
|
|
|
}
|
|
|
|
|
2023-03-25 23:28:56 +00:00
|
|
|
let state: "loading" | { worldY: WorldY; doc: XmlFragment } | { error: any };
|
|
|
|
$: {
|
|
|
|
state = "loading";
|
|
|
|
loadDoc(worldId, pageId)
|
|
|
|
.then((doc) => {
|
|
|
|
state = doc;
|
|
|
|
})
|
|
|
|
.catch((error) => (state = { error }));
|
|
|
|
}
|
2023-03-05 17:10:29 +00:00
|
|
|
</script>
|
|
|
|
|
2023-03-05 22:11:24 +00:00
|
|
|
<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>
|
2023-08-29 23:50:09 +00:00
|
|
|
|
|
|
|
<!-- https://devdojo.com/pines/docs/breadcrumbs -->
|
|
|
|
<div
|
|
|
|
class="flex justify-between rounded-md border border-neutral-200/60 px-3.5 py-1"
|
|
|
|
>
|
|
|
|
<ol
|
|
|
|
class="mb-3 inline-flex items-center space-x-1 text-xs text-neutral-500 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600"
|
|
|
|
>
|
|
|
|
{#each $pageBreadcrumbs as crumb, index}
|
|
|
|
<li>
|
|
|
|
<a
|
|
|
|
href={inject(routes.Page, { worldId, pageId: crumb })}
|
|
|
|
class="inline-flex items-center py-1 font-normal hover:text-neutral-900 focus:outline-none"
|
|
|
|
class:active-breadcrumb={crumb === pageId}>{crumb}</a
|
|
|
|
>
|
|
|
|
</li>
|
|
|
|
{#if index !== $pageBreadcrumbs.length - 1}
|
|
|
|
<ChevronRight class="h-5 w-5 fill-current text-gray-400/70" />
|
|
|
|
{/if}
|
|
|
|
{/each}
|
|
|
|
</ol>
|
|
|
|
</div>
|
2023-03-05 22:11:24 +00:00
|
|
|
</nav>
|
2023-03-25 23:28:56 +00:00
|
|
|
|
|
|
|
{#if state === "loading"}Cargando...{:else if "doc" in state}
|
|
|
|
<Editor doc={state.doc} worldY={state.worldY} />
|
|
|
|
{:else if "error" in state}
|
|
|
|
{state.error}
|
2023-03-05 17:10:29 +00:00
|
|
|
<a href={routes.ChooseWorld}>Volver al inicio</a>
|
2023-03-25 23:28:56 +00:00
|
|
|
{/if}
|
2023-03-05 17:10:29 +00:00
|
|
|
|
|
|
|
<style>
|
2023-03-05 22:11:24 +00:00
|
|
|
nav a {
|
2023-03-05 17:10:29 +00:00
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
</style>
|