Купил тут на днях твистер. Да, тот самый, который ковер с разноцветными кружками и "рулетка", неплохое развлечение для компаний, где все друг друга знают и не очень стесняются. Рулетка оказалась отвратительного качества (плохо крутится, если держать не горизонтально, то стрелка поворачивается в одну и ту же сторону).

С удивлением обнаружил, что в интернетах "эмуляторы рулетки для твистера" все унылые и не похожие на физическое воплощение. По этому решил сделать свой. Ну и заодно попрактиковаться в vue, i18n, изучить настройку vite и вот это всё. И вот результат:

https://yatr.fragster.ru/

К тому же сделано оно в качестве PWA, по этому его можно "установить" на устройство (из меню браузера), и оно будет работать не только онлайн, но и без интернета (На рабочий стол добавится ярлык). При запуске с ярлыка оно будет очень похоже на обычное приложение - не будет адресной строки и прочих элементов управления браузера.

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

Скорость крутилки сделай медленнее. Слишком быстро

(1) там рандом, одна секунда до 10 оборотов

можно, конечно, сделать до 5

да и со временем тоже можно поиграться

(0) Можно еще сделать анимацию простенькую для "одаренных" что нужно делать, так же можно статистику прикрутить тех кто играет (ввод игроков и управление очками), чтобы был какой-то соревновательный стимул. Ну и настройка цветов (я хз как там у твистера устроено, может есть с другими цветами кружки)

Я бы еще добавил зависимость точки клика от расстояния до центра.

Ну и заголовок бы на русский перевести, если выбран одноименный язык

(7) вот это дельно

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

(7) https://i.imgur.com/VdKxngr.png ?

(9) в онлайн играх сделано чутка по другому. Первым кликом запускается рулетка, а вторым кликом она начинает замедляться и останавливается в определенный момент. Может тут такой же вариант зайдет. Сам факт, что рулетка должна крутиться чуть дольше создает эффект ожидания, если рулетка будет быстро выдавать результат, то его можно не получить.

(10) пойдет👍

(11) ты пробовал крутить твистерную рулетку, стоя "в позе" (вариант без ведущего)?

(13) Я вообще не припомню, чтобы в это играл (может было в студенческую пору)
Но видеть - видел как играют, обычно с ведущим.
Если без ведущего, тогда нужно так Окей, Алиса, запускай рулетку!

(0) респект

(13) а как играть, если вас двое и оба на корячках стоите? Тут даже телефон в руки не взять)

А пользователей я бы все же добавил. Чтобы было понятно кто сейчас ходит и кому руку/ногу ставить

(16) телефон валяется рядом с полем, кто может - то дотягивается. а вообще оптимально 3-4 человека, если 5 и более, то отдельный ведущий

вдвоем не очень прикольно

(18) А как насчет голосовых команд и отдельного приложения для мобилок?)

(20) голосовые команды - прикольно, но, боюсь, не потяну. Алиса - это для тех извращенцев-эксгибиционистов, которые хотят товарищу майору все разговоры транслировать.

Отдельное приложение для мобилок для практики можно, конечно, собрать. Но как залить его в сторы? Там же сейчас не заплатить за аккаунт. Ну и в текущем варианте на мобелке, я же говорю, добавляется в приложения ярлыком и выглядит прям вообще как приложение.

(21) Тут не обязательно Алису использовать. Вот к примеру https://habr.com/ru/company/just_ai/blog/514290/

Есть готовые SDK для голосовых команд, вам там нужно максимум пару фраз прикрутить на разных языках

А приложуху можно и не через store распространять, можно ссылку на вашем сайте сделать, для скачивания apk к примеру, либо через наши площадки)

(24) скачивания? не проще в таком случае добавить прям с сайта без установки?
https://i.imgur.com/4Z3nBQe.png
https://i.imgur.com/RbQYlJn.png

(25) круто, не знал о таком)

Не рабоатет как pwa

(27) хм... у меня картинки почему-то не показываются (если выключить интернет), а так - работает https://disk.yandex.ru/i/cICjtMHibsK9Lw

при этом хром сам предлагает установить. только сплеш скрин стремноват (прозрачные области черным залиты)

(0) Не похоже на физическое воплощение. Невозможно влиять на начальную скорость вращения стрелки. Хотелось бы, чтобы чем быстрее свайпнул, тем быстрее она крутится, чтобы было реалистично.

(30) чисто для прикола посмотри в интернете, какое там всё унылое. А эксперименты со свайпом и "физикой вращения" не принесли удовлетворения. В итоге оставил по сути визуализацию рандома.

(31) Зачем равняться на плохие? Даже смотреть не хочу то что хуже.

(27) Конечно не будет. Для PWA нужен интернет. Это же по сути просто ссылка на web-страницу, размещенная на рабочем столе. Нажимаешь на ссылку, открывается окно браезура без элементов управления, загружает страницу. Если нет интернета, что-то может взять их кэша, но если он устарел, то ничего не будет.

(33) нет, ссылка на веб страницу и pwa немного разные вещи. почему не кэширует svg я посморю на досуге. остальное же всё работает оффлайн, см. (28)

(34) Совсем немного. Браузер делает запрос на сервер в зависимости от параметров кеширования каждого файла. Это в заголовках ответа обычно настраивается.
Либо нужно специально в PWA настраивать параметры кеширования и загрузки ресурсов. Их можно загрузить отдельно.

(35) ну вот там и настроено, но, видимо, где-то ошибся

https://i.imgur.com/Uw5FcEe.png

(37) Это немного не то. Почитай за Service workers. Это отдельная прослойка между твоим приложением и интернетом. Там можно все загружать когда есть инет, и отдавать файлы из кеша когда интернета нет.

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

(38) все прочитал. в js файле необходимые строки прописаны

(40) Тогда все работает, если все прописано.

Интересно, а через этот pwa можно взаимодействовать с телефоном? К примеру сканером на тсд, камерой, gps и прочими фишками?

(41) да, нашел опечатку. теперь норм оффлайн работает.

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

в ТСД я настраивал сканер в режим HID и прикручивал https://github.com/FragsterAt/barcode_hid_reader

(45) прикольно

(42) Есть несколько ограничений по сравнению с обычными приложениям. Нет прямого доступа к Face ID, к Siri, размер приложения ограничен (кажется, 50 мегабайт, если память не изменяет). Раньше не поддерживались Push-уведомления, но вроде их уже внедрили, или собираются внедрить.

Я сейчас только PWA пишу, обычные не делаю. Буквально вчера вот одно сделал: Сделал приложение для программирования в Виртуальной Реальности
Потому что PWA проще - это просто веб-страницв, которую можно открыть на ПК, можно в телефоне, везде работает, легко отлаживать и тестировать.