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

Package update and TrainingViewer rendering fixes

This commit is contained in:
Peaceultime 2025-06-30 08:22:58 +02:00
parent d5851499cd
commit c33bd95b81
10 changed files with 1180 additions and 591 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1644
bun.lock
View File

File diff suppressed because it is too large Load Diff

19
components/TrainingViewer.vue
View File

@ -7,18 +7,17 @@ const { config, progress = false } = defineProps<{
progress?: boolean, progress?: boolean,
}>(); }>();
const dragger = useTemplateRef<HTMLElement | null>('dragger'); //const dragger = useTemplateRef('dragger');
const position = ref(0); const position = ref(0);
const dragging = ref(false), offset = ref(0); //const dragging = ref(false), offset = ref(0);
const dragend = () => { /* const dragend = () => {
window.removeEventListener('mousemove', dragmove); window.removeEventListener('mousemove', dragmove);
window.removeEventListener('mouseup', dragend); window.removeEventListener('mouseup', dragend);
dragging.value = false; dragging.value = false;
}; };
const dragmove = (e: MouseEvent) => { const dragmove = (e: MouseEvent) => {
const box = dragger.value!.getBoundingClientRect();
offset.value = clamp(offset.value - e.movementY, 0, 100); offset.value = clamp(offset.value - e.movementY, 0, 100);
if(dragger.value) dragger.value.scrollTop = offset.value; if(dragger.value) dragger.value.scrollTop = offset.value;
}; };
@ -33,25 +32,25 @@ onMounted(() => {
}); });
onUnmounted(() => { onUnmounted(() => {
dragger.value?.removeEventListener('mousedown', dragstart); dragger.value?.removeEventListener('mousedown', dragstart);
}); }); */
</script> </script>
<template> <template>
<div class="flex flex-col relative max-w-full"> <div class="flex flex-col relative max-w-full">
<div class="sticky top-8 w-full bg-light-0 dark:bg-dark-0 z-20 flex pt-2 pb-6"> <div class="sticky top-0 w-full bg-light-0 dark:bg-dark-0 z-20 flex pt-2 pb-6">
<div class="flex flex-row gap-3 items-center relative w-48"> <div class="flex flex-row gap-3 items-center relative left-6 w-48">
<span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent
hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></span> hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></span>
<span :style="{ 'left': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[left] <span :style="{ 'left': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[left]
after:content-[attr(data-text)] after:absolute after:-translate-x-1/2 after:top-4 after:p-px after:bg-light-0 dark:after:bg-dark-0 after:text-center"></span> after:content-[attr(data-text)] after:absolute after:-translate-x-1/2 after:top-4 after:p-px after:bg-light-0 dark:after:bg-dark-0 after:text-center"></span>
</div> </div>
<div> <div class="relative left-6">
<slot name="addin" :stat="MAIN_STATS[position]"></slot> <slot name="addin" :stat="MAIN_STATS[position]"></slot>
</div> </div>
</div> </div>
<div 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 gap-16" :style="{ 'left': `calc(-${position} * calc(100% + 4rem))` }"> <div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full" :style="{ 'left': `-${position * 100}%` }">
<div class="flex flex-shrink-0 flex-col gap-4 relative w-full" v-for="(stat, name) in config.training" > <div class="flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-20" 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-0 right-0 -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">

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.

18
nuxt.config.ts
View File

@ -126,6 +126,9 @@ export default defineNuxtConfig({
experimental: { experimental: {
tasks: true, tasks: true,
}, },
watchOptions: {
usePolling: true,
},
rollupConfig: { rollupConfig: {
external: ['bun'], external: ['bun'],
plugins: [ plugins: [
@ -181,5 +184,20 @@ export default defineNuxtConfig({
key: fs.readFileSync(path.resolve(__dirname, 'localhost+1-key.pem')).toString('utf-8'), key: fs.readFileSync(path.resolve(__dirname, 'localhost+1-key.pem')).toString('utf-8'),
cert: fs.readFileSync(path.resolve(__dirname, 'localhost+1.pem')).toString('utf-8'), cert: fs.readFileSync(path.resolve(__dirname, 'localhost+1.pem')).toString('utf-8'),
} }
},
devtools: {
enabled: false,
},
vite: {
server: {
watch: {
usePolling: true,
}
}
},
watchers: {
chokidar: {
usePolling: true,
}
} }
}) })

42
package.json
View File

@ -7,52 +7,52 @@
"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bunx --bun nuxi dev" "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bunx --bun nuxi dev"
}, },
"dependencies": { "dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.5.0", "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3", "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
"@codemirror/lang-markdown": "^6.3.2", "@codemirror/lang-markdown": "^6.3.3",
"@iconify/vue": "^4.3.0", "@iconify/vue": "^4.3.0",
"@lezer/highlight": "^1.2.1", "@lezer/highlight": "^1.2.1",
"@markdoc/markdoc": "^0.5.1", "@markdoc/markdoc": "^0.5.2",
"@nuxtjs/color-mode": "^3.5.2", "@nuxtjs/color-mode": "^3.5.2",
"@nuxtjs/sitemap": "^7.2.5", "@nuxtjs/sitemap": "^7.4.2",
"@nuxtjs/tailwindcss": "^6.13.1", "@nuxtjs/tailwindcss": "^6.13.1",
"@vueuse/gesture": "^2.0.0", "@vueuse/gesture": "^2.0.0",
"@vueuse/math": "^12.7.0", "@vueuse/math": "^13.4.0",
"@vueuse/nuxt": "^12.7.0", "@vueuse/nuxt": "^13.4.0",
"codemirror": "^6.0.1", "codemirror": "^6.0.2",
"drizzle-orm": "^0.39.3", "drizzle-orm": "^0.44.2",
"hast": "^1.0.0", "hast": "^1.0.0",
"hast-util-heading": "^3.0.0", "hast-util-heading": "^3.0.0",
"hast-util-heading-rank": "^3.0.0", "hast-util-heading-rank": "^3.0.0",
"lodash.capitalize": "^4.2.1", "lodash.capitalize": "^4.2.1",
"mdast-util-find-and-replace": "^3.0.2", "mdast-util-find-and-replace": "^3.0.2",
"nodemailer": "^6.10.0", "nodemailer": "^7.0.3",
"nuxt": "3.15.4", "nuxt": "3.17.5",
"nuxt-security": "^2.1.5", "nuxt-security": "^2.2.0",
"radix-vue": "^1.9.15", "radix-vue": "^1.9.17",
"rehype-raw": "^7.0.0", "rehype-raw": "^7.0.0",
"remark-breaks": "^4.0.0", "remark-breaks": "^4.0.0",
"remark-frontmatter": "^5.0.0", "remark-frontmatter": "^5.0.0",
"remark-gfm": "^4.0.1", "remark-gfm": "^4.0.1",
"remark-ofm": "link:remark-ofm", "remark-ofm": "link:remark-ofm",
"remark-parse": "^11.0.0", "remark-parse": "^11.0.0",
"remark-rehype": "^11.1.1", "remark-rehype": "^11.1.2",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-vue": "^6.0.0", "rollup-plugin-vue": "^6.0.0",
"unified": "^11.0.5", "unified": "^11.0.5",
"unist-util-visit": "^5.0.0", "unist-util-visit": "^5.0.0",
"vue": "^3.5.13", "vue": "^3.5.17",
"vue-router": "^4.5.0", "vue-router": "^4.5.1",
"zod": "^3.24.2" "zod": "^3.25.67"
}, },
"devDependencies": { "devDependencies": {
"@types/bun": "^1.2.2", "@types/bun": "^1.2.17",
"@types/lodash.capitalize": "^4.2.9", "@types/lodash.capitalize": "^4.2.9",
"@types/nodemailer": "^6.4.17", "@types/nodemailer": "^6.4.17",
"@types/unist": "^3.0.3", "@types/unist": "^3.0.3",
"better-sqlite3": "^11.8.1", "better-sqlite3": "^12.1.1",
"bun-types": "^1.2.2", "bun-types": "^1.2.17",
"drizzle-kit": "^0.30.4", "drizzle-kit": "^0.31.4",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"rehype-stringify": "^10.0.1" "rehype-stringify": "^10.0.1"
} }

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

