/* ============================================================================ bffr.fr/raid/classement - Classement de puissance (refonte du 2026-09-26) ---------------------------------------------------------------------------- Chargée par la route /raid/classement (option head de shell()), APRÈS ds.css. HTML rendu par renderPodium / renderLeaderboardRows (routes_raid_game.mjs), le même pour la page et pour /api/raid/leaderboard (rafraîchissement en direct, 25 s). Comportement (recherche, « Ma position ») : scripts/raid_classement.js. Structure : .rgcl conteneur (data-me = joueur connecté, data-gen = âge des données) .rgcl-tools recherche + compteur + âge + bouton « Ma position » .rglb.rgcl-list bloc remplacé en direct : .rgcl-pod > .rgcl-pc podium du top 3 (ordre 2 - 1 - 3) .rgcl-head en-tête des colonnes (PC) .rgcl-row(.is-pod) une ligne par joueur (les 3 .is-pod ne servent qu'à la recherche) .rgx-more.rgcl-more fin de la liste partielle : « Afficher les N suivants » (data-rest) Couleurs : variables de ds.css, médailles comprises (--medal-or/ar/br et leurs -dim/-line, information hors thème). Aucune teinte en dur dans ce fichier, hors voiles noirs des ombres et --on-medal (texte foncé posé sur une médaille). Perf : la page arrive avec 100 lignes (la suite se charge sur demande, 250 au plus, ~14 nœuds chacune), content-visibility (.rg-cv) avec une hauteur réservée proche du vrai rendu, aucune ombre ni filtre ni animation infinie sur les lignes (les titres animés sont figés DANS la liste). Le direct ne renvoie le HTML que s'il a changé et ne remplace que les lignes changées. ============================================================================ */ /* Texte posé SUR une médaille : foncé quel que soit le thème du joueur (même teinte que .rgmed de ds.css). */ .rgp-classement { --on-medal: #1c1405; } /* ── Bandeau : point « en direct » (statique, pas de pulsation) ─────────────── */ .rgp-classement .rgcl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); align-self: center; } /* ── Barre d'outils ─────────────────────────────────────────────────────────── */ .rgcl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; } .rgcl-search { position: relative; flex: 1 1 320px; max-width: 440px; display: block; } .rgcl-search svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--mut); pointer-events: none; } body.raidnew .rgmain .rgcl-search input[type="search"] { width: 100%; min-height: 44px; padding-left: 40px; border-radius: 12px; background: var(--card); } .rgcl-count { color: var(--txt2); font-size: .88rem; font-weight: 650; font-variant-numeric: tabular-nums; } .rgcl-ago { color: var(--mut); font-size: .8rem; } body.raidnew .rgcl-mebtn { margin-left: auto; min-height: 40px; padding: 0 14px; gap: 8px; border-radius: 999px; } .rgcl-mebtn[hidden] { display: none !important; } .rgcl-mebtn svg { width: 16px; height: 16px; color: var(--accent2); } .rgcl-mebtn b { color: var(--accent2); font-variant-numeric: tabular-nums; } .rgcl-note { margin: -6px 0 18px; padding: 11px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--mut); font-size: .88rem; } .rgcl-note b { color: var(--txt); font-variant-numeric: tabular-nums; } .rgcl-note a { font-weight: 700; margin-left: 4px; white-space: nowrap; } /* ── Podium ─────────────────────────────────────────────────────────────────── */ .rgcl-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; width: 100%; max-width: 980px; margin: 8px auto 26px; } .rgcl-pc { --medal: var(--medal-ar); --medal-dim: var(--medal-ar-dim); --medal-line: var(--medal-ar-line); --step: 52px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 26px 16px 0; text-align: center; color: var(--txt2); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--hl); overflow: hidden; transition: border-color .15s, transform .15s var(--ease); } .rgcl-pc:hover { color: var(--txt2); border-color: var(--medal-line); transform: translateY(-3px); } .rgcl-pc-1 { --medal: var(--medal-or); --medal-dim: var(--medal-or-dim); --medal-line: var(--medal-or-line); --step: 78px; padding-top: 34px; border-color: var(--medal-or-line); } .rgcl-pc-3 { --medal: var(--medal-br); --medal-dim: var(--medal-br-dim); --medal-line: var(--medal-br-line); --step: 36px; } .rgcl-pc-top { position: relative; display: block; margin-bottom: 6px; } .rgcl-pc-av { display: block; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--medal); background: var(--bg2); object-fit: cover; } .rgcl-pc-1 .rgcl-pc-av { width: 104px; height: 104px; } .rgcl-pc-medal { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--medal); border: 2px solid var(--card); color: var(--on-medal); font-weight: 800; font-size: .84rem; font-variant-numeric: tabular-nums; } .rgcl-pc-crown { position: absolute; left: 50%; top: -27px; transform: translateX(-50%) rotate(-8deg); font-size: 26px; line-height: 1; } .rgcl-pc-crown .re, .rgcl-pc-crown img { width: 30px; height: 30px; } .rgcl-pc-name { max-width: 100%; color: var(--txt); font-weight: 750; font-size: 1.06rem; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rgcl-pc-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; max-width: 100%; } .rgcl-pc-pow { color: var(--txt); font-weight: 800; font-size: 1.42rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; } .rgcl-pc-1 .rgcl-pc-pow { font-size: 1.72rem; color: var(--medal-or); } .rgcl-pc-meta { color: var(--mut); font-size: .78rem; line-height: 1.5; font-variant-numeric: tabular-nums; } .rgcl-pc-meta .rglb-guild { font-weight: 650; } .rgcl-pc-step { align-self: stretch; display: grid; place-items: center; height: var(--step); margin: 10px -16px 0; background: linear-gradient(180deg, var(--medal-dim), transparent 90%); border-top: 1px solid var(--medal-line); } .rgcl-pc-step b { font: 800 2rem/1 var(--font-display); color: var(--medal); opacity: .85; } .rgcl-pc-1 .rgcl-pc-step b { font-size: 2.6rem; } .rgcl-pc-2 .rgcl-pc-step b, .rgcl-pc-3 .rgcl-pc-step b { font-size: 1.6rem; } /* ── Liste ──────────────────────────────────────────────────────────────────── */ .rglb.rgcl-list { display: flex; flex-direction: column; gap: 6px; max-width: none; margin: 0; } .rgcl-head, .rgcl-row { display: grid; grid-template-columns: 52px 40px minmax(0, 1fr) 128px 88px 210px; column-gap: 16px; align-items: center; } .rgcl-head { padding: 0 17px 4px; color: var(--mut); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .rgcl-head > span:nth-child(1) { text-align: center; } .rgcl-head > span:nth-child(n+4) { text-align: right; } .rgcl-row { position: relative; min-height: 66px; padding: 10px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); color: var(--txt2); transition: border-color .14s, background-color .14s; } /* Hauteur réservée aux lignes hors écran = hauteur du CONTENU (sans marges ni bordure) d'une ligne type : 66 - 2 x 10 - 2 = 44 px. Trop haute, elle allongeait la page et faussait la barre de défilement. */ .rgcl-list .rgcl-row.rg-cv { contain-intrinsic-size: auto 44px; } /* bat la valeur générique de ds.css */ .rgcl-row:hover { background: var(--card2); border-color: var(--line2); color: var(--txt2); } .rgcl-row:focus-visible { outline-offset: 1px; } .rgcl-rank { text-align: center; color: var(--txt2); font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; } .rgcl-rank:not(.is-med)::before { content: "#"; color: var(--mut); font-weight: 600; font-size: .78em; margin-right: 1px; } .rgcl-av { width: 40px; height: 40px; border-radius: 50%; background: var(--bg2); object-fit: cover; } .rgcl-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rgcl-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .rgcl-name { color: var(--txt); font-weight: 700; font-size: .98rem; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; } .rgcl-l2 { display: block; color: var(--mut); font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; } .rgcl-l2 .rglb-guild { color: var(--accent2); font-weight: 600; } .rgcl-st { display: contents; } /* PC : les deux chiffres sont deux colonnes de la grille */ .rgcl-num { text-align: right; color: var(--txt2); font-size: .92rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .rgcl-pow { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; min-width: 0; } .rgcl-pow > b { color: var(--txt); font-weight: 800; font-size: 1.04rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .rgcl-short { display: none; } /* valeurs compactes (podium, cartes multiples) : téléphone seulement */ /* Barre de puissance relative au premier (--w posée par le serveur sur .rgcl-pow) : un seul pseudo-élément, remplissage en première couche, piste visible dessous = le repère des 100 %. */ .rgcl-pow::after { content: ""; display: block; width: 100%; height: 4px; border-radius: 99px; background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--w, 0%) 100% no-repeat, var(--line2); } /* Icône des cartes Prestige (même dessin que PCARD_SVG, en masque : un seul fichier, zéro octet par ligne) */ .rgcl-pci::before { content: ""; flex: 0 0 auto; width: .95em; height: .95em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2.4'/%3E%3Cpath d='M12 8.3l1.15 2.33 2.57.37-1.86 1.81.44 2.56L12 14.55l-2.3 1.21.44-2.56-1.86-1.81 2.57-.37z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2.4'/%3E%3Cpath d='M12 8.3l1.15 2.33 2.57.37-1.86 1.81.44 2.56L12 14.55l-2.3 1.21.44-2.56-1.86-1.81 2.57-.37z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Badges à côté du pseudo (classes historiques de raid_game.css, remises au propre ici) */ .rgcl .rgt-title { margin-left: 0; font-size: .76rem; } .rgcl-row .rgt-title { animation: none; text-shadow: none; } /* figés dans la liste : 250 lignes */ .rgcl .rglb-tag { margin-left: 0; padding: 0 6px; border-radius: 6px; font-size: .72rem; line-height: 1.6; color: var(--accent2); border-color: var(--accent-line); } .rgcl .rglb-vip { margin-left: 0; padding: 0 7px; border-radius: 999px; font-size: .66rem; line-height: 1.7; letter-spacing: .06em; color: var(--medal-or); background: var(--medal-or-dim); box-shadow: none; border: 1px solid var(--medal-or-line); } .rgcl .rglb-pcard { margin-left: 0; } .rgcl .rgmed { font-size: .82rem; } /* Titre d'honneur (sans bonus, Palmarès de la relance) : pastille bordée et médaille (icône Lucide « medal », en masque), comme la fiche joueur (rgjx-badge-honor) et la page Palmarès (rgpa-honor-chip). Le titre équipé, qui porte le bonus, reste nu : les deux ne se confondent plus, même au toucher (troisième passage du 01/10, PAL-5). */ .rgcl .rglb-honor { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 4px; border: 1px solid var(--accent-line); border-radius: 999px; line-height: 1.5; } .rgcl .rglb-honor::before { content: ""; flex: 0 0 auto; width: .95em; height: .95em; background: var(--accent2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.21 15 2.66 7.14a2 2 0 0 1 .13-2.2L4.4 2.8A2 2 0 0 1 6 2h12a2 2 0 0 1 1.6.8l1.6 2.14a2 2 0 0 1 .14 2.2L16.79 15'/%3E%3Cpath d='M11 12 5.12 2.2'/%3E%3Cpath d='m13 12 5.88-9.8'/%3E%3Cpath d='M8 7h8'/%3E%3Ccircle cx='12' cy='17' r='5'/%3E%3Cpath d='M12 18v-2h-.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.21 15 2.66 7.14a2 2 0 0 1 .13-2.2L4.4 2.8A2 2 0 0 1 6 2h12a2 2 0 0 1 1.6.8l1.6 2.14a2 2 0 0 1 .14 2.2L16.79 15'/%3E%3Cpath d='M11 12 5.12 2.2'/%3E%3Cpath d='m13 12 5.88-9.8'/%3E%3Cpath d='M8 7h8'/%3E%3Ccircle cx='12' cy='17' r='5'/%3E%3Cpath d='M12 18v-2h-.5'/%3E%3C/svg%3E") center / contain no-repeat; } .rgcl .rglb-honor-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* États pilotés par raid_classement.js */ .rgcl-list:not(.is-search) .rgcl-row.is-pod { display: none; } .rgcl-list.is-search .rgcl-pod { display: none; } .rgcl-row.is-out { display: none; } .rgcl-row.is-me { background: var(--accent-dim); border-color: var(--accent-line); } .rgcl-pc.is-me { border-color: var(--accent); } .rgcl-row.is-me .rgcl-name::after, .rgcl-pc.is-me .rgcl-pc-name::after { content: "Toi"; display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .66rem; font-weight: 800; line-height: 1.7; letter-spacing: .04em; } .rgcl-row.is-me .rgcl-name::after, .rgcl-pc.is-me .rgcl-pc-name::after { margin-left: 7px; vertical-align: 2px; } .rgcl-row.is-flash, .rgcl-pc.is-flash { animation: rgcl-flash 1.6s var(--ease); } @keyframes rgcl-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 25%, 60% { box-shadow: 0 0 0 3px var(--accent-line); } } /* Suite de la liste (bouton de ds.css .rgx-more) : pendant le chargement, le bouton reste en place, grisé. */ .rgcl-more button[disabled] { opacity: .7; cursor: progress; } .rgcl-none { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 18px; margin-top: 4px; text-align: center; background: var(--card); border: 1px dashed var(--line2); border-radius: var(--r-l); color: var(--mut); font-size: .88rem; } .rgcl-none[hidden] { display: none; } .rgcl-none b { color: var(--txt); font-size: 1rem; } /* ── Tablette ───────────────────────────────────────────────────────────────── */ @media (max-width: 1080px) { .rgcl-head, .rgcl-row { grid-template-columns: 46px 40px minmax(0, 1fr) 112px 72px 170px; column-gap: 12px; } .rgcl-head { letter-spacing: .06em; } } /* ── Téléphone : cartes de deux lignes, chiffres compacts ───────────────────── */ /* Charte §4.4 : aucun texte sous 13 px (.8125rem) sur téléphone, pastilles comprises. */ @media (max-width: 760px) { body.raidnew .rgp-classement .rgx-herostats { gap: 6px; } body.raidnew .rgp-classement .rgx-herostat { padding: 6px 11px; font-size: .8125rem; gap: 5px; } body.raidnew .rgp-classement .rgx-herostat b { font-size: .9rem; } .rgcl-tools { gap: 8px 12px; } .rgcl-search { flex: 1 1 100%; max-width: none; } .rgcl-count { font-size: .875rem; } .rgcl-ago { font-size: .8125rem; } .rgcl-head { display: none; } /* Ligne 1 : rang, avatar, pseudo + badges | puissance compacte. Ligne 2, sur TOUTE la largeur de la carte (c'est ce qui la fait tenir sur une ligne) : race, métier, guilde à gauche | « N fois 1er · N raids » calés à droite, sous la puissance. Si la place manque, les deux chiffres passent dessous (toujours à droite) au lieu de couper un texte. Flex + ordre : .rgcl-who s'efface (display: contents) et ::after force le retour à la ligne. */ .rgcl-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 0; min-height: 0; padding: 10px 12px 12px; overflow: hidden; } .rgcl-row::after { content: ""; order: 3; flex: 0 0 100%; height: 0; } .rgcl-list .rgcl-row.rg-cv { contain-intrinsic-size: auto 54px; } /* 78 - 10 - 12 - 2 */ .rgcl-rank { order: 0; flex: 0 0 24px; font-size: .9rem; } .rgcl-rank:not(.is-med)::before { display: none; } .rgcl-av { order: 0; flex: 0 0 32px; width: 32px; height: 32px; } .rgcl-who { display: contents; } .rgcl-l1 { order: 1; flex: 1 1 0; gap: 3px 7px; } .rgcl-name { font-size: .95rem; } .rgcl-pow { order: 2; flex: 0 0 auto; } .rgcl-l2 { order: 4; flex: 0 1 auto; min-width: 0; margin-top: 5px; font-size: .8125rem; line-height: 1.35; } .rgcl-st { order: 5; display: flex; gap: 6px; margin: 5px 0 0 auto; } .rgcl-num { color: var(--txt2); font-size: .8125rem; font-weight: 700; line-height: 1.35; } .rgcl-k::after { content: " fois 1er"; } .rgcl-r::before { content: "·"; margin-right: 6px; color: var(--mut); font-weight: 500; } .rgcl-r::after { content: " raids"; } .rgcl-k::after, .rgcl-r::after { color: var(--mut); font-weight: 500; } /* Valeur compacte (263 M) au lieu de l'exacte (qui reste le texte du , lu par les lecteurs d'écran) */ .rgcl-pow > b { font-size: 0; } .rgcl-pow > b::after { content: attr(data-s); font-size: 1rem; } /* Barre relative : filet au bas de la carte, sans piste (la carte entière sert de repère). */ .rgcl-pow::after { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 3px; border-radius: 0; opacity: .75; background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--w, 0%) 100% no-repeat; } /* Badges lisibles (13 px) ; plusieurs cartes Prestige = « ×N » (numéros complets au survol / sur la fiche). */ .rgcl .rgt-title, .rgcl .rglb-tag, .rgcl .rglb-vip, .rgcl .rglb-pcard { font-size: .8125rem; } .rgcl .rglb-pcard-more { font-size: 1em; } /* Plusieurs cartes : « ×N » (data-s) au lieu des numéros, un seul span (même bascule que la puissance) */ .rgcl-row .rgcl-pcn { font-size: 0; } .rgcl-row .rgcl-pcn::after { content: attr(data-s); font-size: .8125rem; } .rgcl-row.is-me .rgcl-name::after, .rgcl-pc.is-me .rgcl-pc-name::after { font-size: .8125rem; } } /* Podium téléphone : on garde les trois marches côte à côte, en plus petit. Le pseudo passe sur deux lignes au lieu d'être coupé (« Ac... »), la puissance est compacte. */ @media (max-width: 560px) { .rgcl-pod { gap: 8px; margin: 18px 0 20px; } .rgcl-pc { gap: 5px; padding: 18px 6px 0; border-radius: 16px; } .rgcl-pc-1 { padding-top: 24px; --step: 46px; } .rgcl-pc-2 { --step: 32px; } .rgcl-pc-3 { --step: 22px; } .rgcl-pc-top { margin-bottom: 5px; } .rgcl-pc-av { width: 56px; height: 56px; border-width: 2px; } .rgcl-pc-1 .rgcl-pc-av { width: 68px; height: 68px; } .rgcl-pc-medal { min-width: 24px; height: 24px; font-size: .8125rem; bottom: -8px; } .rgcl-pc-crown { top: -21px; } .rgcl-pc-crown .re, .rgcl-pc-crown img { width: 24px; height: 24px; } .rgcl-pc-name { font-size: .875rem; line-height: 1.22; } .rgcl-pc-badges { gap: 4px; } /* Badges à 13 px : titre sur deux lignes au besoin, cartes Prestige compactes (icône + ×N ou N°x). */ .rgcl-pc .rglb-pcard { padding: 0 6px 0 5px; white-space: normal; justify-content: center; } .rgcl-pc .rgt-title { line-height: 1.25; } .rgcl-pc-pow, .rgcl-pc-1 .rgcl-pc-pow { font-size: 1.02rem; } .rgcl-pc-1 .rgcl-pc-pow { font-size: 1.14rem; } .rgcl-pc-pow .rgcl-full { display: none; } .rgcl-pc-pow .rgcl-short { display: inline; } .rgcl-pc-meta { display: none; } .rgcl-pc-step { margin: 8px -6px 0; } .rgcl-pc-step b, .rgcl-pc-2 .rgcl-pc-step b, .rgcl-pc-3 .rgcl-pc-step b { font-size: 1.15rem; } .rgcl-pc-1 .rgcl-pc-step b { font-size: 1.5rem; } .rgcl-pc.is-me .rgcl-pc-name::after { display: table; margin: 4px auto 0; } } @media (prefers-reduced-motion: reduce) { .rgcl-pc, .rgcl-row { transition: none; } .rgcl-pc:hover { transform: none; } .rgcl-row.is-flash, .rgcl-pc.is-flash { animation: none; outline: 2px solid var(--accent); } } /* ============================================================================ Aperçu « Coffres de la semaine » (maquette réservée à un compte de test, 2026-07-05) Sorti du