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>
82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<!-- Zone de messages scrollable avec la pub casino en overlay -->
|
|
<template>
|
|
<div class="feed-wrapper">
|
|
<!-- Messages -->
|
|
<div ref="listEl" class="feed-scroll">
|
|
<MessageItem
|
|
v-for="msg in messages"
|
|
:key="msg.id"
|
|
:message="msg"
|
|
@reply="$emit('reply', $event)"
|
|
/>
|
|
<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, watch, nextTick } from 'vue';
|
|
import type { Message } from '@/composables/useMessages';
|
|
import MessageItem from './MessageItem.vue';
|
|
import InlineCasinoAd from './InlineCasinoAd.vue';
|
|
|
|
const props = defineProps<{ messages: Message[]; hideAds?: boolean }>();
|
|
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
|
|
|
|
const listEl = ref<HTMLElement | null>(null);
|
|
|
|
// Auto-scroll vers le bas à chaque nouveau message
|
|
watch(
|
|
() => props.messages.length,
|
|
async () => {
|
|
await nextTick();
|
|
if (listEl.value) {
|
|
listEl.value.scrollTop = listEl.value.scrollHeight;
|
|
}
|
|
},
|
|
);
|
|
</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;
|
|
}
|
|
|
|
/* Positionné en absolu sur la droite du wrapper */
|
|
.casino-overlay {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: 20px;
|
|
pointer-events: none;
|
|
}
|
|
.casino-overlay :deep(.casino-cta) {
|
|
pointer-events: all;
|
|
}
|
|
</style>
|