Три попытки собрать шахматы

1. Попытка первая: расписать все правила детально

Раз коротко не вышло — Тёма решил пойти на крайние меры:

— Ну ладно. Раз Сане короткого ТЗ «сделай шахматы» мало — распишем ему всё до буквы. Лёх, давай детальное ТЗ: как каждая фигура ходит, что при шахе, как рокировка — всё-всё, чтоб Саня ни в чём не ошибся.

Лёха начинает расписывать. Конь — так, слон — эдак, ладья, ферзь, король, пешка. Правило про шах. Правило про рокировку. Взятие на проходе. Тёма заглядывает в чат, как разрастается текст, — и ему всё мало:

— Маловато. Давай ещё детальнее. И раз пишем — впиши уж всё: размер доски, подписи клеток, что при мате показать, нужен ли таймер на партию, счёт вести или нет, каким цветом ходившую фигуру подсвечивать…

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

ТЗ на шахматы (фрагмент):
...
4.3. Конь ходит буквой Г: две клетки по прямой + одна вбок,
     перепрыгивая фигуры. Всего до 8 вариантов, часть за краем доски — отсечь.
4.4. При шахе разрешены ТОЛЬКО ходы, выводящие короля из-под боя:
     уйти королём / закрыться фигурой / срубить нападающего.
4.5. Рокировка: король и ладья ходят одновременно, если оба не двигались,
     между ними пусто, король не под шахом и не проходит через битое поле...
...
7.2. Таймер партии: 10 минут на игрока, при нуле — поражение.
7.3. Подсветка последнего хода — жёлтым, подсветка шаха — красным.
...

Тёма смотрит на разросшийся документ — и, вместо того чтоб испугаться, довольно потирает руки:

— Во, теперь другое дело! Смотри, какая документация мощная. Тут всё прописано, до последней клетки. Теперь Саня при всём желании ничего не сделает не так — читай да выполняй.

— Читай, говоришь, — хмыкает Лёха. — А сам-то ты это вычитывать собираешься?

— В смысле — я? Это Санина работа.

— Не-а. Это твоя. — Лёха серьёзен. — Смотри, тут важная штука. Код, который агент пишет, ты можешь и не вычитывать — вон, за месяц ни строчки сам не проверил, и ничего. Но ТЗ — обязан. Потому что ТЗ — это твоё решение, что вообще делать. Ошибёшься в нём, впишешь глупость или забудешь важное — агент честно сделает по глупому ТЗ, и виноват будешь ты, не он. Задачу ставит человек, и утверждать её — тоже человеку.

— Да ну, — Тёма машет рукой. — Двести строк вычитывать? Я тебе доверяю. Пусть Саня разбирается, на то он и Саня.

Лёха только вздыхает — рано, мол, но пусть набьёт шишку сам. Отдают простыню Сане. И тот… упирается:

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

Разбивать на пятнадцать кусков Тёме уже лень. Скрепя сердце отдают как есть — авось потянет. Саня честно старается, но на сложных местах, как и предупреждал, плывёт: рокировку сделал криво, шах ловит через раз, взятие на проходе вообще пропустил. Прогоняют по списку из семи пунктов — стало получше, держит уже пять, но рокировка и мелочи всё равно хромают.

— Уже не четверть, но и не шахматы, — вздыхает Тёма. — А ТЗ это писать — застрелиться. Детальнее — не выход. Правил столько, что они не лезут ни в ТЗ по-человечески, ни Сане в один заход.

2. Попытка вторая: урезать правила

— Ладно, — Тёма заходит с другого конца. — Раз все правила неподъёмны — давай урежем. Пусть игра следит за самым простым: доска, фигуры, ход по очереди — белый, чёрный, белый. А как фигуры ходят, правильно или нет — да пусть игроки сами следят, они ж люди, шахматы знают. Двигай что хочешь, лишь бы очередь соблюдалась.

Звучит просто, Тёма уже потирает руки. Но Лёха, как всегда, смотрит на шаг дальше:

— Допустим. А как ты поймёшь, что партия кончилась? Игра-то правил не знает. Что такое мат, она не в курсе — король под боем, деваться некуда, а доска и не подозревает, что это конец.

Тёма застревает. И правда, об этом он не подумал.

— Ну… — тянет он. — А давай считать, что партия кончилась, когда одного из королей просто съели — сняли с доски. Грубо, конечно…

— Очень грубо, — кивает Лёха. — В настоящих шахматах короля не съедают, до этого не доходит, объявляют мат. Но раз правил нет — только так конец и уловить. Костыль.

