78 lines
5.2 KiB
Vue
78 lines
5.2 KiB
Vue
<script setup lang="ts">
|
|
import characterConfig from '#shared/character-config.json';
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
import PreviewA from '~/components/prose/PreviewA.vue';
|
|
import { mainStatTexts, MAIN_STATS, type CharacterConfig } from '~/types/character';
|
|
|
|
//@ts-ignore
|
|
const config = ref<CharacterConfig>(characterConfig);
|
|
const trainingTab = ref(0);
|
|
|
|
function copy()
|
|
{
|
|
navigator.clipboard.writeText(JSON.stringify(config.value));
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<Title>d[any] - Edition de données</Title>
|
|
</Head>
|
|
<TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 w-full" default-value="training">
|
|
<TabsList class="flex flex-row gap-4 self-center relative px-4">
|
|
<TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
|
|
<TabsTrigger value="peoples" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
|
|
<TabsTrigger value="training" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Entrainement</TabsTrigger>
|
|
<TabsTrigger value="abilities" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Compétences</TabsTrigger>
|
|
<TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
|
|
<Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
|
|
</TabsList>
|
|
<TabsContent value="peoples" class="flex-1 overflow-auto">
|
|
</TabsContent>
|
|
<TabsContent value="training">
|
|
<TrainingViewer :config="config" />
|
|
</TabsContent>
|
|
<TabsContent value="abilities" class="flex-1 overflow-auto">
|
|
|
|
</TabsContent>
|
|
<TabsContent value="spells" class="flex-1 overflow-auto">
|
|
|
|
</TabsContent>
|
|
</TabsRoot>
|
|
<!-- <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1">
|
|
<template #label>
|
|
<span class="font-bold text-xl">Sorts</span>
|
|
</template>
|
|
<template #default>
|
|
<div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
|
|
<div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
|
|
<span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
|
|
<TextInput label="Nom" v-model="spellFilter.text" />
|
|
<Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
|
|
<Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
|
|
<Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
|
|
</div>
|
|
<div class="grid gap-4 grid-cols-2">
|
|
<div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
|
|
@click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
|
|
<div class="flex flex-row justify-between">
|
|
<span class="text-lg font-bold">{{ spell.name }}</span>
|
|
<div class="flex flex-row items-center gap-6">
|
|
<div class="flex flex-row text-sm gap-2">
|
|
<span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
|
|
</div>
|
|
<div class="flex flex-row text-sm gap-1">
|
|
<span class="">Rang {{ spell.rank }}</span><span>/</span>
|
|
<span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
|
|
<span class="">{{ spell.cost }} mana</span><span>/</span>
|
|
<span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<MarkdownRenderer :content="spell.effect" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Collapsible> -->
|
|
</template> |