Peaceultime
/
obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix TrainingViewer render

This commit is contained in:
Clément Pons 2025-06-27 22:04:10 +02:00
parent e78a60f771
commit d5851499cd
9 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.vue
View File

@ -4,7 +4,7 @@
<NuxtLoadingIndicator /> <NuxtLoadingIndicator />
<TooltipProvider> <TooltipProvider>
<NuxtLayout> <NuxtLayout>
<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full relative"> <div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full max-w-full relative">
<NuxtPage /> <NuxtPage />
</div> </div>
</NuxtLayout> </NuxtLayout>

10
components/TrainingViewer.vue
View File

@ -8,7 +8,7 @@ const { config, progress = false } = defineProps<{
}>(); }>();
const dragger = useTemplateRef<HTMLElement | null>('dragger'); const dragger = useTemplateRef<HTMLElement | null>('dragger');
const position = ref(0), id = ref<number>(0); const position = ref(0);
const dragging = ref(false), offset = ref(0); const dragging = ref(false), offset = ref(0);
const dragend = () => { const dragend = () => {
@ -49,12 +49,12 @@ onUnmounted(() => {
<slot name="addin" :stat="MAIN_STATS[position]"></slot> <slot name="addin" :stat="MAIN_STATS[position]"></slot>
</div> </div>
</div> </div>
<div ref="dragger" class="flex flex-1 px-8 overflow-hidden max-w-full"> <div class="flex flex-1 px-8 overflow-hidden max-w-full">
<div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full" > <div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full gap-16" :style="{ 'left': `calc(-${position} * calc(100% + 4rem))` }">
<div class="flex flex-shrink-0 flex-col gap-4 relative w-full" v-for="(stat, name) in config.training" ><!-- v-for="(stat, name) in config.training" --> <div class="flex flex-shrink-0 flex-col gap-4 relative w-full" v-for="(stat, name) in config.training" >
<div class="flex flex-row gap-2 justify-center relative" v-for="(options, level) in stat"> <div class="flex flex-row gap-2 justify-center relative" v-for="(options, level) in stat">
<template v-if="progress"> <template v-if="progress">
<div class="absolute -left-8 -right-8 -top-2 h-px border-t border-light-30 dark:border-dark-30 border-dashed"> <div class="absolute left-0 right-0 -top-2 h-px border-t border-light-30 dark:border-dark-30 border-dashed">
<span class="absolute right-0 p-1 text-end">{{ level }}</span> <span class="absolute right-0 p-1 text-end">{{ level }}</span>
</div> </div>
</template> </template>

BIN
db.sqlite
View File

Binary file not shown.

BIN
db.sqlite-shm
View File

Binary file not shown.

BIN
db.sqlite-wal
View File

Binary file not shown.

2
layouts/default.vue
View File

@ -39,7 +39,7 @@
</template> </template>
</div> </div>
</div> </div>
<div class="flex flex-1 flex-row relative h-screen overflow-hidden"> <div class="flex flex-1 flex-row relative h-screen w-screen overflow-hidden">
<CollapsibleContent asChild forceMount> <CollapsibleContent asChild forceMount>
<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden"> <div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden"> <div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden">

1
nuxt.config.ts
View File

@ -5,6 +5,7 @@ import path from 'node:path'
export default defineNuxtConfig({ export default defineNuxtConfig({
compatibilityDate: '2024-04-03', compatibilityDate: '2024-04-03',
ssr: false,
modules: [ modules: [
'@nuxtjs/color-mode', '@nuxtjs/color-mode',
'nuxt-security', 'nuxt-security',

14
pages/character/[id]/edit.client.vue
View File

@ -45,7 +45,7 @@ const { add } = useToast();
const characterConfig = config as CharacterConfig; const characterConfig = config as CharacterConfig;
const data = ref<Character>({ ...defaultCharacter }); const data = ref<Character>({ ...defaultCharacter });
const spellFilter = ref<{ const spellFilter = ref<{
ranks: Array<1 | 2 | 3>, ranks: Array<1 | 2 | 3 | 4>,
types: Array<SpellType>, types: Array<SpellType>,
text: string, text: string,
elements: Array<SpellElement>, elements: Array<SpellElement>,
@ -220,7 +220,7 @@ useShortcuts({
<Head> <Head>
<Title>d[any] - Edition de {{ data.name || 'nouveau personnage' }}</Title> <Title>d[any] - Edition de {{ data.name || 'nouveau personnage' }}</Title>
</Head> </Head>
<div class="flex flex-col gap-8 align-center"> <div class="flex flex-1 max-w-full flex-col gap-8 align-center">
<div class="flex flex-row gap-4 align-center justify-between"> <div class="flex flex-row gap-4 align-center justify-between">
<div></div> <div></div>
<div class="flex flex-row gap-4 align-center justify-center"> <div class="flex flex-row gap-4 align-center justify-center">
@ -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 :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> <TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="people" class="flex-1 outline-none" forceMount> <TabsContent value="people" class="flex-1 outline-none max-w-full w-full" forceMount>
<div class="m-2 overflow-auto"> <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]]}" /> <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"> <template v-if="data.people !== undefined">
@ -276,7 +276,7 @@ useShortcuts({
</template> </template>
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="training" class="flex-1 outline-none max-w-full" forceMount> <TabsContent value="training" class="flex-1 outline-none max-w-full w-full" forceMount>
<TrainingViewer :config="characterConfig" progress> <TrainingViewer :config="characterConfig" progress>
<template #default="{ stat, level, option, index }"> <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) }"> <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> </template>
</TrainingViewer> </TrainingViewer>
</TabsContent> </TabsContent>
<TabsContent value="abilities" class="flex-1 outline-none" forceMount> <TabsContent value="abilities" class="flex-1 outline-none max-w-full w-full" forceMount>
<div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto"> <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"> <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> <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>
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="spells" class="flex-1 outline-none" forceMount> <TabsContent value="spells" class="flex-1 outline-none max-w-full w-full" forceMount>
<div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto"> <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"> <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> <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,7 +341,7 @@ useShortcuts({
</div> </div>
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="notes" class="flex-1 outline-none" forceMount> <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" /> <Editor class="min-h-[400px] border border-light-30 dark:border-dark-30" :v-model="data.notes" />
</TabsContent> </TabsContent>
</TabsRoot> </TabsRoot>

10
pages/character/manage.client.vue
View File

@ -18,7 +18,7 @@ function copy()
<Head> <Head>
<Title>d[any] - Edition de données</Title> <Title>d[any] - Edition de données</Title>
</Head> </Head>
<TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 max-w-full overflow-hidden" default-value="training"> <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">
<TabsList class="flex flex-row gap-4 self-center relative px-4"> <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> <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="peoples" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
@ -27,9 +27,9 @@ function copy()
<TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</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> <Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
</TabsList> </TabsList>
<TabsContent value="peoples" class="flex-1 outline-none"> <TabsContent value="peoples" class="flex-1 outline-none max-w-full w-full">
</TabsContent> </TabsContent>
<TabsContent value="training" class="flex-1 outline-none max-w-full"> <TabsContent value="training" class="flex-1 outline-none max-w-full w-full">
<TrainingViewer :config="config" progress> <TrainingViewer :config="config" progress>
<template #default="{ stat, level, option }"> <template #default="{ stat, level, option }">
<div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-96"> <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-96">
@ -38,10 +38,10 @@ function copy()
</template> </template>
</TrainingViewer> </TrainingViewer>
</TabsContent> </TabsContent>
<TabsContent value="abilities" class="flex-1 outline-none"> <TabsContent value="abilities" class="flex-1 outline-none max-w-full w-full">
</TabsContent> </TabsContent>
<TabsContent value="spells" class="flex-1 outline-none"> <TabsContent value="spells" class="flex-1 outline-none max-w-full w-full">
</TabsContent> </TabsContent>
</TabsRoot> </TabsRoot>