69 lines
3.1 KiB
Vue
69 lines
3.1 KiB
Vue
<template>
|
|
<TrainingViewer :config="config">
|
|
<template #addin="{ stat }">
|
|
<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-14 bg-transparent px-3 py-1 outline-none" />
|
|
</NumberFieldRoot>
|
|
</Label>
|
|
<Button @click="emit('next')">Suivant</Button>
|
|
</div>
|
|
</template>
|
|
<template #default="{ stat, level, option }">
|
|
<div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-[400px] hover:border-light-50 dark:hover:border-dark-50" @click="toggleOption(stat, parseInt(level as unknown as string, 10) as TrainingLevel, option)" :class="{ /*'opacity-30': level > maxTraining[stat] + 1, 'hover:border-light-60 dark:hover:border-dark-60': level <= maxTraining[stat] + 1, */'!border-accent-blue bg-accent-blue bg-opacity-20': level == 0 || (model.training[stat]?.some(e => e[0] == level && e[1] === option) ?? false) }">
|
|
<MarkdownRenderer :proses="{ 'a': PreviewA }" :content="config.training[stat][level][option].description.map(e => e.text).join('\n')" />
|
|
</div>
|
|
</template>
|
|
</TrainingViewer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import PreviewA from '~/components/prose/PreviewA.vue';
|
|
import { MAIN_STATS, type Character, type CharacterConfig, type MainStat, type TrainingLevel } from '~/types/character';
|
|
|
|
const { config } = defineProps<{
|
|
config: CharacterConfig,
|
|
}>();
|
|
const model = defineModel<Character>({ required: true, });
|
|
|
|
const maxTraining = Object.fromEntries(MAIN_STATS.map(e => [e, 0]));
|
|
|
|
const emit = defineEmits(['next']);
|
|
|
|
function toggleOption(stat: MainStat, level: TrainingLevel, choice: number)
|
|
{
|
|
const character = model.value;
|
|
|
|
if(level == 0)
|
|
return;
|
|
|
|
for(let i = 1; i < level; i++) //Check previous levels as a requirement
|
|
{
|
|
if(!character.training[stat].some(e => e[0] == i))
|
|
return;
|
|
}
|
|
|
|
if(character.training[stat].some(e => e[0] == level))
|
|
{
|
|
if(character.training[stat].some(e => e[0] == level && e[1] === choice))
|
|
{
|
|
for(let i = 15; i >= level; i --) //Invalidate higher levels
|
|
{
|
|
const index = character.training[stat].findIndex(e => e[0] == i);
|
|
if(index !== -1)
|
|
character.training[stat].splice(index, 1);
|
|
}
|
|
}
|
|
else
|
|
character.training[stat].splice(character.training[stat].findIndex(e => e[0] == level), 1, [level, choice]);
|
|
}
|
|
else //if(trainingPoints.value && trainingPoints.value > 0)
|
|
{
|
|
character.training[stat].push([level, choice]);
|
|
}
|
|
|
|
model.value = character;
|
|
}
|
|
</script> |