You've already forked obsidian-visualiser
Package update and TrainingViewer rendering fixes
This commit is contained in:
@@ -251,7 +251,7 @@ useShortcuts({
|
||||
<Tooltip side="right" message="Ctrl+S"><Button @click="() => save(true)">Enregistrer</Button></Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<TabsRoot class="flex flex-1 flex-col justify-start items-center px-8 w-full overflow-y-auto" default-value="people">
|
||||
<TabsRoot class="flex flex-1 flex-col justify-start items-center px-8 w-full h-full overflow-y-hidden" default-value="people">
|
||||
<TabsList class="flex w-full flex-row gap-4 self-center items-center justify-center relative px-4 sticky top-0 bg-light-0 dark:bg-dark-0 z-20">
|
||||
<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="people" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
|
||||
@@ -260,7 +260,7 @@ useShortcuts({
|
||||
<TabsTrigger :disabled="data.people === undefined" value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Sorts</TabsTrigger>
|
||||
<TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="people" class="flex-1 outline-none max-w-full w-full" forceMount>
|
||||
<TabsContent value="people" class="flex-1 outline-none max-w-full w-full overflow-y-auto" forceMount>
|
||||
<div class="m-2 overflow-auto">
|
||||
<Combobox label="Peuple de votre personnage" v-model="data.people" :options="config.peoples.map((people, index) => [people.name, index])" @update:model-value="(index) => { data.people = index as number | undefined; data.leveling = [[1, 0]]}" />
|
||||
<template v-if="data.people !== undefined">
|
||||
@@ -276,7 +276,7 @@ useShortcuts({
|
||||
</template>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="training" class="flex-1 outline-none max-w-full w-full" forceMount>
|
||||
<TabsContent value="training" class="flex-1 outline-none max-w-full w-full h-full max-h-full overflow-y-auto" forceMount>
|
||||
<TrainingViewer :config="characterConfig" progress>
|
||||
<template #default="{ stat, level, option, index }">
|
||||
<div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 max-w-[26rem] hover:border-light-50 dark:hover:border-dark-50" @click="switchTrainingOption(stat, parseInt(level as unknown as string, 10) as TrainingLevel, index)" :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 || (data.training[stat]?.some(e => e[0] == level && e[1] === index) ?? false) }">
|
||||
@@ -290,7 +290,7 @@ useShortcuts({
|
||||
</template>
|
||||
</TrainingViewer>
|
||||
</TabsContent>
|
||||
<TabsContent value="abilities" class="flex-1 outline-none max-w-full w-full" forceMount>
|
||||
<TabsContent value="abilities" class="flex-1 outline-none max-w-full w-fulloverflow-y-auto" forceMount>
|
||||
<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 justify-between">
|
||||
<span class="text-xl -mx-2" :class="{ 'text-light-red dark:text-dark-red': (abilityPoints ?? 0) < abilitySpent }">Points d'entrainement restants: {{ (abilityPoints ?? 0) - abilitySpent }}</span>
|
||||
@@ -310,7 +310,7 @@ useShortcuts({
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="spells" class="flex-1 outline-none max-w-full w-full" forceMount>
|
||||
<TabsContent value="spells" class="flex-1 outline-none max-w-full w-full overflow-y-auto" forceMount>
|
||||
<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>
|
||||
@@ -341,8 +341,8 @@ useShortcuts({
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="notes" class="flex-1 outline-none max-w-full w-full" forceMount>
|
||||
<Editor class="min-h-[400px] border border-light-30 dark:border-dark-30" :v-model="data.notes" />
|
||||
<TabsContent value="notes" class="flex-1 outline-none max-w-full w-full overflow-y-auto" forceMount>
|
||||
<Editor class="min-h-[400px] border border-light-30 dark:border-dark-30 my-4" :v-model="data.notes" />
|
||||
</TabsContent>
|
||||
</TabsRoot>
|
||||
</div>
|
||||
|
||||
@@ -2,23 +2,44 @@
|
||||
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';
|
||||
import type { CharacterConfig, MainStat, TrainingLevel } from '~/types/character';
|
||||
|
||||
//@ts-ignore
|
||||
const config = ref<CharacterConfig>(characterConfig);
|
||||
const trainingTab = ref(0);
|
||||
|
||||
const selection = ref<{
|
||||
stat: MainStat;
|
||||
level: TrainingLevel;
|
||||
index: number;
|
||||
}>();
|
||||
|
||||
function copy()
|
||||
{
|
||||
navigator.clipboard.writeText(JSON.stringify(config.value));
|
||||
}
|
||||
function focusTraining(stat: MainStat, level: TrainingLevel, index: number)
|
||||
{
|
||||
const s = selection.value;
|
||||
if(s !== undefined && s.stat === stat && s.level === level && s.index === index)
|
||||
{
|
||||
selection.value = undefined;
|
||||
}
|
||||
else
|
||||
{
|
||||
selection.value = {
|
||||
stat, level, index
|
||||
};
|
||||
}
|
||||
|
||||
console.log(selection.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<Title>d[any] - Edition de données</Title>
|
||||
</Head>
|
||||
<TabsRoot class="flex flex-1 max-w-full flex-col gap-8 justify-start items-center px-8 w-full overflow-y-auto" default-value="training">
|
||||
<TabsRoot class="flex flex-1 max-w-full flex-col gap-8 justify-start items-center 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>
|
||||
@@ -31,8 +52,8 @@ function copy()
|
||||
</TabsContent>
|
||||
<TabsContent value="training" class="flex-1 outline-none max-w-full w-full">
|
||||
<TrainingViewer :config="config" progress>
|
||||
<template #default="{ stat, level, option }">
|
||||
<div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-96">
|
||||
<template #default="{ stat, level, option, index }">
|
||||
<div class="border border-light-40 dark:border-dark-40 hover:border-light-70 dark:hover:border-dark-70 cursor-pointer px-2 py-1 w-96" :class="{ '!border-accent-blue': selection !== undefined && selection?.stat == stat && selection?.level == level && selection?.index == index }" @click="focusTraining(stat, level, index)">
|
||||
<MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user