38 lines
2.4 KiB
Vue
38 lines
2.4 KiB
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">Points restants</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-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
|
|
</NumberFieldRoot>
|
|
</Label>
|
|
<Button @click="emit('next')">Suivant</Button>
|
|
</div>
|
|
<div class="flex flex-row flex-wrap justify-center items-center flex-1 gap-12 mx-8 my-4 px-48">
|
|
<template v-for="ability of config.abilities">
|
|
<div class="flex flex-col border border-light-50 dark:border-dark-50 p-4 gap-2 w-[200px] relative">
|
|
<div class="flex justify-between">
|
|
<NumberFieldRoot :min="0" class="flex w-20 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>
|
|
<Tooltip side="bottom" :message="`${mainStatTexts[ability.max[0]]} (0) + ${mainStatTexts[ability.max[1]]} (0) + 0`"><span class="text-lg text-end cursor-pointer">/ {{ 0 }}</span></Tooltip>
|
|
</div>
|
|
<span class="text-xl text-center font-bold">{{ ability.name }}</span>
|
|
<span class="absolute -bottom-px -left-px h-[3px] bg-accent-blue" :style="{ width: `200px` }"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { mainStatTexts, type Character, type CharacterConfig } from '~/types/character';
|
|
|
|
const { config } = defineProps<{
|
|
config: CharacterConfig,
|
|
}>();
|
|
const model = defineModel<Character>({ required: true });
|
|
|
|
const emit = defineEmits(['next']);
|
|
</script> |