21 subscriber

C. Фабрика клонов. Чемпионат по программированию Яндекса: Фронтенд, Квалификация

За окном 2319 год. Корпорации клонируют успешных сотрудников, чтобы они выполняли сложные задачи.

На производстве клонов решили маркировать новые «изделия» с помощью татуировки с баркодом на плече — чтобы отличать клонов между собой.

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

Формат информации о клоне

Информация о клоне хранится в следующем виде:

type CloneInfo = {  
    /**  
     * Пол клона — строка ’male’ или ’female’  
     */  
    sex: string;  
    /**  
     * Идентификатор клона — строка из маленьких и больших  
     * латинских букв и цифр, строго 10 символов  
     */  
    id: string;  
    /**  
     * Имя клона — строка из маленьких и больших  
     * латинских букв и пробелов (от 0 до 26 символов)  
     */  
    name: string;  
}

Алгоритм отрисовки баркода

Баркоды, которые используют на фабрике клонов, выглядят так:

C. Фабрика клонов. Чемпионат по программированию Яндекса: Фронтенд, Квалификация

Баркод имеет фиксированный размер — 148 на 156 пикселей. По периметру баркода находятся чёрная и белая рамки по 3 пикселя шириной каждая.

Внутри рамок находится контент баркода, состоящий из 18 строк по 17 чёрных или белых квадратов в строке. Размер каждого квадрата — 8 на 8 пикселей.

Белые квадраты в контенте кодируют 0, чёрные — 1.

Алгоритм формирования контента баркода

На пересечении первой строки и первого столбца контента отрисовывается квадрат, кодирующий пол клона. Значение female кодируется нулём (белый цвет), male — единицей (черный цвет).

Далее из полей id и name формируется строка вида <id><name>. Поле name дополняется пробелами в конце до 26 символов.

Полученная строка конвертируется в байтовый массив — каждому символу строки ставится соответствующий ASCII-код (число от 0 до 255).

Затем каждый элемент полученного массива переводится в двоичную запись (восемь сивмолов 0 или 1) и кодируется последовательностью из восьми квадратов (0 — белый квардрат, 1 — чёрный квадрат). Квадраты отрисовываются в контенте баркода последовательно и построчно.

В последней строке контента находится контрольная информация.

Алгоритм подсчёта контрольной информации

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

Формат решения

Загружаемое вами решение должно содержать функцию renderBarcode:

/**  
 * Отрисовать баркод для татуировки клона в element  
 * @param cloneInfo {CloneInfo} - информация о клоне  
 * @param element {HTMLDivElement} - div с фиксированным размером  
 *     148x156 пикселей, в который будет отрисовываться баркод  
 */  
function renderBarcode(cloneInfo, element) {  
    // ваш код  
}

Решение будет запускаться в браузере Google Chrome 77.

Примеры работы

Информация о клоне:

{  
    "sex": "male",  
    "id": "c5j818dyo5",  
    "name": "Oleg Vladimirovich"  
}

Баркод:

C. Фабрика клонов. Чемпионат по программированию Яндекса: Фронтенд, Квалификация

Информация о клоне:

{  
    "sex": "female",  
    "id": "0owrgqqwfw",  
    "name": "Dazdraperma Petrovna"  
}

Баркод:

C. Фабрика клонов. Чемпионат по программированию Яндекса: Фронтенд, Квалификация