— И рокировку тогда не сделать, — добавляет Тёма, распробовав горечь. — Это ж два хода разом, король и ладья. Без правил игра решит, что это жульничество — двигаешь две фигуры за один ход.

Он трёт переносицу. Картинка кислая: легальность на игроках, конец на костыле «съели короля», рокировки нет. И тут Лёха подкидывает то, о чём Тёма пока не подумал:

— А теперь вспомни, кто у тебя за вторую сторону сядет. Агент. А он-то шахматы знает по-настоящему — по всем правилам.

— И что? — не сразу ловит Тёма.

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

Тёма мрачнеет, дорисовывая картину сам:

— То есть мне придётся ещё и агенту отдельную инструкцию писать. Как играть в мою косую версию шахмат — не по нормальным правилам, а по её костылям. Вот радость-то.

— Вот-вот, — кивает Лёха. — Урезали доску — а теперь под неё и агента подгонять. Одну сложность убрали, другую нажили. Не шахматы вышли, а «двигалка фигур», и возни с ней не меньше, чем было.

— Не, — Тёма отмахивается. — Писать агенту, как играть в поломанные шахматы, — это уже перебор. Так не пойдёт.

3. Попытка третья: взять готовое

Оба молчат, упёршись в тупик. И тут Лёху осеняет:

— Стоп. А чего мы вообще пыжимся сами? Шахматы — игра древняя, в браузере их писали тысячу раз. Не может быть, чтоб кто-то уже не упаковал все эти правила в готовый кусок кода. Давай не изобретать велосипед, а поискать готовое.

— В смысле — где-то лежит уже написанное? — не сразу врубается Тёма.

— Именно. Это называется библиотека — готовый кусок кода под задачу: кто-то умный написал, вылизал, выложил, чтоб другие не мучились заново. Ты этот принцип уже видел, помнишь? Когда агенту не хватало умения — мы не учили его с нуля, а брали готовый скил из каталога. С кодом так же: сначала спроси, нет ли готового, и только если нет — пиши сам.

— И как искать-то? Гуглить «шахматы код скачать»?

— Можно и гуглить, но проще спросить у ИИ, — Лёха набирает прямо в чат: «есть ли готовые JavaScript-библиотеки для шахмат в браузере, сравни популярные». — Он и по интернету пройдётся, и сразу подскажет, что живое, а что заброшено. Смотри, что вернул.

В ответ — не одна штука, а целая охапка:

Для шахмат в браузере есть несколько библиотек:
- chess.js      — правила и логика (ходы, шах, мат). Очень популярна, живая.
- chessboard.js — визуальная доска, перетаскивание фигур.
- chessground   — доска от lichess, красивая, но сложнее.
- ...и ещё пара помельче.

— Вот и выбирай, — Лёха листает выдачу. — Тут важно глянуть не только на название: популярная ли (раз ей пользуются тысячи — значит рабочая, не бросят), свежая ли, под нашу ли задачу. chessground мощная, но нам избыточна. А вот chess.js — ровно под правила: внутри неё все шахматные законы разом — ходы, шах, мат, рокировка, взятие на проходе. Популярная, живая. Её и берём.

Он откидывается и роняет то, что Тёме стоит зарубить на носу:

— И запомни на будущее вообще. Почти всё, что ты соберёшься делать первые годы, уже кто-то написал до тебя. С нуля сегодня почти ничего не пишут — современная разработка это больше «найти готовые библиотеки и склеить их своим кодом», чем сочинять всё самому. Так что первый вопрос всегда: а нет ли на это готового решения?

— То есть все семь пунктов из моего списка — уже внутри chess.js? — доходит до Тёмы.

— Все семь. Люди написали до нас. Наше дело — прикрутить доску да решить, кто за кого играет.

4. Как подключить готовое: CDN

Тёма уже прикидывает возню — и по опыту с прошлыми сервисами сразу настораживается:

— Так, а качать её откуда? Небось надо зарегистрироваться, ключ какой-нибудь получить, как с тем сервисом землетрясений? Или платить?

— Не-не, тут ничего этого не надо, — успокаивает Лёха. — Библиотеки такие вообще бесплатные, и качать их к себе не обязательно. Есть штука под названием CDN. Смотри в чём фокус: популярные библиотеки уже лежат готовые на специальных серверах в интернете — раздача на весь мир, без всяких ключей и регистраций. Тебе не надо тащить файл в проект. Ты просто вставляешь ссылку на библиотеку прямо в свою страницу — помнишь, мы <script> в HTML разбирали? — и браузер, открывая страницу, сам подтягивает библиотеку по этой ссылке.

