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

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

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

Даже в таком приложении, как это: https://us-game-alien.herokuapp.com/play, где целью является обучение, а не столько соревнование, мой партнер и я все равно чувствовали инстинктивную потребность сделать вне конкуренции, поэтому нам нужно было создать таблицу лидеров.

У нашего приложения есть интерфейс React с бэкендом Rails, и поэтому может быть несколько разных способов решения проблемы, но некоторые из этих методов может быть проще реализовать, чем другие. Я расскажу о двух рассмотренных нами вариантах.

При определении того, как приступить к настройке таблицы лидеров, следует учитывать две важные вещи: откуда берутся данные таблицы лидеров и как они сортируются. Мой партнер и я закончили тем, что передали большую часть логики и создания таблицы лидеров на бэкенде Rails. Здесь важно отметить, что для нашего проекта у нас была игровая модель, в которой были атрибуты как для времени, прошедшего с начала игры, так и для количества предположений, сделанных для правильного ответа на все 50 вопросов. В идеальной игре было бы 50 ходов, поэтому, чтобы повысить точность для наших игроков, мы хотели в первую очередь сортировать по количеству ходов, а затем использовать время в качестве тай-брейка. Например, тот, кто завершил игру всего с 50 угадыванием за четыре минуты, будет выше в таблице лидеров, чем тот, кто завершил игру за 60 угаданий за четыре минуты. Чтобы все это настроить, нужно выполнить несколько шагов, и их нельзя делать в произвольном порядке. Сначала нам нужно написать маршрут для нашей серверной части Rails. В файле routes.rb наш маршрут таблицы лидеров выглядел примерно так:

Затем нам понадобился метод контроллера для генерации данных. В нашем игровом контроллере мы написали метод, названный лидером, который полагается на метод Ruby sort_by, который для наших целей выглядит так:

В моем ограниченном опыте использования метода sort_by чаще всего выполнялась сортировка только по одному атрибуту, но, как показано выше, его можно использовать для сортировки по нескольким атрибутам. Первый атрибут, в данном случае «ходы», сначала сортирует игры, а затем второй атрибут «время» будет использоваться для упорядочивания игр, которые были завершены за такое же количество ходов. Затем, поскольку нам нужны только лучшие игры для таблицы лидеров, функция среза предоставит нам только 10 лучших игр. Наконец, последняя строка метода таблицы лидеров позволяет при посещении маршрута таблицы лидеров предоставлять данные в формате json, которые потребуются для отображения информации с помощью интерфейса React.js.

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

  1. Выполните вызов функции / leaderboard и сохраните полученные данные в состоянии вашего компонента. Здесь может быть полезно использовать метод жизненного цикла componentDidMount (), чтобы гарантировать, что данные будут доступны для страницы, как только страница будет загружена. Вот как выглядит наша:

2. Внутри элемента упорядоченного списка перебирайте данные, которые находятся в состоянии, чтобы создать элементы списка для каждого. Код может выглядеть примерно так:

<ul>
{this.state.leaderboardGames.map(game => <li key=game.id>{<game.user.name}</li>)}
</ul>

3. В зависимости от личных предпочтений добавьте любую дополнительную информацию / CSS.

Другой вариант создания таблицы лидеров - это обработка логики сортировки игр и информации во внешнем интерфейсе. Однако важно отметить, что это может быть не только сложнее, но и неэффективнее. Шаги будут выглядеть примерно так:

  1. Для получения списка игр все равно потребуется маршрут, но в этом случае он может просто предоставить несортированный список каждой игры, в которую играли.
  2. Во внешнем интерфейсе будет выполнен вызов функции / games, который затем сохранит все эти игры в состояние.
  3. Напишите несколько вспомогательных функций для сортировки этого списка игр, чтобы отсортировать их по количеству ходов, а затем по времени. Также не забудьте сократить этот список до 10 лучших игр.
  4. Наконец, список игр может быть отображен с использованием того же кода, что и на втором шаге предыдущего примера.

Для меня очевиден выбор обработки логики на задней панели. Во-первых, если бы игра достигла большего масштаба, мы бы не хотели получать список каждой отдельной игры каждый раз, когда просматривается таблица лидеров - этот список может в конечном итоге содержать многие тысячи элементов, если в игру сыграет достаточное количество людей. Затем лично я обнаружил, что сортировка элементов в Ruby намного проще, чем сортировка в JavaScript, особенно когда разница в атрибутах времени для двух игр может отличаться только на несколько долей секунды.

Я надеюсь, что всем понравится игра, на которую я ссылался выше, и удачи в попадании в таблицу лидеров.