<script setup lang="ts">
import characterConfig from '#shared/character-config.json';
import { unifySlug } from '~~/shared/general';
import type { CharacterConfig } from '~/types/character';
import { CharacterSheet } from '~~/shared/character';

/*
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);

            onUnmounted(() => {
                character.ws?.close();
            })
        }
    });
});
</script>

<template>
    <div class="flex flex-1 w-full h-full items-start justify-center" ref="container"></div>
</template>