37 lines
1.9 KiB
Vue
37 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import characterConfig from '#shared/character-config.json';
|
|
import { unifySlug } from '#shared/general.util';
|
|
import type { CharacterConfig } from '~/types/character';
|
|
import { CharacterSheet } from '#shared/character.util';
|
|
/*
|
|
text-light-red dark:text-dark-red border-light-red dark:border-dark-red bg-light-red dark:bg-dark-red
|
|
text-light-blue dark:text-dark-blue border-light-blue dark:border-dark-blue bg-light-blue dark:bg-dark-blue
|
|
text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow
|
|
text-light-orange dark:text-dark-orange border-light-orange dark:border-dark-orange bg-light-orange dark:bg-dark-orange
|
|
text-light-indigo dark:text-dark-indigo border-light-indigo dark:border-dark-indigo bg-light-indigo dark:bg-dark-indigo
|
|
text-light-lime dark:text-dark-lime border-light-lime dark:border-dark-lime bg-light-lime dark:bg-dark-lime
|
|
text-light-green dark:text-dark-green border-light-green dark:border-dark-green bg-light-green dark:bg-dark-green
|
|
text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow
|
|
text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-purple bg-light-purple dark:bg-dark-purple
|
|
*/
|
|
|
|
const config = characterConfig as CharacterConfig;
|
|
|
|
const id = useRouter().currentRoute.value.params.id ? unifySlug(useRouter().currentRoute.value.params.id!) : undefined;
|
|
const { user } = useUserSession();
|
|
const container = useTemplateRef('container');
|
|
|
|
onMounted(() => {
|
|
queueMicrotask(() => {
|
|
if(container.value && id)
|
|
{
|
|
const character = new CharacterSheet(id, user);
|
|
container.value.appendChild(character.container);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-1 w-full h-full items-start justify-center" ref="container"></div>
|
|
</template> |