You've already forked obsidian-visualiser
Training viewer and properties manager preparation
This commit is contained in:
Clément Pons
78
pages/character/manage.client.vue
Normal file
78
pages/character/manage.client.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
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';
|
||||
|
||||
//@ts-ignore
|
||||
const config = ref<CharacterConfig>(characterConfig);
|
||||
const trainingTab = ref(0);
|
||||
|
||||
function copy()
|
||||
{
|
||||
navigator.clipboard.writeText(JSON.stringify(config.value));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<Title>d[any] - Edition de données</Title>
|
||||
</Head>
|
||||
<TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 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>
|
||||
<TabsTrigger value="training" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Entrainement</TabsTrigger>
|
||||
<TabsTrigger value="abilities" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Compétences</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>
|
||||
</TabsList>
|
||||
<TabsContent value="peoples" class="flex-1 overflow-auto">
|
||||
</TabsContent>
|
||||
<TabsContent value="training">
|
||||
<TrainingViewer :config="config" />
|
||||
</TabsContent>
|
||||
<TabsContent value="abilities" class="flex-1 overflow-auto">
|
||||
|
||||
</TabsContent>
|
||||
<TabsContent value="spells" class="flex-1 overflow-auto">
|
||||
|
||||
</TabsContent>
|
||||
</TabsRoot>
|
||||
<!-- <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1">
|
||||
<template #label>
|
||||
<span class="font-bold text-xl">Sorts</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<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>
|
||||
<TextInput label="Nom" v-model="spellFilter.text" />
|
||||
<Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
|
||||
<Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
|
||||
<Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
|
||||
</div>
|
||||
<div class="grid gap-4 grid-cols-2">
|
||||
<div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
|
||||
@click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
|
||||
<div class="flex flex-row justify-between">
|
||||
<span class="text-lg font-bold">{{ spell.name }}</span>
|
||||
<div class="flex flex-row items-center gap-6">
|
||||
<div class="flex flex-row text-sm gap-2">
|
||||
<span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
|
||||
</div>
|
||||
<div class="flex flex-row text-sm gap-1">
|
||||
<span class="">Rang {{ spell.rank }}</span><span>/</span>
|
||||
<span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
|
||||
<span class="">{{ spell.cost }} mana</span><span>/</span>
|
||||
<span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MarkdownRenderer :content="spell.effect" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Collapsible> -->
|
||||
</template>
|
||||
@@ -1,57 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { unifySlug } from '~/shared/general.util';
|
||||
import type { Feature } from '~/types/character';
|
||||
|
||||
definePageMeta({
|
||||
guestsGoesTo: '/user/login',
|
||||
rights: ['admin', 'editor'],
|
||||
});
|
||||
|
||||
const id = unifySlug(useRouter().currentRoute.value.params.id);
|
||||
const { add } = useToast();
|
||||
const homebrew = ref<Feature>({
|
||||
id: id === 'new' ? -1 : parseInt(id, 10),
|
||||
list: [],
|
||||
});
|
||||
|
||||
if(id !== 'new')
|
||||
{
|
||||
const _homebrew = await useRequestFetch()(`/api/homebrew/${id}`);
|
||||
|
||||
if(!_homebrew) throw new Error('Donnée de personnalisation introuvable');
|
||||
|
||||
homebrew.value = Object.assign(homebrew.value, _homebrew);
|
||||
}
|
||||
|
||||
function save(force: boolean)
|
||||
{
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<Title>d[any] - Edition de {{ homebrew.name || 'nouvelle personnalisation' }}</Title>
|
||||
</Head>
|
||||
<div class="flex flex-col gap-8 align-center">
|
||||
<div class="flex flex-row gap-4 align-center justify-center">
|
||||
<div class="flex flex-row gap-4 align-center justify-center">
|
||||
<Label class="flex items-center justify-between flex-row gap-2">
|
||||
<span class="pb-1 mx-2 md:p-0">Titre</span>
|
||||
<input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
|
||||
bg-light-20 dark:bg-dark-20 outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
|
||||
border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20"
|
||||
type="text" v-model="homebrew.name">
|
||||
</Label>
|
||||
</div>
|
||||
<div class="self-center">
|
||||
<Tooltip side="right" message="Ctrl+S"><Button @click="() => save(true)">Enregistrer</Button></Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col min-w-[800px] w-[75vw] max-w-[1200px]">
|
||||
<div class="m-2 overflow-auto">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
Reference in New Issue
Block a user