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

Package update and TrainingViewer rendering fixes

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

19
components/TrainingViewer.vue
View File

@@ -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">