Обзор
В этой серии мы рассмотрим, как использовать соответствие данных для создания таблицы баллов для крикета.
Следуйте @afewminutesofcode на Instagram и YouTube Для видеоконтента для этой серии и просмотреть оригинальную статью в afewminutesofcode.com
Часть 1 (Эта статья) Мы рассмотрим структуру данных, с которыми мы будем работать, структуру нашей кодовой базы, конечный результат и инструменты, которые мы собираемся использовать для ее создания.
Часть 2 Во второй части мы собираемся погрузиться в код и настроить некоторые константы для использования в наших различных функциях и создать функцию для расчета, когда команда выиграла, потеряна или не было результата.
Часть 3 В части 3 мы собираемся создать функцию для обработки итоги для таблиц, например, P/W/L/NR/RF.
Часть 4 В части 4 мы собираемся создать функцию для расчета оверса и чистой ставки.
Часть 5 В части 5 мы собираемся использовать структуру данных, которую мы создали для отображения пользовательского интерфейса с помощью React, а также сортировать таблицу баллов по баллам/победам/чистой ставке пробега.
Структура данных
Использование недавнего чемпионата мира в качестве примера данных, каждый матч будет иметь ниже поля.
Предполагая, что некоторые знания об игре в крикет, которые можно сказать ниже, должны быть легко понять, некоторые области, которые не являются общими областями, являются Тип (1 для группового матча и 2 для финала) и плавник (1 для завершения 0 для предстоящего).
Еще одна вещь, которую следует отметить в данных, заключается в том, что соответствует тому, что, где определяется метод Duckworth Lewis, есть рассчитанные оценки, чтобы иметь возможность создать правильную чистую скорость пробега для команды.
{
date: '2019-06-09',
type: 1,
fin: 1,
t1: 'IND',
t1NR: 0,
t1Ov: 50,
t1Ru: 352,
t1SupOvrR: 0,
t1SupOvrW: 0,
t1Wk: 5,
t2: 'AUS',
t2NR: 0,
t2Ov: 50,
t2Ru: 316,
t2SupOvrR: 0,
t2SupOvrW: 0,
t2Wk: 10,
dlmethod: false
}
Кодовая базовая структура
Мы будем хранить данные соответствия в данные Папка, как правило, вы получаете такие данные от API Но я хранил данные локально для этого курса, чтобы упростить ситуацию. Другие папки показаны ниже для вашей ссылки, но будут более подробно изучены на протяжении всего курса.
Конечный результат
Когда все вычисления будут сделаны, мы возьмем структуру данных и отобразим таблицу в React, как показано ниже.
Инструменты разработки
Мы добавим код в сообщения в блоге, чтобы вы могли использовать свой предпочтительный метод, однако мы будем использовать Создать-реакт-приложение экземпляр из CodeSandbox.io (с встроенным шутом).
Спасибо за прочтение обзора этой серии, теперь давайте приступим к бизнесу и построим таблицу очков крикета во второй части серии.
Оригинал: “https://dev.to/afewminutesofcode/create-a-cricket-points-table-in-javascript-part-1-49p1”