https://github.com/logaka/chooser-front
https://github.com/Logaka/Chooser-Back back project
https://github.com/logaka/chooser-front
Last synced: 12 months ago
JSON representation
https://github.com/Logaka/Chooser-Back back project
- Host: GitHub
- URL: https://github.com/logaka/chooser-front
- Owner: Logaka
- Created: 2025-04-28T14:54:27.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-28T20:20:07.000Z (about 1 year ago)
- Last Synced: 2025-05-31T20:05:04.043Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://chooser-front-orpin.vercel.app
- Size: 823 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chooser - Интерактивное приложение для случайного выбора
Chooser - это интерактивное веб-приложение для случайного выбора участника из группы людей с возможностью выполнения заданий и игрой на выбывание.
## Описание проекта
Приложение позволяет выбирать случайного человека из группы участников, которые касаются экрана. В режиме заданий выбранному участнику предлагается выполнить определенную задачу различной сложности. В режиме выбывания участники, не выполнившие задание, выбывают из игры, пока не останется один победитель.
### Основные функции:
- Случайный выбор участника из группы
- Режим заданий с различной сложностью
- Режим выбывания с постепенным уменьшением допустимого количества игроков
- Таймер для ограничения времени выполнения заданий
- Визуальная анимация при выборе участника
- Фоновая музыка
## Установка и запуск
### Требования
- npm
- Веб-браузер с поддержкой современных JavaScript API
### Установка
1. Клонируйте репозиторий:
```
git clone https://github.com/yourusername/Chooser-Front.git
cd Chooser-Front
```
2. Установите зависимости (если таковые имеются):
```
npm install ( optionall )
```
### Запуск
1. Запустите локальный сервер:
```
npm install -g live-server
live-server --host=0.0.0.0 --port=8000
```
или используйте любой другой локальный сервер по вашему выбору.
2. Откройте приложение в браузере:
```
http://localhost:8080
```
## Процесс проектирования и разработки
Приложение разработано с использованием модульной архитектуры, где каждый компонент отвечает за определенную функциональность:
- `script.js` - основная логика приложения, обработка взаимодействия с пользователем
- `settingsModal.js` - управление настройками приложения
- `taskModal.js` - отображение и обработка заданий
- `music.js` - управление звуковым сопровождением
Процесс разработки включал в себя следующие этапы:
1. Проектирование пользовательского интерфейса
2. Разработка базовой функциональности выбора участника
3. Добавление режима заданий
4. Реализация настроек приложения
5. Добавление режима выбывания
6. Тестирование и отладка
## Уникальные подходы и методологии
1. **Мультитач-взаимодействие**: Приложение разработано с учетом одновременных касаний нескольких пользователей, что делает его идеальным для групповых сессий.
2. **Интеграция с бэкендом**: Использование REST API для получения заданий и управления игровыми сессиями, что делает логику более гибкой и расширяемой.
3. **Сохранение состояния**: Использование localStorage для сохранения настроек пользователя между сессиями.
4. **Динамическая конфигурация**: Возможность настройки API URL через конфигурационный файл, что облегчает развертывание в различных средах.
## Компромиссы при разработке
1. **Простота UI vs. функциональность**: Выбор в пользу минималистичного интерфейса для обеспечения простоты взаимодействия, несмотря на богатую функциональность.
2. **Локальная обработка vs. серверная валидация**: Баланс между локальной обработкой событий и серверной валидацией для обеспечения быстрого отклика приложения.
3. **Поддержка устройств**: Оптимизация для мобильных устройств и планшетов, с учетом ограничений настольных компьютеров для мультитач-взаимодействия.
## Известные проблемы и ограничения
1. **Подлагивание и задержка**: Возможны подлагивания и задержка при первой попытке игры, важно понажимать на кнопки и подождать
1. **Зависимость от бэкенда**: Для полной функциональности требуется работающий бэкенд-сервер с соответствующим API.
2. **Производительность анимации**: На устройствах с низкой производительностью анимация может работать нестабильно.
## Выбор технологического стека
### Frontend:
- **Vanilla JavaScript**: Выбран для обеспечения максимальной производительности и минимальных накладных расходов, особенно важных для мультитач-приложений.
- **HTML5**: Используется для высокопроизводительной графики и анимации.
- **Bootstrap**: Обеспечивает адаптивный и современный интерфейс с минимальными затратами на разработку.
- **LocalStorage API**: Простое и эффективное решение для хранения пользовательских настроек.
### Серверная интеграция:
- **REST API**: Простой и понятный протокол для взаимодействия с сервером.
- **JSON**: Легкий формат обмена данными с минимальными накладными расходами.
Данный стек был выбран для обеспечения оптимальной производительности, простоты разработки и поддержки, а также максимальной совместимости с современными устройствами. Отсутствие тяжелых фреймворков позволяет приложению быстро загружаться и работать даже на устройствах среднего уровня.
## Лицензия
[MIT](LICENSE)