Web-доски
Давно просили сделать приложение на телефон или что-то подобное для моих игр. Изначально я планировал оставить свои наборы только в физическом виде, но решил создать цифровую версию — хотя бы как макетный стол для себя, чтобы отлаживать баланс, расстановку и другие детали. Широко распространять и слишком развивать не планирую. Во многом сделано в рамках улучшения своих навыков Vue.js и построению веб-приложений.
Я не занимаюсь мобильными приложениями, и эта сфера мне не интересна. Моя основная специальность — веб-разработка, поэтому я выбрал знакомый и подходящий стек: Vue.js + PHP. Формат данных — не JSON, а собственная разработка для ускорения обмена и минимизации трафика.
Выберите игру, отправьте полученную ссылку другу и начинайте перетаскивать фигурки. Обычно этого достаточно для большинства игр.
На данный момент готовы:
Будут пополняться по мере подготовки новых физических наборов.
Сервер
Простой stateful сервис на PHP, выполняющий только запись и выдачу определённых структур данных. Поддерживает методы:
- Запись полной доски: init.
- Изменения состояния элементов: move, rotate, flip.
- Запрос всей доски: state.
- Запрос очереди: queue.
Формат данных — собственный, достаточный для всех игр, которые я планировал реализовать. Всё поле хранится в одном текстовом файле построчно. Изменения синхронизируются через файл очереди, содержащий последние 10 операций. Синхронизация изменений происходит через посекундный AJAX, а полная синхронизация поля — раз в минуту для коррекции возможных неточностей обмена.
Клиент
Написан на компонентах Vue.js. Каждая игра реализована как однофайловый компонент с отдельными ассетами и стилями. Общий код максимально переиспользуется, что упрощает добавление новых игр, если они используют уже готовые механики.
По возможности реализованы все особенности всех и удобное управление как с компьютера, так и с телефона.
Обычно управление выглядит так:
- Перетаскивание фигуры на фигуру — захват.
- Двойной клик по фигуре — переворот на другую сторону.
- Двойной клик по карте — передача карты.
- Двойной клик по фону — передача хода.
Подробности управления смотрите в инструкциях к играм. На компьютере и телефоне оно может отличаться.
Для лучшего опыта, если один из игроков использует телефон, создавайте игру на телефоне. В этом случае фигуры выстроятся сверху и снизу от поля, что нормально работает и на компьютере. Если же игру создать на компьютере, а второй игрок подключится с телефона, фигуры расположатся слева и справа от поля, что может быть неудобно на мобильном устройстве.
Ассеты
Взяты оригинальные изображения — те же, что используются для создания физических наборов. Подготовлены в виде спрайтов. Если элементы переворачиваются, их стороны хранятся как отдельные файлы. Переворот — это просто замена картинки для данного элемента.People have long asked me to create a phone app or something similar for my games. Initially, I planned to keep my sets purely physical, but I decided to build a digital version—at least as a prototype table for myself to tweak balance, layout, and other details. Much of it was done to enhance my Vue.js skills and experience in building web applications.
I don’t work with mobile apps, and that field doesn’t interest me. My main expertise is web development, so I chose a familiar and suitable stack: Vue.js + PHP. The data format isn’t JSON but a custom solution designed to speed up exchanges and minimize traffic.
Pick a game, share the generated link with a friend, and start dragging pieces. That’s usually enough for most games.
Currently available:
More will be added as new physical sets are prepared.
Server
A simple stateful PHP service that only handles writing and retrieving specific data structures. Supported methods:
- Full board recording: init.
- Element state changes: move, rotate, flip.
- Full board request: state.
- Queue request: queue.
The data format is custom, sufficient for all the games I planned to implement. The entire field is stored in a single text file, line by line. Changes are synced via a queue file holding the last 10 actions. Updates sync every second via AJAX, with a full board sync every minute to correct any exchange errors.
Client
Built with Vue.js components. Each game is a single-file component with separate assets and styles. Shared code is reused as much as possible, making it easy to add new games that leverage existing mechanics. I don’t plan to widely distribute or heavily develop it.
Where possible, all game features and convenient controls for both computer and phone are implemented.
Typical controls:
- Dragging a piece onto another piece — capture.
- Double-clicking a piece — flip to the other side.
- Double-clicking a card — pass the card.
- Double-clicking the background — pass the turn.
See game instructions for details. Controls may differ between computer and phone.
For the best experience, if one player is on a phone, start the game on a phone. Pieces will align above and below the field, which works fine on a computer too. If started on a computer and a second player joins from a phone, pieces will align left and right of the field, which can be inconvenient on mobile.
Assets
Original images are used—the same ones for physical sets—prepared as sprites. For flippable elements, each side is stored as a separate file. Flipping simply swaps the image for that element.