feat: conformite enonce - explorer, favoris, stats perso, tests, slots
Some checks failed
Deploy XIP / deploy (push) Failing after 37s
Some checks failed
Deploy XIP / deploy (push) Failing after 37s
Fonctionnel
- Backend messages : GET /api/messages/:id (detail) + recherche (q),
pagination par curseur (before/limit) avec enveloppe { items, nextCursor,
hasMore } ; le flux temps reel garde l'ancien format quand aucun parametre.
- Explorer (/explorer) : catalogue distant, recherche debouncee + annulable
(AbortController), filtre, defilement infini, etat garde (keep-alive).
- Details par id : /message/:id et /shop/p/:id (consomment route.params).
- Favoris (/favoris) : liste perso persistee en localStorage, notation
(note/rating/statut) via modale, refletee partout (bouton favori).
- Mes stats (/mes-stats) : agregats derives des favoris (note moyenne, top
pays/auteurs, statuts), auto-mis a jour, route gardee si liste vide.
- Routeur : pages secondaires en lazy-load + repli, garde beforeEnter.
Technique
- Slots : PrefSection (slot defaut + slot nomme) enveloppe les 5 sections
"Mes Persos" ; Modal (Teleport + slots).
- v-model custom : SearchBox (defineModel + debounce).
- Directive custom : v-click-outside.
- Tests Vitest : 25 tests (etat, fonctions, composants), ~86% du code metier.
- Retrait d'Ionic (inutilise). Script typecheck backend ; tsconfig @types/bun.
- Correctif type : garde stockLimit nullable dans l'achat (catalog.ts).
- README complet (URL, stack, run, tests, secrets, deploiement, mention IA).
This commit is contained in:
18
frontend/src/composables/ipColor.spec.ts
Normal file
18
frontend/src/composables/ipColor.spec.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { getIpColor, getIpColorWithPerks } from './ipColor';
|
||||
|
||||
describe('ipColor (fonction réutilisable)', () => {
|
||||
it('est déterministe : même IP → même couleur', () => {
|
||||
expect(getIpColor('1.2.3.4')).toBe(getIpColor('1.2.3.4'));
|
||||
});
|
||||
|
||||
it('renvoie une couleur hex de la palette', () => {
|
||||
expect(getIpColor('42.42.42.42')).toMatch(/^#[0-9a-f]{6}$/i);
|
||||
});
|
||||
|
||||
it('le skin gold force la couleur or, sinon palette déterministe', () => {
|
||||
expect(getIpColorWithPerks('1.2.3.4', { skin: 'gold' })).toBe('#ffdd44');
|
||||
expect(getIpColorWithPerks('1.2.3.4', {})).toBe(getIpColor('1.2.3.4'));
|
||||
expect(getIpColorWithPerks('1.2.3.4', null)).toBe(getIpColor('1.2.3.4'));
|
||||
});
|
||||
});
|
||||
@@ -1,33 +1,33 @@
|
||||
/** Couleurs assignées de façon déterministe à chaque adresse IP */
|
||||
const PALETTE = ['#7777aa', '#4499bb', '#aa4499', '#338866', '#aa6633'] as const;
|
||||
|
||||
export function getIpColor(ip: string): string {
|
||||
// djb2 hash
|
||||
let hash = 5381;
|
||||
for (let i = 0; i < ip.length; i++) {
|
||||
hash = ((hash << 5) + hash + ip.charCodeAt(i)) & 0xffffffff;
|
||||
}
|
||||
return PALETTE[Math.abs(hash) % PALETTE.length];
|
||||
}
|
||||
|
||||
// Glows are currently disabled globally; params kept for signature stability.
|
||||
export function getIpGlow(_color: string): string {
|
||||
return 'none';
|
||||
}
|
||||
|
||||
/** Gold skin (Style Doré) — overrides the djb2 palette for owners. */
|
||||
const GOLD = '#ffdd44';
|
||||
|
||||
interface PerkLike {
|
||||
skin?: 'gold';
|
||||
}
|
||||
|
||||
/** Perk-aware color: gold for Style Doré owners, else the deterministic palette. */
|
||||
export function getIpColorWithPerks(ip: string, perks?: PerkLike | null): string {
|
||||
if (perks?.skin === 'gold') return GOLD;
|
||||
return getIpColor(ip);
|
||||
}
|
||||
|
||||
export function getIpGlowWithPerks(_ip: string, _perks?: PerkLike | null): string {
|
||||
return 'none';
|
||||
}
|
||||
/** Couleurs assignées de façon déterministe à chaque adresse IP */
|
||||
const PALETTE = ['#7777aa', '#4499bb', '#aa4499', '#338866', '#aa6633'] as const;
|
||||
|
||||
export function getIpColor(ip: string): string {
|
||||
// djb2 hash
|
||||
let hash = 5381;
|
||||
for (let i = 0; i < ip.length; i++) {
|
||||
hash = ((hash << 5) + hash + ip.charCodeAt(i)) & 0xffffffff;
|
||||
}
|
||||
return PALETTE[Math.abs(hash) % PALETTE.length];
|
||||
}
|
||||
|
||||
// Glows are currently disabled globally; params kept for signature stability.
|
||||
export function getIpGlow(_color: string): string {
|
||||
return 'none';
|
||||
}
|
||||
|
||||
/** Gold skin (Style Doré) — overrides the djb2 palette for owners. */
|
||||
const GOLD = '#ffdd44';
|
||||
|
||||
interface PerkLike {
|
||||
skin?: 'gold';
|
||||
}
|
||||
|
||||
/** Perk-aware color: gold for Style Doré owners, else the deterministic palette. */
|
||||
export function getIpColorWithPerks(ip: string, perks?: PerkLike | null): string {
|
||||
if (perks?.skin === 'gold') return GOLD;
|
||||
return getIpColor(ip);
|
||||
}
|
||||
|
||||
export function getIpGlowWithPerks(_ip: string, _perks?: PerkLike | null): string {
|
||||
return 'none';
|
||||
}
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
/** Ad inventory client: fetch ads by slot, report impressions (debounced). */
|
||||
|
||||
// Shared signal: bumped when the server broadcasts an `ads` frame (e.g. a user
|
||||
// bought a Cadre de Pub). All useAds instances refetch when this changes.
|
||||
const adsRevision = ref(0);
|
||||
export function bumpAdsRevision(): void {
|
||||
adsRevision.value++;
|
||||
}
|
||||
|
||||
export interface Ad {
|
||||
id: string;
|
||||
brand: string;
|
||||
subtitle?: string | null;
|
||||
url?: string | null;
|
||||
cta?: string | null;
|
||||
icon?: string | null;
|
||||
tone: string; // blue | green | purple | casino | user
|
||||
kind: string; // band | casino
|
||||
ownerIp?: string | null;
|
||||
imageUrl?: string | null;
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
export function useAds(kind: 'band' | 'casino') {
|
||||
const ads = ref<Ad[]>([]);
|
||||
|
||||
async function fetchAds(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/ads?kind=${kind}`);
|
||||
if (res.ok) ads.value = (await res.json()) as Ad[];
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
// Refetch whenever the server signals an inventory change.
|
||||
watch(adsRevision, () => void fetchAds());
|
||||
|
||||
// Debounced impression reporting (each ad id at most once per flush).
|
||||
const pending = new Set<string>();
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
function reportImpression(id: string): void {
|
||||
pending.add(id);
|
||||
if (timer) return;
|
||||
timer = setTimeout(flush, 800);
|
||||
}
|
||||
async function flush(): Promise<void> {
|
||||
timer = null;
|
||||
const ids = [...pending];
|
||||
pending.clear();
|
||||
if (!ids.length) return;
|
||||
try {
|
||||
await fetch(`${API_URL}/api/ads/impressions`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ids }),
|
||||
});
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
return { ads, fetchAds, reportImpression };
|
||||
}
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
/** Ad inventory client: fetch ads by slot, report impressions (debounced). */
|
||||
|
||||
// Shared signal: bumped when the server broadcasts an `ads` frame (e.g. a user
|
||||
// bought a Cadre de Pub). All useAds instances refetch when this changes.
|
||||
const adsRevision = ref(0);
|
||||
export function bumpAdsRevision(): void {
|
||||
adsRevision.value++;
|
||||
}
|
||||
|
||||
export interface Ad {
|
||||
id: string;
|
||||
brand: string;
|
||||
subtitle?: string | null;
|
||||
url?: string | null;
|
||||
cta?: string | null;
|
||||
icon?: string | null;
|
||||
tone: string; // blue | green | purple | casino | user
|
||||
kind: string; // band | casino
|
||||
ownerIp?: string | null;
|
||||
imageUrl?: string | null;
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
export function useAds(kind: 'band' | 'casino') {
|
||||
const ads = ref<Ad[]>([]);
|
||||
|
||||
async function fetchAds(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/ads?kind=${kind}`);
|
||||
if (res.ok) ads.value = (await res.json()) as Ad[];
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
// Refetch whenever the server signals an inventory change.
|
||||
watch(adsRevision, () => void fetchAds());
|
||||
|
||||
// Debounced impression reporting (each ad id at most once per flush).
|
||||
const pending = new Set<string>();
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
function reportImpression(id: string): void {
|
||||
pending.add(id);
|
||||
if (timer) return;
|
||||
timer = setTimeout(flush, 800);
|
||||
}
|
||||
async function flush(): Promise<void> {
|
||||
timer = null;
|
||||
const ids = [...pending];
|
||||
pending.clear();
|
||||
if (!ids.length) return;
|
||||
try {
|
||||
await fetch(`${API_URL}/api/ads/impressions`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ids }),
|
||||
});
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
return { ads, fetchAds, reportImpression };
|
||||
}
|
||||
|
||||
@@ -1,86 +1,86 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
/**
|
||||
* Global audio alert (paid, consumable). On an `alert` WS frame, every tab plays
|
||||
* the sound at full volume for at most maxDurationMs. If a custom mp3 URL is
|
||||
* provided it's played; otherwise a synthesized siren is used (WebAudio).
|
||||
*
|
||||
* Browser autoplay policies block sound before a user gesture — we unlock the
|
||||
* AudioContext on the first click anywhere.
|
||||
*/
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
let audioCtx: AudioContext | null = null;
|
||||
const lastFiredAt = ref(0);
|
||||
|
||||
function unlock(): void {
|
||||
if (!audioCtx) {
|
||||
const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
|
||||
if (AC) audioCtx = new AC();
|
||||
}
|
||||
if (audioCtx && audioCtx.state === 'suspended') void audioCtx.resume();
|
||||
}
|
||||
|
||||
// Unlock on the first interaction.
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('pointerdown', unlock, { once: false });
|
||||
}
|
||||
|
||||
function playSiren(maxDurationMs: number): void {
|
||||
if (!audioCtx) return;
|
||||
const dur = Math.min(maxDurationMs, 5000) / 1000;
|
||||
const now = audioCtx.currentTime;
|
||||
const osc = audioCtx.createOscillator();
|
||||
const gain = audioCtx.createGain();
|
||||
osc.type = 'sawtooth';
|
||||
// Warble between two pitches like an air-raid siren.
|
||||
osc.frequency.setValueAtTime(440, now);
|
||||
for (let t = 0; t < dur; t += 0.5) {
|
||||
osc.frequency.linearRampToValueAtTime(880, now + t + 0.25);
|
||||
osc.frequency.linearRampToValueAtTime(440, now + t + 0.5);
|
||||
}
|
||||
gain.gain.setValueAtTime(1, now); // volume à fond
|
||||
gain.gain.setValueAtTime(1, now + dur - 0.05);
|
||||
gain.gain.linearRampToValueAtTime(0, now + dur);
|
||||
osc.connect(gain).connect(audioCtx.destination);
|
||||
osc.start(now);
|
||||
osc.stop(now + dur);
|
||||
}
|
||||
|
||||
function playMp3(url: string, maxDurationMs: number): void {
|
||||
const audio = new Audio(url);
|
||||
audio.volume = 1;
|
||||
void audio.play().catch(() => { /* autoplay blocked */ });
|
||||
setTimeout(() => { audio.pause(); audio.currentTime = 0; }, Math.min(maxDurationMs, 5000));
|
||||
}
|
||||
|
||||
/** Handle an incoming `alert` frame. */
|
||||
export function handleAlertFrame(data: { soundUrl?: string; maxDurationMs?: number }): void {
|
||||
lastFiredAt.value = Date.now();
|
||||
const max = data.maxDurationMs ?? 5000;
|
||||
unlock();
|
||||
if (data.soundUrl) playMp3(data.soundUrl, max);
|
||||
else playSiren(max);
|
||||
}
|
||||
|
||||
export function useAlert() {
|
||||
async function fireAlert(soundUrl?: string): Promise<{ ok: boolean; error?: string }> {
|
||||
unlock();
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/alert`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ soundUrl }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}));
|
||||
return { ok: false, error: d.error || 'Alerte impossible' };
|
||||
}
|
||||
return { ok: true };
|
||||
} catch {
|
||||
return { ok: false, error: 'Réseau indisponible' };
|
||||
}
|
||||
}
|
||||
return { fireAlert };
|
||||
}
|
||||
import { ref } from 'vue';
|
||||
|
||||
/**
|
||||
* Global audio alert (paid, consumable). On an `alert` WS frame, every tab plays
|
||||
* the sound at full volume for at most maxDurationMs. If a custom mp3 URL is
|
||||
* provided it's played; otherwise a synthesized siren is used (WebAudio).
|
||||
*
|
||||
* Browser autoplay policies block sound before a user gesture — we unlock the
|
||||
* AudioContext on the first click anywhere.
|
||||
*/
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
let audioCtx: AudioContext | null = null;
|
||||
const lastFiredAt = ref(0);
|
||||
|
||||
function unlock(): void {
|
||||
if (!audioCtx) {
|
||||
const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
|
||||
if (AC) audioCtx = new AC();
|
||||
}
|
||||
if (audioCtx && audioCtx.state === 'suspended') void audioCtx.resume();
|
||||
}
|
||||
|
||||
// Unlock on the first interaction.
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('pointerdown', unlock, { once: false });
|
||||
}
|
||||
|
||||
function playSiren(maxDurationMs: number): void {
|
||||
if (!audioCtx) return;
|
||||
const dur = Math.min(maxDurationMs, 5000) / 1000;
|
||||
const now = audioCtx.currentTime;
|
||||
const osc = audioCtx.createOscillator();
|
||||
const gain = audioCtx.createGain();
|
||||
osc.type = 'sawtooth';
|
||||
// Warble between two pitches like an air-raid siren.
|
||||
osc.frequency.setValueAtTime(440, now);
|
||||
for (let t = 0; t < dur; t += 0.5) {
|
||||
osc.frequency.linearRampToValueAtTime(880, now + t + 0.25);
|
||||
osc.frequency.linearRampToValueAtTime(440, now + t + 0.5);
|
||||
}
|
||||
gain.gain.setValueAtTime(1, now); // volume à fond
|
||||
gain.gain.setValueAtTime(1, now + dur - 0.05);
|
||||
gain.gain.linearRampToValueAtTime(0, now + dur);
|
||||
osc.connect(gain).connect(audioCtx.destination);
|
||||
osc.start(now);
|
||||
osc.stop(now + dur);
|
||||
}
|
||||
|
||||
function playMp3(url: string, maxDurationMs: number): void {
|
||||
const audio = new Audio(url);
|
||||
audio.volume = 1;
|
||||
void audio.play().catch(() => { /* autoplay blocked */ });
|
||||
setTimeout(() => { audio.pause(); audio.currentTime = 0; }, Math.min(maxDurationMs, 5000));
|
||||
}
|
||||
|
||||
/** Handle an incoming `alert` frame. */
|
||||
export function handleAlertFrame(data: { soundUrl?: string; maxDurationMs?: number }): void {
|
||||
lastFiredAt.value = Date.now();
|
||||
const max = data.maxDurationMs ?? 5000;
|
||||
unlock();
|
||||
if (data.soundUrl) playMp3(data.soundUrl, max);
|
||||
else playSiren(max);
|
||||
}
|
||||
|
||||
export function useAlert() {
|
||||
async function fireAlert(soundUrl?: string): Promise<{ ok: boolean; error?: string }> {
|
||||
unlock();
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/alert`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ soundUrl }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}));
|
||||
return { ok: false, error: d.error || 'Alerte impossible' };
|
||||
}
|
||||
return { ok: true };
|
||||
} catch {
|
||||
return { ok: false, error: 'Réseau indisponible' };
|
||||
}
|
||||
}
|
||||
return { fireAlert };
|
||||
}
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
/** Upload helper: posts a file to /api/uploads, returns its metadata. */
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
export interface UploadedAttachment {
|
||||
id: string;
|
||||
filename: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export type UploadResult =
|
||||
| { ok: true; attachment: UploadedAttachment }
|
||||
| { ok: false; error: string };
|
||||
|
||||
export function useAttachments() {
|
||||
async function uploadFile(file: File): Promise<UploadResult> {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/uploads`, { method: 'POST', body: form });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) return { ok: false, error: data.error || 'Upload refusé' };
|
||||
return { ok: true, attachment: data as UploadedAttachment };
|
||||
} catch {
|
||||
return { ok: false, error: 'Réseau indisponible' };
|
||||
}
|
||||
}
|
||||
|
||||
/** Human file size. */
|
||||
function kb(bytes: number): string {
|
||||
if (bytes >= 1_000_000) return (bytes / 1_000_000).toFixed(1) + ' Mo';
|
||||
if (bytes >= 1000) return Math.round(bytes / 1000) + ' Ko';
|
||||
return bytes + ' o';
|
||||
}
|
||||
|
||||
/** URL to fetch/download an attachment. */
|
||||
function urlFor(id: string): string {
|
||||
return `${API_URL}/api/uploads/${id}`;
|
||||
}
|
||||
|
||||
return { uploadFile, kb, urlFor };
|
||||
}
|
||||
/** Upload helper: posts a file to /api/uploads, returns its metadata. */
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
export interface UploadedAttachment {
|
||||
id: string;
|
||||
filename: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export type UploadResult =
|
||||
| { ok: true; attachment: UploadedAttachment }
|
||||
| { ok: false; error: string };
|
||||
|
||||
export function useAttachments() {
|
||||
async function uploadFile(file: File): Promise<UploadResult> {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/uploads`, { method: 'POST', body: form });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) return { ok: false, error: data.error || 'Upload refusé' };
|
||||
return { ok: true, attachment: data as UploadedAttachment };
|
||||
} catch {
|
||||
return { ok: false, error: 'Réseau indisponible' };
|
||||
}
|
||||
}
|
||||
|
||||
/** Human file size. */
|
||||
function kb(bytes: number): string {
|
||||
if (bytes >= 1_000_000) return (bytes / 1_000_000).toFixed(1) + ' Mo';
|
||||
if (bytes >= 1000) return Math.round(bytes / 1000) + ' Ko';
|
||||
return bytes + ' o';
|
||||
}
|
||||
|
||||
/** URL to fetch/download an attachment. */
|
||||
function urlFor(id: string): string {
|
||||
return `${API_URL}/api/uploads/${id}`;
|
||||
}
|
||||
|
||||
return { uploadFile, kb, urlFor };
|
||||
}
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
/**
|
||||
* Global singleton for the right-click style context menu.
|
||||
* Any component calls openContextMenu() to display the floating picker,
|
||||
* and StyleContextMenu.vue (mounted once in App.vue) renders it.
|
||||
*/
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export interface ContextMenuItem {
|
||||
value: string;
|
||||
label: string;
|
||||
swatch?: string; // optional color swatch dot
|
||||
emoji?: string; // optional emoji shown instead of swatch
|
||||
isHeader?: boolean; // non-interactive section heading
|
||||
checked?: boolean; // explicit checkmark (for multi-group menus)
|
||||
}
|
||||
|
||||
interface MenuState {
|
||||
visible: boolean;
|
||||
x: number;
|
||||
y: number;
|
||||
title: string;
|
||||
items: ContextMenuItem[];
|
||||
current: string;
|
||||
onSelect: (value: string) => void;
|
||||
}
|
||||
|
||||
const state = reactive<MenuState>({
|
||||
visible: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
title: '',
|
||||
items: [],
|
||||
current: '',
|
||||
onSelect: () => {},
|
||||
});
|
||||
|
||||
export function openContextMenu(opts: {
|
||||
x: number;
|
||||
y: number;
|
||||
title: string;
|
||||
items: ContextMenuItem[];
|
||||
current: string;
|
||||
onSelect: (value: string) => void;
|
||||
}): void {
|
||||
state.visible = true;
|
||||
state.x = opts.x;
|
||||
state.y = opts.y;
|
||||
state.title = opts.title;
|
||||
state.items = opts.items;
|
||||
state.current = opts.current;
|
||||
state.onSelect = opts.onSelect;
|
||||
}
|
||||
|
||||
export function closeContextMenu(): void {
|
||||
state.visible = false;
|
||||
}
|
||||
|
||||
export function useContextMenu() {
|
||||
return { state };
|
||||
}
|
||||
/**
|
||||
* Global singleton for the right-click style context menu.
|
||||
* Any component calls openContextMenu() to display the floating picker,
|
||||
* and StyleContextMenu.vue (mounted once in App.vue) renders it.
|
||||
*/
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export interface ContextMenuItem {
|
||||
value: string;
|
||||
label: string;
|
||||
swatch?: string; // optional color swatch dot
|
||||
emoji?: string; // optional emoji shown instead of swatch
|
||||
isHeader?: boolean; // non-interactive section heading
|
||||
checked?: boolean; // explicit checkmark (for multi-group menus)
|
||||
}
|
||||
|
||||
interface MenuState {
|
||||
visible: boolean;
|
||||
x: number;
|
||||
y: number;
|
||||
title: string;
|
||||
items: ContextMenuItem[];
|
||||
current: string;
|
||||
onSelect: (value: string) => void;
|
||||
}
|
||||
|
||||
const state = reactive<MenuState>({
|
||||
visible: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
title: '',
|
||||
items: [],
|
||||
current: '',
|
||||
onSelect: () => {},
|
||||
});
|
||||
|
||||
export function openContextMenu(opts: {
|
||||
x: number;
|
||||
y: number;
|
||||
title: string;
|
||||
items: ContextMenuItem[];
|
||||
current: string;
|
||||
onSelect: (value: string) => void;
|
||||
}): void {
|
||||
state.visible = true;
|
||||
state.x = opts.x;
|
||||
state.y = opts.y;
|
||||
state.title = opts.title;
|
||||
state.items = opts.items;
|
||||
state.current = opts.current;
|
||||
state.onSelect = opts.onSelect;
|
||||
}
|
||||
|
||||
export function closeContextMenu(): void {
|
||||
state.visible = false;
|
||||
}
|
||||
|
||||
export function useContextMenu() {
|
||||
return { state };
|
||||
}
|
||||
|
||||
@@ -1,80 +1,80 @@
|
||||
/**
|
||||
* Viewer-side visual customisations, persisted in localStorage.
|
||||
* None of these affect other users — they're purely local display overrides.
|
||||
*/
|
||||
import { reactive, watch } from 'vue';
|
||||
|
||||
const STORAGE_KEY = 'xip_custom_styles_v1';
|
||||
|
||||
// ── Preset catalogues ────────────────────────────────────────────────────────
|
||||
|
||||
export const SEND_BUTTON_PRESETS = {
|
||||
default: { bg: '#004488', color: '#00ddff', radius: '50%', label: 'Cyan (défaut)' },
|
||||
green: { bg: '#1a4a1a', color: '#00ee77', radius: '50%', label: 'Vert' },
|
||||
purple: { bg: '#2a1040', color: '#cc44ff', radius: '50%', label: 'Violet' },
|
||||
red: { bg: '#3a0a0a', color: '#ff5533', radius: '50%', label: 'Rouge' },
|
||||
square: { bg: '#1a1a1a', color: '#ffffff', radius: '4px', label: 'Blanc carré' },
|
||||
} as const;
|
||||
export type SendButtonKey = keyof typeof SEND_BUTTON_PRESETS;
|
||||
|
||||
export const AD_FRAME_PRESETS = {
|
||||
default: { border: '1px solid #1e1e2a', bg: '#121218', label: 'Défaut' },
|
||||
neon: { border: '1px solid #00ddff66', bg: '#0a1220', label: 'Néon bleu' },
|
||||
gold: { border: '1px solid #ffdd4466', bg: '#141208', label: 'Or' },
|
||||
minimal: { border: '1px solid transparent', bg: '#0c0c10', label: 'Minimal' },
|
||||
} as const;
|
||||
export type AdFrameKey = keyof typeof AD_FRAME_PRESETS;
|
||||
|
||||
export const IP_COLOR_OPTIONS: { value: string; label: string; swatch?: string }[] = [
|
||||
{ value: 'auto', label: 'Auto (palette)' },
|
||||
{ value: '#00ddff', label: 'Cyan', swatch: '#00ddff' },
|
||||
{ value: '#ff00cc', label: 'Rose', swatch: '#ff00cc' },
|
||||
{ value: '#00ee77', label: 'Vert', swatch: '#00ee77' },
|
||||
{ value: '#ffdd44', label: 'Or', swatch: '#ffdd44' },
|
||||
{ value: '#ff5533', label: 'Rouge', swatch: '#ff5533' },
|
||||
{ value: '#ffffff', label: 'Blanc', swatch: '#ffffff' },
|
||||
];
|
||||
|
||||
export const PET_OPTIONS: { value: string; label: string }[] = [
|
||||
{ value: '', label: 'Aucun' },
|
||||
{ value: '🐱', label: '🐱 Chat' },
|
||||
{ value: '🐶', label: '🐶 Chien' },
|
||||
{ value: '✨', label: '✨ Sparkle' },
|
||||
{ value: '🔥', label: '🔥 Feu' },
|
||||
{ value: '👾', label: '👾 Ghost' },
|
||||
{ value: '⚡', label: '⚡ Éclair' },
|
||||
{ value: '🌙', label: '🌙 Lune' },
|
||||
];
|
||||
|
||||
// ── Preferences shape ────────────────────────────────────────────────────────
|
||||
|
||||
export interface CustomStylePrefs {
|
||||
sendButton: SendButtonKey;
|
||||
sendSkin: string; // send-skin product id, or '' for default arrow
|
||||
adFrame: AdFrameKey;
|
||||
ipColors: Record<string, string>; // ip → hex or 'auto'
|
||||
ipPets: Record<string, string>; // ip → emoji or ''
|
||||
chatBgUrl: string; // URL or '' for no background
|
||||
}
|
||||
|
||||
function defaults(): CustomStylePrefs {
|
||||
return { sendButton: 'default', sendSkin: '', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
|
||||
}
|
||||
|
||||
function load(): CustomStylePrefs {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (raw) return { ...defaults(), ...JSON.parse(raw) };
|
||||
} catch { /* ignore */ }
|
||||
return defaults();
|
||||
}
|
||||
|
||||
const prefs = reactive<CustomStylePrefs>(load());
|
||||
|
||||
watch(prefs, (v) => {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(v));
|
||||
}, { deep: true });
|
||||
|
||||
export function useCustomStyles() {
|
||||
return { prefs };
|
||||
}
|
||||
/**
|
||||
* Viewer-side visual customisations, persisted in localStorage.
|
||||
* None of these affect other users — they're purely local display overrides.
|
||||
*/
|
||||
import { reactive, watch } from 'vue';
|
||||
|
||||
const STORAGE_KEY = 'xip_custom_styles_v1';
|
||||
|
||||
// ── Preset catalogues ────────────────────────────────────────────────────────
|
||||
|
||||
export const SEND_BUTTON_PRESETS = {
|
||||
default: { bg: '#004488', color: '#00ddff', radius: '50%', label: 'Cyan (défaut)' },
|
||||
green: { bg: '#1a4a1a', color: '#00ee77', radius: '50%', label: 'Vert' },
|
||||
purple: { bg: '#2a1040', color: '#cc44ff', radius: '50%', label: 'Violet' },
|
||||
red: { bg: '#3a0a0a', color: '#ff5533', radius: '50%', label: 'Rouge' },
|
||||
square: { bg: '#1a1a1a', color: '#ffffff', radius: '4px', label: 'Blanc carré' },
|
||||
} as const;
|
||||
export type SendButtonKey = keyof typeof SEND_BUTTON_PRESETS;
|
||||
|
||||
export const AD_FRAME_PRESETS = {
|
||||
default: { border: '1px solid #1e1e2a', bg: '#121218', label: 'Défaut' },
|
||||
neon: { border: '1px solid #00ddff66', bg: '#0a1220', label: 'Néon bleu' },
|
||||
gold: { border: '1px solid #ffdd4466', bg: '#141208', label: 'Or' },
|
||||
minimal: { border: '1px solid transparent', bg: '#0c0c10', label: 'Minimal' },
|
||||
} as const;
|
||||
export type AdFrameKey = keyof typeof AD_FRAME_PRESETS;
|
||||
|
||||
export const IP_COLOR_OPTIONS: { value: string; label: string; swatch?: string }[] = [
|
||||
{ value: 'auto', label: 'Auto (palette)' },
|
||||
{ value: '#00ddff', label: 'Cyan', swatch: '#00ddff' },
|
||||
{ value: '#ff00cc', label: 'Rose', swatch: '#ff00cc' },
|
||||
{ value: '#00ee77', label: 'Vert', swatch: '#00ee77' },
|
||||
{ value: '#ffdd44', label: 'Or', swatch: '#ffdd44' },
|
||||
{ value: '#ff5533', label: 'Rouge', swatch: '#ff5533' },
|
||||
{ value: '#ffffff', label: 'Blanc', swatch: '#ffffff' },
|
||||
];
|
||||
|
||||
export const PET_OPTIONS: { value: string; label: string }[] = [
|
||||
{ value: '', label: 'Aucun' },
|
||||
{ value: '🐱', label: '🐱 Chat' },
|
||||
{ value: '🐶', label: '🐶 Chien' },
|
||||
{ value: '✨', label: '✨ Sparkle' },
|
||||
{ value: '🔥', label: '🔥 Feu' },
|
||||
{ value: '👾', label: '👾 Ghost' },
|
||||
{ value: '⚡', label: '⚡ Éclair' },
|
||||
{ value: '🌙', label: '🌙 Lune' },
|
||||
];
|
||||
|
||||
// ── Preferences shape ────────────────────────────────────────────────────────
|
||||
|
||||
export interface CustomStylePrefs {
|
||||
sendButton: SendButtonKey;
|
||||
sendSkin: string; // send-skin product id, or '' for default arrow
|
||||
adFrame: AdFrameKey;
|
||||
ipColors: Record<string, string>; // ip → hex or 'auto'
|
||||
ipPets: Record<string, string>; // ip → emoji or ''
|
||||
chatBgUrl: string; // URL or '' for no background
|
||||
}
|
||||
|
||||
function defaults(): CustomStylePrefs {
|
||||
return { sendButton: 'default', sendSkin: '', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
|
||||
}
|
||||
|
||||
function load(): CustomStylePrefs {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (raw) return { ...defaults(), ...JSON.parse(raw) };
|
||||
} catch { /* ignore */ }
|
||||
return defaults();
|
||||
}
|
||||
|
||||
const prefs = reactive<CustomStylePrefs>(load());
|
||||
|
||||
watch(prefs, (v) => {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(v));
|
||||
}, { deep: true });
|
||||
|
||||
export function useCustomStyles() {
|
||||
return { prefs };
|
||||
}
|
||||
|
||||
26
frontend/src/composables/useDebounce.spec.ts
Normal file
26
frontend/src/composables/useDebounce.spec.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { debounce } from './useDebounce';
|
||||
|
||||
describe('debounce (fonction réutilisable)', () => {
|
||||
beforeEach(() => vi.useFakeTimers());
|
||||
afterEach(() => vi.useRealTimers());
|
||||
|
||||
it('ne déclenche qu’une fois après la pause', () => {
|
||||
const spy = vi.fn();
|
||||
const d = debounce(spy, 300);
|
||||
d('a'); d('b'); d('c');
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
vi.advanceTimersByTime(300);
|
||||
expect(spy).toHaveBeenCalledTimes(1);
|
||||
expect(spy).toHaveBeenCalledWith('c'); // garde le dernier appel
|
||||
});
|
||||
|
||||
it('cancel() annule l’appel en attente', () => {
|
||||
const spy = vi.fn();
|
||||
const d = debounce(spy, 200);
|
||||
d('x');
|
||||
d.cancel();
|
||||
vi.advanceTimersByTime(500);
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
33
frontend/src/composables/useDebounce.ts
Normal file
33
frontend/src/composables/useDebounce.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* Petit utilitaire de debounce réutilisable : retourne une version de `fn` qui
|
||||
* n'est appelée qu'après `delay` ms sans nouvel appel. Expose `.cancel()` pour
|
||||
* annuler un appel en attente (utile au démontage d'un composant).
|
||||
*/
|
||||
export interface Debounced<A extends unknown[]> {
|
||||
(...args: A): void;
|
||||
cancel(): void;
|
||||
}
|
||||
|
||||
export function debounce<A extends unknown[]>(
|
||||
fn: (...args: A) => void,
|
||||
delay = 300,
|
||||
): Debounced<A> {
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const debounced = (...args: A): void => {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
timer = null;
|
||||
fn(...args);
|
||||
}, delay);
|
||||
};
|
||||
|
||||
debounced.cancel = (): void => {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
return debounced;
|
||||
}
|
||||
71
frontend/src/composables/useFavorites.spec.ts
Normal file
71
frontend/src/composables/useFavorites.spec.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { useFavorites, type FavoriteSource } from './useFavorites';
|
||||
|
||||
const sample: FavoriteSource = {
|
||||
id: 'm1',
|
||||
content: 'Bonjour le monde',
|
||||
authorIp: '1.2.3.4',
|
||||
createdAt: '2026-01-01T10:00:00.000Z',
|
||||
authorGeo: { country: 'France', countryCode: 'FR', city: 'Paris' },
|
||||
};
|
||||
|
||||
describe('useFavorites (logique d’état)', () => {
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
useFavorites().clear();
|
||||
});
|
||||
|
||||
it('ajoute et retire un favori (toggle)', () => {
|
||||
const fav = useFavorites();
|
||||
expect(fav.isFav('m1')).toBe(false);
|
||||
|
||||
const added = fav.toggle(sample);
|
||||
expect(added).toBe(true);
|
||||
expect(fav.isFav('m1')).toBe(true);
|
||||
expect(fav.all.value).toHaveLength(1);
|
||||
|
||||
const removed = fav.toggle(sample);
|
||||
expect(removed).toBe(false);
|
||||
expect(fav.isFav('m1')).toBe(false);
|
||||
expect(fav.all.value).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('stocke un snapshot avec valeurs par défaut', () => {
|
||||
const fav = useFavorites();
|
||||
fav.toggle(sample);
|
||||
const item = fav.all.value[0];
|
||||
expect(item.content).toBe('Bonjour le monde');
|
||||
expect(item.authorGeo?.countryCode).toBe('FR');
|
||||
expect(item.rating).toBe(0);
|
||||
expect(item.status).toBe('a-lire');
|
||||
});
|
||||
|
||||
it('édite note / rating / statut', () => {
|
||||
const fav = useFavorites();
|
||||
fav.toggle(sample);
|
||||
fav.setNote('m1', 'super message');
|
||||
fav.setRating('m1', 4);
|
||||
fav.setStatus('m1', 'top');
|
||||
const item = fav.all.value[0];
|
||||
expect(item.note).toBe('super message');
|
||||
expect(item.rating).toBe(4);
|
||||
expect(item.status).toBe('top');
|
||||
});
|
||||
|
||||
it('borne la note entre 0 et 5', () => {
|
||||
const fav = useFavorites();
|
||||
fav.toggle(sample);
|
||||
fav.setRating('m1', 9);
|
||||
expect(fav.all.value[0].rating).toBe(5);
|
||||
fav.setRating('m1', -3);
|
||||
expect(fav.all.value[0].rating).toBe(0);
|
||||
});
|
||||
|
||||
it('persiste dans localStorage', () => {
|
||||
const fav = useFavorites();
|
||||
fav.toggle(sample);
|
||||
const raw = localStorage.getItem('xip-favoris');
|
||||
expect(raw).toBeTruthy();
|
||||
expect(JSON.parse(raw!).items[0].id).toBe('m1');
|
||||
});
|
||||
});
|
||||
124
frontend/src/composables/useFavorites.ts
Normal file
124
frontend/src/composables/useFavorites.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
import { reactive, computed } from 'vue';
|
||||
|
||||
/**
|
||||
* Liste personnelle « Favoris » — état applicatif centralisé (singleton
|
||||
* module-level), persisté en localStorage, sans serveur. Chaque favori est un
|
||||
* SNAPSHOT du message au moment de l'ajout : la page Favoris et la synthèse
|
||||
* restent valides même si le message a quitté le flux temps réel.
|
||||
*/
|
||||
|
||||
const STORAGE_KEY = 'xip-favoris';
|
||||
|
||||
export type FavStatus = 'a-lire' | 'lu' | 'top';
|
||||
|
||||
export interface FavoriteGeo {
|
||||
country: string;
|
||||
countryCode: string;
|
||||
city: string;
|
||||
}
|
||||
|
||||
/** Données minimales d'un message dont on a besoin pour le favori. */
|
||||
export interface FavoriteSource {
|
||||
id: string;
|
||||
content: string;
|
||||
authorIp: string;
|
||||
createdAt: string;
|
||||
authorGeo?: FavoriteGeo | null;
|
||||
}
|
||||
|
||||
export interface FavoriteItem extends FavoriteSource {
|
||||
note: string; // annotation libre
|
||||
rating: number; // 0–5
|
||||
status: FavStatus;
|
||||
addedAt: string; // ISO
|
||||
}
|
||||
|
||||
interface FavState {
|
||||
items: FavoriteItem[];
|
||||
}
|
||||
|
||||
function load(): FavState {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (raw) {
|
||||
const parsed = JSON.parse(raw);
|
||||
if (Array.isArray(parsed?.items)) return { items: parsed.items };
|
||||
}
|
||||
} catch {
|
||||
/* ignore corrupted storage */
|
||||
}
|
||||
return { items: [] };
|
||||
}
|
||||
|
||||
const state = reactive<FavState>(load());
|
||||
|
||||
function persist(): void {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
|
||||
} catch {
|
||||
/* quota / unavailable — non-fatal */
|
||||
}
|
||||
}
|
||||
|
||||
function find(id: string): FavoriteItem | undefined {
|
||||
return state.items.find((f) => f.id === id);
|
||||
}
|
||||
|
||||
export function useFavorites() {
|
||||
const all = computed(() => state.items);
|
||||
const count = computed(() => state.items.length);
|
||||
|
||||
function isFav(id: string): boolean {
|
||||
return state.items.some((f) => f.id === id);
|
||||
}
|
||||
|
||||
/** Ajoute le message en favori s'il ne l'est pas, sinon le retire. Retourne le nouvel état. */
|
||||
function toggle(msg: FavoriteSource): boolean {
|
||||
const existing = find(msg.id);
|
||||
if (existing) {
|
||||
state.items = state.items.filter((f) => f.id !== msg.id);
|
||||
persist();
|
||||
return false;
|
||||
}
|
||||
state.items.push({
|
||||
id: msg.id,
|
||||
content: msg.content,
|
||||
authorIp: msg.authorIp,
|
||||
createdAt: msg.createdAt,
|
||||
authorGeo: msg.authorGeo ?? null,
|
||||
note: '',
|
||||
rating: 0,
|
||||
status: 'a-lire',
|
||||
addedAt: new Date().toISOString(),
|
||||
});
|
||||
persist();
|
||||
return true;
|
||||
}
|
||||
|
||||
function remove(id: string): void {
|
||||
state.items = state.items.filter((f) => f.id !== id);
|
||||
persist();
|
||||
}
|
||||
|
||||
function setNote(id: string, note: string): void {
|
||||
const f = find(id);
|
||||
if (f) { f.note = note; persist(); }
|
||||
}
|
||||
|
||||
function setRating(id: string, rating: number): void {
|
||||
const f = find(id);
|
||||
if (f) { f.rating = Math.max(0, Math.min(5, Math.round(rating))); persist(); }
|
||||
}
|
||||
|
||||
function setStatus(id: string, status: FavStatus): void {
|
||||
const f = find(id);
|
||||
if (f) { f.status = status; persist(); }
|
||||
}
|
||||
|
||||
function clear(): void {
|
||||
state.items = [];
|
||||
persist();
|
||||
}
|
||||
|
||||
return { all, count, isFav, toggle, remove, setNote, setRating, setStatus, clear };
|
||||
}
|
||||
@@ -1,62 +1,62 @@
|
||||
import { type GeoInfo } from '@/composables/useMessages';
|
||||
import { getIpColorWithPerks, getIpGlowWithPerks, getIpGlow } from '@/composables/ipColor';
|
||||
import { usePerks } from '@/composables/usePerks';
|
||||
import { useCustomStyles } from '@/composables/useCustomStyles';
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
|
||||
export function useMessageItem() {
|
||||
const { perksFor } = usePerks();
|
||||
const { myPerks } = useMyPerks();
|
||||
const { prefs } = useCustomStyles();
|
||||
|
||||
function perksOf(m: { authorIp: string; authorPerks?: any }) {
|
||||
return m.authorPerks ?? perksFor(m.authorIp);
|
||||
}
|
||||
|
||||
function ipStyle(m: { authorIp: string; authorPerks?: any }) {
|
||||
const ip = m.authorIp;
|
||||
const override = prefs.ipColors[ip];
|
||||
if (override && override !== 'auto') {
|
||||
return { color: override, textShadow: getIpGlow(override) };
|
||||
}
|
||||
const p = perksOf(m);
|
||||
return { color: getIpColorWithPerks(ip, p), textShadow: getIpGlowWithPerks(ip, p) };
|
||||
}
|
||||
|
||||
function petsLeft(m: { authorIp: string; authorPerks?: any }) {
|
||||
const ip = m.authorIp;
|
||||
if (ip in prefs.ipPets) return prefs.ipPets[ip];
|
||||
return (perksOf(m)?.pets ?? [])
|
||||
.filter((x: any) => x.position === 'left' || x.position === 'both')
|
||||
.map((x: any) => x.char).join('');
|
||||
}
|
||||
|
||||
function petsRight(m: { authorIp: string; authorPerks?: any }) {
|
||||
const ip = m.authorIp;
|
||||
if (ip in prefs.ipPets) return '';
|
||||
return (perksOf(m)?.pets ?? [])
|
||||
.filter((x: any) => x.position === 'right' || x.position === 'both')
|
||||
.map((x: any) => x.char).join('');
|
||||
}
|
||||
|
||||
function fmt(date: string) {
|
||||
return new Date(date).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
function geoLabel(geo?: GeoInfo | null): string {
|
||||
if (!geo) return '';
|
||||
if (!geo.countryCode) return 'Local';
|
||||
const place = geo.city || geo.country;
|
||||
if (geo.lat != null && geo.lon != null) {
|
||||
return `${place} · ${geo.lat.toFixed(4)}, ${geo.lon.toFixed(4)}`;
|
||||
}
|
||||
return place;
|
||||
}
|
||||
|
||||
function geoLink(geo?: GeoInfo | null): string {
|
||||
if (!geo || geo.lat == null || geo.lon == null) return 'https://maps.google.com';
|
||||
return `https://www.google.com/maps/search/?api=1&query=${geo.lat},${geo.lon}`;
|
||||
}
|
||||
|
||||
return { perksOf, ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs };
|
||||
}
|
||||
import { type GeoInfo } from '@/composables/useMessages';
|
||||
import { getIpColorWithPerks, getIpGlowWithPerks, getIpGlow } from '@/composables/ipColor';
|
||||
import { usePerks } from '@/composables/usePerks';
|
||||
import { useCustomStyles } from '@/composables/useCustomStyles';
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
|
||||
export function useMessageItem() {
|
||||
const { perksFor } = usePerks();
|
||||
const { myPerks } = useMyPerks();
|
||||
const { prefs } = useCustomStyles();
|
||||
|
||||
function perksOf(m: { authorIp: string; authorPerks?: any }) {
|
||||
return m.authorPerks ?? perksFor(m.authorIp);
|
||||
}
|
||||
|
||||
function ipStyle(m: { authorIp: string; authorPerks?: any }) {
|
||||
const ip = m.authorIp;
|
||||
const override = prefs.ipColors[ip];
|
||||
if (override && override !== 'auto') {
|
||||
return { color: override, textShadow: getIpGlow(override) };
|
||||
}
|
||||
const p = perksOf(m);
|
||||
return { color: getIpColorWithPerks(ip, p), textShadow: getIpGlowWithPerks(ip, p) };
|
||||
}
|
||||
|
||||
function petsLeft(m: { authorIp: string; authorPerks?: any }) {
|
||||
const ip = m.authorIp;
|
||||
if (ip in prefs.ipPets) return prefs.ipPets[ip];
|
||||
return (perksOf(m)?.pets ?? [])
|
||||
.filter((x: any) => x.position === 'left' || x.position === 'both')
|
||||
.map((x: any) => x.char).join('');
|
||||
}
|
||||
|
||||
function petsRight(m: { authorIp: string; authorPerks?: any }) {
|
||||
const ip = m.authorIp;
|
||||
if (ip in prefs.ipPets) return '';
|
||||
return (perksOf(m)?.pets ?? [])
|
||||
.filter((x: any) => x.position === 'right' || x.position === 'both')
|
||||
.map((x: any) => x.char).join('');
|
||||
}
|
||||
|
||||
function fmt(date: string) {
|
||||
return new Date(date).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
function geoLabel(geo?: GeoInfo | null): string {
|
||||
if (!geo) return '';
|
||||
if (!geo.countryCode) return 'Local';
|
||||
const place = geo.city || geo.country;
|
||||
if (geo.lat != null && geo.lon != null) {
|
||||
return `${place} · ${geo.lat.toFixed(4)}, ${geo.lon.toFixed(4)}`;
|
||||
}
|
||||
return place;
|
||||
}
|
||||
|
||||
function geoLink(geo?: GeoInfo | null): string {
|
||||
if (!geo || geo.lat == null || geo.lon == null) return 'https://maps.google.com';
|
||||
return `https://www.google.com/maps/search/?api=1&query=${geo.lat},${geo.lon}`;
|
||||
}
|
||||
|
||||
return { perksOf, ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs };
|
||||
}
|
||||
|
||||
@@ -1,212 +1,212 @@
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRealtime } from './useRealtime';
|
||||
import { useWallet, applyWalletFrame } from './useWallet';
|
||||
import { setPerks, applyPerksFrame, type Perks } from './usePerks';
|
||||
import { bumpAdsRevision } from './useAds';
|
||||
import { handleAlertFrame } from './useAlert';
|
||||
|
||||
// Module-level singleton so any component can read the viewer's own perks
|
||||
// without prop-drilling (e.g. SendButton, AdBand).
|
||||
export const myPerks = ref<Perks>({});
|
||||
|
||||
export function useMyPerks() {
|
||||
return { myPerks };
|
||||
}
|
||||
|
||||
export interface GeoInfo {
|
||||
country: string;
|
||||
countryCode: string;
|
||||
city: string;
|
||||
lat?: number;
|
||||
lon?: number;
|
||||
}
|
||||
|
||||
export interface Reply {
|
||||
id: string;
|
||||
content: string;
|
||||
authorIp: string;
|
||||
createdAt: string;
|
||||
parentId?: string | null;
|
||||
authorPerks?: Perks;
|
||||
authorGeo?: GeoInfo | null;
|
||||
richMode?: 'none' | 'htmlcss' | 'js';
|
||||
richContent?: string | null;
|
||||
attachments?: Attachment[];
|
||||
}
|
||||
|
||||
export interface Attachment {
|
||||
id: string;
|
||||
filename: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export interface Message extends Reply {
|
||||
parentId: string | null;
|
||||
replies: Reply[];
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
/**
|
||||
* Refresh the viewer's own perks from the server (callable from anywhere).
|
||||
* The backend computes the perks (entitlement.kind → Perks) and returns them
|
||||
* precomputed as `myPerks`, so we just adopt them — no client-side re-derivation.
|
||||
*/
|
||||
export async function refreshMyPerks(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/me`);
|
||||
if (!res.ok) return;
|
||||
const { myPerks: p } = (await res.json()) as { myPerks?: Perks };
|
||||
myPerks.value = p ?? {};
|
||||
const { ip } = useWallet();
|
||||
if (ip.value) setPerks(ip.value, myPerks.value);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
export function useMessages() {
|
||||
const messages = ref<Message[]>([]);
|
||||
const loading = ref(false);
|
||||
const sending = ref(false);
|
||||
|
||||
/** Seed the perks store from a message + its replies. */
|
||||
function harvestPerks(m: Message): void {
|
||||
setPerks(m.authorIp, m.authorPerks);
|
||||
for (const r of m.replies ?? []) setPerks(r.authorIp, r.authorPerks);
|
||||
}
|
||||
|
||||
async function fetchMessages(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/messages`);
|
||||
if (res.ok) {
|
||||
// API returns newest→oldest; reverse for chronological display.
|
||||
const list = ((await res.json()) as Message[]).reverse();
|
||||
list.forEach(harvestPerks);
|
||||
messages.value = list;
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Add a message pushed over the WebSocket (new thread or reply), with dedup. */
|
||||
function addIncoming(raw: Message & { parentId: string | null }): void {
|
||||
if (!raw || !raw.id) return;
|
||||
|
||||
// Always record the author's perks, even for replies.
|
||||
setPerks(raw.authorIp, raw.authorPerks);
|
||||
|
||||
if (raw.parentId == null) {
|
||||
// New top-level thread.
|
||||
if (messages.value.some((m) => m.id === raw.id)) return;
|
||||
messages.value.push({ ...raw, replies: raw.replies ?? [] });
|
||||
return;
|
||||
}
|
||||
|
||||
// Reply: attach to its parent thread if we have it.
|
||||
const parent = messages.value.find((m) => m.id === raw.parentId);
|
||||
if (!parent) return; // thread not loaded; reconnect-resync will reconcile
|
||||
if (parent.replies.some((r) => r.id === raw.id)) return;
|
||||
parent.replies.push({
|
||||
id: raw.id,
|
||||
content: raw.content,
|
||||
authorIp: raw.authorIp,
|
||||
createdAt: raw.createdAt,
|
||||
parentId: raw.parentId,
|
||||
authorPerks: raw.authorPerks,
|
||||
authorGeo: raw.authorGeo,
|
||||
richMode: raw.richMode,
|
||||
richContent: raw.richContent,
|
||||
attachments: raw.attachments,
|
||||
});
|
||||
}
|
||||
|
||||
const { fetchWallet, ip: myIp } = useWallet();
|
||||
|
||||
// The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
|
||||
// myPerks is module-level; this ref is the same reference.
|
||||
|
||||
async function fetchMyPerks(): Promise<void> {
|
||||
return refreshMyPerks();
|
||||
}
|
||||
|
||||
const { stats, connected, sendTyping } = useRealtime({
|
||||
onMessage: addIncoming,
|
||||
onReconnect: () => {
|
||||
fetchMessages();
|
||||
fetchWallet();
|
||||
fetchMyPerks();
|
||||
},
|
||||
onWallet: applyWalletFrame,
|
||||
onPerks: (data: { ip: string; perks: Perks }) => {
|
||||
applyPerksFrame(data);
|
||||
// If it's about us, update myPerks too (viewer-scoped perks like NoAds).
|
||||
if (myIp.value && data.ip === myIp.value) myPerks.value = data.perks ?? {};
|
||||
},
|
||||
onAds: () => bumpAdsRevision(), // a user ad entered rotation → refetch
|
||||
onAlert: (data) => handleAlertFrame(data), // paid global audio alert
|
||||
});
|
||||
|
||||
interface PostExtras {
|
||||
parentId?: string;
|
||||
richMode?: 'htmlcss' | 'js';
|
||||
richContent?: string;
|
||||
attachmentIds?: string[];
|
||||
}
|
||||
|
||||
async function postMessage(content: string, extras: PostExtras = {}): Promise<boolean> {
|
||||
const hasRich = !!extras.richContent && !!extras.richMode;
|
||||
const hasFiles = !!extras.attachmentIds?.length;
|
||||
// Allow empty text only when there's rich content or an attachment.
|
||||
if (!content.trim() && !hasRich && !hasFiles) return false;
|
||||
sending.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/messages`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
content: content.trim(),
|
||||
parentId: extras.parentId,
|
||||
richMode: extras.richMode,
|
||||
richContent: extras.richContent,
|
||||
attachmentIds: extras.attachmentIds,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) return false;
|
||||
// The created message comes back via the WebSocket broadcast, so no
|
||||
// re-fetch here. Fallback: if the socket is down, add it locally.
|
||||
if (!connected.value) {
|
||||
const created = (await res.json()) as Message;
|
||||
addIncoming(
|
||||
created.parentId == null ? { ...created, replies: [] } : created
|
||||
);
|
||||
}
|
||||
return true;
|
||||
} finally {
|
||||
sending.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMessages();
|
||||
fetchWallet();
|
||||
fetchMyPerks();
|
||||
});
|
||||
|
||||
// Note: viewer-own perks live in the module-level `myPerks` singleton; read
|
||||
// them via `useMyPerks()` rather than off this return (consistency rule).
|
||||
return {
|
||||
messages,
|
||||
loading,
|
||||
sending,
|
||||
postMessage,
|
||||
stats,
|
||||
connected,
|
||||
sendTyping,
|
||||
myIp,
|
||||
fetchMyPerks,
|
||||
};
|
||||
}
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRealtime } from './useRealtime';
|
||||
import { useWallet, applyWalletFrame } from './useWallet';
|
||||
import { setPerks, applyPerksFrame, type Perks } from './usePerks';
|
||||
import { bumpAdsRevision } from './useAds';
|
||||
import { handleAlertFrame } from './useAlert';
|
||||
|
||||
// Module-level singleton so any component can read the viewer's own perks
|
||||
// without prop-drilling (e.g. SendButton, AdBand).
|
||||
export const myPerks = ref<Perks>({});
|
||||
|
||||
export function useMyPerks() {
|
||||
return { myPerks };
|
||||
}
|
||||
|
||||
export interface GeoInfo {
|
||||
country: string;
|
||||
countryCode: string;
|
||||
city: string;
|
||||
lat?: number;
|
||||
lon?: number;
|
||||
}
|
||||
|
||||
export interface Reply {
|
||||
id: string;
|
||||
content: string;
|
||||
authorIp: string;
|
||||
createdAt: string;
|
||||
parentId?: string | null;
|
||||
authorPerks?: Perks;
|
||||
authorGeo?: GeoInfo | null;
|
||||
richMode?: 'none' | 'htmlcss' | 'js';
|
||||
richContent?: string | null;
|
||||
attachments?: Attachment[];
|
||||
}
|
||||
|
||||
export interface Attachment {
|
||||
id: string;
|
||||
filename: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export interface Message extends Reply {
|
||||
parentId: string | null;
|
||||
replies: Reply[];
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
/**
|
||||
* Refresh the viewer's own perks from the server (callable from anywhere).
|
||||
* The backend computes the perks (entitlement.kind → Perks) and returns them
|
||||
* precomputed as `myPerks`, so we just adopt them — no client-side re-derivation.
|
||||
*/
|
||||
export async function refreshMyPerks(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/me`);
|
||||
if (!res.ok) return;
|
||||
const { myPerks: p } = (await res.json()) as { myPerks?: Perks };
|
||||
myPerks.value = p ?? {};
|
||||
const { ip } = useWallet();
|
||||
if (ip.value) setPerks(ip.value, myPerks.value);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
export function useMessages() {
|
||||
const messages = ref<Message[]>([]);
|
||||
const loading = ref(false);
|
||||
const sending = ref(false);
|
||||
|
||||
/** Seed the perks store from a message + its replies. */
|
||||
function harvestPerks(m: Message): void {
|
||||
setPerks(m.authorIp, m.authorPerks);
|
||||
for (const r of m.replies ?? []) setPerks(r.authorIp, r.authorPerks);
|
||||
}
|
||||
|
||||
async function fetchMessages(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/messages`);
|
||||
if (res.ok) {
|
||||
// API returns newest→oldest; reverse for chronological display.
|
||||
const list = ((await res.json()) as Message[]).reverse();
|
||||
list.forEach(harvestPerks);
|
||||
messages.value = list;
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Add a message pushed over the WebSocket (new thread or reply), with dedup. */
|
||||
function addIncoming(raw: Message & { parentId: string | null }): void {
|
||||
if (!raw || !raw.id) return;
|
||||
|
||||
// Always record the author's perks, even for replies.
|
||||
setPerks(raw.authorIp, raw.authorPerks);
|
||||
|
||||
if (raw.parentId == null) {
|
||||
// New top-level thread.
|
||||
if (messages.value.some((m) => m.id === raw.id)) return;
|
||||
messages.value.push({ ...raw, replies: raw.replies ?? [] });
|
||||
return;
|
||||
}
|
||||
|
||||
// Reply: attach to its parent thread if we have it.
|
||||
const parent = messages.value.find((m) => m.id === raw.parentId);
|
||||
if (!parent) return; // thread not loaded; reconnect-resync will reconcile
|
||||
if (parent.replies.some((r) => r.id === raw.id)) return;
|
||||
parent.replies.push({
|
||||
id: raw.id,
|
||||
content: raw.content,
|
||||
authorIp: raw.authorIp,
|
||||
createdAt: raw.createdAt,
|
||||
parentId: raw.parentId,
|
||||
authorPerks: raw.authorPerks,
|
||||
authorGeo: raw.authorGeo,
|
||||
richMode: raw.richMode,
|
||||
richContent: raw.richContent,
|
||||
attachments: raw.attachments,
|
||||
});
|
||||
}
|
||||
|
||||
const { fetchWallet, ip: myIp } = useWallet();
|
||||
|
||||
// The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
|
||||
// myPerks is module-level; this ref is the same reference.
|
||||
|
||||
async function fetchMyPerks(): Promise<void> {
|
||||
return refreshMyPerks();
|
||||
}
|
||||
|
||||
const { stats, connected, sendTyping } = useRealtime({
|
||||
onMessage: addIncoming,
|
||||
onReconnect: () => {
|
||||
fetchMessages();
|
||||
fetchWallet();
|
||||
fetchMyPerks();
|
||||
},
|
||||
onWallet: applyWalletFrame,
|
||||
onPerks: (data: { ip: string; perks: Perks }) => {
|
||||
applyPerksFrame(data);
|
||||
// If it's about us, update myPerks too (viewer-scoped perks like NoAds).
|
||||
if (myIp.value && data.ip === myIp.value) myPerks.value = data.perks ?? {};
|
||||
},
|
||||
onAds: () => bumpAdsRevision(), // a user ad entered rotation → refetch
|
||||
onAlert: (data) => handleAlertFrame(data), // paid global audio alert
|
||||
});
|
||||
|
||||
interface PostExtras {
|
||||
parentId?: string;
|
||||
richMode?: 'htmlcss' | 'js';
|
||||
richContent?: string;
|
||||
attachmentIds?: string[];
|
||||
}
|
||||
|
||||
async function postMessage(content: string, extras: PostExtras = {}): Promise<boolean> {
|
||||
const hasRich = !!extras.richContent && !!extras.richMode;
|
||||
const hasFiles = !!extras.attachmentIds?.length;
|
||||
// Allow empty text only when there's rich content or an attachment.
|
||||
if (!content.trim() && !hasRich && !hasFiles) return false;
|
||||
sending.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/messages`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
content: content.trim(),
|
||||
parentId: extras.parentId,
|
||||
richMode: extras.richMode,
|
||||
richContent: extras.richContent,
|
||||
attachmentIds: extras.attachmentIds,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) return false;
|
||||
// The created message comes back via the WebSocket broadcast, so no
|
||||
// re-fetch here. Fallback: if the socket is down, add it locally.
|
||||
if (!connected.value) {
|
||||
const created = (await res.json()) as Message;
|
||||
addIncoming(
|
||||
created.parentId == null ? { ...created, replies: [] } : created
|
||||
);
|
||||
}
|
||||
return true;
|
||||
} finally {
|
||||
sending.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMessages();
|
||||
fetchWallet();
|
||||
fetchMyPerks();
|
||||
});
|
||||
|
||||
// Note: viewer-own perks live in the module-level `myPerks` singleton; read
|
||||
// them via `useMyPerks()` rather than off this return (consistency rule).
|
||||
return {
|
||||
messages,
|
||||
loading,
|
||||
sending,
|
||||
postMessage,
|
||||
stats,
|
||||
connected,
|
||||
sendTyping,
|
||||
myIp,
|
||||
fetchMyPerks,
|
||||
};
|
||||
}
|
||||
|
||||
20
frontend/src/composables/useMeta.spec.ts
Normal file
20
frontend/src/composables/useMeta.spec.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { parseMeta, type ProductMeta } from './useMeta';
|
||||
|
||||
describe('parseMeta (fonction réutilisable)', () => {
|
||||
it('parse un JSON valide', () => {
|
||||
const meta = parseMeta<ProductMeta>('{"plans":[{"id":"m","label":"Mensuel","price":499}]}');
|
||||
expect(meta.plans?.[0].price).toBe(499);
|
||||
});
|
||||
|
||||
it('renvoie le fallback sur null/undefined', () => {
|
||||
expect(parseMeta(null)).toEqual({});
|
||||
expect(parseMeta(undefined)).toEqual({});
|
||||
expect(parseMeta(null, { plans: [] })).toEqual({ plans: [] });
|
||||
});
|
||||
|
||||
it('renvoie le fallback sur JSON invalide (sans lever)', () => {
|
||||
expect(parseMeta('{ pas du json }')).toEqual({});
|
||||
expect(() => parseMeta('oops')).not.toThrow();
|
||||
});
|
||||
});
|
||||
25
frontend/src/composables/usePerks.spec.ts
Normal file
25
frontend/src/composables/usePerks.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { usePerks, setPerks, applyPerksFrame, type Perks } from './usePerks';
|
||||
|
||||
describe('usePerks (logique d’état)', () => {
|
||||
it('renvoie un objet vide pour une IP inconnue', () => {
|
||||
expect(usePerks().perksFor('0.0.0.0')).toEqual({});
|
||||
});
|
||||
|
||||
it('enregistre et relit les perks d’une IP', () => {
|
||||
const perks: Perks = { skin: 'gold', pets: [{ char: '🔥', position: 'left' }] };
|
||||
setPerks('1.1.1.1', perks);
|
||||
expect(usePerks().perksFor('1.1.1.1')).toEqual(perks);
|
||||
});
|
||||
|
||||
it('ignore un setPerks sans IP ou sans perks', () => {
|
||||
setPerks('', { skin: 'gold' });
|
||||
setPerks('2.2.2.2', null);
|
||||
expect(usePerks().perksFor('2.2.2.2')).toEqual({});
|
||||
});
|
||||
|
||||
it('applique un frame WS perks { ip, perks }', () => {
|
||||
applyPerksFrame({ ip: '3.3.3.3', perks: { noads: true } });
|
||||
expect(usePerks().perksFor('3.3.3.3')).toEqual({ noads: true });
|
||||
});
|
||||
});
|
||||
@@ -1,43 +1,43 @@
|
||||
import { reactive } from 'vue';
|
||||
|
||||
/**
|
||||
* Perks store (module-level singleton): maps an author IP → its visible perks.
|
||||
* Seeded from message payloads (authorPerks), updated live by WS `perks` frames,
|
||||
* and read by MessageItem to colour names / render pets for every author.
|
||||
*/
|
||||
|
||||
export type PetPosition = 'left' | 'right' | 'both';
|
||||
|
||||
export interface Perks {
|
||||
skin?: 'gold';
|
||||
pets?: { char: string; position: PetPosition }[];
|
||||
noads?: boolean;
|
||||
badge?: boolean;
|
||||
elementSkin?: boolean;
|
||||
richHtmlcss?: boolean;
|
||||
richJs?: boolean;
|
||||
ipColors?: boolean;
|
||||
sendSkins?: { id: string; char: string; label?: string }[];
|
||||
noFileLimit?: boolean;
|
||||
audioAlert?: boolean;
|
||||
}
|
||||
|
||||
const map = reactive<Record<string, Perks>>({});
|
||||
|
||||
/** Merge perks for one IP (from a message payload or a perks frame). */
|
||||
export function setPerks(ip: string, perks: Perks | undefined | null): void {
|
||||
if (!ip || !perks) return;
|
||||
map[ip] = perks;
|
||||
}
|
||||
|
||||
/** Apply a WS `perks` frame: { ip, perks }. */
|
||||
export function applyPerksFrame(data: { ip: string; perks: Perks }): void {
|
||||
if (data?.ip) map[data.ip] = data.perks ?? {};
|
||||
}
|
||||
|
||||
export function usePerks() {
|
||||
function perksFor(ip: string): Perks {
|
||||
return map[ip] ?? {};
|
||||
}
|
||||
return { perksFor, setPerks };
|
||||
}
|
||||
import { reactive } from 'vue';
|
||||
|
||||
/**
|
||||
* Perks store (module-level singleton): maps an author IP → its visible perks.
|
||||
* Seeded from message payloads (authorPerks), updated live by WS `perks` frames,
|
||||
* and read by MessageItem to colour names / render pets for every author.
|
||||
*/
|
||||
|
||||
export type PetPosition = 'left' | 'right' | 'both';
|
||||
|
||||
export interface Perks {
|
||||
skin?: 'gold';
|
||||
pets?: { char: string; position: PetPosition }[];
|
||||
noads?: boolean;
|
||||
badge?: boolean;
|
||||
elementSkin?: boolean;
|
||||
richHtmlcss?: boolean;
|
||||
richJs?: boolean;
|
||||
ipColors?: boolean;
|
||||
sendSkins?: { id: string; char: string; label?: string }[];
|
||||
noFileLimit?: boolean;
|
||||
audioAlert?: boolean;
|
||||
}
|
||||
|
||||
const map = reactive<Record<string, Perks>>({});
|
||||
|
||||
/** Merge perks for one IP (from a message payload or a perks frame). */
|
||||
export function setPerks(ip: string, perks: Perks | undefined | null): void {
|
||||
if (!ip || !perks) return;
|
||||
map[ip] = perks;
|
||||
}
|
||||
|
||||
/** Apply a WS `perks` frame: { ip, perks }. */
|
||||
export function applyPerksFrame(data: { ip: string; perks: Perks }): void {
|
||||
if (data?.ip) map[data.ip] = data.perks ?? {};
|
||||
}
|
||||
|
||||
export function usePerks() {
|
||||
function perksFor(ip: string): Perks {
|
||||
return map[ip] ?? {};
|
||||
}
|
||||
return { perksFor, setPerks };
|
||||
}
|
||||
|
||||
@@ -1,125 +1,125 @@
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
/** Mirror of the backend StatsSnapshot. */
|
||||
export interface Stats {
|
||||
// live
|
||||
connectedTabs: number;
|
||||
typingNow: number;
|
||||
lettersPerSec: number;
|
||||
msgsPerMin: number;
|
||||
// totals
|
||||
messages: number;
|
||||
replies: number;
|
||||
charsSent: number;
|
||||
lettersTyped: number;
|
||||
uniqueIps: number;
|
||||
longestMsg: number;
|
||||
// derived
|
||||
abandonRate: number;
|
||||
avgLength: number;
|
||||
moneyExtorted: number;
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
const WS_URL = API_URL.replace(/^http/, 'ws') + '/ws';
|
||||
|
||||
const TYPING_FLUSH_MS = 400; // batch keystroke deltas before sending
|
||||
const RECONNECT_DELAY_MS = 1500;
|
||||
|
||||
interface RealtimeHooks {
|
||||
onMessage?: (raw: any) => void;
|
||||
/** Called when the socket reconnects after a drop — use to resync state. */
|
||||
onReconnect?: () => void;
|
||||
/** Wallet update for THIS tab's IP (balance changed). */
|
||||
onWallet?: (data: any) => void;
|
||||
/** A visible perk changed for some IP (skin/pet) — update that author everywhere. */
|
||||
onPerks?: (data: any) => void;
|
||||
/** Ad inventory changed (e.g. a user bought a Cadre de Pub). */
|
||||
onAds?: (data: any) => void;
|
||||
/** A paid global audio alert was fired. */
|
||||
onAlert?: (data: any) => void;
|
||||
}
|
||||
|
||||
export function useRealtime(hooks: RealtimeHooks = {}) {
|
||||
const stats = ref<Stats | null>(null);
|
||||
const connected = ref(false);
|
||||
|
||||
let ws: WebSocket | null = null;
|
||||
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let typingTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let typingBuffer = 0;
|
||||
let everConnected = false;
|
||||
let closedByUs = false;
|
||||
|
||||
function connect(): void {
|
||||
try {
|
||||
ws = new WebSocket(WS_URL);
|
||||
} catch {
|
||||
scheduleReconnect();
|
||||
return;
|
||||
}
|
||||
|
||||
ws.onopen = () => {
|
||||
connected.value = true;
|
||||
if (everConnected) hooks.onReconnect?.();
|
||||
everConnected = true;
|
||||
};
|
||||
|
||||
ws.onmessage = (ev) => {
|
||||
let msg: { type?: string; data?: any };
|
||||
try {
|
||||
msg = JSON.parse(ev.data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (msg.type === 'stats') stats.value = msg.data as Stats;
|
||||
else if (msg.type === 'message') hooks.onMessage?.(msg.data);
|
||||
else if (msg.type === 'wallet') hooks.onWallet?.(msg.data);
|
||||
else if (msg.type === 'perks') hooks.onPerks?.(msg.data);
|
||||
else if (msg.type === 'ads') hooks.onAds?.(msg.data);
|
||||
else if (msg.type === 'alert') hooks.onAlert?.(msg.data);
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
connected.value = false;
|
||||
if (!closedByUs) scheduleReconnect();
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
ws?.close();
|
||||
};
|
||||
}
|
||||
|
||||
function scheduleReconnect(): void {
|
||||
if (reconnectTimer || closedByUs) return;
|
||||
reconnectTimer = setTimeout(() => {
|
||||
reconnectTimer = null;
|
||||
connect();
|
||||
}, RECONNECT_DELAY_MS);
|
||||
}
|
||||
|
||||
/** Report keystrokes (delta ≥ 0). Marks this tab as "typing" and feeds the global counter. */
|
||||
function sendTyping(delta: number): void {
|
||||
typingBuffer += Math.max(0, delta);
|
||||
if (typingTimer) return;
|
||||
typingTimer = setTimeout(flushTyping, TYPING_FLUSH_MS);
|
||||
}
|
||||
|
||||
function flushTyping(): void {
|
||||
typingTimer = null;
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({ type: 'typing', delta: typingBuffer }));
|
||||
}
|
||||
typingBuffer = 0;
|
||||
}
|
||||
|
||||
onMounted(connect);
|
||||
onUnmounted(() => {
|
||||
closedByUs = true;
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer);
|
||||
if (typingTimer) clearTimeout(typingTimer);
|
||||
ws?.close();
|
||||
});
|
||||
|
||||
return { stats, connected, sendTyping };
|
||||
}
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
/** Mirror of the backend StatsSnapshot. */
|
||||
export interface Stats {
|
||||
// live
|
||||
connectedTabs: number;
|
||||
typingNow: number;
|
||||
lettersPerSec: number;
|
||||
msgsPerMin: number;
|
||||
// totals
|
||||
messages: number;
|
||||
replies: number;
|
||||
charsSent: number;
|
||||
lettersTyped: number;
|
||||
uniqueIps: number;
|
||||
longestMsg: number;
|
||||
// derived
|
||||
abandonRate: number;
|
||||
avgLength: number;
|
||||
moneyExtorted: number;
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
const WS_URL = API_URL.replace(/^http/, 'ws') + '/ws';
|
||||
|
||||
const TYPING_FLUSH_MS = 400; // batch keystroke deltas before sending
|
||||
const RECONNECT_DELAY_MS = 1500;
|
||||
|
||||
interface RealtimeHooks {
|
||||
onMessage?: (raw: any) => void;
|
||||
/** Called when the socket reconnects after a drop — use to resync state. */
|
||||
onReconnect?: () => void;
|
||||
/** Wallet update for THIS tab's IP (balance changed). */
|
||||
onWallet?: (data: any) => void;
|
||||
/** A visible perk changed for some IP (skin/pet) — update that author everywhere. */
|
||||
onPerks?: (data: any) => void;
|
||||
/** Ad inventory changed (e.g. a user bought a Cadre de Pub). */
|
||||
onAds?: (data: any) => void;
|
||||
/** A paid global audio alert was fired. */
|
||||
onAlert?: (data: any) => void;
|
||||
}
|
||||
|
||||
export function useRealtime(hooks: RealtimeHooks = {}) {
|
||||
const stats = ref<Stats | null>(null);
|
||||
const connected = ref(false);
|
||||
|
||||
let ws: WebSocket | null = null;
|
||||
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let typingTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let typingBuffer = 0;
|
||||
let everConnected = false;
|
||||
let closedByUs = false;
|
||||
|
||||
function connect(): void {
|
||||
try {
|
||||
ws = new WebSocket(WS_URL);
|
||||
} catch {
|
||||
scheduleReconnect();
|
||||
return;
|
||||
}
|
||||
|
||||
ws.onopen = () => {
|
||||
connected.value = true;
|
||||
if (everConnected) hooks.onReconnect?.();
|
||||
everConnected = true;
|
||||
};
|
||||
|
||||
ws.onmessage = (ev) => {
|
||||
let msg: { type?: string; data?: any };
|
||||
try {
|
||||
msg = JSON.parse(ev.data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (msg.type === 'stats') stats.value = msg.data as Stats;
|
||||
else if (msg.type === 'message') hooks.onMessage?.(msg.data);
|
||||
else if (msg.type === 'wallet') hooks.onWallet?.(msg.data);
|
||||
else if (msg.type === 'perks') hooks.onPerks?.(msg.data);
|
||||
else if (msg.type === 'ads') hooks.onAds?.(msg.data);
|
||||
else if (msg.type === 'alert') hooks.onAlert?.(msg.data);
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
connected.value = false;
|
||||
if (!closedByUs) scheduleReconnect();
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
ws?.close();
|
||||
};
|
||||
}
|
||||
|
||||
function scheduleReconnect(): void {
|
||||
if (reconnectTimer || closedByUs) return;
|
||||
reconnectTimer = setTimeout(() => {
|
||||
reconnectTimer = null;
|
||||
connect();
|
||||
}, RECONNECT_DELAY_MS);
|
||||
}
|
||||
|
||||
/** Report keystrokes (delta ≥ 0). Marks this tab as "typing" and feeds the global counter. */
|
||||
function sendTyping(delta: number): void {
|
||||
typingBuffer += Math.max(0, delta);
|
||||
if (typingTimer) return;
|
||||
typingTimer = setTimeout(flushTyping, TYPING_FLUSH_MS);
|
||||
}
|
||||
|
||||
function flushTyping(): void {
|
||||
typingTimer = null;
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({ type: 'typing', delta: typingBuffer }));
|
||||
}
|
||||
typingBuffer = 0;
|
||||
}
|
||||
|
||||
onMounted(connect);
|
||||
onUnmounted(() => {
|
||||
closedByUs = true;
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer);
|
||||
if (typingTimer) clearTimeout(typingTimer);
|
||||
ws?.close();
|
||||
});
|
||||
|
||||
return { stats, connected, sendTyping };
|
||||
}
|
||||
|
||||
@@ -1,133 +1,133 @@
|
||||
import { ref } from 'vue';
|
||||
import { useWallet } from './useWallet';
|
||||
import { refreshMyPerks } from './useMessages';
|
||||
import { parseMeta, type ProductMeta } from './useMeta';
|
||||
|
||||
/** Marketplace client: catalogue, my entitlements, purchase flow. */
|
||||
|
||||
export interface Product {
|
||||
id: string;
|
||||
category: string;
|
||||
name: string;
|
||||
subtitle?: string | null;
|
||||
kind: string;
|
||||
basePrice: number; // centi-credits
|
||||
promoPrice?: number | null;
|
||||
badge?: string | null;
|
||||
stockLimit?: number | null;
|
||||
stockSold: number;
|
||||
sortOrder: number;
|
||||
metaJson?: string | null;
|
||||
}
|
||||
|
||||
export interface Entitlement {
|
||||
id: string;
|
||||
ip: string;
|
||||
kind: string;
|
||||
active: boolean;
|
||||
expiresAt?: string | null;
|
||||
metaJson?: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface PurchaseOptions {
|
||||
plan?: 'monthly' | 'annual';
|
||||
durationDays?: number;
|
||||
format?: 'static' | 'gif';
|
||||
url?: string;
|
||||
petDesign?: string;
|
||||
petChar?: string;
|
||||
petPosition?: 'left' | 'right' | 'both';
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
export function useShop() {
|
||||
const products = ref<Product[]>([]);
|
||||
const entitlements = ref<Entitlement[]>([]);
|
||||
const loading = ref(false);
|
||||
const buying = ref<string | null>(null); // productId currently being purchased
|
||||
const lastError = ref<string | null>(null);
|
||||
const lastSuccess = ref<string | null>(null);
|
||||
|
||||
const { fetchWallet } = useWallet();
|
||||
|
||||
async function fetchProducts(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/products`);
|
||||
if (res.ok) products.value = (await res.json()) as Product[];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchMe(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/me`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
entitlements.value = data.entitlements ?? [];
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
function owns(kind: string): boolean {
|
||||
return entitlements.value.some((e) => e.kind === kind && e.active);
|
||||
}
|
||||
|
||||
function petCount(): number {
|
||||
return entitlements.value.filter((e) => e.kind === 'pet' && e.active).length;
|
||||
}
|
||||
|
||||
function ownedPetChars(): string[] {
|
||||
return entitlements.value
|
||||
.filter((e) => e.kind === 'pet' && e.active)
|
||||
.map((e) => parseMeta<ProductMeta>(e.metaJson).char ?? '')
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
async function purchase(productId: string, options: PurchaseOptions = {}): Promise<boolean> {
|
||||
buying.value = productId;
|
||||
lastError.value = null;
|
||||
lastSuccess.value = null;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/purchase`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ productId, options }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
lastError.value = data.error || 'Achat impossible';
|
||||
return false;
|
||||
}
|
||||
lastSuccess.value = `Acheté : ${productId}`;
|
||||
// Refresh wallet + my entitlements + myPerks (WS also pushes wallet, this is belt-and-braces).
|
||||
await Promise.all([fetchWallet(), fetchMe(), fetchProducts(), refreshMyPerks()]);
|
||||
return true;
|
||||
} catch {
|
||||
lastError.value = 'Réseau indisponible';
|
||||
return false;
|
||||
} finally {
|
||||
buying.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
products,
|
||||
entitlements,
|
||||
loading,
|
||||
buying,
|
||||
lastError,
|
||||
lastSuccess,
|
||||
fetchProducts,
|
||||
fetchMe,
|
||||
owns,
|
||||
petCount,
|
||||
ownedPetChars,
|
||||
purchase,
|
||||
};
|
||||
}
|
||||
import { ref } from 'vue';
|
||||
import { useWallet } from './useWallet';
|
||||
import { refreshMyPerks } from './useMessages';
|
||||
import { parseMeta, type ProductMeta } from './useMeta';
|
||||
|
||||
/** Marketplace client: catalogue, my entitlements, purchase flow. */
|
||||
|
||||
export interface Product {
|
||||
id: string;
|
||||
category: string;
|
||||
name: string;
|
||||
subtitle?: string | null;
|
||||
kind: string;
|
||||
basePrice: number; // centi-credits
|
||||
promoPrice?: number | null;
|
||||
badge?: string | null;
|
||||
stockLimit?: number | null;
|
||||
stockSold: number;
|
||||
sortOrder: number;
|
||||
metaJson?: string | null;
|
||||
}
|
||||
|
||||
export interface Entitlement {
|
||||
id: string;
|
||||
ip: string;
|
||||
kind: string;
|
||||
active: boolean;
|
||||
expiresAt?: string | null;
|
||||
metaJson?: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface PurchaseOptions {
|
||||
plan?: 'monthly' | 'annual';
|
||||
durationDays?: number;
|
||||
format?: 'static' | 'gif';
|
||||
url?: string;
|
||||
petDesign?: string;
|
||||
petChar?: string;
|
||||
petPosition?: 'left' | 'right' | 'both';
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
export function useShop() {
|
||||
const products = ref<Product[]>([]);
|
||||
const entitlements = ref<Entitlement[]>([]);
|
||||
const loading = ref(false);
|
||||
const buying = ref<string | null>(null); // productId currently being purchased
|
||||
const lastError = ref<string | null>(null);
|
||||
const lastSuccess = ref<string | null>(null);
|
||||
|
||||
const { fetchWallet } = useWallet();
|
||||
|
||||
async function fetchProducts(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/products`);
|
||||
if (res.ok) products.value = (await res.json()) as Product[];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchMe(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/me`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
entitlements.value = data.entitlements ?? [];
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
function owns(kind: string): boolean {
|
||||
return entitlements.value.some((e) => e.kind === kind && e.active);
|
||||
}
|
||||
|
||||
function petCount(): number {
|
||||
return entitlements.value.filter((e) => e.kind === 'pet' && e.active).length;
|
||||
}
|
||||
|
||||
function ownedPetChars(): string[] {
|
||||
return entitlements.value
|
||||
.filter((e) => e.kind === 'pet' && e.active)
|
||||
.map((e) => parseMeta<ProductMeta>(e.metaJson).char ?? '')
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
async function purchase(productId: string, options: PurchaseOptions = {}): Promise<boolean> {
|
||||
buying.value = productId;
|
||||
lastError.value = null;
|
||||
lastSuccess.value = null;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/purchase`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ productId, options }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
lastError.value = data.error || 'Achat impossible';
|
||||
return false;
|
||||
}
|
||||
lastSuccess.value = `Acheté : ${productId}`;
|
||||
// Refresh wallet + my entitlements + myPerks (WS also pushes wallet, this is belt-and-braces).
|
||||
await Promise.all([fetchWallet(), fetchMe(), fetchProducts(), refreshMyPerks()]);
|
||||
return true;
|
||||
} catch {
|
||||
lastError.value = 'Réseau indisponible';
|
||||
return false;
|
||||
} finally {
|
||||
buying.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
products,
|
||||
entitlements,
|
||||
loading,
|
||||
buying,
|
||||
lastError,
|
||||
lastSuccess,
|
||||
fetchProducts,
|
||||
fetchMe,
|
||||
owns,
|
||||
petCount,
|
||||
ownedPetChars,
|
||||
purchase,
|
||||
};
|
||||
}
|
||||
|
||||
26
frontend/src/composables/useWallet.spec.ts
Normal file
26
frontend/src/composables/useWallet.spec.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { useWallet, applyWalletFrame } from './useWallet';
|
||||
|
||||
describe('useWallet (logique d’état)', () => {
|
||||
it('affiche un solde réel converti depuis les centi-crédits', () => {
|
||||
applyWalletFrame({ ip: '8.8.8.8', balance: 5000, freeMode: false });
|
||||
const { displayBalance, freeMode, balanceRaw } = useWallet();
|
||||
expect(freeMode.value).toBe(false);
|
||||
expect(balanceRaw.value).toBe(5000);
|
||||
// 5000 centi-crédits = 50,00 — séparateur dépendant de la locale ICU.
|
||||
expect(displayBalance()).not.toBe('∞');
|
||||
expect(displayBalance()).toContain('50');
|
||||
});
|
||||
|
||||
it('affiche ∞ en mode gratuit (localhost / open bar)', () => {
|
||||
applyWalletFrame({ ip: '::1', balance: Number.MAX_SAFE_INTEGER, freeMode: true });
|
||||
const { displayBalance, freeMode } = useWallet();
|
||||
expect(freeMode.value).toBe(true);
|
||||
expect(displayBalance()).toBe('∞');
|
||||
});
|
||||
|
||||
it('met à jour l’IP courante via le frame WS', () => {
|
||||
applyWalletFrame({ ip: '9.9.9.9', balance: 0, freeMode: false });
|
||||
expect(useWallet().ip.value).toBe('9.9.9.9');
|
||||
});
|
||||
});
|
||||
@@ -1,72 +1,72 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
/**
|
||||
* Wallet store (module-level singleton so the header, shop, and composer all
|
||||
* share one balance). Credits are CENTI-CREDITS server-side; `displayBalance`
|
||||
* converts to a human "crédits" number. Live updates arrive via the WS `wallet`
|
||||
* frame, routed here through useMessages' realtime hook (applyWalletFrame).
|
||||
*/
|
||||
|
||||
export interface WalletView {
|
||||
ip: string;
|
||||
balance: number; // centi-credits, or a huge sentinel in free mode
|
||||
freeMode: boolean;
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
const ip = ref<string>('');
|
||||
const balanceRaw = ref<number>(0); // centi-credits
|
||||
const freeMode = ref<boolean>(false);
|
||||
const loaded = ref<boolean>(false);
|
||||
|
||||
function apply(view: WalletView): void {
|
||||
ip.value = view.ip;
|
||||
balanceRaw.value = view.balance;
|
||||
freeMode.value = view.freeMode;
|
||||
loaded.value = true;
|
||||
}
|
||||
|
||||
/** Called by the realtime `wallet` frame handler. */
|
||||
export function applyWalletFrame(data: WalletView): void {
|
||||
apply(data);
|
||||
}
|
||||
|
||||
async function fetchWallet(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/wallet`);
|
||||
if (res.ok) apply((await res.json()) as WalletView);
|
||||
} catch {
|
||||
/* offline — keep last known */
|
||||
}
|
||||
}
|
||||
|
||||
async function topUp(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/wallet/topup`, { method: 'POST' });
|
||||
if (res.ok) apply((await res.json()) as WalletView);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
/** Human-readable balance ("∞" in free mode, else credits with 2 decimals). */
|
||||
function displayBalance(): string {
|
||||
if (freeMode.value) return '∞';
|
||||
return (balanceRaw.value / 100).toLocaleString('fr-FR', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
}
|
||||
|
||||
export function useWallet() {
|
||||
return {
|
||||
ip,
|
||||
balanceRaw,
|
||||
freeMode,
|
||||
loaded,
|
||||
fetchWallet,
|
||||
topUp,
|
||||
displayBalance,
|
||||
};
|
||||
}
|
||||
import { ref } from 'vue';
|
||||
|
||||
/**
|
||||
* Wallet store (module-level singleton so the header, shop, and composer all
|
||||
* share one balance). Credits are CENTI-CREDITS server-side; `displayBalance`
|
||||
* converts to a human "crédits" number. Live updates arrive via the WS `wallet`
|
||||
* frame, routed here through useMessages' realtime hook (applyWalletFrame).
|
||||
*/
|
||||
|
||||
export interface WalletView {
|
||||
ip: string;
|
||||
balance: number; // centi-credits, or a huge sentinel in free mode
|
||||
freeMode: boolean;
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
const ip = ref<string>('');
|
||||
const balanceRaw = ref<number>(0); // centi-credits
|
||||
const freeMode = ref<boolean>(false);
|
||||
const loaded = ref<boolean>(false);
|
||||
|
||||
function apply(view: WalletView): void {
|
||||
ip.value = view.ip;
|
||||
balanceRaw.value = view.balance;
|
||||
freeMode.value = view.freeMode;
|
||||
loaded.value = true;
|
||||
}
|
||||
|
||||
/** Called by the realtime `wallet` frame handler. */
|
||||
export function applyWalletFrame(data: WalletView): void {
|
||||
apply(data);
|
||||
}
|
||||
|
||||
async function fetchWallet(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/wallet`);
|
||||
if (res.ok) apply((await res.json()) as WalletView);
|
||||
} catch {
|
||||
/* offline — keep last known */
|
||||
}
|
||||
}
|
||||
|
||||
async function topUp(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/wallet/topup`, { method: 'POST' });
|
||||
if (res.ok) apply((await res.json()) as WalletView);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
/** Human-readable balance ("∞" in free mode, else credits with 2 decimals). */
|
||||
function displayBalance(): string {
|
||||
if (freeMode.value) return '∞';
|
||||
return (balanceRaw.value / 100).toLocaleString('fr-FR', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
}
|
||||
|
||||
export function useWallet() {
|
||||
return {
|
||||
ip,
|
||||
balanceRaw,
|
||||
freeMode,
|
||||
loaded,
|
||||
fetchWallet,
|
||||
topUp,
|
||||
displayBalance,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user