obsidian-visualiser/components/character/editor/LevelEditor.vue

<template>
    <template v-if="model && model.people !== undefined">
        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Niveau</span>
                <NumberFieldRoot :min="1" :max="20" v-model="model.level" @update:model-value="updateLevel" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
                    <NumberFieldInput class="tabular-nums w-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
                </NumberFieldRoot>
            </Label>
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Attributions restantes</span>
                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
                </NumberFieldRoot>
            </Label>
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Vie</span>
                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
                </NumberFieldRoot>
            </Label>
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Mana</span>
                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
                </NumberFieldRoot>
            </Label>
            <Button @click="emit('next')">Suivant</Button>
        </div>
        <div class="flex flex-col flex-1 gap-4 mx-8 my-4">
            <template v-for="(level, index) of config.peoples[model.people].options">
                <div class="w-full flex h-px"><div class="border-t border-dashed border-light-50 dark:border-dark-50 w-full" :class="{ 'opacity-30': index > model.level }"></div><span class="sticky top-0">{{ index }}</span></div>
                <div class="flex flex-row gap-4 justify-center" :class="{ 'opacity-30': index > model.level }">
                    <template v-for="(option, i) of level">
                        <div class="flex border border-light-50 dark:border-dark-50 px-4 py-2 w-[400px]" @click="chooseOption(parseInt(index as unknown as string, 10) as Level, i)" 
                        :class="{ 'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer': index <= model.level, '!border-accent-blue bg-accent-blue bg-opacity-20': model.leveling?.some(e => e[0] == index && e[1] === i) ?? false }">
                            <span class="text-wrap whitespace-pre">{{ raceOptionToText(option) }}</span>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </template>
</template>

<script setup lang="ts">
import type { Character, CharacterConfig, Level, RaceOption } from '~/types/character';

const { config } = defineProps<{
    config: CharacterConfig,
}>();
const model = defineModel<Character>({ required: true });

const emit = defineEmits(['next']);

function raceOptionToText(option: RaceOption): string
{
    const text = [];
    if(option.training) text.push(`+${option.training} point${option.training > 1 ? 's' : ''} de statistique${option.training > 1 ? 's' : ''}.`);
    if(option.shaping) text.push(`+${option.shaping} transformation${option.shaping > 1 ? 's' : ''} par jour.`);
    if(option.modifier) text.push(`+${option.modifier} au modifieur de votre choix.`);
    if(option.abilities) text.push(`+${option.abilities} point${option.abilities > 1 ? 's' : ''} de compétence${option.abilities > 1 ? 's' : ''}.`);
    if(option.health) text.push(`+${option.health} PV max.`);
    if(option.mana) text.push(`+${option.mana} mana max.`);
    if(option.spellslots) text.push(`+${option.spellslots} sort${option.spellslots > 1 ? 's' : ''} maitrisé${option.spellslots > 1 ? 's' : ''}.`);
    return text.join('\n');
}
function chooseOption(level: Level, choice: number)
{
    const character = model.value;
    if(level > character.level)
        return;

    if(character.leveling === undefined)
        character.leveling = [[1, 0]];

    if(level == 1)
        return;

    for(let i = 1; i < level; i++) //Check previous levels as a requirement
    {
        if(!character.leveling.some(e => e[0] == i))
            return;
    }

    if(character.leveling.some(e => e[0] == level))
    {
        character.leveling.splice(character.leveling.findIndex(e => e[0] == level), 1, [level, choice]);
    }
    else
    {
        character.leveling.push([level, choice]);
    }

    model.value = character;
}
function updateLevel()
{
    const character = model.value;

    if(character.leveling) //Invalidate higher levels
    {
        for(let level = 20; level > character.level; level--)
        {
            const index = character.leveling.findIndex(e => e[0] == level);
            if(index !== -1)
                character.leveling.splice(index, 1);
        }
    }

    model.value = character;
}
</script>