/** * PlayAwale — La barre d'outils d'une partie * ----------------------------------------------------------------------------- * Les commandes d'une partie en cours, ancrées en bas à gauche de l'écran comme * en version 1 : retour à l'accueil, son, abandon, et ce que la page y ajoute. * * COMPOSANT, ET NON PAGE * La barre n'a rien de propre au jeu solo : une partie à deux et un rejeu * auront la leur, aux mêmes pastilles près. Elle vivait dans pages/solo.css, * hors d'atteinte des pages à venir. * * Les pastilles PROPRES à une page — le didacticiel du solo, par exemple — * restent décrites dans la feuille de cette page : le composant donne la barre * et la forme des pastilles, la page dit lesquelles elle y met. * * UTILISATION * La page porte « game-page », qui apporte les mesures, et déclare la barre : * *
* * * CE QU'IL EXPOSE AU RESTE DE LA PAGE * --tool-size côté d'une pastille * --tool-gap écart entre deux pastilles * --tools-reach largeur que la barre occupe depuis le bord * * Ces trois mesures sont déclarées sur la PAGE et non sur la barre : la bulle * du didacticiel et la réserve du plateau ont besoin de savoir jusqu'où la * barre s'avance, sans avoir à interroger la barre elle-même. * * @package PlayAwale * @version 2.0 * @author Nicolas Lion — Développeur web — https://nlion.fr * @copyright 2026 Nicolas Lion */ /* ============================================================================= LES MESURES DONT TOUT DÉCOULE ============================================================================= */ .game-page { /* Taille et écartement des pastilles. */ --tool-size: clamp(26px, 8vw, 40px); --tool-gap: clamp(5px, 2vw, 10px); /* Largeur occupée par la barre, depuis le bord de l'écran : six pastilles, cinq écarts, la marge du bord et l'écart minimal. SIX, ET NON LE NOMBRE RÉEL Aucune page n'en porte six aujourd'hui — le solo en a cinq, le réseau quatre depuis que les humeurs s'y ajoutent. La mesure prend le PIRE cas : une barre calculée au plus juste se ferait déborder par le premier bouton qu'on ajouterait, et le plateau ne le dirait qu'en le recouvrant. */ --tools-reach: calc(20px + 6 * var(--tool-size) + 5 * var(--tool-gap) + 12px); } /* ----------------------------------------------------------------------------- Téléphone couché : la barre se dresse. -------------------------------------------------------------------------- */ @media (orientation: landscape) and (max-height: 34rem) { .game-page { /* Pastilles un peu plus espacées : couché, le téléphone se tient à deux mains et les pouces visent moins bien. */ --tool-gap: clamp(8px, 2.5vh, 14px); /* Elles gardent leur taille habituelle, et ne se réduisent que si la colonne ne tient plus. CE QUE DIT CE CALCUL La colonne monte du bas de l'écran vers le portrait de l'adversaire. Il lui reste, pour cinq pastilles et quatre écarts : la hauteur de l'écran, moins la marge du bas et celle du haut, moins le portrait, moins l'écart qu'on veut garder sous lui. Sur un téléphone courant elle y tient largement et « min » retient les 40 px habituels ; sur un écran de 320 px de haut, elle descend d'elle-même à 33 px au lieu de venir toucher le portrait. */ --tool-size: min( 40px, (100vh - 48px - var(--avatar-panel-size, 0px) - 5 * var(--tool-gap)) / 6 ); } /* La barre se dresse sous le portrait de l'adversaire, et s'aligne sur son axe : elle prend la largeur du portrait et y centre ses pastilles, si bien qu'elles tombent exactement sous son milieu, sans calcul. LE REPLI À ZÉRO N'EST PAS DE LA PRUDENCE INUTILE Une page peut employer la barre d'outils sans porter de panneaux de joueur — l'écran multijoueur le fait, pour n'y mettre que la maison. « --avatar-panel-size » n'est alors pas déclaré, et sans repli la mesure entière deviendrait invalide : les pastilles perdraient leur taille. À zéro, la colonne dispose simplement de toute la hauteur, ce qui est exact. */ .game-tools { flex-direction: column; align-items: center; width: var(--avatar-panel-size, auto); } } /* ============================================================================= BARRE D'OUTILS DE LA PARTIE Ancrée en bas à gauche de l'écran, comme en version 1. Sa position fixe la garde accessible pendant toute la partie sans jamais empiéter sur le plateau, quelle que soit la hauteur de la page. ============================================================================= */ .game-tools { position: fixed; left: 20px; bottom: 20px; z-index: var(--z-overlay); display: flex; /* UN ÉCART, MÊME SANS PAGE DE JEU Comme la taille des pastilles plus bas : « --tool-gap » n'est déclaré que sur .game-page. Les pages hors jeu — le compte, la clé de sage, les mentions légales, Revoir des parties, l'analyse… — n'en ont pas, et sans repli l'écart tombait à zéro : les pastilles se touchaient. Le repli est la valeur ordinaire de .game-page. */ gap: var(--tool-gap, clamp(5px, 2vw, 10px)); /* Sur mobile, laisse la place à la barre système des téléphones sans bouton. */ padding-bottom: env(safe-area-inset-bottom, 0); } /* ----------------------------------------------------------------------------- La même barre, dans le coin opposé ----------------------------------------------------------------------------- En haut à droite : le seul coin qu'aucun panneau n'occupe. Celui du haut à gauche porte le camp d'en face, celui du bas à droite le camp d'ici, et celui du bas à gauche cette même barre. Elle accueille ce qui agit sur la PARTIE plutôt que sur l'écran — revenir d'un coup, tout recommencer — là où la barre du bas rassemble ce qui agit sur l'écran : sortir, couper le son. Le rembourrage du bas ne vaut que pour la barre du bas ; celle-ci laisse plutôt la place à l'encoche du haut. -------------------------------------------------------------------------- */ .game-tools--corner { left: auto; bottom: auto; right: 20px; top: 20px; padding-bottom: 0; padding-top: env(safe-area-inset-top, 0); } /* Pastille ronde, identique pour un bouton et pour un lien. */ .game-tool { display: flex; align-items: center; justify-content: center; /* UNE TAILLE, MÊME SANS PAGE DE JEU La mesure vient de .game-page, qui la fait varier avec l'écran : la barre d'outils occupe le bas à gauche, le panneau du joueur le bas à droite, et sur un écran étroit ils finissent par se rejoindre. Mais la barre sert AUSSI hors du jeu — le carrefour du compte, la clé de sage, la page du compte à venir —, et ces pages-là ne sont pas des « game-page ». Sans repli, la pastille y valait zéro pixel : le bouton était bien dans la page, atteignable au clavier, et invisible à l'œil. Le repli est la valeur ordinaire de .game-page ; une page de jeu continue de la remplacer. */ width: var(--tool-size, clamp(26px, 8vw, 40px)); height: var(--tool-size, clamp(26px, 8vw, 40px)); color: var(--color-text); background-color: var(--color-surface); /* La matière commune du site : arête claire au sommet, tranche sombre en bas, ombre qui la décolle du plateau. Une pastille est un bouton, et rien ne justifie qu'elle ait l'air d'autre chose. */ background-image: var(--gradient-surface-raised); border-radius: var(--radius-full); box-shadow: var(--shadow-raised); cursor: pointer; transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease, background-color var(--duration-base) ease; } /* Elle monte de deux pixels, comme tout ce qui se clique sur le site. */ .game-tool:hover, .game-tool:focus-visible { background-color: var(--color-surface-hover); transform: translateY(-2px); box-shadow: var(--shadow-raised-hover); } .game-tool:active { transform: translateY(2px); box-shadow: var(--shadow-sm); } @media (prefers-reduced-motion: reduce) { .game-tool { transition: background-color var(--duration-base) ease; } .game-tool:hover, .game-tool:focus-visible, .game-tool:active { transform: none; } } /* Les icônes sont dimensionnées par leur HAUTEUR, la largeur suivant le rapport du dessin — c'est ainsi que procède Font Awesome, dont les tracés sont repris. Forcer un carré déformerait la maison et le haut-parleur, plus larges que hauts, en les rétrécissant pour les faire tenir. 56 % de la pastille, soit 22,4 px sur une pastille de 40 : la taille exacte rendue par la version 1, mais qui suit désormais la pastille au lieu de rester figée. */ .game-tool__icon { height: 56%; width: auto; } /* L'icône du son suit l'état du bouton : une seule des deux est visible. Le balisage porte les deux, ce qui évite au JavaScript de fabriquer du HTML — et de le refabriquer à chaque bascule. */ .game-tool[aria-pressed='true'] .game-tool__icon--sound-off, .game-tool[aria-pressed='false'] .game-tool__icon--sound-on { display: none; }