Encounter 2.0

Публичный тест · demo.en.cx

Портал переписан
целиком

Новый интерфейс на десктопе, планшете и телефоне. Новый игровой движок с живым состоянием по WebSocket. Открытое документированное API. Всё это уже работает на демо-домене — и до переключения сети мы просим проверить его в бою.

Ниже — что появилось, что изменилось и на что смотреть в первую очередь.

171
экран портала
перенесён
603
операции
открытого API
3
макета
1920 · 768 · 360
2ФА
вход с одноразовым кодом
из приложения
WS
живое состояние
в движке
XLSX
сценарий выгружается
и загружается обратно

Статус

Работа ещё идёт Прямо сейчас мы правим мелкие ошибки и возвращаем то, что при переносе осталось за кадром. Ничего из того, чем вы пользовались, не потеряется — весь привычный функционал портала будет перенесён к моменту переключения. Если чего-то не хватает или что-то ведёт себя не так — это ровно то, ради чего идёт тест: напишите нам в бот @encounter_bugs_bot.

Коротко

Что изменилось по сути

Портал остался тем же Encounter: те же игры, те же правила, те же рейтинги и звания. Изменилось то, как он устроен изнутри и как ощущается снаружи.

было: страница на каждый клик
Переходы без перезагрузки

Меню, вкладки, фильтры и списки открываются мгновенно, позиция и введённое не теряются.

было: вёрстка под один экран
Один сайт для всех устройств

Десктоп, планшет и телефон — три полноценных макета, а не урезанная «мобильная версия».

было: обновить страницу и посмотреть
Живое состояние игры

Код сокомандника, смена уровня, правка сценария автором — движок сообщает об этом сам.

было: интеграции «как получится»
Открытое API с документацией

Единый контракт для сайта, мобильных приложений и партнёрских клиентов.

было: только пароль
Вход с одноразовым кодом

Двухфакторный вход по приложению-аутентификатору: QR при подключении, код-подтверждение при входе, отключение в профиле.

было: сценарий по одному полю
Таблица, вставка пачкой, XLSX

Уровни собираются так же быстро, как правится таблица: коды и бонусы вставляются десятками.

Игроку

Что видит участник

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

Главная страница демо-домена
Главная — приглашение, ближайшая игра, топы и календарь домена. Заголовок сайта, часовой пояс и меню — на месте, но собраны в новой сетке; текст блоков по-прежнему в руках администрации домена.
Список активных игр карточками
Список игр — предстоящие, активные и прошедшие переключаются вкладками.

Карточки игр

  • Обложка есть всегда. Если автор не загрузил постер, карточка берёт иллюстрацию зоны игры — «Схватка», «Точки», «Кэшинг» и другие. Вариант закреплён за игрой, поэтому одна и та же игра всегда узнаётся, а соседние карточки в списке различаются.
  • Статус читается сразу: тип игры, онлайн или офлайн, командами или в одиночку, обратный отсчёт до конца приёма заявок.
  • Подтверждение участия — с карточки, без захода в игру.
  • Автор игры — ссылка на профиль, а не просто подпись.
Карточка игры
Карточка игры — новый дизайн.
Блок «Важное об игре» на карточке игры
Важное об игре — то, что участник ищет перед выездом, вынесено наверх карточки.

Блок «Важное об игре»

  • Конструктор вкладок. Автор сам решает, из каких пунктов состоит блок: добавляет, переименовывает и удаляет их — жёсткого набора полей больше нет.
  • Содержимое — с оформлением: в каждом пункте свой текст со ссылками и разметкой.
  • Читается с одного взгляда: слева список пунктов, справа текст выбранного; на телефоне пункт раскрывается на месте.
Календарь игр с фильтрами
Календарь игр — глобальный, локальный и корпоративный; фильтры по типам игр, командным и одиночным, со счётчиками в каждом срезе.

Разделы вокруг игры тоже переехали: команды и профили, рейтинги и звания, правила и FAQ, история проекта, карта сайта. Пополнение баланса — YooMoney и Xsolla.

Экраны

Телефон и планшет — не «версия для мобильных»

Раскладка перестроена под три ширины: 1920, 768 и 360. Это один и тот же сайт с одними и теми же данными — меняется только компоновка. На телефоне действия входа вынесены в нижнюю панель, меню и поиск живут в шапке, списки становятся одноколоночными.

Главная на планшете
Планшет · 768 — контент в одну колонку, навигация свёрнута в меню.
Главная на телефоне
Телефон · 360 — нижняя панель с входом, регистрацией и восстановлением.
Список игр на телефоне
Список игр на телефоне — карточка целиком, кнопка участия под рукой.
Движок

Игра идёт в реальном времени

