kerboul
cf239ab95f
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>
81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<!-- 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>
|