// ═══════════════ HOME PAGE v2 ═══════════════ // Itération sur retours utilisateur : // - Fond brush massif (style graff/arène effacée) partant du logo // - Header text plus crème // - Widget live + pills + inscrits collés au bord droit // - Pills sociales transparentes avec signature brush // - Derniers inscrits refondus en style éditorial (pas "code") // - CTA "S'inscrire" rouge unique (Discord = via pill) // - Feature cards : scrims=crème, tierlist=blanc, prochain=rouge // Brush stroke component — paint stroke style const Brush = ({ d, color, width, opacity = 1, ...p }) => ( ); // Mountain Colosseum — graphic ink illustration, tertiary visual element const MountainColosseum = () => ( {/* Red halo behind — like a blood moon */} {/* Far peak (background) */} {/* Snow caps with hatching */} {/* Mid peak — the main mountain holding colosseum */} {/* Mountain hatching — brush strokes for texture */} {/* Highlighted edge */} {/* COLOSSEUM on top — ruined arena perched on the peak */} {/* Base plinth */} {/* Lower ring of arches (8 columns visible) */} {Array.from({ length: 11 }).map((_, i) => { const x = -150 + i * 30; const t = (i - 5) / 5; const skew = Math.abs(t) * 4; const h = 28 - Math.abs(t) * 4; return ( ); })} {/* Lower rim */} {/* Top rim of lower ring */} {/* Upper ring — broken/ruined, irregular tops */} {[-130, -100, -68, -40, 0, 40, 78, 116].map((x, i) => { const heights = [22, 38, 30, 42, 36, 28, 40, 18]; const h = heights[i]; return ( {/* broken top */} ); })} {/* Central tallest column with banner */} {/* Banner */} {/* Smoke from inside */} {/* Birds */} {/* Foreground brush stroke ground line — anchors it visually */} ); // Subtle haze / gold spotlight overlay (no arches now) const HazeBackdrop = () => ( {/* Dust */} {Array.from({ length: 35 }).map((_, i) => { const cx = (i * 137) % 1440; const cy = ((i * 91) % 760) + 60; const r = .8 + (i % 3) * .4; return ; })} ); // Massive logo backdrop — the actual brush logo, faded, placed in the empty // middle gap between title and right rail. Tagline cropped out. const LogoBackdrop = () => ( <> {/* Logo image — cropped to hide tagline, fills middle space */}
{/* Soft left fade so title block stays clean */}
{/* Right fade so the right rail content stays clean */}
); // Massive painted CZF backdrop — fills right side, fades into bg const HeroBackdrop = () => ( {/* Rough brush filter for hand-painted feel */} {/* Soft edge mask for fade-in from left */} {/* Big white "C" brushstroke */} {/* Big red "Z" diagonal */} {/* Big "F" right */} {/* Gold underline */} {/* Extra splashes for texture */} {/* Drip drops */} ); // Brush underline used as graphic signature beneath social pills const BrushUnderline = ({ color = '#E8DEC2', opacity = .7 }) => ( ); const HomePage = () => { // Fetch live data from worker (falls back to defaults if API down) const [cfg, setCfg] = React.useState(window.__CZF_CONFIG__ || null); const [summary, setSummary] = React.useState(null); const [recentPlayers, setRecentPlayers] = React.useState(null); const [showInscrModal, setShowInscrModal] = React.useState(false); React.useEffect(() => { if (!window.CZF || !CZF.USE_LIVE_DATA) return; const base = CZF.API_BASE; // Config fetch(`${base}/public/config`).then(r => r.json()).then(c => { setCfg(c); window.__CZF_CONFIG__ = c; }).catch(() => {}); // Summary stats fetch(`${base}/public/summary`).then(r => r.json()).then(setSummary).catch(() => {}); // Recent players (last 4 created) fetch(`${base}/public/players-full`).then(r => r.json()).then(arr => { const sorted = (arr || []).slice().sort((a, b) => (b.created_at || '').localeCompare(a.created_at || '')); setRecentPlayers(sorted.slice(0, 4)); }).catch(() => {}); }, []); const inscriptions = cfg?.inscriptions || { open: true, deadline: '12 juin' }; const season = cfg?.season || { number: 4, state: 'EN COURS' }; const socials = cfg?.socials || {}; const lc = cfg?.live_cast || null; const stats = summary || { players: 0, teams: 0, matches: 0, scrims: 0 }; return (
{/* Atmospheric haze — deepest layer */} {/* Massive logo backdrop — the real brush, fadi, off-center */} {/* Subtle grain over everything */}
{/* LEFT BLOCK */}
Saison {season.number} · MYG Community

