Создание рейтингов гладиаторов
GladiatorsBattle.com – это проект, который погружает пользователей в захватывающий мир Древнего Рима. Ключевой функцией сайта является система рейтинга гладиаторов, позволяющая пользователям ранжировать, делиться и обсуждать легендарных бойцов, как будто они вернулись в Колизей.
Наша цель — создать интерактивный, визуально привлекательный и ориентированный на сообщество опыт, сочетающий историческую значимость с современным веб-дизайном.
Технологический стек:
Для реализации системы рейтингов мы выбрали технологический стек, ориентированный на простоту, масштабируемость и взаимодействие в реальном времени:
- React: Архитектура React, основанная на компонентах, позволит создать модульный, многократно используемый и масштабируемый пользовательский интерфейс.
- Firebase: Мы использовали Firebase для реализации бэкенда:
- Firestore: База данных NoSQL в реальном времени для хранения и обновления рейтингов, лайков и комментариев.
- Firebase Auth: Бесперебойное управление аутентификацией и авторизацией пользователей, обеспечивающее безопасный доступ к данным.
- Firebase Storage: Хранение изображений гладиаторов и других медиа-ресурсов.
- React DnD: Библиотека React DnD обеспечила функциональность перетаскивания, делая процесс ранжирования интуитивно понятным как на настольных компьютерах, так и на мобильных устройствах.
- React Helmet и JSON-LD: Эти инструменты были необходимы для SEO-оптимизации, помогая нам структурировать метаданные и повышать видимость в поисковых системах.
Архитектура системы рейтингов:
Ключевой компонент – UserRanking.js. Именно здесь пользователи создают, упорядочивают и публикуют свои рейтинги. Этот компонент использует Firebase для хранения изображений и Firestore для хранения данных о рейтингах.
Загрузка изображений гладиаторов: Изображения асинхронно извлекаются из Firebase Storage с помощью метода getDownloadURL. Мы кэшируем URL-адреса, чтобы избежать ненужной повторной загрузки.
useEffect(() => {
const loadGladiatorImages = async () => {
const storage = getStorage();
const images = await Promise.all(gladiatorNames.map(async (name) => {
const imageRef = ref(storage, `gladiators/${name}.webp`);
return { name, imageUrl: await getDownloadURL(imageRef) };
}));
setGladiators(images);
};
loadGladiatorImages();
}, []);Рейтинг перетаскивания: хуки useDrag и useDrop из React DnD обрабатывают функциональность перетаскивания. Каждая карта гладиатора упакована в перетаскиваемый компонент, а каждая категория (например, S-tier, A-tier) служит целью перетаскивания.
const handleDrop = (category, gladiator) => {
setCategories(prevCategories => {
const updatedCategories = { ...prevCategories };
updatedCategories[category] = [...updatedCategories[category], gladiator];
return updatedCategories;
});
};Эта функция обеспечивает динамические обновления, позволяя пользователям постоянно совершенствовать свои рейтинги и получать немедленную обратную связь.
RankingCategory.js: Обработка целей сброса
Компонент RankingCategory.js регистрирует каждую категорию как цель сброса, обновляя ее содержимое, когда в нее сбрасывается гладиатор.
Обратная связь при падении: состояние isOver из useDrop обеспечивает визуальную обратную связь, когда гладиатор перетаскивается по категории, изменяя цвет его фона. Это улучшает UX, показывая, где будут размещены гладиаторы при падении.
const [{ isOver }, drop] = useDrop(() => ({
accept: 'GLADIATOR',
drop: (item) => onDrop(item),
collect: (monitor) => ({
isOver: !!monitor.isOver(),
}),
}));Такая визуальная обратная связь делает пользовательский интерфейс более интуитивным и привлекательным.
Мобильная адаптивность: Альтернативный выбор для мобильных пользователей Поскольку перетаскивание может быть сложной задачей на мобильных устройствах, мы внедрили запасной вариант. Пользователи мобильных устройств могут нажать на "гладиатор", чтобы открыть режим, в котором они могут выбрать категорию из выпадающего списка, что гарантирует доступность функции на всех устройствах.
Публикация рейтинга и вовлечение сообщества После создания рейтинга пользователи могут опубликовать его для привлечения сообщества. Эта функция публикации требовала нескольких уровней функциональности.
Публикация рейтинга Функция обработки публикации в UserRanking.js сохраняет рейтинг в Firestore в коллекции пользовательских рейтингов. Каждый документ с рейтингом содержит идентификатор пользователя, название, описание, категории и временную метку.
const handlePublish = async () => {
const rankingData = {
title,
description,
categories,
userId: auth.currentUser.uid,
createdAt: new Date(),
};
await addDoc(collection(db, 'userRankings'), rankingData);
};Эта функция является асинхронной для обеспечения надежности. Если пользователь не вошел в систему, ему предлагается пройти аутентификацию, что обеспечивает безопасность и целостность сообщества.
Просмотр опубликованных рейтингов и взаимодействие с ними После публикации рейтинг доступен для просмотра, комментирования и постановки лайков. Эти взаимодействия имеют решающее значение для создания чувства общности и вовлеченности в процесс GladiatorsBattle.com.
RankingDetail.js: Отображение подробного обзора опубликованных рейтингов Этот компонент отображает позицию каждого гладиатора в рейтинге, предоставляя пользователям подробный обзор.
Обновления в Firestore в режиме реального времени: благодаря возможностям Firestore, лайки и комментарии обновляются в режиме реального времени, обеспечивая мгновенную обратную связь и повышая взаимодействие с пользователями.
Система лайков и комментариев Компонент LikeAndComment позволяет пользователям взаимодействовать с рейтингами с помощью лайков и комментариев, способствуя вовлечению и обсуждению.
Переключение Like: Мы реализовали функцию переключения, которая добавляет или удаляет «нравится» в Firestore при нажатии.
const handleLikeToggle = async () => {
if (userLiked) {
await deleteDoc(userLikeDocRef);
setLikes(likes - 1);
} else {
await setDoc(userLikeDocRef, { userId: currentUser.uid });
setLikes(likes + 1);
}
};Лайки и комментарии отображаются в режиме реального времени, что создает ощущение интерактивности и гарантирует немедленное получение подтверждения от пользователей.
Разбивка комментариев на страницы и взаимодействие в режиме реального времени Комментарии выбираются и отображаются с обновлениями в режиме реального времени. Чтобы длинные списки комментариев не влияли на производительность, мы используем разбивку по страницам для управления комментариями, загружая ограниченное их количество на страницу с помощью кнопок навигации.
Дополнительные функции и усовершенствования
Пользовательская настройка Мы планируем обновления, которые позволят пользователям фильтровать гладиаторов по таким атрибутам, как боевой стиль или историческая значимость, предлагая более индивидуальный подход к игре для энтузиастов.
Таблица лидеров популярного рейтинга В таблице лидеров будут представлены рейтинги, которые больше всего понравились пользователям и получили больше комментариев, что способствует дружественной конкуренции и созданию продуманных и высококачественных рейтингов.
SEO и структурированные данные для повышения наглядности Для повышения наглядности и привлечения органического трафика мы внедрили лучшие практики SEO:
Оптимизация по ключевым словам: Каждый рейтинг включает такие ключевые слова, как Gladiator Rankings, Ancient Rome Gladiators, и Arena Combat..
Структурированные данные в формате JSON-LD: структурированные данные в формате JSON-LD улучшают отображение наших страниц в результатах поиска.
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "ItemList",
"name": "Legendary Gladiator Ranking",
"itemListElement": ranking.categories ?
Object.entries(ranking.categories).flatMap(([category, gladiators]) =>
gladiators.map((gladiator, index) => ({
"@type": "ListItem",
"position": index + 1,
"name": gladiator.name,
"category": category
}))
) : []
})}
</script>Эти структурированные данные помогают Google лучше понять страницу и повышают ее узнаваемость в результатах поиска, привлекая больше посетителей.
Технические проблемы и решения Задержка Firebase: Загрузка изображений и данных в режиме реального времени может привести к задержке. Оптимизировать это можно, локально кэшируя URL-адреса изображений и используя пакетную выборку данных.
Перетаскивание на мобильных устройствах: React DnD изначально не поддерживает мобильное перетаскивание, поэтому мы разработали систему выбора на основе модов для мобильных пользователей.
Защита от спама: Чтобы предотвратить спам-рассылку, мы ввели ограничение на количество лайков и комментариев, поддерживая высокое качество взаимодействия с сообществом.
Итоги
Создание системы рейтинга гладиаторов для Gladiators Battle стало захватывающим проектом, который позволил объединить современные технологии и историческую тематику. Используя React для создания интерактивного интерфейса, Firebase для надежной базы данных и облачного хранилища, мы воплотили в жизнь дух римской арены в онлайн-режиме.
Благодаря Firebase Hosting и GitHub Actions, создали масштабируемую функцию, управляемую сообществом, с легко интегрируемым взаимодействием игроков.
Интеграция Vertex AI открыла новые горизонты для развития игрового процесса. Теперь искусственный интеллект управляет противниками и испытаниями, добавляя глубину и реализм боевым действиям.
