Элементы страницы уровня

Движок собирает страницу уровня из блоков с постоянными идентификаторами. Зная их, из скрипта задания или из своего css можно спрятать, переименовать или переоформить почти любую часть страницы.

Готовые рецепты «скрыть коды», «переименовать подсказку» и подобные собраны на странице Типичные скрипты. Здесь — карта самой страницы и те приёмы, которые в рецепты не попали.

Карта страницы

Вот та же карта на живом уровне: каждый блок обведён и подписан своим идентификатором.

Идентификатор	Что это
`#autoupdateable`	Весь изменяемый блок страницы. Именно его содержимое движок заменяет при автообновлении уровня
`#out_task`	Текст задания
`#out_hints`	Блок подсказок
`#out_codes`	Блок кодов уровня
`#out_bonuses`	Блок бонусов
`#out_global_bonuses`	Блок сквозных бонусов
`#out_answer_frame`, `#out_answer`	Форма ввода ответа
`#answer_button`	Кнопка «Ответить»
`#button_finish_task`	Кнопка «Завершить задание» (появляется при опции «Закрыть задание: Разумно»)
`#out_limit`	Блок «ответы заблокированы» с таймером `#limit`
`#out_toggle_theme`	Переключатель тёмного режима в меню «Настройки»
`#out_toggle_answers`, `#out_toggle_sounds`	Переключатели предыдущих ответов и звуков

Отдельные коды, бонусы и подсказки адресуются по номеру: #c1, #c2 — коды, #b1, #b2 — бонусы, #gb1 — сквозные бонусы, #hb1 — подсказки. Эти же идентификаторы используются в Replacer.

Всё, что вы прячете скриптом, остаётся в исходном коде страницы — игрок может это увидеть. Если содержимое должно быть недоступно, прячьте его шаблоном на сервере, а не стилями в браузере.

Принудительная тема оформления

По умолчанию игрок сам выбирает светлое или тёмное оформление — переключателем «Тёмный режим» в меню игры. Если уровень задуман под конкретную тему (например, «ночная» локация), тему можно навязать и убрать переключатель.

Тема — это атрибут data-theme на корневом элементе страницы:

// Тёмная тема
$('#out_toggle_theme').hide();
document.documentElement.setAttribute('data-theme', 'dark');
$('#theme_d_css').attr('href', dark_theme_d_css);

// Светлая тема
$('#out_toggle_theme').hide();
document.documentElement.setAttribute('data-theme', 'light');
$('#theme_d_css').attr('href', light_theme_d_css);

#theme_d_css — это стили вашего домена: у домена светлая и тёмная темы лежат двумя разными файлами, поэтому ссылку надо подменить отдельно. Переменные light_theme_d_css и dark_theme_d_css движок подставляет на страницу сам.

В своём css уровня опирайтесь на тот же атрибут:

:root[data-theme="dark"]  .my-block { background: #101014; }
:root[data-theme="light"] .my-block { background: #fff; }

Атрибут ставит только страница игры. html:not([data-theme]) — это страница сайта, а не день; правило дня пишется [data-theme=«light»].

Старый способ тоже работает. Раньше тему переключали подменой #theme_css — $('#theme_css').attr('href', dark_theme_css);. Движок следит за этой ссылкой и, увидев подмену, сам проставляет data-theme. Старые задания из-за этого не сломались, но в новых проще ставить атрибут напрямую: сами файлы #theme_css давно пусты, и цвет из них не берётся.

Так это выглядит: соседние задания одной игры, и каждое стоит на своей теме, что бы ни было выбрано у игрока.

Тема переключается только на этом уровне. На следующем вернётся выбор игрока.

Пример с тёмной темой | Пример со светлой темой

Своё оформление блокировки ответов

Когда на уровне настроен лимит попыток и игроки его исчерпали, движок показывает блок #out_limit с таймером до разблокировки. Блок можно не только переоформить, но и повесить на него собственный элемент — например, затемнить весь экран, пока ввод недоступен.

Свой элемент кладётся в текст задания, а в скрипте его видимость привязывается к видимости #out_limit:

document.getElementById('answers_blocked').style.display = document.getElementById('out_limit').style.display;

Скрипт задания выполняется после каждого обновления уровня, поэтому состояние элемента будет пересчитываться вместе с таймером блокировки.

Пример в игре

Настройка лимита попыток

Сам лимит (сколько ответов и за какое время) настраивается не скриптом, а в параметрах уровня — см. Лимиты попыток ввода.