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

Campaign sheet start

Browse Source
This commit is contained in:
Peaceultime
2025-11-16 23:43:54 +01:00
parent dfbb31595e
commit d8480e7366
11 changed files with 249 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
shared/campaign.util.ts
View File

@@ -1,4 +1,10 @@
import { z } from "zod/v4";
import type { User } from "~/types/auth";
import type { Campaign } from "~/types/campaign";
import { div, dom, icon, span, text } from "#shared/dom.util";
import { button, loading } from "#shared/components.util";
import { CharacterCompiler } from "#shared/character.util";
import { tooltip } from "./floating.util";
export const CampaignValidation = z.object({
id: z.number(),
@@ -6,10 +12,154 @@ export const CampaignValidation = z.object({
description: z.string()
});
class CampaignSheet
/*
const { data: campaign, error, status } = await useFetch(`/api/campaign/${id}`);
const copied = ref(false);
const stopCopy = useDebounceFn(() => copied.value = false, 5000);
async function copyLink()
{
constructor()
await navigator.clipboard.writeText(`https://d-any.com/campaign/join/${ encodeURIComponent(campaign.value!.link) }`);
copied.value = true;
stopCopy();
}
*/
type PlayerState = {
status: boolean;
statusDOM: HTMLElement;
statusTooltip: Text;
user: User;
};
function defaultPlayerState(user: User): PlayerState
{
const statusTooltip = text('Absent');
return {
status: false,
statusDOM: tooltip(span('rounded-full w-3 h-3 block border-light-50 dark:border-dark-50 border-2 border-dashed'), statusTooltip, 'right'),
statusTooltip,
user
}
}
export class CampaignSheet
{
user: ComputedRef<User | null>;
campaign?: Campaign;
container: HTMLElement = div('flex flex-1 h-full w-full items-start justify-center');
dm!: PlayerState;
constructor(id: string, user: ComputedRef<User | null>)
{
this.user = user;
const load = div("flex justify-center items-center w-full h-full", [ loading('large') ]);
this.container.replaceChildren(load);
useRequestFetch()(`/api/campaign/${id}`).then(campaign => {
if(campaign)
{
this.campaign = campaign;
this.dm = defaultPlayerState(campaign.owner);
document.title = `d[any] - Campagne ${campaign.name}`;
this.render();
load.remove();
}
else throw new Error();
}).catch((e) => {
console.error(e);
this.container.replaceChildren(div('flex flex-col items-center justify-center flex-1 h-full gap-4', [
span('text-2xl font-bold tracking-wider', 'Campagne introuvable'),
span(undefined, 'Cette campagne n\'existe pas ou est privé.'),
div('flex flex-row gap-4 justify-center items-center', [
button(text('Mes campagnes'), () => useRouter().push({ name: 'campaign' }), 'px-2 py-1'),
button(text('Créer une campagne'), () => useRouter().push({ name: 'campaign-create' }), 'px-2 py-1')
])
]));
});
}
render()
{
this.container.replaceChildren(div('flex flex-col w-full h-full items-center gap-4', [
div('flex flex-row gap-8 items-center', [
div('text-2xl font-semibold', [text(this.campaign.name)]),
div('border border-light-35 dark:border-dark-35 p-1 flex flex-row items-center gap-2', [
dom('pre', { class: 'ps-1 w-[400px] truncate' }, [ text(`https://d-any.com/campaign/join/${ encodeURIComponent(this.campaign.link) }`) ]),
button(icon('radix-icons:clipboard', { width: 16, height: 16 })),
])
]),
div('flex flex-row gap-4 flex-1', [
div('flex flex-col w-64', [
div('flex flex-row items-center gap-4', [ span('text-lg font-bold tracking-tight flex-1', 'Maitre de jeu'), span('border-b border-dashed border-light-35 dark:border-dark-35 flex-1') ]),
div('flex flex-col divide-y divide-light-25 dark:divide-dark-25', [
div('flex flex-col py-1 my-1', [
div('flex flex-row items-center justify-between', [
span(undefined, this.campaign.owner.username),
this.dm.statusDOM,
])
])
]),
div('flex flex-row items-center gap-4', [ span('text-lg font-bold tracking-tight', 'Joueurs'), span('border-b border-dashed border-light-35 dark:border-dark-35 flex-1') ]),
div('flex flex-col divide-y divide-light-25 dark:divide-dark-25',
this.campaign.members.length > 0 ? this.campaign.members.map((player: any) => div('flex flex-col py-1 my-1', [
div('flex flex-row items-center justify-between', [
span(undefined, player.member.username),
undefined,
]),
player.characters.length > 0 ? div('flex flex-col',
player.characters.map((character: any) => div('flex flex-row items-center justify-between', [
span(undefined, 'joue'), span('text-bold', character.name)
]))
) : span('text-sm italic text-light-70 dark:text-dark-70', 'Pas de personnages'),
])) : span('text-sm italic py-2 text-center', 'Invitez des joueurs via le lien'),
)
]),
div('border-l border-light-35 dark:border-dark-35'),
div('flex flex-col divide-y divide-light-25 dark:divide-dark-25 w-[800px]')
])
]));
/*
<div class="flex flex-col w-full h-full items-center gap-4" v-else-if="campaign && status === 'success'">
<div class="flex flex-row gap-4 flex-1">
<div class="flex flex-col">
<div class="flex flex-row items-center gap-4"><span class="text-lg font-bold tracking-tight flex-1">Maitre de jeu</span><span class="border-b border-dashed border-light-35 dark:border-dark-35 flex-1"></span></div>
<div class="flex flex-col divide-y divide-light-25 dark:divide-dark-25 w-64">
<div class="flex flex-col py-1 my-1">
<div class="flex flex-row items-center justify-between">
<span>{{ campaign.owner.username }}</span>
<Tooltip message="Absent" side="right" :delay="0"><span class="rounded-full w-3 h-3 block border-light-50 dark:border-dark-50 border-2 border-dashed"></span></Tooltip>
</div>
</div>
</div>
<div class="flex flex-row items-center gap-4"><span class="text-lg font-bold tracking-tight">Joueurs</span><span class="border-b border-dashed border-light-35 dark:border-dark-35 w-full"></span></div>
<div class="flex flex-col divide-y divide-light-25 dark:divide-dark-25 w-64">
<template v-if="campaign.members.length > 0">
<div v-for="player of campaign.members" class="flex flex-col py-1 my-1">
<div class="flex flex-row items-center justify-between">
<span>{{ player.member?.username }}</span>
<Tooltip message="Absent" side="right" :delay="0"><span class="rounded-full w-3 h-3 block border-light-50 dark:border-dark-50 border-2 border-dashed"></span></Tooltip>
</div>
<template v-if="player.characters.length > 0">
<div class="flex flex-col">
<div class="flex flex-row items-center justify-between" v-for="character of player.characters">
<span>joue {{ character.character.name }}</span>
</div>
</div>
</template>
<template v-else>
<span class="text-sm italic text-light-70 dark:text-dark-70">Sans personnage</span>
</template>
</div>
</template>
<template v-else>
<span class="text-sm italic py-2 text-center">Invitez des joueurs via le lien d'invitation</span>
</template>
</div>
</div>
<div class="border-l border-light-35 dark:border-dark-35"></div>
<div class="flex flex-col divide-y divide-light-25 dark:divide-dark-25 w-[800px]">
</div>
</div>
</div>
*/
}
}