156 lines
7.8 KiB
TypeScript
156 lines
7.8 KiB
TypeScript
import { z } from "zod/v4";
|
|
import type { User } from "~/types/auth";
|
|
import type { Campaign } from "~/types/campaign";
|
|
import { div, dom, icon, span, svg, text } from "#shared/dom.util";
|
|
import { button, loading, tabgroup } from "#shared/components.util";
|
|
import { CharacterCompiler } from "#shared/character.util";
|
|
import { tooltip } from "#shared/floating.util";
|
|
import markdown from "#shared/markdown.util";
|
|
import { preview } from "./proses";
|
|
import { format } from "./general.util";
|
|
|
|
export const CampaignValidation = z.object({
|
|
id: z.number(),
|
|
name: z.string().nonempty(),
|
|
description: z.string()
|
|
});
|
|
|
|
class CharacterPrinter
|
|
{
|
|
compiler?: CharacterCompiler;
|
|
container: HTMLElement = div('flex flex-col gap-2 px-1');
|
|
constructor(character: number, name: string)
|
|
{
|
|
this.container.replaceChildren(div('flex flex-row justify-between items-center', [ span('text-bold text-xl', name), loading('small')]));
|
|
useRequestFetch()(`/api/character/${character}`).then((character) => {
|
|
if(character)
|
|
{
|
|
this.compiler = new CharacterCompiler(character);
|
|
const compiled = this.compiler.compiled;
|
|
|
|
this.container.replaceChildren(div('flex flex-row justify-between items-center', [
|
|
span('text-bold text-xl', compiled.name),
|
|
div('flex flex-row gap-2 items-baseline', [ span('text-sm font-bold', 'PV'), span('text-lg', `${(compiled.health ?? 0) - (compiled.variables.health ?? 0)}/${compiled.health ?? 0}`) ])
|
|
]));
|
|
}
|
|
else throw new Error();
|
|
}).catch((e) => {
|
|
console.error(e);
|
|
this.container.replaceChildren(span('text-sm italic text-light-red dark:text-dark-red', 'Données indisponible'));
|
|
})
|
|
}
|
|
}
|
|
type PlayerState = {
|
|
status: boolean;
|
|
statusDOM: HTMLElement;
|
|
statusTooltip: Text;
|
|
user: { id: number, username: string };
|
|
};
|
|
function defaultPlayerState(user: { id: number, username: string }): 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-col flex-1 h-full w-full items-center justify-start');
|
|
dm!: PlayerState;
|
|
players!: Array<PlayerState>;
|
|
characters!: Array<CharacterPrinter>;
|
|
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);
|
|
this.players = campaign.members.map(e => defaultPlayerState(e.member));
|
|
this.characters = campaign.characters.map(e => new CharacterPrinter(e.character!.id, e.character!.name));
|
|
|
|
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')
|
|
])
|
|
]));
|
|
});
|
|
}
|
|
private render()
|
|
{
|
|
const campaign = this.campaign;
|
|
|
|
if(!campaign)
|
|
return;
|
|
|
|
this.container.replaceChildren(div('grid grid-cols-3 gap-2 py-4', [
|
|
div('flex flex-row gap-2 items-center py-2', [
|
|
tooltip(div('w-8 h-8 border border-light-40 dark:border-dark-40 box-content rounded-full'), this.dm.user.username, "bottom"),
|
|
div('border-l h-full w-0 border-light-40 dark:border-dark-40'),
|
|
div('flex flex-row gap-1', this.players.map(e => tooltip(div('w-8 h-8 border border-light-40 dark:border-dark-40 box-content rounded-full'), e.user.username, "bottom"))),
|
|
]),
|
|
div('flex flex-1 flex-col items-center justify-center gap-2', [
|
|
span('text-2xl font-serif font-bold italic', campaign.name),
|
|
span('italic text-light-70 dark:text-dark-70 text-sm', campaign.status === 'PREPARING' ? 'En préparation' : campaign.status === 'PLAYING' ? 'En jeu' : 'Archivé'),
|
|
]),
|
|
div('flex flex-1 flex-col items-center justify-center', [
|
|
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(campaign.link) }`) ]),
|
|
button(icon('radix-icons:clipboard', { width: 16, height: 16 }), () => {}, 'p-1'),
|
|
])
|
|
]),
|
|
]),
|
|
div('flex flex-row gap-4 flex-1', [
|
|
div('flex flex-col gap-2', [
|
|
div('flex flex-row items-center gap-4 w-[320px]', [ span('font-bold text-lg', 'Etat'), div('border-t border-light-40 dark:border-dark-40 border-dashed flex-1') ]),
|
|
...this.characters.map(e => e.container),
|
|
]),
|
|
div('flex h-full border-l border-light-40 dark:border-dark-40'),
|
|
div('flex flex-col w-full max-w-[900px] w-[900px]', [
|
|
tabgroup([
|
|
{ id: 'campaign', title: [ text('Campagne') ], content: () => [
|
|
markdown(campaign.public_notes, '', { tags: { a: preview } }),
|
|
] },
|
|
{ id: 'inventory', title: [ text('Inventaire') ], content: () => [
|
|
|
|
] },
|
|
{ id: 'logs', title: [ text('Logs') ], content: () => [
|
|
campaign.logs.length > 0 ? div('flex flex-row ps-12 py-4', [
|
|
div('border-l-2 border-light-40 dark:border-dark-40'),
|
|
div('flex flex-col gap-8 py-4', campaign.logs.map(e => div('flex flex-row gap-2 items-center relative -left-4', [
|
|
div('w-3 h-3 border-2 rounded-full bg-light-40 dark:border-dark-40 border-light-0 dark:border-dark-0'),
|
|
div('flex flex-row items-center', [ svg('svg', { class: ' fill-light-40 dark:fill-dark-40', attributes: { width: "6", height: "9", viewBox: "0 0 6 9" } }, [svg('path', { attributes: { d: "M0 4.5L6 -4.15L6 9L0 4.5Z" } })]), span('px-4 py-2 bg-light-25 dark:bg-dark-25 border border-light-40 dark:border-dark-40', e.details) ]),
|
|
span('italic text-sm tracking-tight text-light-70 dark:text-dark-70', format(new Date(e.timestamp), 'hh:mm:ss')),
|
|
])))
|
|
]) : div('flex py-4 px-16', [ span('italic text-light-70 dark:text-darl-70', 'Aucune entrée pour le moment') ])
|
|
] },
|
|
{ id: 'settings', title: [ text('Paramètres') ], content: () => [
|
|
|
|
] },
|
|
{ id: 'ressources', title: [ text('Ressources') ], content: () => [
|
|
|
|
] }
|
|
], { focused: 'campaign', })
|
|
])
|
|
]))
|
|
}
|
|
} |