Главное изменение внутри игры: браузер больше не «спрашивает сервер, не изменилось ли что-нибудь». Соединение держится открытым, и состояние уровня приходит само — сразу после того, как оно изменилось.

Состояние приходит само

Сразу после подключения сервер присылает снимок уровня — ничего запрашивать не нужно. Дальше приходят только изменения: код сокомандника, закрытый сектор, смена уровня, финиш, автопереход по таймауту, правка сценария автором по ходу игры.

Обрыв связи не стоит попытки

У каждой отправки кода есть собственный идентификатор. Если связь оборвалась и непонятно, дошёл код или нет, клиент повторяет отправку с тем же идентификатором — в течение пяти минут сервер вернёт прежний результат и не спишет вторую попытку.

Таймеры не плывут

Блокировка ответов, автопереход и открытие подсказок считаются от абсолютных меток времени, а не от «сколько прошло с загрузки страницы». Свернули приложение, вернулись через час — отсчёт верный.

Связь под наблюдением

Канал проверяется служебными сигналами, разрыв виден в интерфейсе, переподключение происходит автоматически. Технические тексты вроде «сетевая ошибка» игроку не показываются — вместо них понятная плашка о потере связи.

Контракт задания для скриптов

Авторы оживляют задания своим JavaScript. Раньше такой скрипт разбирал вёрстку страницы. Теперь у движка есть документированный объект window.EN: снимок состояния уровня, подписка на обновления, серверное время, отправка кода и взятие подсказки. Сектора, подсказки и бонусы приходят готовыми данными, обновления — событиями на документе, время задано абсолютными метками, поэтому таймер рисуется локально и не плывёт.

Старые скрипты не заработают. Движок больше не подключает jQuery, и вёрстка у него другая — код, написанный под прежнюю страницу, придётся переписать на чистом JavaScript по контракту. Взамен появляется опора, которая не поедет от следующей правки дизайна: у контракта есть номер версии. Описание контракта

Всё на месте в игровом экране

Задание, сектора и коды, бонусы, подсказки и штрафные подсказки, сообщения автора, история ввода, счётчик оставшихся попыток и подсказка «осталось закрыть N секторов» — с разбором «верно / неверно» после каждой отправки.

Игровой экран на компьютере
Игровой экран — уровень, обратный отсчёт, сектора со статусом «код не введён», задание, подсказки по расписанию и бонусы. Поле ответа показывает остаток попыток.
Игровой экран на телефоне
Тот же уровень на телефоне — ввод кода и бонуса вынесен в нижнюю панель, она остаётся на экране при прокрутке задания.
Спецификация протокола WebSocket
Спецификация протокола — открыта вместе с API: подключение, авторизация, keepalive, поведение при обрыве. api.en.cx/docs/engine-websocket
Кадры протокола и идемпотентность
Кадры и идемпотентность — один и тот же контракт для WebSocket и REST, чтобы мобильные клиенты могли выбирать транспорт.

Тем, кто пишет свой клиент: тот же адрес движка работает и как обычный HTTP-запрос — WebSocket включается апгрейдом соединения. Ядро обработки у обоих транспортов одно, поэтому результат отправки кода не зависит от того, как вы подключились. Полное описание кадров — https://api.en.cx/docs/engine-websocket. Тем, кто пишет скрипты в заданиях, — контракт задания.

Авторам и организаторам

Сценарий собирается быстрее

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

Табличный вид

Переключатель «классический / таблица» в каждом блоке уровня. В таблице объекты правятся, добавляются и удаляются прямо в сетке, без диалогов.

Правка применяется сразу, сохранение уходит фоном; у строки видно состояние «сохраняется / сохранено / ошибка». Удаление можно отменить в течение десяти секунд.

Вставка пачкой

Сценарии пишут в таблицах — значит, вставлять надо прямоугольный кусок листа, а не строку. Выделили в Google Sheets колонку кодов, скопировали, вставили в редактор — получили N секторов или N бонусов.

Есть предварительная проверка: сначала видно, что получится, и только потом запись.

Обмен через XLSX

Вся игра или отдельный уровень выгружаются в книгу с листами «Уровни», «Задания», «Подсказки», «Бонусы», «Сектора+Ответы» — правите в Excel и загружаете обратно.

Есть готовые образцы файлов, а импорт показывает ход обработки построчно и предупреждает о спорных местах.

Редактор уровня
Редактор уровня — все уровни игры чипами наверху: переключение между ними без возврата к списку. Ниже — название, таймаут, блокировка ответов и блоки содержимого уровня.
Блоки бонусов и секторов в редакторе уровня
Бонусы и сектора — у каждого блока переключатель «классический / таблица». Справа внизу — выгрузка и загрузка этого уровня в XLSX и образец файла. В таблице работают Enter, Ctrl+Enter, Ctrl+Del и вставка прямоугольного фрагмента из Google Sheets.

