Package update and TrainingViewer rendering fixes
This commit is contained in:
parent
d5851499cd
commit
c33bd95b81
|
|
@ -7,18 +7,17 @@ const { config, progress = false } = defineProps<{
|
|||
progress?: boolean,
|
||||
}>();
|
||||
|
||||
const dragger = useTemplateRef<HTMLElement | null>('dragger');
|
||||
//const dragger = useTemplateRef('dragger');
|
||||
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('mouseup', dragend);
|
||||
|
||||
dragging.value = false;
|
||||
};
|
||||
const dragmove = (e: MouseEvent) => {
|
||||
const box = dragger.value!.getBoundingClientRect();
|
||||
offset.value = clamp(offset.value - e.movementY, 0, 100);
|
||||
if(dragger.value) dragger.value.scrollTop = offset.value;
|
||||
};
|
||||
|
|
@ -33,25 +32,25 @@ onMounted(() => {
|
|||
});
|
||||
onUnmounted(() => {
|
||||
dragger.value?.removeEventListener('mousedown', dragstart);
|
||||
});
|
||||
}); */
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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="flex flex-row gap-3 items-center relative w-48">
|
||||
<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 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
|
||||
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]
|
||||
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 class="relative left-6">
|
||||
<slot name="addin" :stat="MAIN_STATS[position]"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<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="flex flex-shrink-0 flex-col gap-4 relative w-full" v-for="(stat, name) in config.training" >
|
||||
<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 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">
|
||||
<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">
|
||||
|
|
|
|||
BIN
db.sqlite-shm
BIN
db.sqlite-shm
Binary file not shown.
BIN
db.sqlite-wal
BIN
db.sqlite-wal
Binary file not shown.
|
|
@ -126,6 +126,9 @@ export default defineNuxtConfig({
|
|||
experimental: {
|
||||
tasks: true,
|
||||
},
|
||||
watchOptions: {
|
||||
usePolling: true,
|
||||
},
|
||||
rollupConfig: {
|
||||
external: ['bun'],
|
||||
plugins: [
|
||||
|
|
@ -181,5 +184,20 @@ export default defineNuxtConfig({
|
|||
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'),
|
||||
}
|
||||
},
|
||||
devtools: {
|
||||
enabled: false,
|
||||
},
|
||||
vite: {
|
||||
server: {
|
||||
watch: {
|
||||
usePolling: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
watchers: {
|
||||
chokidar: {
|
||||
usePolling: true,
|
||||
}
|
||||
}
|
||||
})
|
||||
42
package.json
42
package.json
|
|
@ -7,52 +7,52 @@
|
|||
"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bunx --bun nuxi dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
|
||||
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
|
||||
"@codemirror/lang-markdown": "^6.3.2",
|
||||
"@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
|
||||
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
|
||||
"@codemirror/lang-markdown": "^6.3.3",
|
||||
"@iconify/vue": "^4.3.0",
|
||||
"@lezer/highlight": "^1.2.1",
|
||||
"@markdoc/markdoc": "^0.5.1",
|
||||
"@markdoc/markdoc": "^0.5.2",
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@nuxtjs/sitemap": "^7.2.5",
|
||||
"@nuxtjs/sitemap": "^7.4.2",
|
||||
"@nuxtjs/tailwindcss": "^6.13.1",
|
||||
"@vueuse/gesture": "^2.0.0",
|
||||
"@vueuse/math": "^12.7.0",
|
||||
"@vueuse/nuxt": "^12.7.0",
|
||||
"codemirror": "^6.0.1",
|
||||
"drizzle-orm": "^0.39.3",
|
||||
"@vueuse/math": "^13.4.0",
|
||||
"@vueuse/nuxt": "^13.4.0",
|
||||
"codemirror": "^6.0.2",
|
||||
"drizzle-orm": "^0.44.2",
|
||||
"hast": "^1.0.0",
|
||||
"hast-util-heading": "^3.0.0",
|
||||
"hast-util-heading-rank": "^3.0.0",
|
||||
"lodash.capitalize": "^4.2.1",
|
||||
"mdast-util-find-and-replace": "^3.0.2",
|
||||
"nodemailer": "^6.10.0",
|
||||
"nuxt": "3.15.4",
|
||||
"nuxt-security": "^2.1.5",
|
||||
"radix-vue": "^1.9.15",
|
||||
"nodemailer": "^7.0.3",
|
||||
"nuxt": "3.17.5",
|
||||
"nuxt-security": "^2.2.0",
|
||||
"radix-vue": "^1.9.17",
|
||||
"rehype-raw": "^7.0.0",
|
||||
"remark-breaks": "^4.0.0",
|
||||
"remark-frontmatter": "^5.0.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"remark-ofm": "link:remark-ofm",
|
||||
"remark-parse": "^11.0.0",
|
||||
"remark-rehype": "^11.1.1",
|
||||
"remark-rehype": "^11.1.2",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"rollup-plugin-vue": "^6.0.0",
|
||||
"unified": "^11.0.5",
|
||||
"unist-util-visit": "^5.0.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0",
|
||||
"zod": "^3.24.2"
|
||||
"vue": "^3.5.17",
|
||||
"vue-router": "^4.5.1",
|
||||
"zod": "^3.25.67"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.2.2",
|
||||
"@types/bun": "^1.2.17",
|
||||
"@types/lodash.capitalize": "^4.2.9",
|
||||
"@types/nodemailer": "^6.4.17",
|
||||
"@types/unist": "^3.0.3",
|
||||
"better-sqlite3": "^11.8.1",
|
||||
"bun-types": "^1.2.2",
|
||||
"drizzle-kit": "^0.30.4",
|
||||
"better-sqlite3": "^12.1.1",
|
||||
"bun-types": "^1.2.17",
|
||||
"drizzle-kit": "^0.31.4",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"rehype-stringify": "^10.0.1"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { z, type ZodRawShape } from "zod";
|
||||
import { characterTable } from "~/db/schema";
|
||||
import { z, type ZodRawShape } from "zod/v4";
|
||||
|
||||
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];
|
||||
|
|
|
|||
Loading…
Reference in New Issue