/* Worms Finder — les deux onglets « pouls » : History et Player counts. * * 🔑 TOUS LES SELECTEURS SONT PORTES PAR `#vue-historique` OU `#vue-steam`, * exactement comme wormnet.css l'est par `#vue-wormnet`. Avec la specificite * d'un identifiant, ces regles gagnent quel que soit l'ordre des feuilles dans * le — et c'est le seul garde-fou fiable ici, puisque decor.css est * charge APRES style.css et qu'une regle de meme specificite y gagne en * silence. Corollaire : on n'ecrit RIEN ici qui deborde de ces deux onglets, * et rien du tout dans style.css ni decor.css. * * ⚠️ On reutilise les variables de style.css (--texte, --carte, --bord, --jaune) * sans jamais les redefinir : une palette recopiee finit toujours par diverger. */ /* ========================================================================== L'EN-TETE D'UN PANNEAU : le titre, et la fenetre de temps a droite ========================================================================== */ /* ⚠️ `flex-wrap` obligatoire : a 390 px le titre et les trois boutons ne * tiennent pas sur une ligne, et sans repli c'est la PAGE qui deborde * horizontalement — pas le bloc. */ #vue-historique .pouls-entete, #vue-steam .pouls-entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .8rem; margin-bottom: .5rem; } /* 🚨 LE PIEGE DE CASCADE, PAYE UNE FOIS DE PLUS. `.titre-section` est defini * DEUX FOIS dans style.css : la seconde definition, celle de l'habillage * « panneau du jeu », lui pose `border-bottom: 1px solid var(--wa-cadre)` — * un filet qui traverse tout le panneau quand le titre est seul sur sa ligne, * et qui se reduit a un trait sous le seul titre des qu'il partage une rangee * en `flex`. 📏 Mesure a l'ecran avant correctif : un souligne gris de 0,91 px * sous « Has anything been played lately? », large de la seule phrase. * 🔑 On le retire exactement comme `#vue-wormnet .wn-entete .titre-section` le * fait pour la meme raison, et on reprend sa taille : deux en-tetes de panneau * du meme site n'ont aucune raison d'avoir deux corps de texte differents. */ #vue-historique .pouls-entete .titre-section, #vue-steam .pouls-entete .titre-section { margin: 0; padding-bottom: 0; border-bottom: 0; font-size: .88rem; } /* La fenetre de temps. Trois pastilles, une seule active — le meme vocabulaire * visuel que le selecteur « When » de l'ecran principal. * 🔑 L'ETAT VIT SUR LE BOUTON (`aria-checked`), PAS DANS UNE VARIABLE : deux * sources pour un meme choix finissent toujours par diverger, et celle qu'on * lit n'est jamais celle qu'on a ecrite. La classe ne fait que peindre. */ #vue-historique .pouls-jours, #vue-steam .pouls-jours { display: flex; flex-wrap: wrap; gap: .3rem; } #vue-historique .pouls-jour, #vue-steam .pouls-jour { appearance: none; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; /* 🚨 ANGLES VIFS, COMME TOUT LE RESTE DU SITE. style.css force * `border-radius: 0` sur `.carte, .ligne, .bandeau, .vide, .champ, * .bouton, .etiquette` — c'est l'habillage « panneau de Worms Armageddon », * et le jeu n'arrondit rien. Une pilule ici serait le seul coin rond de la * page. Le filet reprend `--wa-cadre` pour la meme raison : c'est la * couleur MESUREE pour tenir sur le decor anime. */ border-radius: 0; border: 1px solid var(--wa-cadre); background: rgba(0, 0, 0, .28); color: var(--texte-doux); white-space: nowrap; } #vue-historique .pouls-jour:hover, #vue-steam .pouls-jour:hover { color: var(--texte); background: rgba(255, 255, 255, .07); } /* 🚨 Le contraste de l'etat choisi est celui de `.plateforme--choisie` dans * style.css : un fond jaune a 14 % sous du texte jaune donnait 1,3:1, soit le * texte le MOINS lisible de l'ecran precisement la ou il faut le lire. */ #vue-historique .pouls-jour--choisi, #vue-steam .pouls-jour--choisi { background: rgba(255, 210, 63, .16); border-color: rgba(255, 210, 63, .55); color: var(--jaune); } #vue-historique .pouls-jour:focus-visible, #vue-steam .pouls-jour:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; } /* ========================================================================== HISTORY — une ligne par partie jouee ========================================================================== */ /* 🚨 CE N'EST PAS UN CLASSEMENT, ET LA MISE EN FORME LE DIT AUSSI. Aucune * colonne de score, aucune place, aucun total : une ligne porte le jeu, ce a * quoi on a joue, combien ils etaient, et quand. Rien qui se compare d'une * ligne a l'autre — c'est un pouls, pas une echelle. */ #vue-historique .histo-jour { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux); font-weight: 700; margin: 1.2rem 0 .5rem; text-shadow: var(--ombre-texte); } #vue-historique .histo-jour:first-child { margin-top: 0; } /* ⚠️ `min-width: 0` sur la colonne souple : sans lui, un nom de jeu long * refuse de se replier et pousse la ligne — donc la page — au-dela de 390 px. */ #vue-historique .histo-infos { flex: 1 1 14rem; min-width: 0; } #vue-historique .histo-jeu { font-weight: 700; font-size: 1rem; color: var(--texte); line-height: 1.25; } #vue-historique .histo-etiquettes { margin-top: .3rem; } /* La colonne de droite : combien ils etaient, et quand ca s'est termine. * ⚠️ `flex: 0 0 auto` + `text-align: right`, mais elle passe sous les * etiquettes des que la place manque (le parent `.ligne` est en `flex-wrap`). */ #vue-historique .histo-fin { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; margin-left: auto; text-align: right; } #vue-historique .histo-gens { font-size: .86rem; color: var(--texte); font-weight: 600; white-space: nowrap; } #vue-historique .histo-heure { font-size: .8rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; white-space: nowrap; } /* L'age relatif (« 2h14 ago ») vit dans son propre noeud parce qu'il bouge a * chaque tour : le laisser dans la chaine comparee par `poser()` ferait * reconstruire toute la liste — et rejouerait l'animation d'apparition de * `.ligne` en boucle. Voir historique.js. */ #vue-historique .histo-age { color: var(--texte-doux); opacity: .8; } /* Le glyphe de plateforme. 🚨 Les icones de file.js n'ont QU'UN `viewBox` et * aucune dimension propre : hors d'une regle qui les dimensionne, un SVG se * dessine a sa taille par defaut de 300 x 150 px et fait exploser la ligne. * C'est le piege deja paye dans salles.css, mot pour mot. */ #vue-historique .salle-plateforme { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--texte-doux); padding: .2rem .5rem; border: 1px solid var(--wa-cadre); /* ⚠️ Le meme angle vif que les `.etiquette` posees a cote sur la meme * rangee : arrondir celle-ci seule en ferait un corps etranger. */ border-radius: 0; white-space: nowrap; } #vue-historique .salle-plateforme svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================================== PLAYER COUNTS — un bloc par jeu Steam ========================================================================== */ /* L'etat « on ne collecte pas ». Ni une panne (rien n'est casse) ni un jeu * desert (on ne regarde pas) : une TROISIEME couleur, la sienne. C'est * exactement `wn-eteint` du radar WormNET, transpose ici — la meme distinction * merite le meme signal, sinon le lecteur doit reapprendre le code par onglet. * * 🚨 CE VOYANT RESTE UN POINT, IL NE DOIT JAMAIS DEVENIR LE CD-ROM. * « On ne collecte pas » n'est pas un chargement : rien n'est en cours. Un CD * qui tourne ici dirait qu'on est en train d'interroger Steam, ce qui est * faux — et on attendrait des chiffres qui ne viendront jamais. On redit donc * la geometrie du point, ce qui protege si quelqu'un ajoutait un jour * `bandeau--attente` a cet etat. */ #vue-steam .steam-eteint { border-color: rgba(255, 210, 63, .45); } #vue-steam .steam-eteint .pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--jaune); box-shadow: none; animation: none; } #vue-steam .steam-liste { display: grid; gap: .6rem; } #vue-steam .steam-jeu { padding: .85rem 1rem; background: var(--carte); /* Angles vifs et filet `--wa-cadre` : exactement ce que style.css impose a * `.ligne`, dont cette fiche est le pendant pour l'onglet Steam. */ border: 1px solid var(--wa-cadre); border-radius: 0; box-shadow: var(--ombre-bloc); } #vue-steam .steam-tete { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .3rem .8rem; } /* Le logo du jeu. * * 🔑 On impose la LARGEUR et on laisse la hauteur libre, puis `object-fit` * contient le dessin : les logos officiels n'ont aucun rapport d'aspect * commun — certains sont des bandeaux très larges, deux des jaquettes presque * carrées. Imposer les deux dimensions les écraserait. Même règle que * `.recherche-logo` dans style.css, et pour la même raison. * ⚠️ `align-self: center` : le parent aligne sur la LIGNE DE BASE du texte, ce * qui poserait une image de 22 px sur le pied des lettres. * ⚠️ PAS de `image-rendering: pixelated` : ce sont des logos vectoriels * rastérisés en grand, pas du pixel art. Les réduire au plus proche voisin les * hacherait — la même note figure sur `.recherche-logo`. */ #vue-steam .steam-logo { flex: none; align-self: center; width: 34px; height: 22px; object-fit: contain; object-position: left center; } /* Le repli garde EXACTEMENT la même place : trois jeux n'ont pas de logo (Worms 1995, Crazy Golf, Pinball) et sans lui leur nom se décalerait de 34 px par rapport aux neuf autres. */ #vue-steam .steam-logo--vide { display: inline-block; background: var(--carte-fort); border-radius: 4px; } #vue-steam .steam-nom { font-weight: 700; font-size: 1rem; color: var(--texte); min-width: 0; /* Il prend la place restante pour que le chiffre reste collé à droite, maintenant qu'un troisième élément occupe le début de la ligne. */ flex: 1 1 auto; } /* ⚠️ `flex: 0 0 auto` + `align-items: baseline` : le chiffre et son unite se * posent sur la meme ligne de base que le nom du jeu, et l'ensemble passe * SOUS le nom quand la place manque (le parent est en `flex-wrap`). */ #vue-steam .steam-chiffre { display: inline-flex; align-items: baseline; flex: 0 0 auto; white-space: nowrap; } /* Le chiffre du moment. Il est gros parce que c'est la reponse a la question * du panneau — mais il n'apparait QUE quand on l'a vraiment mesure. */ #vue-steam .steam-courant { font-size: 1.35rem; font-weight: 700; color: var(--jaune); font-variant-numeric: tabular-nums; line-height: 1; } #vue-steam .steam-unite { font-size: .82rem; font-weight: 600; color: var(--texte-doux); margin-left: .35rem; } /* 🚨 « ZERO JOUEUR » N'EST PAS « PAS ENCORE MESURE », ET LES DEUX NE SE * PEIGNENT PAS PAREIL. Un zero mesure est un CHIFFRE : il s'ecrit en clair, * dans la meme forme que les autres, simplement sans le jaune des caisses. * Une absence de mesure n'est pas un chiffre du tout : elle s'ecrit en toutes * lettres, en gris. C'est la meme regle que la case en pointilles de la * heatmap du radar, et elle vaut ici mot pour mot. */ #vue-steam .steam-courant--zero { color: var(--texte-doux); } #vue-steam .steam-inconnu { font-size: .86rem; font-style: italic; color: var(--texte-doux); } #vue-steam .steam-meta { font-size: .8rem; color: var(--texte-doux); margin-top: .15rem; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- le graphe */ /* 🚨 LE GRAPHE NE DEBORDE PAS, IL SE REDIMENSIONNE. Un SVG a `width: 100%` et * `preserveAspectRatio="none"` s'ecrase dans la largeur disponible : a 390 px * il n'y a donc RIEN a faire defiler, et surtout rien qui pousse la page. * ⚠️ C'est le choix inverse de `.grille-defilante` (la heatmap WormNET), et il * est justifie : une heatmap porte 24 colonnes qu'il faut pouvoir VISER au * doigt ; ici les barres ne sont pas cliquables, seule la SILHOUETTE compte. */ #vue-steam .steam-graphe { margin-top: .6rem; height: 54px; /* ⚠️ Un aplat sous les barres, sinon un creux de la courbe se lit sur le * terrain anime du decor et la silhouette disparait. */ background: rgba(0, 0, 0, .28); border-radius: 0; overflow: hidden; } #vue-steam .steam-graphe svg { display: block; width: 100%; height: 54px; } /* L'axe temporel sous la courbe. * * 🔑 Trois repères, pas un axe complet : douze cartes empilées, chacune avec sa * graduation, deviendrait un mur de chiffres. Début, milieu, fin suffisent à * situer une courbe. * ⚠️ `space-between` et un milieu centré : les trois libellés s'alignent sur les * points qu'ils désignent — le premier à gauche du tracé, le dernier à sa fin. */ #vue-steam .steam-axe { display: flex; justify-content: space-between; margin-top: .2rem; font-size: .68rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; } #vue-steam .steam-axe span:nth-child(2) { text-align: center; } #vue-steam .steam-axe span:last-child { text-align: right; } /* Une barre mesuree a zero : le meme gris que `.hm-case[data-n="0"]`. */ /* La courbe. `vector-effect` garde le trait à 1,6 px quel que soit l'étirement du viewBox : sans lui, un graphe large amincit la ligne jusqu'à la faire disparaître, et un graphe étroit l'épaissit en pâté. */ #vue-steam .steam-ligne { fill: none; stroke: var(--jaune); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } /* L'aire sous la courbe : elle donne du corps sans rien affirmer de plus. */ #vue-steam .steam-aire { fill: rgba(255, 210, 63, .16); stroke: none; } #vue-steam .steam-point { fill: var(--jaune); } /* 🚨 UN ZÉRO MESURÉ RESTE VISIBLE, ET GRIS. Posé sur la ligne de base, il serait indistinguable d'un trou si rien ne le marquait — la confusion même que cet écran existe pour éviter. Il est là, et visiblement pas jaune. */ #vue-steam .steam-point--zero { fill: rgba(255, 255, 255, .5); } /* Aucune serie : le cadre en pointilles de « jamais mesure », emprunte a la * heatmap. Il ne montre PAS une ligne plate a zero — ce serait dessiner un jeu * mort a partir d'une absence de mesure. */ /* ⚠️ PLUS BAS QU'UN VRAI GRAPHE, ET C'EST MESURE. Le jour ou la collecte est * eteinte, le serveur sert quand meme les huit jeux qu'il surveillerait : huit * cadres vides de 54 px de haut faisaient 800 px de page ou il n'y a rien a * lire. A 30 px la distinction « jamais mesure » reste parfaitement visible et * l'ecran redevient parcourable. */ #vue-steam .steam-graphe--vide { height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px dashed rgba(255, 255, 255, .24); color: var(--texte-doux); font-size: .8rem; font-style: italic; text-align: center; padding: 0 .6rem; } #vue-steam .steam-axe { display: flex; justify-content: space-between; gap: .5rem; margin-top: .25rem; font-size: .72rem; color: var(--texte-doux); } /* La note sur les consoles. 🚨 Elle n'est pas decorative : sans elle, une * liste qui ne contient que des jeux Steam se lit comme « le reste de la saga * n'a personne » — alors qu'on n'a simplement aucun moyen de le savoir. */ #vue-steam .steam-note { border-left: 3px solid rgba(255, 210, 63, .45); padding-left: .75rem; }