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:
@@ -1,17 +1,17 @@
|
||||
# XIP frontend — Vue 3 + Vite, built to static assets and served by nginx.
|
||||
# Build context is the repo ROOT (see docker-compose.prod.yml).
|
||||
FROM oven/bun:1-debian AS build
|
||||
WORKDIR /app
|
||||
COPY frontend/package.json ./
|
||||
RUN bun install
|
||||
COPY frontend/ ./
|
||||
# Baked at build time. Must be the public absolute origin so the WebSocket URL
|
||||
# (derived as API_URL.replace(/^http/,'ws') + '/ws') becomes wss://xip.kerboul.me/ws.
|
||||
ARG VITE_API_URL=https://xip.kerboul.me
|
||||
ENV VITE_API_URL=$VITE_API_URL
|
||||
RUN bun run build
|
||||
|
||||
FROM nginx:1.27-alpine AS runtime
|
||||
COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
# XIP frontend — Vue 3 + Vite, built to static assets and served by nginx.
|
||||
# Build context is the repo ROOT (see docker-compose.prod.yml).
|
||||
FROM oven/bun:1-debian AS build
|
||||
WORKDIR /app
|
||||
COPY frontend/package.json ./
|
||||
RUN bun install
|
||||
COPY frontend/ ./
|
||||
# Baked at build time. Must be the public absolute origin so the WebSocket URL
|
||||
# (derived as API_URL.replace(/^http/,'ws') + '/ws') becomes wss://xip.kerboul.me/ws.
|
||||
ARG VITE_API_URL=https://xip.kerboul.me
|
||||
ENV VITE_API_URL=$VITE_API_URL
|
||||
RUN bun run build
|
||||
|
||||
FROM nginx:1.27-alpine AS runtime
|
||||
COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>XIP</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>XIP</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,21 +4,24 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "vue-tsc --noEmit",
|
||||
"preview": "vite preview"
|
||||
"test": "vitest run",
|
||||
"test:cov": "vitest run --coverage"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/vue": "^8.3.0",
|
||||
"@ionic/vue-router": "^8.3.0",
|
||||
"ionicons": "^7.4.0",
|
||||
"vue": "^3.5.0",
|
||||
"vue-router": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.1.0",
|
||||
"@vitest/coverage-v8": "^2.1.0",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"happy-dom": "^15.0.0",
|
||||
"typescript": "^5.6.0",
|
||||
"vite": "^5.4.0",
|
||||
"vitest": "^2.1.0",
|
||||
"vue-tsc": "^2.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,72 @@
|
||||
<!-- Composant racine : barre de navigation globale + zone de pages routées.
|
||||
L'explorateur est gardé en cache (keep-alive) pour conserver son état
|
||||
(recherche, scroll) lors d'un retour navigation. -->
|
||||
<template>
|
||||
<RouterView />
|
||||
<StyleContextMenu />
|
||||
<div class="app-shell">
|
||||
<nav class="app-nav">
|
||||
<RouterLink to="/" class="brand">XIP</RouterLink>
|
||||
<div class="nav-links">
|
||||
<RouterLink to="/" class="nav-link">💬 Chat</RouterLink>
|
||||
<RouterLink to="/explorer" class="nav-link">🔎 Explorer</RouterLink>
|
||||
<RouterLink to="/favoris" class="nav-link">⭐ Favoris</RouterLink>
|
||||
<RouterLink to="/mes-stats" class="nav-link">📊 Mes stats</RouterLink>
|
||||
<RouterLink to="/shop" class="nav-link">🛒 Shop</RouterLink>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="app-main">
|
||||
<RouterView v-slot="{ Component }">
|
||||
<keep-alive include="ExplorerPage">
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</RouterView>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import StyleContextMenu from '@/components/StyleContextMenu.vue';
|
||||
</script>
|
||||
<style scoped>
|
||||
.app-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100dvh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 0 18px;
|
||||
background: #0a0a12;
|
||||
border-bottom: 1px solid #1a1a2a;
|
||||
}
|
||||
.brand {
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 16px;
|
||||
color: #00eeff;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 0 10px #00ccff77;
|
||||
}
|
||||
.nav-links { display: flex; gap: 6px; }
|
||||
.nav-link {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
color: #7a7a9a;
|
||||
text-decoration: none;
|
||||
padding: 5px 11px;
|
||||
border-radius: 8px;
|
||||
transition: color 0.12s, background 0.12s;
|
||||
}
|
||||
.nav-link:hover { color: #ccccee; background: #15152480; }
|
||||
.nav-link.router-link-exact-active { color: #00ddff; background: #00aaff18; }
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,163 +1,163 @@
|
||||
<!-- Bande publicitaire gauche (130 px) — pilotée par l'inventaire de pubs réel -->
|
||||
<template>
|
||||
<aside class="ad-band">
|
||||
<p class="ad-label">PUBLICITÉ</p>
|
||||
|
||||
<component
|
||||
:is="ad.url ? 'a' : 'div'"
|
||||
v-for="ad in ads"
|
||||
:key="ad.id"
|
||||
class="ad-card"
|
||||
:href="ad.url || undefined"
|
||||
:style="cardStyle"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
title="Clic droit pour personnaliser le cadre"
|
||||
@contextmenu.prevent="onRightClick"
|
||||
>
|
||||
<div class="ad-header" :class="`ad-header--${ad.tone}`">
|
||||
<p class="ad-brand" :class="`ad-brand--${ad.tone}`">{{ ad.brand }}</p>
|
||||
<p v-if="ad.subtitle" class="ad-sub">{{ ad.subtitle }}</p>
|
||||
</div>
|
||||
<div class="ad-body" :class="`ad-body--${ad.tone}`">
|
||||
<span class="ad-icon">{{ ad.icon || '📢' }}</span>
|
||||
</div>
|
||||
<p v-if="ad.cta" class="ad-cta" :class="`ad-cta--${ad.tone}`">{{ ad.cta }}</p>
|
||||
<p v-if="ad.url" class="ad-url">{{ prettyUrl(ad.url) }}</p>
|
||||
</component>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, watch } from 'vue';
|
||||
import { useAds } from '@/composables/useAds';
|
||||
import { openContextMenu } from '@/composables/useContextMenu';
|
||||
import { useCustomStyles, AD_FRAME_PRESETS } from '@/composables/useCustomStyles';
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
|
||||
const { ads, fetchAds, reportImpression } = useAds('band');
|
||||
const { prefs } = useCustomStyles();
|
||||
const { myPerks } = useMyPerks();
|
||||
|
||||
const cardStyle = computed(() => {
|
||||
const p = AD_FRAME_PRESETS[prefs.adFrame];
|
||||
return { border: p.border, background: p.bg };
|
||||
});
|
||||
|
||||
function onRightClick(e: MouseEvent): void {
|
||||
if (!myPerks.value.elementSkin) return;
|
||||
e.stopPropagation();
|
||||
openContextMenu({
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
title: 'Cadre pub',
|
||||
items: Object.entries(AD_FRAME_PRESETS).map(([k, v]) => ({ value: k, label: v.label })),
|
||||
current: prefs.adFrame,
|
||||
onSelect: (v) => { prefs.adFrame = v as typeof prefs.adFrame; },
|
||||
});
|
||||
}
|
||||
|
||||
function prettyUrl(url: string): string {
|
||||
return url.replace(/^https?:\/\//, '').replace(/\/$/, '');
|
||||
}
|
||||
|
||||
watch(ads, (list) => {
|
||||
for (const a of list) reportImpression(a.id);
|
||||
});
|
||||
|
||||
onMounted(fetchAds);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ad-band {
|
||||
width: 130px;
|
||||
flex-shrink: 0;
|
||||
background: #0c0c10;
|
||||
border-right: 1px solid #1a1a22;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.ad-band::-webkit-scrollbar { display: none; }
|
||||
|
||||
.ad-label {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 8px;
|
||||
color: #2a2a38;
|
||||
text-align: center;
|
||||
padding: 5px 0 3px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ── Carte pub ── */
|
||||
.ad-card {
|
||||
margin: 0 4px 4px;
|
||||
background: #121218;
|
||||
border: 1px solid #1e1e2a;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.ad-header {
|
||||
padding: 8px 4px 6px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.ad-header--blue { background: #161620; }
|
||||
.ad-header--green { background: #101614; }
|
||||
.ad-header--purple { background: #16101a; }
|
||||
.ad-header--user { background: #1a1606; }
|
||||
.ad-header--casino { background: #1a0606; }
|
||||
|
||||
.ad-brand {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
.ad-brand--blue { color: #4455aa; }
|
||||
.ad-brand--green { color: #336644; }
|
||||
.ad-brand--purple { color: #6633aa; }
|
||||
.ad-brand--user { color: #998833; }
|
||||
.ad-brand--casino { color: #884433; }
|
||||
|
||||
.ad-sub {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 9px;
|
||||
color: #383870;
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
|
||||
.ad-body {
|
||||
background: #0e0e16;
|
||||
margin: 6px 10px;
|
||||
border-radius: 2px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.ad-body--green { background: #0e160e; }
|
||||
.ad-body--purple { background: #110e16; }
|
||||
.ad-body--user { background: #16140e; }
|
||||
.ad-body--casino { background: #160e0e; }
|
||||
|
||||
.ad-icon { font-size: 24px; }
|
||||
|
||||
.ad-cta {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
margin: 6px 0 2px;
|
||||
}
|
||||
.ad-cta--blue { color: #3a3a88; }
|
||||
.ad-cta--green { color: #33aa55; }
|
||||
.ad-cta--purple { color: #9944dd; }
|
||||
.ad-cta--user { color: #ffcc44; }
|
||||
.ad-cta--casino { color: #ff5533; }
|
||||
|
||||
.ad-url {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 8px;
|
||||
color: #282840;
|
||||
}
|
||||
|
||||
/* Carte cliquable : pas de soulignement, héritage couleur */
|
||||
a.ad-card { text-decoration: none; display: block; }
|
||||
</style>
|
||||
<!-- Bande publicitaire gauche (130 px) — pilotée par l'inventaire de pubs réel -->
|
||||
<template>
|
||||
<aside class="ad-band">
|
||||
<p class="ad-label">PUBLICITÉ</p>
|
||||
|
||||
<component
|
||||
:is="ad.url ? 'a' : 'div'"
|
||||
v-for="ad in ads"
|
||||
:key="ad.id"
|
||||
class="ad-card"
|
||||
:href="ad.url || undefined"
|
||||
:style="cardStyle"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
title="Clic droit pour personnaliser le cadre"
|
||||
@contextmenu.prevent="onRightClick"
|
||||
>
|
||||
<div class="ad-header" :class="`ad-header--${ad.tone}`">
|
||||
<p class="ad-brand" :class="`ad-brand--${ad.tone}`">{{ ad.brand }}</p>
|
||||
<p v-if="ad.subtitle" class="ad-sub">{{ ad.subtitle }}</p>
|
||||
</div>
|
||||
<div class="ad-body" :class="`ad-body--${ad.tone}`">
|
||||
<span class="ad-icon">{{ ad.icon || '📢' }}</span>
|
||||
</div>
|
||||
<p v-if="ad.cta" class="ad-cta" :class="`ad-cta--${ad.tone}`">{{ ad.cta }}</p>
|
||||
<p v-if="ad.url" class="ad-url">{{ prettyUrl(ad.url) }}</p>
|
||||
</component>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, watch } from 'vue';
|
||||
import { useAds } from '@/composables/useAds';
|
||||
import { openContextMenu } from '@/composables/useContextMenu';
|
||||
import { useCustomStyles, AD_FRAME_PRESETS } from '@/composables/useCustomStyles';
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
|
||||
const { ads, fetchAds, reportImpression } = useAds('band');
|
||||
const { prefs } = useCustomStyles();
|
||||
const { myPerks } = useMyPerks();
|
||||
|
||||
const cardStyle = computed(() => {
|
||||
const p = AD_FRAME_PRESETS[prefs.adFrame];
|
||||
return { border: p.border, background: p.bg };
|
||||
});
|
||||
|
||||
function onRightClick(e: MouseEvent): void {
|
||||
if (!myPerks.value.elementSkin) return;
|
||||
e.stopPropagation();
|
||||
openContextMenu({
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
title: 'Cadre pub',
|
||||
items: Object.entries(AD_FRAME_PRESETS).map(([k, v]) => ({ value: k, label: v.label })),
|
||||
current: prefs.adFrame,
|
||||
onSelect: (v) => { prefs.adFrame = v as typeof prefs.adFrame; },
|
||||
});
|
||||
}
|
||||
|
||||
function prettyUrl(url: string): string {
|
||||
return url.replace(/^https?:\/\//, '').replace(/\/$/, '');
|
||||
}
|
||||
|
||||
watch(ads, (list) => {
|
||||
for (const a of list) reportImpression(a.id);
|
||||
});
|
||||
|
||||
onMounted(fetchAds);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ad-band {
|
||||
width: 130px;
|
||||
flex-shrink: 0;
|
||||
background: #0c0c10;
|
||||
border-right: 1px solid #1a1a22;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.ad-band::-webkit-scrollbar { display: none; }
|
||||
|
||||
.ad-label {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 8px;
|
||||
color: #2a2a38;
|
||||
text-align: center;
|
||||
padding: 5px 0 3px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ── Carte pub ── */
|
||||
.ad-card {
|
||||
margin: 0 4px 4px;
|
||||
background: #121218;
|
||||
border: 1px solid #1e1e2a;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.ad-header {
|
||||
padding: 8px 4px 6px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.ad-header--blue { background: #161620; }
|
||||
.ad-header--green { background: #101614; }
|
||||
.ad-header--purple { background: #16101a; }
|
||||
.ad-header--user { background: #1a1606; }
|
||||
.ad-header--casino { background: #1a0606; }
|
||||
|
||||
.ad-brand {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
.ad-brand--blue { color: #4455aa; }
|
||||
.ad-brand--green { color: #336644; }
|
||||
.ad-brand--purple { color: #6633aa; }
|
||||
.ad-brand--user { color: #998833; }
|
||||
.ad-brand--casino { color: #884433; }
|
||||
|
||||
.ad-sub {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 9px;
|
||||
color: #383870;
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
|
||||
.ad-body {
|
||||
background: #0e0e16;
|
||||
margin: 6px 10px;
|
||||
border-radius: 2px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.ad-body--green { background: #0e160e; }
|
||||
.ad-body--purple { background: #110e16; }
|
||||
.ad-body--user { background: #16140e; }
|
||||
.ad-body--casino { background: #160e0e; }
|
||||
|
||||
.ad-icon { font-size: 24px; }
|
||||
|
||||
.ad-cta {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
margin: 6px 0 2px;
|
||||
}
|
||||
.ad-cta--blue { color: #3a3a88; }
|
||||
.ad-cta--green { color: #33aa55; }
|
||||
.ad-cta--purple { color: #9944dd; }
|
||||
.ad-cta--user { color: #ffcc44; }
|
||||
.ad-cta--casino { color: #ff5533; }
|
||||
|
||||
.ad-url {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 8px;
|
||||
color: #282840;
|
||||
}
|
||||
|
||||
/* Carte cliquable : pas de soulignement, héritage couleur */
|
||||
a.ad-card { text-decoration: none; display: block; }
|
||||
</style>
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
<!-- Tweened number display (easeOutCubic) for live-updating stats -->
|
||||
<template>
|
||||
<span>{{ formatted }}</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onUnmounted } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{ value: number; decimals?: number; duration?: number }>(),
|
||||
{ decimals: 0, duration: 600 },
|
||||
);
|
||||
|
||||
const display = ref(props.value);
|
||||
let raf = 0;
|
||||
let startVal = props.value;
|
||||
let startTime = 0;
|
||||
let target = props.value;
|
||||
|
||||
function animate(to: number): void {
|
||||
cancelAnimationFrame(raf);
|
||||
startVal = display.value;
|
||||
target = to;
|
||||
startTime = performance.now();
|
||||
const step = (now: number) => {
|
||||
const t = Math.min(1, (now - startTime) / props.duration);
|
||||
const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
|
||||
display.value = startVal + (target - startVal) * eased;
|
||||
if (t < 1) raf = requestAnimationFrame(step);
|
||||
else display.value = target;
|
||||
};
|
||||
raf = requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(v) => {
|
||||
if (Number.isFinite(v)) animate(v);
|
||||
},
|
||||
);
|
||||
|
||||
const formatted = computed(() =>
|
||||
display.value.toLocaleString('fr-FR', {
|
||||
minimumFractionDigits: props.decimals,
|
||||
maximumFractionDigits: props.decimals,
|
||||
}),
|
||||
);
|
||||
|
||||
onUnmounted(() => cancelAnimationFrame(raf));
|
||||
</script>
|
||||
<!-- Tweened number display (easeOutCubic) for live-updating stats -->
|
||||
<template>
|
||||
<span>{{ formatted }}</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onUnmounted } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{ value: number; decimals?: number; duration?: number }>(),
|
||||
{ decimals: 0, duration: 600 },
|
||||
);
|
||||
|
||||
const display = ref(props.value);
|
||||
let raf = 0;
|
||||
let startVal = props.value;
|
||||
let startTime = 0;
|
||||
let target = props.value;
|
||||
|
||||
function animate(to: number): void {
|
||||
cancelAnimationFrame(raf);
|
||||
startVal = display.value;
|
||||
target = to;
|
||||
startTime = performance.now();
|
||||
const step = (now: number) => {
|
||||
const t = Math.min(1, (now - startTime) / props.duration);
|
||||
const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
|
||||
display.value = startVal + (target - startVal) * eased;
|
||||
if (t < 1) raf = requestAnimationFrame(step);
|
||||
else display.value = target;
|
||||
};
|
||||
raf = requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(v) => {
|
||||
if (Number.isFinite(v)) animate(v);
|
||||
},
|
||||
);
|
||||
|
||||
const formatted = computed(() =>
|
||||
display.value.toLocaleString('fr-FR', {
|
||||
minimumFractionDigits: props.decimals,
|
||||
maximumFractionDigits: props.decimals,
|
||||
}),
|
||||
);
|
||||
|
||||
onUnmounted(() => cancelAnimationFrame(raf));
|
||||
</script>
|
||||
|
||||
@@ -1,133 +1,133 @@
|
||||
<!-- En-tête du chat -->
|
||||
<template>
|
||||
<header class="chat-header">
|
||||
<div class="header-left">
|
||||
<span class="xip-title">XIP</span>
|
||||
<span class="chat-label">Chat</span>
|
||||
<span class="online-dot" aria-hidden="true" />
|
||||
<span class="online-count">{{ connectedCount }} connectés</span>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<ThemePicker v-model="theme" />
|
||||
<span v-if="ip" class="me-ip" :title="'Ton pseudo = ton IP'">{{ ip }}</span>
|
||||
<span class="balance" :class="{ 'balance--free': freeMode }" title="Tes crédits XIP">
|
||||
<span class="balance-coin">◈</span>
|
||||
<span class="balance-val">{{ displayBalance() }}</span>
|
||||
<span class="balance-unit">cr</span>
|
||||
</span>
|
||||
<router-link to="/shop" class="shop-link">🛒 Shop</router-link>
|
||||
<span class="channel-badge"># général</span>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useWallet } from '@/composables/useWallet';
|
||||
import { useTheme } from '@/composables/useTheme';
|
||||
import ThemePicker from './ThemePicker.vue';
|
||||
|
||||
defineProps<{ connectedCount: number }>();
|
||||
|
||||
const { ip, freeMode, displayBalance } = useWallet();
|
||||
const { theme } = useTheme();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-header {
|
||||
height: 52px;
|
||||
flex-shrink: 0;
|
||||
background: var(--xip-header-bg);
|
||||
border-bottom: 1px solid var(--xip-header-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px 0 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.xip-title {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #7ab8cc;
|
||||
}
|
||||
|
||||
.chat-label {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #aaaacc;
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #44aa66;
|
||||
}
|
||||
|
||||
.online-count {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #557766;
|
||||
}
|
||||
|
||||
.me-ip {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 11px;
|
||||
color: #5566aa;
|
||||
}
|
||||
|
||||
.balance {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
background: #131322;
|
||||
border: 1px solid #2a2a44;
|
||||
border-radius: 12px;
|
||||
padding: 3px 10px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.balance-coin { color: #aa8833; font-size: 11px; }
|
||||
.balance-val { color: #ccaa44; font-size: 13px; font-weight: bold; }
|
||||
.balance-unit { color: #886633; font-size: 9px; }
|
||||
.balance--free .balance-val { color: #44aa77; }
|
||||
.balance--free .balance-coin { color: #44aa77; }
|
||||
|
||||
.shop-link {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #6699aa;
|
||||
text-decoration: none;
|
||||
border: 1px solid #33445566;
|
||||
border-radius: 12px;
|
||||
padding: 4px 12px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.shop-link:hover {
|
||||
background: #1a2530;
|
||||
}
|
||||
|
||||
.channel-badge {
|
||||
background: #131320;
|
||||
border: 1px solid #222233;
|
||||
border-radius: 12px;
|
||||
padding: 4px 14px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
color: #5555aa;
|
||||
}
|
||||
</style>
|
||||
<!-- En-tête du chat -->
|
||||
<template>
|
||||
<header class="chat-header">
|
||||
<div class="header-left">
|
||||
<span class="xip-title">XIP</span>
|
||||
<span class="chat-label">Chat</span>
|
||||
<span class="online-dot" aria-hidden="true" />
|
||||
<span class="online-count">{{ connectedCount }} connectés</span>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<ThemePicker v-model="theme" />
|
||||
<span v-if="ip" class="me-ip" :title="'Ton pseudo = ton IP'">{{ ip }}</span>
|
||||
<span class="balance" :class="{ 'balance--free': freeMode }" title="Tes crédits XIP">
|
||||
<span class="balance-coin">◈</span>
|
||||
<span class="balance-val">{{ displayBalance() }}</span>
|
||||
<span class="balance-unit">cr</span>
|
||||
</span>
|
||||
<router-link to="/shop" class="shop-link">🛒 Shop</router-link>
|
||||
<span class="channel-badge"># général</span>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useWallet } from '@/composables/useWallet';
|
||||
import { useTheme } from '@/composables/useTheme';
|
||||
import ThemePicker from './ThemePicker.vue';
|
||||
|
||||
defineProps<{ connectedCount: number }>();
|
||||
|
||||
const { ip, freeMode, displayBalance } = useWallet();
|
||||
const { theme } = useTheme();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-header {
|
||||
height: 52px;
|
||||
flex-shrink: 0;
|
||||
background: var(--xip-header-bg);
|
||||
border-bottom: 1px solid var(--xip-header-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px 0 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.xip-title {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #7ab8cc;
|
||||
}
|
||||
|
||||
.chat-label {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #aaaacc;
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #44aa66;
|
||||
}
|
||||
|
||||
.online-count {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #557766;
|
||||
}
|
||||
|
||||
.me-ip {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 11px;
|
||||
color: #5566aa;
|
||||
}
|
||||
|
||||
.balance {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
background: #131322;
|
||||
border: 1px solid #2a2a44;
|
||||
border-radius: 12px;
|
||||
padding: 3px 10px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.balance-coin { color: #aa8833; font-size: 11px; }
|
||||
.balance-val { color: #ccaa44; font-size: 13px; font-weight: bold; }
|
||||
.balance-unit { color: #886633; font-size: 9px; }
|
||||
.balance--free .balance-val { color: #44aa77; }
|
||||
.balance--free .balance-coin { color: #44aa77; }
|
||||
|
||||
.shop-link {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #6699aa;
|
||||
text-decoration: none;
|
||||
border: 1px solid #33445566;
|
||||
border-radius: 12px;
|
||||
padding: 4px 12px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.shop-link:hover {
|
||||
background: #1a2530;
|
||||
}
|
||||
|
||||
.channel-badge {
|
||||
background: #131320;
|
||||
border: 1px solid #222233;
|
||||
border-radius: 12px;
|
||||
padding: 4px 14px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
color: #5555aa;
|
||||
}
|
||||
</style>
|
||||
|
||||
41
frontend/src/components/FavButton.vue
Normal file
41
frontend/src/components/FavButton.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<!-- Bouton favori réutilisable : ⭐ partout (chat, explorateur, détail).
|
||||
Reflète et bascule l'état de la liste perso centralisée (useFavorites). -->
|
||||
<template>
|
||||
<button
|
||||
class="fav-btn"
|
||||
:class="{ 'fav-btn--on': active }"
|
||||
:title="active ? 'Retirer des favoris' : 'Ajouter aux favoris'"
|
||||
:aria-pressed="active"
|
||||
type="button"
|
||||
@click.stop="onClick"
|
||||
>{{ active ? '★' : '☆' }}</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useFavorites, type FavoriteSource } from '@/composables/useFavorites';
|
||||
|
||||
const props = defineProps<{ message: FavoriteSource }>();
|
||||
|
||||
const { isFav, toggle } = useFavorites();
|
||||
const active = computed(() => isFav(props.message.id));
|
||||
|
||||
function onClick(): void {
|
||||
toggle(props.message);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
color: #44446a;
|
||||
transition: color 0.12s, transform 0.12s;
|
||||
}
|
||||
.fav-btn:hover { color: #ffcc44; transform: scale(1.15); }
|
||||
.fav-btn--on { color: #ffcc44; }
|
||||
</style>
|
||||
@@ -1,152 +1,152 @@
|
||||
<!-- Pub casino néon : overlay dans le feed, pilotée par l'inventaire de pubs -->
|
||||
<template>
|
||||
<div v-if="ad" class="casino">
|
||||
<div class="casino-head">
|
||||
<p class="casino-title">♠ {{ ad.brand }} ♠</p>
|
||||
<p class="casino-subtitle">OFFRE EXCLUSIVE</p>
|
||||
</div>
|
||||
|
||||
<div class="casino-body">
|
||||
<p class="bonus">+200%</p>
|
||||
<p class="bonus-sub">{{ ad.subtitle || 'sur votre 1er dépôt • 500€ max' }}</p>
|
||||
|
||||
<div class="slots">
|
||||
<span class="suit suit--diamond">♦</span>
|
||||
<span class="seven">7</span>
|
||||
<span class="seven">7</span>
|
||||
<span class="seven">7</span>
|
||||
<span class="suit suit--spade">♠</span>
|
||||
</div>
|
||||
|
||||
<a class="casino-cta" :href="ad.url || '#'" target="_blank" rel="noopener noreferrer nofollow">
|
||||
{{ ad.cta || 'JOUER MAINTENANT' }} →
|
||||
</a>
|
||||
<p class="disclaimer">18+ • Jeu responsable • {{ prettyUrl(ad.url) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, watch } from 'vue';
|
||||
import { useAds } from '@/composables/useAds';
|
||||
|
||||
const { ads, fetchAds, reportImpression } = useAds('casino');
|
||||
const ad = computed(() => ads.value[0] ?? null);
|
||||
|
||||
function prettyUrl(url?: string | null): string {
|
||||
return (url || 'casino-lucky.bet').replace(/^https?:\/\//, '').replace(/\/$/, '');
|
||||
}
|
||||
|
||||
watch(ad, (a) => { if (a) reportImpression(a.id); });
|
||||
onMounted(fetchAds);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.casino {
|
||||
width: 248px;
|
||||
background: #100400;
|
||||
border: 2px solid #ff2200;
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ── En-tête rouge ── */
|
||||
.casino-head {
|
||||
background: #1a0400;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-bottom: 1px solid #440000;
|
||||
padding: 10px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.casino-title {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #ff5533;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.casino-subtitle {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 9px;
|
||||
letter-spacing: 2px;
|
||||
color: #882200;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
/* ── Corps ── */
|
||||
.casino-body {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bonus {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #ffdd00;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bonus-sub {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #cc6600;
|
||||
margin: 4px 0 10px;
|
||||
}
|
||||
|
||||
/* ── Machines à sous ── */
|
||||
.slots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.suit {
|
||||
font-size: 24px;
|
||||
}
|
||||
.suit--diamond { color: #ffaa44; }
|
||||
.suit--spade { color: #ffaa44; }
|
||||
|
||||
.seven {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
|
||||
}
|
||||
|
||||
/* ── CTA ── */
|
||||
.casino-cta {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 0;
|
||||
background: #220000;
|
||||
border: 1.5px solid #ff2200;
|
||||
border-radius: 19px;
|
||||
color: #ff4422;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.casino-cta:hover {
|
||||
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 7px;
|
||||
color: #440000;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
<!-- Pub casino néon : overlay dans le feed, pilotée par l'inventaire de pubs -->
|
||||
<template>
|
||||
<div v-if="ad" class="casino">
|
||||
<div class="casino-head">
|
||||
<p class="casino-title">♠ {{ ad.brand }} ♠</p>
|
||||
<p class="casino-subtitle">OFFRE EXCLUSIVE</p>
|
||||
</div>
|
||||
|
||||
<div class="casino-body">
|
||||
<p class="bonus">+200%</p>
|
||||
<p class="bonus-sub">{{ ad.subtitle || 'sur votre 1er dépôt • 500€ max' }}</p>
|
||||
|
||||
<div class="slots">
|
||||
<span class="suit suit--diamond">♦</span>
|
||||
<span class="seven">7</span>
|
||||
<span class="seven">7</span>
|
||||
<span class="seven">7</span>
|
||||
<span class="suit suit--spade">♠</span>
|
||||
</div>
|
||||
|
||||
<a class="casino-cta" :href="ad.url || '#'" target="_blank" rel="noopener noreferrer nofollow">
|
||||
{{ ad.cta || 'JOUER MAINTENANT' }} →
|
||||
</a>
|
||||
<p class="disclaimer">18+ • Jeu responsable • {{ prettyUrl(ad.url) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, watch } from 'vue';
|
||||
import { useAds } from '@/composables/useAds';
|
||||
|
||||
const { ads, fetchAds, reportImpression } = useAds('casino');
|
||||
const ad = computed(() => ads.value[0] ?? null);
|
||||
|
||||
function prettyUrl(url?: string | null): string {
|
||||
return (url || 'casino-lucky.bet').replace(/^https?:\/\//, '').replace(/\/$/, '');
|
||||
}
|
||||
|
||||
watch(ad, (a) => { if (a) reportImpression(a.id); });
|
||||
onMounted(fetchAds);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.casino {
|
||||
width: 248px;
|
||||
background: #100400;
|
||||
border: 2px solid #ff2200;
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ── En-tête rouge ── */
|
||||
.casino-head {
|
||||
background: #1a0400;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-bottom: 1px solid #440000;
|
||||
padding: 10px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.casino-title {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #ff5533;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.casino-subtitle {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 9px;
|
||||
letter-spacing: 2px;
|
||||
color: #882200;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
/* ── Corps ── */
|
||||
.casino-body {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bonus {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #ffdd00;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bonus-sub {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #cc6600;
|
||||
margin: 4px 0 10px;
|
||||
}
|
||||
|
||||
/* ── Machines à sous ── */
|
||||
.slots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.suit {
|
||||
font-size: 24px;
|
||||
}
|
||||
.suit--diamond { color: #ffaa44; }
|
||||
.suit--spade { color: #ffaa44; }
|
||||
|
||||
.seven {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
|
||||
}
|
||||
|
||||
/* ── CTA ── */
|
||||
.casino-cta {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 0;
|
||||
background: #220000;
|
||||
border: 1.5px solid #ff2200;
|
||||
border-radius: 19px;
|
||||
color: #ff4422;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.casino-cta:hover {
|
||||
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 7px;
|
||||
color: #440000;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,80 +1,80 @@
|
||||
<!-- Renders a message's attachments: image previews inline, everything else as a download link -->
|
||||
<template>
|
||||
<div class="attachments">
|
||||
<template v-for="a in attachments" :key="a.id">
|
||||
<a
|
||||
v-if="isImage(a)"
|
||||
class="att-image"
|
||||
:href="urlFor(a.id)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img :src="urlFor(a.id)" :alt="a.filename" loading="lazy" />
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
class="att-file"
|
||||
:href="urlFor(a.id)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
:download="a.filename"
|
||||
>
|
||||
<span class="att-icon">{{ isExe(a) ? '⚠️' : '📎' }}</span>
|
||||
<span class="att-name">{{ a.filename }}</span>
|
||||
<span class="att-size">{{ kb(a.size) }}</span>
|
||||
<span v-if="isExe(a)" class="att-warn">exécutable</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Attachment } from '@/composables/useMessages';
|
||||
import { useAttachments } from '@/composables/useAttachments';
|
||||
|
||||
defineProps<{ attachments: Attachment[] }>();
|
||||
|
||||
const { kb, urlFor } = useAttachments();
|
||||
|
||||
function isImage(a: Attachment): boolean {
|
||||
return a.mimeType.startsWith('image/');
|
||||
}
|
||||
function isExe(a: Attachment): boolean {
|
||||
return /\.(exe|bat|cmd|msi|sh|app)$/i.test(a.filename) || a.mimeType === 'application/x-msdownload';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.attachments {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 6px 25px 0;
|
||||
}
|
||||
.att-image img {
|
||||
max-width: 220px;
|
||||
max-height: 160px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #222234;
|
||||
display: block;
|
||||
}
|
||||
.att-file {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #141420;
|
||||
border: 1px solid #222234;
|
||||
border-radius: 10px;
|
||||
padding: 7px 12px;
|
||||
text-decoration: none;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.att-file:hover { background: #1c1c2e; }
|
||||
.att-icon { font-size: 14px; }
|
||||
.att-name { font-size: 12px; color: #aaccdd; }
|
||||
.att-size { font-size: 10px; color: #555577; }
|
||||
.att-warn {
|
||||
font-size: 8px; font-weight: bold; color: #ff5544;
|
||||
background: #2a0a08; border: 1px solid #662211; border-radius: 4px; padding: 1px 5px;
|
||||
}
|
||||
</style>
|
||||
<!-- Renders a message's attachments: image previews inline, everything else as a download link -->
|
||||
<template>
|
||||
<div class="attachments">
|
||||
<template v-for="a in attachments" :key="a.id">
|
||||
<a
|
||||
v-if="isImage(a)"
|
||||
class="att-image"
|
||||
:href="urlFor(a.id)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img :src="urlFor(a.id)" :alt="a.filename" loading="lazy" />
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
class="att-file"
|
||||
:href="urlFor(a.id)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
:download="a.filename"
|
||||
>
|
||||
<span class="att-icon">{{ isExe(a) ? '⚠️' : '📎' }}</span>
|
||||
<span class="att-name">{{ a.filename }}</span>
|
||||
<span class="att-size">{{ kb(a.size) }}</span>
|
||||
<span v-if="isExe(a)" class="att-warn">exécutable</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Attachment } from '@/composables/useMessages';
|
||||
import { useAttachments } from '@/composables/useAttachments';
|
||||
|
||||
defineProps<{ attachments: Attachment[] }>();
|
||||
|
||||
const { kb, urlFor } = useAttachments();
|
||||
|
||||
function isImage(a: Attachment): boolean {
|
||||
return a.mimeType.startsWith('image/');
|
||||
}
|
||||
function isExe(a: Attachment): boolean {
|
||||
return /\.(exe|bat|cmd|msi|sh|app)$/i.test(a.filename) || a.mimeType === 'application/x-msdownload';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.attachments {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 6px 25px 0;
|
||||
}
|
||||
.att-image img {
|
||||
max-width: 220px;
|
||||
max-height: 160px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #222234;
|
||||
display: block;
|
||||
}
|
||||
.att-file {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #141420;
|
||||
border: 1px solid #222234;
|
||||
border-radius: 10px;
|
||||
padding: 7px 12px;
|
||||
text-decoration: none;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.att-file:hover { background: #1c1c2e; }
|
||||
.att-icon { font-size: 14px; }
|
||||
.att-name { font-size: 12px; color: #aaccdd; }
|
||||
.att-size { font-size: 10px; color: #555577; }
|
||||
.att-warn {
|
||||
font-size: 8px; font-weight: bold; color: #ff5544;
|
||||
background: #2a0a08; border: 1px solid #662211; border-radius: 4px; padding: 1px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,238 +1,240 @@
|
||||
<!-- Un message avec ses éventuelles réponses, perks d'auteur, rich content et pièces jointes -->
|
||||
<template>
|
||||
<div class="message-item">
|
||||
<!-- Auteur + horodatage -->
|
||||
<div class="message-meta">
|
||||
<span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, message.authorIp)" :title="message.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
|
||||
<span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
|
||||
<span class="ip" :style="ipStyle(message)">{{ message.authorIp }}</span>
|
||||
<span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
|
||||
<span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
|
||||
</span>
|
||||
<span v-if="message.authorGeo && geoLabel(message.authorGeo)" class="geo-tag">
|
||||
<a :href="geoLink(message.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
|
||||
<img v-if="message.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`" :alt="message.authorGeo.countryCode" class="geo-flag" />
|
||||
<span v-else>🏠</span>
|
||||
{{ geoLabel(message.authorGeo) }}
|
||||
</a>
|
||||
</span>
|
||||
<span class="ts">{{ fmt(message.createdAt) }}</span>
|
||||
<button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: message.authorIp })" type="button">↩ répondre</button>
|
||||
</div>
|
||||
|
||||
<!-- Contenu : riche (iframe sandbox) ou texte simple -->
|
||||
<RichContent
|
||||
v-if="message.richMode && message.richMode !== 'none' && message.richContent"
|
||||
:mode="message.richMode"
|
||||
:content="message.richContent"
|
||||
/>
|
||||
<p v-else class="message-body">{{ message.content }}</p>
|
||||
|
||||
<!-- Pièces jointes -->
|
||||
<MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
|
||||
|
||||
<!-- Réponses -->
|
||||
<div
|
||||
v-for="reply in message.replies"
|
||||
:key="reply.id"
|
||||
class="reply"
|
||||
>
|
||||
<span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, reply.authorIp)" :title="reply.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
|
||||
<span v-if="petsLeft(reply)" class="pet pet--sm">{{ petsLeft(reply) }}</span>
|
||||
<span class="ip reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
|
||||
<span v-if="petsRight(reply)" class="pet pet--sm">{{ petsRight(reply) }}</span>
|
||||
</span>
|
||||
<span v-if="reply.authorGeo && geoLabel(reply.authorGeo)" class="geo-tag geo-tag--sm">
|
||||
<a :href="geoLink(reply.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
|
||||
<img v-if="reply.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${reply.authorGeo.countryCode.toLowerCase()}.png`" :alt="reply.authorGeo.countryCode" class="geo-flag" />
|
||||
<span v-else>🏠</span>
|
||||
{{ geoLabel(reply.authorGeo) }}
|
||||
</a>
|
||||
</span>
|
||||
<span class="ts">{{ fmt(reply.createdAt) }}</span>
|
||||
<button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: reply.authorIp })" type="button">↩</button>
|
||||
<RichContent
|
||||
v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
|
||||
:mode="reply.richMode"
|
||||
:content="reply.richContent"
|
||||
/>
|
||||
<p v-else class="message-body reply-body">{{ reply.content }}</p>
|
||||
<MessageAttachments v-if="reply.attachments?.length" :attachments="reply.attachments" />
|
||||
</div>
|
||||
|
||||
<div class="divider" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Message } from '@/composables/useMessages';
|
||||
import { openContextMenu } from '@/composables/useContextMenu';
|
||||
import { IP_COLOR_OPTIONS } from '@/composables/useCustomStyles';
|
||||
import { useMessageItem } from '@/composables/useMessageItem';
|
||||
import RichContent from './RichContent.vue';
|
||||
import MessageAttachments from './MessageAttachments.vue';
|
||||
|
||||
const props = defineProps<{ message: Message; myIp?: string }>();
|
||||
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
|
||||
|
||||
const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs } = useMessageItem();
|
||||
|
||||
function openIpMenu(e: MouseEvent, ip: string): void {
|
||||
if (ip !== props.myIp) return;
|
||||
|
||||
const hasElementSkin = !!myPerks.value.elementSkin;
|
||||
const ownedPets = myPerks.value.pets ?? [];
|
||||
const hasPets = ownedPets.length > 0;
|
||||
|
||||
// Nothing to show if no perk unlocks customization.
|
||||
if (!hasElementSkin && !hasPets) return;
|
||||
|
||||
const currentColor = prefs.ipColors[ip] ?? 'auto';
|
||||
const currentPet = ip in prefs.ipPets ? prefs.ipPets[ip] : '__inherit__';
|
||||
|
||||
const items: import('@/composables/useContextMenu').ContextMenuItem[] = [];
|
||||
|
||||
if (hasElementSkin) {
|
||||
items.push({ value: '__h_color', label: 'Couleur', isHeader: true });
|
||||
items.push(...IP_COLOR_OPTIONS.map((o) => ({ value: `color:${o.value}`, label: o.label, swatch: o.swatch })));
|
||||
}
|
||||
|
||||
if (hasPets) {
|
||||
items.push({ value: '__h_pet', label: 'Pet', isHeader: true });
|
||||
items.push({ value: 'pet:__inherit__', label: '↩ défaut' });
|
||||
// Show only the pets the user actually owns.
|
||||
const seen = new Set<string>();
|
||||
for (const p of ownedPets) {
|
||||
if (!seen.has(p.char)) {
|
||||
seen.add(p.char);
|
||||
items.push({ value: `pet:${p.char}`, label: p.char });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
openContextMenu({
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
title: ip,
|
||||
items,
|
||||
current: currentColor !== 'auto' ? `color:${currentColor}` : `pet:${currentPet}`,
|
||||
onSelect: (v) => {
|
||||
if (v.startsWith('color:')) {
|
||||
prefs.ipColors[ip] = v.slice(6);
|
||||
} else if (v.startsWith('pet:')) {
|
||||
const pet = v.slice(4);
|
||||
if (pet === '__inherit__') {
|
||||
delete prefs.ipPets[ip];
|
||||
} else {
|
||||
prefs.ipPets[ip] = pet;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.message-item {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.ip-wrap { display: inline-flex; align-items: baseline; gap: 4px; }
|
||||
.pet { font-size: 12px; filter: drop-shadow(0 0 3px currentColor); }
|
||||
.pet--sm { font-size: 11px; }
|
||||
.vip-badge {
|
||||
font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
|
||||
color: #ffcc44; background: #2a2206; border: 1px solid #665511; border-radius: 4px;
|
||||
padding: 0 4px; margin-left: 4px; letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.ip {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ts {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 10px;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.reply-btn {
|
||||
background: none; border: none; cursor: pointer;
|
||||
font-family: Arial, sans-serif; font-size: 10px; color: #33335a;
|
||||
padding: 0; opacity: 0; transition: opacity 0.12s, color 0.12s;
|
||||
}
|
||||
.message-item:hover .reply-btn,
|
||||
.reply:hover .reply-btn { opacity: 1; }
|
||||
.reply-btn:hover { color: #00ccff; }
|
||||
|
||||
.message-body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #c0c0c0;
|
||||
padding: 3px 25px 0;
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #141420;
|
||||
margin: 8px 25px 0;
|
||||
}
|
||||
|
||||
/* ── Réponses ── */
|
||||
.reply {
|
||||
margin: 6px 25px 0 45px;
|
||||
border-left: 2px solid #1a1a2a;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.reply-ip {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.reply-body {
|
||||
font-size: 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.geo-tag {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
color: #44445a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.geo-tag--sm { font-size: 9px; }
|
||||
.geo-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: opacity 0.12s, color 0.12s;
|
||||
}
|
||||
.geo-link:hover {
|
||||
color: #5588cc;
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.geo-flag {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
object-fit: cover;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
<!-- Un message avec ses éventuelles réponses, perks d'auteur, rich content et pièces jointes -->
|
||||
<template>
|
||||
<div class="message-item">
|
||||
<!-- Auteur + horodatage -->
|
||||
<div class="message-meta">
|
||||
<span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, message.authorIp)" :title="message.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
|
||||
<span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
|
||||
<span class="ip" :style="ipStyle(message)">{{ message.authorIp }}</span>
|
||||
<span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
|
||||
<span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
|
||||
</span>
|
||||
<span v-if="message.authorGeo && geoLabel(message.authorGeo)" class="geo-tag">
|
||||
<a :href="geoLink(message.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
|
||||
<img v-if="message.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`" :alt="message.authorGeo.countryCode" class="geo-flag" />
|
||||
<span v-else>🏠</span>
|
||||
{{ geoLabel(message.authorGeo) }}
|
||||
</a>
|
||||
</span>
|
||||
<span class="ts">{{ fmt(message.createdAt) }}</span>
|
||||
<button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: message.authorIp })" type="button">↩ répondre</button>
|
||||
<FavButton :message="message" />
|
||||
</div>
|
||||
|
||||
<!-- Contenu : riche (iframe sandbox) ou texte simple -->
|
||||
<RichContent
|
||||
v-if="message.richMode && message.richMode !== 'none' && message.richContent"
|
||||
:mode="message.richMode"
|
||||
:content="message.richContent"
|
||||
/>
|
||||
<p v-else class="message-body">{{ message.content }}</p>
|
||||
|
||||
<!-- Pièces jointes -->
|
||||
<MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
|
||||
|
||||
<!-- Réponses -->
|
||||
<div
|
||||
v-for="reply in message.replies"
|
||||
:key="reply.id"
|
||||
class="reply"
|
||||
>
|
||||
<span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, reply.authorIp)" :title="reply.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
|
||||
<span v-if="petsLeft(reply)" class="pet pet--sm">{{ petsLeft(reply) }}</span>
|
||||
<span class="ip reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
|
||||
<span v-if="petsRight(reply)" class="pet pet--sm">{{ petsRight(reply) }}</span>
|
||||
</span>
|
||||
<span v-if="reply.authorGeo && geoLabel(reply.authorGeo)" class="geo-tag geo-tag--sm">
|
||||
<a :href="geoLink(reply.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
|
||||
<img v-if="reply.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${reply.authorGeo.countryCode.toLowerCase()}.png`" :alt="reply.authorGeo.countryCode" class="geo-flag" />
|
||||
<span v-else>🏠</span>
|
||||
{{ geoLabel(reply.authorGeo) }}
|
||||
</a>
|
||||
</span>
|
||||
<span class="ts">{{ fmt(reply.createdAt) }}</span>
|
||||
<button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: reply.authorIp })" type="button">↩</button>
|
||||
<RichContent
|
||||
v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
|
||||
:mode="reply.richMode"
|
||||
:content="reply.richContent"
|
||||
/>
|
||||
<p v-else class="message-body reply-body">{{ reply.content }}</p>
|
||||
<MessageAttachments v-if="reply.attachments?.length" :attachments="reply.attachments" />
|
||||
</div>
|
||||
|
||||
<div class="divider" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Message } from '@/composables/useMessages';
|
||||
import { openContextMenu } from '@/composables/useContextMenu';
|
||||
import { IP_COLOR_OPTIONS } from '@/composables/useCustomStyles';
|
||||
import { useMessageItem } from '@/composables/useMessageItem';
|
||||
import RichContent from './RichContent.vue';
|
||||
import MessageAttachments from './MessageAttachments.vue';
|
||||
import FavButton from './FavButton.vue';
|
||||
|
||||
const props = defineProps<{ message: Message; myIp?: string }>();
|
||||
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
|
||||
|
||||
const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs } = useMessageItem();
|
||||
|
||||
function openIpMenu(e: MouseEvent, ip: string): void {
|
||||
if (ip !== props.myIp) return;
|
||||
|
||||
const hasElementSkin = !!myPerks.value.elementSkin;
|
||||
const ownedPets = myPerks.value.pets ?? [];
|
||||
const hasPets = ownedPets.length > 0;
|
||||
|
||||
// Nothing to show if no perk unlocks customization.
|
||||
if (!hasElementSkin && !hasPets) return;
|
||||
|
||||
const currentColor = prefs.ipColors[ip] ?? 'auto';
|
||||
const currentPet = ip in prefs.ipPets ? prefs.ipPets[ip] : '__inherit__';
|
||||
|
||||
const items: import('@/composables/useContextMenu').ContextMenuItem[] = [];
|
||||
|
||||
if (hasElementSkin) {
|
||||
items.push({ value: '__h_color', label: 'Couleur', isHeader: true });
|
||||
items.push(...IP_COLOR_OPTIONS.map((o) => ({ value: `color:${o.value}`, label: o.label, swatch: o.swatch })));
|
||||
}
|
||||
|
||||
if (hasPets) {
|
||||
items.push({ value: '__h_pet', label: 'Pet', isHeader: true });
|
||||
items.push({ value: 'pet:__inherit__', label: '↩ défaut' });
|
||||
// Show only the pets the user actually owns.
|
||||
const seen = new Set<string>();
|
||||
for (const p of ownedPets) {
|
||||
if (!seen.has(p.char)) {
|
||||
seen.add(p.char);
|
||||
items.push({ value: `pet:${p.char}`, label: p.char });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
openContextMenu({
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
title: ip,
|
||||
items,
|
||||
current: currentColor !== 'auto' ? `color:${currentColor}` : `pet:${currentPet}`,
|
||||
onSelect: (v) => {
|
||||
if (v.startsWith('color:')) {
|
||||
prefs.ipColors[ip] = v.slice(6);
|
||||
} else if (v.startsWith('pet:')) {
|
||||
const pet = v.slice(4);
|
||||
if (pet === '__inherit__') {
|
||||
delete prefs.ipPets[ip];
|
||||
} else {
|
||||
prefs.ipPets[ip] = pet;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.message-item {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.ip-wrap { display: inline-flex; align-items: baseline; gap: 4px; }
|
||||
.pet { font-size: 12px; filter: drop-shadow(0 0 3px currentColor); }
|
||||
.pet--sm { font-size: 11px; }
|
||||
.vip-badge {
|
||||
font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
|
||||
color: #ffcc44; background: #2a2206; border: 1px solid #665511; border-radius: 4px;
|
||||
padding: 0 4px; margin-left: 4px; letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.ip {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ts {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 10px;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.reply-btn {
|
||||
background: none; border: none; cursor: pointer;
|
||||
font-family: Arial, sans-serif; font-size: 10px; color: #33335a;
|
||||
padding: 0; opacity: 0; transition: opacity 0.12s, color 0.12s;
|
||||
}
|
||||
.message-item:hover .reply-btn,
|
||||
.reply:hover .reply-btn { opacity: 1; }
|
||||
.reply-btn:hover { color: #00ccff; }
|
||||
|
||||
.message-body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #c0c0c0;
|
||||
padding: 3px 25px 0;
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #141420;
|
||||
margin: 8px 25px 0;
|
||||
}
|
||||
|
||||
/* ── Réponses ── */
|
||||
.reply {
|
||||
margin: 6px 25px 0 45px;
|
||||
border-left: 2px solid #1a1a2a;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.reply-ip {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.reply-body {
|
||||
font-size: 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.geo-tag {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
color: #44445a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.geo-tag--sm { font-size: 9px; }
|
||||
.geo-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: opacity 0.12s, color 0.12s;
|
||||
}
|
||||
.geo-link:hover {
|
||||
color: #5588cc;
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.geo-flag {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
object-fit: cover;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,154 +1,159 @@
|
||||
<!-- Variante "bulles" du message — style chat mobile -->
|
||||
<template>
|
||||
<div class="bubble-item" :class="{ 'bubble-item--mine': isMine }">
|
||||
<div class="bubble-header">
|
||||
<span class="bubble-ip" :style="ipStyle(message)">
|
||||
<span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
|
||||
{{ message.authorIp }}
|
||||
<span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
|
||||
<span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
|
||||
</span>
|
||||
<span class="bubble-ts">{{ fmt(message.createdAt) }}</span>
|
||||
<a
|
||||
v-if="message.authorGeo && geoLabel(message.authorGeo)"
|
||||
:href="geoLink(message.authorGeo)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="geo-link"
|
||||
>
|
||||
<img
|
||||
v-if="message.authorGeo.countryCode"
|
||||
:src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`"
|
||||
:alt="message.authorGeo.countryCode"
|
||||
class="geo-flag"
|
||||
/>
|
||||
<span v-else>🏠</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Contenu -->
|
||||
<div class="bubble" :class="{ 'bubble--mine': isMine }">
|
||||
<RichContent
|
||||
v-if="message.richMode && message.richMode !== 'none' && message.richContent"
|
||||
:mode="message.richMode"
|
||||
:content="message.richContent"
|
||||
/>
|
||||
<span v-else>{{ message.content }}</span>
|
||||
</div>
|
||||
|
||||
<MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
|
||||
|
||||
<!-- Réponses en thread -->
|
||||
<div v-if="message.replies?.length" class="bubble-thread">
|
||||
<div v-for="reply in message.replies" :key="reply.id" class="bubble-reply">
|
||||
<span class="bubble-reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
|
||||
<span class="bubble-reply-ts">{{ fmt(reply.createdAt) }}</span>
|
||||
<RichContent
|
||||
v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
|
||||
:mode="reply.richMode"
|
||||
:content="reply.richContent"
|
||||
/>
|
||||
<span v-else class="bubble-reply-body">{{ reply.content }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="bubble-reply-btn"
|
||||
type="button"
|
||||
@click="$emit('reply', { id: message.id, authorIp: message.authorIp })"
|
||||
>↩</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { Message } from '@/composables/useMessages';
|
||||
import { useMessageItem } from '@/composables/useMessageItem';
|
||||
import RichContent from './RichContent.vue';
|
||||
import MessageAttachments from './MessageAttachments.vue';
|
||||
|
||||
const props = defineProps<{ message: Message; myIp?: string }>();
|
||||
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
|
||||
|
||||
const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink } = useMessageItem();
|
||||
|
||||
const isMine = computed(() => props.message.authorIp === props.myIp);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bubble-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 4px 12px;
|
||||
gap: 3px;
|
||||
position: relative;
|
||||
}
|
||||
.bubble-item--mine { align-items: flex-end; }
|
||||
|
||||
.bubble-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bubble-ip { font-weight: bold; font-size: 11px; }
|
||||
.bubble-ts { color: #303040; }
|
||||
.pet { font-size: 11px; }
|
||||
.vip-badge {
|
||||
font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
|
||||
color: #ffcc44; background: #2a2206; border: 1px solid #665511;
|
||||
border-radius: 4px; padding: 0 4px; margin-left: 2px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
background: var(--xip-bubble-other);
|
||||
border: 1px solid var(--xip-bubble-other-border);
|
||||
border-radius: 14px 14px 14px 4px;
|
||||
padding: 7px 13px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #e0e0e8;
|
||||
max-width: 72%;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.bubble--mine {
|
||||
background: var(--xip-bubble-sent);
|
||||
border-color: var(--xip-bubble-sent-border);
|
||||
border-radius: 14px 14px 4px 14px;
|
||||
color: #eef4f0;
|
||||
}
|
||||
|
||||
.bubble-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding-left: 12px;
|
||||
border-left: 2px solid #1a1a2e;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.bubble-reply {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
.bubble-reply-ip { font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; }
|
||||
.bubble-reply-ts { font-family: 'Courier New', monospace; font-size: 9px; color: #303040; }
|
||||
.bubble-reply-body { color: #888; }
|
||||
|
||||
.bubble-reply-btn {
|
||||
background: none; border: none; cursor: pointer;
|
||||
font-size: 10px; color: #33335a;
|
||||
padding: 0; opacity: 0; transition: opacity 0.12s;
|
||||
}
|
||||
.bubble-item:hover .bubble-reply-btn { opacity: 1; }
|
||||
.bubble-reply-btn:hover { color: #00ccff; }
|
||||
|
||||
.geo-link { color: #44445a; text-decoration: none; display: inline-flex; align-items: center; }
|
||||
.geo-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }
|
||||
</style>
|
||||
<!-- Variante "bulles" du message — style chat mobile -->
|
||||
<template>
|
||||
<div class="bubble-item" :class="{ 'bubble-item--mine': isMine }">
|
||||
<div class="bubble-header">
|
||||
<span class="bubble-ip" :style="ipStyle(message)">
|
||||
<span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
|
||||
{{ message.authorIp }}
|
||||
<span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
|
||||
<span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
|
||||
</span>
|
||||
<span class="bubble-ts">{{ fmt(message.createdAt) }}</span>
|
||||
<a
|
||||
v-if="message.authorGeo && geoLabel(message.authorGeo)"
|
||||
:href="geoLink(message.authorGeo)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="geo-link"
|
||||
>
|
||||
<img
|
||||
v-if="message.authorGeo.countryCode"
|
||||
:src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`"
|
||||
:alt="message.authorGeo.countryCode"
|
||||
class="geo-flag"
|
||||
/>
|
||||
<span v-else>🏠</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Contenu -->
|
||||
<div class="bubble" :class="{ 'bubble--mine': isMine }">
|
||||
<RichContent
|
||||
v-if="message.richMode && message.richMode !== 'none' && message.richContent"
|
||||
:mode="message.richMode"
|
||||
:content="message.richContent"
|
||||
/>
|
||||
<span v-else>{{ message.content }}</span>
|
||||
</div>
|
||||
|
||||
<MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
|
||||
|
||||
<!-- Réponses en thread -->
|
||||
<div v-if="message.replies?.length" class="bubble-thread">
|
||||
<div v-for="reply in message.replies" :key="reply.id" class="bubble-reply">
|
||||
<span class="bubble-reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
|
||||
<span class="bubble-reply-ts">{{ fmt(reply.createdAt) }}</span>
|
||||
<RichContent
|
||||
v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
|
||||
:mode="reply.richMode"
|
||||
:content="reply.richContent"
|
||||
/>
|
||||
<span v-else class="bubble-reply-body">{{ reply.content }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bubble-actions">
|
||||
<button
|
||||
class="bubble-reply-btn"
|
||||
type="button"
|
||||
@click="$emit('reply', { id: message.id, authorIp: message.authorIp })"
|
||||
>↩</button>
|
||||
<FavButton :message="message" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { Message } from '@/composables/useMessages';
|
||||
import { useMessageItem } from '@/composables/useMessageItem';
|
||||
import RichContent from './RichContent.vue';
|
||||
import MessageAttachments from './MessageAttachments.vue';
|
||||
import FavButton from './FavButton.vue';
|
||||
|
||||
const props = defineProps<{ message: Message; myIp?: string }>();
|
||||
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
|
||||
|
||||
const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink } = useMessageItem();
|
||||
|
||||
const isMine = computed(() => props.message.authorIp === props.myIp);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bubble-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 4px 12px;
|
||||
gap: 3px;
|
||||
position: relative;
|
||||
}
|
||||
.bubble-item--mine { align-items: flex-end; }
|
||||
|
||||
.bubble-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bubble-ip { font-weight: bold; font-size: 11px; }
|
||||
.bubble-ts { color: #303040; }
|
||||
.pet { font-size: 11px; }
|
||||
.vip-badge {
|
||||
font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
|
||||
color: #ffcc44; background: #2a2206; border: 1px solid #665511;
|
||||
border-radius: 4px; padding: 0 4px; margin-left: 2px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
background: var(--xip-bubble-other);
|
||||
border: 1px solid var(--xip-bubble-other-border);
|
||||
border-radius: 14px 14px 14px 4px;
|
||||
padding: 7px 13px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #e0e0e8;
|
||||
max-width: 72%;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.bubble--mine {
|
||||
background: var(--xip-bubble-sent);
|
||||
border-color: var(--xip-bubble-sent-border);
|
||||
border-radius: 14px 14px 4px 14px;
|
||||
color: #eef4f0;
|
||||
}
|
||||
|
||||
.bubble-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding-left: 12px;
|
||||
border-left: 2px solid #1a1a2e;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.bubble-reply {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
.bubble-reply-ip { font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; }
|
||||
.bubble-reply-ts { font-family: 'Courier New', monospace; font-size: 9px; color: #303040; }
|
||||
.bubble-reply-body { color: #888; }
|
||||
|
||||
.bubble-actions { display: flex; align-items: center; gap: 8px; }
|
||||
.bubble-reply-btn {
|
||||
background: none; border: none; cursor: pointer;
|
||||
font-size: 10px; color: #33335a;
|
||||
padding: 0; opacity: 0; transition: opacity 0.12s;
|
||||
}
|
||||
.bubble-item:hover .bubble-reply-btn { opacity: 1; }
|
||||
.bubble-reply-btn:hover { color: #00ccff; }
|
||||
|
||||
.geo-link { color: #44445a; text-decoration: none; display: inline-flex; align-items: center; }
|
||||
.geo-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }
|
||||
</style>
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
type="button"
|
||||
@click="$emit('reply', { id: message.id, authorIp: message.authorIp })"
|
||||
>↩</button>
|
||||
<FavButton :message="message" />
|
||||
</div>
|
||||
|
||||
<MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
|
||||
@@ -50,6 +51,7 @@ import type { Message } from '@/composables/useMessages';
|
||||
import { useMessageItem } from '@/composables/useMessageItem';
|
||||
import RichContent from './RichContent.vue';
|
||||
import MessageAttachments from './MessageAttachments.vue';
|
||||
import FavButton from './FavButton.vue';
|
||||
|
||||
defineProps<{ message: Message; myIp?: string }>();
|
||||
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
|
||||
|
||||
@@ -1,98 +1,98 @@
|
||||
<!-- Zone de messages scrollable avec la pub casino en overlay -->
|
||||
<template>
|
||||
<div class="feed-wrapper">
|
||||
<div ref="listEl" class="feed-scroll">
|
||||
<TransitionGroup name="msg" tag="div">
|
||||
<component
|
||||
:is="messageComponent"
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
:message="msg"
|
||||
:my-ip="myIp"
|
||||
@reply="$emit('reply', $event)"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
<div v-if="messages.length === 0" class="feed-empty">
|
||||
Aucun message pour l'instant.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pub casino : overlay absolu sur la droite du feed (masqué si NoAds) -->
|
||||
<InlineCasinoAd v-if="!hideAds" class="casino-overlay" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, nextTick } from 'vue';
|
||||
import type { Message } from '@/composables/useMessages';
|
||||
import { useTheme, THEME_LAYOUT, type Layout } from '@/composables/useTheme';
|
||||
import MessageItem from './MessageItem.vue';
|
||||
import MessageItemBubble from './MessageItemBubble.vue';
|
||||
import MessageItemCompact from './MessageItemCompact.vue';
|
||||
import InlineCasinoAd from './InlineCasinoAd.vue';
|
||||
|
||||
const props = defineProps<{ messages: Message[]; hideAds?: boolean; myIp?: string }>();
|
||||
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
|
||||
|
||||
const { theme } = useTheme();
|
||||
|
||||
// One component per layout family. The `?? MessageItem` fallback guarantees a
|
||||
// missing/unknown layout can never produce `<component :is="undefined">`.
|
||||
const LAYOUT_COMPONENT: Record<Layout, typeof MessageItem> = {
|
||||
classic: MessageItem,
|
||||
bubble: MessageItemBubble,
|
||||
compact: MessageItemCompact,
|
||||
};
|
||||
const messageComponent = computed(
|
||||
() => LAYOUT_COMPONENT[THEME_LAYOUT[theme.value]] ?? MessageItem,
|
||||
);
|
||||
|
||||
const listEl = ref<HTMLElement | null>(null);
|
||||
|
||||
watch(
|
||||
() => props.messages.length,
|
||||
async () => {
|
||||
await nextTick();
|
||||
listEl.value?.scrollTo({ top: listEl.value.scrollHeight, behavior: 'smooth' });
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.feed-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.feed-scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #252535 #080810;
|
||||
}
|
||||
.feed-scroll::-webkit-scrollbar { width: 8px; }
|
||||
.feed-scroll::-webkit-scrollbar-track { background: #080810; }
|
||||
.feed-scroll::-webkit-scrollbar-thumb { background: #252535; border-radius: 3px; }
|
||||
|
||||
.feed-empty {
|
||||
padding: 48px 25px;
|
||||
color: #2a2a44;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.casino-overlay {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 20px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.casino-overlay :deep(.casino-cta) { pointer-events: all; }
|
||||
|
||||
/* Transition d'entrée des nouveaux messages */
|
||||
.msg-enter-active { transition: opacity 0.2s ease, transform 0.2s ease; }
|
||||
.msg-enter-from { opacity: 0; transform: translateY(6px); }
|
||||
</style>
|
||||
<!-- Zone de messages scrollable avec la pub casino en overlay -->
|
||||
<template>
|
||||
<div class="feed-wrapper">
|
||||
<div ref="listEl" class="feed-scroll">
|
||||
<TransitionGroup name="msg" tag="div">
|
||||
<component
|
||||
:is="messageComponent"
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
:message="msg"
|
||||
:my-ip="myIp"
|
||||
@reply="$emit('reply', $event)"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
<div v-if="messages.length === 0" class="feed-empty">
|
||||
Aucun message pour l'instant.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pub casino : overlay absolu sur la droite du feed (masqué si NoAds) -->
|
||||
<InlineCasinoAd v-if="!hideAds" class="casino-overlay" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, nextTick } from 'vue';
|
||||
import type { Message } from '@/composables/useMessages';
|
||||
import { useTheme, THEME_LAYOUT, type Layout } from '@/composables/useTheme';
|
||||
import MessageItem from './MessageItem.vue';
|
||||
import MessageItemBubble from './MessageItemBubble.vue';
|
||||
import MessageItemCompact from './MessageItemCompact.vue';
|
||||
import InlineCasinoAd from './InlineCasinoAd.vue';
|
||||
|
||||
const props = defineProps<{ messages: Message[]; hideAds?: boolean; myIp?: string }>();
|
||||
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
|
||||
|
||||
const { theme } = useTheme();
|
||||
|
||||
// One component per layout family. The `?? MessageItem` fallback guarantees a
|
||||
// missing/unknown layout can never produce `<component :is="undefined">`.
|
||||
const LAYOUT_COMPONENT: Record<Layout, typeof MessageItem> = {
|
||||
classic: MessageItem,
|
||||
bubble: MessageItemBubble,
|
||||
compact: MessageItemCompact,
|
||||
};
|
||||
const messageComponent = computed(
|
||||
() => LAYOUT_COMPONENT[THEME_LAYOUT[theme.value]] ?? MessageItem,
|
||||
);
|
||||
|
||||
const listEl = ref<HTMLElement | null>(null);
|
||||
|
||||
watch(
|
||||
() => props.messages.length,
|
||||
async () => {
|
||||
await nextTick();
|
||||
listEl.value?.scrollTo({ top: listEl.value.scrollHeight, behavior: 'smooth' });
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.feed-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.feed-scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #252535 #080810;
|
||||
}
|
||||
.feed-scroll::-webkit-scrollbar { width: 8px; }
|
||||
.feed-scroll::-webkit-scrollbar-track { background: #080810; }
|
||||
.feed-scroll::-webkit-scrollbar-thumb { background: #252535; border-radius: 3px; }
|
||||
|
||||
.feed-empty {
|
||||
padding: 48px 25px;
|
||||
color: #2a2a44;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.casino-overlay {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 20px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.casino-overlay :deep(.casino-cta) { pointer-events: all; }
|
||||
|
||||
/* Transition d'entrée des nouveaux messages */
|
||||
.msg-enter-active { transition: opacity 0.2s ease, transform 0.2s ease; }
|
||||
.msg-enter-from { opacity: 0; transform: translateY(6px); }
|
||||
</style>
|
||||
|
||||
64
frontend/src/components/Modal.vue
Normal file
64
frontend/src/components/Modal.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<!-- Modale réutilisable rendue HORS de l'arbre DOM courant (Teleport to body).
|
||||
Contenu injecté par le parent via slots (défaut = corps, #title = en-tête).
|
||||
Ferme au clic extérieur (v-click-outside) ou sur Échap. -->
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="modal">
|
||||
<div v-if="open" class="modal-backdrop">
|
||||
<div class="modal-card" v-click-outside="close" role="dialog" aria-modal="true">
|
||||
<header class="modal-head">
|
||||
<h3 class="modal-title"><slot name="title">{{ title }}</slot></h3>
|
||||
<button class="modal-x" type="button" title="Fermer" @click="close">✕</button>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, onBeforeUnmount } from 'vue';
|
||||
import { vClickOutside } from '@/directives/clickOutside';
|
||||
|
||||
const props = defineProps<{ open: boolean; title?: string }>();
|
||||
const emit = defineEmits<{ 'update:open': [v: boolean] }>();
|
||||
|
||||
function close(): void { emit('update:open', false); }
|
||||
|
||||
function onKey(e: KeyboardEvent): void {
|
||||
if (e.key === 'Escape') close();
|
||||
}
|
||||
watch(() => props.open, (v) => {
|
||||
if (v) document.addEventListener('keydown', onKey);
|
||||
else document.removeEventListener('keydown', onKey);
|
||||
});
|
||||
onBeforeUnmount(() => document.removeEventListener('keydown', onKey));
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed; inset: 0; z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.modal-card {
|
||||
width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto;
|
||||
background: #101018; border: 1px solid #2a2a44; border-radius: 12px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.modal-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 18px; border-bottom: 1px solid #20203a;
|
||||
}
|
||||
.modal-title { font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; color: #ccccee; margin: 0; }
|
||||
.modal-x { background: none; border: none; color: #55557a; cursor: pointer; font-size: 15px; }
|
||||
.modal-x:hover { color: #aaa; }
|
||||
.modal-body { padding: 18px; }
|
||||
|
||||
.modal-enter-active, .modal-leave-active { transition: opacity 0.18s ease; }
|
||||
.modal-enter-from, .modal-leave-to { opacity: 0; }
|
||||
</style>
|
||||
@@ -1,108 +1,108 @@
|
||||
<!--
|
||||
Rich message renderer.
|
||||
|
||||
Sandbox policy:
|
||||
- htmlcss: sandbox="" (empty) + meta CSP → scripts totalement inertes
|
||||
- js: sandbox avec tous les tokens SAUF allow-same-origin
|
||||
→ scripts libres, fetch vers l'extérieur OK, accès parent impossible
|
||||
(null origin = isolation réelle sans allow-same-origin)
|
||||
-->
|
||||
<template>
|
||||
<div class="rich-frame-wrap">
|
||||
<span class="rich-tag" :class="`rich-tag--${mode}`">
|
||||
{{ mode === 'js' ? '⚡ JS' : '🎨 HTML/CSS' }} · bac à sable
|
||||
</span>
|
||||
<iframe
|
||||
ref="frameRef"
|
||||
class="rich-frame"
|
||||
:sandbox="sandboxTokens"
|
||||
:srcdoc="srcdoc"
|
||||
referrerpolicy="no-referrer"
|
||||
loading="lazy"
|
||||
title="Message riche (isolé)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, useTemplateRef, watchEffect } from 'vue';
|
||||
|
||||
const props = defineProps<{ mode: 'htmlcss' | 'js'; content: string }>();
|
||||
|
||||
const frameRef = useTemplateRef<HTMLIFrameElement>('frameRef');
|
||||
|
||||
// htmlcss → aucun script ; js → tout permis sauf accès au parent (pas de allow-same-origin)
|
||||
const sandboxTokens = computed(() =>
|
||||
props.mode === 'js'
|
||||
? 'allow-scripts allow-forms allow-modals allow-downloads allow-popups allow-presentation allow-pointer-lock'
|
||||
: ''
|
||||
);
|
||||
|
||||
// Garde de sécurité réactive — allow-scripts + allow-same-origin = catastrophe
|
||||
watchEffect(() => {
|
||||
const tokens = sandboxTokens.value;
|
||||
if (tokens.includes('allow-scripts') && tokens.includes('allow-same-origin')) {
|
||||
throw new Error('SECURITY: rich iframe must never combine allow-scripts + allow-same-origin');
|
||||
}
|
||||
});
|
||||
|
||||
const srcdoc = computed(() => {
|
||||
// htmlcss : meta CSP en second couche (le sandbox="" bloque déjà les scripts)
|
||||
// js : pas de meta CSP — le sandbox null-origin est la vraie frontière
|
||||
const metaCsp = props.mode === 'htmlcss'
|
||||
? `<meta http-equiv="Content-Security-Policy"
|
||||
content="default-src 'none'; style-src 'unsafe-inline'; img-src data: https:; font-src data:;">`
|
||||
: '';
|
||||
|
||||
return `<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
${metaCsp}
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
color: #ddd;
|
||||
font-family: Arial, sans-serif;
|
||||
background: #0a0a12;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>${props.content}</body>
|
||||
</html>`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rich-frame-wrap {
|
||||
position: relative;
|
||||
margin: 6px 25px 0;
|
||||
}
|
||||
.rich-tag {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 8px;
|
||||
z-index: 1;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.rich-tag--htmlcss { color: #00ddaa; background: #062019; border: 1px solid #0a4435; }
|
||||
.rich-tag--js { color: #ffcc44; background: #201a06; border: 1px solid #443a0a; }
|
||||
|
||||
.rich-frame {
|
||||
width: 480px;
|
||||
max-width: 100%;
|
||||
height: 270px;
|
||||
border: 1px solid #222234;
|
||||
border-radius: 8px;
|
||||
background: #0a0a12;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
Rich message renderer.
|
||||
|
||||
Sandbox policy:
|
||||
- htmlcss: sandbox="" (empty) + meta CSP → scripts totalement inertes
|
||||
- js: sandbox avec tous les tokens SAUF allow-same-origin
|
||||
→ scripts libres, fetch vers l'extérieur OK, accès parent impossible
|
||||
(null origin = isolation réelle sans allow-same-origin)
|
||||
-->
|
||||
<template>
|
||||
<div class="rich-frame-wrap">
|
||||
<span class="rich-tag" :class="`rich-tag--${mode}`">
|
||||
{{ mode === 'js' ? '⚡ JS' : '🎨 HTML/CSS' }} · bac à sable
|
||||
</span>
|
||||
<iframe
|
||||
ref="frameRef"
|
||||
class="rich-frame"
|
||||
:sandbox="sandboxTokens"
|
||||
:srcdoc="srcdoc"
|
||||
referrerpolicy="no-referrer"
|
||||
loading="lazy"
|
||||
title="Message riche (isolé)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, useTemplateRef, watchEffect } from 'vue';
|
||||
|
||||
const props = defineProps<{ mode: 'htmlcss' | 'js'; content: string }>();
|
||||
|
||||
const frameRef = useTemplateRef<HTMLIFrameElement>('frameRef');
|
||||
|
||||
// htmlcss → aucun script ; js → tout permis sauf accès au parent (pas de allow-same-origin)
|
||||
const sandboxTokens = computed(() =>
|
||||
props.mode === 'js'
|
||||
? 'allow-scripts allow-forms allow-modals allow-downloads allow-popups allow-presentation allow-pointer-lock'
|
||||
: ''
|
||||
);
|
||||
|
||||
// Garde de sécurité réactive — allow-scripts + allow-same-origin = catastrophe
|
||||
watchEffect(() => {
|
||||
const tokens = sandboxTokens.value;
|
||||
if (tokens.includes('allow-scripts') && tokens.includes('allow-same-origin')) {
|
||||
throw new Error('SECURITY: rich iframe must never combine allow-scripts + allow-same-origin');
|
||||
}
|
||||
});
|
||||
|
||||
const srcdoc = computed(() => {
|
||||
// htmlcss : meta CSP en second couche (le sandbox="" bloque déjà les scripts)
|
||||
// js : pas de meta CSP — le sandbox null-origin est la vraie frontière
|
||||
const metaCsp = props.mode === 'htmlcss'
|
||||
? `<meta http-equiv="Content-Security-Policy"
|
||||
content="default-src 'none'; style-src 'unsafe-inline'; img-src data: https:; font-src data:;">`
|
||||
: '';
|
||||
|
||||
return `<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
${metaCsp}
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
color: #ddd;
|
||||
font-family: Arial, sans-serif;
|
||||
background: #0a0a12;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>${props.content}</body>
|
||||
</html>`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rich-frame-wrap {
|
||||
position: relative;
|
||||
margin: 6px 25px 0;
|
||||
}
|
||||
.rich-tag {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 8px;
|
||||
z-index: 1;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.rich-tag--htmlcss { color: #00ddaa; background: #062019; border: 1px solid #0a4435; }
|
||||
.rich-tag--js { color: #ffcc44; background: #201a06; border: 1px solid #443a0a; }
|
||||
|
||||
.rich-frame {
|
||||
width: 480px;
|
||||
max-width: 100%;
|
||||
height: 270px;
|
||||
border: 1px solid #222234;
|
||||
border-radius: 8px;
|
||||
background: #0a0a12;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
34
frontend/src/components/SearchBox.spec.ts
Normal file
34
frontend/src/components/SearchBox.spec.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import SearchBox from './SearchBox.vue';
|
||||
|
||||
describe('SearchBox (interaction composant + v-model debouncé)', () => {
|
||||
beforeEach(() => vi.useFakeTimers());
|
||||
afterEach(() => vi.useRealTimers());
|
||||
|
||||
it('n’émet la valeur qu’après le délai de debounce', async () => {
|
||||
const wrapper = mount(SearchBox, { props: { modelValue: '', delay: 300 } });
|
||||
const input = wrapper.find('input');
|
||||
|
||||
await input.setValue('vue');
|
||||
// Avant le délai : rien n'est émis vers le parent.
|
||||
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||
|
||||
vi.advanceTimersByTime(300);
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
const emitted = wrapper.emitted('update:modelValue');
|
||||
expect(emitted).toBeTruthy();
|
||||
expect(emitted![emitted!.length - 1]).toEqual(['vue']);
|
||||
});
|
||||
|
||||
it('le bouton clear vide la valeur immédiatement', async () => {
|
||||
const wrapper = mount(SearchBox, { props: { modelValue: 'déjà', delay: 300 } });
|
||||
await wrapper.find('input').setValue('texte');
|
||||
await wrapper.find('.search-clear').trigger('click');
|
||||
|
||||
const emitted = wrapper.emitted('update:modelValue');
|
||||
expect(emitted).toBeTruthy();
|
||||
expect(emitted![emitted!.length - 1]).toEqual(['']);
|
||||
});
|
||||
});
|
||||
83
frontend/src/components/SearchBox.vue
Normal file
83
frontend/src/components/SearchBox.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<!-- Champ de recherche réutilisable avec liaison bidirectionnelle personnalisée
|
||||
(v-model) + debounce interne. Se branche comme un input natif :
|
||||
<SearchBox v-model="query" placeholder="…" />. Le parent ne reçoit la
|
||||
nouvelle valeur qu'après une pause de frappe. -->
|
||||
<template>
|
||||
<div class="search-box">
|
||||
<span class="search-icon">🔎</span>
|
||||
<input
|
||||
ref="inputEl"
|
||||
class="search-input"
|
||||
type="text"
|
||||
:value="text"
|
||||
:placeholder="placeholder"
|
||||
@input="onInput"
|
||||
@keydown.escape="clearNow"
|
||||
/>
|
||||
<button v-if="text" class="search-clear" type="button" title="Effacer" @click="clearNow">✕</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onBeforeUnmount } from 'vue';
|
||||
import { debounce } from '@/composables/useDebounce';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{ placeholder?: string; delay?: number }>(),
|
||||
{ placeholder: 'Rechercher…', delay: 350 },
|
||||
);
|
||||
|
||||
// Liaison bidirectionnelle personnalisée : la prop modelValue + l'event update.
|
||||
const model = defineModel<string>({ default: '' });
|
||||
|
||||
// Copie locale réactive pour un affichage immédiat ; le modèle parent n'est
|
||||
// mis à jour qu'après le debounce.
|
||||
const text = ref(model.value);
|
||||
|
||||
// Si le parent change la valeur (ex. reset), refléter dans le champ.
|
||||
watch(model, (v) => { if (v !== text.value) text.value = v; });
|
||||
|
||||
const pushModel = debounce((v: string) => { model.value = v; }, props.delay);
|
||||
|
||||
function onInput(e: Event): void {
|
||||
text.value = (e.target as HTMLInputElement).value;
|
||||
pushModel(text.value);
|
||||
}
|
||||
|
||||
function clearNow(): void {
|
||||
pushModel.cancel();
|
||||
text.value = '';
|
||||
model.value = '';
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => pushModel.cancel());
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #141420;
|
||||
border: 1px solid #222234;
|
||||
border-radius: 23px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.search-box:focus-within { border-color: #333355; }
|
||||
.search-icon { font-size: 13px; opacity: 0.6; }
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #aaaacc;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
.search-input::placeholder { color: #2a2a44; }
|
||||
.search-clear {
|
||||
background: none; border: none; cursor: pointer;
|
||||
color: #55557a; font-size: 12px;
|
||||
}
|
||||
.search-clear:hover { color: #aaa; }
|
||||
</style>
|
||||
@@ -1,97 +1,97 @@
|
||||
<!-- Bouton d'envoi — clic gauche : envoyer / clic droit : personnaliser le style -->
|
||||
<template>
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="disabled"
|
||||
:style="btnStyle"
|
||||
aria-label="Envoyer"
|
||||
title="Clic droit pour personnaliser"
|
||||
@click="$emit('send')"
|
||||
@contextmenu.prevent="onRightClick"
|
||||
>
|
||||
<span v-if="activeSkinChar" class="skin-char">{{ activeSkinChar }}</span>
|
||||
<svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
||||
<polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { openContextMenu } from '@/composables/useContextMenu';
|
||||
import { useCustomStyles, SEND_BUTTON_PRESETS } from '@/composables/useCustomStyles';
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
|
||||
defineProps<{ disabled?: boolean }>();
|
||||
defineEmits<{ send: [] }>();
|
||||
|
||||
const { prefs } = useCustomStyles();
|
||||
const { myPerks } = useMyPerks();
|
||||
|
||||
const activeSkinChar = computed(() => {
|
||||
const skinId = prefs.sendSkin;
|
||||
if (!skinId) return null;
|
||||
return myPerks.value.sendSkins?.find((s) => s.id === skinId)?.char ?? null;
|
||||
});
|
||||
|
||||
const btnStyle = computed(() => {
|
||||
// On the default preset, defer to the theme's CSS variables (so e.g. the
|
||||
// WhatsApp theme tints the button green). A chosen preset overrides the theme.
|
||||
if (prefs.sendButton === 'default') return {};
|
||||
const p = SEND_BUTTON_PRESETS[prefs.sendButton];
|
||||
return { background: p.bg, color: p.color, borderRadius: p.radius };
|
||||
});
|
||||
|
||||
function onRightClick(e: MouseEvent): void {
|
||||
const skins = myPerks.value.sendSkins ?? [];
|
||||
const items: import('@/composables/useContextMenu').ContextMenuItem[] = [
|
||||
...Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
|
||||
value: k,
|
||||
label: v.label,
|
||||
swatch: v.color,
|
||||
checked: prefs.sendButton === k,
|
||||
})),
|
||||
];
|
||||
if (skins.length > 0) {
|
||||
items.push({ value: '__skin_header__', label: 'Skin', isHeader: true });
|
||||
items.push({ value: '__default_skin__', label: 'Défaut', emoji: '▶', checked: prefs.sendSkin === '' });
|
||||
for (const s of skins) {
|
||||
items.push({ value: s.id, label: s.label ?? s.id.replace('send-skin-', ''), emoji: s.char, checked: prefs.sendSkin === s.id });
|
||||
}
|
||||
}
|
||||
openContextMenu({
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
title: 'Bouton d\'envoi',
|
||||
items,
|
||||
current: '',
|
||||
onSelect: (v) => {
|
||||
if (v === '__default_skin__') { prefs.sendSkin = ''; }
|
||||
else if (v.startsWith('send-skin-')) { prefs.sendSkin = v; }
|
||||
else { prefs.sendButton = v as typeof prefs.sendButton; }
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.send-btn {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #ffffff10;
|
||||
border-radius: 50%;
|
||||
/* Defaults from the theme palette; a chosen preset overrides via inline style. */
|
||||
background: var(--xip-send-bg);
|
||||
color: var(--xip-send-fg);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
.send-btn:hover:not(:disabled) { filter: brightness(1.3); }
|
||||
.send-btn:active:not(:disabled) { filter: brightness(0.85); }
|
||||
.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
||||
.skin-char { font-size: 18px; line-height: 1; }
|
||||
</style>
|
||||
<!-- Bouton d'envoi — clic gauche : envoyer / clic droit : personnaliser le style -->
|
||||
<template>
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="disabled"
|
||||
:style="btnStyle"
|
||||
aria-label="Envoyer"
|
||||
title="Clic droit pour personnaliser"
|
||||
@click="$emit('send')"
|
||||
@contextmenu.prevent="onRightClick"
|
||||
>
|
||||
<span v-if="activeSkinChar" class="skin-char">{{ activeSkinChar }}</span>
|
||||
<svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
||||
<polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { openContextMenu } from '@/composables/useContextMenu';
|
||||
import { useCustomStyles, SEND_BUTTON_PRESETS } from '@/composables/useCustomStyles';
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
|
||||
defineProps<{ disabled?: boolean }>();
|
||||
defineEmits<{ send: [] }>();
|
||||
|
||||
const { prefs } = useCustomStyles();
|
||||
const { myPerks } = useMyPerks();
|
||||
|
||||
const activeSkinChar = computed(() => {
|
||||
const skinId = prefs.sendSkin;
|
||||
if (!skinId) return null;
|
||||
return myPerks.value.sendSkins?.find((s) => s.id === skinId)?.char ?? null;
|
||||
});
|
||||
|
||||
const btnStyle = computed(() => {
|
||||
// On the default preset, defer to the theme's CSS variables (so e.g. the
|
||||
// WhatsApp theme tints the button green). A chosen preset overrides the theme.
|
||||
if (prefs.sendButton === 'default') return {};
|
||||
const p = SEND_BUTTON_PRESETS[prefs.sendButton];
|
||||
return { background: p.bg, color: p.color, borderRadius: p.radius };
|
||||
});
|
||||
|
||||
function onRightClick(e: MouseEvent): void {
|
||||
const skins = myPerks.value.sendSkins ?? [];
|
||||
const items: import('@/composables/useContextMenu').ContextMenuItem[] = [
|
||||
...Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
|
||||
value: k,
|
||||
label: v.label,
|
||||
swatch: v.color,
|
||||
checked: prefs.sendButton === k,
|
||||
})),
|
||||
];
|
||||
if (skins.length > 0) {
|
||||
items.push({ value: '__skin_header__', label: 'Skin', isHeader: true });
|
||||
items.push({ value: '__default_skin__', label: 'Défaut', emoji: '▶', checked: prefs.sendSkin === '' });
|
||||
for (const s of skins) {
|
||||
items.push({ value: s.id, label: s.label ?? s.id.replace('send-skin-', ''), emoji: s.char, checked: prefs.sendSkin === s.id });
|
||||
}
|
||||
}
|
||||
openContextMenu({
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
title: 'Bouton d\'envoi',
|
||||
items,
|
||||
current: '',
|
||||
onSelect: (v) => {
|
||||
if (v === '__default_skin__') { prefs.sendSkin = ''; }
|
||||
else if (v.startsWith('send-skin-')) { prefs.sendSkin = v; }
|
||||
else { prefs.sendButton = v as typeof prefs.sendButton; }
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.send-btn {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #ffffff10;
|
||||
border-radius: 50%;
|
||||
/* Defaults from the theme palette; a chosen preset overrides via inline style. */
|
||||
background: var(--xip-send-bg);
|
||||
color: var(--xip-send-fg);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
.send-btn:hover:not(:disabled) { filter: brightness(1.3); }
|
||||
.send-btn:active:not(:disabled) { filter: brightness(0.85); }
|
||||
.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
||||
.skin-char { font-size: 18px; line-height: 1; }
|
||||
</style>
|
||||
|
||||
@@ -1,216 +1,216 @@
|
||||
<!-- Bandeau de stats permanent façon téléscripteur néon (casino / bourse). -->
|
||||
<template>
|
||||
<div class="ticker" :class="{ 'is-off': !connected }">
|
||||
<!-- Badge LIVE fixe à gauche -->
|
||||
<div class="ticker-badge">
|
||||
<span class="ticker-dot" />
|
||||
<span class="ticker-badge-txt">{{ connected ? 'LIVE' : '···' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Piste défilante (2 groupes identiques pour une boucle sans couture) -->
|
||||
<div class="ticker-viewport">
|
||||
<div class="ticker-track">
|
||||
<div
|
||||
v-for="copy in 2"
|
||||
:key="copy"
|
||||
class="ticker-group"
|
||||
:aria-hidden="copy === 2 ? 'true' : undefined"
|
||||
>
|
||||
<span
|
||||
v-for="item in items"
|
||||
:key="item.key + '-' + copy"
|
||||
class="chip"
|
||||
:class="`chip--${item.tone}`"
|
||||
>
|
||||
<span class="chip-val">
|
||||
<AnimatedNumber :value="item.value" :decimals="item.decimals ?? 0" />
|
||||
<span v-if="item.unit" class="chip-unit">{{ item.unit }}</span>
|
||||
</span>
|
||||
<span class="chip-label">{{ item.label }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import AnimatedNumber from './AnimatedNumber.vue';
|
||||
import type { Stats } from '@/composables/useRealtime';
|
||||
|
||||
const props = defineProps<{ stats: Stats | null; connected: boolean }>();
|
||||
|
||||
type Tone = 'cyan' | 'green' | 'magenta' | 'orange' | 'plain';
|
||||
interface Chip {
|
||||
key: string;
|
||||
label: string;
|
||||
value: number;
|
||||
tone: Tone;
|
||||
unit?: string;
|
||||
decimals?: number;
|
||||
}
|
||||
|
||||
const ZERO: Stats = {
|
||||
connectedTabs: 0,
|
||||
typingNow: 0,
|
||||
lettersPerSec: 0,
|
||||
msgsPerMin: 0,
|
||||
messages: 0,
|
||||
replies: 0,
|
||||
charsSent: 0,
|
||||
lettersTyped: 0,
|
||||
uniqueIps: 0,
|
||||
longestMsg: 0,
|
||||
abandonRate: 0,
|
||||
avgLength: 0,
|
||||
moneyExtorted: 0,
|
||||
};
|
||||
|
||||
const items = computed<Chip[]>(() => {
|
||||
const s = props.stats ?? ZERO;
|
||||
return [
|
||||
{ key: 'tabs', label: 'onglets connectés', value: s.connectedTabs, tone: 'cyan' },
|
||||
{ key: 'typing', label: 'écrivent là', value: s.typingNow, tone: 'green' },
|
||||
{ key: 'lps', label: 'lettres / s', value: s.lettersPerSec, decimals: 1, tone: 'green' },
|
||||
{ key: 'mpm', label: 'messages / min', value: s.msgsPerMin, tone: 'green' },
|
||||
{ key: 'msgs', label: 'messages', value: s.messages, tone: 'cyan' },
|
||||
{ key: 'replies', label: 'réponses', value: s.replies, tone: 'plain' },
|
||||
{ key: 'chars', label: 'caractères envoyés', value: s.charsSent, tone: 'plain' },
|
||||
{ key: 'letters', label: 'lettres tapées', value: s.lettersTyped, tone: 'magenta' },
|
||||
{ key: 'ips', label: 'IP uniques', value: s.uniqueIps, tone: 'cyan' },
|
||||
{ key: 'longest', label: 'le + long', value: s.longestMsg, unit: ' car', tone: 'plain' },
|
||||
{ key: 'abandon', label: "taux d'abandon", value: s.abandonRate, decimals: 1, unit: ' %', tone: 'orange' },
|
||||
{ key: 'avg', label: 'longueur moy.', value: s.avgLength, decimals: 1, unit: ' car', tone: 'plain' },
|
||||
{ key: 'money', label: 'argent extorqué', value: s.moneyExtorted, decimals: 2, unit: ' €', tone: 'orange' },
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ticker {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: #0a0a12;
|
||||
border-bottom: 1px solid #1a1a2a;
|
||||
box-shadow: 0 2px 8px #00000066;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Badge LIVE fixe ── */
|
||||
.ticker-badge {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 14px;
|
||||
background: #0e0e18;
|
||||
border-right: 1px solid #1a1a2a;
|
||||
box-shadow: 4px 0 8px #0a0a12;
|
||||
}
|
||||
.ticker-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #44996655;
|
||||
animation: blink 1.5s ease-in-out infinite;
|
||||
}
|
||||
.ticker-badge-txt {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
color: #448866;
|
||||
}
|
||||
.ticker.is-off .ticker-dot {
|
||||
background: #884444;
|
||||
animation: none;
|
||||
}
|
||||
.ticker.is-off .ticker-badge-txt {
|
||||
color: #885555;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* ── Piste défilante ── */
|
||||
.ticker-viewport {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ticker-track {
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
animation: ticker-scroll 48s linear infinite;
|
||||
}
|
||||
.ticker:hover .ticker-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.ticker-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
@keyframes ticker-scroll {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* ── Chips ── */
|
||||
.chip {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 7px;
|
||||
padding: 0 22px;
|
||||
}
|
||||
.chip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 16px;
|
||||
width: 1px;
|
||||
background: #ffffff14;
|
||||
}
|
||||
.chip-val {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #d8d8e8;
|
||||
}
|
||||
.chip-unit {
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.chip-label {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
color: #50506e;
|
||||
}
|
||||
|
||||
.chip--cyan .chip-val { color: #5599aa; }
|
||||
.chip--green .chip-val { color: #447755; }
|
||||
.chip--magenta .chip-val { color: #885588; }
|
||||
.chip--orange .chip-val { color: #997744; }
|
||||
|
||||
/* Accessibilité : pas de défilement si l'utilisateur le refuse */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ticker-track { animation: none; }
|
||||
.ticker-viewport { overflow-x: auto; scrollbar-width: none; }
|
||||
.ticker-viewport::-webkit-scrollbar { display: none; }
|
||||
}
|
||||
</style>
|
||||
<!-- Bandeau de stats permanent façon téléscripteur néon (casino / bourse). -->
|
||||
<template>
|
||||
<div class="ticker" :class="{ 'is-off': !connected }">
|
||||
<!-- Badge LIVE fixe à gauche -->
|
||||
<div class="ticker-badge">
|
||||
<span class="ticker-dot" />
|
||||
<span class="ticker-badge-txt">{{ connected ? 'LIVE' : '···' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Piste défilante (2 groupes identiques pour une boucle sans couture) -->
|
||||
<div class="ticker-viewport">
|
||||
<div class="ticker-track">
|
||||
<div
|
||||
v-for="copy in 2"
|
||||
:key="copy"
|
||||
class="ticker-group"
|
||||
:aria-hidden="copy === 2 ? 'true' : undefined"
|
||||
>
|
||||
<span
|
||||
v-for="item in items"
|
||||
:key="item.key + '-' + copy"
|
||||
class="chip"
|
||||
:class="`chip--${item.tone}`"
|
||||
>
|
||||
<span class="chip-val">
|
||||
<AnimatedNumber :value="item.value" :decimals="item.decimals ?? 0" />
|
||||
<span v-if="item.unit" class="chip-unit">{{ item.unit }}</span>
|
||||
</span>
|
||||
<span class="chip-label">{{ item.label }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import AnimatedNumber from './AnimatedNumber.vue';
|
||||
import type { Stats } from '@/composables/useRealtime';
|
||||
|
||||
const props = defineProps<{ stats: Stats | null; connected: boolean }>();
|
||||
|
||||
type Tone = 'cyan' | 'green' | 'magenta' | 'orange' | 'plain';
|
||||
interface Chip {
|
||||
key: string;
|
||||
label: string;
|
||||
value: number;
|
||||
tone: Tone;
|
||||
unit?: string;
|
||||
decimals?: number;
|
||||
}
|
||||
|
||||
const ZERO: Stats = {
|
||||
connectedTabs: 0,
|
||||
typingNow: 0,
|
||||
lettersPerSec: 0,
|
||||
msgsPerMin: 0,
|
||||
messages: 0,
|
||||
replies: 0,
|
||||
charsSent: 0,
|
||||
lettersTyped: 0,
|
||||
uniqueIps: 0,
|
||||
longestMsg: 0,
|
||||
abandonRate: 0,
|
||||
avgLength: 0,
|
||||
moneyExtorted: 0,
|
||||
};
|
||||
|
||||
const items = computed<Chip[]>(() => {
|
||||
const s = props.stats ?? ZERO;
|
||||
return [
|
||||
{ key: 'tabs', label: 'onglets connectés', value: s.connectedTabs, tone: 'cyan' },
|
||||
{ key: 'typing', label: 'écrivent là', value: s.typingNow, tone: 'green' },
|
||||
{ key: 'lps', label: 'lettres / s', value: s.lettersPerSec, decimals: 1, tone: 'green' },
|
||||
{ key: 'mpm', label: 'messages / min', value: s.msgsPerMin, tone: 'green' },
|
||||
{ key: 'msgs', label: 'messages', value: s.messages, tone: 'cyan' },
|
||||
{ key: 'replies', label: 'réponses', value: s.replies, tone: 'plain' },
|
||||
{ key: 'chars', label: 'caractères envoyés', value: s.charsSent, tone: 'plain' },
|
||||
{ key: 'letters', label: 'lettres tapées', value: s.lettersTyped, tone: 'magenta' },
|
||||
{ key: 'ips', label: 'IP uniques', value: s.uniqueIps, tone: 'cyan' },
|
||||
{ key: 'longest', label: 'le + long', value: s.longestMsg, unit: ' car', tone: 'plain' },
|
||||
{ key: 'abandon', label: "taux d'abandon", value: s.abandonRate, decimals: 1, unit: ' %', tone: 'orange' },
|
||||
{ key: 'avg', label: 'longueur moy.', value: s.avgLength, decimals: 1, unit: ' car', tone: 'plain' },
|
||||
{ key: 'money', label: 'argent extorqué', value: s.moneyExtorted, decimals: 2, unit: ' €', tone: 'orange' },
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ticker {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: #0a0a12;
|
||||
border-bottom: 1px solid #1a1a2a;
|
||||
box-shadow: 0 2px 8px #00000066;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Badge LIVE fixe ── */
|
||||
.ticker-badge {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 14px;
|
||||
background: #0e0e18;
|
||||
border-right: 1px solid #1a1a2a;
|
||||
box-shadow: 4px 0 8px #0a0a12;
|
||||
}
|
||||
.ticker-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #44996655;
|
||||
animation: blink 1.5s ease-in-out infinite;
|
||||
}
|
||||
.ticker-badge-txt {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
color: #448866;
|
||||
}
|
||||
.ticker.is-off .ticker-dot {
|
||||
background: #884444;
|
||||
animation: none;
|
||||
}
|
||||
.ticker.is-off .ticker-badge-txt {
|
||||
color: #885555;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* ── Piste défilante ── */
|
||||
.ticker-viewport {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ticker-track {
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
animation: ticker-scroll 48s linear infinite;
|
||||
}
|
||||
.ticker:hover .ticker-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.ticker-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
@keyframes ticker-scroll {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* ── Chips ── */
|
||||
.chip {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 7px;
|
||||
padding: 0 22px;
|
||||
}
|
||||
.chip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 16px;
|
||||
width: 1px;
|
||||
background: #ffffff14;
|
||||
}
|
||||
.chip-val {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #d8d8e8;
|
||||
}
|
||||
.chip-unit {
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.chip-label {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
color: #50506e;
|
||||
}
|
||||
|
||||
.chip--cyan .chip-val { color: #5599aa; }
|
||||
.chip--green .chip-val { color: #447755; }
|
||||
.chip--magenta .chip-val { color: #885588; }
|
||||
.chip--orange .chip-val { color: #997744; }
|
||||
|
||||
/* Accessibilité : pas de défilement si l'utilisateur le refuse */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ticker-track { animation: none; }
|
||||
.ticker-viewport { overflow-x: auto; scrollbar-width: none; }
|
||||
.ticker-viewport::-webkit-scrollbar { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,138 +1,138 @@
|
||||
<!-- Generic right-click style picker. Mounted once in App.vue via Teleport. -->
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="state.visible"
|
||||
ref="menuEl"
|
||||
class="style-ctx-menu"
|
||||
:style="menuPos"
|
||||
@click.stop
|
||||
>
|
||||
<div class="ctx-title">{{ state.title }}</div>
|
||||
<template v-for="item in state.items" :key="item.value">
|
||||
<div v-if="item.isHeader" class="ctx-header">{{ item.label }}</div>
|
||||
<button
|
||||
v-else
|
||||
class="ctx-item"
|
||||
:class="{ 'ctx-item--active': item.checked || item.value === state.current }"
|
||||
@click="pick(item.value)"
|
||||
>
|
||||
<span v-if="item.emoji" class="ctx-emoji">{{ item.emoji }}</span>
|
||||
<span v-else-if="item.swatch" class="ctx-swatch" :style="{ background: item.swatch }" />
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { useContextMenu, closeContextMenu } from '@/composables/useContextMenu';
|
||||
|
||||
const { state } = useContextMenu();
|
||||
const menuEl = ref<HTMLElement | null>(null);
|
||||
|
||||
const menuPos = computed(() => ({
|
||||
top: `${Math.min(state.y, window.innerHeight - 260)}px`,
|
||||
left: `${Math.min(state.x, window.innerWidth - 175)}px`,
|
||||
}));
|
||||
|
||||
function pick(value: string): void {
|
||||
state.onSelect(value);
|
||||
closeContextMenu();
|
||||
}
|
||||
|
||||
function onMouseDown(e: MouseEvent): void {
|
||||
if (state.visible && menuEl.value && !menuEl.value.contains(e.target as Node)) {
|
||||
closeContextMenu();
|
||||
}
|
||||
}
|
||||
function onKeyDown(e: KeyboardEvent): void {
|
||||
if (e.key === 'Escape') closeContextMenu();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousedown', onMouseDown);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousedown', onMouseDown);
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.style-ctx-menu {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
min-width: 160px;
|
||||
background: #111118;
|
||||
border: 1px solid #2a2a3a;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 8px 32px #000a, 0 0 0 1px #ffffff08;
|
||||
padding: 4px 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.ctx-title {
|
||||
font-size: 10px;
|
||||
color: #44445a;
|
||||
padding: 4px 12px 3px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #1e1e2a;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.ctx-header {
|
||||
font-size: 9px;
|
||||
color: #33334a;
|
||||
padding: 6px 12px 2px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ctx-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 5px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #9999bb;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
.ctx-item:hover {
|
||||
background: #1a1a28;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ctx-item--active {
|
||||
color: #00ddff;
|
||||
}
|
||||
.ctx-item--active::after {
|
||||
content: '✓';
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ctx-swatch {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #ffffff22;
|
||||
}
|
||||
.ctx-emoji {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
<!-- Generic right-click style picker. Mounted once in App.vue via Teleport. -->
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="state.visible"
|
||||
ref="menuEl"
|
||||
class="style-ctx-menu"
|
||||
:style="menuPos"
|
||||
@click.stop
|
||||
>
|
||||
<div class="ctx-title">{{ state.title }}</div>
|
||||
<template v-for="item in state.items" :key="item.value">
|
||||
<div v-if="item.isHeader" class="ctx-header">{{ item.label }}</div>
|
||||
<button
|
||||
v-else
|
||||
class="ctx-item"
|
||||
:class="{ 'ctx-item--active': item.checked || item.value === state.current }"
|
||||
@click="pick(item.value)"
|
||||
>
|
||||
<span v-if="item.emoji" class="ctx-emoji">{{ item.emoji }}</span>
|
||||
<span v-else-if="item.swatch" class="ctx-swatch" :style="{ background: item.swatch }" />
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { useContextMenu, closeContextMenu } from '@/composables/useContextMenu';
|
||||
|
||||
const { state } = useContextMenu();
|
||||
const menuEl = ref<HTMLElement | null>(null);
|
||||
|
||||
const menuPos = computed(() => ({
|
||||
top: `${Math.min(state.y, window.innerHeight - 260)}px`,
|
||||
left: `${Math.min(state.x, window.innerWidth - 175)}px`,
|
||||
}));
|
||||
|
||||
function pick(value: string): void {
|
||||
state.onSelect(value);
|
||||
closeContextMenu();
|
||||
}
|
||||
|
||||
function onMouseDown(e: MouseEvent): void {
|
||||
if (state.visible && menuEl.value && !menuEl.value.contains(e.target as Node)) {
|
||||
closeContextMenu();
|
||||
}
|
||||
}
|
||||
function onKeyDown(e: KeyboardEvent): void {
|
||||
if (e.key === 'Escape') closeContextMenu();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousedown', onMouseDown);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousedown', onMouseDown);
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.style-ctx-menu {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
min-width: 160px;
|
||||
background: #111118;
|
||||
border: 1px solid #2a2a3a;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 8px 32px #000a, 0 0 0 1px #ffffff08;
|
||||
padding: 4px 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.ctx-title {
|
||||
font-size: 10px;
|
||||
color: #44445a;
|
||||
padding: 4px 12px 3px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #1e1e2a;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.ctx-header {
|
||||
font-size: 9px;
|
||||
color: #33334a;
|
||||
padding: 6px 12px 2px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ctx-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 5px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #9999bb;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
.ctx-item:hover {
|
||||
background: #1a1a28;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ctx-item--active {
|
||||
color: #00ddff;
|
||||
}
|
||||
.ctx-item--active::after {
|
||||
content: '✓';
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ctx-swatch {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #ffffff22;
|
||||
}
|
||||
.ctx-emoji {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
27
frontend/src/components/ThemePicker.spec.ts
Normal file
27
frontend/src/components/ThemePicker.spec.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import ThemePicker from './ThemePicker.vue';
|
||||
import { THEMES } from '@/composables/useTheme';
|
||||
|
||||
describe('ThemePicker (interaction composant + v-model custom)', () => {
|
||||
it('rend un bouton par thème disponible', () => {
|
||||
const wrapper = mount(ThemePicker, { props: { modelValue: 'default' } });
|
||||
expect(wrapper.findAll('button')).toHaveLength(Object.keys(THEMES).length);
|
||||
});
|
||||
|
||||
it('émet update:modelValue avec le thème cliqué (WhatsApp)', async () => {
|
||||
const wrapper = mount(ThemePicker, { props: { modelValue: 'default' } });
|
||||
const keys = Object.keys(THEMES);
|
||||
const idx = keys.indexOf('whatsapp');
|
||||
await wrapper.findAll('button')[idx].trigger('click');
|
||||
|
||||
const emitted = wrapper.emitted('update:modelValue');
|
||||
expect(emitted).toBeTruthy();
|
||||
expect(emitted![0]).toEqual(['whatsapp']);
|
||||
});
|
||||
|
||||
it('marque le thème actif', () => {
|
||||
const wrapper = mount(ThemePicker, { props: { modelValue: 'bubble' } });
|
||||
expect(wrapper.find('.theme-btn--active').exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -1,41 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { THEMES, type Theme } from '@/composables/useTheme';
|
||||
|
||||
const model = defineModel<Theme>({ required: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="theme-picker">
|
||||
<button
|
||||
v-for="(info, key) in THEMES"
|
||||
:key="key"
|
||||
class="theme-btn"
|
||||
:class="{ 'theme-btn--active': model === key }"
|
||||
:title="info.label"
|
||||
type="button"
|
||||
@click="model = key"
|
||||
>{{ info.emoji }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.theme-picker {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.theme-btn {
|
||||
background: #131320;
|
||||
border: 1px solid #222233;
|
||||
border-radius: 8px;
|
||||
padding: 3px 7px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.15s, border-color 0.15s;
|
||||
}
|
||||
.theme-btn:hover { opacity: 0.8; }
|
||||
.theme-btn--active {
|
||||
opacity: 1;
|
||||
border-color: #5577aa;
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
import { THEMES, type Theme } from '@/composables/useTheme';
|
||||
|
||||
const model = defineModel<Theme>({ required: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="theme-picker">
|
||||
<button
|
||||
v-for="(info, key) in THEMES"
|
||||
:key="key"
|
||||
class="theme-btn"
|
||||
:class="{ 'theme-btn--active': model === key }"
|
||||
:title="info.label"
|
||||
type="button"
|
||||
@click="model = key"
|
||||
>{{ info.emoji }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.theme-picker {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.theme-btn {
|
||||
background: #131320;
|
||||
border: 1px solid #222233;
|
||||
border-radius: 8px;
|
||||
padding: 3px 7px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.15s, border-color 0.15s;
|
||||
}
|
||||
.theme-btn:hover { opacity: 0.8; }
|
||||
.theme-btn--active {
|
||||
opacity: 1;
|
||||
border-color: #5577aa;
|
||||
}
|
||||
</style>
|
||||
|
||||
16
frontend/src/components/shop/PrefSection.vue
Normal file
16
frontend/src/components/shop/PrefSection.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<!-- Conteneur de section « Mes Persos ». Démontre l'injection de contenu depuis
|
||||
le parent : un slot par défaut (corps de la section) + un slot nommé #lock
|
||||
(badge optionnel quand la fonctionnalité n'est pas débloquée). -->
|
||||
<template>
|
||||
<section class="pf-section" :class="{ 'pf-locked': locked }">
|
||||
<h2 class="pf-title">
|
||||
{{ title }}
|
||||
<slot name="lock" />
|
||||
</h2>
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ title: string; locked?: boolean }>();
|
||||
</script>
|
||||
@@ -1,330 +1,331 @@
|
||||
<!-- One marketplace product card — handles per-kind options inline (faithful to shop mockups) -->
|
||||
<template>
|
||||
<div class="card" :class="{ 'card--owned': ownedAlready }">
|
||||
<div v-if="product.badge" class="card-badge">{{ product.badge }}</div>
|
||||
|
||||
<div class="card-head">
|
||||
<span class="card-icon">{{ icon }}</span>
|
||||
<div>
|
||||
<p class="card-name">{{ product.name }}</p>
|
||||
<p v-if="product.subtitle" class="card-sub">{{ product.subtitle }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aperçu cosmétique : avant / après -->
|
||||
<div v-if="product.kind === 'ip-skin' || product.id === 'bundle-cosmetic'" class="preview">
|
||||
<span class="prev-ip prev-plain">192.168.1.45</span>
|
||||
<span class="prev-arrow">→</span>
|
||||
<span class="prev-ip prev-gold">192.168.1.45</span>
|
||||
</div>
|
||||
|
||||
<!-- Options : abonnement NoAds -->
|
||||
<div v-if="product.kind === 'subscription'" class="opts">
|
||||
<label v-for="p in plans" :key="p.id" class="opt-radio" :class="{ active: plan === p.id }">
|
||||
<input type="radio" :value="p.id" v-model="plan" />
|
||||
<span>{{ p.label }}</span>
|
||||
<span class="opt-price">{{ fmt(p.price) }} cr{{ p.id === 'monthly' ? '/mois' : '/an' }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Options : Cadre de Pub -->
|
||||
<div v-if="product.kind === 'ad-frame'" class="opts">
|
||||
<div class="opt-row">
|
||||
<span class="opt-label">Durée</span>
|
||||
<select v-model.number="durationDays" class="opt-select">
|
||||
<option v-for="d in durations" :key="d.days" :value="d.days">
|
||||
{{ d.days }} j{{ d.extra ? ` (+${fmt(d.extra)})` : '' }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="opt-row">
|
||||
<span class="opt-label">Format</span>
|
||||
<select v-model="format" class="opt-select">
|
||||
<option v-for="f in formats" :key="f.id" :value="f.id">
|
||||
{{ f.label }}{{ f.extra ? ` (+${fmt(f.extra)})` : '' }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<input v-model="url" class="opt-input" type="text" placeholder="URL de destination (optionnel)" />
|
||||
</div>
|
||||
|
||||
<!-- Options : Pet (grille des designs non encore possédés) -->
|
||||
<div v-if="product.kind === 'pet'" class="opts">
|
||||
<div class="pet-grid">
|
||||
<button
|
||||
v-for="d in availableDesigns"
|
||||
:key="d.id"
|
||||
class="pet-cell"
|
||||
:class="{ active: petDesign === d.id }"
|
||||
@click="petDesign = d.id"
|
||||
type="button"
|
||||
>{{ d.char }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview : Skin de bouton -->
|
||||
<div v-if="product.kind === 'send-skin'" class="send-skin-preview">
|
||||
<div class="skin-btn-demo">{{ meta.char }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Stock limité -->
|
||||
<div v-if="product.stockLimit" class="stock">
|
||||
<div class="stock-bar"><div class="stock-fill" :style="{ width: stockPct + '%' }" /></div>
|
||||
<span class="stock-txt">{{ product.stockSold }} / {{ product.stockLimit }} vendus</span>
|
||||
</div>
|
||||
|
||||
<!-- Prix + CTA -->
|
||||
<div class="card-foot">
|
||||
<div class="price">
|
||||
<span v-if="product.promoPrice != null" class="price-old">{{ fmt(product.basePrice) }}</span>
|
||||
<span class="price-now">{{ fmt(effectivePrice) }}</span>
|
||||
<span class="price-unit">cr</span>
|
||||
</div>
|
||||
<!-- Pets: bouton acheter + lien Mes Persos -->
|
||||
<template v-if="product.kind === 'pet'">
|
||||
<button
|
||||
class="buy"
|
||||
:disabled="disabled"
|
||||
@click="onBuy"
|
||||
type="button"
|
||||
>{{ buyLabel }}</button>
|
||||
<button
|
||||
class="buy buy--perso"
|
||||
@click="$emit('goPerso')"
|
||||
type="button"
|
||||
>✨ Mes Persos</button>
|
||||
</template>
|
||||
<button
|
||||
v-else
|
||||
class="buy"
|
||||
:disabled="disabled"
|
||||
@click="onBuy"
|
||||
type="button"
|
||||
>{{ buyLabel }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import type { Product, PurchaseOptions } from '@/composables/useShop';
|
||||
import { parseMeta, type ProductMeta } from '@/composables/useMeta';
|
||||
|
||||
const props = defineProps<{
|
||||
product: Product;
|
||||
buying: boolean;
|
||||
owns: (kind: string) => boolean;
|
||||
ownedPetChars: string[];
|
||||
petCount: number;
|
||||
freeMode: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
buy: [productId: string, options: PurchaseOptions];
|
||||
goPerso: [];
|
||||
}>();
|
||||
|
||||
const meta = computed(() => parseMeta<ProductMeta>(props.product.metaJson));
|
||||
|
||||
// Subscription
|
||||
const plans = computed(() => meta.value.plans ?? []);
|
||||
const plan = ref<'monthly' | 'annual'>('monthly');
|
||||
|
||||
// Ad-frame
|
||||
const durations = computed(() => meta.value.durations ?? []);
|
||||
const formats = computed(() => meta.value.formats ?? []);
|
||||
const durationDays = ref<number>(7);
|
||||
const format = ref<'static' | 'gif'>('static');
|
||||
const url = ref('');
|
||||
|
||||
// Pet
|
||||
const designs = computed(() => meta.value.designs ?? []);
|
||||
const petDesign = ref<string>('');
|
||||
const availableDesigns = computed(() =>
|
||||
designs.value.filter((d) => !props.ownedPetChars.includes(d.char))
|
||||
);
|
||||
watch(availableDesigns, (ds) => {
|
||||
if (ds.length > 0 && !ds.find((d) => d.id === petDesign.value)) {
|
||||
petDesign.value = ds[0].id;
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const icon = computed(() => {
|
||||
if (props.product.id === 'ip-colors') return '🎨';
|
||||
if (props.product.kind === 'send-skin') return meta.value.char ?? '🖱️';
|
||||
switch (props.product.kind) {
|
||||
case 'ad-frame': return '📣';
|
||||
case 'subscription': return '🚫';
|
||||
case 'ip-skin': return '👑';
|
||||
case 'pet': return '✨';
|
||||
case 'bundle': return '🎁';
|
||||
case 'rich': return props.product.id === 'rich-js' ? '⚡' : '🎨';
|
||||
case 'consumable': return '🔊';
|
||||
default: return '🛍️';
|
||||
}
|
||||
});
|
||||
|
||||
const effectivePrice = computed(() => {
|
||||
let price = props.product.promoPrice ?? props.product.basePrice;
|
||||
if (props.product.kind === 'subscription') {
|
||||
const p = plans.value.find((x) => x.id === plan.value);
|
||||
if (p) price = p.price;
|
||||
}
|
||||
if (props.product.kind === 'ad-frame') {
|
||||
const d = durations.value.find((x) => x.days === durationDays.value);
|
||||
const f = formats.value.find((x) => x.id === format.value);
|
||||
price += (d?.extra ?? 0) + (f?.extra ?? 0);
|
||||
}
|
||||
return price;
|
||||
});
|
||||
|
||||
// Ownership / limits → disable & label.
|
||||
const ownedAlready = computed(() => {
|
||||
const k = props.product.kind;
|
||||
if (k === 'ip-skin') return props.owns('style-dore');
|
||||
if (k === 'subscription') return props.owns('noads');
|
||||
if (k === 'rich') return props.owns(props.product.id);
|
||||
if (k === 'unlock') return props.owns(props.product.id);
|
||||
if (k === 'ad-frame') return props.owns('ad-frame');
|
||||
if (k === 'send-skin') return props.owns(props.product.id);
|
||||
return false;
|
||||
});
|
||||
|
||||
const soldOut = computed(() => props.product.stockLimit != null && props.product.stockSold >= props.product.stockLimit);
|
||||
|
||||
const disabled = computed(() => props.buying || ownedAlready.value || soldOut.value);
|
||||
|
||||
const buyLabel = computed(() => {
|
||||
if (props.buying) return '...';
|
||||
if (soldOut.value) return 'Épuisé';
|
||||
if (ownedAlready.value) return 'Possédé ✓';
|
||||
return props.freeMode ? 'Obtenir (gratuit)' : 'Acheter';
|
||||
});
|
||||
|
||||
const stockPct = computed(() =>
|
||||
props.product.stockLimit ? Math.round((props.product.stockSold / props.product.stockLimit) * 100) : 0
|
||||
);
|
||||
|
||||
function fmt(centi: number): string {
|
||||
return (centi / 100).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
function onBuy(): void {
|
||||
const options: PurchaseOptions = {};
|
||||
if (props.product.kind === 'subscription') options.plan = plan.value;
|
||||
if (props.product.kind === 'ad-frame') {
|
||||
options.durationDays = durationDays.value;
|
||||
options.format = format.value;
|
||||
options.url = url.value || undefined;
|
||||
}
|
||||
if (props.product.kind === 'pet' || props.product.id === 'bundle-cosmetic') {
|
||||
const d = availableDesigns.value.find((x) => x.id === petDesign.value) ?? availableDesigns.value[0];
|
||||
if (d) { options.petDesign = d.id; options.petChar = d.char; }
|
||||
}
|
||||
emit('buy', props.product.id, options);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
position: relative;
|
||||
background: #101018;
|
||||
border: 1px solid #20203a;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.card--owned { opacity: 0.7; }
|
||||
|
||||
.card-badge {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
right: 12px;
|
||||
background: #ff2266;
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 3px 9px;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card-head { display: flex; gap: 12px; align-items: flex-start; }
|
||||
.card-icon { font-size: 28px; }
|
||||
.card-name { font-size: 15px; font-weight: bold; color: #d8d8ee; margin: 0; }
|
||||
.card-sub { font-size: 11px; color: #6a6a90; margin: 3px 0 0; line-height: 1.4; }
|
||||
|
||||
.preview {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
background: #0a0a12; border-radius: 6px; padding: 10px; justify-content: center;
|
||||
}
|
||||
.prev-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
|
||||
.prev-plain { color: #666688; }
|
||||
.prev-gold { color: #aa8833; }
|
||||
.prev-arrow { color: #444466; }
|
||||
|
||||
.opts { display: flex; flex-direction: column; gap: 8px; }
|
||||
.opt-radio {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
|
||||
padding: 8px 10px; font-size: 12px; color: #aaaacc; cursor: pointer;
|
||||
}
|
||||
.opt-radio.active { border-color: #00aaff; background: #0a1622; }
|
||||
.opt-radio input { accent-color: #00ccff; }
|
||||
.opt-radio--sm { padding: 5px 8px; font-size: 11px; flex: 1; justify-content: center; }
|
||||
.opt-price { margin-left: auto; color: #ffdd66; font-family: 'Courier New', monospace; }
|
||||
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.opt-label { font-size: 11px; color: #8888aa; }
|
||||
.opt-select, .opt-input {
|
||||
background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
|
||||
color: #ccccdd; font-size: 12px; padding: 6px 8px; outline: none;
|
||||
}
|
||||
.opt-select { flex: 1; }
|
||||
.opt-input { width: 100%; }
|
||||
|
||||
.pet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
|
||||
.pet-cell {
|
||||
aspect-ratio: 1; background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
|
||||
font-size: 18px; color: #ccccee; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.pet-cell.active { border-color: #8844aa; }
|
||||
.pet-pos { display: flex; gap: 6px; }
|
||||
|
||||
.send-skin-preview { display: flex; justify-content: center; padding: 8px 0; }
|
||||
.skin-btn-demo {
|
||||
width: 52px; height: 52px; border-radius: 50%;
|
||||
background: #151525; border: 1px solid #30306a;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.stock { display: flex; flex-direction: column; gap: 4px; }
|
||||
.stock-bar { height: 6px; background: #1a1a2a; border-radius: 3px; overflow: hidden; }
|
||||
.stock-fill { height: 100%; background: linear-gradient(90deg, #ffaa00, #ff4444); }
|
||||
.stock-txt { font-size: 10px; color: #886644; }
|
||||
|
||||
.card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
|
||||
.price { display: flex; align-items: baseline; gap: 6px; }
|
||||
.price-old { font-size: 12px; color: #555; text-decoration: line-through; }
|
||||
.price-now { font-size: 20px; font-weight: bold; color: #ccaa44; font-family: 'Courier New', monospace; }
|
||||
.price-unit { font-size: 11px; color: #886633; }
|
||||
|
||||
.buy {
|
||||
background: #004488; border: 1px solid #0066aa; color: #00ddff;
|
||||
font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.buy:hover:not(:disabled) { background: #1a4466; }
|
||||
.buy:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
|
||||
|
||||
.buy--perso {
|
||||
background: #1a1030; border: 1px solid #8844cc; color: #cc88ff;
|
||||
font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.buy--perso:hover { background: #261844; }
|
||||
</style>
|
||||
<!-- One marketplace product card — handles per-kind options inline (faithful to shop mockups) -->
|
||||
<template>
|
||||
<div class="card" :class="{ 'card--owned': ownedAlready }">
|
||||
<div v-if="product.badge" class="card-badge">{{ product.badge }}</div>
|
||||
|
||||
<div class="card-head">
|
||||
<span class="card-icon">{{ icon }}</span>
|
||||
<div>
|
||||
<RouterLink :to="`/shop/p/${product.id}`" class="card-name">{{ product.name }}</RouterLink>
|
||||
<p v-if="product.subtitle" class="card-sub">{{ product.subtitle }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aperçu cosmétique : avant / après -->
|
||||
<div v-if="product.kind === 'ip-skin' || product.id === 'bundle-cosmetic'" class="preview">
|
||||
<span class="prev-ip prev-plain">192.168.1.45</span>
|
||||
<span class="prev-arrow">→</span>
|
||||
<span class="prev-ip prev-gold">192.168.1.45</span>
|
||||
</div>
|
||||
|
||||
<!-- Options : abonnement NoAds -->
|
||||
<div v-if="product.kind === 'subscription'" class="opts">
|
||||
<label v-for="p in plans" :key="p.id" class="opt-radio" :class="{ active: plan === p.id }">
|
||||
<input type="radio" :value="p.id" v-model="plan" />
|
||||
<span>{{ p.label }}</span>
|
||||
<span class="opt-price">{{ fmt(p.price) }} cr{{ p.id === 'monthly' ? '/mois' : '/an' }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Options : Cadre de Pub -->
|
||||
<div v-if="product.kind === 'ad-frame'" class="opts">
|
||||
<div class="opt-row">
|
||||
<span class="opt-label">Durée</span>
|
||||
<select v-model.number="durationDays" class="opt-select">
|
||||
<option v-for="d in durations" :key="d.days" :value="d.days">
|
||||
{{ d.days }} j{{ d.extra ? ` (+${fmt(d.extra)})` : '' }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="opt-row">
|
||||
<span class="opt-label">Format</span>
|
||||
<select v-model="format" class="opt-select">
|
||||
<option v-for="f in formats" :key="f.id" :value="f.id">
|
||||
{{ f.label }}{{ f.extra ? ` (+${fmt(f.extra)})` : '' }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<input v-model="url" class="opt-input" type="text" placeholder="URL de destination (optionnel)" />
|
||||
</div>
|
||||
|
||||
<!-- Options : Pet (grille des designs non encore possédés) -->
|
||||
<div v-if="product.kind === 'pet'" class="opts">
|
||||
<div class="pet-grid">
|
||||
<button
|
||||
v-for="d in availableDesigns"
|
||||
:key="d.id"
|
||||
class="pet-cell"
|
||||
:class="{ active: petDesign === d.id }"
|
||||
@click="petDesign = d.id"
|
||||
type="button"
|
||||
>{{ d.char }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview : Skin de bouton -->
|
||||
<div v-if="product.kind === 'send-skin'" class="send-skin-preview">
|
||||
<div class="skin-btn-demo">{{ meta.char }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Stock limité -->
|
||||
<div v-if="product.stockLimit" class="stock">
|
||||
<div class="stock-bar"><div class="stock-fill" :style="{ width: stockPct + '%' }" /></div>
|
||||
<span class="stock-txt">{{ product.stockSold }} / {{ product.stockLimit }} vendus</span>
|
||||
</div>
|
||||
|
||||
<!-- Prix + CTA -->
|
||||
<div class="card-foot">
|
||||
<div class="price">
|
||||
<span v-if="product.promoPrice != null" class="price-old">{{ fmt(product.basePrice) }}</span>
|
||||
<span class="price-now">{{ fmt(effectivePrice) }}</span>
|
||||
<span class="price-unit">cr</span>
|
||||
</div>
|
||||
<!-- Pets: bouton acheter + lien Mes Persos -->
|
||||
<template v-if="product.kind === 'pet'">
|
||||
<button
|
||||
class="buy"
|
||||
:disabled="disabled"
|
||||
@click="onBuy"
|
||||
type="button"
|
||||
>{{ buyLabel }}</button>
|
||||
<button
|
||||
class="buy buy--perso"
|
||||
@click="$emit('goPerso')"
|
||||
type="button"
|
||||
>✨ Mes Persos</button>
|
||||
</template>
|
||||
<button
|
||||
v-else
|
||||
class="buy"
|
||||
:disabled="disabled"
|
||||
@click="onBuy"
|
||||
type="button"
|
||||
>{{ buyLabel }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import type { Product, PurchaseOptions } from '@/composables/useShop';
|
||||
import { parseMeta, type ProductMeta } from '@/composables/useMeta';
|
||||
|
||||
const props = defineProps<{
|
||||
product: Product;
|
||||
buying: boolean;
|
||||
owns: (kind: string) => boolean;
|
||||
ownedPetChars: string[];
|
||||
petCount: number;
|
||||
freeMode: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
buy: [productId: string, options: PurchaseOptions];
|
||||
goPerso: [];
|
||||
}>();
|
||||
|
||||
const meta = computed(() => parseMeta<ProductMeta>(props.product.metaJson));
|
||||
|
||||
// Subscription
|
||||
const plans = computed(() => meta.value.plans ?? []);
|
||||
const plan = ref<'monthly' | 'annual'>('monthly');
|
||||
|
||||
// Ad-frame
|
||||
const durations = computed(() => meta.value.durations ?? []);
|
||||
const formats = computed(() => meta.value.formats ?? []);
|
||||
const durationDays = ref<number>(7);
|
||||
const format = ref<'static' | 'gif'>('static');
|
||||
const url = ref('');
|
||||
|
||||
// Pet
|
||||
const designs = computed(() => meta.value.designs ?? []);
|
||||
const petDesign = ref<string>('');
|
||||
const availableDesigns = computed(() =>
|
||||
designs.value.filter((d) => !props.ownedPetChars.includes(d.char))
|
||||
);
|
||||
watch(availableDesigns, (ds) => {
|
||||
if (ds.length > 0 && !ds.find((d) => d.id === petDesign.value)) {
|
||||
petDesign.value = ds[0].id;
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const icon = computed(() => {
|
||||
if (props.product.id === 'ip-colors') return '🎨';
|
||||
if (props.product.kind === 'send-skin') return meta.value.char ?? '🖱️';
|
||||
switch (props.product.kind) {
|
||||
case 'ad-frame': return '📣';
|
||||
case 'subscription': return '🚫';
|
||||
case 'ip-skin': return '👑';
|
||||
case 'pet': return '✨';
|
||||
case 'bundle': return '🎁';
|
||||
case 'rich': return props.product.id === 'rich-js' ? '⚡' : '🎨';
|
||||
case 'consumable': return '🔊';
|
||||
default: return '🛍️';
|
||||
}
|
||||
});
|
||||
|
||||
const effectivePrice = computed(() => {
|
||||
let price = props.product.promoPrice ?? props.product.basePrice;
|
||||
if (props.product.kind === 'subscription') {
|
||||
const p = plans.value.find((x) => x.id === plan.value);
|
||||
if (p) price = p.price;
|
||||
}
|
||||
if (props.product.kind === 'ad-frame') {
|
||||
const d = durations.value.find((x) => x.days === durationDays.value);
|
||||
const f = formats.value.find((x) => x.id === format.value);
|
||||
price += (d?.extra ?? 0) + (f?.extra ?? 0);
|
||||
}
|
||||
return price;
|
||||
});
|
||||
|
||||
// Ownership / limits → disable & label.
|
||||
const ownedAlready = computed(() => {
|
||||
const k = props.product.kind;
|
||||
if (k === 'ip-skin') return props.owns('style-dore');
|
||||
if (k === 'subscription') return props.owns('noads');
|
||||
if (k === 'rich') return props.owns(props.product.id);
|
||||
if (k === 'unlock') return props.owns(props.product.id);
|
||||
if (k === 'ad-frame') return props.owns('ad-frame');
|
||||
if (k === 'send-skin') return props.owns(props.product.id);
|
||||
return false;
|
||||
});
|
||||
|
||||
const soldOut = computed(() => props.product.stockLimit != null && props.product.stockSold >= props.product.stockLimit);
|
||||
|
||||
const disabled = computed(() => props.buying || ownedAlready.value || soldOut.value);
|
||||
|
||||
const buyLabel = computed(() => {
|
||||
if (props.buying) return '...';
|
||||
if (soldOut.value) return 'Épuisé';
|
||||
if (ownedAlready.value) return 'Possédé ✓';
|
||||
return props.freeMode ? 'Obtenir (gratuit)' : 'Acheter';
|
||||
});
|
||||
|
||||
const stockPct = computed(() =>
|
||||
props.product.stockLimit ? Math.round((props.product.stockSold / props.product.stockLimit) * 100) : 0
|
||||
);
|
||||
|
||||
function fmt(centi: number): string {
|
||||
return (centi / 100).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
function onBuy(): void {
|
||||
const options: PurchaseOptions = {};
|
||||
if (props.product.kind === 'subscription') options.plan = plan.value;
|
||||
if (props.product.kind === 'ad-frame') {
|
||||
options.durationDays = durationDays.value;
|
||||
options.format = format.value;
|
||||
options.url = url.value || undefined;
|
||||
}
|
||||
if (props.product.kind === 'pet' || props.product.id === 'bundle-cosmetic') {
|
||||
const d = availableDesigns.value.find((x) => x.id === petDesign.value) ?? availableDesigns.value[0];
|
||||
if (d) { options.petDesign = d.id; options.petChar = d.char; }
|
||||
}
|
||||
emit('buy', props.product.id, options);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
position: relative;
|
||||
background: #101018;
|
||||
border: 1px solid #20203a;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.card--owned { opacity: 0.7; }
|
||||
|
||||
.card-badge {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
right: 12px;
|
||||
background: #ff2266;
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 3px 9px;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card-head { display: flex; gap: 12px; align-items: flex-start; }
|
||||
.card-icon { font-size: 28px; }
|
||||
.card-name { font-size: 15px; font-weight: bold; color: #d8d8ee; margin: 0; text-decoration: none; display: inline-block; }
|
||||
.card-name:hover { color: #00ddff; }
|
||||
.card-sub { font-size: 11px; color: #6a6a90; margin: 3px 0 0; line-height: 1.4; }
|
||||
|
||||
.preview {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
background: #0a0a12; border-radius: 6px; padding: 10px; justify-content: center;
|
||||
}
|
||||
.prev-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
|
||||
.prev-plain { color: #666688; }
|
||||
.prev-gold { color: #aa8833; }
|
||||
.prev-arrow { color: #444466; }
|
||||
|
||||
.opts { display: flex; flex-direction: column; gap: 8px; }
|
||||
.opt-radio {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
|
||||
padding: 8px 10px; font-size: 12px; color: #aaaacc; cursor: pointer;
|
||||
}
|
||||
.opt-radio.active { border-color: #00aaff; background: #0a1622; }
|
||||
.opt-radio input { accent-color: #00ccff; }
|
||||
.opt-radio--sm { padding: 5px 8px; font-size: 11px; flex: 1; justify-content: center; }
|
||||
.opt-price { margin-left: auto; color: #ffdd66; font-family: 'Courier New', monospace; }
|
||||
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.opt-label { font-size: 11px; color: #8888aa; }
|
||||
.opt-select, .opt-input {
|
||||
background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
|
||||
color: #ccccdd; font-size: 12px; padding: 6px 8px; outline: none;
|
||||
}
|
||||
.opt-select { flex: 1; }
|
||||
.opt-input { width: 100%; }
|
||||
|
||||
.pet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
|
||||
.pet-cell {
|
||||
aspect-ratio: 1; background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
|
||||
font-size: 18px; color: #ccccee; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.pet-cell.active { border-color: #8844aa; }
|
||||
.pet-pos { display: flex; gap: 6px; }
|
||||
|
||||
.send-skin-preview { display: flex; justify-content: center; padding: 8px 0; }
|
||||
.skin-btn-demo {
|
||||
width: 52px; height: 52px; border-radius: 50%;
|
||||
background: #151525; border: 1px solid #30306a;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.stock { display: flex; flex-direction: column; gap: 4px; }
|
||||
.stock-bar { height: 6px; background: #1a1a2a; border-radius: 3px; overflow: hidden; }
|
||||
.stock-fill { height: 100%; background: linear-gradient(90deg, #ffaa00, #ff4444); }
|
||||
.stock-txt { font-size: 10px; color: #886644; }
|
||||
|
||||
.card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
|
||||
.price { display: flex; align-items: baseline; gap: 6px; }
|
||||
.price-old { font-size: 12px; color: #555; text-decoration: line-through; }
|
||||
.price-now { font-size: 20px; font-weight: bold; color: #ccaa44; font-family: 'Courier New', monospace; }
|
||||
.price-unit { font-size: 11px; color: #886633; }
|
||||
|
||||
.buy {
|
||||
background: #004488; border: 1px solid #0066aa; color: #00ddff;
|
||||
font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.buy:hover:not(:disabled) { background: #1a4466; }
|
||||
.buy:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
|
||||
|
||||
.buy--perso {
|
||||
background: #1a1030; border: 1px solid #8844cc; color: #cc88ff;
|
||||
font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.buy--perso:hover { background: #261844; }
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<!-- Mes Persos › Fond du chat (image de fond personnalisée, viewer-side) -->
|
||||
<template>
|
||||
<section class="pf-section">
|
||||
<h2 class="pf-title">🖼️ Fond du chat</h2>
|
||||
<PrefSection title="🖼️ Fond du chat">
|
||||
<p class="pf-sub">URL d'une image (jpg, png, gif, webp…) ou laisse vide pour le fond par défaut.</p>
|
||||
<div class="bg-row">
|
||||
<input
|
||||
@@ -15,12 +14,13 @@
|
||||
<button v-if="prefs.chatBgUrl" class="btn-reset" @click="resetBg" type="button">✕ Retirer</button>
|
||||
</div>
|
||||
<div v-if="prefs.chatBgUrl" class="bg-preview" :style="{ backgroundImage: `url(${prefs.chatBgUrl})` }" />
|
||||
</section>
|
||||
</PrefSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useCustomStyles } from '@/composables/useCustomStyles';
|
||||
import PrefSection from '@/components/shop/PrefSection.vue';
|
||||
|
||||
const { prefs } = useCustomStyles();
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<!-- Mes Persos › Couleur de mon IP (viewer-side, nécessite la Palette IP) -->
|
||||
<template>
|
||||
<section class="pf-section" :class="{ 'pf-locked': !myPerks.ipColors }">
|
||||
<h2 class="pf-title">
|
||||
🎨 Couleur de mon IP
|
||||
<span v-if="!myPerks.ipColors" class="pf-lock">🔒 Palette IP requise</span>
|
||||
</h2>
|
||||
<PrefSection title="🎨 Couleur de mon IP" :locked="!myPerks.ipColors">
|
||||
<template v-if="!myPerks.ipColors" #lock>
|
||||
<span class="pf-lock">🔒 Palette IP requise</span>
|
||||
</template>
|
||||
<p v-if="myIp" class="pf-sub">IP : <code class="code-ip" :style="ipPreviewStyle">{{ myIp }}</code></p>
|
||||
<div class="pf-grid">
|
||||
<button
|
||||
@@ -21,7 +20,7 @@
|
||||
<span class="pf-label">{{ opt.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</PrefSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -30,6 +29,7 @@ import { useCustomStyles, IP_COLOR_OPTIONS } from '@/composables/useCustomStyles
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
import { useWallet } from '@/composables/useWallet';
|
||||
import { getIpColorWithPerks, getIpGlow } from '@/composables/ipColor';
|
||||
import PrefSection from '@/components/shop/PrefSection.vue';
|
||||
|
||||
const { prefs } = useCustomStyles();
|
||||
const { myPerks } = useMyPerks();
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<!-- Mes Persos › Pet actif affiché à gauche de l'IP (parmi les pets possédés) -->
|
||||
<template>
|
||||
<section class="pf-section" :class="{ 'pf-locked': !hasPets }">
|
||||
<h2 class="pf-title">
|
||||
✨ Mes pets
|
||||
<span v-if="!hasPets" class="pf-lock">Achetez un Pet dans le shop</span>
|
||||
</h2>
|
||||
<PrefSection title="✨ Mes pets" :locked="!hasPets">
|
||||
<template v-if="!hasPets" #lock>
|
||||
<span class="pf-lock">Achetez un Pet dans le shop</span>
|
||||
</template>
|
||||
<template v-if="hasPets">
|
||||
<div class="pf-grid">
|
||||
<button
|
||||
@@ -28,7 +27,7 @@
|
||||
</p>
|
||||
</template>
|
||||
<p v-else class="pf-sub">Aucun pet possédé pour l'instant.</p>
|
||||
</section>
|
||||
</PrefSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -36,6 +35,7 @@ import { computed } from 'vue';
|
||||
import { useCustomStyles } from '@/composables/useCustomStyles';
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
import { useWallet } from '@/composables/useWallet';
|
||||
import PrefSection from '@/components/shop/PrefSection.vue';
|
||||
|
||||
const { prefs } = useCustomStyles();
|
||||
const { myPerks } = useMyPerks();
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<!-- Mes Persos › Couleur du bouton d'envoi (preset, nécessite le skin d'éléments) -->
|
||||
<template>
|
||||
<section class="pf-section" :class="{ 'pf-locked': !myPerks.elementSkin }">
|
||||
<h2 class="pf-title">
|
||||
➤ Bouton d'envoi
|
||||
<span v-if="!myPerks.elementSkin" class="pf-lock">🔒 Skin d'éléments requis</span>
|
||||
</h2>
|
||||
<PrefSection title="➤ Bouton d'envoi" :locked="!myPerks.elementSkin">
|
||||
<template v-if="!myPerks.elementSkin" #lock>
|
||||
<span class="pf-lock">🔒 Skin d'éléments requis</span>
|
||||
</template>
|
||||
<div class="pf-grid">
|
||||
<button
|
||||
v-for="[k, p] in presetEntries"
|
||||
@@ -19,12 +18,13 @@
|
||||
<span class="pf-label">{{ p.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</PrefSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCustomStyles, SEND_BUTTON_PRESETS, type SendButtonKey } from '@/composables/useCustomStyles';
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
import PrefSection from '@/components/shop/PrefSection.vue';
|
||||
|
||||
const { prefs } = useCustomStyles();
|
||||
const { myPerks } = useMyPerks();
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<!-- Mes Persos › Skin (emoji) du bouton d'envoi, parmi les skins possédés -->
|
||||
<template>
|
||||
<section class="pf-section" :class="{ 'pf-locked': !hasSendSkins }">
|
||||
<h2 class="pf-title">
|
||||
🖱️ Skin du bouton d'envoi
|
||||
<span v-if="!hasSendSkins" class="pf-lock">Achetez un skin dans le shop</span>
|
||||
</h2>
|
||||
<PrefSection title="🖱️ Skin du bouton d'envoi" :locked="!hasSendSkins">
|
||||
<template v-if="!hasSendSkins" #lock>
|
||||
<span class="pf-lock">Achetez un skin dans le shop</span>
|
||||
</template>
|
||||
<template v-if="hasSendSkins">
|
||||
<div class="pf-grid">
|
||||
<button
|
||||
@@ -30,13 +29,14 @@
|
||||
</div>
|
||||
</template>
|
||||
<p v-else class="pf-sub">Aucun skin possédé pour l'instant.</p>
|
||||
</section>
|
||||
</PrefSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useCustomStyles } from '@/composables/useCustomStyles';
|
||||
import { useMyPerks } from '@/composables/useMessages';
|
||||
import PrefSection from '@/components/shop/PrefSection.vue';
|
||||
|
||||
const { prefs } = useCustomStyles();
|
||||
const { myPerks } = useMyPerks();
|
||||
|
||||
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,
|
||||
};
|
||||
}
|
||||
|
||||
28
frontend/src/directives/clickOutside.ts
Normal file
28
frontend/src/directives/clickOutside.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import type { Directive } from 'vue';
|
||||
|
||||
/**
|
||||
* Directive `v-click-outside` : exécute le handler fourni quand un clic se
|
||||
* produit en dehors de l'élément. Utile pour fermer modales / menus.
|
||||
* Usage : <div v-click-outside="onClose">…</div>
|
||||
*/
|
||||
type Handler = (e: MouseEvent) => void;
|
||||
|
||||
const map = new WeakMap<HTMLElement, (e: MouseEvent) => void>();
|
||||
|
||||
export const vClickOutside: Directive<HTMLElement, Handler> = {
|
||||
mounted(el, binding) {
|
||||
const listener = (e: MouseEvent) => {
|
||||
if (!el.contains(e.target as Node)) binding.value?.(e);
|
||||
};
|
||||
map.set(el, listener);
|
||||
// `capture` + microtask delay évite de capter le clic qui a ouvert l'élément.
|
||||
setTimeout(() => document.addEventListener('click', listener, true), 0);
|
||||
},
|
||||
unmounted(el) {
|
||||
const listener = map.get(el);
|
||||
if (listener) {
|
||||
document.removeEventListener('click', listener, true);
|
||||
map.delete(el);
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -2,16 +2,34 @@ import { createApp } from 'vue';
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import App from './App.vue';
|
||||
import HomePage from './views/HomePage.vue';
|
||||
import ShopPage from './views/ShopPage.vue';
|
||||
import { useFavorites } from './composables/useFavorites';
|
||||
import { vClickOutside } from './directives/clickOutside';
|
||||
import './style.css';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
// Chat : page d'accueil, chargée d'emblée (premier rendu rapide).
|
||||
{ path: '/', component: HomePage },
|
||||
{ path: '/shop', component: ShopPage },
|
||||
{ path: '/shop/p/:id', component: ShopPage },
|
||||
// Vues secondaires : chargées à la demande (code-splitting) pour ne pas
|
||||
// pénaliser le premier rendu.
|
||||
{ path: '/explorer', component: () => import('./views/ExplorerPage.vue') },
|
||||
{ path: '/message/:id', component: () => import('./views/MessageDetailPage.vue') },
|
||||
{ path: '/favoris', component: () => import('./views/FavorisPage.vue') },
|
||||
{
|
||||
path: '/mes-stats',
|
||||
component: () => import('./views/MesStatsPage.vue'),
|
||||
// Garde : pas de stats tant que la liste perso est vide.
|
||||
beforeEnter: () => (useFavorites().all.value.length > 0 ? true : '/favoris'),
|
||||
},
|
||||
{ path: '/shop', component: () => import('./views/ShopPage.vue') },
|
||||
{ path: '/shop/p/:id', component: () => import('./views/ProductDetailPage.vue') },
|
||||
// Repli : toute URL inconnue renvoie au chat.
|
||||
{ path: '/:pathMatch(.*)*', redirect: '/' },
|
||||
],
|
||||
});
|
||||
|
||||
createApp(App).use(router).mount('#app');
|
||||
createApp(App)
|
||||
.use(router)
|
||||
.directive('click-outside', vClickOutside)
|
||||
.mount('#app');
|
||||
|
||||
@@ -1,116 +1,116 @@
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Thèmes : palette par variables CSS, basculée via [data-theme] sur la racine app ──
|
||||
Le défaut = palette XIP sombre/néon. Chaque thème ne redéfinit que les surfaces
|
||||
à fort impact (fond, header, bulles, bouton d'envoi). */
|
||||
:root {
|
||||
--xip-app-bg: #080808;
|
||||
--xip-bg: #090910;
|
||||
--xip-header-bg: #0e0e16;
|
||||
--xip-header-border: #1a1a2a;
|
||||
--xip-bubble-other: #141422;
|
||||
--xip-bubble-other-border: #222236;
|
||||
--xip-bubble-sent: #0e1f30;
|
||||
--xip-bubble-sent-border: #1a3a55;
|
||||
--xip-accent: #00ddff;
|
||||
--xip-send-bg: #004488;
|
||||
--xip-send-fg: #00ddff;
|
||||
}
|
||||
|
||||
[data-theme="whatsapp"] {
|
||||
--xip-app-bg: #0b141a;
|
||||
--xip-bg: #0b141a;
|
||||
--xip-header-bg: #202c33;
|
||||
--xip-header-border: #2a3942;
|
||||
--xip-bubble-other: #202c33;
|
||||
--xip-bubble-other-border: #2a3942;
|
||||
--xip-bubble-sent: #005c4b; /* vert sortant signature WhatsApp */
|
||||
--xip-bubble-sent-border: #047857;
|
||||
--xip-accent: #00a884;
|
||||
--xip-send-bg: #00a884;
|
||||
--xip-send-fg: #ffffff;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--xip-app-bg);
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
/* ── Styles partagés des sections « Mes Persos » (shop/persos/*) ──
|
||||
Globaux (non scopés) pour être réutilisés par chaque sous-section sans
|
||||
dupliquer le CSS. Préfixe .pf- (persos-form) pour éviter les collisions. */
|
||||
.pf-section {
|
||||
background: #101018;
|
||||
border: 1px solid #20203a;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.pf-section.pf-locked { opacity: 0.6; }
|
||||
.pf-title {
|
||||
font-size: 14px; font-weight: bold; color: #ccccee;
|
||||
margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.pf-sub { font-size: 11px; color: #5a5a80; margin: 0 0 12px; }
|
||||
.pf-lock {
|
||||
font-size: 10px; font-weight: normal; color: #886644;
|
||||
background: #1a1408; border: 1px solid #44330066; border-radius: 8px; padding: 2px 8px;
|
||||
}
|
||||
.pf-grid { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.pf-tile {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
background: #141420; border: 1px solid #222234; border-radius: 8px;
|
||||
padding: 10px 14px; cursor: pointer; transition: border-color 0.1s, background 0.1s;
|
||||
}
|
||||
.pf-tile:hover:not(:disabled) { background: #1a1a2e; border-color: #333355; }
|
||||
.pf-tile--active { border-color: #00ddff; background: #0a1a20; }
|
||||
.pf-tile:disabled { cursor: not-allowed; opacity: 0.5; }
|
||||
.pf-swatch {
|
||||
width: 34px; height: 34px; border-radius: inherit;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: bold; border: 1px solid #ffffff10;
|
||||
}
|
||||
.pf-label { font-size: 10px; color: #8888aa; white-space: nowrap; }
|
||||
.pf-tile--active .pf-label { color: #00ddff; }
|
||||
.pf-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ffffff22; }
|
||||
.pf-dot--auto { background: conic-gradient(#00ddff, #ff00cc, #00ee77, #ffdd44, #00ddff); }
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Thèmes : palette par variables CSS, basculée via [data-theme] sur la racine app ──
|
||||
Le défaut = palette XIP sombre/néon. Chaque thème ne redéfinit que les surfaces
|
||||
à fort impact (fond, header, bulles, bouton d'envoi). */
|
||||
:root {
|
||||
--xip-app-bg: #080808;
|
||||
--xip-bg: #090910;
|
||||
--xip-header-bg: #0e0e16;
|
||||
--xip-header-border: #1a1a2a;
|
||||
--xip-bubble-other: #141422;
|
||||
--xip-bubble-other-border: #222236;
|
||||
--xip-bubble-sent: #0e1f30;
|
||||
--xip-bubble-sent-border: #1a3a55;
|
||||
--xip-accent: #00ddff;
|
||||
--xip-send-bg: #004488;
|
||||
--xip-send-fg: #00ddff;
|
||||
}
|
||||
|
||||
[data-theme="whatsapp"] {
|
||||
--xip-app-bg: #0b141a;
|
||||
--xip-bg: #0b141a;
|
||||
--xip-header-bg: #202c33;
|
||||
--xip-header-border: #2a3942;
|
||||
--xip-bubble-other: #202c33;
|
||||
--xip-bubble-other-border: #2a3942;
|
||||
--xip-bubble-sent: #005c4b; /* vert sortant signature WhatsApp */
|
||||
--xip-bubble-sent-border: #047857;
|
||||
--xip-accent: #00a884;
|
||||
--xip-send-bg: #00a884;
|
||||
--xip-send-fg: #ffffff;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--xip-app-bg);
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
/* ── Styles partagés des sections « Mes Persos » (shop/persos/*) ──
|
||||
Globaux (non scopés) pour être réutilisés par chaque sous-section sans
|
||||
dupliquer le CSS. Préfixe .pf- (persos-form) pour éviter les collisions. */
|
||||
.pf-section {
|
||||
background: #101018;
|
||||
border: 1px solid #20203a;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.pf-section.pf-locked { opacity: 0.6; }
|
||||
.pf-title {
|
||||
font-size: 14px; font-weight: bold; color: #ccccee;
|
||||
margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.pf-sub { font-size: 11px; color: #5a5a80; margin: 0 0 12px; }
|
||||
.pf-lock {
|
||||
font-size: 10px; font-weight: normal; color: #886644;
|
||||
background: #1a1408; border: 1px solid #44330066; border-radius: 8px; padding: 2px 8px;
|
||||
}
|
||||
.pf-grid { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.pf-tile {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
background: #141420; border: 1px solid #222234; border-radius: 8px;
|
||||
padding: 10px 14px; cursor: pointer; transition: border-color 0.1s, background 0.1s;
|
||||
}
|
||||
.pf-tile:hover:not(:disabled) { background: #1a1a2e; border-color: #333355; }
|
||||
.pf-tile--active { border-color: #00ddff; background: #0a1a20; }
|
||||
.pf-tile:disabled { cursor: not-allowed; opacity: 0.5; }
|
||||
.pf-swatch {
|
||||
width: 34px; height: 34px; border-radius: inherit;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: bold; border: 1px solid #ffffff10;
|
||||
}
|
||||
.pf-label { font-size: 10px; color: #8888aa; white-space: nowrap; }
|
||||
.pf-tile--active .pf-label { color: #00ddff; }
|
||||
.pf-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ffffff22; }
|
||||
.pf-dot--auto { background: conic-gradient(#00ddff, #ff00cc, #00ee77, #ffdd44, #00ddff); }
|
||||
|
||||
192
frontend/src/views/ExplorerPage.vue
Normal file
192
frontend/src/views/ExplorerPage.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<!-- Explorateur du catalogue distant de messages : recherche debouncée +
|
||||
annulable (AbortController), filtre, défilement infini par curseur.
|
||||
Gardé en cache (keep-alive) pour conserver recherche + scroll au retour. -->
|
||||
<template>
|
||||
<div class="explorer">
|
||||
<header class="exp-head">
|
||||
<h1 class="exp-title">🔎 Explorer les messages</h1>
|
||||
<div class="exp-controls">
|
||||
<SearchBox v-model="query" placeholder="Rechercher dans les messages…" class="exp-search" />
|
||||
<select v-model="filter" class="exp-filter" title="Filtrer">
|
||||
<option value="all">Tous</option>
|
||||
<option value="rich">Messages riches</option>
|
||||
<option value="files">Avec pièce jointe</option>
|
||||
<option value="geo">Géolocalisés</option>
|
||||
</select>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="exp-scroll">
|
||||
<p v-if="error" class="exp-msg exp-msg--err">{{ error }}</p>
|
||||
|
||||
<ul class="exp-list">
|
||||
<li v-for="m in visible" :key="m.id" class="exp-card">
|
||||
<RouterLink :to="`/message/${m.id}`" class="exp-card-link">
|
||||
<div class="exp-card-head">
|
||||
<span class="exp-ip" :style="{ color: ipColor(m.authorIp) }">{{ m.authorIp }}</span>
|
||||
<img
|
||||
v-if="m.authorGeo?.countryCode"
|
||||
:src="`https://flagcdn.com/16x12/${m.authorGeo.countryCode.toLowerCase()}.png`"
|
||||
:alt="m.authorGeo.countryCode"
|
||||
class="exp-flag"
|
||||
/>
|
||||
<span class="exp-ts">{{ fmtDate(m.createdAt) }}</span>
|
||||
</div>
|
||||
<p class="exp-content">{{ preview(m) }}</p>
|
||||
<div class="exp-tags">
|
||||
<span v-if="m.richMode && m.richMode !== 'none'" class="exp-tag">riche</span>
|
||||
<span v-if="m.attachments?.length" class="exp-tag">📎 {{ m.attachments.length }}</span>
|
||||
<span v-if="m.replies?.length" class="exp-tag">↩ {{ m.replies.length }}</span>
|
||||
</div>
|
||||
</RouterLink>
|
||||
<FavButton :message="m" class="exp-fav" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p v-if="loading" class="exp-msg">Chargement…</p>
|
||||
<p v-if="!loading && visible.length === 0" class="exp-msg">Aucun message trouvé.</p>
|
||||
|
||||
<!-- Sentinelle de défilement infini -->
|
||||
<div ref="sentinel" class="exp-sentinel" />
|
||||
<p v-if="!hasMore && visible.length > 0" class="exp-msg exp-end">— fin du catalogue —</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick } from 'vue';
|
||||
import type { Message } from '@/composables/useMessages';
|
||||
import { getIpColor } from '@/composables/ipColor';
|
||||
import SearchBox from '@/components/SearchBox.vue';
|
||||
import FavButton from '@/components/FavButton.vue';
|
||||
|
||||
// Nom requis pour le keep-alive (App.vue `include="ExplorerPage"`).
|
||||
defineOptions({ name: 'ExplorerPage' });
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
const PAGE = 20;
|
||||
|
||||
const query = ref('');
|
||||
const filter = ref<'all' | 'rich' | 'files' | 'geo'>('all');
|
||||
const items = ref<Message[]>([]);
|
||||
const cursor = ref<string | null>(null);
|
||||
const hasMore = ref(true);
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
let controller: AbortController | null = null;
|
||||
|
||||
/** Filtre client appliqué par-dessus la recherche serveur. */
|
||||
const visible = computed(() => {
|
||||
switch (filter.value) {
|
||||
case 'rich': return items.value.filter((m) => m.richMode && m.richMode !== 'none');
|
||||
case 'files': return items.value.filter((m) => (m.attachments?.length ?? 0) > 0);
|
||||
case 'geo': return items.value.filter((m) => !!m.authorGeo?.countryCode);
|
||||
default: return items.value;
|
||||
}
|
||||
});
|
||||
|
||||
async function load(reset: boolean): Promise<void> {
|
||||
// Annule toute requête en vol (recherche/page précédente).
|
||||
controller?.abort();
|
||||
controller = new AbortController();
|
||||
const mine = controller;
|
||||
|
||||
if (reset) { items.value = []; cursor.value = null; hasMore.value = true; }
|
||||
if (!hasMore.value && !reset) return;
|
||||
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const params = new URLSearchParams({ limit: String(PAGE) });
|
||||
if (query.value.trim()) params.set('q', query.value.trim());
|
||||
if (cursor.value && !reset) params.set('before', cursor.value);
|
||||
|
||||
const res = await fetch(`${API_URL}/api/messages?${params}`, { signal: mine.signal });
|
||||
if (!res.ok) throw new Error('Erreur réseau');
|
||||
const data = (await res.json()) as { items: Message[]; nextCursor: string | null; hasMore: boolean };
|
||||
|
||||
// Si une requête plus récente a démarré entre-temps, on ignore ce résultat.
|
||||
if (mine.signal.aborted) return;
|
||||
|
||||
items.value = reset ? data.items : [...items.value, ...data.items];
|
||||
cursor.value = data.nextCursor;
|
||||
hasMore.value = data.hasMore;
|
||||
} catch (e) {
|
||||
if ((e as Error).name !== 'AbortError') error.value = 'Impossible de charger les messages.';
|
||||
} finally {
|
||||
if (mine === controller) loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Nouvelle recherche → on repart de zéro (la valeur arrive déjà debouncée du SearchBox).
|
||||
watch(query, () => { void load(true); });
|
||||
|
||||
// ── Défilement infini ──
|
||||
const sentinel = ref<HTMLElement | null>(null);
|
||||
let observer: IntersectionObserver | null = null;
|
||||
|
||||
function setupObserver(): void {
|
||||
if (observer || !sentinel.value) return;
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0]?.isIntersecting && !loading.value && hasMore.value) void load(false);
|
||||
}, { rootMargin: '200px' });
|
||||
observer.observe(sentinel.value);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await load(true);
|
||||
await nextTick();
|
||||
setupObserver();
|
||||
});
|
||||
onActivated(() => setupObserver());
|
||||
onDeactivated(() => { observer?.disconnect(); observer = null; });
|
||||
|
||||
function ipColor(ip: string): string { return getIpColor(ip); }
|
||||
function fmtDate(d: string): string {
|
||||
return new Date(d).toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
function preview(m: Message): string {
|
||||
if (m.richMode && m.richMode !== 'none') return m.content?.trim() || '[message riche]';
|
||||
return m.content || '[vide]';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.explorer { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
|
||||
.exp-head { flex-shrink: 0; padding: 16px 20px 12px; border-bottom: 1px solid #1a1a2a; }
|
||||
.exp-title { font-family: Arial, sans-serif; font-size: 17px; color: #ccccee; margin: 0 0 12px; }
|
||||
.exp-controls { display: flex; gap: 10px; }
|
||||
.exp-search { flex: 1; }
|
||||
.exp-filter {
|
||||
background: #141420; border: 1px solid #222234; border-radius: 23px;
|
||||
color: #aaaacc; font-size: 12px; padding: 0 14px; outline: none; cursor: pointer;
|
||||
}
|
||||
|
||||
.exp-scroll { flex: 1; overflow-y: auto; padding: 14px 20px; }
|
||||
.exp-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
|
||||
.exp-card {
|
||||
position: relative;
|
||||
background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 12px 14px;
|
||||
}
|
||||
.exp-card-link { text-decoration: none; display: block; }
|
||||
.exp-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||||
.exp-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
|
||||
.exp-flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
|
||||
.exp-ts { margin-left: auto; font-size: 10px; color: #44445a; font-family: 'Courier New', monospace; }
|
||||
.exp-content {
|
||||
font-family: Arial, sans-serif; font-size: 13px; color: #c0c0c0; margin: 0;
|
||||
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.exp-tags { display: flex; gap: 6px; margin-top: 8px; }
|
||||
.exp-tag {
|
||||
font-family: Arial, sans-serif; font-size: 9px; color: #6688aa;
|
||||
background: #0c1622; border: 1px solid #16324a; border-radius: 6px; padding: 1px 6px;
|
||||
}
|
||||
.exp-fav { position: absolute; top: 10px; right: 10px; font-size: 15px; }
|
||||
|
||||
.exp-msg { text-align: center; color: #55557a; font-family: Arial, sans-serif; font-size: 12px; padding: 16px; }
|
||||
.exp-msg--err { color: #ff7788; }
|
||||
.exp-end { color: #33334d; }
|
||||
.exp-sentinel { height: 1px; }
|
||||
</style>
|
||||
162
frontend/src/views/FavorisPage.vue
Normal file
162
frontend/src/views/FavorisPage.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<!-- Liste personnelle « Favoris » : éléments enregistrés (localStorage),
|
||||
éditables (note, commentaire, statut) via une modale, retirables. -->
|
||||
<template>
|
||||
<div class="favs">
|
||||
<header class="favs-head">
|
||||
<h1 class="favs-title">⭐ Mes favoris <span class="favs-count">{{ all.length }}</span></h1>
|
||||
<div class="favs-actions">
|
||||
<RouterLink v-if="all.length" to="/mes-stats" class="btn-stats">📊 Voir mes stats</RouterLink>
|
||||
<button v-if="all.length" class="btn-clear" type="button" @click="clear">Tout vider</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="favs-scroll">
|
||||
<div v-if="all.length === 0" class="favs-empty">
|
||||
<p>Aucun favori pour l'instant.</p>
|
||||
<RouterLink to="/explorer" class="btn-explore">🔎 Explorer des messages</RouterLink>
|
||||
</div>
|
||||
|
||||
<ul v-else class="favs-list">
|
||||
<li v-for="f in all" :key="f.id" class="fav-card">
|
||||
<div class="fav-main">
|
||||
<div class="fav-meta">
|
||||
<RouterLink :to="`/message/${f.id}`" class="fav-ip" :style="{ color: ipColor(f.authorIp) }">{{ f.authorIp }}</RouterLink>
|
||||
<span class="fav-status" :class="`fav-status--${f.status}`">{{ statusLabel(f.status) }}</span>
|
||||
<span v-if="f.rating" class="fav-rating">{{ '★'.repeat(f.rating) }}<span class="dim">{{ '★'.repeat(5 - f.rating) }}</span></span>
|
||||
</div>
|
||||
<p class="fav-content">{{ f.content }}</p>
|
||||
<p v-if="f.note" class="fav-note">📝 {{ f.note }}</p>
|
||||
</div>
|
||||
<div class="fav-buttons">
|
||||
<button class="fav-edit" type="button" @click="openEdit(f.id)">✏️</button>
|
||||
<button class="fav-del" type="button" @click="remove(f.id)">🗑️</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Modale d'édition (Teleport + slots) -->
|
||||
<Modal v-model:open="editOpen" :title="`Annoter ${editing?.authorIp ?? ''}`">
|
||||
<div v-if="editing" class="edit">
|
||||
<p class="edit-content">« {{ editing.content }} »</p>
|
||||
|
||||
<label class="edit-label">Note</label>
|
||||
<div class="stars">
|
||||
<button
|
||||
v-for="n in 5"
|
||||
:key="n"
|
||||
class="star"
|
||||
:class="{ on: n <= draftRating }"
|
||||
type="button"
|
||||
@click="draftRating = n === draftRating ? 0 : n"
|
||||
>★</button>
|
||||
</div>
|
||||
|
||||
<label class="edit-label">Statut</label>
|
||||
<select v-model="draftStatus" class="edit-select">
|
||||
<option value="a-lire">À lire</option>
|
||||
<option value="lu">Lu</option>
|
||||
<option value="top">Coup de cœur</option>
|
||||
</select>
|
||||
|
||||
<label class="edit-label">Commentaire</label>
|
||||
<textarea v-model="draftNote" class="edit-note" rows="3" placeholder="Ton annotation…" />
|
||||
|
||||
<div class="edit-foot">
|
||||
<button class="btn-save" type="button" @click="save">Enregistrer</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useFavorites, type FavStatus } from '@/composables/useFavorites';
|
||||
import { getIpColor } from '@/composables/ipColor';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
|
||||
const { all, remove, clear, setNote, setRating, setStatus } = useFavorites();
|
||||
|
||||
const editOpen = ref(false);
|
||||
const editingId = ref<string | null>(null);
|
||||
const editing = computed(() => all.value.find((f) => f.id === editingId.value) ?? null);
|
||||
|
||||
const draftNote = ref('');
|
||||
const draftRating = ref(0);
|
||||
const draftStatus = ref<FavStatus>('a-lire');
|
||||
|
||||
function openEdit(id: string): void {
|
||||
const f = all.value.find((x) => x.id === id);
|
||||
if (!f) return;
|
||||
editingId.value = id;
|
||||
draftNote.value = f.note;
|
||||
draftRating.value = f.rating;
|
||||
draftStatus.value = f.status;
|
||||
editOpen.value = true;
|
||||
}
|
||||
|
||||
function save(): void {
|
||||
if (!editingId.value) return;
|
||||
setNote(editingId.value, draftNote.value);
|
||||
setRating(editingId.value, draftRating.value);
|
||||
setStatus(editingId.value, draftStatus.value);
|
||||
editOpen.value = false;
|
||||
}
|
||||
|
||||
function ipColor(ip: string): string { return getIpColor(ip); }
|
||||
function statusLabel(s: FavStatus): string {
|
||||
return s === 'lu' ? 'Lu' : s === 'top' ? 'Coup de cœur' : 'À lire';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.favs { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
|
||||
.favs-head {
|
||||
flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 16px 20px; border-bottom: 1px solid #1a1a2a;
|
||||
}
|
||||
.favs-title { font-family: Arial, sans-serif; font-size: 17px; color: #ccccee; margin: 0; }
|
||||
.favs-count { font-size: 13px; color: #ffcc44; margin-left: 6px; }
|
||||
.favs-actions { display: flex; gap: 10px; }
|
||||
.btn-stats { font-size: 12px; color: #00ddff; text-decoration: none; border: 1px solid #00aaff44; border-radius: 14px; padding: 6px 12px; }
|
||||
.btn-stats:hover { background: #00aaff14; }
|
||||
.btn-clear { font-size: 12px; color: #ff6655; background: #2a1010; border: 1px solid #882222; border-radius: 14px; padding: 6px 12px; cursor: pointer; }
|
||||
|
||||
.favs-scroll { flex: 1; overflow-y: auto; padding: 16px 20px; }
|
||||
.favs-empty { text-align: center; color: #55557a; font-family: Arial, sans-serif; padding: 50px 0; }
|
||||
.btn-explore { display: inline-block; margin-top: 14px; color: #00ddff; text-decoration: none; border: 1px solid #00aaff44; border-radius: 16px; padding: 8px 18px; }
|
||||
.btn-explore:hover { background: #00aaff14; }
|
||||
|
||||
.favs-list { list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
|
||||
.fav-card {
|
||||
display: flex; gap: 12px; align-items: flex-start;
|
||||
background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 12px 14px;
|
||||
}
|
||||
.fav-main { flex: 1; min-width: 0; }
|
||||
.fav-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
|
||||
.fav-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; text-decoration: none; }
|
||||
.fav-status { font-size: 9px; padding: 1px 7px; border-radius: 6px; font-family: Arial, sans-serif; }
|
||||
.fav-status--a-lire { color: #8888aa; background: #16162a; }
|
||||
.fav-status--lu { color: #33aa77; background: #0e2018; }
|
||||
.fav-status--top { color: #ffcc44; background: #2a2206; }
|
||||
.fav-rating { font-size: 11px; color: #ffcc44; }
|
||||
.fav-rating .dim { color: #333; }
|
||||
.fav-content { font-family: Arial, sans-serif; font-size: 13px; color: #c0c0c0; margin: 0; word-break: break-word; }
|
||||
.fav-note { font-family: Arial, sans-serif; font-size: 11px; color: #6688aa; margin: 6px 0 0; font-style: italic; }
|
||||
.fav-buttons { display: flex; flex-direction: column; gap: 6px; }
|
||||
.fav-edit, .fav-del { background: #141420; border: 1px solid #222234; border-radius: 8px; cursor: pointer; padding: 4px 8px; font-size: 13px; }
|
||||
.fav-edit:hover, .fav-del:hover { background: #1c1c2e; }
|
||||
|
||||
/* Modale d'édition */
|
||||
.edit-content { font-family: Arial, sans-serif; font-size: 12px; color: #8899aa; font-style: italic; margin: 0 0 16px; }
|
||||
.edit-label { display: block; font-family: Arial, sans-serif; font-size: 11px; color: #6a6a90; margin: 12px 0 5px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.stars { display: flex; gap: 4px; }
|
||||
.star { background: none; border: none; cursor: pointer; font-size: 22px; color: #333; padding: 0; }
|
||||
.star.on { color: #ffcc44; }
|
||||
.edit-select { width: 100%; background: #141420; border: 1px solid #222234; border-radius: 6px; color: #ccccdd; font-size: 13px; padding: 8px 10px; outline: none; }
|
||||
.edit-note { width: 100%; box-sizing: border-box; background: #141420; border: 1px solid #222234; border-radius: 6px; color: #ccccdd; font-family: Arial, sans-serif; font-size: 13px; padding: 8px 10px; outline: none; resize: vertical; }
|
||||
.edit-foot { margin-top: 18px; text-align: right; }
|
||||
.btn-save { background: #004488; border: 1px solid #0066aa; color: #00ddff; font-size: 13px; font-weight: bold; padding: 8px 18px; border-radius: 18px; cursor: pointer; }
|
||||
.btn-save:hover { background: #005599; }
|
||||
</style>
|
||||
@@ -64,8 +64,8 @@ function cancelReply(): void {
|
||||
.xip-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--xip-app-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
169
frontend/src/views/MesStatsPage.vue
Normal file
169
frontend/src/views/MesStatsPage.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<!-- Synthèse dérivée de la liste personnelle (favoris). Tous les agrégats sont
|
||||
des `computed` sur useFavorites().all → mise à jour automatique à chaque
|
||||
ajout / retrait / modification. Accès gardé : redirige si aucun favori. -->
|
||||
<template>
|
||||
<div class="stats">
|
||||
<header class="stats-head">
|
||||
<h1 class="stats-title">📊 Mes statistiques</h1>
|
||||
<RouterLink to="/favoris" class="btn-back">← Mes favoris</RouterLink>
|
||||
</header>
|
||||
|
||||
<div class="stats-scroll">
|
||||
<!-- Cartes chiffres -->
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<div class="card-label">Favoris</div>
|
||||
<div class="card-val"><AnimatedNumber :value="total" /></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-label">Note moyenne</div>
|
||||
<div class="card-val card-val--gold"><AnimatedNumber :value="avgRating" :decimals="1" /><span class="unit">/5</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-label">Longueur moyenne</div>
|
||||
<div class="card-val"><AnimatedNumber :value="avgLength" :decimals="0" /><span class="unit">car.</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-label">Pays distincts</div>
|
||||
<div class="card-val card-val--cyan"><AnimatedNumber :value="countryCount" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Répartition par statut -->
|
||||
<section class="block">
|
||||
<h2 class="block-title">Par statut</h2>
|
||||
<div class="bars">
|
||||
<div v-for="s in statusBreakdown" :key="s.key" class="bar-row">
|
||||
<span class="bar-label">{{ s.label }}</span>
|
||||
<div class="bar-track"><div class="bar-fill" :style="{ width: pct(s.count) + '%', background: s.color }" /></div>
|
||||
<span class="bar-count">{{ s.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Top pays -->
|
||||
<section v-if="topCountries.length" class="block">
|
||||
<h2 class="block-title">Top pays</h2>
|
||||
<div class="bars">
|
||||
<div v-for="c in topCountries" :key="c.key" class="bar-row">
|
||||
<span class="bar-label">
|
||||
<img v-if="c.code" :src="`https://flagcdn.com/16x12/${c.code.toLowerCase()}.png`" :alt="c.code" class="flag" />
|
||||
{{ c.label }}
|
||||
</span>
|
||||
<div class="bar-track"><div class="bar-fill" :style="{ width: pct(c.count) + '%' }" /></div>
|
||||
<span class="bar-count">{{ c.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Top auteurs -->
|
||||
<section v-if="topAuthors.length" class="block">
|
||||
<h2 class="block-title">Top auteurs (IP)</h2>
|
||||
<ol class="authors">
|
||||
<li v-for="a in topAuthors" :key="a.key" class="author-row">
|
||||
<span class="author-ip" :style="{ color: ipColor(a.key) }">{{ a.key }}</span>
|
||||
<span class="author-count">{{ a.count }} favori(s)</span>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useFavorites } from '@/composables/useFavorites';
|
||||
import { getIpColor } from '@/composables/ipColor';
|
||||
import AnimatedNumber from '@/components/AnimatedNumber.vue';
|
||||
|
||||
const { all } = useFavorites();
|
||||
|
||||
const total = computed(() => all.value.length);
|
||||
|
||||
const avgRating = computed(() => {
|
||||
const rated = all.value.filter((f) => f.rating > 0);
|
||||
if (!rated.length) return 0;
|
||||
return rated.reduce((s, f) => s + f.rating, 0) / rated.length;
|
||||
});
|
||||
|
||||
const avgLength = computed(() => {
|
||||
if (!all.value.length) return 0;
|
||||
return all.value.reduce((s, f) => s + (f.content?.length ?? 0), 0) / all.value.length;
|
||||
});
|
||||
|
||||
function tally<T extends string>(keyOf: (f: (typeof all.value)[number]) => T | null) {
|
||||
const map = new Map<T, number>();
|
||||
for (const f of all.value) {
|
||||
const k = keyOf(f);
|
||||
if (k == null) continue;
|
||||
map.set(k, (map.get(k) ?? 0) + 1);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
const statusBreakdown = computed(() => {
|
||||
const m = tally((f) => f.status);
|
||||
return [
|
||||
{ key: 'a-lire', label: 'À lire', color: '#5566aa', count: m.get('a-lire') ?? 0 },
|
||||
{ key: 'lu', label: 'Lu', color: '#33aa77', count: m.get('lu') ?? 0 },
|
||||
{ key: 'top', label: 'Coup de cœur', color: '#ffcc44', count: m.get('top') ?? 0 },
|
||||
];
|
||||
});
|
||||
|
||||
const countryAgg = computed(() => {
|
||||
const counts = new Map<string, { code: string; count: number }>();
|
||||
for (const f of all.value) {
|
||||
const g = f.authorGeo;
|
||||
const label = g?.country || (g && !g.countryCode ? 'Local' : 'Inconnu');
|
||||
const code = g?.countryCode ?? '';
|
||||
const cur = counts.get(label) ?? { code, count: 0 };
|
||||
cur.count++;
|
||||
counts.set(label, cur);
|
||||
}
|
||||
return [...counts.entries()].map(([label, v]) => ({ key: label, label, code: v.code, count: v.count }));
|
||||
});
|
||||
const countryCount = computed(() => countryAgg.value.length);
|
||||
const topCountries = computed(() => [...countryAgg.value].sort((a, b) => b.count - a.count).slice(0, 5));
|
||||
|
||||
const topAuthors = computed(() => {
|
||||
const m = tally((f) => f.authorIp);
|
||||
return [...m.entries()].map(([key, count]) => ({ key, count })).sort((a, b) => b.count - a.count).slice(0, 5);
|
||||
});
|
||||
|
||||
const maxCount = computed(() => Math.max(1, ...all.value.length ? [total.value] : [1]));
|
||||
function pct(n: number): number { return Math.round((n / maxCount.value) * 100); }
|
||||
function ipColor(ip: string): string { return getIpColor(ip); }
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stats { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
|
||||
.stats-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #1a1a2a; }
|
||||
.stats-title { font-family: Arial, sans-serif; font-size: 17px; color: #ccccee; margin: 0; }
|
||||
.btn-back { font-size: 12px; color: #00ddff; text-decoration: none; border: 1px solid #00aaff44; border-radius: 14px; padding: 6px 12px; }
|
||||
.btn-back:hover { background: #00aaff14; }
|
||||
|
||||
.stats-scroll { flex: 1; overflow-y: auto; padding: 20px; max-width: 760px; margin: 0 auto; width: 100%; }
|
||||
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
|
||||
.card { background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 16px; text-align: center; }
|
||||
.card-label { font-family: Arial, sans-serif; font-size: 10px; color: #6a6a90; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
|
||||
.card-val { font-family: 'Courier New', monospace; font-size: 26px; font-weight: bold; color: #d8d8e8; }
|
||||
.card-val--gold { color: #ffcc44; }
|
||||
.card-val--cyan { color: #00ddff; }
|
||||
.unit { font-size: 12px; color: #55557a; margin-left: 3px; }
|
||||
|
||||
.block { background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
|
||||
.block-title { font-family: Arial, sans-serif; font-size: 13px; color: #aaaacc; margin: 0 0 12px; }
|
||||
.bars { display: flex; flex-direction: column; gap: 8px; }
|
||||
.bar-row { display: flex; align-items: center; gap: 10px; }
|
||||
.bar-label { font-family: Arial, sans-serif; font-size: 12px; color: #9999bb; width: 130px; display: flex; align-items: center; gap: 6px; }
|
||||
.flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
|
||||
.bar-track { flex: 1; height: 8px; background: #16162a; border-radius: 4px; overflow: hidden; }
|
||||
.bar-fill { height: 100%; background: #00aaff; border-radius: 4px; transition: width 0.3s; }
|
||||
.bar-count { font-family: 'Courier New', monospace; font-size: 12px; color: #ccccdd; width: 28px; text-align: right; }
|
||||
|
||||
.authors { list-style: none; counter-reset: rank; display: flex; flex-direction: column; gap: 8px; }
|
||||
.author-row { display: flex; align-items: center; justify-content: space-between; counter-increment: rank; }
|
||||
.author-row::before { content: counter(rank); color: #44445a; font-family: 'Courier New', monospace; font-size: 11px; margin-right: 10px; }
|
||||
.author-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; flex: 1; }
|
||||
.author-count { font-family: Arial, sans-serif; font-size: 11px; color: #6a6a90; }
|
||||
</style>
|
||||
125
frontend/src/views/MessageDetailPage.vue
Normal file
125
frontend/src/views/MessageDetailPage.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<!-- Détail d'un message à partir de l'identifiant présent dans l'URL (/message/:id). -->
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="detail-bar">
|
||||
<button class="back" type="button" @click="goBack">← Retour</button>
|
||||
</div>
|
||||
|
||||
<div class="detail-body">
|
||||
<p v-if="loading" class="state">Chargement…</p>
|
||||
<p v-else-if="error" class="state state--err">{{ error }}</p>
|
||||
|
||||
<article v-else-if="message" class="thread">
|
||||
<header class="thread-head">
|
||||
<span class="thread-ip" :style="{ color: ipColor(message.authorIp) }">{{ message.authorIp }}</span>
|
||||
<span v-if="message.authorGeo" class="thread-geo">
|
||||
<img
|
||||
v-if="message.authorGeo.countryCode"
|
||||
:src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`"
|
||||
:alt="message.authorGeo.countryCode"
|
||||
class="flag"
|
||||
/>
|
||||
{{ geoText(message.authorGeo) }}
|
||||
</span>
|
||||
<span class="thread-ts">{{ fmtDate(message.createdAt) }}</span>
|
||||
<FavButton :message="message" class="thread-fav" />
|
||||
</header>
|
||||
|
||||
<RichContent
|
||||
v-if="message.richMode && message.richMode !== 'none' && message.richContent"
|
||||
:mode="message.richMode"
|
||||
:content="message.richContent"
|
||||
/>
|
||||
<p v-else class="thread-content">{{ message.content }}</p>
|
||||
|
||||
<MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
|
||||
|
||||
<section v-if="message.replies?.length" class="replies">
|
||||
<h2 class="replies-title">{{ message.replies.length }} réponse(s)</h2>
|
||||
<div v-for="r in message.replies" :key="r.id" class="reply">
|
||||
<span class="reply-ip" :style="{ color: ipColor(r.authorIp) }">{{ r.authorIp }}</span>
|
||||
<span class="reply-ts">{{ fmtDate(r.createdAt) }}</span>
|
||||
<p class="reply-content">{{ r.content }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import type { Message, GeoInfo } from '@/composables/useMessages';
|
||||
import { getIpColor } from '@/composables/ipColor';
|
||||
import RichContent from '@/components/RichContent.vue';
|
||||
import MessageAttachments from '@/components/MessageAttachments.vue';
|
||||
import FavButton from '@/components/FavButton.vue';
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const message = ref<Message | null>(null);
|
||||
const loading = ref(true);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
async function fetchMessage(id: string): Promise<void> {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
message.value = null;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/messages/${encodeURIComponent(id)}`);
|
||||
if (res.status === 404) { error.value = 'Ce message n’existe pas (ou plus).'; return; }
|
||||
if (!res.ok) throw new Error();
|
||||
message.value = (await res.json()) as Message;
|
||||
} catch {
|
||||
error.value = 'Impossible de charger ce message.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Recharge quand l'id de l'URL change (navigation entre détails).
|
||||
watch(() => route.params.id, (id) => { if (typeof id === 'string') void fetchMessage(id); }, { immediate: true });
|
||||
|
||||
function goBack(): void {
|
||||
if (window.history.length > 1) router.back();
|
||||
else router.push('/explorer');
|
||||
}
|
||||
function ipColor(ip: string): string { return getIpColor(ip); }
|
||||
function fmtDate(d: string): string { return new Date(d).toLocaleString('fr-FR'); }
|
||||
function geoText(g: GeoInfo): string {
|
||||
if (!g.countryCode) return 'Local';
|
||||
return [g.city, g.country].filter(Boolean).join(', ');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
|
||||
.detail-bar { flex-shrink: 0; padding: 12px 20px; border-bottom: 1px solid #1a1a2a; }
|
||||
.back {
|
||||
background: #141420; border: 1px solid #222234; border-radius: 16px;
|
||||
color: #00ddff; font-size: 12px; padding: 6px 14px; cursor: pointer;
|
||||
}
|
||||
.back:hover { background: #1c1c2e; }
|
||||
.detail-body { flex: 1; overflow-y: auto; padding: 24px 20px; }
|
||||
.state { text-align: center; color: #55557a; font-family: Arial, sans-serif; padding: 40px; }
|
||||
.state--err { color: #ff7788; }
|
||||
|
||||
.thread { max-width: 640px; margin: 0 auto; background: #101018; border: 1px solid #20203a; border-radius: 12px; padding: 20px; }
|
||||
.thread-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
|
||||
.thread-ip { font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; }
|
||||
.thread-geo { font-family: Arial, sans-serif; font-size: 11px; color: #55557a; display: inline-flex; align-items: center; gap: 4px; }
|
||||
.flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
|
||||
.thread-ts { margin-left: auto; font-size: 11px; color: #44445a; font-family: 'Courier New', monospace; }
|
||||
.thread-fav { font-size: 17px; }
|
||||
.thread-content { font-family: Arial, sans-serif; font-size: 15px; color: #d8d8e8; line-height: 1.5; margin: 0; word-break: break-word; }
|
||||
|
||||
.replies { margin-top: 20px; border-top: 1px solid #20203a; padding-top: 14px; }
|
||||
.replies-title { font-family: Arial, sans-serif; font-size: 12px; color: #6688aa; margin: 0 0 12px; }
|
||||
.reply { border-left: 2px solid #1a1a2a; padding-left: 12px; margin-bottom: 12px; }
|
||||
.reply-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
|
||||
.reply-ts { font-size: 10px; color: #44445a; margin-left: 8px; font-family: 'Courier New', monospace; }
|
||||
.reply-content { font-family: Arial, sans-serif; font-size: 13px; color: #c0c0c0; margin: 4px 0 0; }
|
||||
</style>
|
||||
78
frontend/src/views/ProductDetailPage.vue
Normal file
78
frontend/src/views/ProductDetailPage.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<!-- Détail d'un produit du shop à partir de l'identifiant de l'URL (/shop/p/:id). -->
|
||||
<template>
|
||||
<div class="pdetail">
|
||||
<div class="pdetail-bar">
|
||||
<RouterLink to="/shop" class="back">← Boutique</RouterLink>
|
||||
</div>
|
||||
<div class="pdetail-body">
|
||||
<p v-if="loading" class="state">Chargement…</p>
|
||||
<p v-else-if="!product" class="state state--err">Produit introuvable.</p>
|
||||
<div v-else class="pdetail-card">
|
||||
<ProductCard
|
||||
:product="product"
|
||||
:buying="buying === product.id"
|
||||
:owns="owns"
|
||||
:owned-pet-chars="ownedPetChars()"
|
||||
:pet-count="petCount()"
|
||||
:free-mode="freeMode"
|
||||
@buy="onBuy"
|
||||
@go-perso="$router.push('/shop')"
|
||||
/>
|
||||
<p v-if="lastError" class="toast toast--err">{{ lastError }}</p>
|
||||
<p v-else-if="lastSuccess" class="toast toast--ok">✓ Acheté</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useShop, type Product, type PurchaseOptions } from '@/composables/useShop';
|
||||
import { useWallet } from '@/composables/useWallet';
|
||||
import ProductCard from '@/components/shop/ProductCard.vue';
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
const route = useRoute();
|
||||
|
||||
const { buying, lastError, lastSuccess, fetchMe, owns, petCount, ownedPetChars, purchase } = useShop();
|
||||
const { freeMode, fetchWallet } = useWallet();
|
||||
|
||||
const product = ref<Product | null>(null);
|
||||
const loading = ref(true);
|
||||
|
||||
async function load(id: string): Promise<void> {
|
||||
loading.value = true;
|
||||
product.value = null;
|
||||
try {
|
||||
const [res] = await Promise.all([
|
||||
fetch(`${API_URL}/api/shop/products/${encodeURIComponent(id)}`),
|
||||
fetchMe(),
|
||||
fetchWallet(),
|
||||
]);
|
||||
if (res.ok) product.value = (await res.json()) as Product;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => route.params.id, (id) => { if (typeof id === 'string') void load(id); }, { immediate: true });
|
||||
|
||||
async function onBuy(productId: string, options: PurchaseOptions): Promise<void> {
|
||||
await purchase(productId, options);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pdetail { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
|
||||
.pdetail-bar { flex-shrink: 0; padding: 12px 20px; border-bottom: 1px solid #1a1a2a; }
|
||||
.back { background: #141420; border: 1px solid #222234; border-radius: 16px; color: #00ddff; font-size: 12px; padding: 6px 14px; text-decoration: none; }
|
||||
.back:hover { background: #1c1c2e; }
|
||||
.pdetail-body { flex: 1; overflow-y: auto; padding: 24px 20px; display: flex; justify-content: center; }
|
||||
.pdetail-card { width: 100%; max-width: 340px; }
|
||||
.state { color: #55557a; font-family: Arial, sans-serif; padding: 40px; text-align: center; }
|
||||
.state--err { color: #ff7788; }
|
||||
.toast { margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; text-align: center; }
|
||||
.toast--err { background: #2a0e12; border: 1px solid #aa3344; color: #ff8899; }
|
||||
.toast--ok { background: #0e2a16; border: 1px solid #33aa55; color: #66ffaa; }
|
||||
</style>
|
||||
@@ -1,228 +1,228 @@
|
||||
<template>
|
||||
<div class="shop">
|
||||
<!-- Header -->
|
||||
<header class="shop-header">
|
||||
<div class="sh-left">
|
||||
<router-link to="/" class="sh-back">← Chat</router-link>
|
||||
<span class="sh-title">XIP</span>
|
||||
<span class="sh-sub">Marketplace</span>
|
||||
</div>
|
||||
<div class="sh-right">
|
||||
<span v-if="ip" class="sh-ip">Connecté : {{ ip }}</span>
|
||||
<span class="sh-balance" :class="{ free: freeMode }">
|
||||
◈ {{ displayBalance() }} <span class="sh-cr">cr</span>
|
||||
</span>
|
||||
<button class="sh-topup" @click="topUp" type="button">💸 Recharger</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Flash promo banner -->
|
||||
<div class="flash">
|
||||
⚡ OFFRES FLASH — Cadre de Pub -33%, Pack Cosmétique -3 cr — expire dans
|
||||
<span class="flash-timer">{{ countdown }}</span>
|
||||
</div>
|
||||
|
||||
<div class="shop-body">
|
||||
<!-- Category nav -->
|
||||
<nav class="shop-nav">
|
||||
<button
|
||||
v-for="cat in categories"
|
||||
:key="cat.id"
|
||||
class="nav-item"
|
||||
:class="{ active: activeCat === cat.id }"
|
||||
@click="activeCat = cat.id"
|
||||
type="button"
|
||||
>{{ cat.label }}</button>
|
||||
|
||||
<div class="nav-wallet">
|
||||
<p class="nav-wallet-label">Ton solde</p>
|
||||
<p class="nav-wallet-val" :class="{ free: freeMode }">{{ displayBalance() }} cr</p>
|
||||
<button class="nav-topup" @click="topUp" type="button">+ Recharger gratuitement</button>
|
||||
<p v-if="freeMode" class="nav-free-note">Mode localhost : tout gratuit 🎉</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Product grid -->
|
||||
<main class="shop-main">
|
||||
<div v-if="lastError" class="toast toast--err">{{ lastError }}</div>
|
||||
<div v-else-if="lastSuccess" class="toast toast--ok">✓ Achat effectué</div>
|
||||
|
||||
<!-- Mes Persos panel -->
|
||||
<MesPersos v-if="activeCat === 'perso'" />
|
||||
|
||||
<template v-else>
|
||||
<div class="grid">
|
||||
<ProductCard
|
||||
v-for="p in visibleProducts"
|
||||
:key="p.id"
|
||||
:product="p"
|
||||
:buying="buying === p.id"
|
||||
:owns="owns"
|
||||
:pet-count="petCount()"
|
||||
:owned-pet-chars="ownedPetChars()"
|
||||
:free-mode="freeMode"
|
||||
@buy="onBuy"
|
||||
@go-perso="activeCat = 'perso'"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="visibleProducts.length === 0" class="empty">Aucun produit dans cette catégorie.</p>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { useShop, type PurchaseOptions } from '@/composables/useShop';
|
||||
import { useWallet } from '@/composables/useWallet';
|
||||
import { parseMeta, type ProductMeta } from '@/composables/useMeta';
|
||||
import ProductCard from '@/components/shop/ProductCard.vue';
|
||||
import MesPersos from '@/components/shop/MesPersos.vue';
|
||||
|
||||
const { products, buying, lastError, lastSuccess, fetchProducts, fetchMe, owns, petCount, ownedPetChars, purchase } = useShop();
|
||||
const { ip, freeMode, displayBalance, fetchWallet, topUp: walletTopUp } = useWallet();
|
||||
|
||||
// Navigation forcée par catégorie : pas de « Tout voir », on entre directement
|
||||
// dans une rubrique organisée.
|
||||
const categories = [
|
||||
{ id: 'publicite', label: 'Publicité' },
|
||||
{ id: 'abonnements', label: 'Abonnements' },
|
||||
{ id: 'cosmetiques', label: 'Cosmétiques' },
|
||||
{ id: 'premium', label: 'Premium' },
|
||||
{ id: 'promotions', label: 'Promotions' },
|
||||
{ id: 'perso', label: '✨ Mes Persos' },
|
||||
];
|
||||
const activeCat = ref('publicite');
|
||||
|
||||
const visibleProducts = computed(() => {
|
||||
const chars = ownedPetChars();
|
||||
return products.value
|
||||
.filter((p) => p.category === activeCat.value)
|
||||
.filter((p) => {
|
||||
if (p.kind !== 'pet') return true;
|
||||
const designs = parseMeta<ProductMeta>(p.metaJson).designs ?? [];
|
||||
return designs.some((d) => !chars.includes(d.char));
|
||||
});
|
||||
});
|
||||
|
||||
async function onBuy(productId: string, options: PurchaseOptions): Promise<void> {
|
||||
await purchase(productId, options);
|
||||
}
|
||||
|
||||
async function topUp(): Promise<void> {
|
||||
await walletTopUp();
|
||||
}
|
||||
|
||||
// Cosmetic countdown timer (purely decorative, like the mockups).
|
||||
const countdown = ref('02:47:33');
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
let remaining = 2 * 3600 + 47 * 60 + 33;
|
||||
function tick(): void {
|
||||
remaining = remaining > 0 ? remaining - 1 : 0;
|
||||
const h = Math.floor(remaining / 3600);
|
||||
const m = Math.floor((remaining % 3600) / 60);
|
||||
const s = remaining % 60;
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
countdown.value = `${pad(h)}:${pad(m)}:${pad(s)}`;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchProducts();
|
||||
fetchMe();
|
||||
fetchWallet();
|
||||
timer = setInterval(tick, 1000);
|
||||
});
|
||||
onUnmounted(() => { if (timer) clearInterval(timer); });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shop {
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
background: #08080e;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.shop-header {
|
||||
flex-shrink: 0;
|
||||
height: 56px;
|
||||
background: #0e0e18;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.sh-left { display: flex; align-items: center; gap: 12px; }
|
||||
.sh-back {
|
||||
color: #00ddff; text-decoration: none; font-size: 12px; font-weight: bold;
|
||||
border: 1px solid #00aaff44; border-radius: 10px; padding: 4px 10px;
|
||||
}
|
||||
.sh-back:hover { background: #00aaff14; }
|
||||
.sh-title { font-size: 18px; font-weight: bold; color: #6699aa; }
|
||||
.sh-sub { font-size: 13px; color: #8888aa; }
|
||||
.sh-right { display: flex; align-items: center; gap: 12px; }
|
||||
.sh-ip { font-family: 'Courier New', monospace; font-size: 11px; color: #5566aa; }
|
||||
.sh-balance { font-family: 'Courier New', monospace; font-size: 15px; font-weight: bold; color: #ccaa44; }
|
||||
.sh-balance.free { color: #44aa77; }
|
||||
.sh-cr { font-size: 10px; color: #886633; }
|
||||
.sh-topup {
|
||||
background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77;
|
||||
font-size: 12px; font-weight: bold; padding: 6px 14px; border-radius: 16px; cursor: pointer;
|
||||
box-shadow: none;
|
||||
}
|
||||
.sh-topup:hover { background: #234a23; }
|
||||
|
||||
/* Flash banner */
|
||||
.flash {
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(90deg, #2a0a0a, #1a0a1a);
|
||||
border-bottom: 1px solid #44113344;
|
||||
color: #ff8866; font-size: 12px; text-align: center; padding: 7px;
|
||||
}
|
||||
.flash-timer { font-family: 'Courier New', monospace; color: #ffcc44; font-weight: bold; }
|
||||
|
||||
/* Body */
|
||||
.shop-body { flex: 1; display: flex; min-height: 0; }
|
||||
|
||||
.shop-nav {
|
||||
width: 200px; flex-shrink: 0; background: #0b0b14; border-right: 1px solid #1a1a2a;
|
||||
padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
|
||||
}
|
||||
.nav-item {
|
||||
text-align: left; background: none; border: none; color: #8888aa;
|
||||
font-size: 13px; padding: 9px 12px; border-radius: 7px; cursor: pointer;
|
||||
}
|
||||
.nav-item:hover { background: #14142080; color: #aaaacc; }
|
||||
.nav-item.active { background: #00aaff18; color: #00ddff; font-weight: bold; }
|
||||
|
||||
.nav-wallet {
|
||||
margin-top: auto; background: #0e0e1a; border: 1px solid #20203a; border-radius: 8px; padding: 12px;
|
||||
}
|
||||
.nav-wallet-label { font-size: 10px; color: #6a6a90; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 1px; }
|
||||
.nav-wallet-val { font-family: 'Courier New', monospace; font-size: 20px; font-weight: bold; color: #ffdd66; margin: 0 0 10px; }
|
||||
.nav-wallet-val.free { color: #33ff99; }
|
||||
.nav-topup { width: 100%; background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77; font-size: 11px; font-weight: bold; padding: 8px; border-radius: 14px; cursor: pointer; }
|
||||
.nav-topup:hover { background: #234a23; }
|
||||
.nav-free-note { font-size: 10px; color: #33aa66; margin: 8px 0 0; text-align: center; }
|
||||
|
||||
.shop-main { flex: 1; overflow-y: auto; padding: 20px; }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
.empty { color: #44446a; text-align: center; padding: 40px; }
|
||||
|
||||
.toast {
|
||||
margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
|
||||
}
|
||||
.toast--err { background: #2a0e12; border: 1px solid #aa3344; color: #ff8899; }
|
||||
.toast--ok { background: #0e2a16; border: 1px solid #33aa55; color: #66ffaa; }
|
||||
</style>
|
||||
<template>
|
||||
<div class="shop">
|
||||
<!-- Header -->
|
||||
<header class="shop-header">
|
||||
<div class="sh-left">
|
||||
<router-link to="/" class="sh-back">← Chat</router-link>
|
||||
<span class="sh-title">XIP</span>
|
||||
<span class="sh-sub">Marketplace</span>
|
||||
</div>
|
||||
<div class="sh-right">
|
||||
<span v-if="ip" class="sh-ip">Connecté : {{ ip }}</span>
|
||||
<span class="sh-balance" :class="{ free: freeMode }">
|
||||
◈ {{ displayBalance() }} <span class="sh-cr">cr</span>
|
||||
</span>
|
||||
<button class="sh-topup" @click="topUp" type="button">💸 Recharger</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Flash promo banner -->
|
||||
<div class="flash">
|
||||
⚡ OFFRES FLASH — Cadre de Pub -33%, Pack Cosmétique -3 cr — expire dans
|
||||
<span class="flash-timer">{{ countdown }}</span>
|
||||
</div>
|
||||
|
||||
<div class="shop-body">
|
||||
<!-- Category nav -->
|
||||
<nav class="shop-nav">
|
||||
<button
|
||||
v-for="cat in categories"
|
||||
:key="cat.id"
|
||||
class="nav-item"
|
||||
:class="{ active: activeCat === cat.id }"
|
||||
@click="activeCat = cat.id"
|
||||
type="button"
|
||||
>{{ cat.label }}</button>
|
||||
|
||||
<div class="nav-wallet">
|
||||
<p class="nav-wallet-label">Ton solde</p>
|
||||
<p class="nav-wallet-val" :class="{ free: freeMode }">{{ displayBalance() }} cr</p>
|
||||
<button class="nav-topup" @click="topUp" type="button">+ Recharger gratuitement</button>
|
||||
<p v-if="freeMode" class="nav-free-note">Mode localhost : tout gratuit 🎉</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Product grid -->
|
||||
<main class="shop-main">
|
||||
<div v-if="lastError" class="toast toast--err">{{ lastError }}</div>
|
||||
<div v-else-if="lastSuccess" class="toast toast--ok">✓ Achat effectué</div>
|
||||
|
||||
<!-- Mes Persos panel -->
|
||||
<MesPersos v-if="activeCat === 'perso'" />
|
||||
|
||||
<template v-else>
|
||||
<div class="grid">
|
||||
<ProductCard
|
||||
v-for="p in visibleProducts"
|
||||
:key="p.id"
|
||||
:product="p"
|
||||
:buying="buying === p.id"
|
||||
:owns="owns"
|
||||
:pet-count="petCount()"
|
||||
:owned-pet-chars="ownedPetChars()"
|
||||
:free-mode="freeMode"
|
||||
@buy="onBuy"
|
||||
@go-perso="activeCat = 'perso'"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="visibleProducts.length === 0" class="empty">Aucun produit dans cette catégorie.</p>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { useShop, type PurchaseOptions } from '@/composables/useShop';
|
||||
import { useWallet } from '@/composables/useWallet';
|
||||
import { parseMeta, type ProductMeta } from '@/composables/useMeta';
|
||||
import ProductCard from '@/components/shop/ProductCard.vue';
|
||||
import MesPersos from '@/components/shop/MesPersos.vue';
|
||||
|
||||
const { products, buying, lastError, lastSuccess, fetchProducts, fetchMe, owns, petCount, ownedPetChars, purchase } = useShop();
|
||||
const { ip, freeMode, displayBalance, fetchWallet, topUp: walletTopUp } = useWallet();
|
||||
|
||||
// Navigation forcée par catégorie : pas de « Tout voir », on entre directement
|
||||
// dans une rubrique organisée.
|
||||
const categories = [
|
||||
{ id: 'publicite', label: 'Publicité' },
|
||||
{ id: 'abonnements', label: 'Abonnements' },
|
||||
{ id: 'cosmetiques', label: 'Cosmétiques' },
|
||||
{ id: 'premium', label: 'Premium' },
|
||||
{ id: 'promotions', label: 'Promotions' },
|
||||
{ id: 'perso', label: '✨ Mes Persos' },
|
||||
];
|
||||
const activeCat = ref('publicite');
|
||||
|
||||
const visibleProducts = computed(() => {
|
||||
const chars = ownedPetChars();
|
||||
return products.value
|
||||
.filter((p) => p.category === activeCat.value)
|
||||
.filter((p) => {
|
||||
if (p.kind !== 'pet') return true;
|
||||
const designs = parseMeta<ProductMeta>(p.metaJson).designs ?? [];
|
||||
return designs.some((d) => !chars.includes(d.char));
|
||||
});
|
||||
});
|
||||
|
||||
async function onBuy(productId: string, options: PurchaseOptions): Promise<void> {
|
||||
await purchase(productId, options);
|
||||
}
|
||||
|
||||
async function topUp(): Promise<void> {
|
||||
await walletTopUp();
|
||||
}
|
||||
|
||||
// Cosmetic countdown timer (purely decorative, like the mockups).
|
||||
const countdown = ref('02:47:33');
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
let remaining = 2 * 3600 + 47 * 60 + 33;
|
||||
function tick(): void {
|
||||
remaining = remaining > 0 ? remaining - 1 : 0;
|
||||
const h = Math.floor(remaining / 3600);
|
||||
const m = Math.floor((remaining % 3600) / 60);
|
||||
const s = remaining % 60;
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
countdown.value = `${pad(h)}:${pad(m)}:${pad(s)}`;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchProducts();
|
||||
fetchMe();
|
||||
fetchWallet();
|
||||
timer = setInterval(tick, 1000);
|
||||
});
|
||||
onUnmounted(() => { if (timer) clearInterval(timer); });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #08080e;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.shop-header {
|
||||
flex-shrink: 0;
|
||||
height: 56px;
|
||||
background: #0e0e18;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.sh-left { display: flex; align-items: center; gap: 12px; }
|
||||
.sh-back {
|
||||
color: #00ddff; text-decoration: none; font-size: 12px; font-weight: bold;
|
||||
border: 1px solid #00aaff44; border-radius: 10px; padding: 4px 10px;
|
||||
}
|
||||
.sh-back:hover { background: #00aaff14; }
|
||||
.sh-title { font-size: 18px; font-weight: bold; color: #6699aa; }
|
||||
.sh-sub { font-size: 13px; color: #8888aa; }
|
||||
.sh-right { display: flex; align-items: center; gap: 12px; }
|
||||
.sh-ip { font-family: 'Courier New', monospace; font-size: 11px; color: #5566aa; }
|
||||
.sh-balance { font-family: 'Courier New', monospace; font-size: 15px; font-weight: bold; color: #ccaa44; }
|
||||
.sh-balance.free { color: #44aa77; }
|
||||
.sh-cr { font-size: 10px; color: #886633; }
|
||||
.sh-topup {
|
||||
background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77;
|
||||
font-size: 12px; font-weight: bold; padding: 6px 14px; border-radius: 16px; cursor: pointer;
|
||||
box-shadow: none;
|
||||
}
|
||||
.sh-topup:hover { background: #234a23; }
|
||||
|
||||
/* Flash banner */
|
||||
.flash {
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(90deg, #2a0a0a, #1a0a1a);
|
||||
border-bottom: 1px solid #44113344;
|
||||
color: #ff8866; font-size: 12px; text-align: center; padding: 7px;
|
||||
}
|
||||
.flash-timer { font-family: 'Courier New', monospace; color: #ffcc44; font-weight: bold; }
|
||||
|
||||
/* Body */
|
||||
.shop-body { flex: 1; display: flex; min-height: 0; }
|
||||
|
||||
.shop-nav {
|
||||
width: 200px; flex-shrink: 0; background: #0b0b14; border-right: 1px solid #1a1a2a;
|
||||
padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
|
||||
}
|
||||
.nav-item {
|
||||
text-align: left; background: none; border: none; color: #8888aa;
|
||||
font-size: 13px; padding: 9px 12px; border-radius: 7px; cursor: pointer;
|
||||
}
|
||||
.nav-item:hover { background: #14142080; color: #aaaacc; }
|
||||
.nav-item.active { background: #00aaff18; color: #00ddff; font-weight: bold; }
|
||||
|
||||
.nav-wallet {
|
||||
margin-top: auto; background: #0e0e1a; border: 1px solid #20203a; border-radius: 8px; padding: 12px;
|
||||
}
|
||||
.nav-wallet-label { font-size: 10px; color: #6a6a90; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 1px; }
|
||||
.nav-wallet-val { font-family: 'Courier New', monospace; font-size: 20px; font-weight: bold; color: #ffdd66; margin: 0 0 10px; }
|
||||
.nav-wallet-val.free { color: #33ff99; }
|
||||
.nav-topup { width: 100%; background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77; font-size: 11px; font-weight: bold; padding: 8px; border-radius: 14px; cursor: pointer; }
|
||||
.nav-topup:hover { background: #234a23; }
|
||||
.nav-free-note { font-size: 10px; color: #33aa66; margin: 8px 0 0; text-align: center; }
|
||||
|
||||
.shop-main { flex: 1; overflow-y: auto; padding: 20px; }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
.empty { color: #44446a; text-align: center; padding: 40px; }
|
||||
|
||||
.toast {
|
||||
margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
|
||||
}
|
||||
.toast--err { background: #2a0e12; border: 1px solid #aa3344; color: #ff8899; }
|
||||
.toast--ok { background: #0e2a16; border: 1px solid #33aa55; color: #66ffaa; }
|
||||
</style>
|
||||
|
||||
2
frontend/src/vite-env.d.ts
vendored
2
frontend/src/vite-env.d.ts
vendored
@@ -1 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
||||
27
frontend/vitest.config.ts
Normal file
27
frontend/vitest.config.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { defineConfig } from 'vitest/config';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import path from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: { '@': path.resolve(__dirname, './src') },
|
||||
},
|
||||
test: {
|
||||
environment: 'happy-dom',
|
||||
globals: true,
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
// On cible le code métier (état + utilitaires), pas les pages/présentation.
|
||||
include: [
|
||||
'src/composables/useFavorites.ts',
|
||||
'src/composables/useWallet.ts',
|
||||
'src/composables/usePerks.ts',
|
||||
'src/composables/useMeta.ts',
|
||||
'src/composables/useDebounce.ts',
|
||||
'src/composables/ipColor.ts',
|
||||
],
|
||||
reporter: ['text', 'text-summary'],
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user