И ещё в работе с игрой

  • Копирование и перенос игры между доменами. Игра со всеми уровнями, авторами и судьями переносится на другой ваш домен — раньше сменить домен у игры было нельзя вообще.
  • Сессии игроков. Отчёт по каждому участнику: сколько было сессий, из скольких сетей и с какого числа устройств играли. Отдельный фильтр показывает только помеченные записи — инструмент для разбора спорных ситуаций и честной игры.
  • Статистика — по уровням и по игрокам, сортировка по моменту прохождения или времени на уровне, полноэкранный режим для проектора.
  • Коррекции результатов, бонусы и штрафы, снятия и призовой фонд живут в тех же вкладках игры.
Фильтры и снятия в статистике игры
Фильтры и снятия в статистике — разворачивающийся блок над таблицей: снять время и бонусы уровня, снять уровни по номерам «1,3,5-8» или по названию, посчитать отдельный блок уровней или весь сценарий, сравнить двух участников между собой. Итог сразу пересчитывается в таблице.
API

Открытый и документированный контракт

Сайт не имеет привилегий: он ходит в то же API, что доступно мобильным приложениям и партнёрским клиентам. Документация открыта и всегда соответствует работающему серверу — она собирается из самого кода. Адрес API — https://api.en.cx.

Интерактивная документация API
Интерактивная документация — описание, авторизация и запросы прямо из браузера.
Список разделов API
Разделы API — 35 групп: от игр и команд до магазина, медиа и администрирования.
ЧтоКак устроено
api.en.cxЕдиный адрес API для всех доменов сети: https://api.en.cx, интерактивная документация — /swagger, протокол движка — /docs/engine-websocket.
476 маршрутов603 операции в 35 разделах — игры, участие, движок, статистика, мониторинг, команды, пользователи, финансы, магазин, объявления, медиа, форум, гостевая, рейтинги, поиск, локализация и администрирование.
X-En-DomainПочти все данные принадлежат конкретному домену сети. Домен передаётся заголовком — один и тот же клиент работает с любым сайтом сети без пересборки.
Bearer JWTДля мобильных и машинных клиентов: получили токен при входе, передаёте заголовком.
Cookie-сессияДля браузера: ключ хранится в защищённой cookie, недоступной скриптам страницы.
Единый ответ об ошибкеОдин формат для всех разделов — клиенту не нужно разбирать десяток вариантов.
Сессия

Вход и доступ

Скрипты в контенте ограничены

Оформление домена, описания игр и письма портала по-прежнему могут содержать свой HTML и скрипты — но им закрыт доступ к вашим данным через API портала.

Защита входа

Капча после нескольких неудачных попыток, ограничение частоты запросов, разблокировка входа с незнакомого адреса по письму или одноразовому коду из приложения-аутентификатора.

Как тестировать

На что смотреть в первую очередь

Тест идёт на demo.en.cx — это отдельный демо-домен, боевые домены сети он не затрагивает. Пробуйте как обычно: заходите, записывайтесь, играйте, ломайте. Замечания присылайте в бот @encounter_bugs_bot. Особенно ценны наблюдения по этим сценариям.

Вход и восстановление доступаС компьютера и с телефона: вход, выход, восстановление пароля.
Запись в игру и отказ от участияКомандой и в одиночку, со взносом и без, до и после начала приёма заявок.
Прохождение уровняКоды, сектора, бонусы, подсказки и штрафные подсказки, сообщения автора, история ввода.
Игра в паре с сокомандникомВидны ли чужие коды и закрытые сектора сразу, без обновления страницы.
Плохая связьОтключите сеть на минуту в момент отправки кода: попытка не должна пропасть и не должна списаться дважды.
ТаймерыСверните вкладку или приложение и вернитесь: отсчёт до автоперехода и открытия подсказок должен быть верным.
Статистика после игрыСортировки, фильтры и снятия, разбор по уровням и по игрокам, полноэкранный режим.
Уровни со скриптамиЕсли в заданиях есть свой JavaScript — он написан под старую страницу и работать не будет. Перепишите его по контракту задания и проверьте уровень в игре.
Работа автораСборка уровня в таблице, вставка кодов пачкой, выгрузка и загрузка XLSX, перенос игры на другой домен.
Телефон и планшетТе же сценарии на узком экране: ничего не должно уезжать за край и требовать горизонтальной прокрутки.

Куда писать: телеграм-бот @encounter_bugs_bot. Просто отправьте сообщение — оно попадёт к команде. Регистрироваться и заполнять форму не нужно.

Что сообщать: адрес страницы, что делали, что ожидали увидеть и что увидели, устройство и браузер. Скриншот экрана целиком помогает больше всего — по нему сразу видно и раздел, и состояние игры; его можно приложить прямо к сообщению в боте.