Pull to refresh

Как я делал realtime рулетку на NodeJS & VueJS

Reading time 2 min
Views 12K

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


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



Как все начиналось


Обратился как-то ко мне один мой старый заказчик, и предложил пофаниться и сделать многопользовательскую онлайн рулетку на сокетах. Бюджет неплохой, сроки сжатые. Ну ок. Почему бы нет, руки уже чесались, но без бекенда я не начинал… Как только появился первый вариант бекенда. Я сразу же начал действовать. В руки мне попал набросок дизайна, и закрутилось завертелось.


Немного верстки


Первым делом я сделал верстку доски ставок. Все на 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: Для наглядности в начало статьи я добавил видео с итоговым результатом.

Tags:
Hubs:
0
Comments 8
Comments Comments 8

Articles