CLASH
DES ZÉROS
DE LA
FAILLE

Le tournoi amateur de la communauté MYG. Trois divisions, de Bronze à Master. Plus de 100 joueurs, scrims ouverts, et un cast complet sur Twitch.

{/* Single red CTA */}
setShowInscrModal(true)}> S'inscrire {inscriptions.open ? `Inscriptions ouvertes${inscriptions.deadline ? ` · clôture le ${inscriptions.deadline}` : ''}` : 'Inscriptions fermées'}
{/* Stats — 4 columns */}
{[ { n: stats.players ?? 0, l: 'Joueurs', sub: stats.new_this_week ? `+${stats.new_this_week} cette semaine` : '' }, { n: stats.teams ?? 0, l: 'Équipes', sub: '3 divisions' }, { n: stats.matches ?? 0, l: 'Matchs joués', sub: `Saison ${season.number}` }, { n: stats.scrims ?? 0, l: 'Scrims ouverts', sub: 'En attente' }, ].map((s, i) => (
{s.n}
{s.l}
{s.sub}
))}
{/* RIGHT RAIL — flush to edge */}
{/* Bottom strip — featured */}
{showInscrModal && setShowInscrModal(false)} />}
); }; // ── Clean social pill — transparent, brush signature ── const CleanPill = ({ type, name, sub, live, href }) => { const themes = { discord: { color: '#A8B0F4', accent: '#5865F2', icon: }, twitch: { color: '#BFA3FF', accent: '#9146FF', icon: }, youtube: { color: '#FF9999', accent: '#FF4646', icon: }, }[type]; return ( {themes.icon}
{name}
{live && } {sub}
{/* brush signature underline */} ); }; // ── Inscrits block — editorial, brush signature ── const InscritsBlock = ({ players }) => { const items = (players && players.length > 0) ? players.map(p => ({ name: p.discord_nick || p.discord_tag?.split('#')[0] || '?', rank: p.rank_calcule || p.tier || '—', when: timeAgo(p.created_at), })) : (window.MOCK?.inscrits || []); return (
{/* Brush separator on top */}
NOUVEAUX VENUS
+8 cette semaine
{items.map((p, i) => (
{/* Avatar — neutral, no division color */}
{p.name[0]}
{p.name.toUpperCase()}
{p.rank} · {p.when}
))}
Voir tous les joueurs
); }; function timeAgo(iso) { if (!iso) return '—'; const d = new Date(iso); const diff = (Date.now() - d.getTime()) / 1000; if (diff < 60) return 'il y a un instant'; if (diff < 3600) return `il y a ${Math.round(diff/60)} min`; if (diff < 86400) return `il y a ${Math.round(diff/3600)}h`; if (diff < 7*86400) return `il y a ${Math.round(diff/86400)}j`; return d.toLocaleDateString('fr-FR'); } // ── Feature card ── const FeatureCard = ({ label, title, sub, cta, tint }) => { const tints = { red: { accent: 'var(--red)', bg: 'linear-gradient(135deg, rgba(230,57,70,.10), transparent 70%)' }, cream: { accent: 'var(--paper-2)', bg: 'linear-gradient(135deg, rgba(244,236,216,.08), transparent 70%)' }, white: { accent: '#FFFFFF', bg: 'linear-gradient(135deg, rgba(255,255,255,.07), transparent 70%)' }, }[tint]; return (
{label}
{title}
{sub}
{cta}
); }; Object.assign(window, { HomePage }); // ── Inscription modal ── const InscriptionModal = ({ onClose }) => (
e.stopPropagation()} className="card-paper grain" style={{ width: '100%', maxWidth: 560, padding: '1.75rem 2rem', position: 'relative', overflow: 'hidden', boxShadow: '0 24px 60px rgba(0,0,0,.8)', }}>
Comment s'inscrire
REJOINS LE CZF
L'inscription se fait sur Discord avec une commande slash.
Étape 1 · tape sur Discord
/inscrire riotid MonPseudo#EUW
Remplace MonPseudo#EUW par ton Riot ID (visible en jeu).
Étape 2 · confirmation
Le bot analyse tes 40 dernières parties ranked, te place dans la bonne division (Yordle / Ixtal / Targon) et te donne le rôle Discord correspondant.
Ouvrir le salon #inscription
Déjà inscrit ? Utilise /refresh pour mettre à jour tes stats.
);