feat: marketplace, économie à crédits, perks temps réel & pubs réelles
Transforme XIP en réseau social satirique complet : monnaie fictive, marketplace, cosmétiques visibles de tous, messages riches sandboxés, pubs pilotées par les données, et tous les compteurs mock rendus réels. Backend (Bun + Hono + Prisma + Redis) - Économie par IP : modèles Wallet/Purchase/Entitlement, lib/wallet.ts avec spend() atomique (point unique du paywall) + recharge gratuite. - isLocalhost() → mode gratuit (README « si localhost: pas de paywall »). - Marketplace : lib/catalog.ts (achat transactionnel, stock limité, limites par IP) + routes/shop.ts ; 10 produits seedés (idempotent). - Perks : lib/perks.ts (cache Redis busté à l'achat) ; authorPerks injecté dans les payloads messages + endpoint batch /api/perks ; frame WS « perks » global pour MAJ live des messages déjà affichés. - Messages riches : Message.richMode/richContent, gating par entitlement. - Pubs réelles : modèle Ad seedé avec les 4 pubs (ex-hardcodées), rotation par API, comptage d'impressions réel + réconciliation. - WebSocket : IP capturée par connexion → broadcastToIp / broadcast ; frames wallet/perks/ads/alert. - Pièces jointes : lib/storage.ts (UUID, jamais exécuté) + routes/uploads.ts (limite 1 Mo sauf déblocage/localhost, Content-Disposition: attachment). - Alerte audio : routes/alert.ts (cooldown serveur Redis NX, clamp durée). - Compteur « argent extorqué » réel : impressions×CPM + crédits dépensés. Frontend (Vue 3 + Vite) - /shop : ShopPage + ProductCard fidèles aux maquettes ; composables useWallet/useShop/usePerks/useAds/useAttachments/useAlert. - UI de réponse (bannière + sous-threads), solde + lien Shop dans le header. - Perks rendus : Style Doré (or), Pets autour de l'IP, NoAds masque les pubs. - RichContent.vue : iframe sandbox verrouillée (htmlcss sans script ; js allow-scripts seul, jamais allow-same-origin) + CSP. - AdBand/InlineCasinoAd pilotés par l'API ; barre de saisie avec 📎, compteur de caractères, composer riche et bouton alerte. Infra - Migration economy_ads_attachments_rich ; seed idempotent (produits+pubs). - vite.config : usePolling (HMR fiable sur /mnt/c via WSL). - backend/.gitignore : uploads/. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
50
frontend/src/components/AnimatedNumber.vue
Normal file
50
frontend/src/components/AnimatedNumber.vue
Normal file
@@ -0,0 +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>
|
||||
Reference in New Issue
Block a user