Як я робив realtime рулетку на NodeJS & VueJS

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

Забігаючи вперед хочеться показати результат:

Як все починалося

Звернувся якось до мене один мій старий замовник, і запропонував пофанитися і зробити багатокористувацьку онлайн рулетку на сокетах. Бюджет непоганий, терміни стислі. Ну ок. Почему бы нет, руки уже чесались, но без бекенда я не начинал... Як тільки з'явився перший варіант бекенду. Я відразу ж почав діяти. У руки мені потрапив начерк дизайну, і закрутилося завертілося.

Трохи верстки

Насамперед я зробив верстку дошки ставок. Всі на HTML, CSS, але якщо бути чесним то я взяв її тут. Якийсь добрий чоловік виклав її на gitHub. Низький уклін йому. Звичайно надалі її довелося допиляти. Але основа вже є

Ну ок, друга задача це механіка ставок

Для реалізації даної задачі я вирішив розбити мій маленький VueJS додаток на кілька модулів, вірніше Vuex state модулів, для зручності використовував вбудований неймспейсинг

Так я зберігаю інформацію про комірки

Принцип роботи hover

1. Всі комірки - це масив об'єктів з такими полями як label, isHover
2. Слухаю подію mouseover над комірками
3. З кожної події наведення виводжу координату
4. Будую квадрат на основі мінімуму/максимуму, залишаючи координату в центрі фігури
5. Визначаю які комірки знаходяться під квадратом, і ставлю їм hover: true, іншим false
6. Мутую state у сховищі (Використовую Vuex)
7. Вуаля, VueJS підхоплює зміни і додає hover класи для комірок під мишкою (цікаво звучить)

По кліку підсвічені комірки пишуться в масив ставок

Насправді відбувається цілий цикл дій

У підсумку ми отримуємо ось такий масив ставок

Розташування фішок

Фішки розмістилися на другому шарі над дошкою, при появі нового елемента в масиві фішка вилітає зі своєї стосу, плавна анімація реалізована за допомогою типового transition вбудованого у VueJS

Насамкінець

Хочеться відзначити міць frontend фреймворку VueJS. Його легкість і просто яку я випробував в ході роботи з ним. Раніше мені багато доводилося з ним працювати, але всі завдання - не більше ніж SPA для адмінів/CRM тощо.

У наступній частині мого оповідання ми зачепимо здебільшого бекенд, віреніше його відсутність і те як я викрутився з цієї ситуації.

UPD: Для наочності на початок статті я додав відео з підсумковим результатом.