Автоселектор

Нужен для объявления финалистов на Унивидении. Проект написан на React, для анимации использован Framer Motion. На проекте используются вебсокеты для коммуникации между страницами настроек и интерфейсной частью.

Доступные страницы

• / - объявление финалистов для полуфинала
• /final - объявление финалистов для финала
• /settings - настройки для полуфинала
• /final-settings - настройки для финала

Как настроить проект

В файле src/config.js указан список факультетов, их лого и цвета. Также там прописан адрес бэкенда и веб-сокета.

Для изменения фона можно просто заменить файл /public/assets/background.png, логотип унивидения -- /public/assets/bacground.png, логотипы факультетов -- /public/assets/logos.

Полуфиналы

На странице settings есть опции с выбором факультетов-участников, сначала нужно выбрать их, отправить на сервер (тык на кнопку ""). После этого заполнить победителей (тык на кнопку "Решить судьбу унивидения"). Также нужно всегда заполнять поле "пароль", он валидируется на сервере.

Перед началом объявления победителей, нужно обновить страницу с участниками.

Для того, чтобы на странице с финалистами объявился следующий финалист нужно нажать на кнопку "продвинуть сюжет", перед этим также заполнить "пароль".

Финал

На странице final-settings есть опции с выбором факультетов-участников, при выборе факультета сразу отображается форма для ввода его баллов. Нужно заполнить все факультеты и отправить их на сервер (тык на кнопку "Решить судьбу унивидения"). Также нужно всегда заполнять поле "пароль", он валидируется на сервере.

Для того, чтобы на странице с финалистами объявился следующий финалист нужно нажать на кнопку "продвинуть сюжет", перед этим также заполнить "пароль".

Как поднять проект локально

npm i

npm start

Как задеплоить проект

npm run build

Настройка nginx

npm install nginx
rm -rf /var/www/html
cp -r build /var/www

В файле frontend.conf и .env(создать их по образу и подобию экзамплов) задать домейн/ip-адрес сервера и переместить его в /etc/nginx/conf.d

cp frontend.conf /etc/nginx/conf.d/

На всякий случай закоментить строчку include /etc/nginx/sites-enabled/*; в etc/nginx/nginx.conf И перезапустить nginx

sudo systemctl restart nginx

Репозиторий бэкенда для этого проекта

https://github.com/LiaSolo/univision_backend.git

Полезные заметки

• Можно подключиться к серверу по ssh и редактировать прямо в Visual Studio Code (установить расширение Remote SSH)
• Количество факультетов в строке: src/pages/<название страницы>/style.css .FacultyPointList grid-template-rows: 1fr - столько раз, сколько элементов в строке
• Чтобы изменить цвет полос факультетов, которым выставлены зрительскиие баллы, изменить setTimeout(() => setColor('rgba(155,255,148,0.5)'), 3000) согласно кодам цветов rgb в src/components/FacultyPoints/index.js

useEffect(() => {
        if (currFac && id === currFac.faculty) {
            setColor('rgba(0, 0, 0, 0.5)');
            setTimeout(() => setColor('rgba(155,255,148,0.5)'), 3000);
        }
    }, [currFac])