/* ============================================================ ФИШКИ НА СУКНЕ: поставленная ставка и та фишка, которая к ней летит. Переехало из стенда `_demo-chips.css`. Три варианта, которые стенд показывал рядом, здесь отсутствуют намеренно (docs/CHIPS-DESIGN.md §2): · «плашка» — это и есть прежний `.bet` из base.css, точка отсчёта; · «по номиналу» — цвет занят номиналом, и `chip_style` владельца на ставке перестаёт быть виден, то есть слот, за который платят, теряет смысл; · стек внутри пилюли банка — банк остаётся числом. ── ГДЕ СТОЯТ ФИШКИ ─────────────────────────────────────────────────────── Вплотную к ПЛАШКЕ ИМЕНИ, и узел лежит ВНУТРИ неё (`.seat .info`), а не в месте: место шириной 74px, плашка уже, и зазора «на всякий случай» между именем и деньгами быть не должно. Сторона считается из якоря места (`chipPlace` в src/lib/chips.js), а не таблицей, — поэтому правило работает при любом числе соперников (SLOTS[1…5] в src/table/render.js): · боковые места — фишки СБОКУ от плашки, с внутренней стороны, сумма под столбиком (узко: 20px); · верхние места — фишки ПОД плашкой, сумма рядом со столбиком (низко); · я — на сукне над строкой силы руки, там же, где стояла `.mybet`. ── СКОЛЬКО МЕСТА ЗАНИМАЮТ ──────────────────────────────────────────────── Ровно одна кучка, ровно один столбец, максимум пять фишек (DISC_STEPS в src/lib/chips.js). Олл-ин на 62 блайнда и колл на один отличаются высотой столбика, но занимают одно и то же сукно: столбик из двадцати фишек за шестью местами — это каша. ── ЯЗЫК ВИДА ───────────────────────────────────────────────────────────── HUD стола, а не казино. Ни белых насечек по кромке, ни глиняных фишек с коричневым кантом: сукно здесь — тёмно-фиолетовый безель, неоновое внутреннее кольцо, стеклянные плашки и золотые цифры Rajdhani (styles/table.css). Поэтому фишка собрана из тех же трёх приёмов, что пилюля банка и кольцо таймера: акцентный цвет владельца, тонкое внутреннее кольцо, мягкое гало — и светится только ВЕРХНЯЯ фишка столбика, иначе столбик превращается в пятно. Размеры соразмерны столу: фишка вида сверху — 13px, фишка в столбике — 20 × 6px при шаге 3.5px. Карта соперника, для масштаба, 22 × 31px. ── ЦВЕТ И ВИД ──────────────────────────────────────────────────────────── ЦВЕТ (`--c`) — косметика: он приходит из слота `chip_style` владельца и ставится инлайном рендером, потому что у каждого места он свой. ВИД — ручка на устройстве: один атрибут на `` (`data-chips`), как у четырёхцветной колоды. Разметка у обоих видов ОДНА, лишнее гасит CSS, — поэтому переключение не перерисовывает стол и работает посреди раздачи. ============================================================ */ /* ── узел ставки ──────────────────────────────────────────────────────────── */ .chz{position:absolute;z-index:12;--c:var(--gold)} /* Сбоку от плашки: узко, сумма под столбиком. */ .chz.at-side{display:grid;justify-items:center;gap:2px} .chz.at-side.to-r{left:100%;margin-left:4px;bottom:-1px} .chz.at-side.to-l{right:100%;margin-right:4px;bottom:-1px} /* Под плашкой: низко, сумма рядом со столбиком. */ .chz.at-under{display:flex;align-items:flex-end;gap:4px;top:100%;margin-top:3px;left:50%;transform:translateX(-50%)} /* Своя ставка — на сукне над строкой силы руки, там же, где стояла `.mybet`. `top:auto` обязателен: без него `top:100%` из `.at-under` остаётся в силе, обе границы заданы, и узел уезжает ПОД плашку личности. СТАВКА СТОИТ ПРЯМО НАД ПЛАШКОЙ СИЛЫ РУКИ — над блоком «какая у меня карта», — но НЕ вплотную к ней. Плашка стоит 6px над картами и сама высотой 23px, то есть занимает первые 29px этой высоты, во всю ширину и ярким контуром; на прежних 30px фишки лежали на её кромке, и своя ставка читалась как деталь плашки, а не как фишки на сукне. Отступ 38px оставляет между ними ~9px — этого хватает, чтобы столбик читался отдельно, и он остаётся ТАМ, где игрок его ищет: над своей рукой, лицом к банку. ЧИСЛО — СБОКУ ОТ ФИШЕК, а не под ними: тем же порядком, что у верхних мест (`.at-under`). В столбик оно добавляло вторую строку, и узел на пять фишек выходил вдвое выше — на телефоне он доставал до общих карт. */ .myseat .chz{left:50%;top:auto;bottom:calc(100% + 38px);transform:translateX(-50%);z-index:17; display:flex;align-items:flex-end;gap:4px} /* Сумма — подпись К ФИШКАМ, а не плашка. Золото Rajdhani: тем же цветом и тем же шрифтом стол пишет банк (`.pot`) и стек места (`.seat .info .ch`), поэтому число у фишек читается как часть HUD, а не как ярлык поверх сукна. */ .chz-n{font:800 10px/1 'Rajdhani',var(--num);color:var(--gold);letter-spacing:.4px; font-variant-numeric:tabular-nums;white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.7)} .myseat .chz-n{font-size:11px} .chz.allin .chz-n{color:#ffe3ab;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 9px rgba(255,194,75,.55)} /* ── одна фишка, вид СВЕРХУ ───────────────────────────────────────────────── */ /* Ею нарисованы и вид «фишка», и всё, что летит: и в полёте, и на месте это должна быть ОДНА вещь. Прежде в полёте был плоский оранжевый кружок 18px, а на плашке — точка 10px, и связи между ними глаз не видел. */ .dsc{position:relative;display:block;width:var(--d,13px);height:var(--d,13px);border-radius:50%; background:radial-gradient(circle at 36% 30%, color-mix(in srgb,var(--c) 48%,#fff) 0 16%, var(--c) 56%, color-mix(in srgb,var(--c) 66%,#170f2e) 100%); box-shadow:0 0 0 1px rgba(8,6,15,.7), 0 0 7px -1px color-mix(in srgb,var(--c) 62%,transparent), 0 1px 2px rgba(0,0,0,.45)} /* Внутреннее кольцо — тот же приём, что у сукна (`.table:before`) и у плашки банка: одна тонкая линия внутрь, без объёма. */ .dsc::after{content:'';position:absolute;inset:3px;border-radius:50%; border:1px solid rgba(255,255,255,.24)} .dsc.pop{animation:dsc-pop .24s cubic-bezier(.3,1.5,.5,1) both} @keyframes dsc-pop{ from{transform:scale(.6);opacity:0} 60%{transform:scale(1.16);opacity:1} to{transform:none;opacity:1}} /* ── одна фишка, вид СБОКУ (столбик) ──────────────────────────────────────── */ /* Столбик — не «иконка стека», а сумма, выраженная высотой. Толщина фишки и шаг — переменные, а не числа в разметке. */ .chz-st{position:relative;display:block;width:20px;--base:6px;--step:3.5px; height:calc(var(--base) + (var(--n,1) - 1) * var(--step))} .chz-st i{position:absolute;left:0;right:0;height:var(--base);border-radius:50%; bottom:calc(var(--i) * var(--step)); background:linear-gradient(180deg, color-mix(in srgb,var(--c) 58%,#fff), var(--c) 52%, color-mix(in srgb,var(--c) 60%,#120c26)); box-shadow:0 0 0 1px rgba(8,6,15,.6),0 1px 2px rgba(0,0,0,.4)} /* Светится только верхняя фишка — как акцент в HUD. Она же показывает лицо: без этого столбик выглядит полосатой лентой. */ .chz-st i:last-of-type{box-shadow:0 0 0 1px rgba(8,6,15,.6), 0 0 8px -1px color-mix(in srgb,var(--c) 60%,transparent), 0 1px 2px rgba(0,0,0,.4)} .chz-st i:last-of-type::after{content:'';position:absolute;inset:1px 3px auto;height:2px; border-radius:50%;background:rgba(255,255,255,.32)} /* Фишка встала в столбик (наполнение): падает на место, а не появляется. */ .chz-st i.pop{animation:dsc-in .24s cubic-bezier(.3,1.5,.5,1) both} @keyframes dsc-in{ from{transform:translateY(-10px) scaleX(.84);opacity:0} 60%{transform:translateY(1px) scaleX(1.05);opacity:1} to{transform:none;opacity:1}} /* ── ВИД: ручка на устройстве ─────────────────────────────────────────────── */ /* Обе разметки лежат в узле всегда, видимую выбирает атрибут. Так смена вида не стоит ни одного перерисованного места — ровно как `data-deck4` у колоды. */ body[data-chips="coin"] .chz .chz-st{display:none} body[data-chips="stack"] .chz .chz-coin{display:none} /* ── ЛЕТЯЩАЯ ФИШКА ───────────────────────────────────────────────────────── */ /* Раскадровку полёта задаёт JS (Web Animations, src/table/fx.js): у движений разные дуга, вращение и число фишек, и выражать четыре движения классами значило бы держать раскадровку в двух местах. CSS отвечает за то, КАК ФИШКА ВЫГЛЯДИТ в воздухе. */ .cfly{position:absolute;transform:translate(-50%,-50%);z-index:3;--c:var(--gold)} /* «Скольжение» идёт по сукну: без подъёма гало неуместно, нужна плоская тень. */ .cfly.flat .dsc{box-shadow:0 0 0 1px rgba(8,6,15,.7),0 5px 8px rgba(0,0,0,.5)} /* Брызги (победа, забор банка) — переходом, а не раскадровкой: у них случайные задержки и один и тот же путь, своей сцены им не нужно. */ .cfly.spray{transition:transform .5s cubic-bezier(.4,.7,.3,1),opacity .5s} .cfly.spray.big{transition:transform .9s cubic-bezier(.35,.75,.3,1),opacity .9s} .cfly.big .dsc{--d:26px;box-shadow:0 0 0 1px rgba(8,6,15,.7), 0 3px 9px rgba(0,0,0,.55),0 0 16px color-mix(in srgb,var(--c) 70%,transparent)} /* Столбик уезжает в банк ЦЕЛИКОМ (движения «дуга» и «скольжение»). На время полёта узел ПЕРЕЕЗЖАЕТ В СЛОЙ ПОЛЁТОВ (`flyStack`, src/table/fx.js): место, в котором он стоял, пересобирается тем же кадром, и оставленный в нём узел был бы уничтожен, не пролетев ни пикселя. В слое его держат уже не отступы от плашки, а координаты и центрирование — ровно как летящую фишку. */ .chz.away{z-index:41;pointer-events:none;transform:translate(-50%,-50%)} /* ── ТИХИЙ РЕЖИМ (prefers-reduced-motion) ─────────────────────────────────── */ /* Движение снимается, СООБЩЕНИЕ остаётся: фишки те же и стоят там же, просто встают без полёта. Так же устроен пульс таймера. */ @media (prefers-reduced-motion:reduce){ .chz-st i.pop,.dsc.pop{animation:none} }