Шахматная доска

Расширеная версия доски с сайта braingames.ru.

Зависимости

Скачать или подключить через CDN:

• jQuery: скачать | CDN;
• jQuery UI: скачать | CDN;
• Font Awesome: скачать | CDN.

Либо подтянуть зависимости через bower.

Содержимое

Страницы

• board.html - одиночная доска с автоматической загрузкой параметров отображения из location.hash и сохранением их там же (эта возможность включена только на этой странице). Фактически - аналог существующей, но использующий новые скрипты/стили. Понимает старый формат запросов из QUERY_STRING.
• samples.html - примеры.

Скрипты (scripts/)

• helpers.js - содержит различные функции, которые к собственно доскам отношения не имеют, но используются ими, например, парсер QUERY_STRING в объект.
• chess.js - основной скрипт, реализующий весь функционал.
• board.js - подключается на основной доске.
• samples.js - примеры.

Стили (styles/)

• chess.css - основной стиль, подключающийся на всех страницах.
• board.css - стиль для страницы с одиночной доской.
• samples.css - примеры.

Подгружать их самому на страницах не надо - это делают сами скрипты.

Для компиляции chess.css из chess.scss потребуется SASS.

Темы (themes/)

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

Сперва были выбраны спрайты из GNOME Chess (fancy). Позже найдены и вырезаны со страниц в интернете еще два набора, в том числе из википедии. В конце концов были выбраны спрайты и цвета из оригинальной доски.

Возможности

• Возможность создания нескольких досок на одной странице.
• Отдельные настройки для каждой доски.
• Свой набор кнопок для каждого блока.
• Подсветка допустимых ходов (с учётом рокировок и взятия “на проходе”).
• Запись и проигрывание ходов.
• Использование тем.
• Автоматическая инициализация особым образом оформленных слоёв на странице в доски.
• Форматирование кода (оборачивание шаблонных строк с последующей инициализацией досок/ссылок).
• Доска на основной странице board.html совместима со старым форматом записи расположения фигур.
• Работа offline.

Форматы данных

Фигуры обозначаются в соответствии с международной нотацией, при этом перед обработкой любых данных производится поиск с заменой обзначений фигур в русской нотации, т.е. приводится к единому виду. Пешка никак не обозначается.

То же касается имён клеток: a1 … h8. И так же выполняется поиск с заменой русских обозначений клеток на латинские:

• а заменится на a;
• б и в - b;
• с и ц - c;
• д - d;
• е - e;
• ф - f;
• г - g;
• х и н - h.

figures

Представляет собой строку, которая может быть разбита на две части символом 0 или -, обозначающим смену цвета с белого на чёрный, т.е. в начале идёт описание расстановки белых фигур, потом - разделительный знак, потом - описание расстановки чёрных.

Каждый из этих блоков представляет собой непрерывное описание вида <имя_фигуры><имя_клетки>, например Nb1 - конь на b1; или просто h7 - обозначение положения пешки.

Т.о. запись Nb10h7 очначает, что белый конь стоит на b1, а на чёрная пешка - на h7.

moves

Представляет собой перечень ходов через запятую, закодированный в Base64.

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

Выполняются следующие автозамены

• — (—), – (–), − (−) - на - (обычное тире);
• x (латинская) и : - на ×;
• ... (три точки) - на … (многоточие);
• русские и латинские буквы “О” - на 0 (ноль).

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

Рокировки обозначаются 0-0-0 и 0-0. Формат других ходов выглядит следующим образом: <имя_фигуры><имя_клетки><действие><имя_клетки>, где действием может быть либо “тихий” ход, обозначаемый -, либо ход со взятием, обозначаемый ×. После хода без пробела может быть указано дополнительное действие:

• ×<имя_клетки> - взятие пешки “на проходе”;
• <имя_фигуры> - превращение пешки в указанную фигуру.

Интерфейс

Основной скрипт возвращает объект типа Chess, с помощью которого можно оперировать с отдельными досками на странице в виде объектов типа Board.

Chess

• get - основной метод. В качестве параметров может принимать либо номер доски (если доска уже создана - она имеет свой номер), либо узел DOM, либо их коллекцию (массив, объект), либо объект jQuery. На выходе - объект типа Board или их коллекция. Метод ищет доски по указанным номерам. Если это не номера, а слои - пытается создать на них доски. Если доска на странице одна, её всегда можно получить запросом Chess.get(0).
• dialog и window - создают всплывающее окно. На входе два необязательных параметра: строка или объект с параметрами новой доски и callback-функция, которая будет вызвана после создания доски. Функция вызывается в контексте созданного объекта (слой и окно соответственно) и принимает два аргумента: объект Chess для текущего окна и объект типа Board с созданной доской. Важно callback-функция не сработает, если открывается новое окно по протоколу file:.
• markup - форматирование кода. На входе может быть либо строка, либо узел DOM, либо их коллекция (массив, объект), либо объект jQuery. То же и на выходе, но с преобразованиями исходного текста в сооветствии с шаблонами форматирования и вторым аргументом (он может быть проигнорирован, если исходный контент содержит явно другое указание), который определяет, как должны интерпретироваться шаблоны в коде. Метод ищет шаблонные строки и преобразует их либо в обычные ссылки на одиночную доску, либо в ссылки на всплывающее окно, либо в код, который автоматически развернётся в полноценную доску непосредственно на странице:
  • URL вида <path_to_chess>/index.php[?…] будет преобразован в обычную ссылку на доску, при этом выполнится преобразование из старого формата запроса в новый;
  • URL вида <path_to_chess>/board.html[#…] - аналогично; без преобразования;
  • Строка вида chess[link|init|dialog|window]:[…] будет обработана с учётом второго аргумента и того указания, что имеется в ней.
• newFormat и oldFormat - принимают и возвращают строки; занимаются преобразованием между новым и старым форматами описания расстановки фигур.
• addStylesheet подгружает на страницу таблицу стилей из файла styles/….css. Путь - относительно базовой папки скрипта, расширение указывать не нужно.
• path - свойство (не метод!), содержащее путь к одиночной доске относительно DOCUMENT_ROOT.

Board

• number - аргументов не имеет; возвращает номер доски (её ID).
• theme принимает строку с именем стиля и устанавливает его для отображения.
• figures принимает строку с описанием расстановки фигур и устанавливает её в качестве расстановки по умолчанию.
• moves принимает строку с описанием расстановки фигур и устанавливает её в качестве расстановки по умолчанию. Вторым необязательным аргументом является указание, нужно ли раскодировать строку из Base64.
• setup принимает один необязательный аргумент - объект с полями figures и moves; если не передан или поле в нём пусто - данные берутся из параметров по умолчанию.
• reset сбрасывает состояние доски до начального; аргументами можно указать, что именно нужно сбросить - figures или moves.
• plays, play и stop: первый метод проверяет, не выполняется ли реплей в данный момент; второй и третий - запускают либо останавливают его по возможности. Аргументов не имеют. На выходе у всех - статус, выполняется ли реплей.
• data возвращает текущее состояние доски; результат зависит от переданного аргумента (необязательно, по умолчанию = 0):
  • -1: вернёт строку вида figures=…&moves=…, т.е. то, что можно использовать для создания ссылок, открытия всплывающих окон и т.п.;
  • 0: вернёт объект с полями figures или moves, причём данные ходов уже будут декодированы из Base64;
  • 1: тот же объект, но ходы будут разбиты в массив, а фигуры в объект вида {a8: 'blackRook', e2: 'whitePawn' …}.

Ссылки

• Шахматы
• Шахматная нотация
• Превращение пешки
• Взятие на проходе
• Рокировка

Скриншоты