Три спроби зібрати шахи

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" — партія закінчилася, без жодних «здається». Людина вірить очам, машина вірить позначці. Тому в грі під агента тримаємо і те, і те.

— Зрозумів, — Тьома киває. — Мені картинка, йому — позначка в коді. Закладемо обидві.

Гру зібрано, перевірено за списком, позначки на місці. Залишилося найсмачніше: як агент дістанеться до дошки руками, щоб рухати фігури.