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

Add Health, mana and armor editing

Browse Source
This commit is contained in:
Peaceultime
2025-04-26 15:49:52 +02:00
parent 3f58114091
commit 1ee895ab42
12 changed files with 544 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
pages/character/[id]/index.client.vue
View File

@@ -9,7 +9,21 @@ const characterConfig = config as CharacterConfig;
const id = useRouter().currentRoute.value.params.id;
const { user } = useUserSession();
const { add } = useToast();
const { data: character, status, error } = await useAsyncData(() => useRequestFetch()(`/api/character/${id}/compiled`));
const { data: values } = await useAsyncData(() => useRequestFetch()(`/api/character/${id}/values`));
async function updateValues()
{
await useRequestFetch()(`/api/character/${id}/values`, {
method: "post",
body: values.value,
onResponseError: (e) => {
add({ duration: 25000, timer: true, type: "success", title: "Erreur", content: e.response.statusText });
}
});
}
</script>
<template>
@@ -35,8 +49,18 @@ const { data: character, status, error } = await useAsyncData(() => useRequestFe
<span>{{ character.race === -1 ? "Race inconnue" : characterConfig.peoples[character.race].name }}</span>
</div>
<span class="h-full border-l border-light-30 dark:border-dark-30"></span>
<span>PV: {{ character.health }}</span>
<span>Mana: {{ character.mana }}</span>
<span class="flex flex-row items-center gap-2">PV: <NumberFieldRoot v-model="values.health" @change="updateValues" class="border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20
data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
<NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
</NumberFieldRoot>/ {{ character.health }}</span>
<span class="flex flex-row items-center gap-2">Mana: <NumberFieldRoot v-model="values.mana" @change="updateValues" class="border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20
data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
<NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
</NumberFieldRoot>/ {{ character.mana }}</span>
<span class="flex flex-row items-center gap-2">Armure: <NumberFieldRoot v-model="values.armor" @change="updateValues" class="border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20
data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
<NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
</NumberFieldRoot></span>
</div>
<div class="self-center">
<Tooltip side="right" message="Modifier" v-if="user && user.id === character.owner"><NuxtLink :to="{ name: 'character-id-edit', params: { id: character.id } }"><Button icon><Icon icon="radix-icons:pencil-2" /></Button></NuxtLink></Tooltip>