/* ========================================================================== game-ui.css — слой редизайна поверх словаря. Здесь живёт то, чего в словаре не было и что редизайн (tok.txt) требует от каждого экрана сразу: лестница движения, слои и единая система редкостей. Общий набор состояний (скелет, пусто, замок, пузырь, переключатель, ambient-движение) отсюда снят — см. запись в конце файла. Правило файла: он не описывает ни одного конкретного раздела. Всё, что верно только для магазина или только для башни, остаётся в своём файле. ========================================================================== */ :root { /* ---------------------------------------------------------------- */ /* Лестница движения (§62 tok.txt). Одна на всю игру: если анимация */ /* длится «примерно 300 мс», она обязана взять отсюда значение. */ /* */ /* Ступени названы не по числу, а по РОДУ движения — иначе выбор */ /* снова становится вкусовым. Род определяется вопросом «что */ /* происходит с элементом»: */ /* tap — палец нажал, элемент ответил и вернулся; */ /* state — элемент остался на месте, сменились цвет, кромка, свет; */ /* panel — элемент появился или ушёл; */ /* modal — пришло окно: оверлей, лист, крупный слой; */ /* sheet — тяжёлый кадр: сундук, разворот награды, уход листа; */ /* reward — награда летит и оседает; */ /* ambient— дыхание фона, бесконечный цикл. */ /* ---------------------------------------------------------------- */ --tam-t-tap: 0.10s; --tam-t-state: 0.18s; --tam-t-panel: 0.22s; --tam-t-modal: 0.26s; --tam-t-sheet: 0.42s; --tam-t-reward: 0.9s; --tam-t-ambient: 3.6s; /* Ступень задержки между тактами одного входа: лента раздела встаёт, тело подтягивается следом. Меньше — и два такта сливаются в один плоский въезд; больше — экран собирается на глазах и выглядит медленным. Читает её вход раздела в `base.css`. */ --tam-t-stagger: 0.07s; /* ---------------------------------------------------------------- */ /* ТАКТ БОЯ. Отдельный набор, а не ступени выше, и вот почему: эти */ /* времена спарены не с интерфейсом, а с игровым циклом. Крот стоит */ /* над норой считанные доли секунды, и лишние сорок миллисекунд на */ /* подъёме съедают окно, в которое игрок вообще способен попасть */ /* пальцем. Каждое число сверено с константой в `modules/battle` */ /* и меняется только вместе с ней — иначе класс останется висеть на */ /* замершем узле или кадр оборвётся на середине. */ /* ---------------------------------------------------------------- */ --tam-b-rise: 0.26s; /* цель выходит из норы; COOLDOWN_MS 320 */ --tam-b-mole: 0.20s; /* цель едет и сплющивается от удара */ --tam-b-hide: 0.16s; /* цель уходит — короче подъёма намеренно */ --tam-b-flash: 0.22s; /* вспышка попадания = 220 в fx-controller.js */ --tam-b-shake: 0.16s; /* дрожь сцены и земли = SHAKE_MS 160 */ --tam-b-strike: 0.26s; /* замах молота; узел живёт LIFE_MS 320 */ --tam-b-burst: 0.42s; /* жизнь частицы = drop 420 в fx-controller */ /* ---------------------------------------------------------------- */ /* Три оговорки, без которых лестницу применяют неверно. */ /* */ /* 1. ВРЕМЯ, СПАРЕННОЕ С `setTimeout`, меняется только парой. В */ /* `modules/ui/modals.js` ждут 420 (замах сундука), 520 (хлопок), */ /* 1100 (искры), 1500 (обмен), в `mvp/views/game.view.js` — 320 */ /* (отказ) и 1500 (число вверх). Такие места собраны из ступеней */ /* через calc() так, чтобы сумма давала прежнее число: ступень */ /* видна, а пара с JS цела. */ /* */ /* 2. БЕСКОНЕЧНЫЙ ДЕКОРАТИВНЫЙ ЦИКЛ в лестницу не входит и входить */ /* не должен: лучи витрины, поворот звезды, снос градиента живут */ /* десятками секунд, и времена у них обязаны РАЗЛИЧАТЬСЯ. Сведи их */ /* к одному числу — и весь задник начнёт пульсировать в такт, */ /* экран задышит как одно живое пятно. На ступень `ambient` идёт */ /* только то, что и задумано общим дыханием. */ /* */ /* 3. РАЗЛЁТ ЧАСТИЦ ПОПАДАНИЯ не сводится ни к ступени, ни к одному */ /* числу. Земля (.40), искры (.55), комья (.44), пыль (.32) и */ /* волна (.28) гаснут вразнобой намеренно: сведи их — и вместо */ /* разлёта получится одна мигнувшая клякса. Живут они в */ /* `battle.css` и `game.css` числами, и это единственное место в */ /* игре, где число времени стоит в файле раздела законно. */ /* ---------------------------------------------------------------- */ --tam-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --tam-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------------- */ /* ЛЕСТНИЦА СЛОЁВ. */ /* */ /* Ступени были объявлены, но их не читал НИ ОДИН файл: сорок с */ /* лишним разделов ставили число прямо в правиле, и числа разошлись */ /* — 999, 1200, 2100, 2200, 9000, 9200, 9999, 10000, 10050, 10001, */ /* 11000, 12000, 12500. Порядок в такой россыпи не читается ниоткуда, */ /* и три места оказались перекрыты (заход 96): кольцо обучения */ /* уходило ПОД навигацию, большое уведомление — под неё же и под */ /* любое окно, а тост — под подложку старого окна. */ /* */ /* Числа ступеней взяты те, что уже работали, — переезд ничего не */ /* сдвинул, кроме трёх перечисленных мест. Шаг между ступенями */ /* крупный намеренно: внутри одного слоя элементы раскладываются */ /* мелкими числами (1-10) и в лестницу не входят. */ /* */ /* Число z-index прямо в файле раздела теперь ошибка — кроме местной */ /* раскладки внутри уже поднятого элемента (искры в окне, надпись */ /* над полем): она к слоям игры отношения не имеет. */ /* */ /* СТУПЕНИ ДЛЯ САМОЙ СТРАНИЦЫ ЗДЕСЬ НЕТ. Прежняя `--tam-z-page: 1` */ /* выглядела безобидным «дном лестницы», но глубина раздела задана */ /* не здесь: `.page` уже несёт `z-index: 10` из `base.css`, чтобы */ /* лежать выше задника. Второе число тому же элементу — верный способ */ /* развести их между собой. */ /* */ /* И главное следствие, о которое спотыкаются: раз у `.page` есть */ /* число, у неё есть СВОЙ КОНТЕКСТ НАЛОЖЕНИЯ. Ступень, объявленная */ /* ВНУТРИ раздела, дальше страницы не считается: сцена с 9200 внутри */ /* `.page` соревнуется с навигацией не своим числом, а десяткой */ /* страницы — и проигрывает. Поднимать число бесполезно. */ /* */ /* Полноэкранное поверх меню делают одним из двух способов, и оба в */ /* игре уже есть: узел выносят из раздела (нижний лист дома */ /* развлечений переезжает в `.bg-blur` при входе в раздел) либо */ /* прячут то, что выше (забег арены гасит шапку и меню через */ /* `body.tam-arena-run`). Третьего нет. */ /* ---------------------------------------------------------------- */ --tam-z-header: 1000; /* шапка с ресурсами */ --tam-z-nav: 2000; /* нижняя навигация */ --tam-z-sheet: 3000; /* нижний лист, накладка раздела */ --tam-z-scene: 9200; /* игровая сцена во весь экран */ --tam-z-modal: 10000; /* окно, его подложка, загрузка */ --tam-z-over: 10100; /* поверх окна: сюжет, летящие цифры */ --tam-z-coach: 11000; /* обучение: кольцо и подсветка */ --tam-z-keyboard: 12000; /* своя клавиатура */ --tam-z-block: 12200; /* экран «играть нельзя» */ --tam-z-toast: 13000; /* уведомление — видно поверх всего */ --tam-z-tip: 13500; /* пузырь подсказки */ } /* ========================================================================== РЕДКОСТИ (§15 tok.txt) Один набор на скины, молоты, снаряжение, офисы башни, артефакты и сундуки. Редкость показывается тремя способами сразу — рамкой, свечением и подписью: §69 запрещает передавать состояние одним лишь цветом. ========================================================================== */ .tam-rar { --rar: var(--ui-rar-common); position: relative; border: var(--ui-border-thick) solid var(--rar); border-radius: var(--ui-radius-md); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 14px -2px var(--rar), var(--ui-edge-brown); } .tam-rar--common { --rar: var(--ui-rar-common); } .tam-rar--uncommon { --rar: var(--ui-rar-uncommon); } .tam-rar--rare { --rar: var(--ui-rar-rare); } .tam-rar--epic { --rar: var(--ui-rar-epic); } .tam-rar--legendary { --rar: var(--ui-rar-legendary); } /* Легендарное светится сильнее прочего — иначе золотая рамка теряется на золотых кнопках вокруг. */ .tam-rar--legendary { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 22px -2px var(--ui-rar-legendary), var(--ui-edge-brown); } /* Подпись редкости. Ставится рядом с названием, а не вместо него. */ .tam-rar__label { display: inline-block; padding: 2px 8px; border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--rar) 28%, #000 72%); border: 1px solid var(--rar); color: var(--rar); font-family: var(--ui-font-main); font-weight: var(--ui-weight-section); font-size: var(--ui-size-micro); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } /* ----- Сведение разделов к одному набору --------------------------------- Каждый раздел завёл редкость по-своему: коллекция красит рамку, гардероб — подпись, башня — заливку этажа, хранилище и музей — своё. Цвета при этом разошлись: «редкий» был то #4da3ff, то rgba(120,190,255). Правила ниже не трогают ни разметку, ни JS: они лишь ставят всем один цвет из словаря. Раздел, который захочет свою форму подачи (рамка, подпись, заливка), её сохраняет — меняется только оттенок. */ /* * Здесь стояла кромка карточки цветом редкости с `!important`. * * Приём достался от волосяной рамки в 1px — тогда цветная линия читалась * как подсветка. С толстой кромкой референса (3px) карточка получила * сплошную ярко-синюю или ярко-зелёную раму по всему периметру: в * хранилище шесть таких рам стояли в ряд и спорили и друг с другом, и с * тёмным контуром, который на кадрах обязателен у КАЖДОЙ поверхности. * * `!important` вдобавок перебивал §6 ui-frame.css, где редкость уже * показана правильно — кольцом ВНУТРИ кромки плюс свечение под ним, — * и вся эта работа не была видна. Правило снято; редкость живёт в раме. * Цвет подписи и уголка редкости ниже остаётся: он и есть второй признак * (§15 требует показывать редкость не одним цветом). */ .tam-cos__tag.is-common, .tam-card__tag--common { color: var(--ui-rar-common); } .tam-cos__tag.is-uncommon, .tam-card__tag--uncommon { color: var(--ui-rar-uncommon); } .tam-cos__tag.is-rare, .tam-card__tag--rare { color: var(--ui-rar-rare); } .tam-cos__tag.is-epic, .tam-card__tag--epic { color: var(--ui-rar-epic); } .tam-cos__tag.is-legendary, .tam-card__tag--legendary { color: var(--ui-rar-legendary); } .tam-cos__tag.is-common { border-color: color-mix(in srgb, var(--ui-rar-common) 55%, transparent); } .tam-cos__tag.is-uncommon { border-color: color-mix(in srgb, var(--ui-rar-uncommon) 55%, transparent); } .tam-cos__tag.is-rare { border-color: color-mix(in srgb, var(--ui-rar-rare) 55%, transparent); } .tam-cos__tag.is-epic { border-color: color-mix(in srgb, var(--ui-rar-epic) 55%, transparent); } .tam-cos__tag.is-legendary { border-color: color-mix(in srgb, var(--ui-rar-legendary) 55%, transparent); } .tam-museum__card--common .tam-museum__rarity { color: var(--ui-rar-common); } .tam-museum__card--uncommon .tam-museum__rarity { color: var(--ui-rar-uncommon); } .tam-museum__card--rare .tam-museum__rarity { color: var(--ui-rar-rare); } .tam-museum__card--epic .tam-museum__rarity { color: var(--ui-rar-epic); } .tam-museum__card--legendary .tam-museum__rarity { color: var(--ui-rar-legendary); } /* Шестая ступень есть только у артефактов, и жила она в `museum.css` отдельно от остальных пяти — при правке словаря редкостей музей разъехался бы сам с собой. */ .tam-museum__card--mythic .tam-museum__rarity { color: var(--ui-rar-mythic); } /* * Этаж башни: редкость — ПОЛОСКА У КРАЯ, а не подмес в заливку. * * Здесь стоял полупрозрачный подмес цвета редкости в фон строки, да ещё * с `!important`. На практике это давало две беды сразу: сквозь строку * просвечивала картинка башни (заливка прозрачная), и весь столб этажей * читался зеленоватым туманом — «необычных» этажей в башне больше * половины, а `--ui-rar-uncommon` зелёный. `!important` вдобавок не * давал `tower.css` вернуть строке плотный корпус. * * Цвет остаётся, но узкой полосой слева: редкость видно, а материал * строки — тот же корпус, что у всех списков игры. */ .tam-tower__floor--uncommon { box-shadow: inset 4px 0 0 var(--ui-rar-uncommon); } .tam-tower__floor--rare { box-shadow: inset 4px 0 0 var(--ui-rar-rare); } .tam-tower__floor--epic { box-shadow: inset 4px 0 0 var(--ui-rar-epic); } .tam-tower__floor--legendary { box-shadow: inset 4px 0 0 var(--ui-rar-legendary); } /* * Здесь лежал общий набор состояний: скелет списка, пустое состояние, * замок на закрытой карточке, значок-пузырь, толстый переключатель, * пульс главной кнопки и пять ambient-анимаций. * * Ни один из этих классов не встретился ни в разметке, ни в JS: пока * набор писался, разделы уже решили те же задачи по-своему — пустое * состояние собирает `.ui-empty`, замок и скелет живут в файлах разделов, * переключатель настроек — `.trumpamole__toggle` (profile.css), а * ambient-движение каждый раздел держит своими keyframes вместе с * `prefers-reduced-motion`. Набор снят по §87: два источника правды на * одно состояние расходятся молча, и второй из них никто не проверяет. * * Живой остаток файла — лестница времени, слои и система редкостей. */