Сказ о том, как гуманитарий кроссворды программировал⁠⁠

Из уже трёх с половиной лет преподавания перевода и немножко просто английского языка в Российском государственном гуманитарном университете последнее время я довольно активно налегаю на кроссворды, благо это вполне увлекательный способ повторить полезные слова из пройденных нами текстов. И использую я для этого написанную своими гуманитарными руками программку на HTML (плюс, разумеется, CSS и JavaScript, но далее для краткости буду писать просто «HTML» — по расширению итогового файла). А поскольку она за время своего существования заметно эволюционировала, я хочу поделиться здесь основными вехами её истории.

Пожалуй, первый вопрос, который может возникнуть у читателя, — «почему HTML?». Причин тому несколько:

• до этого я уже сделал пару инструментиков для работы именно на HTML;

• итоговый файл оказывается почти невесомым;

• .html работает везде, где есть браузер.

И вот так в один прекрасный день я открыл Visual Studio Code, скопировал предыдущую программу как шаблон, удалил всё лишнее и…

3 ноября 2023 года я созрел и таки приступил к написанию кода. Первый рабочий вариант программы вместе с пробным кроссвордом оказался достаточно ёмким и уместился примерно в 150 строк кода (без учёта дополнительно подключаемых стилей и скриптов). Сто́ит ли говорить, что он был ещё и ужасно примитивным? Между ячейками приходилось переключаться вручную, слова не были пронумерованы, сам кроссворд хранился в страшного вида массиве строк со значками «#» в качестве пустоты… Однако первый успех вдохновил двигаться дальше.

На момент 14 ноября появились первые улучшения: наконец-то кроссворды обзавелись списком вопросов, ответы на них стало возможным подсмотреть рядом с ними, а клетки стали квадратными и более аккуратными.

16 ноября на сетке кроссворда наконец-то появились номера вопросов (в упомянутых ранее массивах они ставились при помощи символов «>» и «^» для горизонтальных и вертикальных слов соответственно, а сам номер рассчитывался автоматически), то есть стало возможно быстро и легко находить их, а также я добавил выпадающий список кроссвордов, потому что даже в изначальном примитивном формате их хранения прямиком в коде страницы я сделал некоторое количество кроссвордов по переведённым для занятий текстам и между ними надо было как-то переключаться.

19 ноября программу ждали некоторые внешние улучшения (например, меню кроссвордов стало занимать всю ширину, чтобы их названия полнее отображались на телефоне) и возможность показать сразу все ответы прямо на сетке. Удобно это не только для повторения пройденного: поскольку первое время сетку я заполнял вручную очень кустарными методами, приходилось часто перепроверять, что же получается на практике, и отображение всех ответов сильно в этом помогало. Хотя ощущение неудобства, конечно, постепенно росло, особенно после составления одного кроссворда вместе со студентами на занятии.

12 декабря я наконец-то приступил к созданию конструктора кроссвордов, дабы навсегда оставить расстановку всего и вся в массиве строк в прошлом. И вот первая версия конструктора уже позволила добавлять слова и редактировать их описание и положение на сетке.

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

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

25 декабря в кроссвордах появились непрерывный ввод слов при нажатии на его номер, что значительно упростило отгадывание, и переключение между номерами при нажатии на Tab. То бишь решать кроссворд стало можно и без отрыва от клавиатуры.

29 декабря конструктор претерпел ещё ряд изменений: поле ввода всех слов и их меню теперь стало возможно сужать и расширять, а набор кнопочек пополнился добавлением слова на сетку, его поворотом и удалением с сетки.

31 декабря я прикрутил изменение размера вообще ко всему кроссворду, благодаря чему составление новых кроссвордов слегка упростилось за счёт большего обзора.

16 января 2024 года я начал работу над настройкой цветов программы, чтобы дать пользователю самому выбирать их сообразно своим предпочтениям и настроению.

На момент 25 января поддержка цветовых схем была наконец готова: с этого дня стало возможным настраивать все четыре цвета программы, сохранять получившиеся цветовые схемы и загружать их. А при перезагрузке страницы они успешно загружались сами из local storage.

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

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

И несколько месяцев я был в целом доволен результатом. Но в ноябре 2024 произошло то, чего я сам от себя не ожидал: несмотря на большие усилия, приложенные к кроссвордам, я решил переписать их с нуля (хотя отдельные части переписывал и до этого). Недовольство недочётами собственного кода оказалось сильнее нежелания переделывать почти всё, но это того стоило, ведь я наконец-то сумел применить некоторые новые знания и просто сделать код гораздо аккуратнее, что явно никогда не будет лишним.

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

А 13 декабря для пущей красоты я добавил небольшой визуальный эффект: теперь при старте игры все клетки кроссворда подсвечиваются по диагонали начиная с верхнего левого края.

Напоследок покажу процесс от создания простейшего кроссворда до его разгадывания.

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

Желающие опробовать показанное мной самостоятельно могут найти мои творения на GitHub (старые кроссворды на данный момент лежат в папке Crosswords, а новые — в New Crosswords, позже я переименую их соответственно в Old Crosswords и Crosswords, чтобы подчеркнуть переход к обновлённому варианту).

Успехов всем в преподавании и программировании и спасибо за внимание!