Давным-давно в той же галактике я начал пытаться создать Freecell, чтобы изучить Angular 1.3.

Я зашел так далеко, а потом отвлекся на другие вещи, например, на сторонние проекты.

Недавно у меня появилось немного свободного времени (знаю, я тоже этого не ожидал), и поэтому я подумал, что попробую еще раз.

По сути, я начал с нуля, потому что Angular 1.3 меня больше не интересует, и я склонен использовать VueJS для своих веб-материалов, если мне нужен фреймворк.

Чтобы увидеть результаты, они доступны на github.io: нажмите здесь, чтобы сыграть в freecell!

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

Это означает, что логика игры полностью отделена от логики представления, что упростило написание этой игры.

Это было еще не все, так как я по какой-то причине решил хранить карты в 2D-зубчатом массиве. Неплохая идея, но каждый внутренний массив представляет собой столбец, и поэтому, когда я пытался правильно расположить карточки в сетке CSS, я не мог просто перебрать внешний, а затем внутренний, например

Потому что в этом случае столбцы будут разбиты на строки. Поэтому мне пришлось использовать индексы (почему VueJS не начинается с 0???), а не объекты и перебирать внешний массив во внутреннем цикле:

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

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

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

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

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

В целом я доволен результатом, даже несмотря на то, что некоторые ошибки остались незамеченными.