Character creation implementation. People and training ready, still need to work on abilities and spells

components/base/Collapsible.vue

@@ -1,7 +1,8 @@
 <template>
     <CollapsibleRoot v-model:open="model" :disabled="disabled" :defaultOpen="defaultOpen">
+        <slot name="alwaysVisible"></slot>
         <div class="flex flex-row justify-center items-center">
-            <span v-if="!!label">{{ label }}</span>
+            <span>{{ label }}<slot name="label"></slot></span>
             <CollapsibleTrigger class="ms-4" asChild>
                 <Button icon :disabled="disabled">
                     <Icon v-if="model" icon="radix-icons:cross-2" class="h-4 w-4" />
@@ -9,7 +10,6 @@
                 </Button>
             </CollapsibleTrigger>
         </div>
-        <slot name="alwaysVisible"></slot>
         <CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out]">
             <slot></slot>
         </CollapsibleContent>

components/page/Canvas.vue

@@ -111,6 +111,7 @@ if(overview.value && !overview.value.content)
     loading.value = false;
 }
 const canvas = computed(() => overview.value && overview.value.content ? overview.value.content : undefined);
+console.log(canvas.value);
 
 const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
 const canvasRef = useTemplateRef('canvasRef'), transformRef = useTemplateRef('transformRef');

components/prose/PreviewA.vue

@@ -0,0 +1,30 @@
+<template>
+	<span class="text-accent-blue inline-flex items-center" :class="class">
+		<HoverCard nuxt-client class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" :disabled="!overview">
+			<template #content>
+				<Markdown v-if="overview?.type === 'markdown'" class="!px-6" :path="decodeURIComponent(pathname)" :filter="hash.substring(1)" popover />
+				<template v-else-if="overview?.type === 'canvas'"><div class="w-[600px] h-[600px] relative"><Canvas :path="decodeURIComponent(pathname)" /></div></template>
+			</template>
+			<span>
+				<slot v-bind="$attrs"></slot>
+				<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
+			</span>
+		</HoverCard>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { parseURL } from 'ufo';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { iconByType } from '#shared/general.util';
+
+const { href } = defineProps<{
+	href: string
+	class?: string
+}>();
+
+const { hash, pathname } = parseURL(href);
+
+const { content } = useContent();
+const overview = computed(() => content.value.find(e => e.path === decodeURIComponent(pathname)));
+</script>

components/prose/ProseA.vue

@@ -1,5 +1,5 @@
 <template>
-	<NuxtLink class="text-accent-blue inline-flex items-center" :to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: hash } : href" :class="class">
+	<NuxtLink class="text-accent-blue inline-flex items-center" :to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: decodeURIComponent(hash) } : href" :class="class">
 		<HoverCard nuxt-client class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" :disabled="!overview">
 			<template #content>
 				<Markdown v-if="overview?.type === 'markdown'" class="!px-6" :path="decodeURIComponent(pathname)" :filter="hash.substring(1)" popover />