56 lines
4.0 KiB
Vue
56 lines
4.0 KiB
Vue
<template>
|
|
<template v-if="model && model.character && model.character.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.character.level" @update:model-value="val => model.updateLevel(val as Level)" 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.character.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.character.level }"></div><span class="sticky top-0">{{ index }}</span></div>
|
|
<div class="flex flex-row gap-4 justify-center" :class="{ 'opacity-30': index > model.character.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="model.toggleLevelOption(parseInt(index as unknown as string, 10) as Level, i)"
|
|
:class="{ 'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer': index <= model.character.level, '!border-accent-blue bg-accent-blue bg-opacity-20': model.character.leveling?.some(e => e[0] == index && e[1] === i) ?? false }">
|
|
<span class="text-wrap whitespace-pre">{{ option.description }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { CharacterBuilder } from '~/shared/character';
|
|
import type { CharacterConfig, Level } from '~/types/character';
|
|
|
|
const { config } = defineProps<{
|
|
config: CharacterConfig,
|
|
}>();
|
|
const model = defineModel<CharacterBuilder>({ required: true });
|
|
|
|
const emit = defineEmits(['next']);
|
|
</script> |