Елементи сторінки рівня

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

Готові рецепти «сховати коди», «перейменувати підказку» та подібні зібрані на сторінці Типові скрипти. Тут — карта самої сторінки та ті прийоми, які в рецепти не потрапили.

Ось та сама карта на живому рівні: кожен блок обведений і підписаний своїм ідентифікатором.

Окремі коди, бонуси та підказки адресуються за номером: #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;

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

Приклад у грі

Сам ліміт (скільки відповідей і за який час) налаштовується не скриптом, а в параметрах рівня — див. Ліміти спроб введення.