Он показывает строчку:

<script src="https://cdn.jsdelivr.net/npm/chess.js"></script>

— Вот это — «браузер, сходи на этот сервер и подгрузи оттуда chess.js». Одна строчка вместо того, чтоб копировать библиотеку к себе. И работает шустро: серверы CDN раскиданы по всему миру, отдают файл откуда ближе, да ещё и кэшируют — один раз скачалось, дальше летит мгновенно.

Тёма проникается:

— Погоди. То есть в интернете лежит куча готовых кусков кода, бесплатно, и любой можно к себе подключить одной ссылкой? Даже качать не надо?

— Именно, — кивает Лёха. — Не куча — миллионы. Считай, под любую типовую задачу уже кто-то написал библиотеку, вылизал, выложил на CDN. Тебе — только ссылку вставить.

— А как понять, какую ссылку вставлять и куда её пихать?

— Да просто попроси ИИ, — усмехается Лёха. — «Подключи мне chess.js через CDN» — он сам найдёт актуальную ссылку и вставит куда надо. Твоё дело — знать, что готовое существует, и не лезть писать своё.

5. ТЗ на рабочую версию и проверка

Теперь ТЗ выходит короткое — не потому что Тёма опять поленился, а потому что правила писать не нужно, они уже в библиотеке:

Собери game.html — шахматы на двоих на одном экране.
Все правила ходов, шах, мат, рокировку — бери из библиотеки chess.js
(подключи через CDN), сам правила не пиши.
Доска 8×8, фигуры, ход по очереди. Кнопка «Новая партия».

Саня берётся — и на этот раз собирает без плаванья: вся тяжёлая часть уже в chess.js, ему остаётся доска да связки. Вскоре рапортует: готово.

— «Готово», — хмыкает Тёма. — Знаем мы твоё «готово». Теперь на слово не верим.

И прогоняет весь список, пункт за пунктом, сам садится и проверяет:

• доска 8×8, раскраска — ✓
• фигуры расставлены — ✓
• ход по очереди, белые первые — ✓
• каждая фигура ходит по своему закону — ✓ (конь буквой Г, слон по диагонали — всё как надо)
• рокировка — ✓
• шах и мат — ✓ (загнал короля — выскочило «мат»)
• взятие на проходе, пешка на две — ✓

Семь из семи. Впервые «готово» и правда означает готово — не на слово Сани, а по линейке, которую они сами завели и сами прогнали.

— Вот теперь настоящие, — Тёма любуется. — И заметь: правил мы не написали ни одного. Всё чужое, готовое, а игра — как с турнира.

6. Метки для агента: скриншот мне, запись — машине

Игра готова — но Лёха придерживает Тёму, пока тот не убежал:

— Ещё одно, пока собираем. За вторую сторону у тебя сядет агент. А он слепой — глаз, как у тебя, нет, на красивую доску ему смотреть нечем. Ему надо понимать, что происходит, из самой страницы.

— Так пусть читает страницу, там же всё есть — где какая фигура стоит, — пожимает плечами Тёма.

— Кое-что прочитает, — соглашается Лёха. — Расположение фигур на доске он с HTML-страницы вытащит. Но не всё, что важно, лежит на странице явно. Чей сейчас ход? Кончилась ли партия? Кто победил? Это всё внутри у игры в голове, а наружу, в саму страницу, может и не попасть — агенту разве что гадать. Поэтому готовим игру специально под него: просим положить прямо на страницу явные метки, за которые ему удобно цепляться.

Он дописывает в ТЗ:

На элемент доски повесь data-атрибуты для агента:
- data-turn="w"/"b"       — чей сейчас ход;
- data-game-over="true"   — когда партия кончилась (мат / пат / ничья);
- data-winner="w"/"b"/"draw" — кто победил.

— Смотри, зачем это, — ведёт пальцем Лёха. — Тут два разных зрителя, и каждому нужно своё. Тебе в конце нужен скриншот — глянул на доску, вот мат, вот кто выиграл, глазами видно. А агенту картинка бесполезна, ему нужна запись прямо в коде: data-game-over="true" — партия кончилась, без всяких «кажется». Человек верит глазам, машина верит метке. Поэтому в игре под агента держим и то, и другое.

— Уяснил, — Тёма кивает. — Мне картинка, ему — пометка в коде. Заложим обе.

Игра собрана, проверена по списку, метки на месте. Осталось самое вкусное: как агент дотянется до доски руками, чтоб двигать фигуры.