@ -251,7 +251,7 @@ useShortcuts({
<Tooltip side="right" message="Ctrl+S"><Button @click="() => save(true)">Enregistrer</Button></Tooltip> <Tooltip side="right" message="Ctrl+S"><Button @click="() => save(true)">Enregistrer</Button></Tooltip>
</div> </div>
</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"> <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> <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> <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 :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 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"> <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 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> <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 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="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 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="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,8 +341,8 @@ useShortcuts({
</div> </div>
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="notes" class="flex-1 outline-none max-w-full w-full" forceMount> <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" :v-model="data.notes" /> <Editor class="min-h-[400px] border border-light-30 dark:border-dark-30 my-4" :v-model="data.notes" />
</TabsContent> </TabsContent>
</TabsRoot> </TabsRoot>
</div> </div>

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

@ -2,23 +2,44 @@
import characterConfig from '#shared/character-config.json'; import characterConfig from '#shared/character-config.json';
import { Icon } from '@iconify/vue/dist/iconify.js'; import { Icon } from '@iconify/vue/dist/iconify.js';
import PreviewA from '~/components/prose/PreviewA.vue'; 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 //@ts-ignore
const config = ref<CharacterConfig>(characterConfig); const config = ref<CharacterConfig>(characterConfig);
const trainingTab = ref(0);
const selection = ref<{
stat: MainStat;
level: TrainingLevel;
index: number;
}>();
function copy() function copy()
{ {
navigator.clipboard.writeText(JSON.stringify(config.value)); 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> </script>
<template> <template>
<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 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"> <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>
@ -31,8 +52,8 @@ function copy()
</TabsContent> </TabsContent>
<TabsContent value="training" class="flex-1 outline-none max-w-full 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, index }">
<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 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')" /> <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" />
</div> </div>
</template> </template>

3
types/character.ts
View File

@ -1,5 +1,4 @@
import { z, type ZodRawShape } from "zod"; import { z, type ZodRawShape } from "zod/v4";
import { characterTable } from "~/db/schema";
export const MAIN_STATS = ["strength","dexterity","constitution","intelligence","curiosity","charisma","psyche"] as const; export type MainStat = typeof MAIN_STATS[number]; export const MAIN_STATS = ["strength","dexterity","constitution","intelligence","curiosity","charisma","psyche"] as const; export type MainStat = typeof MAIN_STATS[number];
export const ABILITIES = ["athletics","acrobatics","intimidation","sleightofhand","stealth","survival","investigation","history","religion","arcana","understanding","perception","performance","medecine","persuasion","animalhandling","deception"] as const; export type Ability = typeof ABILITIES[number]; export const ABILITIES = ["athletics","acrobatics","intimidation","sleightofhand","stealth","survival","investigation","history","religion","arcana","understanding","perception","performance","medecine","persuasion","animalhandling","deception"] as const; export type Ability = typeof ABILITIES[number];